Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm creating a wizard for importing files as part of my desktop application. This isn't the main focus of the application, but it is an important feature. When a file gets imported, depending on the format of the file (image, text, audio), the wizard will auto-detect the format type and offer different choices based on the format.

Audio and text will only offer two to three different choices, but images have a wide range of possible import uses. Currently, I can think of 11 different uses for images that I plan to have the wizard support.

enter image description here

Here's the page in content to the unchanging elements of the wizard, which adds a bit more visual-clutter: enter image description here

It feels cluttered to me. Is there a cleaner way to present the branching wizard paths to the user? Once a path is chosen, the user will be brought to one, two, or at the very most three pages, each with simple clear places to fill in some parameters for that specific import path.

It's just this one page that seems cluttered. Any suggestions for improving it? Additionally, since Text and Audio imports will present a similar page, but with only two or three command links, if any, any change to the Wizard should be as usable with just two possibilities as with twelve.

Thankfully, this is the worst page (by far) in terms of clutter for the wizard, so if you don't think it's too cluttered, let me know.

share|improve this question
add comment

2 Answers

Your dialog is confusing:

  • If your options are command links then what is the role of Next button? For Next button have sense you could transform the options to radio buttons.
  • The dialog contains not-applicable options. PNG files contain no animation, so this is place for possible errors.
  • Tile options' descriptions create significiant mental load for user. To make a choice one has to imagine and compare (in mind!) possible options.
  • The amount of tile options forces user to make a concrete decision too early. This limits the user on the next steps and forces to return to the dialog if the choice was wrong.

So you could modify image export dialog in that way:

  • Static image. Limit user with two options: a) large image and b) tile-sized image.
  • Animated image. The options are: a) large image (first frame), b) tile-sized image, c) a set of tiles (for each frame).

    Other tile options could be performed either on next wizard step or as the editing functionality in your application. There could be ability to delete some frames, connect or unconnect them, order etc. Moving all the tile functionality to the application gives more control to the user.

share|improve this answer
    
You're right about the next button - those shouldn't be applicable until after the initial choice of how to import. I guess the import command-links kinda choose what wizard to really use. –  Jamin Grey Jul 10 '13 at 3:17
1  
Command-links break the Wizard pattern, so I'd recommend to use radio buttons. –  Alexey Kolchenko Jul 10 '13 at 3:23
    
As for the animated files, all the application's animations are large images with each frame in the one image, including with PNGs. (Something like this to use a random google image to illustrate. So all the choices are reasonable even for PNGs. –  Jamin Grey Jul 10 '13 at 3:23
    
But your primary suggestion I think is very very valuable (it's all valuable, but this especially so): I should move the whole "animation making" (and other things like probability maps) outside of the wizard and just into the rest of the application, so they can be modified any time. It'll make things simpler for the user, and more flexible besides. –  Jamin Grey Jul 10 '13 at 3:24
    
Sprites could contain elements of different sizes, so it is a bit complex task to cut frames. Anyway, mental model of frames is a sequence of images, not the all elements within single image. –  Alexey Kolchenko Jul 10 '13 at 3:28
show 1 more comment

I recommend you use icons to the left of the text and a border/background color with a hover animation for each item. It could suggest a grid and some uniformity while making it clear that each is an individual option.

share|improve this answer
    
What do you mean by a 'background box'? Do you mean a button-like visually raised (or visually distinct) area that the icons are on, or just a box-like outline around the icons to indicate the clickable zone? –  Jamin Grey Jul 10 '13 at 2:10
    
Sorry for being fast and loose with terms. I mean a box-like outline around each section to indicate clickable options. Might also consider a background color depending on where you want to take your visual style. –  dom Jul 10 '13 at 19:10
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.