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.

Let's say that you have a list of books that you want to show in a mobile application. From that list you want someone to be able to either drill down to a chapter list, or go to a page showing book details (such as publisher, date published etc.). What are in the details are not part of this question, suffice to say that the page is needed.

The usual best practice is to have an item with a single action (something like the example below) but then you would have to leave out one of the functions. Given that both are necessary, this won't work.

enter image description here

Alternatively you could split the item into two areas, with each performing a different function.

enter image description here

The first one is cleaner but may have more discoverability issues than the second one. I plan on testing this, but I would like some feedback on it as well as possible suggestions or improvement to make before testing to see which is more appropriate.

How would you do this and why? What are some examples of this being done well?

Edit: Even mobile Safari does something like this at times, as the example below shows. I should also add, that this is a web app, not a native iOS app.

enter image description here

share|improve this question
    
What does the "list of chapters" screen look like? –  Erics Oct 4 '11 at 3:43
    
dont split table row funtions –  colmcq Oct 4 '11 at 3:57
    
@Erics: Very similar to the book list. I'm just using a book and chapter here to explain it as it is a close (but easier to explain) analogy to what we are really doing. –  JohnGB Oct 5 '11 at 9:54
    
@colmcq: I don't want to split them, but I also need both functions. If you can find a nice solution to doing both I will buy you a beer :) –  JohnGB Oct 5 '11 at 9:55
    
I'll get back to you as soon as I can! –  colmcq Oct 6 '11 at 4:13

4 Answers 4

up vote 5 down vote accepted

My first choice would be to look for a way to combine the details and chapters list so that a person could get to both from a single touch of the book name.

But from the two approaches depicted in the question, I'd go with the second one with a slight change: Add the number of chapters along with the number of pages, as in 12 Chapters, 1332 Pages. That helps set up a relationship between the tappable space and the information that tapping it leads to, leaving the separated i icon to lead to details. Even better would be moving the page count to the list of chapters, or to the book details.

share|improve this answer
    
would you use the "i" icon, or can you think of a better one? –  JohnGB Oct 3 '11 at 15:54
    
I was trying to think of alternates to the 'i' icon earlier but no luck. –  Todd Sieling Oct 3 '11 at 17:25

I would recommend against trying to have each list item associated with two actions. From Apple's User Experience Best Practices for iOS:

  • Follow the recommended usages for standard user interface elements. In this way, users can depend on their prior experience to help them as they learn to use your application. You also make it easy for your app to look up-to-date and work correctly if iOS changes the look or behavior of these standard views or controls.

  • For an app that enables an immersive task, such as a game, it’s reasonable to create completely custom controls. This is because you’re creating a unique environment, and discovering how to control that environment is an experience users expect in such applications.

  • Avoid radically changing the appearance of a control that performs a standard action. If you use unfamiliar controls to perform standard actions, users will spend time discovering how to use them and will wonder what, if anything, your controls do that the standard ones do not.

I know your app isn't an iOS app, but it's using a comparable list design, so people may have expectations of how it behaves based on their past use of iOS and iOS-like interfaces like those found on Android.

So, I would choose one action based on user feedback and stick with that. For instance if tapping the item opens item details, you could have an action in that view that allows the user to further drill down into a chapter list. Or vice versa.

share|improve this answer
    
Given that leaving one out is not an option, how would I do this? :P –  JohnGB Oct 3 '11 at 15:02
    
You haven't convinced me that both are necessary, so I'm sticking with my answer. It may be hard to choose, but choose you must! –  Rahul Oct 3 '11 at 15:08
    
Whether they are necessary or not is another question. Here the question is "given that they are necessary", how would you do it. Let's say that your evil pointy-haired boss tells you that you aren't getting paid unless you have both :P –  JohnGB Oct 3 '11 at 15:12
    
@JohnGB You met me, I think you know by now that that would cause a hairy discussion of which the result would definitely not be me building it just because he says so :P –  Rahul Oct 3 '11 at 15:14
1  
+1 for being a pain and making me redo a lot of my work. I think we have a better solution now. –  JohnGB Oct 5 '11 at 12:13

Which is likely to be the more common action: getting book info, or viewing the chapter list?

If the former, you could have chapters linked off from the book info screen.

If the latter, you could add an extra item above the list of chapters that links to the book info (kind of like how you look on the pages in front of the book title page and chapter list to find out the edition number).

share|improve this answer

I'm working on a similar list UI right now. In addition to dual navigation, I'm also trying to fit "delete", "edit", and duplicate buttons in. Any thoughts on this?

p.s. I think I solved the dual-nav part by making the entire element bring the user to a page where they can choose between those two options.

share|improve this answer

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.