7 principles of universal design


  1. Equitable Use
    • “The design is useful and marketable to people with diverse abilities.” For example:
    • High Contrast: Having high contrast helps both users with weak vision, and users simply standing in the sunlight.
    • Alt Texts: Screen readers need alt texts, of course, but they also help users on slow or unstable connections, and act as a fallback if the image path is broken.
    • Mouse-Only Interactions: Hiding information behind a mouse-only interaction (like hover or double-click) makes it impossible to access for many users. Devices without pointers are in the majority, which changes the interaction ‘abilities’ of your users regardless of their personal physical state.
  2. Flexibility in Use
    • “The design accommodates a wide range of individual preferences and abilities.” For example:
    • Scroll-Jacking: The arguments against scroll-jacking are often in line with this principle. If you take away the user’s ability to navigate your website at their own speed, they may not have time to take everything in. This can get frustrating, causing them to leave.
    • Text Resizing: Allow for the sizing up and down of text in your layouts. A simple browser or OS text adjustment shouldn’t ruin your beautifully crafted application.
  3. Simple and Intuitive Use
    • “Use of the design is easy to understand, regardless of the user’s experience, knowledge, language skills, or current concentration level.”
  4. Perceptible Information
    • “The design communicates necessary information effectively to the user, regardless of ambient conditions or the user’s sensory abilities.” For example:
    • Information Organization: Besides having adequate text contrast and sizing, breaking your information down into easily digestible pieces will make your content more accessible. Specifically, things like using subheadings in a long text post will make speed reading and skimming more effective.
    • Graphics: A graphic to emphasize a point you’re making in text helps more visual users (and can convince a skimmer to slow down and read more closely).
    • Charts and Graphs: Supplying both graph and table views of data allows users not only the flexibility to choose how to get information (#2 Flexibility in Use), but also can help make patterns in the data more discernible. Who doesn’t want that?
  5. Tolerance for Error
    • “The design minimizes hazards and the adverse consequences of accidental or unintended actions.” For example:
    • Avoiding Accidents: Account for these inevitabilities by putting permanent functions inside menus and/or behind “are you sure?” confirmation prompts. This makes them harder (practically impossible) to accidentally execute.
    • Allow for Undo: An alternative to prompting users all the time is to give them an “undo” option, or a way to dig into archives to retrieve old items.
  6. Low Physical Effort
    • “The design can be used efficiently and comfortably and with a minimum of fatigue.” For example:
    • Action Grouping: Group actions together in specific areas of the screen. This minimizes the amount of mouse dragging or thumb stretching needed, which is helpful for anyone. It is especially helpful for users with either very large screens, or for users who have super-zoomed into their operating system and have to scroll through interfaces that would normally fit on a “default” screen.
    • Minimize Requests: Don’t require users to fill out lengthy forms or jump through multiple ‘hoops’ to gain access to their goal (account creation, a trial period of your application, a sample of a new book etc.). The less effort you require, the more involvement you’ll get.
  7. Size and Space for Approach and Use
    • “Appropriate size and space is provided for approach, reach, manipulation, and use regardless of user’s body size, posture, or mobility.” For example:
    • Action Targets: Take into account varying hand size and dexterity, especially for one-handed mobile device use. Make action targets large enough to click or tap easily, and put your primary actions within easy reach.
    • Posture: Some users are walking down the street, laying in bed, or doing other things that may make their reach a challenge. We can’t assume all users are sitting in a chair, at a desk, with a keyboard and mouse.
    • Dynamic Spaces: Virtual keyboards (and other accessibility tools) cover part of the screen. Keep dynamic space usage in mind through all states of onscreen keyboards, dropdown menus, etc. to avoid causing the user to block their own actions forward.

Design for slow and fast journeys

Which sites should be slow? If the site is delivering content for the good of the general public, the presentation should enable slow, careful reading. If it’s designed to promote our business or help a customer get an answer to her question, it must be designed for speed of relevancy.

Luke Wrobleswski’s notes about Jeffrey Zelfman;s talk An Event Apart: Content Performance Quotient

The Effect of Aesthetics on Web Credibility

Experiments have shown that users can judge a web site’s credibility in as little as 3.42 seconds merely on the basis of its aesthetic appeal.

Recent studies have shown that judgments on web site credibility are 75% based on a web site’s overall aesthetics. [citing Fogg, B.J., Soohoo, C., and Danielson, D. 2002. How Do People Evaluate a Web Site’s Credibility?: Results from a Large Study. Consumer Reports Webwatch. DOI= http://www.consumerwebwatch.org/dynamic/webcredibility-reports-evaluate-abstract.cfm%5D

Farah Alsudani and Matthew Casey: The Effect of Aesthetics on Web Credibility  (PDF)

Finding the right colour combination

Darker Value = Increment in Saturation is a decrement in Brightness

Lighter Value = Decrement in Saturation is an increment in Brightness

This formula helped me every time I’m in wonder of what right colors should I use on my designs. I learned that the best starting point is to have a base color, and from there, start the adjustments in Saturation and Brightness while keeping the Hue value the same.

Riel M 10 cheat codes for designing user interfaces

Always design a thing by considering it in its next larger context

“Always design a thing by considering it in its next larger context”, said the Finnish architect Eliel Saarinen. “A chair in a room, a room in a house, a house in an environment, an environment in a city plan.”

When designing for the web, it’s tempting to think in terms of interactions like swiping, tapping, clicking, scrolling, dragging and dropping. But very few people wake up in the morning looking forward to a day of scrolling and tapping. They’re more likely to think in terms of reading, writing, sharing, buying and selling. Web designers need to see past the surface‐level actions to find the more meaningful verbs beneath.

In their book Designing With Progressive Enhancement, the Filament Group describe a technique they call “the x‐ray perspective”:

Taking an x‐ray perspective means looking “through” the complex widgets and visual styles of a design, identifying the core content and functional pieces that make up the page, and finding a simple HTML equivalent for each that will work universally.

Jeremy Keith: Resilient Web Design

Material honesty

Using TABLEs for layout is materially dishonest. The TABLE element is intended for marking up the structure of tabular data. The end result of using TABLEs, FONT elements, and spacer GIFs is a façade. At first glance everything looks fine, but it won’t stand up to scrutiny. As soon as such a website is stress‐tested by actual usage across a range of browsers, the façade crumbles.

Using CSS for presentation is materially honest—that’s the intended use of CSS. It also allows HTML to be materially honest. Instead of trying to fulfil two roles—structure and presentation—HTML can return to fulfilling its true purpose, marking up the meaning of content.

[About mobile first/responsive design:]

This content‐out way of thinking is fundamentally different to the canvas‐in approach that dates all the way back to the Book of Kells. It asks web designers to give up the illusion of control and create a materially‐honest discipline for the World Wide Web.

From Jeremy Keith: Resilient Web Design

Cognitive load is lessened with rounded shapes

According to research, it’s harder for the brain to process sharp edges — the cognitive load is lessened with rounded shapes.

Molly Mc Hugh