5

I'm creating a mobile web app for modern touch-based browsers, and I'd like to know if it's appropriate to put the equivalent of an apply / search / go / view results / proceed button in a thin floating header (similar to a typical iPhone app) at the top of the device viewport.

More specifically, my circumstances involve a user being on a page and configuring 7 or 8 search criteria items in the page body. When the user is done setting the options, they need to view the results of that search. I'd like to know whether I should place the search button at the bottom of the search criteria or in the top-right in the floating header.

Following are the pros and cons that I've considered so far.

For putting the action in the upper right

  • A number of iPhone apps, such as the Trulia and Redfin app, have a very similar interface to what I described and chose to put the action in the top-right. Depending on how many other apps do this and how many iPhone users we have, users may end up expecting to look in the top-right for that action.
  • In their Human Interface Guidelines, Apple appears to indicate that it's okay to place at least some types of actions in the top-right area of the navigation bar. As web developers begin to imitate those patterns through apps on their own or through libraries such as jQTouch, jQuery Mobile, Sencha Touch, etc, users may expect a similar UX on other sites regardless of whether or not they have an iPhone.

Against putting the action in the upper right

  • We're not developing specifically for the iPhone and so many of our users will be using other types of touch-based devices. On those other devices, action buttons in the upper-right of applications are nearly non-existent. We don't have the resources or desire to segment out our users by device and present a different UX to them based on the patterns they may or may be used to.
  • After the user has configured their search options, their focus will be at the bottom of the options list and so it could be expected that the search action element should immediately follow the rest of the content.

In order to not bias the answers, I'll refrain from giving my personal opinion. Additionally, it'd be nice if those answering the question would divulge which mobile device they own so that each answer is understood in the context of any pre-conceived notions.

Improve this question

1 Answer 1

Reset to default
1

If the search criteria items are stacked in a row it would make sense to place the search button at the bottom of them to create a natural flow.

Check out Tapworthy (Oreilly). Imho one of the few books on designing for the iPhone that is worth picking up. Chapter three touches (pun intended) on the subject of ergonomics for thumb interaction.

Improve this answer
2
  • Thanks for the tip on Tapworthy. My question though isn't so much about how to build an interface that meshes with an iPhone, but rather asks how one should build a web app that is platform agnostic with its UX.
    – Andrew Mattie
    Nov 12, 2010 at 1:01
  • If you feel like doing a bit of research on your own here is a rather overwhelming collection of guidelines for mobile and tablet design. mobilexweb.com/blog/ui-guidelines-mobile-tablet-design
    – fluxd
    Nov 14, 2010 at 20:44

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.