Visual Design Articles & Videos

  • Dark Mode vs. Light Mode: Which Is Better?

    In people with normal vision (or corrected-to-normal vision), visual performance tends to be better with light mode, whereas some people with cataract and related disorders may perform better with dark mode. On the flip side, long-term reading in light mode may be associated with myopia.

  • 10 Design Guidelines for Reporting Errors in Forms

    Help users recover from errors by clearly identifying the problems and allowing users to access and correct fields easily.

  • What Parallax Lacks

    Parallax-scrolling effects add visual interest, but they often create usability issues, such as content that is slow to load or hard to read. Consider if the benefits are worth the cost.

  • Branding an Intranet

    The name of the intranet, its logo, and the visual relationship with the company’s external website are key elements to consider when establishing a brand and an identity for your intranet.

  • Breadcrumbs: 11 Design Guidelines for Desktop and Mobile

    Support wayfinding by including breadcrumbs that reflect your site's information hierarchy. On mobile, avoid using breadcrumbs that are too tiny or wrap.

  • 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.

  • 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.

  • 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.

  • 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.

  • 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.

  • Small Pictures on Big Screens: Scaling Up from Mobile to Desktop

    To transition images from mobile to desktop, consider relative screen space and information density. Pay attention to cropping, scaling, and proportions.

  • Dashboards: Making Charts and Graphs Easier to Understand

    Visualizations should leverage human cognition and use length and 2D position to communicate quantitative information quickly.

  • Big Pictures on Small Screens: Remove, Resize or Reorganize

    When using large-screen images on smaller screens, remove images that don’t add information. Then, pay close attention to cropping, scaling and placement.