Development/UIReview

From Glom
Jump to: navigation, search

General Interaction Issues / bugs

murrayc: I have commented on some of these. Where I have not commented, please just assume that I agree. murrayc: Note to other readers: I asked Daniel to ignore the awful Layout dialog because it's only ever been a temporary solution until we get the drag-and-drop layout working properly.

  • "Open Failed" dialog after cancelling creation of a new document from template doesn't make sense. FIXED
  • "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. FIXED (Dialogs have been cleaned up, could still consider embedding)
    • murrayc: Shall we use GtkInfoBar?
  • "This database has no tables yet!" should not appear every time the tables dialog is closed.
    • murrayc: How can I reproduce this exactly? File a bug if necessary.
      • danielb: Create a new empty document, open the Tables dialog and close the dialog before adding new tables. If this information should be always present to the user, it would be better to show it as a label in the main window. Also, menu items that don't work without a table should probably be insensitive, rather than displaying the dialog when activated.
  • A resize triangle is always useful, could be combined with a status bar.
    • murrayc: Where? For What?
      • danielb: A statusbar could be used as the container widget for all the info labels at the bottom. Even without a status bar a resize triangle would be good to have. It is sad that Gtk makes it harder than it should be to add one.
  • "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?
    • murrayc: Yes, this is only useful for developers of Glom itself, to create the examples. It should not be visible. Maybe we can make it visible when providing a command-line option. Or even better, just make it a command-line tool.
  • "Add / Delete / Open" button combination is often used, but not always consistent. FIXED
    • murrayc: Please list the actual cases.
      • danielb: Main list view has "Delete / Open / Add", dialogs have "Add / Delete / Open". The latter seems more logical to me. Is there a reason why the list view has a different setup?
  • 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.
    • murrayc: I fear that users won't expect the entire UI to change just when they change one choice in a combo box.
      • danielb: I would be surprised if this would turn out to be an actual issue in practice and I don't think that it would outweigh the benefits in any case (for the table selection that is). It also wouldn't be hard to revert to a simple label, in case it doesn't work out for some reason.
  • Unless there are imminent plans to add more modes, "Find mode" could be a toggle rather than a radio selection. FIXED
  • 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).
    • murayc: Yes, and it wastes space around the edges. I working on a patch to just have two (Details, List) toggle buttons.
  • The fact that switching to details view shows the details of the selected record makes a lot of sense, but is slightly surprising.
    • murrayc: What other possibility is there? Or is this only an issue when you have previously looked at a record in the details view?
      • danielb: Yes, as long as it is displayed as a toggle, I would expect "Details" to show me what it was showing previously, rather than opening the selected record. For this reason I don't think that it should be a toggle (more on that in the layout proposal).
  • Related button groups should be homogeneous or at least have a minimum size. FIXED
    • murrayc: For instance, where?
      • danielb: Referring to the button groups at the bottom of the main view, "Delete / Open / Add", "Add / Delete", and "First / Back / Forward / Last".
  • Clicking on an empty cell in an empty row and cancelling adds a new dataset. FIXED
  • "Found: All Records: 3" is confusing. FIXED (moved the items around to appear as mentioned in murray's comment)
  • 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?
    • murrayc: Should be fixed already. The entry widgets were stupidly wide for a while until I fixed a silly bug recently.
      • danielb: Yes, this is much better. It would still be nice if the window could be made even smaller by adding scrollbars, but perhaps that is technically difficult.
  • In the File menu, "Import", "Save As Example" and "Shared On Network" are lacking mnemonics. Suggesting "m", "a", and "h" respectively. FIXED
  • "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. FIXED
  • "Data" mode mnemonic should be "D". FIXED
  • Duplicate mnemonics should be avoided: FIXED
    • Copy / Clear (suggesting "e" for Clear) WONTFIX(?) These are stock items, so probably not worth the bother.
    • Relationships for this Table / Relationships Overview (suggesting "O" for Overview) FIXED
    • Layout / Script Library (suggesting "S" for Script Library and "h" for "Show Layout Toolbar"). FIXED
    • Translations / Test Translation (suggestion "a" for "Test Translation") FIXED

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.

murrayc:

  • The Table is a very primary part of navigation. So it should at least be at the left.
    • danielb: I was thinking about swapping the positions of the table combo and navigation button. I wouldn't put both elements to the left, but that's not an important issue.
  • "Back to List" suggests that there's a whole history. But it's just a details/list toggle, so that seems confusing.
    • danielb: It could also be "Go to List" or something similar, that certainly deserves more consideration. It is a hierarchy with two levels though, so making it look like a toggle isn't a good idea in my opinion. When in list view, it does the same thing as "opening" a record, so it is going one level deeper into the hierarchy. Going to the list is going back one level to the top of the hierarchy. As a toggle, I would not expect it to change the active record. "Details" is also a duplication of the "Open" button at the bottom (if I'm not mistaken), so I think this should be consolidated. E.g. the "Open" button could be removed in favour of a similar button in the toolbar, which turns into a "List" button when details are displayed. This could also be two separate buttons, each one being insensitive where appropriate (this would be pretty much the same as the toggle buttons, just a different visualisation).

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?
    • murrayc: Fixed already, as mentioned above.
  • 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?).
    • murrayc: Sure. A popup sounds nice. Otherwise, if it's a dialog, I think the "Please select a date to enter in this field." text is helpful.
  • Date chooser dialog button could have a calendar icon rather than "...".
    • murrayc: Yes. Please make a GNOME Art request.

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. FIXED (just hidden for now)
  • Missing window icon. FIXED
  • Glom starts with title ".: - Glom" in the window list. FIXED
    • murrayc: This might be fixed already.
      • danielb: Yes, now it reads "Untitled: - Glom". Also, opening a document shows "Document Name: - Glom" before it switches to "Database: Table - Glom". At least the colon could be omitted if no table is loaded. (now fixed)
  • Title overload. Too much text. Too many repeating verbs. FIXED mostly, by hiding the primary text.
  • Selections are phrased as verbs, e.g. "Select File".
    • murrayc: What could they be instead.
      • danielb: I suggest to show a limited number of recent items first, and then call this item "Other..." and put it at the end. This way the focus is put on the frequently opened items, and the meaning of the "Other" item should be immediately clear. This also matches with the file chooser button, which shows the list of bookmarks with an "Other..." item in the end.
  • Many clicks required for common actions (open existing file, create new document).
  • Unnecessary clutter caused by empty document groups.
    • murrayc: What empty document groups? Maybe you just have Ubuntu's broken package that doesn't have the examples/templates.
  • 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). FIXED
  • Notebook padding not aligned with action buttons. FIXED
  • Spacing is not HIG conform. FIXED
  • 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.
    • murrayc: Yes, I don't like having a welcome screen in general. It's meant to be mostly educational. We should explore better behaviour.
  • 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.
    • murrayc: Yes. I'd like to hide the main window when it's empty.
  • Remove the dialog icon. It is not necessary and adds clutter. This is not a standard question dialog, complex dialogs don't need icons. FIXED
  • Remove the primary label, as almost the exact same text is repeated in the tab labels. FIXED
  • 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.
    • murrayc: No. Creating a new database is the unusual action, and it shouldn't complicate the simpler actions for opening an existing database.
      • danielb: A notebook adds complexity too though, and reduces clarity. I don't believe that it helps, but the same design would still work with a notebook.
    • murrayc: Also, putting it all in one window would make that window very big (particularly if you do have networked databases in the list) and complicated.
      • danielb: Adding multiple layer is not making it less complicated. Yes it is fairly big, but this is not necessarily a bad thing. Of course this has to be well thought through and reasonably limited (with scrolling content if absolutely necessary).
  • 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 FIXED

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).

    • murrayc: No. Creating a new database is the unusual action, and it shouldn't complicate the simpler actions for opening an existing database.
    • murrayc: Also, putting it all in one window would make that window very big (particularly if you do have networked databases in the list) and complicated.
    • murrayc: Most of the items in the mockup don't appear clickable. So the typical user just sees a big complicated dialog with a Close buttons. I think most would just click Close and move on. The existing dialog is not perfect, but I think exactly this would be worse.
      • danielb: The items appear as clickable as toolbar items, with buttons appearing on mouse over. Unfortunately Gtk doesn't seem to provide a better (standard) way to display clickable labels (I also mentioned this on my blog). I still think it is much easier to understand this dialog, but otherwise the items could also be displayed as standard buttons. It would look ugly, but it would be just as usable. I don't think that "most" users would just click Close when they see this dialog (this is something we could test for easily), but some might indeed. If the main window is already usable, this would not be a big problem though. If the main window is not displayed, then it may be better to call the button "Quit" after all. "Quit" worries me a little though because it usually closes all windows of an application. The user has no way of knowing whether Glom is single process or not, and shouldn't have to.

Dialogs

All Dialogs

  • Missing window icon. FIXED in most cases, but still needs to be looked out for. Another common issue is that transient is not set correctly and/or the dialog is not set to center on the parent.
  • Many dialogs have horizontal separators which are deprecated. FIXED in most cases, should file individual issues now.
  • 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 question mark 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.
    • murrayc: I have avoided that because it's often more than just a document. For instance, it can create a database on a central server. One day the document might even just be a link to the database, with all the document's other XML in the database itself. Also, this is not a traditional document-based application - it also has immediate saving of changes. I don't want to give misleading visual cues.
      • danielb: But right now it is "Save Document", which is even more confusing. What could it be instead?
  • The explanation before the "Title" label should wrap, so it doesn't force the dialog to be wide. Consider using <small> markup.
    • murrayc: There is a general problem (with a bug in bugzilla) about GtkLabel not wrapping properly. It needs height-for-width (also in bugzilla) to work properly.
  • There should be a colon after the "Title" label. FIXED
  • "New Database" should have more spacing towards the element above and less spacing to the element below to emphasize the grouping. FIXED, this was an issue with an empty label taking up space.
  • 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. FIXED, some spacings have been improved, which is about as much as can be done without a complete redesign.

Connection Details

  • Dialog should only have one title, primary text is redundant. Consider "Connect to Server" as window title, removing the primary text. FIXED
    • murrayc: If dialogs should never have primary text, why isn't this the default in Glade?
      • danielb: Message dialogs (and save dialogs, etc) have primary text, but no window title instead. Normal dialogs have no primary text. Double titles should always be avoided.
  • Form labels should have colons. FIXED
    • murrayc: This might be fixed already.
      • danielb: I'm still missing the colons.
  • Form fields should start 12px from the end of the longest label. FIXED
  • 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. FIXED by using stock button ID.
  • 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. FIXED

Export Dialog

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

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. FIXED

Print Layouts

Edit Tables Dialog

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

Add Related Table

murrayc: By the way: This is a useful feature for people who understand Glom very well, but it requires explanation so I worry that nobody will actually use it, though it is based on a request in bugzilla.

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

Field Definitions

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

Field Definition

  • Labels are not left-aligned and lack mnemonics. Mostly FIXED but not yet for the generated elements.
  • Should have 6px padding under radio button labels. Suggesting 12px between groups of elements belonging to radio buttons. FIXED
  • Tab labels on Default Formatting page should not be bold.
    • murrayc: Yes, I think I felt that this made the structure clearer, particularly when that same notebook UI is used for layout properties - Right-click a field on the layout (in developer mode) and choose "Field Layout Properties" to see that (too high) dialog.
  • 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.
    • murrayc: I particularly don't like the nested notebook under Default Formatting. Look at it for a number field to see all 3 tabs there.

Edit Reports

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

Report Layout

  • "Show Table Title" should be "Show table title" with a mnemonic. FIXED
  • Missing mnemonics on input field labels. Labels probably shouldn't be bold. FIXED
  • Layout suggestion:

alt Report Layout Mockup

This could do with more consideration though.

murrayc: This whole window is almost as horrible as the Layout window. However, unlike the Layout window, this window will probably always be necessary. It would need a complete rethink. Filemaker does this with a drag-and-drop layout, but that's even more awkward and confusing, allowing the user to make stuff that just doesn't work for no obvious reason. murrayc: I also don't like the awkward way that you have to go through the Reports dialog+treeview just to add a new report. murrayc: Your mockup shows a misunderstanding. Items are not just moved from left to right. The tree on the right contains available items, a bit like a palette. Deleting them from the right does not mean moving them back to the left. Your misunderstanding is not surprising and not your fault.