Testing Challenges

 Day21 # looking for invisible keyboard focus when tabbing through a page.

I logged in twitter and started tabbing on the twitter page which is navigating on each tab on-page content.

Tab-Usability Guidelines
Here are 12 design guidelines for using tabs:

1. Use tabs to alternate between views within the same context, not to navigate to different areas. This is the single most important point because staying in place while alternating views is the reason we have tabs in the first place.
2. Logically chunk the content behind the tabs so users can easily predict what they'll find when they select a given tab.
3. Use tabs only when users don't need to see content from multiple tabs simultaneously.
4. Design tabs that are parallel in nature. If the tabs are significantly dissimilar, users will interpret them as site navigation.
5. Highlight the currently selected tab. Make sure that the highlighting is prominent enough so people can tell which tab is selected.
6. The unselected tabs should be clearly visible and readable, reminding the user of the additional options. If the nonhighlighted tabs are faded too much into the background, there's a risk that users will never click them and never discover the many hidden features.
7. Connect the current tab to the content area, just as if you were shuffling several physical index cards with tabs stuck to them. This emphasizes which panel is being shown, and also tells users which tab is selected when there are only 2 tabs.
8. Write short tab labels and use plain language, rather than made-up terms
9. Do not use ALL CAPS for tab labels. ALL CAPS is rarely a good idea because it's harder to read.
10. Stick to only one row of tabs.
11. Place the row of tabs on top of the tab panel — not on the sides of the bottom, where users often overlook them.
12. Tabs should all look and work the same. Consistency is important in GUI control design because it builds the user’s feeling of mastery over the interface in several ways:

• Recognizability. When something always looks the same, you know what to look for and you know what it is when you find it.
• Predictability. When something always works the same way, you know what will happen when you act on it.
• Empowerment. When you can rely on your past knowledge of all the available features, you can easily compose a set of actions to achieve your goal.
• Efficiency. There's no need to spend time learning something new or worrying about the effect of inconsistent features.

Conclusion

Tabs may seem like a humble and uninteresting aspect of graphical user-interface design. But based on guidelines there are many specific design issues in creating tabs that work well, are easy to use, and support empowering user experience.