4

I was asked at work to create an interface for a web application which could let users browse through 19 templates, initially as thumbnails only, giving them the ability to see the picture in detail by clicking on it. Then there would be 2 actions that the user could take on these pictures: selecting them and making one of them the default.

Below is the design I came up with:

enter image description here

The checkboxes allow the user the select multiple templates, which will be added to another application (though the details about this process aren't important) and the radio buttons let the user select the default template, meaning, the one that will show if the user in this other application has not chosen his template yet.

After seeing this design carefully, I figured that even though I provide a help text (displayed if you click the question mark icon) it's still hard or confusing for end-users, specially for people with very little computer experience to understand the objective of this screen.

I would like to come up with a simpler design for end-users without breaking the functionality that his page already has.

What can I do to provide better User Experience in this case?

Improve this question
1
  • Is it possible to set one template as a default if it hasn't been selected yet?
    – Erics
    Sep 22, 2011 at 23:50

6 Answers 6

Reset to default
3

I'd say make it much clearer what you want the user to do. Rather than using check and radio boxes, why not use buttons with text so the user knows exactly what they are doing.I made a quick example

Improve this answer
1
  • 1
    Simple, intuitive and good looking, it meets all the requirements that the users are expecting to have in this screen. Thanks Jack, also thanks for everyone else but this is the design which appealed the end-users the most.
    – Hallaghan
    Sep 23, 2011 at 11:42
2

Screen selection from InvisionApp

I don't know for what type of device you're making this, but if hover is an option (if it isn't, then touch-and-hold on a touch device is the closest equivalent action) then you might consider taking a leaf from InvisionApp's book. InvisionApp is a prototyping tool that lets you own projects consisting of multiple mockup screens. One of the things you have to do is designate one of those screens as the "homepage" of your prototype. InvisionApp accomplishes this by defaulting one of them to the homepage (see upper-leftmost thumbnail) but allowing you select a different one by hovering over it (see bottom-rightmost thumbnail) and clicking the home icon in the corner.

You could augment this system to fit your needs by perhaps including a "Include this screen" text in the hover state. Then, if the user clicks anywhere on the thumbnail (including the home button), the thumbnail becomes "selected," perhaps by some means more visually intuitive than a check box underneath the thumbnail.

Improve this answer
2

Firstly, ask yourself if it's really necessary to offer both options at the same time. Depending on the situation, your users might not - in practice - need to choose designs and set the default at the same time.

Other options? Here's an idea - why not have a 'pallette' of selected options the user has chosen, and make the order on that pallette - which the user can modify by dragging and droppoing - control both the default selection and the order in which options / designs appear in dropdown menus and the like. Think of the below:

enter image description here

Pallettes are useful when you have a lot of designs to choose from or not much space to show them all in their glory - a pallette means the user can scroll through options whilst still looking at their choices, which they might want to consult when choosing a consistent body of styled templates.

The only problem I can think of is that you might need text to explain the drag and drop principle, which is still quite unusual in web apps - and users never read text. Maybe you could provide extra help by making the cursor turn to a 'grab' icon, or, when the user hovers over a selection, show plus and minus images, and maybe a 'favourite / default' icon they can click as a shortcut. If clicking 'favourite' made the image visually rise to the top, you'd subtly teach users to use drag and drop manoeuvres.

Improve this answer
1

I would move the ability to set a template as default to something that is only done when looking at the detailed preview. That would clean up all the radio buttons and keep a feature unlikely to change often at a deeper level of engagement with that item.

In a different direction, you might consider replacing the radio button with a gear icon to pop up a little menu of options like 'preview, set as default' and so on. Or you could dispense with the icon and respond to clicking the template with the small contextual menu, much like popovers work on the iPad.

Improve this answer
2
  • That would still be a design problem because it forces the user to click the picture to see the preview of the picture to mark it as default where some users might by familiar with those templates and would like to simply click to make it the default.
    – Hallaghan
    Sep 22, 2011 at 19:11
  • I question whether someone would want to make a template a default without seeing it in detail. If the person is familiar with the templates and you don't expect them to change the default often, it's a small extra step for a much cleaner UI. Answer updated to offer one more suggestion.
    – Todd Sieling
    Sep 22, 2011 at 19:29
1

I would ideally get rid of all of the extra controls (Checkboxes, Radio buttons). Instead clicking on a thumbnail would select or unselect that item, this would enable end user select (unselect) multiple items. Then have an empty box for default item where user would drag any item to be selected as default (dragging new item would replace existing default). You could declare this with some cue/text, and I don't see it being different for any kind of GUI (touch or otherwise).

Improve this answer
0

Does it absolutely need to be a single screen/page? This could be two steps (select then click to go further and choose the default) or options (e.g. menu items leading to a separate screen for each action).

Improve this answer
1
  • Yes, it has to be a single page only.
    – Hallaghan
    Sep 22, 2011 at 19:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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