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 4 down vote favorite

I have an iOS app that uses tables views. It also implements a pull-to-refresh model, which works very nicely. I now want to add the option to search that table view. Normally, I would just hide the search field further up in the table view, but this is an issue because of the pull-to-refresh.

Any UX or UI ideas about how I could implement both? Possibly in the same space? I can't invoke the search from a button up in the navbar as those are already used.

share|improve this question
1) For what device is the app? iPad has significantly more real estate. 2) What kind of table view are you using: plain or grouped? 3) What controls are currently located in the navigation bar and in the toolbar? – dnbrv Feb 28 '12 at 4:06
Sorry, this is for iPhone. It is grouped tableView. Currently the controls in the navigation bar are an edit button, which has to be there, and the back navigation button. – Nic Hubbard Feb 28 '12 at 5:45
No need to apologize - you aren't the first person to forget some details. =) What does the Edit button do? Without a wireframe, I think it's out of place. – dnbrv Feb 28 '12 at 5:51
It serves the same purpose that the Edit button in the iOS Mail app does. It lets the user remove the items in a tableView. This is needed as it is an integral part of the app. – Nic Hubbard Feb 28 '12 at 16:22
Something possibly worth considering: the whole concept of Pull To Refresh is patented by Twitter Does that mean you can't use it? Well that's up to you, I guess. – JonW♦ Jun 4 '12 at 20:41

3 Answers

up vote 7 down vote accepted

You might follow the Gmail web app for iPhone example. It combines pull-to-refresh, a top control bar, and search (hidden by a button):

enter image description here

This arrangement allows search to compactly reside in the toolbar until it's required, completely skirting the confusion that might arise around a mechanism where you pull once for search and pull again for refresh.

I personally use the search feature of the web app daily (which I prefer to Mail.app's). My only complaint is that on the web app there is the slightest lag when you click on the magnifying glass before the search field flips on (natively, I am guessing you could eliminate this).

share|improve this answer
1  
This is a great solution. I will I will explore this direction. Thanks! – Nic Hubbard Feb 28 '12 at 19:34
Interesting, I've never seen a web app impliment pull to refresh before – Ben Brocka♦ Feb 28 '12 at 19:35
Glad to help, Nic! @BenBrocka, I think Google was trying to send a message to Apple that native apps aren't the only show in town, so they really wanted to push the envelope. Also, last I checked, the Gmail web app is still more polished (and feature-rich) than their native iOS Gmail app. – peteorpeter Feb 28 '12 at 21:16
The mini-tabs are a bit clumsy if you want to try to hit calendar and not get search instead, but with what you're describing, the event returned should be pretty clear if it's a touch or a swipe – John Feb 28 '12 at 22:41
@John Couldn't agree more about the mini-tabs being a problem. I'm guessing they were included for business and not UX reasons. I never switch tabs, and I'm sure people that actually do would be happier using a drop-down menu rather than tabs. – peteorpeter Feb 29 '12 at 0:40
up vote 0 down vote

For some reason this question reminds me of the iBooks application. You pull down the page a little and there is the search field.

I think you could make your app do this and then if you continue to pull, invoke pull-to-refresh. And when pull-to-refresh is invoked, I'd also hide the search field when the page bounces back up.

share|improve this answer
Yeah, I had this thought too. Just didn't know if it would be strange to the user to have both things there when it is pulled down. – Nic Hubbard Feb 28 '12 at 5:44
up vote 0 down vote

For an idea of what pull-to-refresh would look like on top of search, check out the iPhone's native Contacts app, where your phone number appears on top of the search field.

share|improve this answer
1  
Could you elaborate a bit more on this example as I don't see the pull-to-refresh feature, but rather a refresh button in the top-left on iOS 5.1.1? – Adriaan Jun 5 '12 at 19:05

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.