4MK Mobile Dev Blog

Adventures in Mobile (and Startup) Development

WP7 Devs: Stop adding search buttons! [UPDATED]

NoSearchButtonsUPDATE: During some investigation by Shawn Wildermuth, he figured out that in order to show both the white “Enter” button as well as the typing suggestions, we should use the “ApplicationEnd” Input scope and not “Search”.  Hopefully this get’s fixed in a future update.

When Microsoft first showed off its new Metro design style with the Windows Phone 7, most people agreed that it was slick, clean, and perhaps most importantly, distinctive.  With Blend and the stock controls and styles, developers are able to easily create distinct looking apps that match your company’s style, while still keeping it within the Metro guidelines.  If you ever get stuck wondering how something should act or look, a quick trip through the OS and bundled apps should be enough to set you in the right direction.

So why do so many applications get their search boxes wrong?

As I mentioned above, a quick tour through the OS will give you all the inspiration you need, unlock your phone right now and hit the search button.  Do you notice something missing?

image

Search boxes within the Metro design are not supposed to have a button that says “OK”, “Search”, “Go” or anything else of the sort, there should be no button at all.  Instead of the button, you should be using the “Search” “ApplicationEnd” Input Scope on your textboxes instead, like so:

   1:  <TextBox Name="tbSearch" InputScope="ApplicationEnd"/>

What that will do for you is bring up the soft keyboard designed specifically for searching that looks like this:

image

The biggest thing to note about this is the white key on the bottom right.  That key is the only thing that should launch the search action.

Unfortunately, to the best of my knowledge, Microsoft didn’t add in a specific event for search, so you’ll need to add in some code to handle this.

First, wire up the KeyUp event of your TextBox so that it looks like so:

   1:  <TextBox Name="tbSearch" 
   2:           InputScope="ApplicationEnd" 
   3:           KeyUp="tbSearch_KeyUp"/>

Then code your event handler to look for Key.Enter and call whatever functionality you are using to perform your search like so:

   1:  private void tbSearch_KeyUp(object sender, KeyEventArgs e)
   2:  {
   3:      if (e.Key == Key.Enter)
   4:      {
   5:          PerformSearch(tbSearch.Text);
   6:      }
   7:  }

Think I’m off my rocker and people should be able to put buttons where ever they want and it won’t detract at all from the user experience?  Feel free to leave a comment below.

13 Responses to “WP7 Devs: Stop adding search buttons! [UPDATED]”

  1. I agree with you completely in situations where there is one search criteria. Where you are taking information from several different search filters which use controls other than textboxes I think it is hard to get away from using a search button.

    Comment by blounty — February 21, 2011 @ 10:45 pm

  2. You are 100% correct, in those cases, especially when dealing with non-TextBox inputs, a button is entirely appropriate.

    Comment by barranger — February 21, 2011 @ 10:49 pm

  3. [...] This post was mentioned on Twitter by Joost van Schaik, 4MK Mobile. 4MK Mobile said: New Blog Post: WP7 Devs: Stop adding search buttons! http://bit.ly/gNG0nv [...]

    Pingback by Tweets that mention WP7 Devs: Stop adding search buttons! | 4MK Mobile Dev Blog -- Topsy.com — February 21, 2011 @ 11:29 pm

  4. for the multi-step search the last field should have the keyboard with the white search button, shouldn’t it?

    Comment by marybranscombe — February 22, 2011 @ 9:08 am

  5. handling the hardware search button would be more useful!

    Comment by stephan — February 22, 2011 @ 9:56 am

  6. That would work if all of the fields were mandatory, but as soon as the last input is optional, you’d run into usability issues.

    Comment by barranger — February 22, 2011 @ 11:07 am

  7. While hardware search button would be great, all it would do is bring up a view from your App. On that view you shouldn’t be using a Search button either :)

    Comment by barranger — February 22, 2011 @ 11:08 am

  8. I use therefor a “live-search” so the enter button is not important and has not to be just white.

    Comment by stephan — February 23, 2011 @ 3:09 am

  9. I will stop using search button when MS will provide a search input scope on textbox with words autocompletion / propositions

    Comment by La Mouette — February 23, 2011 @ 8:43 am

  10. So I guess you’ll be stopping now :)

    Comment by barranger — March 24, 2011 @ 7:32 am

  11. Is there a way to implement the Hardware search button for this ?? It does not fire an event.. nor i can see any function that i could override ?

    Comment by Nayyar — April 15, 2011 @ 5:15 am

  12. unfortunately not.

    Microsoft seems to be pretty stead fast on this one, but I haven’t been able to figure out why

    Comment by barranger — April 17, 2011 @ 2:36 pm

  13. I am not sure if using the hardware search button is a good idea in such cases. I guess it violates Metro Style Guide rules?

    More than one year after I having the situation where I should use the InputScope=”Search” approach.

    Fine it works when directly accessing MyTextBox.Text but I prefer MVVM pattern but the DataBinding doesn’t work for that scenario.

    Even this doesn’t work:
    http://stackoverflow.com/questions/8168861/two-way-databinding-from-textbox-doesnt-update-when-button-in-applicationbar-is

    Any suggestions how to handle InputScope=”Search” in a MVVM app correctly?

    Comment by Harald-René Flasch — May 26, 2012 @ 1:16 am

RSS feed for comments on this post. TrackBack URL

Leave a Response