[Phpmyadmin-devel] Create table dialog - Developers

25 Jun 2011


      I apologize for my directness but the newly implemented 'Create table'
Dialog has an awful usability. Especially once you've added 2 more
columns.
The idea of AJAXifying pma is to increase the usability, but with a
small dialog where I have to scroll horizontally and vertically
several time to create the table, it will take me way way longer
compared to the old create-table interface.
I don't know if its just me, but I see so many things gone wrong with
this dialog.
Some things I would change globally (taking the create table dialog as
example) :
 - Decrease the massive amounts of padding/margin of the jquery ui dialogs.
   - I don't need a 40 pixel high title telling me that I'm currently
creating a table.
   - Did you notice that there's is a 900 x 60 pixel (!) area that
only performs a single function: Containing the cancel button. This
should be either drastically reduced in size or removed altogether
(and put the cancel button inside the content)
 - Decrease those massive margins and paddings around input fields.
Those should be made big only where it actually improves the
usability/readability. I would reduce the margin/padding from 6/4 to
2/2
And for the create table dialog:
 - Display always in horizontal mode! Hardly any tables contain just 2 columns.
 - Start always with 4 fields
 - Bug: You can actually open the dialog several times, cause the
enum/set editor to be in the background
 - Make all selects and text inputs way shorter. I'd reduce them by
~30% (selects as well!). The length/value field I would reduce by
50-70% or so.
 - The null and A_I checkbox waste big amounts of space. I would put
them together in the form of " [ ] Null   [ ] A_I " in a column called
"Options"
- Remove the "Table name:" title, instead put 'Table name' into the
input field that disappears once the user focuses it
- Instead of "Add x tables [Go]" which does it's own ajax request I
would place a link "Add column" that adds one single column, but
therefore adds it immediately (no ajax here!), allowing users to just
spam click the link if they need a lot. Or alternatively use a select
list that contains the numbers from 1 to 10 which adds columns
immediately on the onchange event.
- Display the input field for the default value only after "As
defined:" is selected, and also focus it automatically once its
selected so the user can type immediately
- Why do we have these footnotes at the bottom of the dialog when we
got PMA_showHint()? (Forgot to initialize them in js?)
- For all the form fields below the columns: Remove all the gradient
backgrounds on the titles. What are they there for?
- In whatever way, put the Save and Cancel button side by side
- The enum/set editor I find so bad, I don't even know how you could
improve that:
  - If my table would be having 3 enums, I get 3 times this sentenced
thrown onto my screen causing the columns table to get even bigger.
  - The dialog itself has a completely different style than everything
else in PMA and really badly implemented. Just some bugs:
    - Values for column "" -  wheres the column name?
    - Why is "Go" a button and "Cancel" a link?
    - Single quotes are not escaped (put a ' into the value field)
    - Breaks if a user accidently enters a space
    - The background is grayed out, yet you can still interact with it
(e.g. select text)
    - You can actually scroll away the content of the dialog by
selecting text downwards
    - Visual bug: One can see all input fields disappear if you press ok/cancel
- Why not just a simple textfield where you let the user write one
value per line? I would build the enum/set like this:
    - if set/enum is selected and the user focuses on the input field,
pop out a bigger textarea (that is placed like a datepicker)
      - let the user write one element per line
      - extend the textarea row height with every line written so the
user doesn't have to scroll. (up to a certain limit of course, like
15-20 lines - also it should not force the to scroll the page)
      - with every line written or on lost focus, automatically parse
the text and update the value field correctly formatted
Now lets say my enum has 5 elements. With the current enum/set editor
that would require me to perform 13 mouse clicks and 5 interruptions
(where my hands need to switch between mouse and keyboard), whereas
with a textarea that pops up like a datepicker requires 2 mouse clicks
and 0 interruptions. Why build things so complicated? ;-)
Sorry again if I sounded too unpolite :<