Visual Design Articles & Videos

  • Animations Are Distracting!

    Moving UI elements attract attention, which often means distracting users from accomplishing their primary goals. Some types of animations are more distracting than others, and it's important to match how attention grabbing the motion is to the context and user needs.

  • Variable Fonts and Wide-Screen Layouts: Adopting Data-Driven Progressive Enhancements

    The NN/g website homepage now incorporates variable fonts and a wide-screen layout — 2 technical adjustments which improve the user experience for a subset of users on supported devices.

  • How to Test Visual Design

    Visual design details like fonts and colors can have subtle but important effects on the overall user experience. Use research methods that are sensitive to these effects to test your visual design.

  • Signal–to–Noise Ratio

    Relevant information is “signal,” while irrelevant information is “noise”. A high signal–to–noise ratio is a key outcome for any UX professional’s work, in terms of both content and page design.

  • Decorative Images: Delightful or Dreadful?

    Images are content, and different types of images serve different purposes. Decorative images have a role in establishing tone and emotional appeal, but they must not interfere with a user’s ability to accomplish a task.

  • Design Systems and Their Benefits

    Go beyond a brand or UX style guides to create engaging, consistent user interfaces. At the same time, fit design activities within in short development cycles, spending the least possible development time and money.

  • Prominence-Interpretation Theory

    Prominence-interpretation theory helps determine what shapes users’ perceptions of a site’s credibility.

  • Designing Effective Infographics

    Information graphics translate data into a visual medium that is easy to understand and engaging, aiming to integrate text and pictures.

  • Banner Blindness Revisited: Users Dodge Ads on Mobile and Desktop

    Users have learned to ignore content that resembles ads, is close to ads, or appears in locations traditionally dedicated to ads.

  • Yes, Icons Need Text Labels

    Universal icons are rare. To help overcome the ambiguity that almost all icons face, a text label must be present alongside an icon to clarify its meaning.

  • Flat UI Elements Lack Clickability Clues and Cause Confusion

    Our eyetracking studies show flat UI design often possess weak signifiers and lack sufficient clues to indicate actionable elements on the screen.

  • The Fold Manifesto: How to Encourage Scrolling

    The page fold still matters and still applies. Even though the exact location of the fold differs between devices, it exists for every single user on every single screen.

  • Imagery in Newsletters: Make Your Marketing Emails Visual But Don’t Sacrifice Usability

    Newsletter recipients expect high-quality images, but excessive focus on graphic design can result in emails that are illegible, unusable, and can’t deliver on business goals.

  • Zigzag Image–Text Layouts Make Scanning Less Efficient

    In two-column layouts, vertically aligned images support efficient scanning better than images that alternate placement with text.

  • Bad Icons: How to Identify and Improve Them

    Related links are often chunked as a set, each with an icon. One bad icon hurts user interaction. A set of bad icons is worse because it amplifies confusion, adds clutter, and wastes screen real estate.

  • Brutalism and Antidesign

    These trends are reactions against the uniformity of design. Brutalism can be used in visual design, but avoid antidesign for most products.

  • Response to Criticisms of Flat-Design Eyetracking Study

    We discuss the objections raised to our study of user gaze patterns on weak and strong signifier UIs.

  • First Impressions Matter: How Designers Can Support Humans’ Automatic Cognitive Processing

    The first visceral reaction to a site’s design influences how users perceive relevance, credibility, and even usability.

  • Making Flat Design Usable

    The hazards of flat design and 5 key UX guidelines for making flat design usable.

  • Flat UI Elements Attract Less Attention and Cause Uncertainty

    Flat interfaces often use weak signifiers. In an eyetracking experiment comparing different kinds of clickability clues, UIs with weak signifiers required more user effort than strong ones.