So I have been getting to know googles new search pages. The instant search stuff is really cool and pretty amazing. What I really notice is the keyboard control to navigate focus on the page. I was wondering how they are detecting arrow keys and re-directing the action to the program that controls focus. Focus is indicated by the little arrow keys and as you move around you can use the enter key to click on the results. I like that, I can keep my hands on the wheel, driving at speed. how would this look on the catalog site? you have areas of focus and they change depending on the view. Side note - I really like the concept of views: 20,000 ft view, 2000 ft view, 200 ft view 20 ft view and 2 ft view - all controlled by the view. At the search level you focus on the selection of the links. arrow keys will be more efficient but you could also use tab to go to the next link in the queue. Can the object you create be an event? or can you create an object with events as attributes. Each attribute is a detector for the specific key ie up-arrow. when the key press is detected the focus is updated. so you call something like update_focus and give the object the key that was pressed. depending on the key press the object moves the focus around. so the focus moves to an area of categories. if its a vertical list it can move up and down on the links and then the enter key will follow the link. search will still be important, more important at first because users need to relearn how to not use the mouse, weird huh A simple announcement that can be refactored into a help page:
- Tab moves focus to the next area
- Arrow keys will move focus up, down, left or right depending on how the areas of focus are laid out.
- Pressing enter in the middle level where a list is likely will navigate to the product page.
- pressing enter on a top level category filters the catalog or takes the user to a middle level, sub-categories and the a list of results. Since we are always going to be filtering it might be cool to show the user the whole list if they want to see it, otherwise the default (and hideable view) is to hide it. as they apply more filtering the list will get smaller and if it is viewable the results are loaded into the dom.
Enter performs an action on the current area. This is different at the top level of organization than in the middle where a list is likely or at the product detail where the user is trying to do different things.