Here’s a comprehensive list of NN/g’s most useful articles and videos about web user experience. Within each section, the resources are in recommended reading order.
General Consideration on Web Usage
This section introduces fundamental theories and key research on information-seeking behaviors, emphasizing the importance of standardization in web design. Start here to build a foundational understanding of web UX.
| Number | Link | Format | Description |
|---|---|---|---|
|
1 |
Video |
Why usability requirements are much higher on the web compared to the physical world |
|
|
2 |
Information Foraging: A Theory of How People Navigate on the Web |
Article |
A fundamental theory of how people navigate on the web |
|
3 |
Article |
Definition of information scent |
|
|
4 |
Video |
||
|
5 |
Article |
A 1997 study by Xerox PARC to understand users' essential web usage |
|
|
6 |
Article |
A 2019 replicate study on critical web usage informing how information-seeking on the web has changed over 22 years |
|
|
7 |
Different Information-Seeking Tasks: Behavior Patterns and User Expectations |
Article |
A thematic analysis of 3 key types of online information-seeking behaviors |
|
8 |
Article |
Definition of progressive disclosure and its application in web design |
|
|
9 |
Video |
||
|
10 |
Video |
Why it is important to follow design conventions that users are familiar with |
|
|
11 |
Article |
Classification of 3 web standardization levels and why they are important |
|
|
12 |
Article |
Fundamental principles and practical guidance on homepage design |
|
|
13 |
Homepage Design: 4 Common Mistakes |
Video |
4 common mistakes of homepage design and how to fix them |
This section curates significant research findings from years of content studies on online-viewing behaviors. Explore the articles and videos in this section to gain insights into how people read online, where their attention is directed on the page, and what motivates them to scroll.
| Number | Link | Format | Description |
|---|---|---|---|
|
1 |
Article |
A 2016 study that found that users scan web pages instead of reading word by word |
|
|
2 |
Article |
A research-derived formula to calculate how much users read on the web |
|
|
3 |
Article |
A study explaining why users read instead of scanning |
|
|
4 |
Article |
Why websites should prioritize essential information |
|
|
5 |
Article |
How users divide their attention among different portions of the page |
|
|
6 |
Video |
||
|
7 |
Article |
Definition of fold and how it impacts scrolling |
|
|
8 |
Video |
||
|
9 |
The Illusion of Completeness: What It Is and How to Avoid It |
Article |
Definition and ways to avoid the illusion of completeness |
|
10 |
Video |
||
|
11 |
Banner Blindness Revisited: Users Dodge Ads on Mobile and Desktop |
Article |
Definition of banner blindness and its implication in web design |
|
12 |
Article |
Guidelines for designing effective right-rail content |
|
|
13 |
How People Read Online: New and Old Findings |
Article |
Research findings on how AI changes users’ information-seeking behaviors |
Eyetracking Gaze Patterns
In this section, we present a comprehensive collection of gaze patterns obtained from our eyetracking research spanning over two decades. These articles will give you rich insights into how people navigate different web pages and how to optimize page layouts to tailor to their reading behavior.
| Number | Link | Format | Description |
|---|---|---|---|
|
1 |
Article |
An overview of 4 common text scanning patterns |
|
|
2 |
Scanning Patterns on the Web Are Optimized for the Current Task |
Article |
How users’ tasks and goals influence what they attend to on a page |
|
3 |
Article |
An introduction to the F-shaped scanning pattern and its implications in web design |
|
|
4 |
F-Shaped Pattern of Reading on the Web: Misunderstood, but Still Relevant (Even on Mobile) |
Article |
Clarification on common myths about the F-Shaped pattern |
|
5 |
Article |
An introduction to the layer-cake scanning pattern and how to create effective subheadings |
|
|
6 |
Exhaustive Review or “I Can’t Believe It’s Not There” Phenomenon: Evidence from Eyetracking |
Article |
Why users repeatedly scan the same content |
|
7 |
The Lawn-Mower Eyetracking Pattern for Scanning Comparison Tables |
Article |
An introduction to the lawn-mower pattern and how it applies to comparison tables |
|
8 |
Article |
A 2020 study comparing new findings on reading behaviors to the original study in 1997 |
Web Interaction Design
Interactive web elements are pivotal in presenting information and driving user engagement. This section explores a range of web-interaction patterns and offers practical guidelines for their effective implementation.
|
Number |
Link |
Format |
Description |
|
1 |
Article |
Definition of accordions and guidelines for using accordions on desktop web pages |
|
|
2 |
Video |
Discussion on when to avoid accordions |
|
|
3 |
Video |
Benefits of using accordions on mobile |
|
|
4 |
Article |
Research comparing the effectiveness of different accordion signifier |
|
|
5 |
Article |
Guidelines for designing in-page tabs |
|
|
6 |
Video |
Differences between tabs and accordions and when to use each |
|
|
7 |
Carousel Usability: Designing an Effective UI for Websites with Content Overload |
Article |
Pros and cons of using carousels on websites |
|
8 |
Video |
The disadvantages of autoforwarding carousels |
|
|
9 |
Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility |
Article |
|
|
10 |
Video |
Comparison between card view and list view and when to use each |
|
|
11 |
Article |
Guidelines for creating comparison tables |
|
|
12 |
Video |
Guidelines for using overlays on websites |
|
|
13 |
Video |
Discussion on when comparison tables should be avoided |
|
|
14 |
Article |
Definition and guidelines for using modal dialogs |
|
|
15 |
Article |
Guidelines for using overlays on websites |
|
|
16 |
Article |
When and how to use popups |
|
|
17 |
Video |
How to use exit-intent popups to improve conversion |
|
|
18 |
Needy Design Patterns: Please-Don’t-Go Popups & Get-Back-to-Me Tabs |
Article |
Problems caused by needy design patterns |
|
19 |
Article |
How to use exit-intent popups to improve conversion |
|
|
20 |
Article |
Guidelines for designing scroll bars |
|
|
21 |
Article |
Pros and cons of horizontal scrolling on desktop |
|
|
22 |
Article |
When infinite scrolling is not suitable |
|
|
23 |
Article |
Guidelines for when to save users’ scroll position |
|
|
24 |
Article |
Definition and guidelines for implementing scrolljacking |
|
|
25 |
Article |
Definition and best practices for scroll fading |
|
|
26 |
Article |
Guidelines on parallax animation |
|
|
27 |
Video |
A comparison among skeleton screens, progress bars, and spinners, and when to use each |
|
|
28 |
Article |
How to design animations that match attention to the context and user needs |
|
|
29 |
Video |
||
|
30 |
Article |
Common user behaviors around cookie permissions and design guidelines for cookie-permission requests |
|
|
31 |
Video |
Guidelines for designing cookie-permission requests |
|
|
32 |
Video |
An overview of 5 common user types based on their willingness to accept cookie permissions |
Content on the Web
Web content should align with user goals and online behaviors. Use articles and videos in this section to learn about best practices for writing, formatting, and structuring web content.
|
Number |
Link |
Format |
Description |
|
1 |
Article |
Why container-first strategy is problematic and how to design a flexible layout |
|
|
2 |
Article |
Definition of Mini-IA |
|
|
3 |
Article |
Definition and strategies for chunking information |
|
|
4 |
Video |
Guidelines for writing in the inverted pyramid style |
|
|
5 |
Video |
A content-planning technique that helps structure and prioritize content in the design process |
|
|
6 |
Article |
Formatting tactics to improve the scannability of long-form content |
|
|
7 |
Article |
Tips on using bullets to present content |
|
|
8 |
Article |
Guidelines for writing in the inverted pyramid style |
|
|
9 |
Article |
Discussion on writing in passive voice to improve scannability and SEO |
|
|
10 |
Article |
Discussion on why Get Started buttons cause confusion |
|
|
11 |
Article |
Ways to make Learn More link label more descriptive |
|
|
12 |
Article |
A study shows why microcontent needs to be concise and front-loaded with keywords |
|
|
13 |
Video |
Pros, cons, and guidelines for using decorative images |
|
|
14 |
Article |
Guidelines for including photos in content |
|
|
15 |
Article |
Eyetracking studies comparing the effectiveness of aligned and zig-zag image-text layouts |
|
|
16 |
Article |
Guidelines for deciding when an image needs alt text |
|
|
17 |
Video |
||
|
18 |
Article |
Guidelines for writing informative alt text based on the image type |
Web Form Design
Web forms are essential touchpoints where users share information and complete key tasks. This section introduces core principles that make forms easier to understand, quicker to complete, and more supportive from start to finish.
| Number | Link | Format | Description |
|---|---|---|---|
|
1 |
Article |
Well-established but frequently ignored UX design guidelines for web forms |
|
|
2 |
Less Effort, More Completion: The EAS Framework for Simplifying Forms |
Article |
EAS framework (Eliminate, Automate, Simplify) for reducing interaction costs in form design |
|
3 |
Few Guesses, More Success: 4 Principles to Reduce Cognitive Load in Forms |
Article |
4 principles for minimizing users’ cognitive load when filling out forms |
|
4 |
Article |
Guidelines for designing usable wizards |
|
|
5 |
Article |
10 guidelines to help users recover from errors in forms |
|
|
6 |
Article |
Discussion on why placeholders in form fields hurt usability |
|
|
7 |
Video |
||
|
8 |
Article |
Guidelines for marking required fields in forms |
|
|
9 |
Video |
||
|
10 |
Video |
Guidelines for organizing form fields and labels to make forms easier to fill |
|
|
11 |
Form Design Quick Fix: Group Form Elements Effectively Using White Space |
Article |
How to improve the web form layout with grouping and whitespace |
Links serve as the vital connections between web resources, making them a fundamental element in web navigation. Explore the article and videos below to learn about best practices for optimizing web links.
|
Number |
Link |
Format |
Description |
|
1 |
Article |
Guidelines for creating descriptive links that meet user expectations |
|
|
2 |
Writing Hyperlinks: Salient, Descriptive, Start with Keyword |
Article |
Guidelines for writing link text |
|
3 |
Article |
Guidelines for displaying textual links |
|
|
4 |
Article |
Design considerations for signifying clickability |
|
|
5 |
Article |
Why websites should use different colors for visited and unvisited links |
|
|
6 |
Buttons vs. Links: What’s the Difference and Why Does it Matter? |
Video |
Comparison and guidelines for designing buttons and links |
|
7 |
Article |
Considerations and guidelines for when to open links in a new tab and window |
|
|
8 |
The Same Link Twice on the Same Page: Do Duplicates Help or Hurt? |
Article |
Pros and cons of redundant links and UX guidelines on working with redundancy |
Web Navigation
Web navigation is the backbone of every successful website, determining how users interact and find their way around the content. This section covers essential elements of web navigation and how to design for better usability.
|
Number |
Link |
Format |
Description |
|
1 |
Article |
Guidelines for designing menus |
|
|
2 |
Article |
Considerations and guidelines for using mega menus on websites |
|
|
3 |
Article |
Guidelines for designing contextual menus |
|
|
4 |
Article |
Why it is important to preserve global navigation |
|
|
5 |
Article |
Why websites should provide links back to the homepage |
|
|
6 |
Article |
Research showing right-aligned logos on websites hurt brand recall |
|
|
7 |
Article |
Research showing center-aligned logos impede web navigation |
|
|
8 |
Video |
Discussion on logo placement and its effects on brand awareness |
|
|
9 |
Article |
The benefit of using breadcrumb navigation |
|
|
10 |
Article |
Guidelines for using breadcrumbs |
|
|
11 |
Article |
An introduction to footers and different footer-design patterns |
|
|
12 |
Video |
||
|
13 |
Article |
Research-based guidelines for using site maps |
|
|
14 |
Information Architecture vs. Sitemaps: What’s the Difference? |
Article |
Discussion on the difference between IA and sitemaps |
|
15 |
Video |
A comparison of flat vs. deep hierarchy and their benefits and drawbacks |
|
|
16 |
3 Common IA Mistakes (that Are All Due to Low Information Scent) |
Article |
Discussion on writing proper labels for website navigation |
|
17 |
Article |
Discussion on why the 3-click rule is problematic when designing web navigation |
|
|
18 |
Video |
||
|
19 |
Article |
Definition and guidelines for designing in-page links |
|
|
20 |
Article |
Research findings on user perception of in-page links and guidelines for implementing table-of-content links |
|
|
21 |
Video |
||
|
22 |
Article |
Guidelines for designing tables of contents |
|
|
23 |
Video |
Advantages of table of contents on mobile and possible implementations |
|
|
24 |
Video |
Comparison between destination pages and transition pages and how to design for each |
|
|
25 |
Video |
Guidelines for testing keyboard accessibility |
Site Searching
Search is an essential web feature that requires thoughtful implementation. The videos and articles in this section provide helpful guidelines for an optimized search experience.
| Number | Link | Format | Description |
|---|---|---|---|
|
1 |
Article |
How users’ poor research skills affect their search behaviors |
|
|
2 |
Article |
5 reasons why websites cannot expect users to rely on search only |
|
|
3 |
Video |
Discussion on whether to invest in improving searching or navigation |
|
|
4 |
Article |
Discussion on how SEO relates to usability |
|
|
5 |
Article |
Guidelines for designing search boxes |
|
|
6 |
Video |
UX guidelines on in-page links |
|
|
7 |
Article |
How to support keyword foraging |
|
|
8 |
Article |
Definition and examples of filters vs. faceted navigation |
|
|
9 |
Article |
Guidelines for displaying search suggestions |
|
|
10 |
Video |
||
|
11 |
Article |
Usability issues on enriched site-search suggestions |
|
|
12 |
Article |
Guidelines for designing No Results page |
|
|
13 |
Article |
Recommendations on using scoped search on websites |
Crossplatform Experience
Designing a responsive web experience requires a comprehensive understanding of different devices to optimize for diverse screen sizes. This section presents essential considerations and strategies to present content across various mediums effectively.
| Number | Link | Format | Description |
|---|---|---|---|
|
1 |
Article |
Discussion on characteristics of different devices and strategies for designing crossplatform experiences |
|
|
2 |
Article |
Why users prefer to complete important or complex activities on larger screens |
|
|
3 |
Article |
Definition of responsive web design |
|
|
4 |
Video |
||
|
5 |
Article |
Definition of breakpoints |
|
|
6 |
Video |
||
|
7 |
Scaling User Interfaces: An Information-Processing Approach to Multi-Device Design |
Article |
Factors that impact human–device communication channels and how they relate to designing crossplatform experiences |
|
8 |
Video |
||
|
9 |
Mobile Websites: Mobile-Dedicated, Responsive, Adaptive, or Desktop Site? |
Article |
Different approaches to implementing mobile websites |
|
10 |
Article |
How to adapt images intended for desktop to mobile size |
|
|
11 |
Article |
Discussion on the negative impact of content dispersion and recommendations for mobile-first design |
|
|
12 |
Video |
Web Visual Design
The visual design of websites involves thoughtful integration of colors, typography, layout, imagery, and graphical elements. This section provides best practices for leveraging visual design to enhance web usability and accessibility.
|
Number |
Link |
Format |
Description |
|
1 |
Balance in UX Design: Symmetry, Asymmetry, and Radial Balance |
Video |
Visual balance and its application to UI design |
|
2 |
Article |
Definition and application of grids to UI design |
|
|
3 |
Video |
An overview of common grid types |
|
|
4 |
Article |
Guidelines for using large hero images on web pages |
|
|
5 |
The Picture-Superiority Effect: Harness the Power of Visuals |
Video |
Definition and impact of the picture-superiority effect |
|
6 |
Article |
Best practices for memorable visuals |
|
|
7 |
Article |
Guidelines for designing accessible visuals |
|
|
8 |
Article |
Usability consideration when placing text over images |
|
|
9 |
Article |
Discussion on why the low-contrast text is problematic and how to control prominence without harming usability |
|
|
10 |
Article |
Definition and impact of the aesthetic-usability effect |
|
|
11 |
Video |
Technique to test users' first impression of the website |
|
|
12 |
Video |
Technique to quickly identify the visual hierarchy of the design composition |
Web-Design Trends
Web design is an ever evolving field. This section evaluates web trends and provides guidelines for adapting emerging patterns to your design.
| Number | Link | Format | Description |
|---|---|---|---|
|
1 |
Article |
An examination of minimalistic web design and historical influences on the movement |
|
|
2 |
Article |
An analysis of characteristics of minimalism in web design and its impact on usability |
|
|
3 |
Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users |
Article |
Flat design origin, usability issues, and refined solutions |
|
4 |
Flat UI Elements Attract Less Attention and Cause Uncertainty |
Article |
An eyetracking experiment comparing UIs with weak and strong signifiers |
|
5 |
Flat UI Elements Lack Clickability Clues and Cause Confusion |
Video |
Guidelines for using large hero images on web pages |
|
6 |
Long-Term Exposure to Flat Design: How the Trend Slowly Decreases User Efficiency |
Article |
Effects of long-term exposure to flat design |
|
7 |
Article |
UX guidelines for implementing flat design |
|
|
8 |
Video |
3 key considerations on whether to follow design trends |
|
|
9 |
Article |
Literature review on the usability of the dark mode and recommendations on its adoption |
|
|
10 |
Article |
Survey results on users’ perception of the dark mode and best practices for designing dark-mode experiences |
|
|
11 |
Article |
Definition of skeuomorphism and its application in design |
|
|
12 |
Article |
Definition and best practices of glassmorphism |
|
|
13 |
Article |
Definition and best practices of neobrutalism |
Web Ecommerce
This section covers essential elements and guidelines for designing ecommerce websites. Use the articles and videos below as a starting point to create an effective ecommerce web design.
| Number | Link | Format | Description |
|---|---|---|---|
|
1 |
UX Guidelines for Ecommerce Homepages, Category Pages, and Product Listing Pages |
Article |
General guidance on designing homepages, category pages, and listing pages |
|
2 |
Article |
Definition and guidelines for list entries |
|
|
3 |
Article |
Best practices for photos in the product listing |
|
|
4 |
Design Guidelines for Selling Products with Multiple Variants |
Article |
Guidelines for listing multivariant products |
|
5 |
Article |
Discussion on Infinite loading and Load More usability |
|
|
6 |
Article |
Different approaches to category pages and when to use each |
|
|
7 |
Article |
Guidelines for designing product-detail pages |
|
|
8 |
Models Matter: A Case for Using Diverse Models on Ecommerce Websites |
Article |
Guidelines for using modals in ecommerce |
|
9 |
Article |
Guidelines for designing filter interactions |
|
|
10 |
Article |
Guidelines for naming product filters |
|
|
11 |
Article |
A 2018 study that examines the landscape of ecommerce search |
|
|
12 |
Article |
Guidelines for designing the store-finder feature |
Free Reports
For a comprehensive set of guidelines and findings related to web user experience, check out our reports:
Additional Paid Resources
Reports
- How People Read Online: The Eyetracking Evidence
- B2B Website Usability for Converting Users into Leads and Customers
