Re: [Usability] UI design question

[Matthew Paul Thomas <mpt myrealbox com>]

Hi Dave

Dave Foster wrote on 16/06/08 19:49:
>...
> I've come up with 5 distinct actions this dialog should have.  The
> actions are as follows:
> - Create a new theme
> - Create a new theme based on an existing theme
> - Open an existing theme
> - Edit current theme
> - Open last edited theme
> 
> (the last two items will have text inserted at run time to explain what
> those theme names are)

My first thought is: That list of actions doesn't seem to include
anything that requires it to be a dialog. Could it be an ordinary window
instead?

> I thought the best way to do this was a radio button group, as it would
> show all the available actions neatly on one screen. The problem is,
> there is additional information that needs to be taken in depending on
> what is selected.  For the top two items (both creates), a theme name
> must be given in a text box.  For the create new based on existing and
> open existing, a theme needs to be selected from a list of themes.

So you're thinking of something like this?
     ________________________________________________________
    |::::::::::::: Do Something Involving Themes ::::::::::::|
    |                                                        |
    | (*) Create a new theme from scratch                    |
    |     Named: [________________________]                  |
    |                                                        |
    | ( ) Create a new theme based on: [Midnight Madness :^] |
    |     Named: [________________________]                  |
    |                                                        |
    | ( ) Open the last edited theme (Twilight of the Dogs)  |
    |                                                        |
    | ( ) Open a different theme:      [Midnight Madness :^] |
    |                                                        |
    | ( ) Edit the current theme (Fruity Blues)              |
    |                                                        |
    |                                  ( Cancel ) ((  OK  )) |
    |________________________________________________________|

> Because of these additional controls, I don't know how to lay this
> dialog out so that the user can see that the listbox and textbox are
> dependant on selections in the radio group.

The mockup above is a minimal example of how to lay it out, but it's
obviously not great, because it's quite repetitive.

You could reduce the repetition a bit by grouping the two creation
options together:

    | (*) Create a new theme                                 |
    |     Named: [________________________]                  |
    |     (*) Start it from scratch                          |
    |     ( ) Base it on: [Midnight Madness :^]              |

And you could get rid of "Open the last edited theme" by just making the
last-edited theme the default value for the "Open a theme" command:

    | ( ) Open a theme: [Twilight of the Dogs :^]            |

But that you were using radio buttons for highly disparate immediate
actions would still be pretty awkward. (Like the Shut Down dialog in
Windows 95/98.)

> Another idea is to use a drop down, which could be put above the
> textbox/listbox, and have those go sensitive/insensitive as appropriate,
> but i feel that masks the user from seeing the possibilities of
> opening/creating themes.

Right. (Like the Shut Down dialog in Windows 2000.)

> Yet one more idea is to use a multiple screen approach, with simple
> buttons that have nice icons that indiciate which action to take, and
> have a second dialog then ask for the required information such as a
> name or existing theme, but i feel multiple screens is a bit wizardy and
> not needed.
> 
> Any thoughts?  thanks all.
>...

I think your basic difficulty is that you're thinking verb -> object:
presenting a list of actions, and then asking for a choice of theme
afterwards.

Instead, try thinking object -> verb: present the list of themes first,
with the actions afterwards. Like this:
     ________________________________________________________
    |(x)::::::::::::::::::::: Themes :::::::::::::::::::::(-)|
    |--------------------------------------------------------|
    | [] Fruity Blues                                      |A|
    |:[]:Midnight Madness::::::::::::::::::::::::::::::::::|:|
    | [] Twilight of the Dogs                              |:|
    |                                                      |:|
    |                                                      |:|
    |                                                      |:|
    |______________________________________________________|V|
    |(New...) (Duplicate...) (Edit...) ( Open )              |
    |________________________________________________________|

This is much calmer, even while it lets you see the complete list of
themes at a glance (which the radio-button-based design wouldn't).

Here's what would happen to the previous options:
*   "Create a new theme" ->  "New...", then type its name into the
    newly-created table row.
*   "Create a new theme based on an existing theme" ->  select theme,
    then click "Duplicate..." and type the name into the newly-created
    table row.
*   "Open an existing theme" ->  select theme, then click "Open".
*   "Edit current theme" -> open window, then click "Edit" (the current
    theme being selected by default).
*   "Open last edited theme" ->  select theme, then click "Edit...".

The catch is that this design really makes sense only if the window is a
normal window, not a dialog -- because a dialog would expect a "Cancel"
button, and that the buttons along the bottom would close the window,
which you don't want for most of these buttons. (For example, often
you'll want to click "Edit..." after clicking "New..." or "Duplicate...".)

Cheers
-- 
Matthew Paul Thomas
http://mpt.net.nz/