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 have a very simple application. It has three different options to explore some data, then it displays those data on a different view, which is a level deeper in navigation.

It has some breadcrumb navigation on top, a statusbar as a footer and the options are presented as three flat buttons in the "body" area. Those three options exclude each other. The next view is identical for all those options.

And there is a separate button for configuring some options, which could be option three here.

It looks somewhat like this:

enter image description here

People seeing it seem to be not very happy with it. (Buttons to big, looks like smartphone app on big screen, options not differentiated enough, ... )

How can I present those different, orthogonal options better?

I'm especially interested in knowledge about how to do the design, gather some basic knowledge about UI design and concrete examples, like the "recently button" brought up as idea.

share|improve this question
    
Low fidelity wireframe is good for presenting general task flow and not for assessing visual design. The problem could be in task flow then we need to know more context. The question you asked requires high fidelity prototype. In both cases you gave too little information. –  Alexey Kolchenko Jul 10 '13 at 1:39
    
@AlexeyKolchenko Can you please tell more about what information I should give? I just wanted to visually describe the UI somehow, seems that does not meet the needs to get suggestions on what to improve. –  Mare Infinitus Jul 10 '13 at 5:46
1  
You could give an actual screenshot (edited if necessary to remove confidential data). We need more details about whatbthe options are and what sort of of data is involved. Different types or amounts of data will have different optimal solutions. –  Andrew Leach Jul 10 '13 at 6:15
    
Okay, I can make one later. At the moment I'm very interested in what the options are to present that kind of view, the optimal solution is not that important. –  Mare Infinitus Jul 10 '13 at 6:19
    
@AndrewLeach Have updated the question with a more acurate wireframe. Please have a look. –  Mare Infinitus Jul 10 '13 at 6:32

6 Answers 6

up vote 6 down vote accepted
+50

Is this the right feedback?

Not much to go on. You may need to test and probe more about what’s really bothering users. Is it really a strictly aesthetic problem? And does this user feedback come from users simply viewing the prototype or actually using it in a task? You can get very different reactions depending on how you’re testing. For example, users that say big buttons “look ugly” when passively viewed may suddenly appreciate them when using the app because they’re easy to click.

Feedback from actual use, of course, is what counts. Don’t throw a mockup on the wall and ask a group of users how they like it (or at least, don’t do just that). Show the mockup to one user at a time, and let them walk through a specific typical task (e.g., “You need to find out X in order to do Y. What do you click on this page to get that information?”).

”Too big”?

I’ll assume the feedback is from users using the prototype. Perhaps the user complaints about the buttons being “too big” and the UI being too much “like a smartphone app” really represent a problem with wasted real estate –a whole web page to do so little. Maybe what’s really bothering users is that they have to make this choice every time they use the app, which gets tedious. The solution is to flatten the navigation hierarchy and eliminate view-selection as a separate page.

Suggestion 1: Combine with sub-options

If each button takes the user to another set of options (e.g., a list of computers, files, or servers), then put links to those options on this page (e.g., have three scrollable columns listing computers, files, and servers).

Suggestion 2: Default view

If there aren’t more options, then consider combining the view-selection page with the view pages by showing one of the views by default. Across the top are normal-sized controls to change the view. These could be toggling buttons, radio buttons, or tabs (the latter if the views have substantially different layout from each other), so that they both show the state (what’s being viewed) and the options (what can be viewed). Each provides one-click access to an alternative view.

The default view could be what users usually want to see on average. It could also be whatever view the user was last using in the previous session (in case certain users prefer certain views, or users tend to continue work where they left off between sessions). Possibly there are ways to automatically distinguish which users tend to use what view (e.g., by job position). User research will determine what the default should be. If user research reveals that all three views are equally likely for any user, then picking an arbitrary default view may still be a good idea. It reduces the chance of clicking by 1/3. If a view loads quickly, that may make a more efficient UI.

Suggestion 3: Combine with the superordinate option

Another way to flatten the hierarchy is to combine view-selection with the next layer up (if any). For example, instead of an “Explore Data” link on the home page, you could have three links: explore computer, explore file, and explore server.

”Not Differentiated”?

The user complaint about the options not being differentiated enough may be a problem with the option labels, not the page itself.

Suggestion 4: Reduce repetition

Each option starts with “Read from” which gets in the way of the user seeing what really distinguishes the options: computer, file, and server. Consider parsing that phrase out as a title so that the text in each button is more differentiated:

Read from: [Computer] [File] [Server]

Or maybe you don’t need “read from” at all. Is there anything else users think they can do to a computer, file, and server?

Suggestion 5: User’s words

The terms “computer,” “file,” and “server” may also be confusing to the users. After all, aren’t files on a computer? Isn’t a server a type of computer? Doesn’t a server serve files? Research your users to find out what they call the three options. Select terms that make sense from their perspective. For example, maybe it’s “Devices,” “Documents,” and “Network Connections.”

Suggestion 6: Give examples

Maybe the options are too abstract for the users to grasp well. To make option labels more understandable, list concrete examples of the kinds of things you mean (e.g., “Devices: printer, keyboard, mouse, hard drive, video card and other parts of your desktop or laptop”). If you take Suggestion 1, that can take care of it.

Suggestion 7: Less bold icons

You icons may be meaningless to first-time users (do your users even know what a server looks like?). That may be okay –the icons may still be useful for users to quickly distinguish the options after they’ve associated them with the text labels. Just make sure the icons don’t overpower the text labels such that the users are slow in seeing them. Or make the text bigger and bolder.

share|improve this answer

The way I Can think of solving such issues is to use icons, big beautiful icons. Or make a number of sections. Something like this

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Using great icons would also help in decreasing the thought process. You can put just the Progress bar and status message in the footer and settings to the top, IMO it's important and should be easily visible as per habit people look for toolbars, which are generally located at the top.

share|improve this answer
    
The buttons actually have icons hat make 3/4 of it. The sections idea is great! Will pull up the settings to the right side of the navigation bar. Do you think this is okay? –  Mare Infinitus Jul 10 '13 at 7:42
    
@MareInfinitus something like this? f.cl.ly/items/3n0Z1h2J01092W243H0c/Capture.JPG that'd be great –  nashmaniac Jul 10 '13 at 7:52

First of all, if you want to get realiable feedback from users about visual differnces, you must do some hi-fi mockups. Maybe even in two different layout versions, then

  • give 8-10 users simple task to do on mockup
  • ask what they expect to see after click in each button
  • after that, ask them which layout they will recommend to their friend/mom/son etc.

For distinguishing main options try to use different color on each of three buttons, or try add icon on each button - this is good from Dual Coding perspective

share|improve this answer

the reason why people have a problem with desktop/pc apps seeming "mobile app like" (meaning bad, in their eyes) is that they don't respect space.

Two ideas are relevant here:

Large blocks that cover the width of the screen come across as overwhelming on a large display (most Laptop screens are 13+ inches now?, Desktop Monitors at least 17+?)

They also require dramatic movements of the mouse to reach.

I would read more about Responsive Design if I was you, to better understand the differences between mobile and desktop UX http://en.wikipedia.org/wiki/Responsive_web_design

Practical Advice:

See http://scratchpad.io/classy-pies-6155

for what I would make it look like

Given what I can tell to be the use case though, I would look at imgur.com as a good example for this sort of thing (file upload vs url vs something else).

See: enter image description here

share|improve this answer
    
Thank you for your advice, especially for the links. –  Mare Infinitus Jul 15 '13 at 6:20

Some of this could be a wording thing, as I'm having a hard time imagining the different experiences of reading from 'computer', 'file', or 'server'. But, here is a guess at what might work.enter image description here

share|improve this answer
    
This wireframe looks already extremly good. The application is about reading some settings directly from a computer, from a textfile describing a computer or settings that were saved on a server before. Then the user can change things and write it back to the computer that is handled in the next view. This next view is identical for all three options. –  Mare Infinitus Jul 18 '13 at 7:42

If the options are just three, I think you can use a vertical alignment in a box, center aligned. It is really adaptable to different screens.

To grant more a more aestethic effect, you can add a icon and/or a subtitle for each option for making also more fast the understanding.

An example I like is upload menu of pixlr.com (really nice tool).

enter image description here

share|improve this answer
    
At the moment there are just these three options. Nice example, thank you very much! –  Mare Infinitus Jul 18 '13 at 11:38

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.