Content & Elements

Group Operable Elements Together

  • When link icon and link text are next to each other, going to the same destination, they should be grouped within a single actionable element. This thereby positively increases touch target for all users.

  • If an Image is used to supplement a CTA link, consider grouping it together to make one large(r) click target.

Reduce Cognitive Load

  • Reducing cognitive load aids users of cognitive disabilities, or elderly, and users of a screen-reader, in the ability to quickly scan content for information.

  • Consider Progressive Disclosure, as in this example from Smashing Magazine, "Comprehensive Guide to Mobile App Design"

Elements with State Changes

Users of a screen-reader may not clearly understand intent of icon, so provide text label to communicate action is beneficial. This would be a developer requirement.

  • If an icon is an action, write the text label to specify action. Such as, “Add to favorites”

    • The same is true, for “deselection” such as “Remove from favorites”

  • To assist users with cognitive disabilities, it is beneficial to provide feedback on purpose of iconography. For instance, in the Washington Post app, at the bottom, the Star is shown with “Saved Articles” which reinforces the purpose of the Star next to each article.

Washington Post Mobile Application Screenshot, "Saved Favorites" to the bottom right.

Important Elements before Page Scroll

  • Positioning important information before page scroll helps users with low vision and cognitive disabilities.

  • Users with low vision may magnify the screen, so they’d first scan what’s on-screen before page scroll.

  • This also speaks to the importance of consistency in layout, where users of magnification may automatically go to specific locations for an expected input or information.

Clear Indication of Actionable Elements

  • Elements that trigger change should be clearly distinct to those that are non-actionable.

  • Visual features that can set an actionable element apart include shape, color, style, positioning, text label, and conventional iconography.

Visual Features

CONVENTIONAL SHAPES:

  • Button Shape (round corners, drop shadows)

  • Checkbox

  • Select rectangle with arrow pointing downwards

CONVENTIONAL ICONS

  • Question mark

  • Home Icon

  • Burger Icon for Menu

  • Floppy disk for save

  • Back arrow, etc.

COLOR OFFSET

  • Shape with different background color to distinguish element from the page background;

  • Different text color.

CONVENTIONAL STYLE

  • Underlined text for links, bolded text for links, colors for links.

CONVENTIONAL POSITIONING

  • Commonly used positions such as top-left position for back button (iOS), position of menu items with left-aligned lists in drop-down menus for navigation