Difference between revisions of "Development/UIReview"

From Glom
Jump to: navigation, search
(Created page with '== General Interaction Issues / bugs == * "Open Failed" dialog after cancelling creation of a new document from template doesn't make sense. * "Processing" dialogs popping up wh…')
 
(Added Pictures)
Line 33: Line 33:
 
=== Proposal ===
 
=== Proposal ===
  
""glade mockup of details view goes here""
+
[[File:Glom_Main_View_Mockup.png|600px|alt Main View Mockup]]
  
 
Glade mockup of details view proposed changes (does not include changes of the application menu). The lower buttons should always show icons, even if icons on buttons are disabled by default. Whether or not to also show text labels is not important for the sake of this mockup, both would be perfectly fine. The records status text in the lower right has been reworded to be more clear.
 
Glade mockup of details view proposed changes (does not include changes of the application menu). The lower buttons should always show icons, even if icons on buttons are disabled by default. Whether or not to also show text labels is not important for the sake of this mockup, both would be perfectly fine. The records status text in the lower right has been reworded to be more clear.
Line 43: Line 43:
 
The "mode" label has been removed from the main UI. Going to find mode (by selecting the Find menu item) could show an additional toolbar at the top with a quick search bar and an "Exit Find Mode" button. This also avoids (or reduces) the input field growing excessively large. This could be using the "extra view widget" look and feel, which is e.g. used by Nautilus for the search view or by gedit when a document was modified on disk. The widget could also include a label describing how to search using specific data fields.
 
The "mode" label has been removed from the main UI. Going to find mode (by selecting the Find menu item) could show an additional toolbar at the top with a quick search bar and an "Exit Find Mode" button. This also avoids (or reduces) the input field growing excessively large. This could be using the "extra view widget" look and feel, which is e.g. used by Nautilus for the search view or by gedit when a document was modified on disk. The widget could also include a label describing how to search using specific data fields.
  
""find toolbar mockup goes here""
 
  
Very ugly and rough mockup of find toolbar
+
[[File:Glom_Find_Toolbar_Mockup.png|600px|alt Find Toolbar Mockup]]
  
""nautilus search bar shot goes here""
+
(Very ugly and rough mockup of find toolbar)
  
Nautilus Search Bar
+
 
 +
[[File:Nautilus_Search_Bar.png|alt Nautilus Search Bar]]
 +
 
 +
(Nautilus Search Bar)
  
 
== List View ==
 
== List View ==
Line 94: Line 96:
 
=== Mockup ===
 
=== Mockup ===
  
""welcome screen mockup goes here""
+
[[File:Glom_Welcome_Mockup.png|alt Welcome Screen Mockup]]
  
 
Glade mockup. Advantages are an uncluttered appearance, and a reduction of redundant text for faster parsing. All items are buttons and only require a single click to activate.
 
Glade mockup. Advantages are an uncluttered appearance, and a reduction of redundant text for faster parsing. All items are buttons and only require a single click to activate.
Line 178: Line 180:
 
* Layout suggestion:
 
* Layout suggestion:
  
""report layout mockup goes here""
+
[[File:Glom_Report_Layout_Mockup.png|alt Report Layout Mockup]]
  
 
This could do with more consideration though.
 
This could do with more consideration though.

Revision as of 03:18, 24 March 2010

General Interaction Issues / bugs

  • "Open Failed" dialog after cancelling creation of a new document from template doesn't make sense.
  • "Processing" dialogs popping up when loading a document are small and all over the place. Embedding these into the main view would be good, but otherwise they should be centered and a bit more detailed.
  • "This database has no tables yet!" should not appear every time the tables dialog is closed.
  • A resize triangle is always useful, could be combined with a status bar.
  • "Save as Template" functionality is not obvious. Where should the file be saved? Why does it not appear in my list of templates after saving it in my home folder? How do I create a new document from it?
  • "Add / Delete / Open" button combination is often used, but not always consistent. Also, "Open" can be a little ambiguous, "Details" might be more clear in most cases.

Main View

Observations

  • "Table" and "Mode" at the top could just as well be dropdown menus, rather than forcing the user to go the menus. The layout of the "Table" header is also not very attractive.
  • Unless there are imminent plans to add more modes, "Find mode" could be a toggle rather than a radio selection.
  • The notebook adds a lot of visual clutter, considering that it only contains two very small pages, which also provide small click targets (especially compared to the space they take up).
  • The fact that switching to details view shows the details of the selected record makes a lot of sense, but is slightly surprising.
  • Related button groups should be homogeneous or at least have a minimum size.
  • Clicking on an empty cell in an empty row and cancelling adds a new dataset.
  • "Found: All Records: 3" is confusing.
  • Very wide minimum size. It would be better to scroll horizontally when the window is too small. Can the minimum width of columns be reduced?
  • The "Clear" menu item doesn't appear to do anything in most cases. If it can't be used, it should be disabled (not sensitive).
  • Why no "Delete" in the edit menu?
  • In the File menu, "Import", "Save As Example" and "Shared On Network". Suggesting "m", "a", and "h" respectively.
  • "Shared On Network" should probably be "Shared on Network", see http://library.gnome.org/devel/hig-book/stable/design-text-labels.html.en#layout-capitalization. Possibly "Save As Example" => "Save as Example", as the "As" is used as a preposition in this case.
  • "Data" mode mnemonic should be "D".
  • Duplicate mnemonics should be avoided:
    • Copy / Clear (suggesting "e" for Clear)
    • Relationships for this Table / Relationships Overview (suggesting "O" for Overview)
    • Layout / Script Library (suggesting "S" for Script Library and "h" for "Show Layout Toolbar").
    • Translations / Test Translation (suggestion "a" for "Test Translation")

Proposal

alt Main View Mockup

Glade mockup of details view proposed changes (does not include changes of the application menu). The lower buttons should always show icons, even if icons on buttons are disabled by default. Whether or not to also show text labels is not important for the sake of this mockup, both would be perfectly fine. The records status text in the lower right has been reworded to be more clear.

Tabs are replaced with a toolbar, which unclutters the appearance and saves space. The "Back to List" button is replaced with a "Details" button in list view. This also makes it more obvious that clicking this button will show the details of the currently selected item. To allow quick switching between the views, going back to list should pre-select the previously shown record.

The table label is replaced with a combobox, which allows quick switching between tables without going to the menu.

The "mode" label has been removed from the main UI. Going to find mode (by selecting the Find menu item) could show an additional toolbar at the top with a quick search bar and an "Exit Find Mode" button. This also avoids (or reduces) the input field growing excessively large. This could be using the "extra view widget" look and feel, which is e.g. used by Nautilus for the search view or by gedit when a document was modified on disk. The widget could also include a label describing how to search using specific data fields.


alt Find Toolbar Mockup

(Very ugly and rough mockup of find toolbar)


alt Nautilus Search Bar

(Nautilus Search Bar)

List View

Observations

Arrows next to table headers are missing (to indicate active sort order). The folder icon for opening details is not entirely clear, and a very small target.

Details View

Observations

Input fields are very large. Could this be reduced? Date chooser dialog doesn't need more detail than the title and calendar widget. Icon, primary text and secondary text are not necessary. Could be a popup (as in Evolution). Help button seems excessive and doesn't lead to anything useful right now (what would it possible explain?). Date chooser dialog button could have a calendar icon rather than "...".

Welcome Screen

Observations

Background window is useless, as the welcome dialog is modal. Gray window in the background does not add anything to first impression. Inappropriate icon, dialog is not a question dialog. Missing window icon. Glom starts with title ".: - Glom" in the window list. Title overload. Too much text. Too many repeating verbs. Selections are phrased as verbs, e.g. "Select File". Many clicks required for common actions (open existing file, create new document). Unnecessary clutter caused by empty document groups. The red icon used for empty groups inappropriately indicates an error ("no sessions found on the local network" does not look like an error, but a vaguely useful information). Notebook padding not aligned with action buttons. Spacing is not HIG conform. Quit buttons are not commonly used in Gtk applications anymore, so an alternative may be preferable.

Suggestions

Either: Make welcome screen optional and non-modal (but keep on top). Replace "Quit" with "Close", and make the initial Glom window usable. Set a reasonable initial title (e.g. just "Glom") and enable File menu options (new, open, etc). Close the welcome screen automatically if a document is opened from the Glom window. Possibly add a "Do not show again" option to the dialog (but that should be accompanied by a preference setting to undo). Remove the dialog title. Or (I suggest this option for simplicity): Make welcome screen a normal window. Don't show the initial Glom window, until a document is being opened. Replace "Quit" with "Close". Keep the dialog title. Remove the dialog icon. It is not necessary and adds clutter. This is not a standard question dialog, complex dialogs don't need icons. Remove the primary label, as almost the exact same text is repeated in the tab labels. Remove the notebook, and show both lists side by side in frames. This makes it possible to get a quick overview and removes one extra click in many cases. Adjust border spacing to 12 pixel and align the borders, see http://library.gnome.org/devel/hig-book/stable/design-window.html.en#layout-dialogs

Mockup

alt Welcome Screen Mockup

Glade mockup. Advantages are an uncluttered appearance, and a reduction of redundant text for faster parsing. All items are buttons and only require a single click to activate.

The individual items are GtkButtons with RELIEF_NONE and custom packing of an Image and a left-aligned label. The recent documents come first, because they are most likely to be the most frequently accessed. Recent documents should of course have the Glom document icon instead.

Recent Documents are limited to five, Local Network and Template sections need to have a reasonable limit after which they start scrolling. But this should rarely be necessary. If a section is empty, it can contain a similar string to the one shown under Local Network (using <small> markup).

Dialogs

All Dialogs

  • Missing window icon.
  • Many dialogs have horizontal separators which are deprecated.
  • Many dialogs do not have the right spacings (12px border, 18px between content and action buttons). See http://library.gnome.org/devel/hig-book/stable/design-window.html.en#layout-dialogs.
  • The questionmark icon is used all over the place. It should not be used for Alerts, etc. And with complex dialogs the icon is probably overkill.

Save Document / Creating From Example File

  • When creating a new document, using a title such as "Create Document" or "New Document" would be clearer.
  • The explaination before the "Title" label should wrap, so it doesn't force the dialog to be wide. Consider using <small> markup.
  • There should be a colon after the "Title" label.
  • "New Database" should have more spacing towards the element above and less spacing to the element below to emphasize the grouping. Perhaps "Create Database" or "Database Setup" would be clearer.
  • The general layout of the save dialog with database setup attached to it is not ideal, but it's probably not worth changing the default layout.

Connection Details

  • Dialog should only have one title, primary text is redundant. Consider "Connect to Server" as window title, removing the primary text.
  • Form labels should have colons.
  • Form fields should start 12px from the end of the longest label.
  • Consider "Server" instead of "Host" for consistency with the GNOME connect to server dialog.
  • The "Connect" button apparently has a hard-coded image, as it still shows despite button images being disabled in Ubuntu Lucid.
  • Suggestion: Add a 6px margin below the "Please enter [..]" help text. It could also be removed, as it adds no information that isn't already obvious.

Export Dialog

  • Title should not have a period at the end, also probably should be "Export to File" rather than "Export To File".
  • Export button is missing a mnemonic.

Import Dialog

  • "Choose a CSV file to open" is really elaborate for a title, and doesn't follow capitalisation rules. Suggesting "Open CSV Document", if "CSV" must be mentioned.

Print Layouts

  • Title is "glom", should be "Print Layouts" presumably. Could then get rid of the label and odd indentation of the treeview.
  • Suggesting 18px spacing between Close button and Add / Delete / Open

Edit Tables Dialog

  • Label is obvious and could be removed. Title could be "Edit Tables".
  • "Show hidden tables" label would fit well to the left of of the "Add / Delete / Open" buttons.

Add Related Table

  • Label is a duplicate of the dialog title and should be removed.
  • There should be 12 or 18 pixel spacing under the help text.
  • From Field => From field (also needs a mnemonic).
  • Input fields are not aligned and their labels lack mnemonics.
  • Create Table button lacks mnemonic.

Field Definitions

  • Label is a duplicate of the dialog title and should be removed.
  • No spacing between "Table:" label and the table name (should be 6px).
  • Indentation of the treeview is unnecessary. This is not a group.

Field Definition

  • Labels are not left-aligned and lack mnemonics.
  • Should have 6px padding under radio button labels. Suggesting 12px between groups of elements belonging to radio buttons.
  • Tab labels on Default Formatting page should not be bold.
  • The layout is pretty crowded, but this is probably not an issue. But in any case, this would seem like a much worthier candidate for a "Help" button than the date chooser.

Edit Reports

  • Title can be "Edit Reports", does not need the label (and indentation).

Report Layout

  • "Show Table Title" should be "Show table title" with a mnemonic.

Missing mnemonics on input field labels. Labels probably shouldn't be bold.

  • Layout suggestion:

alt Report Layout Mockup

This could do with more consideration though.