Visual Design Articles & Videos

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

  • How to Test Visual Design

    When evaluating fonts, colors, and other visual details, assess both aesthetic impressions and behavioral effects.

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

  • Tips for Icon Usability

    6 UX guidelines to ensure that your users recognize your icons and know what they mean.

  • 3 Ways to Level Up Your Visual Design Skills

    Designers, researchers, and generalists alike can improve their visual design skills through creative exercises focused on identification, replication, or exploration.

  • The Aesthetic Usability Effect and Prioritizing Appearance vs. Functionality

    Users believe that designs that look good also work well, and UX should take advantage of this. But don't make aesthetic usability lead you astray as a designer, because the UI must actually work well for long-term success.

  • Better Charts for Analytics & Quantitative UX Data

    Spreadsheet defaults don't generate the most meaningful visualizations of UX data. Modify charts to enhance Context, Clutter (less of it than spreadsheet software likes!), and Contrast.

  • UX vs. UI

    User experience and user interface are highly related. Both are important, but what's the difference between UX and UI? (Often confused!)

  • The Visual Principle of Contrast in UI Design

    When visual design elements appear clearly different (for example, have contrasting colors) users easily deduce that the contrasting item is different or special in some way. So if it actually is different, this enhances usability.

  • UX Animations

    Animations can make user interfaces both easier and nicer to use, but the timing has to be right, as we demonstrate in this video. Many other details also contribute to the quality of animation in the user experience.

  • Data Visualizations for Dashboards

    To enable fast and reliable understanding of data shown on dashboard overviews, use visualization styles that work with human preattentive visual processing.

  • The Visual Principle of Scale in User Interface Design

    Users pay more attention to big things than to small things, and this design principle can be used to prioritize a user experience design, such as a web page or application screen.

  • 4 Trustworthiness Factors

    Users are constantly evaluating whether they believe what you're saying and whether to leave a website. You can do 4 things to make users trust you more and stay on your site.

  • UX Portfolios: What Hiring Managers Look For

    We asked over 200 hiring managers who hire for UX jobs what they look for in candidates' portfolios. The expectations are different for people looking to be hired as designers vs. as researchers, and also different for junior vs. senior positions.

  • 4 Things to Do When Designing for Seniors

    The number of senior citizens who use computers and the Internet grows every year. This user population does have special needs, driven by the human aging process, and modest design changes can vastly increase the business you get from seniors.

  • Transitioning from UI to UX

    Anybody who's already a good UI designer and can make great screens, has a big head start to becoming a good UX designer, but more is required to excel in this expanded role.

  • Usability Heuristic 8: Aesthetic and Minimalist Design

    No. 8 of the top 10 UX design heuristics is to remove unnecessary elements from the user interface and to maximize the signal-to-noise ratio of the design.

  • Change Blindness in User Interfaces

    Change blindness is the tendency for people to overlook things that change outside their focus of attention. In user interface design, this explains why screen changes that seem striking to the designer can be completely ignored by users.

  • Usability Heuristic 1: Visibility of System Status

    No. 1 of the top 10 UX design heuristics is to provide visibility of system status through proper feedback, so that the user knows how commands are being interpreted and what the computer is up to at any time.

  • Simple Design Is Relative

    Simplicity depends on the capacity of the information channel and what's simple for one device, can be primitive or intricate for another, since screens are information channels with a limited capacity. When you're designing for multiple devices, don't go by common cliches like "simple is good."

  • Why You Should Use a Grid for Designing Layouts

    Grids are a great framework to help designers quickly put together a clean, well-aligned interface, and help users to easily scan, read, and use those interfaces.

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

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

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

  • The Golden Ratio and User-Interface Design

    Although traditionally used in art and architecture, the golden ratio can be referenced to design aesthetically pleasing interfaces.

  • Principle of Closure in Visual Design

    People tend to fill in blanks to perceive a complete object.

  • Using Color to Enhance Your Design

    To support the user experience, colors need to be combined wisely so that they work together well, do not overwhelm, and communicate the same kind of information everywhere in the interface.

  • Left-Side Vertical Navigation on Desktop: Scalable, Responsive, and Easy to Scan

    Vertical navigation is a good fit for broad or growing IAs, but takes up more space than horizontal navigation. Ensure that it is left-aligned, keyword front-loaded, and visible.

  • Applying UX Principles to the Visual Design of Graphical Artifacts: The Case of the Heuristics Posters

    We made the 10 heuristics’ posters easy to read and understand by iterating through multiple versions and improving each based on user-centered principles and methods.

  • Why Does a Design Look Good?

    Visually aesthetic designs use consistent typography, establish a clear hierarchy, utilize a refined color palette, and align to a grid.

  • Aesthetic and Minimalist Design (Usability Heuristic #8)

    Aesthetically pleasing designs can provide memorable experiences that differentiate a brand. However, interfaces should only include necessary elements, with high informational value. Clarity will always win over visual flourish.

  • Visual Hierarchy in UX: Definition

    A clear visual hierarchy guides the eye to the most important elements on the page. It can be created through variations in color and contrast, scale, and grouping.

  • Vote By Mail: Mistakes Are Too Easy

    The design of vote-by-mail materials (made imperative by the COVID-19 pandemic) have UX issues that make the voting process unnecessarily difficult and error prone.

  • Similarity Principle in Visual Design

    Design elements that appear similar in some way — sharing the same color, shape, or size — are perceived as related, while elements that appear dissimilar are perceived as belonging to separate groups.

  • Proximity Principle in Visual Design

    Design elements near each other are perceived as related, while elements spaced apart are perceived as belonging to separate groups.

  • The Principle of Common Region: Containers Create Groupings

    In visual design, elements within the same boundary are perceived as related.

  • Emojis in Email Subject Lines: Advantage or Impediment? 👍 👎

    Our research shows that emojis in subject lines increase negative sentiment toward an email and do not increase the likelihood of an email being opened.

  • 5 Principles of Visual Design in UX

    The principles of scale, visual hierarchy, balance, contrast, and Gestalt not only create beautiful designs, but also increase usability when applied correctly.

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

  • Typography Terms Cheat Sheet

    Typography concepts can sometimes get lost in translation between researchers, developers, designers, and stakeholders. Use this cheat sheet to help you decode the meaning of common or often mistaken typography terms.

  • Visual Design Terms Cheat Sheet

    A glossary of visual-design terms and easy definitions can create common ground in mixed teams whose members come with a variety of backgrounds.

  • How to Report Errors in Forms: 10 Design Guidelines

    Help users recover from errors by clearly identifying the problems and allowing users to access and correct erroneous 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.