Given a search box that has a menu which opens after the user begins to type listing results in two columns, plus a "view more results" button and a "close" button, what are the correct keys for navigating this structure with the keyboard?

See this image for a visual representation: http://postimg.org/image/4bd8264zd/

My thoughts so far:

  • Using up/down arrows while the text box stays focused would work just fine for going up and down the list, but

  • The left/right arrows, which seem intuitive for moving between the left and right column, already have the job of moving the carrot in the text field. The user might mean to move the carrot, or move between columns but never both at once.

  • It might be possible to skip left/right for column selection and make the down arrow wrap to the next column when you get to the last result of the previous column.

  • The tab key makes the most sense for getting focus from the text box to the "close" and "more" buttons, but the results are in between. What effect, if any, does tab have on the result list?

I second your initial thought. Use the arrows. As for your concern over "moving the carrot in the text field" you can use Javascript to actively shift the focus to the multi-column navigation once it senses the down key. The user can click back on the field in order to regain the use of the arrows on the field.

Just my 2 cents. :)

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.