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.

The image below is from a language learning app in which users guess which image from a selection of four matches a recorded audio caption. All of the images and captions are crowd sourced. Currently the app makes a random selection about which images and captions to serve. But I'd like to introduce a feature to allow users to select a category to narrow the domain of possible images shown. For example, the user might select "Transportation" or "Fruits" to practice only the vocabulary concepts from that particular category. Furthermore because the database is constantly expanding as users contribute more content I'd like to indicate for each category how many images are available. For example instead of "Transportation" it might say "Transportation (65)" indicating that there are 65 images and captions available in that category to practice with.

Given the screen below, how would you suggest introducing a UI element to enable the toggling of categories?

enter image description here

share|improve this question
    
Not a direct answer to your question as stated above, but personally i should switch the refresh button and the (stats?) button to the left. I guess to refresh button is being used more often than the stats button. When a user holds their phone (mostly in their right hand, it's easier to touch the refresh button on the top right corner with their thumb) –  Jeroenem Aug 7 '13 at 9:53
    
Interesting suggestion. That never occurred to me. My thought was to locate the stats button near the progress meter. I'll look at the usage analytics to see which button gets the most clicks. –  hughesdan Aug 7 '13 at 16:22
    
Or you could refresh on swipe down, which is easier to do than click on small screens, assuming there is no scroll in the swipe region. –  Danny Varod Oct 7 '13 at 2:09
    
To answer this, I'd need to see the user flow regarding the categories. –  Danny Varod Oct 7 '13 at 2:11

2 Answers 2

up vote 1 down vote accepted

Here's how I would do it I would put the category name close to the images. You can see the arrow pointing to where the button would go. Or it can go below the images. But visually it makes sense to have the top nav bar be about user info/stats, then have the category that the user has chosen to work with, and then have a caption from that category right below that.

Image of redesigned screen with category on top

When the user clicks the app could show users a picker control, but I think having a screen like this pop up from the bottom would be better:

Image of how the picker would look


Additional ideas:

  • The refresh icon could be moved lower into the main body of the app because it pertains more to the image than general app navigation.
  • The stats icon could either be turned to look more like a bar chart, or make it into a line chart.
share|improve this answer
    
Nice job! Your solution is very logical and intuitive. –  hughesdan Apr 18 at 13:54

After a quick look I see two fairly easy options, one a fair bit more prominent than the other.

  • Making the follow button a bit smaller and sticking "Caption contributed by:" next to the image, then a horizontal area opens up which you can use for a big horizontal "category" button
  • A small icon next to the (what I assume is a) refresh button.

Both would pop up a selection page, which you can approach in several ways too, depending on how many categories you'd have.

  • Normal dropdown
  • screen with horizontal or square "buttons" with icons indicating categories
  • screen with horizontal bars with sub-categories, anchoring to further down the screen where you have those category buttons

Or you can do the latter with two separate screens.

I'm sure there are other options but that's just a quick few ideas without dropping into Photoshop.

share|improve this answer
    
Making the follow button smaller is a possibility. My only hesitation is that that region becomes cramped when the user is on an iPhone 4S or lower. The height of that purple area becomes roughly equal to the avatar (the text rearranges to fit the space). Apple recommends (I'll try to find the link) against having more than one button in either corner of the top bar. It's doable though. –  hughesdan Aug 7 '13 at 16:28

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.