Types of impairments

  • Visual impairment – assistive technologies such as screen reading software and screen magnifiers are the most common tools for this audience. Screen readers work effectively only if there are text alternatives to imagery, charts and animation, and the page has been properly coded using structural mark-up. Screen magnifiers also rely on well-structured page design.
  • Hearing impairment – these users rely on text captioning to understand videos or audio files.
  • Motor impairments – people with limited muscle control often find the mouse or keyboard difficult to use. These users often use speech recognition systems that allow them to speak commands to their computer.
  • Cognitive disability – people with reading difficulties, such as dyslexia, and limited mental agility need web pages that are written in straightforward language and are easy to scan. Following these principles and best practice provides benefits for everyone who uses the website.
  • Selective disturbance – people prone to epileptic seizures, and those with visual impairments, may be disturbed by flickering and flashing text or images.

The Six Components Of Web Forms

Web forms are a necessity and often a pain point for both designers and users. Over time, users have formed expectations of how a form should look and behave. They typically expect Web forms to have the following six components:

  1. Labels – These tell users what the corresponding input fields mean.
  2. Input Fields – Input fields enable users to provide feedback. They include text fields, password fields, check boxes, radio buttons, sliders and more.
  3. Actions – These are links or buttons that, when pressed by the user, perform an action, such as submitting the form.
  4. Help – This provides assistance on how to fill out the form.
  5. Messages – Messages give feedback to the user based on their input. They can be positive (such as indicating that the form was submitted successfully) or negative (“The user name you have selected is already taken”).
  6. Validation – These measures ensure that the data submitted by the user conforms to acceptable parameters.

Justin Mifsud: An extensive guide to Web form usability

Atomic Design

  • atoms
    In chemistry, atoms are the basic building blocks of matter. They have distinct properties and can’t be broken down further without losing their meaning. Translated to interfaces, atoms are basic tags, such as form labels, inputs or buttons. They also include more abstract elements like color palettes, fonts, and animations. Atoms are abstract and aren’t often terribly useful on their own, but they provide a useful reference and allow you to see all your global styles laid out at a glance.
  • molecules
    In chemistry, molecules are groups of atoms bonded together, which take on new properties as a result.
    In interfaces, molecules are groups of elements that function together as a unit. For example, a form label, search input, and button atom can combine them together to form a search form molecule. Building up from atoms to molecules encourages a “do one thing and do it well” mentality, and encourages creating reusable interface patterns.
  • organisms
    Organisms are groups of molecules (and possibly atoms) joined together to form distinct section of an interface. Organisms can consist of similar and/or disparate molecule types. For example, a masthead organism might consist of a logo, navigation, and search form, while a “product grid” organism might consist of the same product info molecule repeated over and over. Building up from molecules to organisms encourages creating standalone, portable, reusable components.
  • templates
    With templates, we break our biochemistry analogy to get into language that makes more sense to clients and final output. Templates are comprised mostly of organisms combined together to form page-level objects. Templates provide context for these relatively abstract molecules and organisms, which is helpful for designers and clients alike. Templates mostly focus on content structure (such as character length, image size, etc) rather than the actual content.
  • pages
    Pages are specific instances of templates and swap out placeholder content with real representative content to give an accurate depiction of what a user will ultimately see. Pages are essential for testing the effectiveness of the design system. This final form allows us to loop back to modify our molecules, organisms, and templates to better address the real context of the design. Pages also provide a place to test variations in templates, such as testing an article containing a 40-character-length headline and other article with a 340-character-length headline. What does it look like when a user has one item in their shopping cart versus 10 items with a discount code applied? These specific page instances test the resiliency of the system, influencing how the underlying molecules, organisms, and templates are constructed.

Brad Frost: Patternlab