UI Design Patterns for the Web, Part 2
2 likes1,851 views
This document provides an overview and analysis of various web layout patterns, including cards, grids, magazine-style layouts, split screens, single-page apps, F patterns, Z patterns, and symmetrical layouts. It discusses the problems each layout addresses, how the layout works as a solution, and tips for implementing each style successfully. The document is from a book on web UI design patterns and focuses on layout, content, data, scrolling, and multimedia patterns.
UI Design Patterns for the Web, Part 2
- 1. Web UI Design Patterns 2016 Volume 2 Layouts, Content, Data, Scrolling, Multimedia
- 2. Copyright © 2016 by UXPin Inc. All rights reserved. No part of this publication text may be uploaded or posted online without the prior written permission of the publisher. For permission requests, write to the publisher, addressed “Attention: Permissions Request,” to hello@uxpin.com. Web UI Design Patterns 2016 Volume 2 Layouts, Content, Data, Scrolling, Multimedia
- 3. Index Layout Styles 6 Cards7 Grids11 Magazine-Style Layout 14 Container-free Format 17 Split Screen 20 Single-page Web Apps 23 F Pattern 26 Z Pattern 30 Horizontal Symmetry 33 Approximate Horizontal Symmetry 35 Radial (Rotational) Symmetry 37 Asymmetry39 Content Organization 43 Favorites, Bookmarks, and Wish Lists 44 Tagging47 Activity Feed (News Feed, Activity Stream) 50 Full-Screen Modes 54 Customized Collections/Grouping 57 Empty States 60 Accompanying Maps 63 Chunking66 Context-Aware Content 69
- 4. Data Management 72 Settings73 Search Filters (Advanced Search) 76 Stats / Dashboards 79 Pricing Tables 82 Autosave85 Action Context 87 Scrolling91 Long Scrolling 92 Fixed Long Scrolling 96 Infinite Scrolling 98 Parallax Scrolling 102 Visuals and Media 105 Lightbox Overlay 106 Monochromatic Style 109 Hero Images 112 Video Backgrounds 116 High Definition 119
- 5. Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow me on Twitter Co-founder and head of product, Kamil previously worked as a UX/UI Designer at Grupa Nokaut. He studied software engineer- ing in university, but design and psychology have always been his greatest passions. Follow me on Twitter @ziebak Ben Gremillion is a Content Designer at UXPin. Previously, he was a Design Writer at ZURB. He started in newspaper design, saw a digital future, and learned HTML/CSS in short order. He later earned an Adobe Certification, and learned up regex, PHP, MySQL, and other impressive-sounding acronyms. He also builds and maintains a CMS for webcomic artists, and participates in bi-annual NaNoWriMo challenges. With a passion for writing and an interest in everything anything related to design or technology, Matt Ellis found freelance writing best suited his skills and allowed him to be paid for his curiosity. Having worked with various design and tech companies in the past, he feels quite at home at UXPin as the go-to writer, researcher, and editor. When he’s not writing, Matt loves to travel, another byproduct of curiosity.
- 6. Layout Styles Cards7 Grids11 Magazine-Style Layout 14 Container-free Format 17 Split Screen 20 Single-page Web Apps 23 F Pattern 26 Z Pattern 30 Horizontal Symmetry 33 Approximate Horizontal Symmetry 35 Radial (Rotational) Symmetry 37 Asymmetry39
- 8. Layout Styles 8 Google + Oprah
- 9. Layout Styles 9 1. Problem Browsing is a large part of site interaction, but displaying the de- tails for each item would clutter the screen. 2. Solution Cards allow sites to present a heavy dose of content in a digestible manner. As we explain in our Web Design Book of Trends 2015–2015, cards are popping out everywhere lately, and this pattern’s success is directly related to its usefulness. Cards act as containers for clickable information: bite-sized pre- views to help users find the content they want. The style of the cards varies with each site, but most contain an image and description, and sometimes individual functions, such as Facebook’s Like or Twitter’s Retweet. Moreover, cards work well with responsive design. Since each card is self-sufficient, their placement can be rearranged to fit any screen size. For sites with a lot of content, cards offer a lot: • Intuitive – don’t require instructions. • Advantageous for responsive design – since each card is self-suf- ficient, their placement can be rearranged to fit any screen size. • Shareable – easy to share only specific content on social media. • Versatile – can be used with a wide range of site styles.
- 10. Layout Styles 10 3. Tips • Make the entire card clickable, not just certain portions. Fitts’s Law, described in Interaction Design Best Practices, states that this makes user interaction more likely. • Focus each card around one central concept, and no more. Otherwise, that defeats the purpose. • Keep smaller screens in mind when selecting images. You may need to crop them differently for different devices. • Don’t get too complex. Cards work best when they’re simple, in what they show and how. Basic typography and minimal description helps browsing.
- 12. Layout Styles 12 Etsy Diply 1. Problem Content-heavy sites want to display all primary items with equal hierarchy.
- 13. Layout Styles 13 2. Solution A grid structure makes browsing easier. Cards are almost always laid out in a grid format, of one kind or another. Grids offer more options for browsing than simple list views, which makes this style space-effective. Grids can vary in size, spacing, and the number of columns. Sites like Huffington Post stagger their options to avoid that “straight- laced” feel, while YouTube plays up the strict organization, with straight rows and grouped into categories (“Recommended,” spe- cific channels, etc.). 3. Tips • Pay attention to white space (or lack-there-of, as with Diply) because it influences how users browse. Ample space is slower, but with more attention placed on each item. Minimal space is faster, but risks some content slipping through the cracks. • Consistency is important, especially when designing for different devices. Make sure your layout stays recognizable at different responsive breakpoints. • Get started with a basic 12-column grid with tools like 960js.
- 14. Layout Styles 14 Magazine-Style Layout TIME WebMD
- 15. Layout Styles 15 WIRED BuzzFeed 1. Problem A site has a lot of regularly-updated content in multiple categories.
- 16. Layout Styles 16 2. Solution Magazines had this problem long before websites, and the format they evolved remains viable. The alternating sizes of columns, cards, and/or headlines breaks up the monotony of the grid, while still showcasing a variety of content. The magazine layout changes up how content is displayed. The left side of the screen might be dominated by a grid of cards, while the right side might have a list of text links. Take BuzzFeed, for example: the first column is featured content, with a detailed description next to the picture. The middle is timely content, with a brief description under the picture; and the last column is what’s trending, numbered pictures with no description. Pay attention to their typography – text colors and sizes vary to show usability and create a visual hierarchy. 3. Tips • Like print magazines, this format emphasizes images. As with TIME, WebMD, and WIRED, there is usually one dominant fea- ture image on the screen to draw focus before users scan the smaller, secondary images. • One of the characteristics of this style is a vertical menu on either side (or horizontal menu).
- 17. Layout Styles 17 Container-free Format AOL Apple Public-Library
- 18. Layout Styles 18 Cienne NY 1. Problem A site wants a minimalist approach when presenting data. 2. Solution The container-free format takes minimalism to the next level, stripping away all unnecessary visuals and breaking away from the conventions of other sites. Rather than clear-cut divisions, this pattern format relies on visuals, grouping, and common sense to show relationships. Historically, web design has relied on linear and highly structured layouts to present information. This works well, but with more options available today, designers can experiment “outside of the box.” This style appeals to agency (Public-Library), portfolio, and fashion sites (Cienne NY), which all value appearing modern and avant-garde. Designing without containers puts more power back to the content itself. However, extra care must be given to the visual hierarchy. This risky pattern is only as effective as the people designing it.
- 19. Layout Styles 19 Often the face of minimalism, Apple disregards containers for its site. Links are all textual (no buttons), and a clever visual design explains which content relates to what. 3. Tips • Typography is vital to designing without containers. Size, type- face weight, and color all communicate meaning in place of blunt dividers. Apple uses large text for the title, smaller text for the secondary description, and blue text for links out. • To prevent confusion, make most elements clickable. If the user is confused about an element, they will likely click on it first to test interactivity. • Content-heavy sites have difficulty with this format, although AOL shows that it’s possible (although not always ideal).
- 20. Layout Styles 20 Split Screen Google Translate Adidas Football (UK) Peugeot
- 21. Layout Styles 21 62 Models Lauren Wickware Design 1. Problem A site has two main pieces of content that are equally important. 2. Solution The split-screen layout is the logical and trendy way to give two contrasting elements equal consideration.
- 22. Layout Styles 22 The split-screen is a choice for displaying two central elements si- multaneously or – as the Adidas example shows – pit them against each other. This is a good choice whenever you don’t know which of two elements to feature prominently: do both. Split screens are perfect for when the site offers two drastically different variations, such as the genders in 62 Models. Users make their selection right from the start, so the site doesn’t waste time showing both options needlessly. Split screens also give the op- portunity to feature two calls-to-action, as with Peugeot. The style has since grown to become purely aesthetic. Most com- mon is having text on one half of the page, and a header image filling the other, as with Lauren Wickware Design. Both sides are two aspects of the same concept. 3. Tips • The split-screen is ideal for contrast. As designer Patrick Mc- Neil suggests, play up the duality with opposing characteristics, such as opposite colors, different text sizes, the nature of the image, etc. • Retain a single, unified navigation menu – ideally at the top, where it’s clear that it applies to both sides. • Split-screen designs do not expand well with as content grows, so do not apply them to content-heavy layouts.
- 23. Layout Styles 23 Single-page Web Apps Twitter Gmail Spotify
- 24. Layout Styles 24 Tumblr 1. Problem Multi-page navigation system is too convoluted or unnecessary. 2. Solution Modern web development has paved the way for single-page sites and web apps. Both technological advancements and the prom- inence of mobile browsing (in which single-page apps are more useful) gave rise to this pattern, which is restructuring how the web works. Using AJAX, single-page web apps load asynchronously and are able to combine multiple actions into one page. This pattern is also popular for non-app sites, which section off their home page to serve the needs of individual pages. Gmail, for example, allows email reading, composing, and chat- ting on the same page, and even organizes emails into separate categories, which mimics a multi-page site. Spotify, too, multitasks
- 25. Layout Styles 25 by allowing the user to play music while they browse additional music, uninterrupted by loading pages. 3. Tips • Generate unique URLs for each viewpoint, like Gmail or Twitter. Because content is loaded dynamically using JavaScript, URLs require special attention. Unique URLs also enable use of the browser’s Back button. • Use sticky navigation to reduce disorientation, even if only a header menu. • Apply the scrolling techniques from Chapter 4 to properly deal with scrolling issues.
- 26. Layout Styles 26 F Pattern Yelp Groupon
- 27. Layout Styles 27 The New Yorker 1. Problem Users are having difficulty browsing text-heavy sites. 2. Solution If there is a lot of content – especially text – users will respond better with the F pattern layout, which mimics the way people scan naturally. The Nielsen Norman Group explains how eye-tracking studies re- vealed that users (in left-to-right reading cultures) typically scan heavy blocks of content in a pattern that looks like the letter F or E. Our eyes are trained to start at the top-right corner, scan hor- izontally, then drop down to the next line and do the same until we find something of interest.
- 28. Layout Styles 28 For example, if the user is scanning a blog entry, they will look at the first line of a paragraph for keywords or to gage the mean- ing, and if it’s not what they want, they’ll drop down to the next paragraph. When there’s a lot of content, the F pattern organizes it into hor- izontal rows, one on top of the other. This creates pathways for the users’ eyes to go where they would normally, and gives the designer more control over what gets seen. Yelp uses perfectly aligned vertical columns to give the users a starting point. When they find an interesting topic (or picture), their eyes scan horizontally for more information. If the item in the vertical column doesn’t interest them, they go down until they find one that does. 3. Tips • Place the most important content like CTAs at the left and right sides, where the user begins and ends their horizontal search. This momentary pause as they drop down gives them a little extra time to consider. • Start new paragraphs with enticing keywords. Additionally, try highlighting keywords within text, since that’s what users are looking for anyway. • The first two rows are the most important. Users may leave the site if they don’t find what they want there.
- 29. Layout Styles 29 • Use the right-side column to display relevant, but unrelated content, or as a search tool. This area is seen, but is regarded as outside the scanning process. • Read our Web UI Design for the Human Eye: Content Patterns and Typography for more explanation and best practices.
- 30. Layout Styles 30 Z Pattern TripAdvisor Kentucky Fried Chicken
- 31. Layout Styles 31 Wunderlist 1. Problem A site has a specific agenda or call-to-action that users are not interacting with. 2. Solution Like the F pattern, the Z pattern layout mimics natural user scan- ning methods. However the Z pattern is better suited for sites with a singular goal and less content.
- 32. Layout Styles 32 The Z pattern is effective at directing user attention to specific points by using well-placed visuals, text, and CTAs. While the F pattern is better for browsing heavy content, the Z pattern guides users through more open pages. The user (in left-to-right reading cultures) again starts in the top- left corner. Instead of dropping down directly, however, their eyes wander a bit in the middle, then start again at the bottom or near bottom left corner. You can encourage this pattern by placing a telling image in the center (TripAdvisor), or by alternating text and images to create a zigzag (Wunderlist). 3. Tips • Place CTAs on the right side, at the end of the line: user will slightly pause at the end before moving down. • Place your most important CTAs in the upper right corner, since the top line is the most visible. • The Z pattern can be repeated over and over on the same page, so that the user developers a rhythm that keeps them there.
- 33. Layout Styles 33 Horizontal Symmetry Starbucks Budweiser 1. Problem A site includes many recurring visual patterns that must be orga- nized clearly.
- 34. Layout Styles 34 2. Solution A visual phenomenon occurring in nature, symmetry is generally regarded as beautiful and creates a sense of order and structure, even trust. Because they are visually pleasing, symmetrical images are more likely to create an emotional connection with users, which im- proves their enjoyment of the site, how they identify the brand, and how well they recognize the site later. 3. Tips • Balance is not necessarily symmetrical. These are two different, though related, concepts. For more on visual balance, read this Smashing Magazine article. • From its fine arts background, symmetry adds an air of elegance and sophistication to a site’s appearance.
- 35. Layout Styles 35 Approximate Horizontal Symmetry eBay McWhopper 1. Problem Horizontal symmetry is too structured for a site. 2. Solution Approximate symmetry retains most of the benefits of symmetry, but with a little added vitality. It is created by adding slight asym-
- 36. Layout Styles 36 metrical aspects to an otherwise symmetrical image. The result is a more stimulating visual, though it loses a small amount of structure. The slight visual disruption, however, can work to your benefit. 3. Tips • To grab more attention, place important lines of text, images, or calls to action in areas that break up the symmetry. • A little goes a long way; even altering a symmetrical image slightly produces visual tension. Likewise, you can create asymmetry by just placing a sidebar in an otherwise balanced design. Add your disruptive elements carefully, otherwise you risk complete visual clutter.
- 37. Layout Styles 37 Radial (Rotational) Symmetry Wikipedia Technics 1. Problem A site wants to draw attention to a central point and motivate immediate action. 2. Solution Radial symmetry creates balance in a circle around a central point.
- 38. Layout Styles 38 While difficult to apply, when done well this creates a beautiful aesthetic that attracts attention to the center, typically to the com- pany’s name, logo, and surrounding links. Radial symmetry is also good for showing motion. Circular pat- terns in general encourage users to continually move their focus around to a natural end. 3. Tips • Radial symmetry is a good way to stand out while looking good, since it’s not as common as the other types. • Centralize your most important elements, and keep the second- ary ones near the edges. • When placing many links around the center of attention, do not complete the loop. For example, notice how Wikipedia leaves the top and bottom of the circle unoccupied. The space creates breathing room for the eye to explore links on both sides.
- 39. Layout Styles 39 Asymmetry Esquire (UK) Honda
- 40. Layout Styles 40 Revolution PN Histograph
- 41. Layout Styles 41 HSBC Beoplay 1. Problem Specific feature content must stand out immediately without dis- rupting visual flow.
- 42. Layout Styles 42 2. Solution Asymmetry creates tension and dynamism – not practical for every site, but worthwhile if you want a livelier site that clearly shows points of focus. When used properly, asymmetry can create active space, which means it makes white space more lively. Asymmetrical elements cause the eye to move more rapidly, even across emptiness, which makes the site itself appear more energetic. However, this style is difficult to apply. Misplaced asymmetry can lead to confusion in the visual hierarchy, or just plain ugliness. 3. Tips • The use of colors highlights the jarring effects of asymmetry. Both HSBC and Honda use patches of red to push and pull the user’s sight. • To create a slight asymmetric yet organized layout, balance the text on one side with images on the opposing side. • Objects with sharp edges (e.g., a triangle) add more visual weight to an area, which offsets the opposing area. Use these objects carefully since they can quickly unbalance the design. Design web prototypes faster with UXPin (1000+ built-in elements)
- 43. Content Organization Favorites, Bookmarks, and Wish Lists 44 Tagging47 Activity Feed (News Feed, Activity Stream) 50 Full-Screen Modes 54 Customized Collections/Grouping 57 Empty States 60 Accompanying Maps 63 Chunking66 Context-Aware Content 69
- 44. Content Organization 44 Favorites, Bookmarks, and Wish Lists Airbnb Gmail YouTube
- 45. Content Organization 45 Pinterest 1. Problem The user forgets about or can’t find content they enjoyed previously. 2. Solution Let your users place content into a section for favorites, bookmarks, or wish lists. First popularized by e-commerce sites as a reminder to users to buy content later, the practice expanded into sites with generous content, where refinding a certain post is problematic. Unlike sharing or Facebook liking, favoriting be public or private. 3. Tips • Hearts and stars are universal icons – having one in a control panel requires no further explanation. (Although, you may want to point out where to access favorites in your onboarding.)
- 46. Content Organization 46 • While placing the favorite page in the main navigation menu (YouTube, Gmail) is helpful, listing it as a subsection in the profile is acceptable. Users will typically look here if they can’t find it.
- 48. Content Organization 48 SiteInspire (via Foundwell) 1. Problem Content is so broad that users don’t want to skim through it all. 2. Solution Organize content into categories with “tags” so users can find what they’re looking for quickly. This pattern is an effective way to reduce search time with lots of content, namely for sites with user-generated content. For such sites, users can tag their own content, giving them more control and allowing them to better ensure that their content is seen by their target audience. Additionally, this makes it easier for the site to recommend similar content under the same tags. If the user often visits posts tagged
- 49. Content Organization 49 “romance novels,” it’s a safe bet to suggest other popular posts with the “romance novels” tag. 3. Tips • Include tags in the onboarding process to familiarize users with them. Often, one of the early prompts when setting up a new profile is to follow a minimum requirement of tags. This helps the system populate the user’s timeline early on, before they have time to fine-tune it. • Avoid write-in tags – these lead to overlaps, such as “comedy” and “humor.” An obvious exception would be Twitter’s hashtags... but those are a whole other thing on their own. • When listing a post’s tags, make each tag clickable so users can visit the root pages.
- 50. Content Organization 50 Activity Feed (News Feed, Activity Stream) Product Hunt Web Designer News
- 52. Content Organization 52 Google Plus Vine
- 53. Content Organization 53 1. Problem Users want to stay updated on site activity. 2. Solution The activity feed is, for most social media sites, the reason people use it. These are populated by friend activity or activity within the user’s chosen fields, such as new posting in Vine under Ani- mals. Most of the time, users never leave the Facebook feed page, scrolling down for hours. In order for an activity feed to work, there must be plenty of new content. In other words, if user activity is sparse, an activity feed is ineffective. Activity feeds don’t always need to be user posts. LinkedIn, for example, informs users within the main feed when their friends update their profile, share or comment on other posts, or make new connections. Vine advertises featured content and users. 3. Tips • When there are interaction options such as liking or commenting, cards work best since they section off content from each other. • When onboarding, use dummy content, from a generic friend or something like this. This gives new users an impression of how the activity feed works and teaches the guidelines.
- 54. Content Organization 54 Full-Screen Modes Hulu YouTube
- 55. Content Organization 55 Medium 1. Problem Content is hard to view because of size or because other screen elements are distracting. 2. Solution Full-screen mode puts content front and center and removes any potential distractions. While a must-have for video sites like Hulu and YouTube, this option can also be effective on other content-heavy sites as well.
- 56. Content Organization 56 Medium, for example, strips away the sidebars and provides a somewhat empty wide space when users select a post – this lets them focus exclusively on the writing. 3. Tips • Automatically switching to full-screen mode is useful when users click on images or video within other content. • If your site is strictly for videos, an automatic full-screen mode saves users a step.
- 57. Content Organization 57 Customized Collections/Grouping eBay Google+
- 58. Content Organization 58 Allrecipes 1. Problem Users are not satisfied with the default groupings. 2. Solution Give users more power with customized collections. This gives them the option to create their own groups, and organize content within them. This pattern is an extension of the favorites pattern above. It serves the same purpose, but with the added benefit of deeper user per- sonalization: they create the grouping categories, according to their preferences.
- 59. Content Organization 59 3. Tips • This extends further than just post content. For example, Google+’s circles allows users to organize their friends into categories. This simplifies other actions: users can filter content, start chats, or send invitations to specific circles. • It’s not enough to offer different categories – you must allow users to create their own categories and name them.
- 60. Content Organization 60 Empty States Tumblr Spotify
- 61. Content Organization 61 SoundCloud 1. Problem New users need guidance upon their first interaction. 2. Solution An alternative to the immediate immersion pattern, the empty state is a gentle guide to showing users how the site works and encouraging interaction. It’s part instruction and part placeholder, and often features a call-to-action suggesting the user’s next step. In the onboarding period, after a user signs up but before they’ve figured out the basics, an empty state page can influence how the user interacts with the site. 3. Tips • Empty states should never be completely empty: a placeholder image mimicking actual content sparks the user’s imagination.
- 62. Content Organization 62 • Empty states can also show actual examples. To accompany the real examples, add instructions on how to populate content based on the user’s own tastes. • Check out Craig Dennis’ useful article on Codrops about design- ing empty states. Then, take a look at the excellent examples on Empty States.
- 63. Content Organization 63 Accompanying Maps Trip Advisor Yelp
- 64. Content Organization 64 Airbnb Foursquare 1. Problem User needs to know where relevant content is geographically.
- 65. Content Organization 65 2. Solution Showing locations on a map is a lot more helpful than simply listing the address, as most users can better understand this information with a visual aid. Typically maps are placed side-by-side with content lists so that users can compare quickly. This is more-or-less essential for sites that discuss places such as restaurants (Yelp), residences (Airbnb), or venues (Foursquare). Accompanying maps work best when they’re interactive and responsive to how users interact with the main content. For ex- ample, when users hover over an entry in Yelp or Airbnb, the corresponding marker on the map changes color, establishing an instant connection. In Foursquare, a window appears on the map with details about the location. 3. Tips • Have interactions go both ways: for example, if users move the map, the content changes. Airbnb allows users to change or narrow now entries by moving or zooming in on the map. • Because maps are a secondary aid, they’re better situated on the right side, with primary content on the left.
- 67. Content Organization 67 eBay Etsy 1. Problem Too much unorganized content is impossible to comprehend.
- 68. Content Organization 68 2. Solution Based on George A. Miller’s work with short-term memory, chunk- ing is an organizational method conducive to the human capacity for understanding. Instead of displaying all the necessary content as is, “chunking” them into groups based on similarity helps the user comprehend what they’re looking at. For example, a 10-digit phone number might be too difficult to remember, so we group them into chunks of three and four. For web design, chunking multiple items into groups allows de- signers to save space on the screen without losing content. In the Etsy example above, they are showcasing 16 different products – a large amount – but the screen does not appear busy. 3. Tips • While the ideal number of “chunks” is contested, a reliable range is 3–6 as suggested by UI Patterns. • Chunking is popular with e-commerce sites, as they can show- case more products without overwhelming the user. • Because of its roots in memory retention, chunking is especially useful for educational and learning sites. • Avoid chunking with sites where users are looking for specific content. Chunking works best for suggesting undiscovered content.
- 69. Content Organization 69 Context-Aware Content Facebook Bing Images
- 70. Content Organization 70 Vine 1. Problem The preferred settings of the content change based on the context.
- 71. Content Organization 71 2. Solution Anticipate your user’s preferences by changing the content based on the content. More often than not, this relates to videos and autoplay: videos remain paused when users are likely not interested, but play au- tomatically when context suggests they are, thus saving them the step of pressing play. Facebook pauses videos during the scroll, but autoplays them when they remain still at the center of the screen. When scrolling, users are likely searching for content that interests them, but when vid- eos remain on the screen, it usually means the user wants to see them (or may even entice them to stay and watch). Vine, however, waits until users hover over the content to play it. Bing Images uses this pattern well: when browsing, images re- main small so that more fit on the page. Yet when the user finds an image they like, hovering over it makes it bigger, so they can study it better. 3. Tips • Hovering is a clear indicator of interest. If you’re unsure, change the content behavior as users hover over items. Design web prototypes faster with UXPin (1000+ built-in elements)
- 72. Data Management Settings73 Search Filters (Advanced Search) 76 Stats / Dashboards 79 Pricing Tables 82 Autosave85 Action Context 87
- 75. Data Management 75 1. Problem Users are not satisfied with the default settings. 2. Solution Give users the option to change settings to their own preferences. A setting section is a common addition to user’s profile. Some usual setting sections include: • email settings • privacy options • social media account connections • subscription or payment options • display preferences • mobile connections Allowing your user to customize the site to their specifications makes it feel more personal to them, and also prevents annoyances like too many emails. 3. Tips • If you offer a lot of customizable options, chunk up the settings section into separate subsections. For sites with categories of options (like Etsy), add separate tabs. • Give your user instant feedback when their settings have been updated. A quick message like “settings saved” puts users at ease.
- 76. Data Management 76 Search Filters (Advanced Search) Amazon
- 77. Data Management 77 Yelp DeviantArt 1. Problem There is so much content that regular searches aren’t effective enough. 2. Solution Incorporate search filters – these secondary search options allow users to narrow down the field.
- 78. Data Management 78 Search filters enable searching two (or more) dimensions at once. For example, Yelp features different search bars for place and for type of food/restaurant. This pattern often incorporates categories or tags, if available. Amazon, with products of every type, eliminates false leads with sectional searching. DeviantArt uses categories as well as sorting options based on time and popularity. 3. Tips • Combine this pattern with the tagging pattern for the best results. • The more search filters, the better, as long as you stay within your site’s capabilities. Amazon’s filters include color, delivery date, keywords, brand, ratings, price, discounts, etc.
- 79. Data Management 79 Stats / Dashboards Salesforce IQ CNN
- 80. Data Management 80 Forecast.io Asana 1. Problem The user wants to digest data at a glance. 2. Solution Present user’s stats in a conveniently placed dashboard. Dash- boards work on different levels, first by giving the user a feeling
- 81. Data Management 81 of control, and also by compensating for their limited short-term memory. Some sites, like Twitter, make this information obvious by display- ing it front and center on the user’s profile page. Others, like the examples above, dedicate a separate page. 3. Tips • To improve the comprehension of your dashboard visuals, fol- low the Gestalt laws mentioned in this UX Mag piece. • Design the dashboard around a single goal. Prioritize around this goal, and edit ruthlessly. For instance, Asana focuses on project management, so it makes sense that the overview shows only project completion over time. • Group related data together to establish connections. This can be with a category title like CNN Money or strictly visually, like Forecast.io. A common pattern is an overview tab with addi- tional category tabs.
- 82. Data Management 82 Pricing Tables Shopify Hulu
- 83. Data Management 83 UXPin Team Treehouse 1. Problem Users want to know different tiers of pricing.
- 84. Data Management 84 2. Solution Organize your data into tables for improved comprehension and therefore conversion. When two or more plans have multiple differences in features, laying everything out in a grid makes it easier and faster for us- ers to compare and chose the selection best for them, especially if they’re only interested in one unique feature. Users can scan quickly for the information relevant to them. For sites with more than two options, this pattern works best, as it emphasizes the differences. 3. Tips • Maintain congruency between the options. Either create a chart with yes/no markers (Hulu), or keep related features on the same line (GoDaddy’s increasing GB of disk space) or same typography (Squarespace’s faded basic inclusions). • Highlight a preferred plan for users. For example, a “most pop- ular” tag helps guide your user’s decision. • To entice users into buying annual plans, make the dollar amounts decrease as they switch from the monthly pricing view to the annual pricing view. • Link or feature customer testimonials on pricing pages to build trust. If room allows, you can also add logos of prominent com- panies.
- 85. Data Management 85 Autosave Gmail Google Docs Blogger 1. Problem User forgets to save their data, or doesn’t want to worry about doing so. 2. Solution An autosave features prevents accidental data loss, and puts the user at ease. As long as it’s not intrusive, users generally prefer having it, even if at times it’s unnecessary.
- 86. Data Management 86 3. Tips • As a general rule of thumb, implement autosave if users are normally typing more than one paragraph. • Autosave should be subtle, but not invisible. Users should know it’s there without it distracting them. Notice in the examples how the autosave text is in a place with visibility, but with gray text. • Some sites include an additional save button for extra user security and control.
- 87. Data Management 87 Action Context Netflix Booking.com Amazon
- 88. Data Management 88 eBay 1. Problem The user doesn’t know the full effects of their action. 2. Solution When it’s not evident on its own, say straight-out what your user can expect from their actions. This pattern is about explaining how the site works by adding context, and perhaps eliciting more interaction in the process. These explanations generally fall into one of two categories: 1. How a user’s action affects other areas 2. Using circumstances or other users’ actions to explain context Netflix makes good use of the first strategy. Their intricate rec- ommendations system based on user ratings is one of their main draws, and Netflix is completely open about how it works. Aside from using phrases such as “Because you liked... ” or “Because you watched... ” they also encourage deeper involvement by offering
- 89. Data Management 89 specific recommendations in exchange for rating a recently watched title. This openness creates the context that lets users know that certain actions, rating and watching, will ultimately benefit them with smarter recommendations. Context also works as a sales tactic for producing urgency or de- sire. Booking.com uses action context to show how frequently a listing is booked and how many people are currently looking at it – both related to desirability. A red warning also appears if a listing is close to selling out, an ultimate display of using context to spark action. eBay also raises urgency with stats about how frequently an item is viewed, the number of other watchers, and the percentage still available. Amazon does both at the same time. They offer different categories of recommendations from items the user viewed, bought, added to their wish list, or from their browsing history. On the same screen, a sidebar promotes the best-selling items other users bought. 3. Tips • Sharing everything with your user would take too much space. Pick and choose what would be helpful by asking yourself “How would knowing this improve the user’s decisions?” • It isn’t always self-explanatory how recommendations are created, which means users might not trust the design’s intent. If your user knows the action context, they will feel more in control of their site experience.
- 90. Data Management 90 • An attention-grabbing color like red increases the urgency and helps the message stand out Design web prototypes faster with UXPin (1000+ built-in elements)
- 91. Scrolling Long Scrolling 92 Fixed Long Scrolling 96 Infinite Scrolling 98 Parallax Scrolling 102
- 92. Scrolling 92 Long Scrolling Le Mugs Take It
- 93. Scrolling 93 Beoplay Flickr 1. Problem A site has so much eclectic content that a multi-page format would be too difficult to navigate.
- 94. Scrolling 94 A site wants to tell a story in a smooth, linear fashion. 2. Solution Create a single-page, long-scrolling site to consolidate your content in a single place. This works great for social media sites and others with user-generated content, where part of the fun is browsing through everything all at once, and the content is diverse and difficult to categorize because it’s always updating. The prominence of mobile browsing supports the long scrolling pattern since smaller screen sizes call for more scrolling. Combined with the infinite scrolling pattern described below, long scrolling can create a completely immersive browsing expe- rience. If users are searching for something in particular, a more structured navigation system like Amazon’s works better – but for explorability, long scrolling is the fastest and most fun for users. 3. Tips • Use sticky navigation (Chapter 2). Disorientation and the inabil- ity to go back are the innate drawbacks of long scrolling, but a fixed menu allows users to move freely. • Long scrolling can have a negative effect on SEO, but this can be avoided by following the advice of Neil Patel from Quicksprout. • Don’t autoplay heavy media like videos, since in abundance they drastically slow down loading.
- 95. Scrolling 95 • You don’t have to commit to a single-page format with long scrolling: often sites feature a central long-scrolling home page that links out to traditional secondary pages, like Facebook and Twitter’s separate profile pages. • For one-off long scrolling on specific page sections, try the fixed technique described below.
- 96. Scrolling 96 Fixed Long Scrolling Squarespace UXPin Tour 1. Problem A site could benefit from the advantages of long scrolling, but doesn’t want to convert entirely from a multi-page structure.
- 97. Scrolling 97 2. Solution Fixed long scrolling sites display information that might otherwise require multiple sections within one long-srcolling section. The effect feels like a “scroll within a scroll”. 3. Tips • When deciding what to include in a fixed scroll section, make sure you only choose content that fits within a unified theme or category. Each part of Squarespace’s fixed scroll section, for example, focuses on explaining how to “Create a beautiful website” for different business types. • Place CTAs in at the end of each of each fixed-scroll frame. • As the UXPin product tour page shows, you can also consider adding a “scroll progress bar” to the top navigation. The pat- tern helps add a greater sense of pace if you have more than 3-4 frames.
- 98. Scrolling 98 Infinite Scrolling True Tube Tumblr
- 99. Scrolling 99 By Kato Imgur 1. Problem Content is better organized on a single page, but there’s too much to load all at once. 2. Solution With the infinite scrolling pattern, content is loaded as needed to provide a more paced experience. Infinite scrolling proves useful for single-page sites with more than a few screens worth of content, especially with multimedia galleries.
- 100. Scrolling 100 Infinite scrolling creates a rhythm for social media sites, where users are continually entertained with new content without click- ing or waiting. The problem with infinite scrolling is when users lose their place, though there are ways around this. Sticky navigation (Chapter 2) is the best way to give your user mobility in a near-infinite sea of content. 3. Tips • In addition to sticky navigation, there are other methods to help infinite scrolling’s disorientation. A jump-to-section option (Chapter 2), as with Tumblr, lets users return to the start if they become lost. • Infinite scrolling can be combined with pagination for more accurate searches. For example, Facebook allows users to search timelines by year.
- 101. Scrolling 101 • Don’t be constrained by the traditional loading circle – your choice of icon is an opportunity to deepen your site’s identity. Facebook, Tumblr, Imgur, and others all have custom loading signifiers.
- 102. Scrolling 102 Parallax Scrolling The Walking Dead Oakley: Airbrake MX
- 103. Scrolling 103 The Boat (SBS) McWhopper 1. Problem Users are not engaged enough in long scrolling formats. 2. Solution Give your long scrolling site more impact with a parallax effect. Known to the video game industry for decades, this pattern refers
- 104. Scrolling 104 to the layers of a two-dimensional image moving at different speeds when scrolling, i.e., the foreground and background moving at different speeds, or differing layers of the background. The effect creates a mesmerizing three-dimensional feel. The parallax effect unlocks the more creative aspects of scrolling, especially when combined with scroll-triggered animations. This style lends itself to storytelling sites, building a more immersive and stimulating experience with better visuals. The Walking Dead uses parallax and other scrolling techniques (i.e., atypical direction since the frames move left to right as you scroll down) to deepen their narrative. While not necessary, the differentiated backgrounds make just watching the scroll more enjoyable. It also makes sense for the context of the site since the character reacts to the scroll. 3. Tips • For help on coding for parallax sites, read Dave Gamache’s piece on Medium. • Be careful of loading times. A simplified fast site is still better than an extravagant slow site. Design web prototypes faster with UXPin (1000+ built-in elements)
- 105. Visuals and Media Lightbox Overlay 106 Monochromatic Style 109 Hero Images 112 Video Backgrounds 116 High Definition 119
- 106. Visuals and Media 106 Lightbox Overlay Facebook Tumblr
- 107. Visuals and Media 107 Pinterest 1. Problem The user has trouble viewing images and videos in a large format. 2. Solution Display images in a lightbox format. Similar to modal windows, a lightbox overlay for images and videos draws attention to the main content without disorienting the user or causing them to lose their place. Media in lightbox overlays are faster to load than new pages, and keep the user’s place on the initial page. However, lightbox over- lays have their drawbacks: • Confusion with the back button • Inability to link to specific piece of media • Difficulty with consistency in responsive design
- 108. Visuals and Media 108 For these reasons, lightbox overlays are only recommended if me- dia does not need its own links, and there is trouble viewing the media within the existing content. Long-scrolling sites dedicated to browsing new visuals (Facebook, Tumblr, Pinterest) benefit most with this viewer. 3. Tips • Put an obvious undo/back option, like Pinterest’s upper-right X, to avoid back-button confusion. • For better responsive designs, fancyBox is nice alternative. • Standard lightbox backgrounds are black (Facebook) or a faded version of the initial screen (Tumblr, Pinterest).
- 109. Visuals and Media 109 Monochromatic Style Pandora Tiffany Co.
- 110. Visuals and Media 110 1. Problem Visuals are too dull or too cluttered. The brand favors one color above others. 2. Solution A monochromatic style maximizes the effects of a single color without appearing visually boring. As we explained in Web Design Book of Trends 2015–2016, this color scheme is being more popular recently, coinciding with trends in minimalism, flat design, and vibrant colors. Monochromatic styles magnify the effects of a single color. For example, splashes of red add energy and stimulation to certain areas of a page, so doing an entire site in red would make it ex- cessively energetic and stimulating, ideal for pages that want to call attention to a certain issue. This style doesn’t mean it uses only one color, but mainly one col- or. Tiffany Co.’s site has mostly whites and blacks, but it’s the turquoise that draws the most attention. 3. Tips • This style requires using varying shades of the color to keep it interesting.
- 111. Visuals and Media 111 • Choose a font color that suits the primary color. If your goal is noticeability, use an opposing color; if your goal is aesthetics, using an alternate (but distinct) shade. • This pattern works well if your brand has strong ties with a sin- gle color, like Tiffany Co. This extends into interaction design: for Tiffany Co., clickable links turn turquoise when hovered. • For an explanation of the effects of each color, check out Color Theory in Web UI Design.
- 112. Visuals and Media 112 Hero Images Twitter Tumblr
- 113. Visuals and Media 113 Dior My Fitness Pal 1. Problem Users want to be immediately engaged with site content.
- 114. Visuals and Media 114 2. Solution Another popular trend we mention in Web Design Book of Trends 2015–2016, the hero image emphasizes a single image in the back- ground and the small amount of text over it (known as the hero header). Hero images work well for great first impressions – there’s little guesswork in what your users notice first. Due to their size, hero images immerse the user in the experience right away, which is why you often see expansive photographs of nature and landscapes. Artistic photographs establish an emotional connection in a way that text and more commercial graphics can’t. 3. Tips • Hero images are perfect for login and landing pages (Twitter, Tumblr) because of their quick immersion, and because there’s not much other content to compete with. • Fashion brands like Dior benefit from hero images, both for your artistic style and because they showcase the product in greater detail. • Use bold typography with your hero header, since it’s competing with a powerful image. Big fonts and wide typefaces improve visibility. • As Carrie Cousins suggests, be subtle with your typography and navigation. The hero image dominates the page, so don’t create more competing visual elements.
- 115. Visuals and Media 115 • If there’s more than one image you want to showcase, try a hero slideshow (Twitter). • To keep responsive design in mind, pick images that work well at the smallest viewports. You’ll either need to crop out the right section, or pick an alternative.
- 116. Visuals and Media 116 Video Backgrounds Airbnb Vimeo
- 117. Visuals and Media 117 Vine 1. Problem Creating a more immersive experience for users upon first im- pression. 2. Solution As long as the site can handle the strain, a video background height- ens the advantages of a hero image, with deeper immersion and more potential for emotional connections. Like hero images, video backgrounds are also popular for home and login pages, but less for the main pages, as they can be distracting and troublesome for loading. With HTML5, browsers and internet connections can now manage video backgrounds like never before. While thematic for video sites like Vine or Vimeo, video backgrounds can still strengthen other types of sites. Airbnb uses videos of the everyday human
- 118. Visuals and Media 118 moments people experience when traveling – as a gateway into the site, it helps the user get excited about using their service. However, designers must still keep loading times in mind. Read the tips below for advice on keeping these minimal. 3. Tips • Aim for 10–30 second loops. This reduces loading times, and suits the typical user’s attention span without distracting from the rest of the site. • If the video has sound, set the default to off – automatic and unexpected sound can annoy users. • Have a backup for devices that don’t render video well. Check user analytics to see on which devices this is a problem.
- 119. Visuals and Media 119 High Definition Booking Flipboard
- 120. Visuals and Media 120 Bellroy 1. Problem Users on HD display devices want a visually richer experience. 2. Solution Equip a site to perform in HD, even if a lot of users still view in it standard definition. HD screens are on the rise, and standard definition risks appearing blurry or “blocky.” HD requires attention to the types of graphic the site includes; the same amount of pixels will appear on screens with differ- ent amounts of pixels per inch. Standard definition screens are around 72 ppi (dpi), while HD screens are anything over 200 ppi. That means an image or video of poor quality from the start will look even worse on HD screens.
- 121. Visuals and Media 121 3. Tips • Use scalar vector graphics whenever you can. SVGs translate im- ages using lines and points, more convenient for HD than raster formats (.jpg, .gif, .png), which translate images pixel-for-pixel. However, images and video have a fixed number of pixels, and so raster formats are okay – that’s why it’s important to consider HD criteria before the media is created. • HD media is stunning, so it will likely draw more attention from your user. Design your layout so that important elements aren’t overshadowed. • For e-commerce sites, HD images show the product more real- istically and entice sales. • Consider image effects. Blurred or color overlays can add or alter the emphasis on an image (a global red tone will be more energetic, for example). This works well in HD because the un- derlying image is still discernible thanks to its high resolution. • Think outside the frame. A photo background should not con- form to the standard 1 to 1.5 aspect ratio of cameras, and can include images that are cut out of their respective backgrounds. Design web prototypes faster with UXPin (1000+ built-in elements)
- 122. www.uxpin.com