Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 2 down vote favorite

I've been building and building and ended up with an app that I now need to educate the user on first use. It is a very "sophisticated" and quick icon generator for programmers. My app has up to 16 buttons visible at any time. The major buttons (close, save are color coded.) the rest are gray and use labels.

I've done testing with real users (not the target audience) and have figured out that the main sticking point is that they don't know how to use the widget on the right (the stack of buttons). These buttons can be dragged around to change the order of layers.

To illustrate how to use the app, I thought that 2 sticky notes with on-screen arrows might be a decent way to go, but I would like to ask the UX experts if there's a better way to make the user comfortable with the UI.

I ended up having 7 screens of small sticky notes with basic arrow pointing to the buttons. My intention is to make the user go through the 7 screens before using the app.

How can educate a user about a complicated 14 button UI in manageable pieces?

on-screen sticky note example overview

share|improve this question
1  
Not always, but quite often, 'education' is a poor alternative to rethinking the UI to begin with. In this case, I'd step back a bit and do some more rethinking of the UI. The layers, for instance, are rendered as buttons here. No app that I know of that deals with layers renders them as buttons. I think a new UI will help with that. Maybe even make it a pop-up pallet rather than a side bar so that it can have a title even. – DA01 May 23 '12 at 2:47
Thanks, I will add a title to the layer list, and will add an image of a sheet of paper or something similar to indicate that this is a stack – Alex Stone May 23 '12 at 13:13
For my company's Android app, I took screenshots of the UI, added a 50ish% transparent black layer, and then put the tutorial text on top of it. You can also cut holes in the mask to "highlight" the UI pieces that you are talking about on that tutorial screen to make it stand out even more. See more about that style in the "Transparency" section here: uxbooth.com/blog/mobile-design-patters – Karen May 25 '12 at 16:15

1 Answer

up vote 1 down vote accepted

As it was said, step back and redesign the UI.

First thing that comes to my mind is to make tabbed area at the bottom of the screen (the upper part of the screen should be dedicated to the large image of the icon only) where each tab is related to certain layer and contains corresponding controls for manipulation. Or you can go further with this idea and to create horizontal toolbar with icons instead of tabs.

Also, don't forget about the animation proper use of which will help you guide the user. For example, when user switches to anther level you can hide the other layers for the moment, or temporarily highlight current layer element with different color. Animation can resolve many problems without much of implementation - simply animate the transparency/color of certain GUI elements.

share|improve this answer
Thank you! When a user taps on a layer, I scale the layer by 20%, and also scale the button to indicate selection. – Alex Stone May 23 '12 at 13:08

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.