Web dialog boxes

10 Jun 2008 - 1:02pm
5 years ago
4 replies
1201 reads
Vishal Subraman...
2005

Is there any literature/research done on dialog boxes on the web? They seem
to be everywhere now, but are often poorly designed. Some of the issues that
popped in my head when I had to design one were-
1. OS or JS based
2. Modal or non-modal
3. Movable or not
4. Positioning on the page
5. Transitions
6. Impact on state of the page

--
-Vishal
http://www.vishaliyer.com

Comments

10 Jun 2008 - 1:24pm
Robert Hoekman, Jr.
2005

>
> Is there any literature/research done on dialog boxes on the web?

I'd love to know about any actual research as well, but in reality, many of
the same things you know about dialog boxes on the desktop are going to
apply online as well. For example ...

> 1. OS or JS based
> 2. Modal or non-modal

There are 3 types of modality: Application model, document modal, and
modeless. Modeless offers the least interruption to a user's flow because it
appears inline (ie: a dialog shown via the "inline expand" design pattern).
Document modal means you can still use the shell application but not the
particular screen you're on (ie: in-page, CSS-based dialog boxes), and
application modal means you can't do anything at all until the dialog is
addressed (ie: Javascript alerts)

Application modal dialogs should be reserved for emergencies. Document modal
is decent for non-emergency, task-based dialogs. Modeless dialogs are ideal
when you don't actually/absolutely need to interrupt the user (ie: a success
message).

5. Transitions

Transitions draw the eye to the change in page state. This makes sense in
most cases, but that doesn't mean it has to be fancy. A "lightbox" changes
the page state significantly and has a very noticeable transition. A dialog
that appears via inline expand should feature some sort of transition to
draw the eye to it (without a transition, users often don't notice that
anything changed). And so on.

-r-

10 Jun 2008 - 1:50pm
Shep McKee
2005

Some anecdotal evidence:
Since it's probable that there may be more than one web app running in
a single browser at the same time; it's absolutely necessary that
dialogs clearly indicate what application they are coming from, and
that that visual/textual indication not only sets them apart from the
other web apps, but also clearly sets them apart from dialogs coming
from the browser in relation to the browser itself.

Luke's comments on web dialogs are also interesting
http://www.lukew.com/ff/entry.asp?224

AND... I was going to say check out the section on dialog boxes in
About Face - but Robert covered all that pretty well in his post; so
Robert's book might cover the subject just as well ;)

regards - Shep

10 Jun 2008 - 3:28pm
Robert Hoekman, Jr.
2005

>
> AND... I was going to say check out the section on dialog boxes in About
> Face - but Robert covered all that pretty well in his post; so Robert's book
> might cover the subject just as well ;)

I did talk about this in Designing the Obvious in more depth.

-r-

10 Jun 2008 - 6:49pm
Chauncey Wilson
2007

There are some old, but still useful references regarding dialog box
design issues. A book that never got much publicity is one by Galitz.
It has many examples to support principles of dialog box design. The
book is not flashy, but it discusses many issues of layout, labeling,
interaction, use of controls.

Galitz, W. O. (2002). The essential guide to user interface design: An
introduction to GUI design principles and techniques. (Second
Edition). New York, NY: Wiley.

I just checked and there is a newer Edition, The Essential Guide to
User Interface Design: An Introduction to GUI Design Principles and
Techniques (Third Edition) (Paperback). 2007.

You might want to check out Jeff Johnson's Blooper books which deal
with many issues that relate to dialog boxes.

GUI Bloopers 2.0: Common User Interface Design Don'ts and Dos
(Interactive Technologies) by Jeff Johnson (Paperback - Sep 14, 2007).

There is an older book that is now on the web that might be a
reference for you. It is the GUI Design Handbook by Susan Fowler and
Victor Stanwick. You can find it at:
http://www.fast-consulting.com/desktop.htm. It is not based on the
Web, but is a good general guide to many GUI basics.

Jef Raskin's book The Humane Interface has some interesting views of
dialog boxes and other user interface components.

Your list of dialog box issues is a good start. Here are a few more
to consider:

1. Workflow in the dialog. Some dialog have no clear workflow, but
some dialogs have a workflow and you want to have the flow be normal
(left to right/top to bottom) and not have the person jumping up and
down to perform particular tasks.
2. Labeling consistency.
3. Keyboard access and tab order -- something that is often messed up
in Web dialogs.
4. Proper use of widgets
5. Designing for infrequent versus very frequent use.
6. Sizing of dialog. This is an odd issue, but I've seen some GUIs
and some WUIs where every dialog is a different size so you might end
up with a every dialog being slightly different.
7. The use of the Apply button (and when to have an Apply button).
8. The order and location of command buttons.
9. When to use buttons and when to use links (a common question in
Web dialogs).
10. How to deal with subdialogs -- are they simply an extension of
the main dialog so things you do in the subdialog are not saved until
you click on the main (OK) button.
11. Consistency in layouts across dialogs of similar types.
12. Text in the interface that is used as hint or instructional text.
For example, when do you use hint text and how brief can it be.
13. The sensitivity of the layout in the dialog for translation
(people often say that text expands 30%, but it is not that simple -
short words like Cancel, Submit, and other term will expand, on
average, around 200%; sentences tend to expand by about 30% -- the
shorter the word, the longer the translated term (going from English
to European languages) on average.
14. Consistency with other tools (GUI and Web) that the user might
use (this might apply to the order of OK Cancel buttons (OK Cancel
for windows versus Cancel OK for Mac).

The web site at www.usability.gov has some research-based guidelines
though they tend to be focused more on pages than Web dialogs. There
is a chapter on the use of widgets that might be useful.

Chauncey

On Tue, Jun 10, 2008 at 2:02 PM, Vishal Iyer <vishaliyer1 at gmail.com> wrote:
> Is there any literature/research done on dialog boxes on the web? They seem
> to be everywhere now, but are often poorly designed. Some of the issues that
> popped in my head when I had to design one were-
> 1. OS or JS based
> 2. Modal or non-modal
> 3. Movable or not
> 4. Positioning on the page
> 5. Transitions
> 6. Impact on state of the page
>
> --
> -Vishal
> http://www.vishaliyer.com
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

Syndicate content Get the feed