{"id":806,"date":"2010-05-16T21:55:36","date_gmt":"2010-05-17T03:55:36","guid":{"rendered":"http:\/\/thesmithfam.org\/blog\/?p=806"},"modified":"2019-08-12T07:15:31","modified_gmt":"2019-08-12T13:15:31","slug":"whats-wrong-with-this-dialog","status":"publish","type":"post","link":"https:\/\/thesmithfam.org\/blog\/2010\/05\/16\/whats-wrong-with-this-dialog\/","title":{"rendered":"What’s Wrong With This Dialog?"},"content":{"rendered":"

Sometimes I can’t help myself. This week, I read a blog post asking what was wrong with a dialog<\/a>. I found plenty of stuff wrong, so I decided to write a response and create a replacement dialog. This is not intended as an attack on the dialog author. I hope it’s not received that way. Rather, I just felt an itch to answer the question posted with my own opinion on the subject.<\/p>\n

Read on for the gory details.<\/p>\n

Deciding what’s wrong<\/b><\/p>\n

When I find myself asking if a feature is “wrong”, the first thing I do is ask if the feature should even exist. That is especially important with dialogs. Dialogs interrupt a user’s work flow, and for whatever non-deterministic-human-psychological reason, in-line GUI elements tend to interrupt humans less than pop-up dialogs. I try to avoid dialogs, and pop-ups, almost religiously. So when I find myself asking, “what’s wrong with this dialog?”, the next question I ask is “should this dialog even exist?”. Unfortunately, in this article, I can’t tell whether that’s the case, so I’ll assume it must exist.<\/p>\n

The litany<\/b><\/p>\n

In my view, this dialog contains many mistakes. Its core functionality is certainly accessible, but it’s not as easy as it should be. Here’s my list of mistakes:<\/p>\n

<\/a><\/p>\n

Now I’ll try to explain myself in prose rather than pixels.<\/p>\n

Mistake 1: Too many buttons<\/strong><\/p>\n

This dialog provides a simple CRUD<\/a> user interface, but it has 6 buttons<\/b>. That’s too many buttons for such a simple task<\/p>\n

Mistake 2: Wasted space<\/b><\/p>\n

Don’t get me wrong. I’m a fan of liberal white space between elements. I think it puts users at ease, when used properly. But in this case, there is too much wasted space.<\/p>\n

Mistake 3: Misalignment<\/b><\/p>\n

The 6 buttons all have icons, but none of the buttons or text align vertically. This forces the human eye to read more carefully, causing unnecessary stress.<\/p>\n

Mistake 4: No way to revert<\/b><\/p>\n

If I make a mistake with this dialog, my only option is to manually revert my changes. Sometimes this approach is okay, especially with simple dialogs like this one, but as a user, I find it comforting when there is a “cancel” button to rescue me from my own fat fingers. I realize that the GNOME project usually follows the “apply-as-you-type” paradigm, but I prefer the OK\/Cancel\/Apply approach.<\/p>\n

Mistake 5: Editing, Deleting, and Re-ordering is too hard<\/b><\/p>\n

Although the “focus-and-click” method for editing, deleting, and re-ordering has seen a lot of use over the years, I find it dated and confusing to users. I much prefer to inline the “edit” and “remove” buttons as close to their respective elements as possible, reducing confusion about exactly what will be deleted when I click a button. Also, clicking “Up” and “Down” to move the focused item in the list is old school. Much better to drag and drop in modern user interfaces.<\/p>\n

The Proposal<\/b><\/p>\n

If I woke up in the UI designer’s shoes tomorrow, and this dialog was my number one priority, I would probably refactor it as follows:<\/p>\n

<\/a><\/p>\n

Improvement 1: Easy editing<\/b><\/p>\n

The actions of the “Edit” and “Remove” buttons are super obvious. To edit an item, click the “Edit” button right on it. No ambiguity. You also don’t have to worry about graying out buttons when there is no selection.<\/p>\n

Improvement 2: Drag and drop<\/b><\/p>\n

To re-order items in the list, just drag ’em.<\/p>\n

Improvement 3: Cancel<\/b><\/p>\n

If you don’t like your changes, click “Cancel”. Also, if you want to see the effect of your changes without closing the dialog, click “Apply”. Very handy if you want to try out lots of little changes without having to re-open the dialog between each change.<\/p>\n

Improvement 4: No focusing<\/b><\/p>\n

Now that the “Edit” and “Remove” buttons are in-line with the list items, there’s no need for a selection\/focus model at all. That’s one less thing the user has to worry about.<\/p>\n

Improvement 5: Simpler layout<\/b><\/p>\n

The layout is essentially vertical. The user sees two areas, one above the other, and the two areas do only one thing each.<\/b> The top area contains the list of editable items. The bottom area deals with saving your changes (the “add” button is a small exception). I think this design is more approachable and easier for a user to understand quickly.<\/p>\n

Conclusion<\/b><\/p>\n

So that’s what I propose. A simpler, cleaner approach using modern methods to make the editing task easier on users. It doesn’t make them think about the user interface<\/strong>, but rather they are freed to think about the task they want to accomplish<\/strong> with the user interface.<\/p>\n","protected":false},"excerpt":{"rendered":"

Sometimes I can’t help myself. This week, I read a blog post asking what was wrong with a dialog. I found plenty of stuff wrong, so I decided to write a response and create a replacement dialog. This is not intended as an attack on the dialog author. I hope it’s not received that way. […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-806","post","type-post","status-publish","format-standard","hentry","category-code-and-cruft"],"_links":{"self":[{"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/posts\/806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/comments?post=806"}],"version-history":[{"count":17,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/posts\/806\/revisions"}],"predecessor-version":[{"id":1518,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/posts\/806\/revisions\/1518"}],"wp:attachment":[{"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/media?parent=806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/categories?post=806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thesmithfam.org\/blog\/wp-json\/wp\/v2\/tags?post=806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}