Week 5: Navigation and Input (Input Controls (Text Field (android…
Week 5: Navigation and Input
User should be able to navigate, understand and use the app for its intended purposes.
Design to accommodate a variety of users
support assitive technologies specific to your platform (touch, keyboard, mouse)
Help users navigate your app by designing clear layouts with distinct calls to action
Help increase, maintain, or improve the functional capabilities of individuals
Appropriate content labelling for text-only vision
Multiple ways to navigate screen, such as touch method, linear navigation to read pages backward/forward linearly,etc.
Directional controllers (hardware or software), such as D-pad, trackball or keyboard
Easy to navigate your UI
Giving users confidence in knowing
where they are
in your app and
what is important
through multiple visual and textual cues such as colour, shape, text and motion.
Important to Have
give users feedback and a sense of where they are in the app.
clear task flows with minimal steps, easy to located navigation control and frequently used tasks.
visible elements with sufficient contrast and size, clear hierarchy of importance
Input focus should follow the order of visula layout (from top to bottom of screen)
Similar items under heading that communicate what the groupings are.
focus traversal between screens and tasks should be as continuous as possible
Colours and Contrast
Help users see and interpret your app's content, interact with right elements and understanding actions.
use colour so that all users can understand the content, as colour helps communicate
mood, tone and critical information.
primary, secondary and accent
sufficient colour contrast
for low vision users.
how different a colour is from another colour
Small text should have contrast ratio of at least 4.5:1 against its background.
Large text (14pt bold/ 18pt regular and above) should have contrast ratio of at least 3:1 against its background
Logo and decorative elemnets
Should be distinguishable if they possess important functionality (do not have to follow contrast ratio)
Other visula cues
Ensure to include design elements in addition to colour so that colour blind users receive same amount of information(e.g., stroke, indicators, patterns, texture or text).
Layout and Typography
Enable users who aren't able to see the screen, or who have difficulty with small touch targets, to tap elements in your apps.
Touch targets: icon + padding >= 48 x 48 dp
Pointer target>=44 x 44 dp
Touch target spacing: separated by 8dp of space or more.
Responsive layout: content shouldn't be truncated as result of device type or resolution.
Font: features to allow users to adjust font size.
Accessibility text: Clear and helpful for both
visible and nonvisible
: Keep content and accessibility text short and to the point (especially for screen reader users).
Avoid stating control type or state
: E.g.:use search instead of search field
Indicate what an element does
: User action verb to indicate what an element or link does, not based on what element looks like
Sounds and Motion
give visual alternatives to sound and vice versa.
Allows users to navigate your app using sound by adding descriptive labels to UI elements.
Unnecessary sounds that play over a screen reader should be avoided (background sound should be able to pause or stop easily).
guide focus between views
Enable content that moves/ scrolls/ blinks automatically to be paused if it lasts more than 5 seconds.
Limit flashing content to three times in a one second period
Avoid flashing large central region of the screen
navigation chart to manage navigation between screens