branding

The Freelance Studio Denver, Co. User Experience Agency The Roots of Minimalism in Web Design by KATE MEYER on June 28, 2015 Topics: Human Computer Interaction Visual Design Web Usability Summary: Many of today’s most popular design trends are influenced by minimalism. This web design movement began in the early 2000s, but borrows its philosophy from earlier movements in the fields of fine art and human–computer interaction. Many of today’s most popular design trends (including flat design, large background images, and hidden global navigation) are directly or indirectly influenced by minimalism, a web-design movement that began in the early 2000’s, but borrows its philosophy from earlier movements in the fields of fine art and human–computer interaction. Minimalism sometimes presents as an attempt to prioritize content over the chrome and, when applied correctly, it can help you focus your design to simplify user tasks. Unfortunately, some designers misinterpret minimalism as a purely visual-design strategy. They cut or hide important elements in pursuit of a minimalist design for its own sake—not for the benefits that strategy might have for users. They’re missing the core philosophy and the historical context of minimalism, and they risk increasing complexity rather than reducing it. To better grasp and apply minimalist principles, we need to understand the origins of minimalism and its fundamental characteristics. We explore these topics in a series of two articles: In this first article we define minimalism and look at its history; in a second article we analyze in depth the characteristics of minimalist design and their impact on usability. What Is a Minimalist Interface? When employed correctly, the goal of minimalist web design should be to present content and features in a simple, direct way by providing as little distraction from the core content as possible. This strategy often involves removing content or features that don’t support the primary goals of the interface or its users. Although there is some debate about what exactly qualifies as minimalist web design, there are a few common features that most designers can agree upon. These include flat textures, limited color palettes, and the use of negative space. These and other specific characteristics and their frequency of use in minimalist websites are discussed in detail in the next article in this series. Minimalism is a reaction to bloated, or “maximalist,” UI design. Examples of such maximalist design include Flash intros and gratuitous animations, or applications crammed with as many esoteric features as possible (like Microsoft Office before the 2007 rethink). Brian Danaher's portfolio The portfolio of designer Brian Danaher is a typical example of what many designers would call a minimalist site. When viewed full screen on a 15-inch MacBook Pro, the homepage is almost entirely white space. The site uses a grayscale color palette with a single bold accent color to draw attention to clickable elements—a popular strategy among minimalist designers. Brian Danaher's portfolio Danaher’s site includes very few distractions from its primary content. Minimalism is well suited to portfolio sites like this one, which have fairly simple goals, relatively low amounts of content, and very similar information on most pages. Applying minimalism effectively to more complex sites can be much more difficult. Minimalism’s Rise to Popularity 1960s Decades before minimalism was a trend in web design, it was a visual art movement in the era following World War II. It emerged as a reaction to the chaotic colors, motion, and marked subjectivity often found in abstract expressionists works (such as the drip paintings of Jackson Pollock). It was heavily influenced by the famous German art movement Bauhaus, which focused on simple yet functional design. In the 1960s, minimalism became popular in a variety of fields, particularly fine art and architecture. In visual art, minimalism was characterized by monochromatic palettes, geometric elements, serial arrangements, and industrial materials. Jackson Pollock's Full Fathom Five Jackson Pollock’s Full Fathom Five (1947) in The Museum of Modern Art. Minimalists of note include graphic designer Josef Müller-Brockmann, painter Ellsworth Kelly, and industrial designer Dieter Rams. Note the clean lines, simplicity, and sparing use of color in each of these examples. Despite the wide variety of mediums, a coherent design style is perceptible. Ellsworth Kelly's Brooklyn Bridge VII Ellsworth Kelly’s Brooklyn Bridge VII (1962) in The Museum of Modern Art. Radio by Dieter Rams RT 20 tischsuper radio, 1961, by Dieter Rams for Braun. Unmodified CC image courtesy of Vitsoe. S.R. Crown Hall S.R. Crown Hall, designed by Ludwig Mies van der Rohe, 1956. Unmodified CC image courtesy of Peter Alfred Hess. The perspective behind minimalist art was neatly summarized by the motto of famous 20th century architect Ludwig Mies van der Rohe: “Less is more”. This motto would later become the spirit and unofficial mantra of minimalism in web design: fewer elements on a page results in lower cognitive load for users. 1980-2000 At the end of the twentieth century, minimalism began to take shape as a separate trend within the field of human–computer interaction. In 1983, data-visualization expert Edward Tufte introduced the concept of a data–ink ratio in his work, The Visual Display of Quantitative Information. In print media, the data–ink ratio is the ratio between (1) the amount of ink that communicates information, and (2) all the ink used to print the graphic. Tufte advocated maximizing this data–ink ratio by removing any elements that do not reasonably contribute new information. Data–Ink Ratio = Informative Ink / Total Ink This concept of data–ink ratio can be applied to web interfaces by considering the content–element ratio for any interface. The goal is similar: a high proportion of the amount of meaningful elements relative to all elements in the interface. In 1990, HCI researcher John M. Carroll was studying the ways people used technical training manuals, and looking for ways to improve them. From his research, he developed the theory of minimalism in technical communication. Carroll’s theory suggests that a successful design will support quick action by prioritizing brevity. Carroll stressed that reducing a design to its most basic elements is not the end goal of minimalism. Rather, Carroll championed brevity and simplicity in the service of task-oriented results. To position this approach towards web design, Carroll’s minimalism translates to getting the interface out of the way, in order to allow users to achieve their goals. In 1995, Jakob Nielsen included minimalist design in his 10 usability heuristics. His use of the term aligned with Tufte’s and Carroll’s sense of minimalism, as he advocated eliminating irrelevant information from interfaces. 2000s Beginning in the mid 2000s, echoes of the minimalist art movement began to appear in web interfaces: larger swaths of negative space, lower amounts of content, and restricted color palettes. Google is often credited as the pioneer of minimalist web interfaces. Google has prioritized simplicity and austerity in its interfaces ever since its beta offering in the 1990s. Google, 1999 Google’s homepage (1999, via Wayback Machine) Even though Google now offers a huge variety of products from Google Drive to YouTube to Gmail to Google Maps, its homepage has changed very little over 15 years. Only three navigation options are visible: in order to access the rest of Google’s offerings, users must use the grid icon to expose a tray of more options. Google, 2015 Google’s homepage (2015) In spite of early trendsetters like Google, it took time for minimalism to catch on in web design. In the early 2000s, crowded interfaces dominated the web. During our impression testing sessions at that time, users overwhelmingly described the interfaces as ‘busy’. Slowly but surely, minimalism found a foothold with early adopters: the web designers, graphic designers, artists, photographers, architects, and developers. Designer and blogger Emily Chang wrote about the rise of minimalism in 2006: Perhaps it’s the success of Google’s search page, or our collective reaction against the flashing banner ads and intrusive popups of the last decade, or the Jonathan Ives effect, but it’s as though web users, designers, and developers alike have all agreed to a new de facto standard of Mies van der Rohe’s ‘less is more.’ Chang’s assertion that all web users and professionals embraced minimalism was definitely not accurate in 2006, and may still be an exaggeration today. However, it is reasonable to assume she did speak for the emerging popularity of minimalism among people who are deeply immersed in the cutting-edge trends of the web. 2010-2013 The emergence of responsive web design (RWD) in 2010 primed the wider web to appreciate a minimalist approach. To effectively utilize RWD techniques, organizations must carefully prioritize their content—distractions from primary content that could be ignored on desktop become big problems on mobile. Slowly user and designer preferences began to lean towards greater simplicity in web interfaces. This shift was underscored by major redesigns carried out by two tech industry giants: Microsoft’s Modern design in 2011, and Apple’s release of iOS7 in 2013. Microsoft’s release of Windows 8 in 2011 was the first major redesign of its operating system in decades. At the same time, it announced its design philosophy, “modern design”. This new design philosophy was quintessentially minimalist, drawing directly from the minimalist art movement. Microsoft’s official design documentation even claims that the Bauhaus school is one of its fundamental design pillars. Windows 8 Windows 8 ‘tile’ view Though Apple has worked hard to define its brand in simplicity, Apple designers have historically—and controversially—favored skeuomorphic patterns in their interfaces. In 2013, Apple radically revamped iOS to a much flatter and more minimal style with iOS7. Apple’s decision to move toward a more minimal and flat design particularly underscores the popularity of the trend, given that it fundamentally contradicts the brand’s historic design style. iOS7 Apple’s iOS7 2014-2015 Minimalist design principles are now showing up in new and unexpected places: e-commerce sites, online publications, and even educational sites are adopting minimalist trends and strategies. Many one-stop website-design and hosting services like Squarespace, Weebly, Wix, and Volusion now provide stock site templates that are almost entirely minimalist designs. These offerings are particularly significant because they often target people with no development or design experience—people who want to set up their online bike store or bakery website or online wedding invitation without having to touch Illustrator or a line of HTML. These services are selling minimalist websites because they believe it’s what their customers want. Squarespace's Galapagos theme Squarespace’s ‘Galapagos’ theme Today, minimalism has branched into and overlaps with other prominent web-design trends such as flat design, responsive web design, and clean design. Minimalism’s contributions to these trends will be discussed in detail in next week’s article. The Usability Debate: Is Minimalism Good for Users? Minimalism is a design strategy that significantly influences content and information-architecture decisions. As a result, minimalism has a definite impact on the usability of the interfaces that adopt it. Unsurprisingly, the usability of minimalist-design styles has become the subject of debate amongst web professionals. Proponents argue that minimalism reduces information overload: the more features and content you can cut out, the less people have to deal with. Minimalism done well can also create a positive emotional experience for users. People do tend to respond better to aesthetically-pleasing interfaces. As Don Norman points out, when using such interfaces they are more tolerant of usability obstacles, as long as those flaws are minor. Since Nielsen Norman Group was founded in 1998, we have been forceful critics of maximalist (i.e., bloated) web design. You might expect us to be enthusiastic supporters of minimalist web design, but that’s not the case. When designers adhere too rigidly to a minimalist ideology, they risk ending up with wastefully low information density and poor findability and discoverability. Extreme minimalism can be useful as an internal design exercise, but should never be a final product. Minimalism in moderation can create efficient user experiences, as long as you don’t lose sight of the primary goal—helping users accomplish tasks. Tips for a Successful Minimalist Interface Make sure you seriously consider whether a minimalist design strategy is right for your site, your brand, and your content. If you’re sure a minimalist design is right for you, take some lessons from the roots of minimalism. Adopt Ludwig Mies van der Rohe’s motto, “Less is more,” in your designs. Don’t add elements just for their own sake. This rule can be true for content, visual design, and feature decisions. Consider reducing any elements that don’t contribute meaningful information (think about your content–element ratio.) Learn from Carroll’s minimalism: don’t just cut out features and elements—really think about your users’ needs and try to make tasks as brief and simple as possible. Know that a minimalist visual design alone, without meaningful consideration of user tasks, will not result in a successful interface. The usability issues of Windows 8 provide an excellent cautionary tale. (Minimalism is one of the design strategies discussed in the full-day course on Generating UX Redesigns From Broad Design Principles.) For an in-depth discussion of the characteristics of minimalism, read the next article in this series.Great Summaries on ‘About Us’ Pages Engage Users and Build Trust by HOA LORANGER on June 21, 2015 Topics: Corporate Websites Writing for the Web Summary: Tell your story on top-level pages in ‘About Us.’ People who trust you are much more open to engaging with your organization and website. Even large organizations exist only as words and images within a browser window. How can you make people trust you more than they would trust an equally good-looking set of pixels on another site? Be a good storyteller. The One Thing You Should Do Based on several studies, we’ve generated numerous guidelines on how to present company information on corporate websites and in the About Us sections to increase trust and transparency. However, in this article, I focus on one major guideline to increase perceptions of transparency and improve your relationship with users. If you can do only one thing, what should it be? The answer: Provide key information on major About Us pages. In usability studies, we observe people peeking at top-level pages for answers to foundational questions. Make sure that your site passes the first impressions test by answering top questions succinctly. People are more inclined to engage further once they’ve determined you’re worth the effort. Start telling your story the moment people land on your site. At a minimum, write brief summaries emphasizing a few impressive facts. As people click through the main pages they should gain a fuller understanding of who you are, what you do, and why you exist. Ask yourself, “If users only skim the top pages in About Us, are they getting a coherent story?” In many cases, what new users need most are great highlights written in a scannable format. Summaries are appealing because they provide context and reduce the amount of effort required to click through layers of content. Forcing people to work hard (even if it’s to click on a link to one level down) to receive an introduction is bad manners and reflects poorly on your organization. Examples of Dos and Don’ts Below are examples of what you should practice and what you should avoid. DO AbbVie: This About Us page provides a nice company overview, including Fast Facts to give site visitors a reasonable company snapshot. While this page holds promise, the content could be improved by replacing the marketing jargon with concrete facts that people care about. Steer clear of hollow phrases like “revolutionary” — at best, they tend to confuse users; at worst, they make them mistrust the site. DON’T Abbott: This About page has very low content density and forces users to drill deeper before they can learn about the company. This page acts as a wall that deters people from wanting to go further. Better to start the conversation by providing the highlights on this page. People who research organizations are sensitive to credibility factors. They are looking for clues to determine whether or not to like you. Answering the questions at the right time feels conversational and can be persuasive in garnering trust. People who trust you are much more open to engage with you. DO Chipotle: This summary tells a compelling story of who the company is and how they differ from other fast-food chains. The writing style is clear and hype-free, making the organization sound friendly and credible. DON'T CSC: Can you guess from page that this company offers cloud-computing services? This About page feels unfriendly without an introduction. The sheer number of links puts the onus on the users to determine which door to open. When the tagline could equally well describe thousands of other companies, you know you’re in trouble. The manner in which information is communicated on websites influences people’s perception of your organization. Users perceive sites that answer their questions quickly as being transparent and efficient. Conversely, users regard sites that bury critical information underneath complex layers as being evasive or ineffective. If your site visitors are potential donors, journalists, or clients, leaving such a negaive impression is detrimental to your business and brand. DO GSK: This overview answers the questions and is formatted well for ease of reading. The page contains facts for each business featured (e.g., pharmaceuticals, vaccines). Nice overviews like these minimize the effort required of users to learn about you. DON’T TevaPharm: The summaries on this Company Profile page are generic and don’t give clarity on how they’re unique. You might find specifics underneath Discover more, but why make users jump such hurdles? Halo Effect impacts how people gauge websites, even if the assessment is flawed. People tend to make hasty judgments about organizations based on limited information. If users have a good first impression, the positive feelings permeate to other parts of the site. If users have a bad first impression, the negative feelings extend to the rest of the site. DO Citrix: The images on this Executives overview page literally show the faces behind the organization. At a glance people get an impression of the company culture and the people running the business. Citrix is clearly benefiting from having a recognized UX expert on its executive team. (To nitpick this otherwise good example, reduce the leading slightly between names and job titles, to more closely associate these two pieces of information. Currently, the line reading “Chief Executive Officer” is closer to David Friedman’s photo than to Mark Templeton’s name.) DON'T Defenders of Wildlife: This executive overview feels unfriendly without photos of the members. Featuring photos on this page would tell a better story of who Defenders of Wildlife is. Conclusion Credibility is a major issue on the Web. Site visitors who visit the About Us section are seeking critical information to determine whether or not to engage with you. Explaining who you are matters. Tell your story and tell it succinctly. Featuring key highlights at the top-level keeps users focused on the conversation and not on wrangling the content or navigation. Well-written summaries illuminate your unique qualities and earn trust. (The full set of 70 design guidelines for "About Us" information is available in the 253-page research report, Presenting Company Information on Corporate Websites and in About Us Sections.) Ad Placement for Mobile by AURORA BEDFORD on July 5, 2015 Topics: Advertising Mobile & Tablet Web Usability Summary: Extra care is required when designing mobile page layouts that include advertisements, due to the limited screen real estate available. Ads must be displayed where they will not create false floors nor block users from reaching relevant content. Ads: that necessary evil we encounter every day, and to which we all believe ourselves to be immune. Whether a user ignores an ad completely or becomes annoyed with its presence is strongly related to the ad's size and placement on the page. On mobile phones, screen real estate is already at such a high premium that the position of the ad has an even greater impact on the overall user experience than on desktops. There are two main ad-related usability problems: (1) ads can be too disruptive to the user, and (2) they can create false floors that inaccurately signal the end of content and cause users to miss helpful information. Large Ads Limit Viewable Content Not surprisingly, the larger an advertisement, the more disruptive it is. On a small device, a vertically large ad consumes far too much valuable space, displacing the main content. To add insult to injury, sometimes two ads get stacked at the very top of mobile pages—as sites feel compelled to advertise their mobile apps. As a result, less page content is visible upon page load, which goes against one of the principles of mobile usability: prioritize content. In the example from FineGardening.com below, only the article title and brief summary can be seen without scrolling thanks to an overly large site header and the double ad placement at the top of the page. Screenshot from Finegardening.com on mobile showing multiple ads Finegardening.com: Very little article content can be seen upon page load because the app ad, banner ad, and large site header consume the majority of the screen real estate. Unlike multiple ad elements at the top of the page pushing down the relevant content, an ad at the bottom of the screen in a sticky container is less intrusive to users. This recommendation may seem counterintuitive because the ad would now remain visible on the screen at all times, but in past studies we have found this treatment to be best tolerated by users, which is good because it shows the ad is not getting in the way. Keep in mind that users tend to begin scanning from the top of the page, and resent having to scroll past a lot of chrome to get to the information they actually want to read. Thus, we need to not only consider the overall content-to-chrome ratio, but also ensure that helpful information is prioritized nearer to the top of page in order to grab people's interest and supply them with the information related to their task as soon as possible. An additional benefit to the sticky-container treatment is that the ad is still readily available to users once they finish their task. While the user is focused on completing an activity or researching a topic, ads will be ignored because they aren't part of the goal. Assuming the advertisement is actually relevant to the user, having it available once the main task is completed increases the likelihood that the user would pay attention to the ad and possibly interact with it. (An ad is relevant when it matches the user's current goal: it is more powerful to display an ad for something the user immediately wants rather than something that just matches their general profile.) Screenshots of ad treatment on the Washington Post mobile site The Washington Post mobile site displays an ad in a container fixed at the bottom of the screen (left). The ad is appropriately synced with the current scroll position of the page, and completely collapses when the user reaches a display ad embedded within the page content (right). Avoid Creating False Floors Another main downfall of many mobile ad placements is their tendency to create the “illusion of completeness,” or a false floor, on a page. An advertisement can easily signal to users that they have reached the end of the page's relevant content. This effect is exacerbated when the ad is large enough so it is difficult to see any continuation of content below, and when the ad is placed at a point low enough within the content where it seems reasonable that no more information is available on that page. Pages on WebMD's mobile site, for example, place ads following several paragraphs of text, below links to additional resources on the current topic. Horizontal lines in the design and the presence of copyright information (which is commonly associated with footer content) further cue the user that this is the end of page, when this is actually not true: the page continues far below the ad, displaying more information and additional links to related resources. Screenshots of WebMD.com mobile site article page containing several ads The ad placements on the WebMD mobile site create false floors because they appear in places that could reasonably be the end of relevant content, and are large enough that they hinder the user’s ability to see content continuing down the page. (The black dashed line shows where the fold occurs on an iPhone 6 Plus, and the red dashed lines represent areas where the ad is likely to stop a user from continuing to scroll.) If possible, only display ads at the real end of content rather than between paragraphs of text. Said one user during a recent usability study, “I don't like advertisements in between. It's distracting and gives me the impression that it's the end of the article.” Of course, we often don't have the luxury of neglecting business goals, and so if several ads need to be included on a page, putting them closer to the start of the content—following the title or intro paragraph, for example—can help avoid incorrectly signaling the end of the page. Additionally, shorter banner-style ads are less interruptive of the content than the taller square display ads. Screenshot of ad placement on USA Today mobile site USA Today mobile website uses a thin display ad positioned near the beginning of an article, so it is less likely to be considered a reasonable stopping point in the content. The thin rectangular size also allows the content below to be visible, encouraging the user to continue reading without being too interrupted by the ad. When an ad is placed lower on the page amid content, consider adding additional cues to signal the user to scroll past the ad. This recommendation is especially important if the ad is large or otherwise consumes a lot of page real estate (includes extra whitespace above and below the ad, or is a small ad populated into a placeholder meant for a larger one), and blocks the user from easily seeing any continuation of content. If the user doesn't know for sure that more content exists below the ad, they may not be willing to pay the interaction cost to scroll and possibly get nothing. Simple, clear text such as “Keep Reading” or “Continue Reading Below” along with an arrow pointing down or other directional indicator placed above the ad can work well to let the user know more content is available. Screenshot of ad design on Boston Globe mobile site To encourage users to scroll past a large ad, a cue such as Continue Reading Below should be shown above the advertisement, as seen on the Boston Globe mobile website. Keep in mind that this treatment merely makes the ad placement bearable, and should be considered a last resort if multiple ads must be placed on the page amidst content. In general when it comes to ads, be sure to practice restraint. Having a high number of ads diminishes site credibility: as stated by a user in a recent study, “I have deleted apps because of ads — I tend to not go to the ones with a lot of ads; I think the info is not reliable.” As expected, the most hated advertising techniques on the desktop are also hated on mobile devices; and sadly, top sins such as Covers what you are trying to see and Occupies most of the page are easier to unintentionally commit when the screen size is limited. Because of this, extra care must be taken when deciding where and how often to place ads on mobile apps and websites. Conclusion Ads represent a point of conflict between business needs and user needs. To minimize their impact on user experience, they need to take only a small fraction of the page area and be placed strategically so that they do not create false floors and do not stop people from discovering additional page content. on't Force Users to Register Before They Can Buy by AMY SCHADE on July 5, 2015 Topics: E-commerce Summary: Guest checkout with optional registration on e-commerce sites simplifies the purchase process and invites users to register when they feel comfortable, rather than forcing unwanted registration. One of the most common complaints we hear in e-commerce usability research is about registration. Shoppers have many reasons to dislike or dread site registration. They may not plan to return to the site again, making a one-time purchase or a gift purchase. They may dislike registration in general, frustrated with remembering usernames and passwords for all the sites they visit. Some shoppers don’t want a site to save personal information and assume that if they register for the site, the information will be saved. Many users associate registration with getting unwanted email, and for good reason, since many sites offer tiny preselected checkboxes to sign up for email newsletters. Most of all, registrations involves extra steps, extra hassle, and extra potential for things going wrong (whether user errors or site errors) and stopping the user dead in the water. The higher the interaction cost, the fewer people will complete a process. This is true for any user interface steps, but in the case of e-commerce checkout there’s a particularly direct connection between user hassle and lost sales. TinyPrints.com required that users create an account and also automatically subscribed users to the newsletter, mentioning above the Create Account button that “You will be subscribed to the Tiny Prints email newsletter” (stated in tiny print, which makes users weary right there.) Being signed up for newsletters they do not want is one of many complaints users have about registering on e-commerce sites. Registration sounds like a tedious, lengthy process unrelated to the task at hand: making a purchase. And some sites make registration a lengthy and tedious process, sometimes even presenting registration as a step separate from the checkout process. This doesn’t need to be the case. When a user is making a purchase, typically all the information needed for registration is already being requested of the user. Sites normally ask for information needed for the transaction, including name, shipping, and billing information. In addition, sites commonly ask for an email address in order to email a receipt and update order status. The only aspect of registration that is not covered in a standard checkout transaction is a password. How to Present Optional Registration Before users enter the checkout process, clearly state that registration will be an option. Some users do want to register and like to see assurance that they can if they’d like to. If the option to create a password will be presented after the purchase is complete, rather than during the checkout process, tell users so they know when to expect the option. Under the Guest Checkout option, HomeDepot.com told users that “You will have the opportunity to create an account and track your order once you complete your purchase.” The size of the text could have been larger to make it easier to read, though it is good to present this information less prominently than the main text. Briefly highlight the benefits of registration from the users’ perspective and not the company’s perspective when asking users to register. Shoppers appreciate when sites emphasize aspects that would make the experience easier, such as order tracking or faster checkout. They sometimes complain about sites that stress “benefits” such as receiving email newsletters or becoming a member of the site. Mention customer-focused benefits when users start the checkout process as well as when customers are asked to create optional passwords. A brief bulleted list tends to work well to highlight this information. This list should not be a sales pitch for the site, but a brief reminder to users about how registering benefits them. Nordstrom.com told users that registration would let them, “Check out faster, Track your orders, Write reviews and more!" This nicely presented the information as a benefit to the user, rather than the site. Mark password fields as optional, so it’s clear that users do not have to register for the site. Also make sure to state password requirements so users aren’t left guessing how to create a valid password. Some sites do not mark the password fields as optional; instead they place the fields in a section of the page with the word “optional” in a heading. Users often skim web content, even when filling in forms, and may miss the optional designation if it is only displayed in the heading, rather than next to the field. When the fields are not specifically marked, users can misinterpret it as a requirement for registration. If they were previously told that registration is optional or have pursued guest registration on the site, this inconsistency can break the user’s trust. Staples.com listed the optional passwords fields in a section titled Optional Information. That heading was in close proximity to the password fields, which only appeared if a user selected the Create an account and make your next checkout easy option. Both these factors helped reinforce that the fields were optional. Simple and Optional Rather than forcing users to register before checking out, provide the option to register within the checkout process by presenting optional fields for the user to enter a password. This puts users in control and allows them to decide if it is worthwhile to register or not. In our e-commerce research, we saw users who had previously complained about forced registration happily register for sites where registration was limited to the option of creating a password in the purchase process. Forcing registration causes lost sales. Some users will leave the site, others will struggle with registration. It is common for sites that add guest checkout to immediately realize increased sales. It is a simple way to improve usability and encourage purchasing. The Characteristics of Minimalism in Web Design by KATE MEYER on July 12, 2015 Topics: Visual Design Web Usability Summary: Our analysis of 112 minimalist websites revealed the defining features of minimalism: flat design, limited color schemes, few UI elements, use of negative space, and dramatic typography. This article is the second in a series devoted to the understanding of minimalism in web design. If you’re interested in the origins of the movement, read The Roots of Minimalism in Web Design. A minimalist web-design strategy is one that seeks to simplify interfaces by removing unnecessary elements or content that does not support user tasks. In order to reduce a website to only its most necessary elements, designers must accept a cascade of consequences that impact both the user interface (UI) and the content of the site. Many of the visual-design characteristics commonly associated with minimalism are choices that serve the core strategy of minimalism particularly well, and so have been adopted along with minimalism in most instances. Web design, like language, is defined by the way people use it. The word ‘minimalism’ is thrown around a lot, yet it’s hard to pinpoint exactly what features define a minimalist web design. To more clearly define what constitutes a minimalist design in practice, we analyzed the design characteristics of a sample of 112 minimalist websites. Sites were selected for the study if they were either identified by an outside web-design expert as minimalist, or were included in an online gallery for inspirational minimalist sites, like siiimple. Remember that just because a design technique is popular doesn’t necessarily mean that it always supports user needs and optimizes profitability or other business objectives. In this study, we analyzed sites that are known to employ minimalist design, not sites that are known to be highly profitable. As discussed further below, our other research suggests that while some of these design ideas can support business goals, others can hurt your profitability. Defining Characteristics of Minimalism So what features were present in most of these designs? We included a feature among the defining characteristics of minimalism if it was present in at least three quarters (75%) of the websites that we analyzed. Flat Patterns and Textures Used in 96% of sampled interfaces (but often ineffectively) Over the past few years, there has been an overwhelming shift in the design community away from skeuomorphism, towards purely digital representations of things without physical metaphors. Flat interfaces don’t make use of any of the obvious highlights, shadows, gradients, or other textures that make UI elements look glossy or three-dimensional. Some designers believe that the flat-design trend grew out of the popularity of minimalist UI design (Müller, 2014). The two trends are extremely compatible; removing gratuitous shadows, gradients, and textures falls in line with minimalism’s primary goal of eliminating the unnecessary. In our sample, 96% of the minimalist sites were flat. The two tend to co-occur so frequently that the phrase ‘flat design’ is often (misleadingly) used interchangeably with ‘minimalist design.’ The trends are similar, but not the same. Flat design generally refers to the textures, icons, or graphics in an interface. Minimalist design applies to the larger or overarching content, feature, and layout strategies. An interface may be flat without being minimalist. Jeet.gs The Getting Started page for Jeet.gs grid system API features a completely flat interface, including ‘ghost buttons’ for copying code snippets. (Ghost buttons are empty buttons with a thin rectangular border and text.) Flat ghost buttons can have legibility problems, and they break away from the established convention of what a clickable button should be. (However in this case, the buttons highlight when the mouse passes over them, providing a dynamic signifier of clickability. Also, the buttons show a tiny 3D effect when clicked that adds a small sense of physicality. Thus, the interactive user experience adds depth to the flat interface elements.) As we’ve discussed in other articles, flat designs often fail to communicate to users which elements are selectable or clickable. We believe that a better approach is a compromise between flat and skeuomorphic—a mostly flat design, but with clickable elements that users can recognize easily. Considering that flat design is the design idea most likely to be used incorrectly and degrade the user experience, it’s unfortunate that it’s the most prevalent of the main characteristics of minimalist web design. Limited or Monochromatic Color Palette Used in 95% of sampled interfaces In most minimalist interfaces, color is used strategically to create visual interest or direct attention without adding any additional design elements or actual graphics. With less visual information vying for a user’s attention, color palettes are more noticeable and will be more influential in a site’s impact. Minimalist color palettes are a movement away from the clashing, loud colors of the web design popular in the 2000s. Subdued color schemes are intended to avoid upstaging the content—which, in the case of images, can still be brightly colored. Many minimalist designs are either monochromatic, or use only one bold color as an accent, and use it to—sparingly—highlight the most important elements of the site. These accented elements are usually clickable. When assessing the use of color in the sample websites, we looked at background colors, logos, navigational elements, iconography, and typography, but did not consider content images (like photographs) as part of the color palette. Almost half of the websites sampled (49%, 55 websites) used a monochromatic color palette. Almost as many websites used one or two accent colors in an otherwise monochromatic color palette (46%, 52 websites). Of those 55 monochromatic sites, 51 sites were grayscale-–they used exclusively white, black, and gray shades. Freres d'Encre The monochromatic homepage of Frêres d'Encre, a French tattoo studio, creates a dramatic aesthetic. Solo Solo, project management software, uses a monochromatic but not grayscale color palette. Kayak Travel metasearch engine Kayak uses orange to highlight its logo and the actionable Search button. The popularity of this particular characteristic is an improvement in the sense that it’s moving interfaces away from the loud, clashing color schemes that used to dominate the web. However, there are some considerations to keep in mind when applying a limited color palette: Make sure your color scheme uses enough contrast to be legible to people with limited vision or color blindness. Use accent colors intentionally and consistently to highlight very important information or primary actions. Restricted Features and Elements Used in 87% of sampled interfaces Designers who adopt a minimalist design strategy must consider each element in their interfaces and eliminate any that are not required to support the core functionality or message of the website. An ‘element’ in this context could be any individual unit of the interface: including but not limited to: menu items links images graphics lines captions textures (like gradients) colors fonts icons It’s difficult to assess whether an interface includes ‘unnecessary’ elements without directly asking the sites’ designers what they left out, and without knowing the target users and tasks. To make this characteristic measurable, we focused on assessing whether or not the interface contained graphic elements that did not serve any obvious purpose. In our sample, 87% of minimalist sites avoided gratuitous graphic elements. Alan Trotter's portfolio The portfolio of fiction writer Alan Trotter is severely minimalist. By default, the site doesn’t even reveal his full name: visitors must click the underlined text to get to more details. This strategy might achieve an ‘edgy’ aesthetic, but it’s a big gamble to hide the most important content. The more stuff there is in a user interface, the more stuff users need to process. A favorite mantra of minimalist designers is, “subtract it till it breaks,” which really means, “unless the absence of an element would be serious problem, get rid of it.” This is where designers can get distracted by the pursuit of a clean, modern, minimalist interface—and end up cutting out useful content. Adhering to a rigidly utilitarian approach can produce streamlined designs by eliminating distracting features and content. Just make sure you aren’t making your users’ primary tasks more difficult by removing or hiding content they need. It’s hard to understand a cluttered design or a system overflowing with extraneous features. But it’s even harder to understand a design that doesn’t provide sufficient scaffolding to explain its features or structure. Maximized Negative Space Used in 84% of sampled interfaces Removing or excluding elements from a web page necessarily leaves empty space. Negative space (also called white space) is the name given to the empty areas of an interface. Negative space has been called “practically synonymous with” and “the backbone of” minimalist interfaces. Many minimalist designers use it as a tool to try to direct users’ attention and allow them to digest content more easily. Considering these strong assertions of negative space as the defining characteristic of minimalism, it’s surprising that only 84% of the sample sites used substantial amounts of negative space in their designs. Thomas Buffet's portfolio The screenshot above shows the homepage of French designer Thomas Buffet as seen full-screen on a 15-inch MacBook Pro. Above the fold, the page is almost entirely negative space. In this case, the site is still able to answer the two primary questions people would ask upon arriving at this page: ‘who are you,’ and ‘what do you do’. But this approach will not work in all contexts. Appropriate use of negative space can help draw attention to important content. When deciding how to lay out negative space in your designs, be sure to consider the following questions. How will adding or removing negative space impact the communicated hierarchy of the page? How will the negative space impact what content is displayed at the top of the page? The page fold still matters: users will scroll if they have a reason to, but they pay more attention to the content at the top of the page. How will the negative space impact the interaction cost: will users need to work harder to get to the information that they need? How will the negative space need to change at varying resolutions? Dramatic Use of Typography Used in 75% of sampled interfaces Like color, bold or large typography becomes another tool for communicating meaning when there are few elements on the page. Effectively exploiting interesting typography can help compensate for having fewer elements like photos and graphics, and can make a minimalist design feel more visually engaging. Variations in font size, weight, and style become crucial in helping users understand the hierarchy and relative importance of text. Of the 112 sampled minimalist sites, 75% used typography to convey meaning or create visual interest. Alexander Engzell's portfolio The portfolio of art director Alexander Engzell uses bold typography on his tagline to create visual interest without adding extra graphic elements to the page. However, the text is an image file, which adds to page load time. Also, unlike the Buffet portfolio, this page doesn’t directly explain whose portfolio this is, or what this person does. Users have to click the INFO link in the upper right corner to access that information. Using images for text may allow you to use custom fonts, but it will add to page load time, will require extra considerations for scaling at different resolutions, and can cause accessibility issues. Using web fonts is a better solution, but bear in mind that web fonts can have detrimental performance effects as well. Remember, drawing attention to bold typography is only useful when that text communicates meaningful information. Beware of going overboard on the fancy typography: users can ignore overformatted text if it looks too much like advertising. There’s a delicate balance between meaningfully bold typography and distracting typography. A great designer will come down on the right side of this balance, but if your designers are less skilled in employing advanced typography it’s safer to err on the side of caution. Related Trends Some designers also include the following characteristics as minimalist. Based on our research however, these seem to be design trends that often co-occur with minimalism, but are not actually defining characteristics—they occurred in fewer than 75% of the sites that we analyzed. Large Background Images or Videos Used in 57% of sampled interfaces The presence of a large background image or background videos (enabled by HTML5) is one of the most debated characteristics of minimalist Web design. From a theoretical perspective, a large background image certainly seems contradictory to the core minimalist spirit of reducing non-critical elements. Despite this, large background images and videos are popular in minimalist designs—we found that 57% of our sample included them. Monte Re The homepage of Monte Ré, an Italian fruit producer, uses a full-width background-image carousel within an otherwise pure-white minimal site design that includes ghost buttons. While the text is technically distinguishable from the background images, it’s unpleasant to try to read and understand the copy while colorful images circulate behind it. Depending on the context and the designer’s priorities, an argument can be made for the ability of large background images/videos to create an impact on users’ perception of brand. When a background image is used for a carefully considered, strategic reason, sticking to minimalist-design strategies can help restrain other page elements from competing or clashing with the background. Additionally, some designers may hope that loud background images will keep otherwise minimalist designs from being too boring or stark. If you choose to use a background photo or video with your minimalist design, keep the following points in mind: Make sure the images or videos you choose serve a real purpose or help people understand the site—otherwise they’ll just distract your users from your actual content. Make sure the text is both legible and readable if you want people to understand it. Remember, legibility is the extent to which users can distinguish individual letters. Readability is how well they can process words, phrases, and scan the text. If you’re using a carousel or video, you need to test every possible background—every image or frame of the video, and at a variety of screen resolutions. Be aware of how big images and videos impact performance. Make sure you’re taking an adaptive approach so your mobile users aren’t waiting for a desktop-sized retina photograph to load over their network data connection. Don’t autoplay videos. Many users are frustrated by videos that play automatically without their consent, especially if those videos have audio. Avoid creating Harry-Potter-painting-style videos of people slowly moving around in the background. You don’t want to distract your users and creep them out. Grid Layouts Used in 43% of sampled interfaces In our sample, we found that 43% of the interfaces used grid layouts to organize content. While this percentage indicates it is a popular design pattern among minimalist designers, it seems that grid layouts are certainly not ubiquitous in their designs. When grid layouts are used in minimalist UI designs, it’s generally for two reasons: Grids are an effective method of organizing homogenous content on the page linearly without adding any visual elements; and Grids are particularly helpful when designing a responsive website—another trend that is separate from minimalism but often co-occurs with minimalism. Paprika The graphic design agency Paprika organizes its projects in a grid, but is not responsive. Sea Chant portfolio The minimalist portfolio of photography studio Sea Chant organizes photographs in a grid at desktop screen widths. Sea Chant portfolio At 400px wide, the Sea Chant portfolio is reduced to a single column of content and removes all hover effects. Circular Graphic Elements Used in 16% of sampled interfaces Some design experts have suggested that circular and rounded graphic elements could be a component of minimalism, but we found only 16% of our sample used them. They seem to be more of a fad. Gesture Theory The homepage of Gesture Theory uses multiple circular elements in its minimalist design. Hidden Global Navigation Used in 13% of sampled interfaces Many websites currently use severely reduced global navigation elements in their desktop presentations, such as the now infamous hamburger menu. This can sometimes be the result of an incomplete mobile-first design strategy that fails to consider the needs and extra screen space available to desktop users, but it can also result from overzealous minimalism. Hiding infrequently accessed items might make sense for your goals, but make sure you aren’t hiding tools or links that are critical to the tasks you want your users to perform. Be particularly cautious if your site has large amounts of content or categories. Visual Soldiers portfolio The desktop portfolio site of design agency Visual Soliders uses a hidden global navigation under a hamburger menu. Visual Soldiers portfolio These few menu items hidden in an overlay could have been made visible globally, but were probably hidden to achieve this ultra-minimalist effect. Commonly Occurring Characteristics of Minimalist Interfaces Our analysis of 112 websites revealed the following defining characteristics for a minimalist website: Flat rather than skeuomorphic patterns and textures Use of a limited or monochromatic color palette Strictly limited features and graphic elements Maximized negative space Dramatic use of typography to communicate hierarchy or create visual interest Some of these characteristics are used almost ubiquitously in minimalism, and some occur slightly less frequently in minimalist interfaces; however, all of the defining characteristics were present in at least 75% of the minimalist sites that we analyzed. In our research, we also identified several related trends that were present in less than 75% of the sampled sites. Large background images or videos Grid layout Circular graphic elements Hidden global navigation Conclusion 2000s interface design was predominantly cluttered and overwhelming. For years, we’ve been advising against this kind of “maximalism”. Feature bloat and gratuitous content is always bad for users. In theory, minimalism should move us away from maximalism, and result in streamlined content and more efficient user task flows. In practice however, we’ve seen minimalism mutate into a superficial visual trend as designers copy popular minimalist characteristics without seriously considering if they support their own site goals. Just as flat design is a reaction to skeuomorphism, minimalism is a reaction to maximalism. In both cases, we strongly advise a balanced approach. A minimalist design strategy can be a powerful tool, but only when it’s framed by the needs of your users—minimalism for minimalism’s sake alone doesn’t help users. (Minimalism is one of the design strategies discussed in the full-day course on Generating UX Redesigns From Broad Design Principles.) Share this article: Twitter | LinkedIn | Google+ | Email Learn More Research Reports Strategic Design for Frequently Asked Questions Full Day Training Courses Top Web UX Design Guidelines The Human Mind and Usability UX Basic Training Web Page UX Design: Optimizing Pages to Deliver on Business Goals Visual Design for Mobile and Tablet: Day 1 and Day 2 Articles The Fold Manifesto: Why the Page Fold Still Matters 10 Usability Heuristics for User Interface Design Banner Blindness: Old and New Findings Scaling User Interfaces: An Information-Processing Approach to Multi-Device Design Teenage Usability: Designing Teen-Targeted Websites How Iterative Testing Decreased Support Calls By 70% on Mozilla's Support Website by SUSAN FARRELL on August 2, 2015 Topics: Agile Prototyping User Testing Summary: User research with data mining and paper prototyping quickly led to measurable success for one of the busiest support websites in the world. One of the more frequent questions that we get asked by our clients or by our seminar attendees is: "Is a redesign for usability worth it?" In other words, what is the return-on-investment (ROI) of a redesign? In recent years, we've seen a decline of the ROI for usability, most likely due to approaching a ceiling of usability improvements: With more than 20 years of web-design experience under their belt, designers have learned a few things and fixed quite a few problems. But a redesign for usability can still save you a significant amount of money. In this article we tell the story of Mozilla's support site, which was able to get a 233% improvement out of a redesign for usability. (Here's an explanation of how the improvement score was computed.) Thus, we can say that the redesigned site was about 3 times better than the original site. The cost involved in this redesign was 14 person-weeks or 560 person-hours. Is it worth spending 14 weeks to become 3 times better? This depends on the hourly rate for your staff and the value of your site and thus cannot be answered in general. However, for Mozilla, which gets huge amounts of traffic, the improvement is certainly worth the trouble, as it would be for almost any big site or company that does substantial business online. So how did Mozilla do it? What was involved in this redesign? Who is Mozilla Mozilla is a large, open-source, worldwide, software organization staffed by both employees and volunteers. It makes one of the most popular web browsers (Firefox), along with other useful products and services. Pain Points Millions of people come to Mozilla's support website every year to get help with Firefox and other products and services. When users cannot get an answer from the information existent on the site, the Mozilla staff aims to help by answering each person's question in the user-support forum, and to respond to questions as quickly as possible. As Mozilla's website had grown organically, users were having difficulty finding information and the support staff couldn't keep up with the number of questions in the forums. Specifically: At about 400 pages or so, the help documentation had become a difficult place in which to locate particular information quickly. The forum staff (employees and volunteers) were having trouble responding to questions as quickly as they wanted to, because of the increasing number of incoming questions for the rapidly updating Firefox. The forum overload was also making it difficult for staff to find time to write new help articles for frequently asked questions. More articles could help, but the growing number of articles also caused more findability problems. Action Plan Mozilla decided to invest in discovery and iterative usability testing in order to improve the IA of its support site. The research questions aimed to understand (1) how people (users and staff) used the support system; (2) which types of information were really important. Top research questions Mobile Faceted Search with a Tray: New and Improved Design Pattern by KATHRYN WHITENTON on July 26, 2015 Topics: Mobile & Tablet Search Visual Design Summary: Displaying faceted-search controls on mobile devices in a ‘tray’ overlay is a new effective solution to the challenge of showing both results and filters on small screens. Recently, a few big brands have introduced a new method for displayed facet controls on mobile devices, by placing them in a ‘tray’ overlay on top of the actual results. This new design approach addresses a major shortcoming typical of many faceted search displays on mobile devices: the placement of facet controls on a separate screen, which forces users to work harder to understand how the facet controls affect the results set. But before understanding why this is the case, let’s go back to the basics of faceted search. What Makes Faceted Search Special? Faceted search lets users refine a set of results by applying filters that comprehensively describe the search space. Such narrowing is invaluable for users who need to find something specific within a large content set. This type of search has become common for ecommerce and travel websites, as well as many different types of document and media collections. A faceted system includes two critical elements: Simple controls to construct sophisticated searches: Providing familiar controls like drop-down menus and checkboxes with natural-language labels empowers ordinary users to narrow down a large set of results to a small set that meets their exact criteria—without any special knowledge of Boolean logic or query syntax. Simultaneous display of the facet controls and the results: Showing both the filters and the results at the same time makes it easier for users to understand the relationship between the two; ideally, this is reinforced by dynamically updating the results set as soon as the user selects a filter criteria. The simple filter controls are the most obvious component of a faceted system. However, the importance of simultaneous display should not be underestimated. Long before faceted search became popular, we had ‘advanced search’ screens with similar controls for creating complex search queries. The big difference introduced with the first faceted navigation system was in displaying the facet controls and the results at the same time, which makes the effects of each filter instantly visible. This innovation embodies 2 of the 10 usability heuristics: provide rapid system feedback, and offer users control and freedom. Challenges of Displaying Search Facets on Mobile Devices Faceted search was originally designed for desktop and laptop users. Translating this experience onto a mobile device is difficult, because the very thing that makes faceted search so helpful to users – being able to see the filters and the results at the same time – is difficult to achieve on a small screen. There simply isn't enough space to show a full set of facets and a decent number of detailed results simultaneously. Until recently, most mobile designers haven’t even tried to display facets and results at the same time, instead opting to place them on separate screens. But this solution forces users to navigate to the facet-control screen, make their selections, then navigate back to the results set to see the effects of their selections. The istockphoto.com mobile website illustrates the typical approach to providing faceted search to mobile users. The results page includes an icon that users can tap to open the facet controls (assuming they can figure out what the icon means). Once the facet controls are displayed, users can select different filtering criteria, but it’s not obvious how the results will be affected by the facet selection because: None of the results are shown on this screen. The number of files, displayed in the page header updates too slowly. The header showing the number of files may not even be visible once a user has scrolled down to expand and select the facets below. Due to these limitations, users have to return to the previous screen in order to find out whether their filter selections were effective at targeting the best results and whether they have narrowed the results set down to a manageable size— or if perhaps they've applied such restrictive criteria that no results match. Mobile search results and facet controls on iStockphoto.com Left: Like many mobile search designs, iStockphoto.com does not display faceted search controls on the actual search results page. Instead it requires users to navigate to the facet controls, in this case via a cryptic icon composed of lines and circles on the right edge of the Search bar. Right: The facet controls take up the entire screen, and in order to see the effects of their selections, users must navigate back to the results screen. New Solution: ‘Tray’ Overlay to Display Facet Controls Recently a new approach to providing faceted search for mobile users has appeared: showing the facet controls as a ‘push-out’ style tray on top of the search results. This design allows for continuous visibility of results: even while the facet controls are open, some information about the results is visible in the background. The Amazon iPhone application and eBay’s mobile website both now use an overlay to display facet controls on the same screen as the search results. Mobile Facet Tray Overlay Examples Amazon’s iPhone application (left) and eBay’s mobile website (right) both recently introduced an overlay to display search facet controls on the same screen as the search results. Design Pattern Elements Both the Amazon and eBay designs include several details that combine to create a good user experience: Once activated, facet controls appear in a vertical panel overlaid on top of the results screen. The results are always visible in the background, and can be seen to change as the user makes her facet selections. (However, in the case of eBay, users can hardly make out what the results are. Amazon’s design is better because users actually get useful information from the background.) The total number of results is always visible, even if the user has scrolled down a long list of facets. (Amazon accomplishes this by fixing the header at the top of the screen so that it remains visible even as the list of facets scrolls up or down). A translucent gray shadow slightly obscures the underlying results and ensures that the facet controls stand out. The facet panel appears at the right edge of the screen, leaving the left edge of the results visible. (This is helpful because the left edge is more likely to have meaningful content; with Amazon you can actually see the product images.) (You may also notice that both Amazon and eBay use actual words – Filter and Refine – as the commands to access facets, rather than a special symbol. Any of the labels commonly used for faceted navigation – narrow your results, refine, and filter – are far more understandable than cryptic icons, and definitely worth the extra space. ) Why Is Simultaneous Display of Results and Facet Controls Important? In usability testing, I am always amazed at how successful people are at immediately understanding and using faceted search screens, which tend to include many different elements and controls. As long as the controls are displayed properly, most people jump right in to creating and refining their queries. Instant results are an important part of the process because they allow users to see right away if they have applied the wrong filter, or applied overly narrow criteria that eliminates too many options. Both of those errors are very easy to recover from if you can instantly see the effects of your actions, but without this visibility users can end up in a tedious cycle of pogo-sticking between the results and the filters. The facet ‘tray’ approach illustrated by Amazon and Ebay doesn’t provide complete visibility, since only a small part of the results screen is visible. But these creative solutions offer at least some visibility into the effects of applying a filter. Users may still find that they need to close and re-open the facet controls, but this approach feels more like expanding a part of the current page, rather than jumping back and forth between different pages. Find out more about the best approaches for visual displays on smaller screens in our full-day courses about Indicators, Validations, and Notifications: Pick the Correct Communication Option by KIM FLAHERTY on July 26, 2015 Topics: Applications Standards Summary: Status feedback is crucial to the success of any system. Knowing when to use 3 common communication methods is key to supporting users. In interaction design, a system, whether an application, website, or piece of hardware (anything from a smartwatch to a thermostat), should always keep users informed, by providing appropriate feedback. Ensuring that the state of the system is always visible is one of the 10 usability heuristics for interface design. Information about system status, such as error messages and notifications of system activity, allows users to fully understand the current context. The best way to communicate system status varies depending on several key factors: The type of information being communicated The urgency of the information — how important it is that the user sees it immediately Whether the user needs to take action as a result of the information Three common approaches for status communication include validation, notifications, and status indicators. These terms are used sometimes interchangeably in product design, but they stand for different communication methods that should be used in different circumstances. Understanding the differences between them will help you sharpen your feedback to users by choosing the best option for each need. Indicators An indicator is a way of making a page element (be it content or part of the user interface) stand out to inform the user that there is something special about it that warrants the user’s attention. Often, the indicator will denote that there has been some change to the item represented by that element. Although, as we’ll see later, indicators are used quite frequently to signal validation errors or notifications, they can also be used on their own. Indicators are visual cues intended to attract users’ attention to a particular piece of content or UI element that is dynamic in nature. (If something always looks the same, it’s not an indicator, no matter how flamboyantly it’s designed.) There are at least three possible ways of implementing indicators: Oftentimes, but not always, indicators are implemented as icons. Easily recognizable icons can make very effective communication tools. Typographical variations can also be used as indicators; examples include the common convention of boldfacing unread email messages or color-coding stock symbols in an investment account if their price has changed substantially. Though less common, enlarged size or animation (e.g., vibration) can also be used to make certain items stand out from the crowd and thus serve as an indicator. Yelp used a green-tag indicator in the search results to indicate that Tea Market had a special deal running. This indicator communicated additional information about Tea Market. Characteristics of indicators: Indicators are contextual. They are associated with a UI element or with a piece of content, and should be shown in close proximity to that element. Indicators are conditional— they are not always present, but appear or change depending on certain conditions. For example, a stock-performance indicator, such as the one in the American Century example below, may change to indicate if the stock price is increasing or decreasing. Additionally, the tag indicator in the Yelp example above only appears if there is a deal at that business. Indicators are passive. They do not require that a user take action, but are used as a communication tool to cue the user to something of note. American Century Investments used a conditional indicator to provide information regarding a specific stock’s performance. When the daily change was negative, the indicator was a red arrow pointing down. When the daily change was positive, it showed a green arrow pointing up. The condition of the stock performance impacted the indicator that was shown next to the price. Indicators can introduce noise and clutter to your overall interface, and may distract users, so it is important to consider how many (if any) indicators to use in your design. Consider the following when deciding if an indicator is appropriate: How important is the information to the user? Is it worth taking up space on the page to inform the user? How often is the information used? Would the user expect to see the information? Would it be missed if it weren’t provided? How important is it for the application that the user discovers the information? Validations Validation messages are error messages related to users’ inputs: they communicate whether the data just entered was incomplete or incorrect. For example, in e-commerce systems, validation messages often involve information such as name, billing address, and credit-card information. Cobragolf.com provided a validation message that clearly indicated which field was in error. The message however was complex and confusing. A better message might say “Please enter a valid email address.” Characteristics of validation: A user needs to take action to clear the validation message. The information in the validation message is contextual and applies to a specific user input that has a problem. The way in which validation should be implemented varies based on the unique needs of the form. However, in general, if the user’s input is incorrect, the system should inform the user by providing an identifiable and clear message that aids in correcting the error. Validation messages should follow the guidelines for error messages rather than simply identifying the problem, they should tell users how to fix it. For instance, don’t state “Field is blank.” Please enter your street address” is more polite and directs to a solution. Since validation is contextual, it can be helpful to use an icon indicator along with the validation message to help communicate which input(s) are missing or need corrected. Bestbuy.com provided a helpful validation message telling users how to fix the problem and also used an icon indicator and a different color to attract users’ attention to the field that needed correction. Notifications Notifications are informational messages that alert the user of general occurrences within a system. Unlike validation, notifications may not be directly tied to user input or even to the user’s current activity in the system, but they usually inform the user of a change in the system state or of an event that may be of interest. In the case of email, social networks, and mobile-phone applications, notifications can even be delivered while a user is away from the application. Notifications can be contextual —applying to a specific UI element— or global —applying to the system as a whole. The Facebook App used a contextual notification in the news feed to communicate that newer stories had been added to the feed. This notification does not require the user to take action. Characteristics of notifications: They are not triggered by users’ immediate actions. They announce an event that has some significance to the user. There are two main types of notifications, which differ based on whether the user is required to act upon the notification: Action-required notifications alert the user of an event that requires a user action. In this sense, they are similar to validation, but since they were not sparked by the user’s own action, they require a different design. Action-required notifications are often urgent and should be intrusive; for instance, they could be implemented as modal popups that interrupt the user, forcing immediate attention and requiring an action to be dismissed. The Mac operating system used a notification to inform users of available system updates. The user had to explicitly dismiss it from the screen, by opting to either install the update or to be reminded again at a later time. This is an intrusive notification that requires that the user take action. Passive notifications are informational; they report a system occurrence that does not require any user action. Many notifications in mobile apps are passive: they usually announce an event of potential interest to the user. Passive notifications are typically not urgent and should be less intrusive. A typical implementation of a passive notification may be a badge icon or a small nonmodal popover in a corner of a screen. Passive notifications can easily be missed, since they require no user action. When the information provided by the notification is key to the understanding of the system, an easy-to-ignore passive notification can be problematic. Adobe Creative Cloud used a nonintrusive passive notification to inform the user of an available application update. This notification appeared on screen for several seconds before disappearing. The user did not need to take any action on it. Uniqlo.com used a nonintrusive passive notification to provide feedback that an item was added to the shopping cart. No action was necessary to dismiss the notification. Such notifications sometimes cause issues for e-commerce shoppers who do not notice the brief messaging. Users who miss the message may respond by adding an item to the cart multiple times, or by disrupting their shopping flow to check the cart to see what items were added. Notifications have the design challenge that they are not the immediate and obvious result of a specific user action. On the contrary, the user is likely in the middle of doing something different and may not be thinking about the issue raised by the notification. This requires notifications to establish more context and provide users with sufficient background information to understand what the notification is about. (In contrast, with a validation, the user has just done the thing that needs to be corrected. Thus, the validation message doesn’t need to educate users about the task at hand. For example, if an e-commerce checkout form has a field for a credit-card expiration date that was left blank, the validation message doesn’t need to say “Please provide the expiration date for the credit card you want to have charged $29.90 to pay for the blue sleeveless dress you are in the process of buying on Uniqlo.com.” However, a notification the following day that the dress has been shipped from the warehouse would need to say more than “Your package has shipped.”) If a notification is contextual and relates to a specific element in the interface, an icon indicator on the element can communicate where that notification applies and catch the user’s attention. For instance, an indicator badge on a mobile-app icon shows that the user has received a notification from the corresponding app. The iPhone messaging app created a notification to communicate that a new message was received. Along with the notification, an indicator badge was placed on the messaging-app icon to communicate where the notification applied. To clear the indicator, the user had to view the message. Mint.com used an indicator together with a notification to communicate that an account needed attention. The warning indicator (1) appeared in close proximity to the summary of the account that needed attention, while the notification (2) appeared in the central area of the page with other important information. The actual text in the notification message could have been more helpful, though. Picking the Right Communication Option Is Important Using the wrong communication method can have a negative impact on the users’ experience. Let’s refer back to the scenario above where Yelp utilized a green-tag indicator in the search results to indicate that Tea Market had a special deal running. This information is contextual and important to users who have specifically searched for a place to have tea. You may think that an alternative way of alerting users of potential tea deals would be to send them a notification when such a deal has become available. Wrong! A notification sent irrespective of the current user goal would likely be ignored, and may even annoy users because it will disrupt their current task and be irrelevant to their current needs. (In general, any type of ad tends to be ignored unless it is related to the users’ aims and mindset.) Alternatively, a toast (a small nonmodal popup that disappears after a few seconds, like the New Stories one used by the Facebook app), while appropriate for passive notifications, would be a bad way to implement an error message, be it validation or otherwise. In fact, one of our mobile users spent 5 minutes waiting for some content to load only because she hadn’t notice the little error message presented at the bottom of the screen that quickly faded away after 5 seconds. Allmodern.com used an action-required notification to communicate that a product was saved as a favorite. For a user that is saving a lot of items to their favorites, this can be a bothersome and intrusive way of providing feedback. This may be better communicated by showing a passive nonmodal popover in the corner of the screen that can be seen, but doesn’t require the user to take action to clear it. Conclusion Remember the key differences between the three communication methods are: Indicators provide supplementary information about a dynamic piece of content or UI element. They are conditional —that is, they may appear or change under specific conditions. Validations are tied to a user’s action or input. Notifications are focused on system-related events. These differences are summarized in the table below: Validation Notifications Indicators Global vs. contextual: Related to a global system event or to a particular page element Contextual Global or contextual Contextual Passive vs. requiring a user action Action required Action required or passive Passive Triggered by user action vs. system event User action System event User action or system event Understanding when and how to use each of these feedback tools is important in order to build consistency in the communication to users. By assessing the type of information delivered, we can determine the correct mechanism to use. How do users and staff interact with the support system? Which problems are the most important to address in the website redesign? What is the most-wanted information? Which words do people use when they search? Which desired information seems to be missing? How can the information best be organized and presented in order to match what users most want to do on the website? The UX Team The UX team consisted of 3 members: Susan Farrell, Senior User Experience Specialist, Nielsen Norman Group. Susan conducted the research, did data discovery, analyzed data, and made design-change recommendations. Crystal Beasley, Product Designer, Mozilla. Crystal led the project, coordinated with Mozilla stakeholders, and played the computer during paper-prototype research sessions. Bram Pitoyo, Web User Experience Designer, Mozilla. Bram designed the task flows and prototypes and supervised the interaction-design changes to the website. He also tested the old IA so we could compare results with the tests of the proposed new IA. The Steps We employed a variety of research methods intended to help us understand users' needs and also to redesign the IA and the workflow on the support site: Doing data discovery and analysis, to understand how users behave on the support site and why In particular, we looked at a variety of data sources to identify users' top tasks, as well as difficulties that they had with the current site. The table below summarizes the methods that we used. Headings Are Pick-Up Lines: 5 Tips for Writing Headlines That Convert by HOA LORANGER on August 9, 2015 Topics: Writing for the Web Summary: Attractive headlines and titles are critical in making the right first impression. Concise titles that sound authentic and relevant get noticed. A headline is often the first piece of content people read. And often it is the ONLY thing people read. If you want your encounters with people to be successful, make sure to write solid headlines. Have you ever tried to retell a story you read only to realize the details are fuzzy because you had only read the headline? This is a sign of a memorable headline. Good headlines entice readers and are critical to the success of your website. Below are 5 tips for writing engaging headlines: 1. Make sure the headline works out of context. We often think of headlines as being connected with the associated story. However, on the web, headlines usually appear out of context in places such as search results, social-media streams, blog posts, and news feeds. Headlines must be strong and descriptive, especially when standing alone, stripped of supporting content. Can you guess what the heading below refers to? New times call for new decisions The headline contains low information scent—that is, few cues to suggest what the story is about. People rely on visual and textual cues to perceive the usefulness of the content. They don’t spend time making inferences and trying to figure out items that don’t make immediate sense. Minimize cognitive load to maximize usability. Treat headlines like microcontent—phrases that can be scanned and still give readers a clear idea of the underlying information. 2. Tell readers something useful. Consider the decision-making process from the users' point of view. When faced with a barrage of links, their time is best spent clicking on headings that have the highest probability of providing value. Useful headings are specific. They provide facts or information that pique the readers’ interest. Avoid broad and generic headings. They don’t provide value or differentiate you from your competitors. Tell people something they don’t know and that benefits them. Headings that contain user-centric language are much more refreshing than vague ones that require guesswork. This headline is too broad: Make better, faster decisions with data visualization Contrast it with: Data visualization helps you detect and prevent fraud faster The second one is better because it is more specific and provides a concrete benefit that might arouse the reader’s curiosity. 3. Don’t succumb to cute or faddish vocabulary. Minimize hype and idioms (expressions). They are often vague, obscure meaning, and often change the tone of copy, usually for the worse. Consider this headline: Get the most bang for your buck with XYZ The headline above sounds pretty tacky and inauthentic, and degrades credibility. In addition, idioms such as “bang for your buck” often lack meaning to nonnative English speakers. Don’t be tempted to include overly informal language to sound modern and hip. It is much better to aim for clarity and authenticity. Keep your headlines straightforward by using familiar keywords. This is better: Increase productivity by 24% with XYZ Of course, there are exceptions to this rule. You can use specialized language when you address a specialized audience; in those cases jargon improves communication. However, before you sprinkle jargon all over your copy, verify that your entire audience truly understands it. 4. Omit nonessential words. The one place worth practicing being concise is in headlines. Spend time editing headlines to cut unnecessary words and tangled messages. Shorter headlines require less cognitive effort. And longwinded headlines don’t scale well to variable container sizes: they have a higher chance of being truncated when displayed on small mobile screens, for instance. Convoluted headlines like this lose readers: Caster, a technology company, buys Mitchell, with assistance from Jon & Smith, for $1.2B There are too many details that obscure the gist of the heading. The sentence also contains three commas, which create a jerky, start–and–stop effect. The headline can be made smoother by removing less important details, as in the versions below: Caster buys Mitchell for $1.2 billion –or– Jon & Smith orchestrates $1.2 billion deal for top technology firms 5. Front-load headings with strong keywords. One of the best ways to get traffic to your site is to front-load your headlines with keywords. Moving keywords to the front of titles increases the likelihood that they get noticed. Our eyetracking studies show that readers pay most attention to the first few words in lists. Don’t count on people reading the end of sentences. Let’s compare the following headlines: (1) Behold the new technologies for creating 3-D imagery and (2) Creating 3-D imagery gets easier with new technologies The first one runs the risk of not being read because the key phrase (creating 3-D imagery) is positioned at the end. Users must read the entire headline to understand its meaning. The second one is better. Moving the keywords to the front makes the heading more scannable. People can read only the first few words and still understand what the article is about. Conclusion Make a good first impression with short, keyword-leading headings that sound authentic, contain useful information, and make sense out of context. Try to follow all of these tips in one headline and you should notice a lift in user engagement. The Freelance Studio Denver, Co. User Experience Agency The Roots of Minimalism in Web Design by KATE MEYER on June 28, 2015 Topics: Human Computer Interaction Visual Design Web Usability Summary: Many of today’s most popular design trends are influenced by minimalism. This web design movement began in the early 2000s, but borrows its philosophy from earlier movements in the fields of fine art and human–computer interaction. Many of today’s most popular design trends (including flat design, large background images, and hidden global navigation) are directly or indirectly influenced by minimalism, a web-design movement that began in the early 2000’s, but borrows its philosophy from earlier movements in the fields of fine art and human–computer interaction. Minimalism sometimes presents as an attempt to prioritize content over the chrome and, when applied correctly, it can help you focus your design to simplify user tasks. Unfortunately, some designers misinterpret minimalism as a purely visual-design strategy. They cut or hide important elements in pursuit of a minimalist design for its own sake—not for the benefits that strategy might have for users. They’re missing the core philosophy and the historical context of minimalism, and they risk increasing complexity rather than reducing it. To better grasp and apply minimalist principles, we need to understand the origins of minimalism and its fundamental characteristics. We explore these topics in a series of two articles: In this first article we define minimalism and look at its history; in a second article we analyze in depth the characteristics of minimalist design and their impact on usability. What Is a Minimalist Interface? When employed correctly, the goal of minimalist web design should be to present content and features in a simple, direct way by providing as little distraction from the core content as possible. This strategy often involves removing content or features that don’t support the primary goals of the interface or its users. Although there is some debate about what exactly qualifies as minimalist web design, there are a few common features that most designers can agree upon. These include flat textures, limited color palettes, and the use of negative space. These and other specific characteristics and their frequency of use in minimalist websites are discussed in detail in the next article in this series. Minimalism is a reaction to bloated, or “maximalist,” UI design. Examples of such maximalist design include Flash intros and gratuitous animations, or applications crammed with as many esoteric features as possible (like Microsoft Office before the 2007 rethink). Brian Danaher's portfolio The portfolio of designer Brian Danaher is a typical example of what many designers would call a minimalist site. When viewed full screen on a 15-inch MacBook Pro, the homepage is almost entirely white space. The site uses a grayscale color palette with a single bold accent color to draw attention to clickable elements—a popular strategy among minimalist designers. Brian Danaher's portfolio Danaher’s site includes very few distractions from its primary content. Minimalism is well suited to portfolio sites like this one, which have fairly simple goals, relatively low amounts of content, and very similar information on most pages. Applying minimalism effectively to more complex sites can be much more difficult. Minimalism’s Rise to Popularity 1960s Decades before minimalism was a trend in web design, it was a visual art movement in the era following World War II. It emerged as a reaction to the chaotic colors, motion, and marked subjectivity often found in abstract expressionists works (such as the drip paintings of Jackson Pollock). It was heavily influenced by the famous German art movement Bauhaus, which focused on simple yet functional design. In the 1960s, minimalism became popular in a variety of fields, particularly fine art and architecture. In visual art, minimalism was characterized by monochromatic palettes, geometric elements, serial arrangements, and industrial materials. Jackson Pollock's Full Fathom Five Jackson Pollock’s Full Fathom Five (1947) in The Museum of Modern Art. Minimalists of note include graphic designer Josef Müller-Brockmann, painter Ellsworth Kelly, and industrial designer Dieter Rams. Note the clean lines, simplicity, and sparing use of color in each of these examples. Despite the wide variety of mediums, a coherent design style is perceptible. Ellsworth Kelly's Brooklyn Bridge VII Ellsworth Kelly’s Brooklyn Bridge VII (1962) in The Museum of Modern Art. Radio by Dieter Rams RT 20 tischsuper radio, 1961, by Dieter Rams for Braun. Unmodified CC image courtesy of Vitsoe. S.R. Crown Hall S.R. Crown Hall, designed by Ludwig Mies van der Rohe, 1956. Unmodified CC image courtesy of Peter Alfred Hess. The perspective behind minimalist art was neatly summarized by the motto of famous 20th century architect Ludwig Mies van der Rohe: “Less is more”. This motto would later become the spirit and unofficial mantra of minimalism in web design: fewer elements on a page results in lower cognitive load for users. 1980-2000 At the end of the twentieth century, minimalism began to take shape as a separate trend within the field of human–computer interaction. In 1983, data-visualization expert Edward Tufte introduced the concept of a data–ink ratio in his work, The Visual Display of Quantitative Information. In print media, the data–ink ratio is the ratio between (1) the amount of ink that communicates information, and (2) all the ink used to print the graphic. Tufte advocated maximizing this data–ink ratio by removing any elements that do not reasonably contribute new information. Data–Ink Ratio = Informative Ink / Total Ink This concept of data–ink ratio can be applied to web interfaces by considering the content–element ratio for any interface. The goal is similar: a high proportion of the amount of meaningful elements relative to all elements in the interface. In 1990, HCI researcher John M. Carroll was studying the ways people used technical training manuals, and looking for ways to improve them. From his research, he developed the theory of minimalism in technical communication. Carroll’s theory suggests that a successful design will support quick action by prioritizing brevity. Carroll stressed that reducing a design to its most basic elements is not the end goal of minimalism. Rather, Carroll championed brevity and simplicity in the service of task-oriented results. To position this approach towards web design, Carroll’s minimalism translates to getting the interface out of the way, in order to allow users to achieve their goals. In 1995, Jakob Nielsen included minimalist design in his 10 usability heuristics. His use of the term aligned with Tufte’s and Carroll’s sense of minimalism, as he advocated eliminating irrelevant information from interfaces. 2000s Beginning in the mid 2000s, echoes of the minimalist art movement began to appear in web interfaces: larger swaths of negative space, lower amounts of content, and restricted color palettes. Google is often credited as the pioneer of minimalist web interfaces. Google has prioritized simplicity and austerity in its interfaces ever since its beta offering in the 1990s. Google, 1999 Google’s homepage (1999, via Wayback Machine) Even though Google now offers a huge variety of products from Google Drive to YouTube to Gmail to Google Maps, its homepage has changed very little over 15 years. Only three navigation options are visible: in order to access the rest of Google’s offerings, users must use the grid icon to expose a tray of more options. Google, 2015 Google’s homepage (2015) In spite of early trendsetters like Google, it took time for minimalism to catch on in web design. In the early 2000s, crowded interfaces dominated the web. During our impression testing sessions at that time, users overwhelmingly described the interfaces as ‘busy’. Slowly but surely, minimalism found a foothold with early adopters: the web designers, graphic designers, artists, photographers, architects, and developers. Designer and blogger Emily Chang wrote about the rise of minimalism in 2006: Perhaps it’s the success of Google’s search page, or our collective reaction against the flashing banner ads and intrusive popups of the last decade, or the Jonathan Ives effect, but it’s as though web users, designers, and developers alike have all agreed to a new de facto standard of Mies van der Rohe’s ‘less is more.’ Chang’s assertion that all web users and professionals embraced minimalism was definitely not accurate in 2006, and may still be an exaggeration today. However, it is reasonable to assume she did speak for the emerging popularity of minimalism among people who are deeply immersed in the cutting-edge trends of the web. 2010-2013 The emergence of responsive web design (RWD) in 2010 primed the wider web to appreciate a minimalist approach. To effectively utilize RWD techniques, organizations must carefully prioritize their content—distractions from primary content that could be ignored on desktop become big problems on mobile. Slowly user and designer preferences began to lean towards greater simplicity in web interfaces. This shift was underscored by major redesigns carried out by two tech industry giants: Microsoft’s Modern design in 2011, and Apple’s release of iOS7 in 2013. Microsoft’s release of Windows 8 in 2011 was the first major redesign of its operating system in decades. At the same time, it announced its design philosophy, “modern design”. This new design philosophy was quintessentially minimalist, drawing directly from the minimalist art movement. Microsoft’s official design documentation even claims that the Bauhaus school is one of its fundamental design pillars. Windows 8 Windows 8 ‘tile’ view Though Apple has worked hard to define its brand in simplicity, Apple designers have historically—and controversially—favored skeuomorphic patterns in their interfaces. In 2013, Apple radically revamped iOS to a much flatter and more minimal style with iOS7. Apple’s decision to move toward a more minimal and flat design particularly underscores the popularity of the trend, given that it fundamentally contradicts the brand’s historic design style. iOS7 Apple’s iOS7 2014-2015 Minimalist design principles are now showing up in new and unexpected places: e-commerce sites, online publications, and even educational sites are adopting minimalist trends and strategies. Many one-stop website-design and hosting services like Squarespace, Weebly, Wix, and Volusion now provide stock site templates that are almost entirely minimalist designs. These offerings are particularly significant because they often target people with no development or design experience—people who want to set up their online bike store or bakery website or online wedding invitation without having to touch Illustrator or a line of HTML. These services are selling minimalist websites because they believe it’s what their customers want. Squarespace's Galapagos theme Squarespace’s ‘Galapagos’ theme Today, minimalism has branched into and overlaps with other prominent web-design trends such as flat design, responsive web design, and clean design. Minimalism’s contributions to these trends will be discussed in detail in next week’s article. The Usability Debate: Is Minimalism Good for Users? Minimalism is a design strategy that significantly influences content and information-architecture decisions. As a result, minimalism has a definite impact on the usability of the interfaces that adopt it. Unsurprisingly, the usability of minimalist-design styles has become the subject of debate amongst web professionals. Proponents argue that minimalism reduces information overload: the more features and content you can cut out, the less people have to deal with. Minimalism done well can also create a positive emotional experience for users. People do tend to respond better to aesthetically-pleasing interfaces. As Don Norman points out, when using such interfaces they are more tolerant of usability obstacles, as long as those flaws are minor. Since Nielsen Norman Group was founded in 1998, we have been forceful critics of maximalist (i.e., bloated) web design. You might expect us to be enthusiastic supporters of minimalist web design, but that’s not the case. When designers adhere too rigidly to a minimalist ideology, they risk ending up with wastefully low information density and poor findability and discoverability. Extreme minimalism can be useful as an internal design exercise, but should never be a final product. Minimalism in moderation can create efficient user experiences, as long as you don’t lose sight of the primary goal—helping users accomplish tasks. Tips for a Successful Minimalist Interface Make sure you seriously consider whether a minimalist design strategy is right for your site, your brand, and your content. If you’re sure a minimalist design is right for you, take some lessons from the roots of minimalism. Adopt Ludwig Mies van der Rohe’s motto, “Less is more,” in your designs. Don’t add elements just for their own sake. This rule can be true for content, visual design, and feature decisions. Consider reducing any elements that don’t contribute meaningful information (think about your content–element ratio.) Learn from Carroll’s minimalism: don’t just cut out features and elements—really think about your users’ needs and try to make tasks as brief and simple as possible. Know that a minimalist visual design alone, without meaningful consideration of user tasks, will not result in a successful interface. The usability issues of Windows 8 provide an excellent cautionary tale. (Minimalism is one of the design strategies discussed in the full-day course on Generating UX Redesigns From Broad Design Principles.) For an in-depth discussion of the characteristics of minimalism, read the next article in this series.Great Summaries on ‘About Us’ Pages Engage Users and Build Trust by HOA LORANGER on June 21, 2015 Topics: Corporate Websites Writing for the Web Summary: Tell your story on top-level pages in ‘About Us.’ People who trust you are much more open to engaging with your organization and website. Even large organizations exist only as words and images within a browser window. How can you make people trust you more than they would trust an equally good-looking set of pixels on another site? Be a good storyteller. The One Thing You Should Do Based on several studies, we’ve generated numerous guidelines on how to present company information on corporate websites and in the About Us sections to increase trust and transparency. However, in this article, I focus on one major guideline to increase perceptions of transparency and improve your relationship with users. If you can do only one thing, what should it be? The answer: Provide key information on major About Us pages. In usability studies, we observe people peeking at top-level pages for answers to foundational questions. Make sure that your site passes the first impressions test by answering top questions succinctly. People are more inclined to engage further once they’ve determined you’re worth the effort. Start telling your story the moment people land on your site. At a minimum, write brief summaries emphasizing a few impressive facts. As people click through the main pages they should gain a fuller understanding of who you are, what you do, and why you exist. Ask yourself, “If users only skim the top pages in About Us, are they getting a coherent story?” In many cases, what new users need most are great highlights written in a scannable format. Summaries are appealing because they provide context and reduce the amount of effort required to click through layers of content. Forcing people to work hard (even if it’s to click on a link to one level down) to receive an introduction is bad manners and reflects poorly on your organization. Examples of Dos and Don’ts Below are examples of what you should practice and what you should avoid. DO AbbVie: This About Us page provides a nice company overview, including Fast Facts to give site visitors a reasonable company snapshot. While this page holds promise, the content could be improved by replacing the marketing jargon with concrete facts that people care about. Steer clear of hollow phrases like “revolutionary” — at best, they tend to confuse users; at worst, they make them mistrust the site. DON’T Abbott: This About page has very low content density and forces users to drill deeper before they can learn about the company. This page acts as a wall that deters people from wanting to go further. Better to start the conversation by providing the highlights on this page. People who research organizations are sensitive to credibility factors. They are looking for clues to determine whether or not to like you. Answering the questions at the right time feels conversational and can be persuasive in garnering trust. People who trust you are much more open to engage with you. DO Chipotle: This summary tells a compelling story of who the company is and how they differ from other fast-food chains. The writing style is clear and hype-free, making the organization sound friendly and credible. DON'T CSC: Can you guess from page that this company offers cloud-computing services? This About page feels unfriendly without an introduction. The sheer number of links puts the onus on the users to determine which door to open. When the tagline could equally well describe thousands of other companies, you know you’re in trouble. The manner in which information is communicated on websites influences people’s perception of your organization. Users perceive sites that answer their questions quickly as being transparent and efficient. Conversely, users regard sites that bury critical information underneath complex layers as being evasive or ineffective. If your site visitors are potential donors, journalists, or clients, leaving such a negaive impression is detrimental to your business and brand. DO GSK: This overview answers the questions and is formatted well for ease of reading. The page contains facts for each business featured (e.g., pharmaceuticals, vaccines). Nice overviews like these minimize the effort required of users to learn about you. DON’T TevaPharm: The summaries on this Company Profile page are generic and don’t give clarity on how they’re unique. You might find specifics underneath Discover more, but why make users jump such hurdles? Halo Effect impacts how people gauge websites, even if the assessment is flawed. People tend to make hasty judgments about organizations based on limited information. If users have a good first impression, the positive feelings permeate to other parts of the site. If users have a bad first impression, the negative feelings extend to the rest of the site. DO Citrix: The images on this Executives overview page literally show the faces behind the organization. At a glance people get an impression of the company culture and the people running the business. Citrix is clearly benefiting from having a recognized UX expert on its executive team. (To nitpick this otherwise good example, reduce the leading slightly between names and job titles, to more closely associate these two pieces of information. Currently, the line reading “Chief Executive Officer” is closer to David Friedman’s photo than to Mark Templeton’s name.) DON'T Defenders of Wildlife: This executive overview feels unfriendly without photos of the members. Featuring photos on this page would tell a better story of who Defenders of Wildlife is. Conclusion Credibility is a major issue on the Web. Site visitors who visit the About Us section are seeking critical information to determine whether or not to engage with you. Explaining who you are matters. Tell your story and tell it succinctly. Featuring key highlights at the top-level keeps users focused on the conversation and not on wrangling the content or navigation. Well-written summaries illuminate your unique qualities and earn trust. (The full set of 70 design guidelines for "About Us" information is available in the 253-page research report, Presenting Company Information on Corporate Websites and in About Us Sections.) Ad Placement for Mobile by AURORA BEDFORD on July 5, 2015 Topics: Advertising Mobile & Tablet Web Usability Summary: Extra care is required when designing mobile page layouts that include advertisements, due to the limited screen real estate available. Ads must be displayed where they will not create false floors nor block users from reaching relevant content. Ads: that necessary evil we encounter every day, and to which we all believe ourselves to be immune. Whether a user ignores an ad completely or becomes annoyed with its presence is strongly related to the ad's size and placement on the page. On mobile phones, screen real estate is already at such a high premium that the position of the ad has an even greater impact on the overall user experience than on desktops. There are two main ad-related usability problems: (1) ads can be too disruptive to the user, and (2) they can create false floors that inaccurately signal the end of content and cause users to miss helpful information. Large Ads Limit Viewable Content Not surprisingly, the larger an advertisement, the more disruptive it is. On a small device, a vertically large ad consumes far too much valuable space, displacing the main content. To add insult to injury, sometimes two ads get stacked at the very top of mobile pages—as sites feel compelled to advertise their mobile apps. As a result, less page content is visible upon page load, which goes against one of the principles of mobile usability: prioritize content. In the example from FineGardening.com below, only the article title and brief summary can be seen without scrolling thanks to an overly large site header and the double ad placement at the top of the page. Screenshot from Finegardening.com on mobile showing multiple ads Finegardening.com: Very little article content can be seen upon page load because the app ad, banner ad, and large site header consume the majority of the screen real estate. Unlike multiple ad elements at the top of the page pushing down the relevant content, an ad at the bottom of the screen in a sticky container is less intrusive to users. This recommendation may seem counterintuitive because the ad would now remain visible on the screen at all times, but in past studies we have found this treatment to be best tolerated by users, which is good because it shows the ad is not getting in the way. Keep in mind that users tend to begin scanning from the top of the page, and resent having to scroll past a lot of chrome to get to the information they actually want to read. Thus, we need to not only consider the overall content-to-chrome ratio, but also ensure that helpful information is prioritized nearer to the top of page in order to grab people's interest and supply them with the information related to their task as soon as possible. An additional benefit to the sticky-container treatment is that the ad is still readily available to users once they finish their task. While the user is focused on completing an activity or researching a topic, ads will be ignored because they aren't part of the goal. Assuming the advertisement is actually relevant to the user, having it available once the main task is completed increases the likelihood that the user would pay attention to the ad and possibly interact with it. (An ad is relevant when it matches the user's current goal: it is more powerful to display an ad for something the user immediately wants rather than something that just matches their general profile.) Screenshots of ad treatment on the Washington Post mobile site The Washington Post mobile site displays an ad in a container fixed at the bottom of the screen (left). The ad is appropriately synced with the current scroll position of the page, and completely collapses when the user reaches a display ad embedded within the page content (right). Avoid Creating False Floors Another main downfall of many mobile ad placements is their tendency to create the “illusion of completeness,” or a false floor, on a page. An advertisement can easily signal to users that they have reached the end of the page's relevant content. This effect is exacerbated when the ad is large enough so it is difficult to see any continuation of content below, and when the ad is placed at a point low enough within the content where it seems reasonable that no more information is available on that page. Pages on WebMD's mobile site, for example, place ads following several paragraphs of text, below links to additional resources on the current topic. Horizontal lines in the design and the presence of copyright information (which is commonly associated with footer content) further cue the user that this is the end of page, when this is actually not true: the page continues far below the ad, displaying more information and additional links to related resources. Screenshots of WebMD.com mobile site article page containing several ads The ad placements on the WebMD mobile site create false floors because they appear in places that could reasonably be the end of relevant content, and are large enough that they hinder the user’s ability to see content continuing down the page. (The black dashed line shows where the fold occurs on an iPhone 6 Plus, and the red dashed lines represent areas where the ad is likely to stop a user from continuing to scroll.) If possible, only display ads at the real end of content rather than between paragraphs of text. Said one user during a recent usability study, “I don't like advertisements in between. It's distracting and gives me the impression that it's the end of the article.” Of course, we often don't have the luxury of neglecting business goals, and so if several ads need to be included on a page, putting them closer to the start of the content—following the title or intro paragraph, for example—can help avoid incorrectly signaling the end of the page. Additionally, shorter banner-style ads are less interruptive of the content than the taller square display ads. Screenshot of ad placement on USA Today mobile site USA Today mobile website uses a thin display ad positioned near the beginning of an article, so it is less likely to be considered a reasonable stopping point in the content. The thin rectangular size also allows the content below to be visible, encouraging the user to continue reading without being too interrupted by the ad. When an ad is placed lower on the page amid content, consider adding additional cues to signal the user to scroll past the ad. This recommendation is especially important if the ad is large or otherwise consumes a lot of page real estate (includes extra whitespace above and below the ad, or is a small ad populated into a placeholder meant for a larger one), and blocks the user from easily seeing any continuation of content. If the user doesn't know for sure that more content exists below the ad, they may not be willing to pay the interaction cost to scroll and possibly get nothing. Simple, clear text such as “Keep Reading” or “Continue Reading Below” along with an arrow pointing down or other directional indicator placed above the ad can work well to let the user know more content is available. Screenshot of ad design on Boston Globe mobile site To encourage users to scroll past a large ad, a cue such as Continue Reading Below should be shown above the advertisement, as seen on the Boston Globe mobile website. Keep in mind that this treatment merely makes the ad placement bearable, and should be considered a last resort if multiple ads must be placed on the page amidst content. In general when it comes to ads, be sure to practice restraint. Having a high number of ads diminishes site credibility: as stated by a user in a recent study, “I have deleted apps because of ads — I tend to not go to the ones with a lot of ads; I think the info is not reliable.” As expected, the most hated advertising techniques on the desktop are also hated on mobile devices; and sadly, top sins such as Covers what you are trying to see and Occupies most of the page are easier to unintentionally commit when the screen size is limited. Because of this, extra care must be taken when deciding where and how often to place ads on mobile apps and websites. Conclusion Ads represent a point of conflict between business needs and user needs. To minimize their impact on user experience, they need to take only a small fraction of the page area and be placed strategically so that they do not create false floors and do not stop people from discovering additional page content. on't Force Users to Register Before They Can Buy by AMY SCHADE on July 5, 2015 Topics: E-commerce Summary: Guest checkout with optional registration on e-commerce sites simplifies the purchase process and invites users to register when they feel comfortable, rather than forcing unwanted registration. One of the most common complaints we hear in e-commerce usability research is about registration. Shoppers have many reasons to dislike or dread site registration. They may not plan to return to the site again, making a one-time purchase or a gift purchase. They may dislike registration in general, frustrated with remembering usernames and passwords for all the sites they visit. Some shoppers don’t want a site to save personal information and assume that if they register for the site, the information will be saved. Many users associate registration with getting unwanted email, and for good reason, since many sites offer tiny preselected checkboxes to sign up for email newsletters. Most of all, registrations involves extra steps, extra hassle, and extra potential for things going wrong (whether user errors or site errors) and stopping the user dead in the water. The higher the interaction cost, the fewer people will complete a process. This is true for any user interface steps, but in the case of e-commerce checkout there’s a particularly direct connection between user hassle and lost sales. TinyPrints.com required that users create an account and also automatically subscribed users to the newsletter, mentioning above the Create Account button that “You will be subscribed to the Tiny Prints email newsletter” (stated in tiny print, which makes users weary right there.) Being signed up for newsletters they do not want is one of many complaints users have about registering on e-commerce sites. Registration sounds like a tedious, lengthy process unrelated to the task at hand: making a purchase. And some sites make registration a lengthy and tedious process, sometimes even presenting registration as a step separate from the checkout process. This doesn’t need to be the case. When a user is making a purchase, typically all the information needed for registration is already being requested of the user. Sites normally ask for information needed for the transaction, including name, shipping, and billing information. In addition, sites commonly ask for an email address in order to email a receipt and update order status. The only aspect of registration that is not covered in a standard checkout transaction is a password. How to Present Optional Registration Before users enter the checkout process, clearly state that registration will be an option. Some users do want to register and like to see assurance that they can if they’d like to. If the option to create a password will be presented after the purchase is complete, rather than during the checkout process, tell users so they know when to expect the option. Under the Guest Checkout option, HomeDepot.com told users that “You will have the opportunity to create an account and track your order once you complete your purchase.” The size of the text could have been larger to make it easier to read, though it is good to present this information less prominently than the main text. Briefly highlight the benefits of registration from the users’ perspective and not the company’s perspective when asking users to register. Shoppers appreciate when sites emphasize aspects that would make the experience easier, such as order tracking or faster checkout. They sometimes complain about sites that stress “benefits” such as receiving email newsletters or becoming a member of the site. Mention customer-focused benefits when users start the checkout process as well as when customers are asked to create optional passwords. A brief bulleted list tends to work well to highlight this information. This list should not be a sales pitch for the site, but a brief reminder to users about how registering benefits them. Nordstrom.com told users that registration would let them, “Check out faster, Track your orders, Write reviews and more!" This nicely presented the information as a benefit to the user, rather than the site. Mark password fields as optional, so it’s clear that users do not have to register for the site. Also make sure to state password requirements so users aren’t left guessing how to create a valid password. Some sites do not mark the password fields as optional; instead they place the fields in a section of the page with the word “optional” in a heading. Users often skim web content, even when filling in forms, and may miss the optional designation if it is only displayed in the heading, rather than next to the field. When the fields are not specifically marked, users can misinterpret it as a requirement for registration. If they were previously told that registration is optional or have pursued guest registration on the site, this inconsistency can break the user’s trust. Staples.com listed the optional passwords fields in a section titled Optional Information. That heading was in close proximity to the password fields, which only appeared if a user selected the Create an account and make your next checkout easy option. Both these factors helped reinforce that the fields were optional. Simple and Optional Rather than forcing users to register before checking out, provide the option to register within the checkout process by presenting optional fields for the user to enter a password. This puts users in control and allows them to decide if it is worthwhile to register or not. In our e-commerce research, we saw users who had previously complained about forced registration happily register for sites where registration was limited to the option of creating a password in the purchase process. Forcing registration causes lost sales. Some users will leave the site, others will struggle with registration. It is common for sites that add guest checkout to immediately realize increased sales. It is a simple way to improve usability and encourage purchasing. The Characteristics of Minimalism in Web Design by KATE MEYER on July 12, 2015 Topics: Visual Design Web Usability Summary: Our analysis of 112 minimalist websites revealed the defining features of minimalism: flat design, limited color schemes, few UI elements, use of negative space, and dramatic typography. This article is the second in a series devoted to the understanding of minimalism in web design. If you’re interested in the origins of the movement, read The Roots of Minimalism in Web Design. A minimalist web-design strategy is one that seeks to simplify interfaces by removing unnecessary elements or content that does not support user tasks. In order to reduce a website to only its most necessary elements, designers must accept a cascade of consequences that impact both the user interface (UI) and the content of the site. Many of the visual-design characteristics commonly associated with minimalism are choices that serve the core strategy of minimalism particularly well, and so have been adopted along with minimalism in most instances. Web design, like language, is defined by the way people use it. The word ‘minimalism’ is thrown around a lot, yet it’s hard to pinpoint exactly what features define a minimalist web design. To more clearly define what constitutes a minimalist design in practice, we analyzed the design characteristics of a sample of 112 minimalist websites. Sites were selected for the study if they were either identified by an outside web-design expert as minimalist, or were included in an online gallery for inspirational minimalist sites, like siiimple. Remember that just because a design technique is popular doesn’t necessarily mean that it always supports user needs and optimizes profitability or other business objectives. In this study, we analyzed sites that are known to employ minimalist design, not sites that are known to be highly profitable. As discussed further below, our other research suggests that while some of these design ideas can support business goals, others can hurt your profitability. Defining Characteristics of Minimalism So what features were present in most of these designs? We included a feature among the defining characteristics of minimalism if it was present in at least three quarters (75%) of the websites that we analyzed. Flat Patterns and Textures Used in 96% of sampled interfaces (but often ineffectively) Over the past few years, there has been an overwhelming shift in the design community away from skeuomorphism, towards purely digital representations of things without physical metaphors. Flat interfaces don’t make use of any of the obvious highlights, shadows, gradients, or other textures that make UI elements look glossy or three-dimensional. Some designers believe that the flat-design trend grew out of the popularity of minimalist UI design (Müller, 2014). The two trends are extremely compatible; removing gratuitous shadows, gradients, and textures falls in line with minimalism’s primary goal of eliminating the unnecessary. In our sample, 96% of the minimalist sites were flat. The two tend to co-occur so frequently that the phrase ‘flat design’ is often (misleadingly) used interchangeably with ‘minimalist design.’ The trends are similar, but not the same. Flat design generally refers to the textures, icons, or graphics in an interface. Minimalist design applies to the larger or overarching content, feature, and layout strategies. An interface may be flat without being minimalist. Jeet.gs The Getting Started page for Jeet.gs grid system API features a completely flat interface, including ‘ghost buttons’ for copying code snippets. (Ghost buttons are empty buttons with a thin rectangular border and text.) Flat ghost buttons can have legibility problems, and they break away from the established convention of what a clickable button should be. (However in this case, the buttons highlight when the mouse passes over them, providing a dynamic signifier of clickability. Also, the buttons show a tiny 3D effect when clicked that adds a small sense of physicality. Thus, the interactive user experience adds depth to the flat interface elements.) As we’ve discussed in other articles, flat designs often fail to communicate to users which elements are selectable or clickable. We believe that a better approach is a compromise between flat and skeuomorphic—a mostly flat design, but with clickable elements that users can recognize easily. Considering that flat design is the design idea most likely to be used incorrectly and degrade the user experience, it’s unfortunate that it’s the most prevalent of the main characteristics of minimalist web design. Limited or Monochromatic Color Palette Used in 95% of sampled interfaces In most minimalist interfaces, color is used strategically to create visual interest or direct attention without adding any additional design elements or actual graphics. With less visual information vying for a user’s attention, color palettes are more noticeable and will be more influential in a site’s impact. Minimalist color palettes are a movement away from the clashing, loud colors of the web design popular in the 2000s. Subdued color schemes are intended to avoid upstaging the content—which, in the case of images, can still be brightly colored. Many minimalist designs are either monochromatic, or use only one bold color as an accent, and use it to—sparingly—highlight the most important elements of the site. These accented elements are usually clickable. When assessing the use of color in the sample websites, we looked at background colors, logos, navigational elements, iconography, and typography, but did not consider content images (like photographs) as part of the color palette. Almost half of the websites sampled (49%, 55 websites) used a monochromatic color palette. Almost as many websites used one or two accent colors in an otherwise monochromatic color palette (46%, 52 websites). Of those 55 monochromatic sites, 51 sites were grayscale-–they used exclusively white, black, and gray shades. Freres d'Encre The monochromatic homepage of Frêres d'Encre, a French tattoo studio, creates a dramatic aesthetic. Solo Solo, project management software, uses a monochromatic but not grayscale color palette. Kayak Travel metasearch engine Kayak uses orange to highlight its logo and the actionable Search button. The popularity of this particular characteristic is an improvement in the sense that it’s moving interfaces away from the loud, clashing color schemes that used to dominate the web. However, there are some considerations to keep in mind when applying a limited color palette: Make sure your color scheme uses enough contrast to be legible to people with limited vision or color blindness. Use accent colors intentionally and consistently to highlight very important information or primary actions. Restricted Features and Elements Used in 87% of sampled interfaces Designers who adopt a minimalist design strategy must consider each element in their interfaces and eliminate any that are not required to support the core functionality or message of the website. An ‘element’ in this context could be any individual unit of the interface: including but not limited to: menu items links images graphics lines captions textures (like gradients) colors fonts icons It’s difficult to assess whether an interface includes ‘unnecessary’ elements without directly asking the sites’ designers what they left out, and without knowing the target users and tasks. To make this characteristic measurable, we focused on assessing whether or not the interface contained graphic elements that did not serve any obvious purpose. In our sample, 87% of minimalist sites avoided gratuitous graphic elements. Alan Trotter's portfolio The portfolio of fiction writer Alan Trotter is severely minimalist. By default, the site doesn’t even reveal his full name: visitors must click the underlined text to get to more details. This strategy might achieve an ‘edgy’ aesthetic, but it’s a big gamble to hide the most important content. The more stuff there is in a user interface, the more stuff users need to process. A favorite mantra of minimalist designers is, “subtract it till it breaks,” which really means, “unless the absence of an element would be serious problem, get rid of it.” This is where designers can get distracted by the pursuit of a clean, modern, minimalist interface—and end up cutting out useful content. Adhering to a rigidly utilitarian approach can produce streamlined designs by eliminating distracting features and content. Just make sure you aren’t making your users’ primary tasks more difficult by removing or hiding content they need. It’s hard to understand a cluttered design or a system overflowing with extraneous features. But it’s even harder to understand a design that doesn’t provide sufficient scaffolding to explain its features or structure. Maximized Negative Space Used in 84% of sampled interfaces Removing or excluding elements from a web page necessarily leaves empty space. Negative space (also called white space) is the name given to the empty areas of an interface. Negative space has been called “practically synonymous with” and “the backbone of” minimalist interfaces. Many minimalist designers use it as a tool to try to direct users’ attention and allow them to digest content more easily. Considering these strong assertions of negative space as the defining characteristic of minimalism, it’s surprising that only 84% of the sample sites used substantial amounts of negative space in their designs. Thomas Buffet's portfolio The screenshot above shows the homepage of French designer Thomas Buffet as seen full-screen on a 15-inch MacBook Pro. Above the fold, the page is almost entirely negative space. In this case, the site is still able to answer the two primary questions people would ask upon arriving at this page: ‘who are you,’ and ‘what do you do’. But this approach will not work in all contexts. Appropriate use of negative space can help draw attention to important content. When deciding how to lay out negative space in your designs, be sure to consider the following questions. How will adding or removing negative space impact the communicated hierarchy of the page? How will the negative space impact what content is displayed at the top of the page? The page fold still matters: users will scroll if they have a reason to, but they pay more attention to the content at the top of the page. How will the negative space impact the interaction cost: will users need to work harder to get to the information that they need? How will the negative space need to change at varying resolutions? Dramatic Use of Typography Used in 75% of sampled interfaces Like color, bold or large typography becomes another tool for communicating meaning when there are few elements on the page. Effectively exploiting interesting typography can help compensate for having fewer elements like photos and graphics, and can make a minimalist design feel more visually engaging. Variations in font size, weight, and style become crucial in helping users understand the hierarchy and relative importance of text. Of the 112 sampled minimalist sites, 75% used typography to convey meaning or create visual interest. Alexander Engzell's portfolio The portfolio of art director Alexander Engzell uses bold typography on his tagline to create visual interest without adding extra graphic elements to the page. However, the text is an image file, which adds to page load time. Also, unlike the Buffet portfolio, this page doesn’t directly explain whose portfolio this is, or what this person does. Users have to click the INFO link in the upper right corner to access that information. Using images for text may allow you to use custom fonts, but it will add to page load time, will require extra considerations for scaling at different resolutions, and can cause accessibility issues. Using web fonts is a better solution, but bear in mind that web fonts can have detrimental performance effects as well. Remember, drawing attention to bold typography is only useful when that text communicates meaningful information. Beware of going overboard on the fancy typography: users can ignore overformatted text if it looks too much like advertising. There’s a delicate balance between meaningfully bold typography and distracting typography. A great designer will come down on the right side of this balance, but if your designers are less skilled in employing advanced typography it’s safer to err on the side of caution. Related Trends Some designers also include the following characteristics as minimalist. Based on our research however, these seem to be design trends that often co-occur with minimalism, but are not actually defining characteristics—they occurred in fewer than 75% of the sites that we analyzed. Large Background Images or Videos Used in 57% of sampled interfaces The presence of a large background image or background videos (enabled by HTML5) is one of the most debated characteristics of minimalist Web design. From a theoretical perspective, a large background image certainly seems contradictory to the core minimalist spirit of reducing non-critical elements. Despite this, large background images and videos are popular in minimalist designs—we found that 57% of our sample included them. Monte Re The homepage of Monte Ré, an Italian fruit producer, uses a full-width background-image carousel within an otherwise pure-white minimal site design that includes ghost buttons. While the text is technically distinguishable from the background images, it’s unpleasant to try to read and understand the copy while colorful images circulate behind it. Depending on the context and the designer’s priorities, an argument can be made for the ability of large background images/videos to create an impact on users’ perception of brand. When a background image is used for a carefully considered, strategic reason, sticking to minimalist-design strategies can help restrain other page elements from competing or clashing with the background. Additionally, some designers may hope that loud background images will keep otherwise minimalist designs from being too boring or stark. If you choose to use a background photo or video with your minimalist design, keep the following points in mind: Make sure the images or videos you choose serve a real purpose or help people understand the site—otherwise they’ll just distract your users from your actual content. Make sure the text is both legible and readable if you want people to understand it. Remember, legibility is the extent to which users can distinguish individual letters. Readability is how well they can process words, phrases, and scan the text. If you’re using a carousel or video, you need to test every possible background—every image or frame of the video, and at a variety of screen resolutions. Be aware of how big images and videos impact performance. Make sure you’re taking an adaptive approach so your mobile users aren’t waiting for a desktop-sized retina photograph to load over their network data connection. Don’t autoplay videos. Many users are frustrated by videos that play automatically without their consent, especially if those videos have audio. Avoid creating Harry-Potter-painting-style videos of people slowly moving around in the background. You don’t want to distract your users and creep them out. Grid Layouts Used in 43% of sampled interfaces In our sample, we found that 43% of the interfaces used grid layouts to organize content. While this percentage indicates it is a popular design pattern among minimalist designers, it seems that grid layouts are certainly not ubiquitous in their designs. When grid layouts are used in minimalist UI designs, it’s generally for two reasons: Grids are an effective method of organizing homogenous content on the page linearly without adding any visual elements; and Grids are particularly helpful when designing a responsive website—another trend that is separate from minimalism but often co-occurs with minimalism. Paprika The graphic design agency Paprika organizes its projects in a grid, but is not responsive. Sea Chant portfolio The minimalist portfolio of photography studio Sea Chant organizes photographs in a grid at desktop screen widths. Sea Chant portfolio At 400px wide, the Sea Chant portfolio is reduced to a single column of content and removes all hover effects. Circular Graphic Elements Used in 16% of sampled interfaces Some design experts have suggested that circular and rounded graphic elements could be a component of minimalism, but we found only 16% of our sample used them. They seem to be more of a fad. Gesture Theory The homepage of Gesture Theory uses multiple circular elements in its minimalist design. Hidden Global Navigation Used in 13% of sampled interfaces Many websites currently use severely reduced global navigation elements in their desktop presentations, such as the now infamous hamburger menu. This can sometimes be the result of an incomplete mobile-first design strategy that fails to consider the needs and extra screen space available to desktop users, but it can also result from overzealous minimalism. Hiding infrequently accessed items might make sense for your goals, but make sure you aren’t hiding tools or links that are critical to the tasks you want your users to perform. Be particularly cautious if your site has large amounts of content or categories. Visual Soldiers portfolio The desktop portfolio site of design agency Visual Soliders uses a hidden global navigation under a hamburger menu. Visual Soldiers portfolio These few menu items hidden in an overlay could have been made visible globally, but were probably hidden to achieve this ultra-minimalist effect. Commonly Occurring Characteristics of Minimalist Interfaces Our analysis of 112 websites revealed the following defining characteristics for a minimalist website: Flat rather than skeuomorphic patterns and textures Use of a limited or monochromatic color palette Strictly limited features and graphic elements Maximized negative space Dramatic use of typography to communicate hierarchy or create visual interest Some of these characteristics are used almost ubiquitously in minimalism, and some occur slightly less frequently in minimalist interfaces; however, all of the defining characteristics were present in at least 75% of the minimalist sites that we analyzed. In our research, we also identified several related trends that were present in less than 75% of the sampled sites. Large background images or videos Grid layout Circular graphic elements Hidden global navigation Conclusion 2000s interface design was predominantly cluttered and overwhelming. For years, we’ve been advising against this kind of “maximalism”. Feature bloat and gratuitous content is always bad for users. In theory, minimalism should move us away from maximalism, and result in streamlined content and more efficient user task flows. In practice however, we’ve seen minimalism mutate into a superficial visual trend as designers copy popular minimalist characteristics without seriously considering if they support their own site goals. Just as flat design is a reaction to skeuomorphism, minimalism is a reaction to maximalism. In both cases, we strongly advise a balanced approach. A minimalist design strategy can be a powerful tool, but only when it’s framed by the needs of your users—minimalism for minimalism’s sake alone doesn’t help users. (Minimalism is one of the design strategies discussed in the full-day course on Generating UX Redesigns From Broad Design Principles.) Share this article: Twitter | LinkedIn | Google+ | Email Learn More Research Reports Strategic Design for Frequently Asked Questions Full Day Training Courses Top Web UX Design Guidelines The Human Mind and Usability UX Basic Training Web Page UX Design: Optimizing Pages to Deliver on Business Goals Visual Design for Mobile and Tablet: Day 1 and Day 2 Articles The Fold Manifesto: Why the Page Fold Still Matters 10 Usability Heuristics for User Interface Design Banner Blindness: Old and New Findings Scaling User Interfaces: An Information-Processing Approach to Multi-Device Design Teenage Usability: Designing Teen-Targeted Websites How Iterative Testing Decreased Support Calls By 70% on Mozilla's Support Website by SUSAN FARRELL on August 2, 2015 Topics: Agile Prototyping User Testing Summary: User research with data mining and paper prototyping quickly led to measurable success for one of the busiest support websites in the world. One of the more frequent questions that we get asked by our clients or by our seminar attendees is: "Is a redesign for usability worth it?" In other words, what is the return-on-investment (ROI) of a redesign? In recent years, we've seen a decline of the ROI for usability, most likely due to approaching a ceiling of usability improvements: With more than 20 years of web-design experience under their belt, designers have learned a few things and fixed quite a few problems. But a redesign for usability can still save you a significant amount of money. In this article we tell the story of Mozilla's support site, which was able to get a 233% improvement out of a redesign for usability. (Here's an explanation of how the improvement score was computed.) Thus, we can say that the redesigned site was about 3 times better than the original site. The cost involved in this redesign was 14 person-weeks or 560 person-hours. Is it worth spending 14 weeks to become 3 times better? This depends on the hourly rate for your staff and the value of your site and thus cannot be answered in general. However, for Mozilla, which gets huge amounts of traffic, the improvement is certainly worth the trouble, as it would be for almost any big site or company that does substantial business online. So how did Mozilla do it? What was involved in this redesign? Who is Mozilla Mozilla is a large, open-source, worldwide, software organization staffed by both employees and volunteers. It makes one of the most popular web browsers (Firefox), along with other useful products and services. Pain Points Millions of people come to Mozilla's support website every year to get help with Firefox and other products and services. When users cannot get an answer from the information existent on the site, the Mozilla staff aims to help by answering each person's question in the user-support forum, and to respond to questions as quickly as possible. As Mozilla's website had grown organically, users were having difficulty finding information and the support staff couldn't keep up with the number of questions in the forums. Specifically: At about 400 pages or so, the help documentation had become a difficult place in which to locate particular information quickly. The forum staff (employees and volunteers) were having trouble responding to questions as quickly as they wanted to, because of the increasing number of incoming questions for the rapidly updating Firefox. The forum overload was also making it difficult for staff to find time to write new help articles for frequently asked questions. More articles could help, but the growing number of articles also caused more findability problems. Action Plan Mozilla decided to invest in discovery and iterative usability testing in order to improve the IA of its support site. The research questions aimed to understand (1) how people (users and staff) used the support system; (2) which types of information were really important. Top research questions Mobile Faceted Search with a Tray: New and Improved Design Pattern by KATHRYN WHITENTON on July 26, 2015 Topics: Mobile & Tablet Search Visual Design Summary: Displaying faceted-search controls on mobile devices in a ‘tray’ overlay is a new effective solution to the challenge of showing both results and filters on small screens. Recently, a few big brands have introduced a new method for displayed facet controls on mobile devices, by placing them in a ‘tray’ overlay on top of the actual results. This new design approach addresses a major shortcoming typical of many faceted search displays on mobile devices: the placement of facet controls on a separate screen, which forces users to work harder to understand how the facet controls affect the results set. But before understanding why this is the case, let’s go back to the basics of faceted search. What Makes Faceted Search Special? Faceted search lets users refine a set of results by applying filters that comprehensively describe the search space. Such narrowing is invaluable for users who need to find something specific within a large content set. This type of search has become common for ecommerce and travel websites, as well as many different types of document and media collections. A faceted system includes two critical elements: Simple controls to construct sophisticated searches: Providing familiar controls like drop-down menus and checkboxes with natural-language labels empowers ordinary users to narrow down a large set of results to a small set that meets their exact criteria—without any special knowledge of Boolean logic or query syntax. Simultaneous display of the facet controls and the results: Showing both the filters and the results at the same time makes it easier for users to understand the relationship between the two; ideally, this is reinforced by dynamically updating the results set as soon as the user selects a filter criteria. The simple filter controls are the most obvious component of a faceted system. However, the importance of simultaneous display should not be underestimated. Long before faceted search became popular, we had ‘advanced search’ screens with similar controls for creating complex search queries. The big difference introduced with the first faceted navigation system was in displaying the facet controls and the results at the same time, which makes the effects of each filter instantly visible. This innovation embodies 2 of the 10 usability heuristics: provide rapid system feedback, and offer users control and freedom. Challenges of Displaying Search Facets on Mobile Devices Faceted search was originally designed for desktop and laptop users. Translating this experience onto a mobile device is difficult, because the very thing that makes faceted search so helpful to users – being able to see the filters and the results at the same time – is difficult to achieve on a small screen. There simply isn't enough space to show a full set of facets and a decent number of detailed results simultaneously. Until recently, most mobile designers haven’t even tried to display facets and results at the same time, instead opting to place them on separate screens. But this solution forces users to navigate to the facet-control screen, make their selections, then navigate back to the results set to see the effects of their selections. The istockphoto.com mobile website illustrates the typical approach to providing faceted search to mobile users. The results page includes an icon that users can tap to open the facet controls (assuming they can figure out what the icon means). Once the facet controls are displayed, users can select different filtering criteria, but it’s not obvious how the results will be affected by the facet selection because: None of the results are shown on this screen. The number of files, displayed in the page header updates too slowly. The header showing the number of files may not even be visible once a user has scrolled down to expand and select the facets below. Due to these limitations, users have to return to the previous screen in order to find out whether their filter selections were effective at targeting the best results and whether they have narrowed the results set down to a manageable size— or if perhaps they've applied such restrictive criteria that no results match. Mobile search results and facet controls on iStockphoto.com Left: Like many mobile search designs, iStockphoto.com does not display faceted search controls on the actual search results page. Instead it requires users to navigate to the facet controls, in this case via a cryptic icon composed of lines and circles on the right edge of the Search bar. Right: The facet controls take up the entire screen, and in order to see the effects of their selections, users must navigate back to the results screen. New Solution: ‘Tray’ Overlay to Display Facet Controls Recently a new approach to providing faceted search for mobile users has appeared: showing the facet controls as a ‘push-out’ style tray on top of the search results. This design allows for continuous visibility of results: even while the facet controls are open, some information about the results is visible in the background. The Amazon iPhone application and eBay’s mobile website both now use an overlay to display facet controls on the same screen as the search results. Mobile Facet Tray Overlay Examples Amazon’s iPhone application (left) and eBay’s mobile website (right) both recently introduced an overlay to display search facet controls on the same screen as the search results. Design Pattern Elements Both the Amazon and eBay designs include several details that combine to create a good user experience: Once activated, facet controls appear in a vertical panel overlaid on top of the results screen. The results are always visible in the background, and can be seen to change as the user makes her facet selections. (However, in the case of eBay, users can hardly make out what the results are. Amazon’s design is better because users actually get useful information from the background.) The total number of results is always visible, even if the user has scrolled down a long list of facets. (Amazon accomplishes this by fixing the header at the top of the screen so that it remains visible even as the list of facets scrolls up or down). A translucent gray shadow slightly obscures the underlying results and ensures that the facet controls stand out. The facet panel appears at the right edge of the screen, leaving the left edge of the results visible. (This is helpful because the left edge is more likely to have meaningful content; with Amazon you can actually see the product images.) (You may also notice that both Amazon and eBay use actual words – Filter and Refine – as the commands to access facets, rather than a special symbol. Any of the labels commonly used for faceted navigation – narrow your results, refine, and filter – are far more understandable than cryptic icons, and definitely worth the extra space. ) Why Is Simultaneous Display of Results and Facet Controls Important? In usability testing, I am always amazed at how successful people are at immediately understanding and using faceted search screens, which tend to include many different elements and controls. As long as the controls are displayed properly, most people jump right in to creating and refining their queries. Instant results are an important part of the process because they allow users to see right away if they have applied the wrong filter, or applied overly narrow criteria that eliminates too many options. Both of those errors are very easy to recover from if you can instantly see the effects of your actions, but without this visibility users can end up in a tedious cycle of pogo-sticking between the results and the filters. The facet ‘tray’ approach illustrated by Amazon and Ebay doesn’t provide complete visibility, since only a small part of the results screen is visible. But these creative solutions offer at least some visibility into the effects of applying a filter. Users may still find that they need to close and re-open the facet controls, but this approach feels more like expanding a part of the current page, rather than jumping back and forth between different pages. Find out more about the best approaches for visual displays on smaller screens in our full-day courses about Indicators, Validations, and Notifications: Pick the Correct Communication Option by KIM FLAHERTY on July 26, 2015 Topics: Applications Standards Summary: Status feedback is crucial to the success of any system. Knowing when to use 3 common communication methods is key to supporting users. In interaction design, a system, whether an application, website, or piece of hardware (anything from a smartwatch to a thermostat), should always keep users informed, by providing appropriate feedback. Ensuring that the state of the system is always visible is one of the 10 usability heuristics for interface design. Information about system status, such as error messages and notifications of system activity, allows users to fully understand the current context. The best way to communicate system status varies depending on several key factors: The type of information being communicated The urgency of the information — how important it is that the user sees it immediately Whether the user needs to take action as a result of the information Three common approaches for status communication include validation, notifications, and status indicators. These terms are used sometimes interchangeably in product design, but they stand for different communication methods that should be used in different circumstances. Understanding the differences between them will help you sharpen your feedback to users by choosing the best option for each need. Indicators An indicator is a way of making a page element (be it content or part of the user interface) stand out to inform the user that there is something special about it that warrants the user’s attention. Often, the indicator will denote that there has been some change to the item represented by that element. Although, as we’ll see later, indicators are used quite frequently to signal validation errors or notifications, they can also be used on their own. Indicators are visual cues intended to attract users’ attention to a particular piece of content or UI element that is dynamic in nature. (If something always looks the same, it’s not an indicator, no matter how flamboyantly it’s designed.) There are at least three possible ways of implementing indicators: Oftentimes, but not always, indicators are implemented as icons. Easily recognizable icons can make very effective communication tools. Typographical variations can also be used as indicators; examples include the common convention of boldfacing unread email messages or color-coding stock symbols in an investment account if their price has changed substantially. Though less common, enlarged size or animation (e.g., vibration) can also be used to make certain items stand out from the crowd and thus serve as an indicator. Yelp used a green-tag indicator in the search results to indicate that Tea Market had a special deal running. This indicator communicated additional information about Tea Market. Characteristics of indicators: Indicators are contextual. They are associated with a UI element or with a piece of content, and should be shown in close proximity to that element. Indicators are conditional— they are not always present, but appear or change depending on certain conditions. For example, a stock-performance indicator, such as the one in the American Century example below, may change to indicate if the stock price is increasing or decreasing. Additionally, the tag indicator in the Yelp example above only appears if there is a deal at that business. Indicators are passive. They do not require that a user take action, but are used as a communication tool to cue the user to something of note. American Century Investments used a conditional indicator to provide information regarding a specific stock’s performance. When the daily change was negative, the indicator was a red arrow pointing down. When the daily change was positive, it showed a green arrow pointing up. The condition of the stock performance impacted the indicator that was shown next to the price. Indicators can introduce noise and clutter to your overall interface, and may distract users, so it is important to consider how many (if any) indicators to use in your design. Consider the following when deciding if an indicator is appropriate: How important is the information to the user? Is it worth taking up space on the page to inform the user? How often is the information used? Would the user expect to see the information? Would it be missed if it weren’t provided? How important is it for the application that the user discovers the information? Validations Validation messages are error messages related to users’ inputs: they communicate whether the data just entered was incomplete or incorrect. For example, in e-commerce systems, validation messages often involve information such as name, billing address, and credit-card information. Cobragolf.com provided a validation message that clearly indicated which field was in error. The message however was complex and confusing. A better message might say “Please enter a valid email address.” Characteristics of validation: A user needs to take action to clear the validation message. The information in the validation message is contextual and applies to a specific user input that has a problem. The way in which validation should be implemented varies based on the unique needs of the form. However, in general, if the user’s input is incorrect, the system should inform the user by providing an identifiable and clear message that aids in correcting the error. Validation messages should follow the guidelines for error messages rather than simply identifying the problem, they should tell users how to fix it. For instance, don’t state “Field is blank.” Please enter your street address” is more polite and directs to a solution. Since validation is contextual, it can be helpful to use an icon indicator along with the validation message to help communicate which input(s) are missing or need corrected. Bestbuy.com provided a helpful validation message telling users how to fix the problem and also used an icon indicator and a different color to attract users’ attention to the field that needed correction. Notifications Notifications are informational messages that alert the user of general occurrences within a system. Unlike validation, notifications may not be directly tied to user input or even to the user’s current activity in the system, but they usually inform the user of a change in the system state or of an event that may be of interest. In the case of email, social networks, and mobile-phone applications, notifications can even be delivered while a user is away from the application. Notifications can be contextual —applying to a specific UI element— or global —applying to the system as a whole. The Facebook App used a contextual notification in the news feed to communicate that newer stories had been added to the feed. This notification does not require the user to take action. Characteristics of notifications: They are not triggered by users’ immediate actions. They announce an event that has some significance to the user. There are two main types of notifications, which differ based on whether the user is required to act upon the notification: Action-required notifications alert the user of an event that requires a user action. In this sense, they are similar to validation, but since they were not sparked by the user’s own action, they require a different design. Action-required notifications are often urgent and should be intrusive; for instance, they could be implemented as modal popups that interrupt the user, forcing immediate attention and requiring an action to be dismissed. The Mac operating system used a notification to inform users of available system updates. The user had to explicitly dismiss it from the screen, by opting to either install the update or to be reminded again at a later time. This is an intrusive notification that requires that the user take action. Passive notifications are informational; they report a system occurrence that does not require any user action. Many notifications in mobile apps are passive: they usually announce an event of potential interest to the user. Passive notifications are typically not urgent and should be less intrusive. A typical implementation of a passive notification may be a badge icon or a small nonmodal popover in a corner of a screen. Passive notifications can easily be missed, since they require no user action. When the information provided by the notification is key to the understanding of the system, an easy-to-ignore passive notification can be problematic. Adobe Creative Cloud used a nonintrusive passive notification to inform the user of an available application update. This notification appeared on screen for several seconds before disappearing. The user did not need to take any action on it. Uniqlo.com used a nonintrusive passive notification to provide feedback that an item was added to the shopping cart. No action was necessary to dismiss the notification. Such notifications sometimes cause issues for e-commerce shoppers who do not notice the brief messaging. Users who miss the message may respond by adding an item to the cart multiple times, or by disrupting their shopping flow to check the cart to see what items were added. Notifications have the design challenge that they are not the immediate and obvious result of a specific user action. On the contrary, the user is likely in the middle of doing something different and may not be thinking about the issue raised by the notification. This requires notifications to establish more context and provide users with sufficient background information to understand what the notification is about. (In contrast, with a validation, the user has just done the thing that needs to be corrected. Thus, the validation message doesn’t need to educate users about the task at hand. For example, if an e-commerce checkout form has a field for a credit-card expiration date that was left blank, the validation message doesn’t need to say “Please provide the expiration date for the credit card you want to have charged $29.90 to pay for the blue sleeveless dress you are in the process of buying on Uniqlo.com.” However, a notification the following day that the dress has been shipped from the warehouse would need to say more than “Your package has shipped.”) If a notification is contextual and relates to a specific element in the interface, an icon indicator on the element can communicate where that notification applies and catch the user’s attention. For instance, an indicator badge on a mobile-app icon shows that the user has received a notification from the corresponding app. The iPhone messaging app created a notification to communicate that a new message was received. Along with the notification, an indicator badge was placed on the messaging-app icon to communicate where the notification applied. To clear the indicator, the user had to view the message. Mint.com used an indicator together with a notification to communicate that an account needed attention. The warning indicator (1) appeared in close proximity to the summary of the account that needed attention, while the notification (2) appeared in the central area of the page with other important information. The actual text in the notification message could have been more helpful, though. Picking the Right Communication Option Is Important Using the wrong communication method can have a negative impact on the users’ experience. Let’s refer back to the scenario above where Yelp utilized a green-tag indicator in the search results to indicate that Tea Market had a special deal running. This information is contextual and important to users who have specifically searched for a place to have tea. You may think that an alternative way of alerting users of potential tea deals would be to send them a notification when such a deal has become available. Wrong! A notification sent irrespective of the current user goal would likely be ignored, and may even annoy users because it will disrupt their current task and be irrelevant to their current needs. (In general, any type of ad tends to be ignored unless it is related to the users’ aims and mindset.) Alternatively, a toast (a small nonmodal popup that disappears after a few seconds, like the New Stories one used by the Facebook app), while appropriate for passive notifications, would be a bad way to implement an error message, be it validation or otherwise. In fact, one of our mobile users spent 5 minutes waiting for some content to load only because she hadn’t notice the little error message presented at the bottom of the screen that quickly faded away after 5 seconds. Allmodern.com used an action-required notification to communicate that a product was saved as a favorite. For a user that is saving a lot of items to their favorites, this can be a bothersome and intrusive way of providing feedback. This may be better communicated by showing a passive nonmodal popover in the corner of the screen that can be seen, but doesn’t require the user to take action to clear it. Conclusion Remember the key differences between the three communication methods are: Indicators provide supplementary information about a dynamic piece of content or UI element. They are conditional —that is, they may appear or change under specific conditions. Validations are tied to a user’s action or input. Notifications are focused on system-related events. These differences are summarized in the table below: Validation Notifications Indicators Global vs. contextual: Related to a global system event or to a particular page element Contextual Global or contextual Contextual Passive vs. requiring a user action Action required Action required or passive Passive Triggered by user action vs. system event User action System event User action or system event Understanding when and how to use each of these feedback tools is important in order to build consistency in the communication to users. By assessing the type of information delivered, we can determine the correct mechanism to use. How do users and staff interact with the support system? Which problems are the most important to address in the website redesign? What is the most-wanted information? Which words do people use when they search? Which desired information seems to be missing? How can the information best be organized and presented in order to match what users most want to do on the website? The UX Team The UX team consisted of 3 members: Susan Farrell, Senior User Experience Specialist, Nielsen Norman Group. Susan conducted the research, did data discovery, analyzed data, and made design-change recommendations. Crystal Beasley, Product Designer, Mozilla. Crystal led the project, coordinated with Mozilla stakeholders, and played the computer during paper-prototype research sessions. Bram Pitoyo, Web User Experience Designer, Mozilla. Bram designed the task flows and prototypes and supervised the interaction-design changes to the website. He also tested the old IA so we could compare results with the tests of the proposed new IA. The Steps We employed a variety of research methods intended to help us understand users' needs and also to redesign the IA and the workflow on the support site: Doing data discovery and analysis, to understand how users behave on the support site and why In particular, we looked at a variety of data sources to identify users' top tasks, as well as difficulties that they had with the current site. The table below summarizes the methods that we used. Headings Are Pick-Up Lines: 5 Tips for Writing Headlines That Convert by HOA LORANGER on August 9, 2015 Topics: Writing for the Web Summary: Attractive headlines and titles are critical in making the right first impression. Concise titles that sound authentic and relevant get noticed. A headline is often the first piece of content people read. And often it is the ONLY thing people read. If you want your encounters with people to be successful, make sure to write solid headlines. Have you ever tried to retell a story you read only to realize the details are fuzzy because you had only read the headline? This is a sign of a memorable headline. Good headlines entice readers and are critical to the success of your website. Below are 5 tips for writing engaging headlines: 1. Make sure the headline works out of context. We often think of headlines as being connected with the associated story. However, on the web, headlines usually appear out of context in places such as search results, social-media streams, blog posts, and news feeds. Headlines must be strong and descriptive, especially when standing alone, stripped of supporting content. Can you guess what the heading below refers to? New times call for new decisions The headline contains low information scent—that is, few cues to suggest what the story is about. People rely on visual and textual cues to perceive the usefulness of the content. They don’t spend time making inferences and trying to figure out items that don’t make immediate sense. Minimize cognitive load to maximize usability. Treat headlines like microcontent—phrases that can be scanned and still give readers a clear idea of the underlying information. 2. Tell readers something useful. Consider the decision-making process from the users' point of view. When faced with a barrage of links, their time is best spent clicking on headings that have the highest probability of providing value. Useful headings are specific. They provide facts or information that pique the readers’ interest. Avoid broad and generic headings. They don’t provide value or differentiate you from your competitors. Tell people something they don’t know and that benefits them. Headings that contain user-centric language are much more refreshing than vague ones that require guesswork. This headline is too broad: Make better, faster decisions with data visualization Contrast it with: Data visualization helps you detect and prevent fraud faster The second one is better because it is more specific and provides a concrete benefit that might arouse the reader’s curiosity. 3. Don’t succumb to cute or faddish vocabulary. Minimize hype and idioms (expressions). They are often vague, obscure meaning, and often change the tone of copy, usually for the worse. Consider this headline: Get the most bang for your buck with XYZ The headline above sounds pretty tacky and inauthentic, and degrades credibility. In addition, idioms such as “bang for your buck” often lack meaning to nonnative English speakers. Don’t be tempted to include overly informal language to sound modern and hip. It is much better to aim for clarity and authenticity. Keep your headlines straightforward by using familiar keywords. This is better: Increase productivity by 24% with XYZ Of course, there are exceptions to this rule. You can use specialized language when you address a specialized audience; in those cases jargon improves communication. However, before you sprinkle jargon all over your copy, verify that your entire audience truly understands it. 4. Omit nonessential words. The one place worth practicing being concise is in headlines. Spend time editing headlines to cut unnecessary words and tangled messages. Shorter headlines require less cognitive effort. And longwinded headlines don’t scale well to variable container sizes: they have a higher chance of being truncated when displayed on small mobile screens, for instance. Convoluted headlines like this lose readers: Caster, a technology company, buys Mitchell, with assistance from Jon & Smith, for $1.2B There are too many details that obscure the gist of the heading. The sentence also contains three commas, which create a jerky, start–and–stop effect. The headline can be made smoother by removing less important details, as in the versions below: Caster buys Mitchell for $1.2 billion –or– Jon & Smith orchestrates $1.2 billion deal for top technology firms 5. Front-load headings with strong keywords. One of the best ways to get traffic to your site is to front-load your headlines with keywords. Moving keywords to the front of titles increases the likelihood that they get noticed. Our eyetracking studies show that readers pay most attention to the first few words in lists. Don’t count on people reading the end of sentences. Let’s compare the following headlines: (1) Behold the new technologies for creating 3-D imagery and (2) Creating 3-D imagery gets easier with new technologies The first one runs the risk of not being read because the key phrase (creating 3-D imagery) is positioned at the end. Users must read the entire headline to understand its meaning. The second one is better. Moving the keywords to the front makes the heading more scannable. People can read only the first few words and still understand what the article is about. Conclusion Make a good first impression with short, keyword-leading headings that sound authentic, contain useful information, and make sense out of context. Try to follow all of these tips in one headline and you should notice a lift in user engagement. The Freelance Studio Denver, Co. User Experience Agency The Roots of Minimalism in Web Design by KATE MEYER on June 28, 2015 Topics: Human Computer Interaction Visual Design Web Usability Summary: Many of today’s most popular design trends are influenced by minimalism. This web design movement began in the early 2000s, but borrows its philosophy from earlier movements in the fields of fine art and human–computer interaction. Many of today’s most popular design trends (including flat design, large background images, and hidden global navigation) are directly or indirectly influenced by minimalism, a web-design movement that began in the early 2000’s, but borrows its philosophy from earlier movements in the fields of fine art and human–computer interaction. Minimalism sometimes presents as an attempt to prioritize content over the chrome and, when applied correctly, it can help you focus your design to simplify user tasks. Unfortunately, some designers misinterpret minimalism as a purely visual-design strategy. They cut or hide important elements in pursuit of a minimalist design for its own sake—not for the benefits that strategy might have for users. They’re missing the core philosophy and the historical context of minimalism, and they risk increasing complexity rather than reducing it. To better grasp and apply minimalist principles, we need to understand the origins of minimalism and its fundamental characteristics. We explore these topics in a series of two articles: In this first article we define minimalism and look at its history; in a second article we analyze in depth the characteristics of minimalist design and their impact on usability. What Is a Minimalist Interface? When employed correctly, the goal of minimalist web design should be to present content and features in a simple, direct way by providing as little distraction from the core content as possible. This strategy often involves removing content or features that don’t support the primary goals of the interface or its users. Although there is some debate about what exactly qualifies as minimalist web design, there are a few common features that most designers can agree upon. These include flat textures, limited color palettes, and the use of negative space. These and other specific characteristics and their frequency of use in minimalist websites are discussed in detail in the next article in this series. Minimalism is a reaction to bloated, or “maximalist,” UI design. Examples of such maximalist design include Flash intros and gratuitous animations, or applications crammed with as many esoteric features as possible (like Microsoft Office before the 2007 rethink). Brian Danaher's portfolio The portfolio of designer Brian Danaher is a typical example of what many designers would call a minimalist site. When viewed full screen on a 15-inch MacBook Pro, the homepage is almost entirely white space. The site uses a grayscale color palette with a single bold accent color to draw attention to clickable elements—a popular strategy among minimalist designers. Brian Danaher's portfolio Danaher’s site includes very few distractions from its primary content. Minimalism is well suited to portfolio sites like this one, which have fairly simple goals, relatively low amounts of content, and very similar information on most pages. Applying minimalism effectively to more complex sites can be much more difficult. Minimalism’s Rise to Popularity 1960s Decades before minimalism was a trend in web design, it was a visual art movement in the era following World War II. It emerged as a reaction to the chaotic colors, motion, and marked subjectivity often found in abstract expressionists works (such as the drip paintings of Jackson Pollock). It was heavily influenced by the famous German art movement Bauhaus, which focused on simple yet functional design. In the 1960s, minimalism became popular in a variety of fields, particularly fine art and architecture. In visual art, minimalism was characterized by monochromatic palettes, geometric elements, serial arrangements, and industrial materials. Jackson Pollock's Full Fathom Five Jackson Pollock’s Full Fathom Five (1947) in The Museum of Modern Art. Minimalists of note include graphic designer Josef Müller-Brockmann, painter Ellsworth Kelly, and industrial designer Dieter Rams. Note the clean lines, simplicity, and sparing use of color in each of these examples. Despite the wide variety of mediums, a coherent design style is perceptible. Ellsworth Kelly's Brooklyn Bridge VII Ellsworth Kelly’s Brooklyn Bridge VII (1962) in The Museum of Modern Art. Radio by Dieter Rams RT 20 tischsuper radio, 1961, by Dieter Rams for Braun. Unmodified CC image courtesy of Vitsoe. S.R. Crown Hall S.R. Crown Hall, designed by Ludwig Mies van der Rohe, 1956. Unmodified CC image courtesy of Peter Alfred Hess. The perspective behind minimalist art was neatly summarized by the motto of famous 20th century architect Ludwig Mies van der Rohe: “Less is more”. This motto would later become the spirit and unofficial mantra of minimalism in web design: fewer elements on a page results in lower cognitive load for users. 1980-2000 At the end of the twentieth century, minimalism began to take shape as a separate trend within the field of human–computer interaction. In 1983, data-visualization expert Edward Tufte introduced the concept of a data–ink ratio in his work, The Visual Display of Quantitative Information. In print media, the data–ink ratio is the ratio between (1) the amount of ink that communicates information, and (2) all the ink used to print the graphic. Tufte advocated maximizing this data–ink ratio by removing any elements that do not reasonably contribute new information. Data–Ink Ratio = Informative Ink / Total Ink This concept of data–ink ratio can be applied to web interfaces by considering the content–element ratio for any interface. The goal is similar: a high proportion of the amount of meaningful elements relative to all elements in the interface. In 1990, HCI researcher John M. Carroll was studying the ways people used technical training manuals, and looking for ways to improve them. From his research, he developed the theory of minimalism in technical communication. Carroll’s theory suggests that a successful design will support quick action by prioritizing brevity. Carroll stressed that reducing a design to its most basic elements is not the end goal of minimalism. Rather, Carroll championed brevity and simplicity in the service of task-oriented results. To position this approach towards web design, Carroll’s minimalism translates to getting the interface out of the way, in order to allow users to achieve their goals. In 1995, Jakob Nielsen included minimalist design in his 10 usability heuristics. His use of the term aligned with Tufte’s and Carroll’s sense of minimalism, as he advocated eliminating irrelevant information from interfaces. 2000s Beginning in the mid 2000s, echoes of the minimalist art movement began to appear in web interfaces: larger swaths of negative space, lower amounts of content, and restricted color palettes. Google is often credited as the pioneer of minimalist web interfaces. Google has prioritized simplicity and austerity in its interfaces ever since its beta offering in the 1990s. Google, 1999 Google’s homepage (1999, via Wayback Machine) Even though Google now offers a huge variety of products from Google Drive to YouTube to Gmail to Google Maps, its homepage has changed very little over 15 years. Only three navigation options are visible: in order to access the rest of Google’s offerings, users must use the grid icon to expose a tray of more options. Google, 2015 Google’s homepage (2015) In spite of early trendsetters like Google, it took time for minimalism to catch on in web design. In the early 2000s, crowded interfaces dominated the web. During our impression testing sessions at that time, users overwhelmingly described the interfaces as ‘busy’. Slowly but surely, minimalism found a foothold with early adopters: the web designers, graphic designers, artists, photographers, architects, and developers. Designer and blogger Emily Chang wrote about the rise of minimalism in 2006: Perhaps it’s the success of Google’s search page, or our collective reaction against the flashing banner ads and intrusive popups of the last decade, or the Jonathan Ives effect, but it’s as though web users, designers, and developers alike have all agreed to a new de facto standard of Mies van der Rohe’s ‘less is more.’ Chang’s assertion that all web users and professionals embraced minimalism was definitely not accurate in 2006, and may still be an exaggeration today. However, it is reasonable to assume she did speak for the emerging popularity of minimalism among people who are deeply immersed in the cutting-edge trends of the web. 2010-2013 The emergence of responsive web design (RWD) in 2010 primed the wider web to appreciate a minimalist approach. To effectively utilize RWD techniques, organizations must carefully prioritize their content—distractions from primary content that could be ignored on desktop become big problems on mobile. Slowly user and designer preferences began to lean towards greater simplicity in web interfaces. This shift was underscored by major redesigns carried out by two tech industry giants: Microsoft’s Modern design in 2011, and Apple’s release of iOS7 in 2013. Microsoft’s release of Windows 8 in 2011 was the first major redesign of its operating system in decades. At the same time, it announced its design philosophy, “modern design”. This new design philosophy was quintessentially minimalist, drawing directly from the minimalist art movement. Microsoft’s official design documentation even claims that the Bauhaus school is one of its fundamental design pillars. Windows 8 Windows 8 ‘tile’ view Though Apple has worked hard to define its brand in simplicity, Apple designers have historically—and controversially—favored skeuomorphic patterns in their interfaces. In 2013, Apple radically revamped iOS to a much flatter and more minimal style with iOS7. Apple’s decision to move toward a more minimal and flat design particularly underscores the popularity of the trend, given that it fundamentally contradicts the brand’s historic design style. iOS7 Apple’s iOS7 2014-2015 Minimalist design principles are now showing up in new and unexpected places: e-commerce sites, online publications, and even educational sites are adopting minimalist trends and strategies. Many one-stop website-design and hosting services like Squarespace, Weebly, Wix, and Volusion now provide stock site templates that are almost entirely minimalist designs. These offerings are particularly significant because they often target people with no development or design experience—people who want to set up their online bike store or bakery website or online wedding invitation without having to touch Illustrator or a line of HTML. These services are selling minimalist websites because they believe it’s what their customers want. Squarespace's Galapagos theme Squarespace’s ‘Galapagos’ theme Today, minimalism has branched into and overlaps with other prominent web-design trends such as flat design, responsive web design, and clean design. Minimalism’s contributions to these trends will be discussed in detail in next week’s article. The Usability Debate: Is Minimalism Good for Users? Minimalism is a design strategy that significantly influences content and information-architecture decisions. As a result, minimalism has a definite impact on the usability of the interfaces that adopt it. Unsurprisingly, the usability of minimalist-design styles has become the subject of debate amongst web professionals. Proponents argue that minimalism reduces information overload: the more features and content you can cut out, the less people have to deal with. Minimalism done well can also create a positive emotional experience for users. People do tend to respond better to aesthetically-pleasing interfaces. As Don Norman points out, when using such interfaces they are more tolerant of usability obstacles, as long as those flaws are minor. Since Nielsen Norman Group was founded in 1998, we have been forceful critics of maximalist (i.e., bloated) web design. You might expect us to be enthusiastic supporters of minimalist web design, but that’s not the case. When designers adhere too rigidly to a minimalist ideology, they risk ending up with wastefully low information density and poor findability and discoverability. Extreme minimalism can be useful as an internal design exercise, but should never be a final product. Minimalism in moderation can create efficient user experiences, as long as you don’t lose sight of the primary goal—helping users accomplish tasks. Tips for a Successful Minimalist Interface Make sure you seriously consider whether a minimalist design strategy is right for your site, your brand, and your content. If you’re sure a minimalist design is right for you, take some lessons from the roots of minimalism. Adopt Ludwig Mies van der Rohe’s motto, “Less is more,” in your designs. Don’t add elements just for their own sake. This rule can be true for content, visual design, and feature decisions. Consider reducing any elements that don’t contribute meaningful information (think about your content–element ratio.) Learn from Carroll’s minimalism: don’t just cut out features and elements—really think about your users’ needs and try to make tasks as brief and simple as possible. Know that a minimalist visual design alone, without meaningful consideration of user tasks, will not result in a successful interface. The usability issues of Windows 8 provide an excellent cautionary tale. (Minimalism is one of the design strategies discussed in the full-day course on Generating UX Redesigns From Broad Design Principles.) For an in-depth discussion of the characteristics of minimalism, read the next article in this series.Great Summaries on ‘About Us’ Pages Engage Users and Build Trust by HOA LORANGER on June 21, 2015 Topics: Corporate Websites Writing for the Web Summary: Tell your story on top-level pages in ‘About Us.’ People who trust you are much more open to engaging with your organization and website. Even large organizations exist only as words and images within a browser window. How can you make people trust you more than they would trust an equally good-looking set of pixels on another site? Be a good storyteller. The One Thing You Should Do Based on several studies, we’ve generated numerous guidelines on how to present company information on corporate websites and in the About Us sections to increase trust and transparency. However, in this article, I focus on one major guideline to increase perceptions of transparency and improve your relationship with users. If you can do only one thing, what should it be? The answer: Provide key information on major About Us pages. In usability studies, we observe people peeking at top-level pages for answers to foundational questions. Make sure that your site passes the first impressions test by answering top questions succinctly. People are more inclined to engage further once they’ve determined you’re worth the effort. Start telling your story the moment people land on your site. At a minimum, write brief summaries emphasizing a few impressive facts. As people click through the main pages they should gain a fuller understanding of who you are, what you do, and why you exist. Ask yourself, “If users only skim the top pages in About Us, are they getting a coherent story?” In many cases, what new users need most are great highlights written in a scannable format. Summaries are appealing because they provide context and reduce the amount of effort required to click through layers of content. Forcing people to work hard (even if it’s to click on a link to one level down) to receive an introduction is bad manners and reflects poorly on your organization. Examples of Dos and Don’ts Below are examples of what you should practice and what you should avoid. DO AbbVie: This About Us page provides a nice company overview, including Fast Facts to give site visitors a reasonable company snapshot. While this page holds promise, the content could be improved by replacing the marketing jargon with concrete facts that people care about. Steer clear of hollow phrases like “revolutionary” — at best, they tend to confuse users; at worst, they make them mistrust the site. DON’T Abbott: This About page has very low content density and forces users to drill deeper before they can learn about the company. This page acts as a wall that deters people from wanting to go further. Better to start the conversation by providing the highlights on this page. People who research organizations are sensitive to credibility factors. They are looking for clues to determine whether or not to like you. Answering the questions at the right time feels conversational and can be persuasive in garnering trust. People who trust you are much more open to engage with you. DO Chipotle: This summary tells a compelling story of who the company is and how they differ from other fast-food chains. The writing style is clear and hype-free, making the organization sound friendly and credible. DON'T CSC: Can you guess from page that this company offers cloud-computing services? This About page feels unfriendly without an introduction. The sheer number of links puts the onus on the users to determine which door to open. When the tagline could equally well describe thousands of other companies, you know you’re in trouble. The manner in which information is communicated on websites influences people’s perception of your organization. Users perceive sites that answer their questions quickly as being transparent and efficient. Conversely, users regard sites that bury critical information underneath complex layers as being evasive or ineffective. If your site visitors are potential donors, journalists, or clients, leaving such a negaive impression is detrimental to your business and brand. DO GSK: This overview answers the questions and is formatted well for ease of reading. The page contains facts for each business featured (e.g., pharmaceuticals, vaccines). Nice overviews like these minimize the effort required of users to learn about you. DON’T TevaPharm: The summaries on this Company Profile page are generic and don’t give clarity on how they’re unique. You might find specifics underneath Discover more, but why make users jump such hurdles? Halo Effect impacts how people gauge websites, even if the assessment is flawed. People tend to make hasty judgments about organizations based on limited information. If users have a good first impression, the positive feelings permeate to other parts of the site. If users have a bad first impression, the negative feelings extend to the rest of the site. DO Citrix: The images on this Executives overview page literally show the faces behind the organization. At a glance people get an impression of the company culture and the people running the business. Citrix is clearly benefiting from having a recognized UX expert on its executive team. (To nitpick this otherwise good example, reduce the leading slightly between names and job titles, to more closely associate these two pieces of information. Currently, the line reading “Chief Executive Officer” is closer to David Friedman’s photo than to Mark Templeton’s name.) DON'T Defenders of Wildlife: This executive overview feels unfriendly without photos of the members. Featuring photos on this page would tell a better story of who Defenders of Wildlife is. Conclusion Credibility is a major issue on the Web. Site visitors who visit the About Us section are seeking critical information to determine whether or not to engage with you. Explaining who you are matters. Tell your story and tell it succinctly. Featuring key highlights at the top-level keeps users focused on the conversation and not on wrangling the content or navigation. Well-written summaries illuminate your unique qualities and earn trust. (The full set of 70 design guidelines for "About Us" information is available in the 253-page research report, Presenting Company Information on Corporate Websites and in About Us Sections.) Ad Placement for Mobile by AURORA BEDFORD on July 5, 2015 Topics: Advertising Mobile & Tablet Web Usability Summary: Extra care is required when designing mobile page layouts that include advertisements, due to the limited screen real estate available. Ads must be displayed where they will not create false floors nor block users from reaching relevant content. Ads: that necessary evil we encounter every day, and to which we all believe ourselves to be immune. Whether a user ignores an ad completely or becomes annoyed with its presence is strongly related to the ad's size and placement on the page. On mobile phones, screen real estate is already at such a high premium that the position of the ad has an even greater impact on the overall user experience than on desktops. There are two main ad-related usability problems: (1) ads can be too disruptive to the user, and (2) they can create false floors that inaccurately signal the end of content and cause users to miss helpful information. Large Ads Limit Viewable Content Not surprisingly, the larger an advertisement, the more disruptive it is. On a small device, a vertically large ad consumes far too much valuable space, displacing the main content. To add insult to injury, sometimes two ads get stacked at the very top of mobile pages—as sites feel compelled to advertise their mobile apps. As a result, less page content is visible upon page load, which goes against one of the principles of mobile usability: prioritize content. In the example from FineGardening.com below, only the article title and brief summary can be seen without scrolling thanks to an overly large site header and the double ad placement at the top of the page. Screenshot from Finegardening.com on mobile showing multiple ads Finegardening.com: Very little article content can be seen upon page load because the app ad, banner ad, and large site header consume the majority of the screen real estate. Unlike multiple ad elements at the top of the page pushing down the relevant content, an ad at the bottom of the screen in a sticky container is less intrusive to users. This recommendation may seem counterintuitive because the ad would now remain visible on the screen at all times, but in past studies we have found this treatment to be best tolerated by users, which is good because it shows the ad is not getting in the way. Keep in mind that users tend to begin scanning from the top of the page, and resent having to scroll past a lot of chrome to get to the information they actually want to read. Thus, we need to not only consider the overall content-to-chrome ratio, but also ensure that helpful information is prioritized nearer to the top of page in order to grab people's interest and supply them with the information related to their task as soon as possible. An additional benefit to the sticky-container treatment is that the ad is still readily available to users once they finish their task. While the user is focused on completing an activity or researching a topic, ads will be ignored because they aren't part of the goal. Assuming the advertisement is actually relevant to the user, having it available once the main task is completed increases the likelihood that the user would pay attention to the ad and possibly interact with it. (An ad is relevant when it matches the user's current goal: it is more powerful to display an ad for something the user immediately wants rather than something that just matches their general profile.) Screenshots of ad treatment on the Washington Post mobile site The Washington Post mobile site displays an ad in a container fixed at the bottom of the screen (left). The ad is appropriately synced with the current scroll position of the page, and completely collapses when the user reaches a display ad embedded within the page content (right). Avoid Creating False Floors Another main downfall of many mobile ad placements is their tendency to create the “illusion of completeness,” or a false floor, on a page. An advertisement can easily signal to users that they have reached the end of the page's relevant content. This effect is exacerbated when the ad is large enough so it is difficult to see any continuation of content below, and when the ad is placed at a point low enough within the content where it seems reasonable that no more information is available on that page. Pages on WebMD's mobile site, for example, place ads following several paragraphs of text, below links to additional resources on the current topic. Horizontal lines in the design and the presence of copyright information (which is commonly associated with footer content) further cue the user that this is the end of page, when this is actually not true: the page continues far below the ad, displaying more information and additional links to related resources. Screenshots of WebMD.com mobile site article page containing several ads The ad placements on the WebMD mobile site create false floors because they appear in places that could reasonably be the end of relevant content, and are large enough that they hinder the user’s ability to see content continuing down the page. (The black dashed line shows where the fold occurs on an iPhone 6 Plus, and the red dashed lines represent areas where the ad is likely to stop a user from continuing to scroll.) If possible, only display ads at the real end of content rather than between paragraphs of text. Said one user during a recent usability study, “I don't like advertisements in between. It's distracting and gives me the impression that it's the end of the article.” Of course, we often don't have the luxury of neglecting business goals, and so if several ads need to be included on a page, putting them closer to the start of the content—following the title or intro paragraph, for example—can help avoid incorrectly signaling the end of the page. Additionally, shorter banner-style ads are less interruptive of the content than the taller square display ads. Screenshot of ad placement on USA Today mobile site USA Today mobile website uses a thin display ad positioned near the beginning of an article, so it is less likely to be considered a reasonable stopping point in the content. The thin rectangular size also allows the content below to be visible, encouraging the user to continue reading without being too interrupted by the ad. When an ad is placed lower on the page amid content, consider adding additional cues to signal the user to scroll past the ad. This recommendation is especially important if the ad is large or otherwise consumes a lot of page real estate (includes extra whitespace above and below the ad, or is a small ad populated into a placeholder meant for a larger one), and blocks the user from easily seeing any continuation of content. If the user doesn't know for sure that more content exists below the ad, they may not be willing to pay the interaction cost to scroll and possibly get nothing. Simple, clear text such as “Keep Reading” or “Continue Reading Below” along with an arrow pointing down or other directional indicator placed above the ad can work well to let the user know more content is available. Screenshot of ad design on Boston Globe mobile site To encourage users to scroll past a large ad, a cue such as Continue Reading Below should be shown above the advertisement, as seen on the Boston Globe mobile website. Keep in mind that this treatment merely makes the ad placement bearable, and should be considered a last resort if multiple ads must be placed on the page amidst content. In general when it comes to ads, be sure to practice restraint. Having a high number of ads diminishes site credibility: as stated by a user in a recent study, “I have deleted apps because of ads — I tend to not go to the ones with a lot of ads; I think the info is not reliable.” As expected, the most hated advertising techniques on the desktop are also hated on mobile devices; and sadly, top sins such as Covers what you are trying to see and Occupies most of the page are easier to unintentionally commit when the screen size is limited. Because of this, extra care must be taken when deciding where and how often to place ads on mobile apps and websites. Conclusion Ads represent a point of conflict between business needs and user needs. To minimize their impact on user experience, they need to take only a small fraction of the page area and be placed strategically so that they do not create false floors and do not stop people from discovering additional page content. on't Force Users to Register Before They Can Buy by AMY SCHADE on July 5, 2015 Topics: E-commerce Summary: Guest checkout with optional registration on e-commerce sites simplifies the purchase process and invites users to register when they feel comfortable, rather than forcing unwanted registration. One of the most common complaints we hear in e-commerce usability research is about registration. Shoppers have many reasons to dislike or dread site registration. They may not plan to return to the site again, making a one-time purchase or a gift purchase. They may dislike registration in general, frustrated with remembering usernames and passwords for all the sites they visit. Some shoppers don’t want a site to save personal information and assume that if they register for the site, the information will be saved. Many users associate registration with getting unwanted email, and for good reason, since many sites offer tiny preselected checkboxes to sign up for email newsletters. Most of all, registrations involves extra steps, extra hassle, and extra potential for things going wrong (whether user errors or site errors) and stopping the user dead in the water. The higher the interaction cost, the fewer people will complete a process. This is true for any user interface steps, but in the case of e-commerce checkout there’s a particularly direct connection between user hassle and lost sales. TinyPrints.com required that users create an account and also automatically subscribed users to the newsletter, mentioning above the Create Account button that “You will be subscribed to the Tiny Prints email newsletter” (stated in tiny print, which makes users weary right there.) Being signed up for newsletters they do not want is one of many complaints users have about registering on e-commerce sites. Registration sounds like a tedious, lengthy process unrelated to the task at hand: making a purchase. And some sites make registration a lengthy and tedious process, sometimes even presenting registration as a step separate from the checkout process. This doesn’t need to be the case. When a user is making a purchase, typically all the information needed for registration is already being requested of the user. Sites normally ask for information needed for the transaction, including name, shipping, and billing information. In addition, sites commonly ask for an email address in order to email a receipt and update order status. The only aspect of registration that is not covered in a standard checkout transaction is a password. How to Present Optional Registration Before users enter the checkout process, clearly state that registration will be an option. Some users do want to register and like to see assurance that they can if they’d like to. If the option to create a password will be presented after the purchase is complete, rather than during the checkout process, tell users so they know when to expect the option. Under the Guest Checkout option, HomeDepot.com told users that “You will have the opportunity to create an account and track your order once you complete your purchase.” The size of the text could have been larger to make it easier to read, though it is good to present this information less prominently than the main text. Briefly highlight the benefits of registration from the users’ perspective and not the company’s perspective when asking users to register. Shoppers appreciate when sites emphasize aspects that would make the experience easier, such as order tracking or faster checkout. They sometimes complain about sites that stress “benefits” such as receiving email newsletters or becoming a member of the site. Mention customer-focused benefits when users start the checkout process as well as when customers are asked to create optional passwords. A brief bulleted list tends to work well to highlight this information. This list should not be a sales pitch for the site, but a brief reminder to users about how registering benefits them. Nordstrom.com told users that registration would let them, “Check out faster, Track your orders, Write reviews and more!" This nicely presented the information as a benefit to the user, rather than the site. Mark password fields as optional, so it’s clear that users do not have to register for the site. Also make sure to state password requirements so users aren’t left guessing how to create a valid password. Some sites do not mark the password fields as optional; instead they place the fields in a section of the page with the word “optional” in a heading. Users often skim web content, even when filling in forms, and may miss the optional designation if it is only displayed in the heading, rather than next to the field. When the fields are not specifically marked, users can misinterpret it as a requirement for registration. If they were previously told that registration is optional or have pursued guest registration on the site, this inconsistency can break the user’s trust. Staples.com listed the optional passwords fields in a section titled Optional Information. That heading was in close proximity to the password fields, which only appeared if a user selected the Create an account and make your next checkout easy option. Both these factors helped reinforce that the fields were optional. Simple and Optional Rather than forcing users to register before checking out, provide the option to register within the checkout process by presenting optional fields for the user to enter a password. This puts users in control and allows them to decide if it is worthwhile to register or not. In our e-commerce research, we saw users who had previously complained about forced registration happily register for sites where registration was limited to the option of creating a password in the purchase process. Forcing registration causes lost sales. Some users will leave the site, others will struggle with registration. It is common for sites that add guest checkout to immediately realize increased sales. It is a simple way to improve usability and encourage purchasing. The Characteristics of Minimalism in Web Design by KATE MEYER on July 12, 2015 Topics: Visual Design Web Usability Summary: Our analysis of 112 minimalist websites revealed the defining features of minimalism: flat design, limited color schemes, few UI elements, use of negative space, and dramatic typography. This article is the second in a series devoted to the understanding of minimalism in web design. If you’re interested in the origins of the movement, read The Roots of Minimalism in Web Design. A minimalist web-design strategy is one that seeks to simplify interfaces by removing unnecessary elements or content that does not support user tasks. In order to reduce a website to only its most necessary elements, designers must accept a cascade of consequences that impact both the user interface (UI) and the content of the site. Many of the visual-design characteristics commonly associated with minimalism are choices that serve the core strategy of minimalism particularly well, and so have been adopted along with minimalism in most instances. Web design, like language, is defined by the way people use it. The word ‘minimalism’ is thrown around a lot, yet it’s hard to pinpoint exactly what features define a minimalist web design. To more clearly define what constitutes a minimalist design in practice, we analyzed the design characteristics of a sample of 112 minimalist websites. Sites were selected for the study if they were either identified by an outside web-design expert as minimalist, or were included in an online gallery for inspirational minimalist sites, like siiimple. Remember that just because a design technique is popular doesn’t necessarily mean that it always supports user needs and optimizes profitability or other business objectives. In this study, we analyzed sites that are known to employ minimalist design, not sites that are known to be highly profitable. As discussed further below, our other research suggests that while some of these design ideas can support business goals, others can hurt your profitability. Defining Characteristics of Minimalism So what features were present in most of these designs? We included a feature among the defining characteristics of minimalism if it was present in at least three quarters (75%) of the websites that we analyzed. Flat Patterns and Textures Used in 96% of sampled interfaces (but often ineffectively) Over the past few years, there has been an overwhelming shift in the design community away from skeuomorphism, towards purely digital representations of things without physical metaphors. Flat interfaces don’t make use of any of the obvious highlights, shadows, gradients, or other textures that make UI elements look glossy or three-dimensional. Some designers believe that the flat-design trend grew out of the popularity of minimalist UI design (Müller, 2014). The two trends are extremely compatible; removing gratuitous shadows, gradients, and textures falls in line with minimalism’s primary goal of eliminating the unnecessary. In our sample, 96% of the minimalist sites were flat. The two tend to co-occur so frequently that the phrase ‘flat design’ is often (misleadingly) used interchangeably with ‘minimalist design.’ The trends are similar, but not the same. Flat design generally refers to the textures, icons, or graphics in an interface. Minimalist design applies to the larger or overarching content, feature, and layout strategies. An interface may be flat without being minimalist. Jeet.gs The Getting Started page for Jeet.gs grid system API features a completely flat interface, including ‘ghost buttons’ for copying code snippets. (Ghost buttons are empty buttons with a thin rectangular border and text.) Flat ghost buttons can have legibility problems, and they break away from the established convention of what a clickable button should be. (However in this case, the buttons highlight when the mouse passes over them, providing a dynamic signifier of clickability. Also, the buttons show a tiny 3D effect when clicked that adds a small sense of physicality. Thus, the interactive user experience adds depth to the flat interface elements.) As we’ve discussed in other articles, flat designs often fail to communicate to users which elements are selectable or clickable. We believe that a better approach is a compromise between flat and skeuomorphic—a mostly flat design, but with clickable elements that users can recognize easily. Considering that flat design is the design idea most likely to be used incorrectly and degrade the user experience, it’s unfortunate that it’s the most prevalent of the main characteristics of minimalist web design. Limited or Monochromatic Color Palette Used in 95% of sampled interfaces In most minimalist interfaces, color is used strategically to create visual interest or direct attention without adding any additional design elements or actual graphics. With less visual information vying for a user’s attention, color palettes are more noticeable and will be more influential in a site’s impact. Minimalist color palettes are a movement away from the clashing, loud colors of the web design popular in the 2000s. Subdued color schemes are intended to avoid upstaging the content—which, in the case of images, can still be brightly colored. Many minimalist designs are either monochromatic, or use only one bold color as an accent, and use it to—sparingly—highlight the most important elements of the site. These accented elements are usually clickable. When assessing the use of color in the sample websites, we looked at background colors, logos, navigational elements, iconography, and typography, but did not consider content images (like photographs) as part of the color palette. Almost half of the websites sampled (49%, 55 websites) used a monochromatic color palette. Almost as many websites used one or two accent colors in an otherwise monochromatic color palette (46%, 52 websites). Of those 55 monochromatic sites, 51 sites were grayscale-–they used exclusively white, black, and gray shades. Freres d'Encre The monochromatic homepage of Frêres d'Encre, a French tattoo studio, creates a dramatic aesthetic. Solo Solo, project management software, uses a monochromatic but not grayscale color palette. Kayak Travel metasearch engine Kayak uses orange to highlight its logo and the actionable Search button. The popularity of this particular characteristic is an improvement in the sense that it’s moving interfaces away from the loud, clashing color schemes that used to dominate the web. However, there are some considerations to keep in mind when applying a limited color palette: Make sure your color scheme uses enough contrast to be legible to people with limited vision or color blindness. Use accent colors intentionally and consistently to highlight very important information or primary actions. Restricted Features and Elements Used in 87% of sampled interfaces Designers who adopt a minimalist design strategy must consider each element in their interfaces and eliminate any that are not required to support the core functionality or message of the website. An ‘element’ in this context could be any individual unit of the interface: including but not limited to: menu items links images graphics lines captions textures (like gradients) colors fonts icons It’s difficult to assess whether an interface includes ‘unnecessary’ elements without directly asking the sites’ designers what they left out, and without knowing the target users and tasks. To make this characteristic measurable, we focused on assessing whether or not the interface contained graphic elements that did not serve any obvious purpose. In our sample, 87% of minimalist sites avoided gratuitous graphic elements. Alan Trotter's portfolio The portfolio of fiction writer Alan Trotter is severely minimalist. By default, the site doesn’t even reveal his full name: visitors must click the underlined text to get to more details. This strategy might achieve an ‘edgy’ aesthetic, but it’s a big gamble to hide the most important content. The more stuff there is in a user interface, the more stuff users need to process. A favorite mantra of minimalist designers is, “subtract it till it breaks,” which really means, “unless the absence of an element would be serious problem, get rid of it.” This is where designers can get distracted by the pursuit of a clean, modern, minimalist interface—and end up cutting out useful content. Adhering to a rigidly utilitarian approach can produce streamlined designs by eliminating distracting features and content. Just make sure you aren’t making your users’ primary tasks more difficult by removing or hiding content they need. It’s hard to understand a cluttered design or a system overflowing with extraneous features. But it’s even harder to understand a design that doesn’t provide sufficient scaffolding to explain its features or structure. Maximized Negative Space Used in 84% of sampled interfaces Removing or excluding elements from a web page necessarily leaves empty space. Negative space (also called white space) is the name given to the empty areas of an interface. Negative space has been called “practically synonymous with” and “the backbone of” minimalist interfaces. Many minimalist designers use it as a tool to try to direct users’ attention and allow them to digest content more easily. Considering these strong assertions of negative space as the defining characteristic of minimalism, it’s surprising that only 84% of the sample sites used substantial amounts of negative space in their designs. Thomas Buffet's portfolio The screenshot above shows the homepage of French designer Thomas Buffet as seen full-screen on a 15-inch MacBook Pro. Above the fold, the page is almost entirely negative space. In this case, the site is still able to answer the two primary questions people would ask upon arriving at this page: ‘who are you,’ and ‘what do you do’. But this approach will not work in all contexts. Appropriate use of negative space can help draw attention to important content. When deciding how to lay out negative space in your designs, be sure to consider the following questions. How will adding or removing negative space impact the communicated hierarchy of the page? How will the negative space impact what content is displayed at the top of the page? The page fold still matters: users will scroll if they have a reason to, but they pay more attention to the content at the top of the page. How will the negative space impact the interaction cost: will users need to work harder to get to the information that they need? How will the negative space need to change at varying resolutions? Dramatic Use of Typography Used in 75% of sampled interfaces Like color, bold or large typography becomes another tool for communicating meaning when there are few elements on the page. Effectively exploiting interesting typography can help compensate for having fewer elements like photos and graphics, and can make a minimalist design feel more visually engaging. Variations in font size, weight, and style become crucial in helping users understand the hierarchy and relative importance of text. Of the 112 sampled minimalist sites, 75% used typography to convey meaning or create visual interest. Alexander Engzell's portfolio The portfolio of art director Alexander Engzell uses bold typography on his tagline to create visual interest without adding extra graphic elements to the page. However, the text is an image file, which adds to page load time. Also, unlike the Buffet portfolio, this page doesn’t directly explain whose portfolio this is, or what this person does. Users have to click the INFO link in the upper right corner to access that information. Using images for text may allow you to use custom fonts, but it will add to page load time, will require extra considerations for scaling at different resolutions, and can cause accessibility issues. Using web fonts is a better solution, but bear in mind that web fonts can have detrimental performance effects as well. Remember, drawing attention to bold typography is only useful when that text communicates meaningful information. Beware of going overboard on the fancy typography: users can ignore overformatted text if it looks too much like advertising. There’s a delicate balance between meaningfully bold typography and distracting typography. A great designer will come down on the right side of this balance, but if your designers are less skilled in employing advanced typography it’s safer to err on the side of caution. Related Trends Some designers also include the following characteristics as minimalist. Based on our research however, these seem to be design trends that often co-occur with minimalism, but are not actually defining characteristics—they occurred in fewer than 75% of the sites that we analyzed. Large Background Images or Videos Used in 57% of sampled interfaces The presence of a large background image or background videos (enabled by HTML5) is one of the most debated characteristics of minimalist Web design. From a theoretical perspective, a large background image certainly seems contradictory to the core minimalist spirit of reducing non-critical elements. Despite this, large background images and videos are popular in minimalist designs—we found that 57% of our sample included them. Monte Re The homepage of Monte Ré, an Italian fruit producer, uses a full-width background-image carousel within an otherwise pure-white minimal site design that includes ghost buttons. While the text is technically distinguishable from the background images, it’s unpleasant to try to read and understand the copy while colorful images circulate behind it. Depending on the context and the designer’s priorities, an argument can be made for the ability of large background images/videos to create an impact on users’ perception of brand. When a background image is used for a carefully considered, strategic reason, sticking to minimalist-design strategies can help restrain other page elements from competing or clashing with the background. Additionally, some designers may hope that loud background images will keep otherwise minimalist designs from being too boring or stark. If you choose to use a background photo or video with your minimalist design, keep the following points in mind: Make sure the images or videos you choose serve a real purpose or help people understand the site—otherwise they’ll just distract your users from your actual content. Make sure the text is both legible and readable if you want people to understand it. Remember, legibility is the extent to which users can distinguish individual letters. Readability is how well they can process words, phrases, and scan the text. If you’re using a carousel or video, you need to test every possible background—every image or frame of the video, and at a variety of screen resolutions. Be aware of how big images and videos impact performance. Make sure you’re taking an adaptive approach so your mobile users aren’t waiting for a desktop-sized retina photograph to load over their network data connection. Don’t autoplay videos. Many users are frustrated by videos that play automatically without their consent, especially if those videos have audio. Avoid creating Harry-Potter-painting-style videos of people slowly moving around in the background. You don’t want to distract your users and creep them out. Grid Layouts Used in 43% of sampled interfaces In our sample, we found that 43% of the interfaces used grid layouts to organize content. While this percentage indicates it is a popular design pattern among minimalist designers, it seems that grid layouts are certainly not ubiquitous in their designs. When grid layouts are used in minimalist UI designs, it’s generally for two reasons: Grids are an effective method of organizing homogenous content on the page linearly without adding any visual elements; and Grids are particularly helpful when designing a responsive website—another trend that is separate from minimalism but often co-occurs with minimalism. Paprika The graphic design agency Paprika organizes its projects in a grid, but is not responsive. Sea Chant portfolio The minimalist portfolio of photography studio Sea Chant organizes photographs in a grid at desktop screen widths. Sea Chant portfolio At 400px wide, the Sea Chant portfolio is reduced to a single column of content and removes all hover effects. Circular Graphic Elements Used in 16% of sampled interfaces Some design experts have suggested that circular and rounded graphic elements could be a component of minimalism, but we found only 16% of our sample used them. They seem to be more of a fad. Gesture Theory The homepage of Gesture Theory uses multiple circular elements in its minimalist design. Hidden Global Navigation Used in 13% of sampled interfaces Many websites currently use severely reduced global navigation elements in their desktop presentations, such as the now infamous hamburger menu. This can sometimes be the result of an incomplete mobile-first design strategy that fails to consider the needs and extra screen space available to desktop users, but it can also result from overzealous minimalism. Hiding infrequently accessed items might make sense for your goals, but make sure you aren’t hiding tools or links that are critical to the tasks you want your users to perform. Be particularly cautious if your site has large amounts of content or categories. Visual Soldiers portfolio The desktop portfolio site of design agency Visual Soliders uses a hidden global navigation under a hamburger menu. Visual Soldiers portfolio These few menu items hidden in an overlay could have been made visible globally, but were probably hidden to achieve this ultra-minimalist effect. Commonly Occurring Characteristics of Minimalist Interfaces Our analysis of 112 websites revealed the following defining characteristics for a minimalist website: Flat rather than skeuomorphic patterns and textures Use of a limited or monochromatic color palette Strictly limited features and graphic elements Maximized negative space Dramatic use of typography to communicate hierarchy or create visual interest Some of these characteristics are used almost ubiquitously in minimalism, and some occur slightly less frequently in minimalist interfaces; however, all of the defining characteristics were present in at least 75% of the minimalist sites that we analyzed. In our research, we also identified several related trends that were present in less than 75% of the sampled sites. Large background images or videos Grid layout Circular graphic elements Hidden global navigation Conclusion 2000s interface design was predominantly cluttered and overwhelming. For years, we’ve been advising against this kind of “maximalism”. Feature bloat and gratuitous content is always bad for users. In theory, minimalism should move us away from maximalism, and result in streamlined content and more efficient user task flows. In practice however, we’ve seen minimalism mutate into a superficial visual trend as designers copy popular minimalist characteristics without seriously considering if they support their own site goals. Just as flat design is a reaction to skeuomorphism, minimalism is a reaction to maximalism. In both cases, we strongly advise a balanced approach. A minimalist design strategy can be a powerful tool, but only when it’s framed by the needs of your users—minimalism for minimalism’s sake alone doesn’t help users. (Minimalism is one of the design strategies discussed in the full-day course on Generating UX Redesigns From Broad Design Principles.) Share this article: Twitter | LinkedIn | Google+ | Email Learn More Research Reports Strategic Design for Frequently Asked Questions Full Day Training Courses Top Web UX Design Guidelines The Human Mind and Usability UX Basic Training Web Page UX Design: Optimizing Pages to Deliver on Business Goals Visual Design for Mobile and Tablet: Day 1 and Day 2 Articles The Fold Manifesto: Why the Page Fold Still Matters 10 Usability Heuristics for User Interface Design Banner Blindness: Old and New Findings Scaling User Interfaces: An Information-Processing Approach to Multi-Device Design Teenage Usability: Designing Teen-Targeted Websites How Iterative Testing Decreased Support Calls By 70% on Mozilla's Support Website by SUSAN FARRELL on August 2, 2015 Topics: Agile Prototyping User Testing Summary: User research with data mining and paper prototyping quickly led to measurable success for one of the busiest support websites in the world. One of the more frequent questions that we get asked by our clients or by our seminar attendees is: "Is a redesign for usability worth it?" In other words, what is the return-on-investment (ROI) of a redesign? In recent years, we've seen a decline of the ROI for usability, most likely due to approaching a ceiling of usability improvements: With more than 20 years of web-design experience under their belt, designers have learned a few things and fixed quite a few problems. But a redesign for usability can still save you a significant amount of money. In this article we tell the story of Mozilla's support site, which was able to get a 233% improvement out of a redesign for usability. (Here's an explanation of how the improvement score was computed.) Thus, we can say that the redesigned site was about 3 times better than the original site. The cost involved in this redesign was 14 person-weeks or 560 person-hours. Is it worth spending 14 weeks to become 3 times better? This depends on the hourly rate for your staff and the value of your site and thus cannot be answered in general. However, for Mozilla, which gets huge amounts of traffic, the improvement is certainly worth the trouble, as it would be for almost any big site or company that does substantial business online. So how did Mozilla do it? What was involved in this redesign? Who is Mozilla Mozilla is a large, open-source, worldwide, software organization staffed by both employees and volunteers. It makes one of the most popular web browsers (Firefox), along with other useful products and services. Pain Points Millions of people come to Mozilla's support website every year to get help with Firefox and other products and services. When users cannot get an answer from the information existent on the site, the Mozilla staff aims to help by answering each person's question in the user-support forum, and to respond to questions as quickly as possible. As Mozilla's website had grown organically, users were having difficulty finding information and the support staff couldn't keep up with the number of questions in the forums. Specifically: At about 400 pages or so, the help documentation had become a difficult place in which to locate particular information quickly. The forum staff (employees and volunteers) were having trouble responding to questions as quickly as they wanted to, because of the increasing number of incoming questions for the rapidly updating Firefox. The forum overload was also making it difficult for staff to find time to write new help articles for frequently asked questions. More articles could help, but the growing number of articles also caused more findability problems. Action Plan Mozilla decided to invest in discovery and iterative usability testing in order to improve the IA of its support site. The research questions aimed to understand (1) how people (users and staff) used the support system; (2) which types of information were really important. Top research questions Mobile Faceted Search with a Tray: New and Improved Design Pattern by KATHRYN WHITENTON on July 26, 2015 Topics: Mobile & Tablet Search Visual Design Summary: Displaying faceted-search controls on mobile devices in a ‘tray’ overlay is a new effective solution to the challenge of showing both results and filters on small screens. Recently, a few big brands have introduced a new method for displayed facet controls on mobile devices, by placing them in a ‘tray’ overlay on top of the actual results. This new design approach addresses a major shortcoming typical of many faceted search displays on mobile devices: the placement of facet controls on a separate screen, which forces users to work harder to understand how the facet controls affect the results set. But before understanding why this is the case, let’s go back to the basics of faceted search. What Makes Faceted Search Special? Faceted search lets users refine a set of results by applying filters that comprehensively describe the search space. Such narrowing is invaluable for users who need to find something specific within a large content set. This type of search has become common for ecommerce and travel websites, as well as many different types of document and media collections. A faceted system includes two critical elements: Simple controls to construct sophisticated searches: Providing familiar controls like drop-down menus and checkboxes with natural-language labels empowers ordinary users to narrow down a large set of results to a small set that meets their exact criteria—without any special knowledge of Boolean logic or query syntax. Simultaneous display of the facet controls and the results: Showing both the filters and the results at the same time makes it easier for users to understand the relationship between the two; ideally, this is reinforced by dynamically updating the results set as soon as the user selects a filter criteria. The simple filter controls are the most obvious component of a faceted system. However, the importance of simultaneous display should not be underestimated. Long before faceted search became popular, we had ‘advanced search’ screens with similar controls for creating complex search queries. The big difference introduced with the first faceted navigation system was in displaying the facet controls and the results at the same time, which makes the effects of each filter instantly visible. This innovation embodies 2 of the 10 usability heuristics: provide rapid system feedback, and offer users control and freedom. Challenges of Displaying Search Facets on Mobile Devices Faceted search was originally designed for desktop and laptop users. Translating this experience onto a mobile device is difficult, because the very thing that makes faceted search so helpful to users – being able to see the filters and the results at the same time – is difficult to achieve on a small screen. There simply isn't enough space to show a full set of facets and a decent number of detailed results simultaneously. Until recently, most mobile designers haven’t even tried to display facets and results at the same time, instead opting to place them on separate screens. But this solution forces users to navigate to the facet-control screen, make their selections, then navigate back to the results set to see the effects of their selections. The istockphoto.com mobile website illustrates the typical approach to providing faceted search to mobile users. The results page includes an icon that users can tap to open the facet controls (assuming they can figure out what the icon means). Once the facet controls are displayed, users can select different filtering criteria, but it’s not obvious how the results will be affected by the facet selection because: None of the results are shown on this screen. The number of files, displayed in the page header updates too slowly. The header showing the number of files may not even be visible once a user has scrolled down to expand and select the facets below. Due to these limitations, users have to return to the previous screen in order to find out whether their filter selections were effective at targeting the best results and whether they have narrowed the results set down to a manageable size— or if perhaps they've applied such restrictive criteria that no results match. Mobile search results and facet controls on iStockphoto.com Left: Like many mobile search designs, iStockphoto.com does not display faceted search controls on the actual search results page. Instead it requires users to navigate to the facet controls, in this case via a cryptic icon composed of lines and circles on the right edge of the Search bar. Right: The facet controls take up the entire screen, and in order to see the effects of their selections, users must navigate back to the results screen. New Solution: ‘Tray’ Overlay to Display Facet Controls Recently a new approach to providing faceted search for mobile users has appeared: showing the facet controls as a ‘push-out’ style tray on top of the search results. This design allows for continuous visibility of results: even while the facet controls are open, some information about the results is visible in the background. The Amazon iPhone application and eBay’s mobile website both now use an overlay to display facet controls on the same screen as the search results. Mobile Facet Tray Overlay Examples Amazon’s iPhone application (left) and eBay’s mobile website (right) both recently introduced an overlay to display search facet controls on the same screen as the search results. Design Pattern Elements Both the Amazon and eBay designs include several details that combine to create a good user experience: Once activated, facet controls appear in a vertical panel overlaid on top of the results screen. The results are always visible in the background, and can be seen to change as the user makes her facet selections. (However, in the case of eBay, users can hardly make out what the results are. Amazon’s design is better because users actually get useful information from the background.) The total number of results is always visible, even if the user has scrolled down a long list of facets. (Amazon accomplishes this by fixing the header at the top of the screen so that it remains visible even as the list of facets scrolls up or down). A translucent gray shadow slightly obscures the underlying results and ensures that the facet controls stand out. The facet panel appears at the right edge of the screen, leaving the left edge of the results visible. (This is helpful because the left edge is more likely to have meaningful content; with Amazon you can actually see the product images.) (You may also notice that both Amazon and eBay use actual words – Filter and Refine – as the commands to access facets, rather than a special symbol. Any of the labels commonly used for faceted navigation – narrow your results, refine, and filter – are far more understandable than cryptic icons, and definitely worth the extra space. ) Why Is Simultaneous Display of Results and Facet Controls Important? In usability testing, I am always amazed at how successful people are at immediately understanding and using faceted search screens, which tend to include many different elements and controls. As long as the controls are displayed properly, most people jump right in to creating and refining their queries. Instant results are an important part of the process because they allow users to see right away if they have applied the wrong filter, or applied overly narrow criteria that eliminates too many options. Both of those errors are very easy to recover from if you can instantly see the effects of your actions, but without this visibility users can end up in a tedious cycle of pogo-sticking between the results and the filters. The facet ‘tray’ approach illustrated by Amazon and Ebay doesn’t provide complete visibility, since only a small part of the results screen is visible. But these creative solutions offer at least some visibility into the effects of applying a filter. Users may still find that they need to close and re-open the facet controls, but this approach feels more like expanding a part of the current page, rather than jumping back and forth between different pages. Find out more about the best approaches for visual displays on smaller screens in our full-day courses about Indicators, Validations, and Notifications: Pick the Correct Communication Option by KIM FLAHERTY on July 26, 2015 Topics: Applications Standards Summary: Status feedback is crucial to the success of any system. Knowing when to use 3 common communication methods is key to supporting users. In interaction design, a system, whether an application, website, or piece of hardware (anything from a smartwatch to a thermostat), should always keep users informed, by providing appropriate feedback. Ensuring that the state of the system is always visible is one of the 10 usability heuristics for interface design. Information about system status, such as error messages and notifications of system activity, allows users to fully understand the current context. The best way to communicate system status varies depending on several key factors: The type of information being communicated The urgency of the information — how important it is that the user sees it immediately Whether the user needs to take action as a result of the information Three common approaches for status communication include validation, notifications, and status indicators. These terms are used sometimes interchangeably in product design, but they stand for different communication methods that should be used in different circumstances. Understanding the differences between them will help you sharpen your feedback to users by choosing the best option for each need. Indicators An indicator is a way of making a page element (be it content or part of the user interface) stand out to inform the user that there is something special about it that warrants the user’s attention. Often, the indicator will denote that there has been some change to the item represented by that element. Although, as we’ll see later, indicators are used quite frequently to signal validation errors or notifications, they can also be used on their own. Indicators are visual cues intended to attract users’ attention to a particular piece of content or UI element that is dynamic in nature. (If something always looks the same, it’s not an indicator, no matter how flamboyantly it’s designed.) There are at least three possible ways of implementing indicators: Oftentimes, but not always, indicators are implemented as icons. Easily recognizable icons can make very effective communication tools. Typographical variations can also be used as indicators; examples include the common convention of boldfacing unread email messages or color-coding stock symbols in an investment account if their price has changed substantially. Though less common, enlarged size or animation (e.g., vibration) can also be used to make certain items stand out from the crowd and thus serve as an indicator. Yelp used a green-tag indicator in the search results to indicate that Tea Market had a special deal running. This indicator communicated additional information about Tea Market. Characteristics of indicators: Indicators are contextual. They are associated with a UI element or with a piece of content, and should be shown in close proximity to that element. Indicators are conditional— they are not always present, but appear or change depending on certain conditions. For example, a stock-performance indicator, such as the one in the American Century example below, may change to indicate if the stock price is increasing or decreasing. Additionally, the tag indicator in the Yelp example above only appears if there is a deal at that business. Indicators are passive. They do not require that a user take action, but are used as a communication tool to cue the user to something of note. American Century Investments used a conditional indicator to provide information regarding a specific stock’s performance. When the daily change was negative, the indicator was a red arrow pointing down. When the daily change was positive, it showed a green arrow pointing up. The condition of the stock performance impacted the indicator that was shown next to the price. Indicators can introduce noise and clutter to your overall interface, and may distract users, so it is important to consider how many (if any) indicators to use in your design. Consider the following when deciding if an indicator is appropriate: How important is the information to the user? Is it worth taking up space on the page to inform the user? How often is the information used? Would the user expect to see the information? Would it be missed if it weren’t provided? How important is it for the application that the user discovers the information? Validations Validation messages are error messages related to users’ inputs: they communicate whether the data just entered was incomplete or incorrect. For example, in e-commerce systems, validation messages often involve information such as name, billing address, and credit-card information. Cobragolf.com provided a validation message that clearly indicated which field was in error. The message however was complex and confusing. A better message might say “Please enter a valid email address.” Characteristics of validation: A user needs to take action to clear the validation message. The information in the validation message is contextual and applies to a specific user input that has a problem. The way in which validation should be implemented varies based on the unique needs of the form. However, in general, if the user’s input is incorrect, the system should inform the user by providing an identifiable and clear message that aids in correcting the error. Validation messages should follow the guidelines for error messages rather than simply identifying the problem, they should tell users how to fix it. For instance, don’t state “Field is blank.” Please enter your street address” is more polite and directs to a solution. Since validation is contextual, it can be helpful to use an icon indicator along with the validation message to help communicate which input(s) are missing or need corrected. Bestbuy.com provided a helpful validation message telling users how to fix the problem and also used an icon indicator and a different color to attract users’ attention to the field that needed correction. Notifications Notifications are informational messages that alert the user of general occurrences within a system. Unlike validation, notifications may not be directly tied to user input or even to the user’s current activity in the system, but they usually inform the user of a change in the system state or of an event that may be of interest. In the case of email, social networks, and mobile-phone applications, notifications can even be delivered while a user is away from the application. Notifications can be contextual —applying to a specific UI element— or global —applying to the system as a whole. The Facebook App used a contextual notification in the news feed to communicate that newer stories had been added to the feed. This notification does not require the user to take action. Characteristics of notifications: They are not triggered by users’ immediate actions. They announce an event that has some significance to the user. There are two main types of notifications, which differ based on whether the user is required to act upon the notification: Action-required notifications alert the user of an event that requires a user action. In this sense, they are similar to validation, but since they were not sparked by the user’s own action, they require a different design. Action-required notifications are often urgent and should be intrusive; for instance, they could be implemented as modal popups that interrupt the user, forcing immediate attention and requiring an action to be dismissed. The Mac operating system used a notification to inform users of available system updates. The user had to explicitly dismiss it from the screen, by opting to either install the update or to be reminded again at a later time. This is an intrusive notification that requires that the user take action. Passive notifications are informational; they report a system occurrence that does not require any user action. Many notifications in mobile apps are passive: they usually announce an event of potential interest to the user. Passive notifications are typically not urgent and should be less intrusive. A typical implementation of a passive notification may be a badge icon or a small nonmodal popover in a corner of a screen. Passive notifications can easily be missed, since they require no user action. When the information provided by the notification is key to the understanding of the system, an easy-to-ignore passive notification can be problematic. Adobe Creative Cloud used a nonintrusive passive notification to inform the user of an available application update. This notification appeared on screen for several seconds before disappearing. The user did not need to take any action on it. Uniqlo.com used a nonintrusive passive notification to provide feedback that an item was added to the shopping cart. No action was necessary to dismiss the notification. Such notifications sometimes cause issues for e-commerce shoppers who do not notice the brief messaging. Users who miss the message may respond by adding an item to the cart multiple times, or by disrupting their shopping flow to check the cart to see what items were added. Notifications have the design challenge that they are not the immediate and obvious result of a specific user action. On the contrary, the user is likely in the middle of doing something different and may not be thinking about the issue raised by the notification. This requires notifications to establish more context and provide users with sufficient background information to understand what the notification is about. (In contrast, with a validation, the user has just done the thing that needs to be corrected. Thus, the validation message doesn’t need to educate users about the task at hand. For example, if an e-commerce checkout form has a field for a credit-card expiration date that was left blank, the validation message doesn’t need to say “Please provide the expiration date for the credit card you want to have charged $29.90 to pay for the blue sleeveless dress you are in the process of buying on Uniqlo.com.” However, a notification the following day that the dress has been shipped from the warehouse would need to say more than “Your package has shipped.”) If a notification is contextual and relates to a specific element in the interface, an icon indicator on the element can communicate where that notification applies and catch the user’s attention. For instance, an indicator badge on a mobile-app icon shows that the user has received a notification from the corresponding app. The iPhone messaging app created a notification to communicate that a new message was received. Along with the notification, an indicator badge was placed on the messaging-app icon to communicate where the notification applied. To clear the indicator, the user had to view the message. Mint.com used an indicator together with a notification to communicate that an account needed attention. The warning indicator (1) appeared in close proximity to the summary of the account that needed attention, while the notification (2) appeared in the central area of the page with other important information. The actual text in the notification message could have been more helpful, though. Picking the Right Communication Option Is Important Using the wrong communication method can have a negative impact on the users’ experience. Let’s refer back to the scenario above where Yelp utilized a green-tag indicator in the search results to indicate that Tea Market had a special deal running. This information is contextual and important to users who have specifically searched for a place to have tea. You may think that an alternative way of alerting users of potential tea deals would be to send them a notification when such a deal has become available. Wrong! A notification sent irrespective of the current user goal would likely be ignored, and may even annoy users because it will disrupt their current task and be irrelevant to their current needs. (In general, any type of ad tends to be ignored unless it is related to the users’ aims and mindset.) Alternatively, a toast (a small nonmodal popup that disappears after a few seconds, like the New Stories one used by the Facebook app), while appropriate for passive notifications, would be a bad way to implement an error message, be it validation or otherwise. In fact, one of our mobile users spent 5 minutes waiting for some content to load only because she hadn’t notice the little error message presented at the bottom of the screen that quickly faded away after 5 seconds. Allmodern.com used an action-required notification to communicate that a product was saved as a favorite. For a user that is saving a lot of items to their favorites, this can be a bothersome and intrusive way of providing feedback. This may be better communicated by showing a passive nonmodal popover in the corner of the screen that can be seen, but doesn’t require the user to take action to clear it. Conclusion Remember the key differences between the three communication methods are: Indicators provide supplementary information about a dynamic piece of content or UI element. They are conditional —that is, they may appear or change under specific conditions. Validations are tied to a user’s action or input. Notifications are focused on system-related events. These differences are summarized in the table below: Validation Notifications Indicators Global vs. contextual: Related to a global system event or to a particular page element Contextual Global or contextual Contextual Passive vs. requiring a user action Action required Action required or passive Passive Triggered by user action vs. system event User action System event User action or system event Understanding when and how to use each of these feedback tools is important in order to build consistency in the communication to users. By assessing the type of information delivered, we can determine the correct mechanism to use. How do users and staff interact with the support system? Which problems are the most important to address in the website redesign? What is the most-wanted information? Which words do people use when they search? Which desired information seems to be missing? How can the information best be organized and presented in order to match what users most want to do on the website? The UX Team The UX team consisted of 3 members: Susan Farrell, Senior User Experience Specialist, Nielsen Norman Group. Susan conducted the research, did data discovery, analyzed data, and made design-change recommendations. Crystal Beasley, Product Designer, Mozilla. Crystal led the project, coordinated with Mozilla stakeholders, and played the computer during paper-prototype research sessions. Bram Pitoyo, Web User Experience Designer, Mozilla. Bram designed the task flows and prototypes and supervised the interaction-design changes to the website. He also tested the old IA so we could compare results with the tests of the proposed new IA. The Steps We employed a variety of research methods intended to help us understand users' needs and also to redesign the IA and the workflow on the support site: Doing data discovery and analysis, to understand how users behave on the support site and why In particular, we looked at a variety of data sources to identify users' top tasks, as well as difficulties that they had with the current site. The table below summarizes the methods that we used. Headings Are Pick-Up Lines: 5 Tips for Writing Headlines That Convert by HOA LORANGER on August 9, 2015 Topics: Writing for the Web Summary: Attractive headlines and titles are critical in making the right first impression. Concise titles that sound authentic and relevant get noticed. A headline is often the first piece of content people read. And often it is the ONLY thing people read. If you want your encounters with people to be successful, make sure to write solid headlines. Have you ever tried to retell a story you read only to realize the details are fuzzy because you had only read the headline? This is a sign of a memorable headline. Good headlines entice readers and are critical to the success of your website. Below are 5 tips for writing engaging headlines: 1. Make sure the headline works out of context. We often think of headlines as being connected with the associated story. However, on the web, headlines usually appear out of context in places such as search results, social-media streams, blog posts, and news feeds. Headlines must be strong and descriptive, especially when standing alone, stripped of supporting content. Can you guess what the heading below refers to? New times call for new decisions The headline contains low information scent—that is, few cues to suggest what the story is about. People rely on visual and textual cues to perceive the usefulness of the content. They don’t spend time making inferences and trying to figure out items that don’t make immediate sense. Minimize cognitive load to maximize usability. Treat headlines like microcontent—phrases that can be scanned and still give readers a clear idea of the underlying information. 2. Tell readers something useful. Consider the decision-making process from the users' point of view. When faced with a barrage of links, their time is best spent clicking on headings that have the highest probability of providing value. Useful headings are specific. They provide facts or information that pique the readers’ interest. Avoid broad and generic headings. They don’t provide value or differentiate you from your competitors. Tell people something they don’t know and that benefits them. Headings that contain user-centric language are much more refreshing than vague ones that require guesswork. This headline is too broad: Make better, faster decisions with data visualization Contrast it with: Data visualization helps you detect and prevent fraud faster The second one is better because it is more specific and provides a concrete benefit that might arouse the reader’s curiosity. 3. Don’t succumb to cute or faddish vocabulary. Minimize hype and idioms (expressions). They are often vague, obscure meaning, and often change the tone of copy, usually for the worse. Consider this headline: Get the most bang for your buck with XYZ The headline above sounds pretty tacky and inauthentic, and degrades credibility. In addition, idioms such as “bang for your buck” often lack meaning to nonnative English speakers. Don’t be tempted to include overly informal language to sound modern and hip. It is much better to aim for clarity and authenticity. Keep your headlines straightforward by using familiar keywords. This is better: Increase productivity by 24% with XYZ Of course, there are exceptions to this rule. You can use specialized language when you address a specialized audience; in those cases jargon improves communication. However, before you sprinkle jargon all over your copy, verify that your entire audience truly understands it. 4. Omit nonessential words. The one place worth practicing being concise is in headlines. Spend time editing headlines to cut unnecessary words and tangled messages. Shorter headlines require less cognitive effort. And longwinded headlines don’t scale well to variable container sizes: they have a higher chance of being truncated when displayed on small mobile screens, for instance. Convoluted headlines like this lose readers: Caster, a technology company, buys Mitchell, with assistance from Jon & Smith, for $1.2B There are too many details that obscure the gist of the heading. The sentence also contains three commas, which create a jerky, start–and–stop effect. The headline can be made smoother by removing less important details, as in the versions below: Caster buys Mitchell for $1.2 billion –or– Jon & Smith orchestrates $1.2 billion deal for top technology firms 5. Front-load headings with strong keywords. One of the best ways to get traffic to your site is to front-load your headlines with keywords. Moving keywords to the front of titles increases the likelihood that they get noticed. Our eyetracking studies show that readers pay most attention to the first few words in lists. Don’t count on people reading the end of sentences. Let’s compare the following headlines: (1) Behold the new technologies for creating 3-D imagery and (2) Creating 3-D imagery gets easier with new technologies The first one runs the risk of not being read because the key phrase (creating 3-D imagery) is positioned at the end. Users must read the entire headline to understand its meaning. The second one is better. Moving the keywords to the front makes the heading more scannable. People can read only the first few words and still understand what the article is about. Conclusion Make a good first impression with short, keyword-leading headings that sound authentic, contain useful information, and make sense out of context. Try to follow all of these tips in one headline and you should notice a lift in user engagement. vThe Freelance Studio Denver, Co. User Experience Agency The Roots of Minimalism in Web Design by KATE MEYER on June 28, 2015 Topics: Human Computer Interaction Visual Design Web Usability Summary: Many of today’s most popular design trends are influenced by minimalism. This web design movement began in the early 2000s, but borrows its philosophy from earlier movements in the fields of fine art and human–computer interaction. Many of today’s most popular design trends (including flat design, large background images, and hidden global navigation) are directly or indirectly influenced by minimalism, a web-design movement that began in the early 2000’s, but borrows its philosophy from earlier movements in the fields of fine art and human–computer interaction. Minimalism sometimes presents as an attempt to prioritize content over the chrome and, when applied correctly, it can help you focus your design to simplify user tasks. Unfortunately, some designers misinterpret minimalism as a purely visual-design strategy. They cut or hide important elements in pursuit of a minimalist design for its own sake—not for the benefits that strategy might have for users. They’re missing the core philosophy and the historical context of minimalism, and they risk increasing complexity rather than reducing it. To better grasp and apply minimalist principles, we need to understand the origins of minimalism and its fundamental characteristics. We explore these topics in a series of two articles: In this first article we define minimalism and look at its history; in a second article we analyze in depth the characteristics of minimalist design and their impact on usability. What Is a Minimalist Interface? When employed correctly, the goal of minimalist web design should be to present content and features in a simple, direct way by providing as little distraction from the core content as possible. This strategy often involves removing content or features that don’t support the primary goals of the interface or its users. Although there is some debate about what exactly qualifies as minimalist web design, there are a few common features that most designers can agree upon. These include flat textures, limited color palettes, and the use of negative space. These and other specific characteristics and their frequency of use in minimalist websites are discussed in detail in the next article in this series. Minimalism is a reaction to bloated, or “maximalist,” UI design. Examples of such maximalist design include Flash intros and gratuitous animations, or applications crammed with as many esoteric features as possible (like Microsoft Office before the 2007 rethink). Brian Danaher's portfolio The portfolio of designer Brian Danaher is a typical example of what many designers would call a minimalist site. When viewed full screen on a 15-inch MacBook Pro, the homepage is almost entirely white space. The site uses a grayscale color palette with a single bold accent color to draw attention to clickable elements—a popular strategy among minimalist designers. Brian Danaher's portfolio Danaher’s site includes very few distractions from its primary content. Minimalism is well suited to portfolio sites like this one, which have fairly simple goals, relatively low amounts of content, and very similar information on most pages. Applying minimalism effectively to more complex sites can be much more difficult. Minimalism’s Rise to Popularity 1960s Decades before minimalism was a trend in web design, it was a visual art movement in the era following World War II. It emerged as a reaction to the chaotic colors, motion, and marked subjectivity often found in abstract expressionists works (such as the drip paintings of Jackson Pollock). It was heavily influenced by the famous German art movement Bauhaus, which focused on simple yet functional design. In the 1960s, minimalism became popular in a variety of fields, particularly fine art and architecture. In visual art, minimalism was characterized by monochromatic palettes, geometric elements, serial arrangements, and industrial materials. Jackson Pollock's Full Fathom Five Jackson Pollock’s Full Fathom Five (1947) in The Museum of Modern Art. Minimalists of note include graphic designer Josef Müller-Brockmann, painter Ellsworth Kelly, and industrial designer Dieter Rams. Note the clean lines, simplicity, and sparing use of color in each of these examples. Despite the wide variety of mediums, a coherent design style is perceptible. Ellsworth Kelly's Brooklyn Bridge VII Ellsworth Kelly’s Brooklyn Bridge VII (1962) in The Museum of Modern Art. Radio by Dieter Rams RT 20 tischsuper radio, 1961, by Dieter Rams for Braun. Unmodified CC image courtesy of Vitsoe. S.R. Crown Hall S.R. Crown Hall, designed by Ludwig Mies van der Rohe, 1956. Unmodified CC image courtesy of Peter Alfred Hess. The perspective behind minimalist art was neatly summarized by the motto of famous 20th century architect Ludwig Mies van der Rohe: “Less is more”. This motto would later become the spirit and unofficial mantra of minimalism in web design: fewer elements on a page results in lower cognitive load for users. 1980-2000 At the end of the twentieth century, minimalism began to take shape as a separate trend within the field of human–computer interaction. In 1983, data-visualization expert Edward Tufte introduced the concept of a data–ink ratio in his work, The Visual Display of Quantitative Information. In print media, the data–ink ratio is the ratio between (1) the amount of ink that communicates information, and (2) all the ink used to print the graphic. Tufte advocated maximizing this data–ink ratio by removing any elements that do not reasonably contribute new information. Data–Ink Ratio = Informative Ink / Total Ink This concept of data–ink ratio can be applied to web interfaces by considering the content–element ratio for any interface. The goal is similar: a high proportion of the amount of meaningful elements relative to all elements in the interface. In 1990, HCI researcher John M. Carroll was studying the ways people used technical training manuals, and looking for ways to improve them. From his research, he developed the theory of minimalism in technical communication. Carroll’s theory suggests that a successful design will support quick action by prioritizing brevity. Carroll stressed that reducing a design to its most basic elements is not the end goal of minimalism. Rather, Carroll championed brevity and simplicity in the service of task-oriented results. To position this approach towards web design, Carroll’s minimalism translates to getting the interface out of the way, in order to allow users to achieve their goals. In 1995, Jakob Nielsen included minimalist design in his 10 usability heuristics. His use of the term aligned with Tufte’s and Carroll’s sense of minimalism, as he advocated eliminating irrelevant information from interfaces. 2000s Beginning in the mid 2000s, echoes of the minimalist art movement began to appear in web interfaces: larger swaths of negative space, lower amounts of content, and restricted color palettes. Google is often credited as the pioneer of minimalist web interfaces. Google has prioritized simplicity and austerity in its interfaces ever since its beta offering in the 1990s. Google, 1999 Google’s homepage (1999, via Wayback Machine) Even though Google now offers a huge variety of products from Google Drive to YouTube to Gmail to Google Maps, its homepage has changed very little over 15 years. Only three navigation options are visible: in order to access the rest of Google’s offerings, users must use the grid icon to expose a tray of more options. Google, 2015 Google’s homepage (2015) In spite of early trendsetters like Google, it took time for minimalism to catch on in web design. In the early 2000s, crowded interfaces dominated the web. During our impression testing sessions at that time, users overwhelmingly described the interfaces as ‘busy’. Slowly but surely, minimalism found a foothold with early adopters: the web designers, graphic designers, artists, photographers, architects, and developers. Designer and blogger Emily Chang wrote about the rise of minimalism in 2006: Perhaps it’s the success of Google’s search page, or our collective reaction against the flashing banner ads and intrusive popups of the last decade, or the Jonathan Ives effect, but it’s as though web users, designers, and developers alike have all agreed to a new de facto standard of Mies van der Rohe’s ‘less is more.’ Chang’s assertion that all web users and professionals embraced minimalism was definitely not accurate in 2006, and may still be an exaggeration today. However, it is reasonable to assume she did speak for the emerging popularity of minimalism among people who are deeply immersed in the cutting-edge trends of the web. 2010-2013 The emergence of responsive web design (RWD) in 2010 primed the wider web to appreciate a minimalist approach. To effectively utilize RWD techniques, organizations must carefully prioritize their content—distractions from primary content that could be ignored on desktop become big problems on mobile. Slowly user and designer preferences began to lean towards greater simplicity in web interfaces. This shift was underscored by major redesigns carried out by two tech industry giants: Microsoft’s Modern design in 2011, and Apple’s release of iOS7 in 2013. Microsoft’s release of Windows 8 in 2011 was the first major redesign of its operating system in decades. At the same time, it announced its design philosophy, “modern design”. This new design philosophy was quintessentially minimalist, drawing directly from the minimalist art movement. Microsoft’s official design documentation even claims that the Bauhaus school is one of its fundamental design pillars. Windows 8 Windows 8 ‘tile’ view Though Apple has worked hard to define its brand in simplicity, Apple designers have historically—and controversially—favored skeuomorphic patterns in their interfaces. In 2013, Apple radically revamped iOS to a much flatter and more minimal style with iOS7. Apple’s decision to move toward a more minimal and flat design particularly underscores the popularity of the trend, given that it fundamentally contradicts the brand’s historic design style. iOS7 Apple’s iOS7 2014-2015 Minimalist design principles are now showing up in new and unexpected places: e-commerce sites, online publications, and even educational sites are adopting minimalist trends and strategies. Many one-stop website-design and hosting services like Squarespace, Weebly, Wix, and Volusion now provide stock site templates that are almost entirely minimalist designs. These offerings are particularly significant because they often target people with no development or design experience—people who want to set up their online bike store or bakery website or online wedding invitation without having to touch Illustrator or a line of HTML. These services are selling minimalist websites because they believe it’s what their customers want. Squarespace's Galapagos theme Squarespace’s ‘Galapagos’ theme Today, minimalism has branched into and overlaps with other prominent web-design trends such as flat design, responsive web design, and clean design. Minimalism’s contributions to these trends will be discussed in detail in next week’s article. The Usability Debate: Is Minimalism Good for Users? Minimalism is a design strategy that significantly influences content and information-architecture decisions. As a result, minimalism has a definite impact on the usability of the interfaces that adopt it. Unsurprisingly, the usability of minimalist-design styles has become the subject of debate amongst web professionals. Proponents argue that minimalism reduces information overload: the more features and content you can cut out, the less people have to deal with. Minimalism done well can also create a positive emotional experience for users. People do tend to respond better to aesthetically-pleasing interfaces. As Don Norman points out, when using such interfaces they are more tolerant of usability obstacles, as long as those flaws are minor. Since Nielsen Norman Group was founded in 1998, we have been forceful critics of maximalist (i.e., bloated) web design. You might expect us to be enthusiastic supporters of minimalist web design, but that’s not the case. When designers adhere too rigidly to a minimalist ideology, they risk ending up with wastefully low information density and poor findability and discoverability. Extreme minimalism can be useful as an internal design exercise, but should never be a final product. Minimalism in moderation can create efficient user experiences, as long as you don’t lose sight of the primary goal—helping users accomplish tasks. Tips for a Successful Minimalist Interface Make sure you seriously consider whether a minimalist design strategy is right for your site, your brand, and your content. If you’re sure a minimalist design is right for you, take some lessons from the roots of minimalism. Adopt Ludwig Mies van der Rohe’s motto, “Less is more,” in your designs. Don’t add elements just for their own sake. This rule can be true for content, visual design, and feature decisions. Consider reducing any elements that don’t contribute meaningful information (think about your content–element ratio.) Learn from Carroll’s minimalism: don’t just cut out features and elements—really think about your users’ needs and try to make tasks as brief and simple as possible. Know that a minimalist visual design alone, without meaningful consideration of user tasks, will not result in a successful interface. The usability issues of Windows 8 provide an excellent cautionary tale. (Minimalism is one of the design strategies discussed in the full-day course on Generating UX Redesigns From Broad Design Principles.) For an in-depth discussion of the characteristics of minimalism, read the next article in this series.Great Summaries on ‘About Us’ Pages Engage Users and Build Trust by HOA LORANGER on June 21, 2015 Topics: Corporate Websites Writing for the Web Summary: Tell your story on top-level pages in ‘About Us.’ People who trust you are much more open to engaging with your organization and website. Even large organizations exist only as words and images within a browser window. How can you make people trust you more than they would trust an equally good-looking set of pixels on another site? Be a good storyteller. The One Thing You Should Do Based on several studies, we’ve generated numerous guidelines on how to present company information on corporate websites and in the About Us sections to increase trust and transparency. However, in this article, I focus on one major guideline to increase perceptions of transparency and improve your relationship with users. If you can do only one thing, what should it be? The answer: Provide key information on major About Us pages. In usability studies, we observe people peeking at top-level pages for answers to foundational questions. Make sure that your site passes the first impressions test by answering top questions succinctly. People are more inclined to engage further once they’ve determined you’re worth the effort. Start telling your story the moment people land on your site. At a minimum, write brief summaries emphasizing a few impressive facts. As people click through the main pages they should gain a fuller understanding of who you are, what you do, and why you exist. Ask yourself, “If users only skim the top pages in About Us, are they getting a coherent story?” In many cases, what new users need most are great highlights written in a scannable format. Summaries are appealing because they provide context and reduce the amount of effort required to click through layers of content. Forcing people to work hard (even if it’s to click on a link to one level down) to receive an introduction is bad manners and reflects poorly on your organization. Examples of Dos and Don’ts Below are examples of what you should practice and what you should avoid. DO AbbVie: This About Us page provides a nice company overview, including Fast Facts to give site visitors a reasonable company snapshot. While this page holds promise, the content could be improved by replacing the marketing jargon with concrete facts that people care about. Steer clear of hollow phrases like “revolutionary” — at best, they tend to confuse users; at worst, they make them mistrust the site. DON’T Abbott: This About page has very low content density and forces users to drill deeper before they can learn about the company. This page acts as a wall that deters people from wanting to go further. Better to start the conversation by providing the highlights on this page. People who research organizations are sensitive to credibility factors. They are looking for clues to determine whether or not to like you. Answering the questions at the right time feels conversational and can be persuasive in garnering trust. People who trust you are much more open to engage with you. DO Chipotle: This summary tells a compelling story of who the company is and how they differ from other fast-food chains. The writing style is clear and hype-free, making the organization sound friendly and credible. DON'T CSC: Can you guess from page that this company offers cloud-computing services? This About page feels unfriendly without an introduction. The sheer number of links puts the onus on the users to determine which door to open. When the tagline could equally well describe thousands of other companies, you know you’re in trouble. The manner in which information is communicated on websites influences people’s perception of your organization. Users perceive sites that answer their questions quickly as being transparent and efficient. Conversely, users regard sites that bury critical information underneath complex layers as being evasive or ineffective. If your site visitors are potential donors, journalists, or clients, leaving such a negaive impression is detrimental to your business and brand. DO GSK: This overview answers the questions and is formatted well for ease of reading. The page contains facts for each business featured (e.g., pharmaceuticals, vaccines). Nice overviews like these minimize the effort required of users to learn about you. DON’T TevaPharm: The summaries on this Company Profile page are generic and don’t give clarity on how they’re unique. You might find specifics underneath Discover more, but why make users jump such hurdles? Halo Effect impacts how people gauge websites, even if the assessment is flawed. People tend to make hasty judgments about organizations based on limited information. If users have a good first impression, the positive feelings permeate to other parts of the site. If users have a bad first impression, the negative feelings extend to the rest of the site. DO Citrix: The images on this Executives overview page literally show the faces behind the organization. At a glance people get an impression of the company culture and the people running the business. Citrix is clearly benefiting from having a recognized UX expert on its executive team. (To nitpick this otherwise good example, reduce the leading slightly between names and job titles, to more closely associate these two pieces of information. Currently, the line reading “Chief Executive Officer” is closer to David Friedman’s photo than to Mark Templeton’s name.) DON'T Defenders of Wildlife: This executive overview feels unfriendly without photos of the members. Featuring photos on this page would tell a better story of who Defenders of Wildlife is. Conclusion Credibility is a major issue on the Web. Site visitors who visit the About Us section are seeking critical information to determine whether or not to engage with you. Explaining who you are matters. Tell your story and tell it succinctly. Featuring key highlights at the top-level keeps users focused on the conversation and not on wrangling the content or navigation. Well-written summaries illuminate your unique qualities and earn trust. (The full set of 70 design guidelines for "About Us" information is available in the 253-page research report, Presenting Company Information on Corporate Websites and in About Us Sections.) Ad Placement for Mobile by AURORA BEDFORD on July 5, 2015 Topics: Advertising Mobile & Tablet Web Usability Summary: Extra care is required when designing mobile page layouts that include advertisements, due to the limited screen real estate available. Ads must be displayed where they will not create false floors nor block users from reaching relevant content. Ads: that necessary evil we encounter every day, and to which we all believe ourselves to be immune. Whether a user ignores an ad completely or becomes annoyed with its presence is strongly related to the ad's size and placement on the page. On mobile phones, screen real estate is already at such a high premium that the position of the ad has an even greater impact on the overall user experience than on desktops. There are two main ad-related usability problems: (1) ads can be too disruptive to the user, and (2) they can create false floors that inaccurately signal the end of content and cause users to miss helpful information. Large Ads Limit Viewable Content Not surprisingly, the larger an advertisement, the more disruptive it is. On a small device, a vertically large ad consumes far too much valuable space, displacing the main content. To add insult to injury, sometimes two ads get stacked at the very top of mobile pages—as sites feel compelled to advertise their mobile apps. As a result, less page content is visible upon page load, which goes against one of the principles of mobile usability: prioritize content. In the example from FineGardening.com below, only the article title and brief summary can be seen without scrolling thanks to an overly large site header and the double ad placement at the top of the page. Screenshot from Finegardening.com on mobile showing multiple ads Finegardening.com: Very little article content can be seen upon page load because the app ad, banner ad, and large site header consume the majority of the screen real estate. Unlike multiple ad elements at the top of the page pushing down the relevant content, an ad at the bottom of the screen in a sticky container is less intrusive to users. This recommendation may seem counterintuitive because the ad would now remain visible on the screen at all times, but in past studies we have found this treatment to be best tolerated by users, which is good because it shows the ad is not getting in the way. Keep in mind that users tend to begin scanning from the top of the page, and resent having to scroll past a lot of chrome to get to the information they actually want to read. Thus, we need to not only consider the overall content-to-chrome ratio, but also ensure that helpful information is prioritized nearer to the top of page in order to grab people's interest and supply them with the information related to their task as soon as possible. An additional benefit to the sticky-container treatment is that the ad is still readily available to users once they finish their task. While the user is focused on completing an activity or researching a topic, ads will be ignored because they aren't part of the goal. Assuming the advertisement is actually relevant to the user, having it available once the main task is completed increases the likelihood that the user would pay attention to the ad and possibly interact with it. (An ad is relevant when it matches the user's current goal: it is more powerful to display an ad for something the user immediately wants rather than something that just matches their general profile.) Screenshots of ad treatment on the Washington Post mobile site The Washington Post mobile site displays an ad in a container fixed at the bottom of the screen (left). The ad is appropriately synced with the current scroll position of the page, and completely collapses when the user reaches a display ad embedded within the page content (right). Avoid Creating False Floors Another main downfall of many mobile ad placements is their tendency to create the “illusion of completeness,” or a false floor, on a page. An advertisement can easily signal to users that they have reached the end of the page's relevant content. This effect is exacerbated when the ad is large enough so it is difficult to see any continuation of content below, and when the ad is placed at a point low enough within the content where it seems reasonable that no more information is available on that page. Pages on WebMD's mobile site, for example, place ads following several paragraphs of text, below links to additional resources on the current topic. Horizontal lines in the design and the presence of copyright information (which is commonly associated with footer content) further cue the user that this is the end of page, when this is actually not true: the page continues far below the ad, displaying more information and additional links to related resources. Screenshots of WebMD.com mobile site article page containing several ads The ad placements on the WebMD mobile site create false floors because they appear in places that could reasonably be the end of relevant content, and are large enough that they hinder the user’s ability to see content continuing down the page. (The black dashed line shows where the fold occurs on an iPhone 6 Plus, and the red dashed lines represent areas where the ad is likely to stop a user from continuing to scroll.) If possible, only display ads at the real end of content rather than between paragraphs of text. Said one user during a recent usability study, “I don't like advertisements in between. It's distracting and gives me the impression that it's the end of the article.” Of course, we often don't have the luxury of neglecting business goals, and so if several ads need to be included on a page, putting them closer to the start of the content—following the title or intro paragraph, for example—can help avoid incorrectly signaling the end of the page. Additionally, shorter banner-style ads are less interruptive of the content than the taller square display ads. Screenshot of ad placement on USA Today mobile site USA Today mobile website uses a thin display ad positioned near the beginning of an article, so it is less likely to be considered a reasonable stopping point in the content. The thin rectangular size also allows the content below to be visible, encouraging the user to continue reading without being too interrupted by the ad. When an ad is placed lower on the page amid content, consider adding additional cues to signal the user to scroll past the ad. This recommendation is especially important if the ad is large or otherwise consumes a lot of page real estate (includes extra whitespace above and below the ad, or is a small ad populated into a placeholder meant for a larger one), and blocks the user from easily seeing any continuation of content. If the user doesn't know for sure that more content exists below the ad, they may not be willing to pay the interaction cost to scroll and possibly get nothing. Simple, clear text such as “Keep Reading” or “Continue Reading Below” along with an arrow pointing down or other directional indicator placed above the ad can work well to let the user know more content is available. Screenshot of ad design on Boston Globe mobile site To encourage users to scroll past a large ad, a cue such as Continue Reading Below should be shown above the advertisement, as seen on the Boston Globe mobile website. Keep in mind that this treatment merely makes the ad placement bearable, and should be considered a last resort if multiple ads must be placed on the page amidst content. In general when it comes to ads, be sure to practice restraint. Having a high number of ads diminishes site credibility: as stated by a user in a recent study, “I have deleted apps because of ads — I tend to not go to the ones with a lot of ads; I think the info is not reliable.” As expected, the most hated advertising techniques on the desktop are also hated on mobile devices; and sadly, top sins such as Covers what you are trying to see and Occupies most of the page are easier to unintentionally commit when the screen size is limited. Because of this, extra care must be taken when deciding where and how often to place ads on mobile apps and websites. Conclusion Ads represent a point of conflict between business needs and user needs. To minimize their impact on user experience, they need to take only a small fraction of the page area and be placed strategically so that they do not create false floors and do not stop people from discovering additional page content. on't Force Users to Register Before They Can Buy by AMY SCHADE on July 5, 2015 Topics: E-commerce Summary: Guest checkout with optional registration on e-commerce sites simplifies the purchase process and invites users to register when they feel comfortable, rather than forcing unwanted registration. One of the most common complaints we hear in e-commerce usability research is about registration. Shoppers have many reasons to dislike or dread site registration. They may not plan to return to the site again, making a one-time purchase or a gift purchase. They may dislike registration in general, frustrated with remembering usernames and passwords for all the sites they visit. Some shoppers don’t want a site to save personal information and assume that if they register for the site, the information will be saved. Many users associate registration with getting unwanted email, and for good reason, since many sites offer tiny preselected checkboxes to sign up for email newsletters. Most of all, registrations involves extra steps, extra hassle, and extra potential for things going wrong (whether user errors or site errors) and stopping the user dead in the water. The higher the interaction cost, the fewer people will complete a process. This is true for any user interface steps, but in the case of e-commerce checkout there’s a particularly direct connection between user hassle and lost sales. TinyPrints.com required that users create an account and also automatically subscribed users to the newsletter, mentioning above the Create Account button that “You will be subscribed to the Tiny Prints email newsletter” (stated in tiny print, which makes users weary right there.) Being signed up for newsletters they do not want is one of many complaints users have about registering on e-commerce sites. Registration sounds like a tedious, lengthy process unrelated to the task at hand: making a purchase. And some sites make registration a lengthy and tedious process, sometimes even presenting registration as a step separate from the checkout process. This doesn’t need to be the case. When a user is making a purchase, typically all the information needed for registration is already being requested of the user. Sites normally ask for information needed for the transaction, including name, shipping, and billing information. In addition, sites commonly ask for an email address in order to email a receipt and update order status. The only aspect of registration that is not covered in a standard checkout transaction is a password. How to Present Optional Registration Before users enter the checkout process, clearly state that registration will be an option. Some users do want to register and like to see assurance that they can if they’d like to. If the option to create a password will be presented after the purchase is complete, rather than during the checkout process, tell users so they know when to expect the option. Under the Guest Checkout option, HomeDepot.com told users that “You will have the opportunity to create an account and track your order once you complete your purchase.” The size of the text could have been larger to make it easier to read, though it is good to present this information less prominently than the main text. Briefly highlight the benefits of registration from the users’ perspective and not the company’s perspective when asking users to register. Shoppers appreciate when sites emphasize aspects that would make the experience easier, such as order tracking or faster checkout. They sometimes complain about sites that stress “benefits” such as receiving email newsletters or becoming a member of the site. Mention customer-focused benefits when users start the checkout process as well as when customers are asked to create optional passwords. A brief bulleted list tends to work well to highlight this information. This list should not be a sales pitch for the site, but a brief reminder to users about how registering benefits them. Nordstrom.com told users that registration would let them, “Check out faster, Track your orders, Write reviews and more!" This nicely presented the information as a benefit to the user, rather than the site. Mark password fields as optional, so it’s clear that users do not have to register for the site. Also make sure to state password requirements so users aren’t left guessing how to create a valid password. Some sites do not mark the password fields as optional; instead they place the fields in a section of the page with the word “optional” in a heading. Users often skim web content, even when filling in forms, and may miss the optional designation if it is only displayed in the heading, rather than next to the field. When the fields are not specifically marked, users can misinterpret it as a requirement for registration. If they were previously told that registration is optional or have pursued guest registration on the site, this inconsistency can break the user’s trust. Staples.com listed the optional passwords fields in a section titled Optional Information. That heading was in close proximity to the password fields, which only appeared if a user selected the Create an account and make your next checkout easy option. Both these factors helped reinforce that the fields were optional. Simple and Optional Rather than forcing users to register before checking out, provide the option to register within the checkout process by presenting optional fields for the user to enter a password. This puts users in control and allows them to decide if it is worthwhile to register or not. In our e-commerce research, we saw users who had previously complained about forced registration happily register for sites where registration was limited to the option of creating a password in the purchase process. Forcing registration causes lost sales. Some users will leave the site, others will struggle with registration. It is common for sites that add guest checkout to immediately realize increased sales. It is a simple way to improve usability and encourage purchasing. The Characteristics of Minimalism in Web Design by KATE MEYER on July 12, 2015 Topics: Visual Design Web Usability Summary: Our analysis of 112 minimalist websites revealed the defining features of minimalism: flat design, limited color schemes, few UI elements, use of negative space, and dramatic typography. This article is the second in a series devoted to the understanding of minimalism in web design. If you’re interested in the origins of the movement, read The Roots of Minimalism in Web Design. A minimalist web-design strategy is one that seeks to simplify interfaces by removing unnecessary elements or content that does not support user tasks. In order to reduce a website to only its most necessary elements, designers must accept a cascade of consequences that impact both the user interface (UI) and the content of the site. Many of the visual-design characteristics commonly associated with minimalism are choices that serve the core strategy of minimalism particularly well, and so have been adopted along with minimalism in most instances. Web design, like language, is defined by the way people use it. The word ‘minimalism’ is thrown around a lot, yet it’s hard to pinpoint exactly what features define a minimalist web design. To more clearly define what constitutes a minimalist design in practice, we analyzed the design characteristics of a sample of 112 minimalist websites. Sites were selected for the study if they were either identified by an outside web-design expert as minimalist, or were included in an online gallery for inspirational minimalist sites, like siiimple. Remember that just because a design technique is popular doesn’t necessarily mean that it always supports user needs and optimizes profitability or other business objectives. In this study, we analyzed sites that are known to employ minimalist design, not sites that are known to be highly profitable. As discussed further below, our other research suggests that while some of these design ideas can support business goals, others can hurt your profitability. Defining Characteristics of Minimalism So what features were present in most of these designs? We included a feature among the defining characteristics of minimalism if it was present in at least three quarters (75%) of the websites that we analyzed. Flat Patterns and Textures Used in 96% of sampled interfaces (but often ineffectively) Over the past few years, there has been an overwhelming shift in the design community away from skeuomorphism, towards purely digital representations of things without physical metaphors. Flat interfaces don’t make use of any of the obvious highlights, shadows, gradients, or other textures that make UI elements look glossy or three-dimensional. Some designers believe that the flat-design trend grew out of the popularity of minimalist UI design (Müller, 2014). The two trends are extremely compatible; removing gratuitous shadows, gradients, and textures falls in line with minimalism’s primary goal of eliminating the unnecessary. In our sample, 96% of the minimalist sites were flat. The two tend to co-occur so frequently that the phrase ‘flat design’ is often (misleadingly) used interchangeably with ‘minimalist design.’ The trends are similar, but not the same. Flat design generally refers to the textures, icons, or graphics in an interface. Minimalist design applies to the larger or overarching content, feature, and layout strategies. An interface may be flat without being minimalist. Jeet.gs The Getting Started page for Jeet.gs grid system API features a completely flat interface, including ‘ghost buttons’ for copying code snippets. (Ghost buttons are empty buttons with a thin rectangular border and text.) Flat ghost buttons can have legibility problems, and they break away from the established convention of what a clickable button should be. (However in this case, the buttons highlight when the mouse passes over them, providing a dynamic signifier of clickability. Also, the buttons show a tiny 3D effect when clicked that adds a small sense of physicality. Thus, the interactive user experience adds depth to the flat interface elements.) As we’ve discussed in other articles, flat designs often fail to communicate to users which elements are selectable or clickable. We believe that a better approach is a compromise between flat and skeuomorphic—a mostly flat design, but with clickable elements that users can recognize easily. Considering that flat design is the design idea most likely to be used incorrectly and degrade the user experience, it’s unfortunate that it’s the most prevalent of the main characteristics of minimalist web design. Limited or Monochromatic Color Palette Used in 95% of sampled interfaces In most minimalist interfaces, color is used strategically to create visual interest or direct attention without adding any additional design elements or actual graphics. With less visual information vying for a user’s attention, color palettes are more noticeable and will be more influential in a site’s impact. Minimalist color palettes are a movement away from the clashing, loud colors of the web design popular in the 2000s. Subdued color schemes are intended to avoid upstaging the content—which, in the case of images, can still be brightly colored. Many minimalist designs are either monochromatic, or use only one bold color as an accent, and use it to—sparingly—highlight the most important elements of the site. These accented elements are usually clickable. When assessing the use of color in the sample websites, we looked at background colors, logos, navigational elements, iconography, and typography, but did not consider content images (like photographs) as part of the color palette. Almost half of the websites sampled (49%, 55 websites) used a monochromatic color palette. Almost as many websites used one or two accent colors in an otherwise monochromatic color palette (46%, 52 websites). Of those 55 monochromatic sites, 51 sites were grayscale-–they used exclusively white, black, and gray shades. Freres d'Encre The monochromatic homepage of Frêres d'Encre, a French tattoo studio, creates a dramatic aesthetic. Solo Solo, project management software, uses a monochromatic but not grayscale color palette. Kayak Travel metasearch engine Kayak uses orange to highlight its logo and the actionable Search button. The popularity of this particular characteristic is an improvement in the sense that it’s moving interfaces away from the loud, clashing color schemes that used to dominate the web. However, there are some considerations to keep in mind when applying a limited color palette: Make sure your color scheme uses enough contrast to be legible to people with limited vision or color blindness. Use accent colors intentionally and consistently to highlight very important information or primary actions. Restricted Features and Elements Used in 87% of sampled interfaces Designers who adopt a minimalist design strategy must consider each element in their interfaces and eliminate any that are not required to support the core functionality or message of the website. An ‘element’ in this context could be any individual unit of the interface: including but not limited to: menu items links images graphics lines captions textures (like gradients) colors fonts icons It’s difficult to assess whether an interface includes ‘unnecessary’ elements without directly asking the sites’ designers what they left out, and without knowing the target users and tasks. To make this characteristic measurable, we focused on assessing whether or not the interface contained graphic elements that did not serve any obvious purpose. In our sample, 87% of minimalist sites avoided gratuitous graphic elements. Alan Trotter's portfolio The portfolio of fiction writer Alan Trotter is severely minimalist. By default, the site doesn’t even reveal his full name: visitors must click the underlined text to get to more details. This strategy might achieve an ‘edgy’ aesthetic, but it’s a big gamble to hide the most important content. The more stuff there is in a user interface, the more stuff users need to process. A favorite mantra of minimalist designers is, “subtract it till it breaks,” which really means, “unless the absence of an element would be serious problem, get rid of it.” This is where designers can get distracted by the pursuit of a clean, modern, minimalist interface—and end up cutting out useful content. Adhering to a rigidly utilitarian approach can produce streamlined designs by eliminating distracting features and content. Just make sure you aren’t making your users’ primary tasks more difficult by removing or hiding content they need. It’s hard to understand a cluttered design or a system overflowing with extraneous features. But it’s even harder to understand a design that doesn’t provide sufficient scaffolding to explain its features or structure. Maximized Negative Space Used in 84% of sampled interfaces Removing or excluding elements from a web page necessarily leaves empty space. Negative space (also called white space) is the name given to the empty areas of an interface. Negative space has been called “practically synonymous with” and “the backbone of” minimalist interfaces. Many minimalist designers use it as a tool to try to direct users’ attention and allow them to digest content more easily. Considering these strong assertions of negative space as the defining characteristic of minimalism, it’s surprising that only 84% of the sample sites used substantial amounts of negative space in their designs. Thomas Buffet's portfolio The screenshot above shows the homepage of French designer Thomas Buffet as seen full-screen on a 15-inch MacBook Pro. Above the fold, the page is almost entirely negative space. In this case, the site is still able to answer the two primary questions people would ask upon arriving at this page: ‘who are you,’ and ‘what do you do’. But this approach will not work in all contexts. Appropriate use of negative space can help draw attention to important content. When deciding how to lay out negative space in your designs, be sure to consider the following questions. How will adding or removing negative space impact the communicated hierarchy of the page? How will the negative space impact what content is displayed at the top of the page? The page fold still matters: users will scroll if they have a reason to, but they pay more attention to the content at the top of the page. How will the negative space impact the interaction cost: will users need to work harder to get to the information that they need? How will the negative space need to change at varying resolutions? Dramatic Use of Typography Used in 75% of sampled interfaces Like color, bold or large typography becomes another tool for communicating meaning when there are few elements on the page. Effectively exploiting interesting typography can help compensate for having fewer elements like photos and graphics, and can make a minimalist design feel more visually engaging. Variations in font size, weight, and style become crucial in helping users understand the hierarchy and relative importance of text. Of the 112 sampled minimalist sites, 75% used typography to convey meaning or create visual interest. Alexander Engzell's portfolio The portfolio of art director Alexander Engzell uses bold typography on his tagline to create visual interest without adding extra graphic elements to the page. However, the text is an image file, which adds to page load time. Also, unlike the Buffet portfolio, this page doesn’t directly explain whose portfolio this is, or what this person does. Users have to click the INFO link in the upper right corner to access that information. Using images for text may allow you to use custom fonts, but it will add to page load time, will require extra considerations for scaling at different resolutions, and can cause accessibility issues. Using web fonts is a better solution, but bear in mind that web fonts can have detrimental performance effects as well. Remember, drawing attention to bold typography is only useful when that text communicates meaningful information. Beware of going overboard on the fancy typography: users can ignore overformatted text if it looks too much like advertising. There’s a delicate balance between meaningfully bold typography and distracting typography. A great designer will come down on the right side of this balance, but if your designers are less skilled in employing advanced typography it’s safer to err on the side of caution. Related Trends Some designers also include the following characteristics as minimalist. Based on our research however, these seem to be design trends that often co-occur with minimalism, but are not actually defining characteristics—they occurred in fewer than 75% of the sites that we analyzed. Large Background Images or Videos Used in 57% of sampled interfaces The presence of a large background image or background videos (enabled by HTML5) is one of the most debated characteristics of minimalist Web design. From a theoretical perspective, a large background image certainly seems contradictory to the core minimalist spirit of reducing non-critical elements. Despite this, large background images and videos are popular in minimalist designs—we found that 57% of our sample included them. Monte Re The homepage of Monte Ré, an Italian fruit producer, uses a full-width background-image carousel within an otherwise pure-white minimal site design that includes ghost buttons. While the text is technically distinguishable from the background images, it’s unpleasant to try to read and understand the copy while colorful images circulate behind it. Depending on the context and the designer’s priorities, an argument can be made for the ability of large background images/videos to create an impact on users’ perception of brand. When a background image is used for a carefully considered, strategic reason, sticking to minimalist-design strategies can help restrain other page elements from competing or clashing with the background. Additionally, some designers may hope that loud background images will keep otherwise minimalist designs from being too boring or stark. If you choose to use a background photo or video with your minimalist design, keep the following points in mind: Make sure the images or videos you choose serve a real purpose or help people understand the site—otherwise they’ll just distract your users from your actual content. Make sure the text is both legible and readable if you want people to understand it. Remember, legibility is the extent to which users can distinguish individual letters. Readability is how well they can process words, phrases, and scan the text. If you’re using a carousel or video, you need to test every possible background—every image or frame of the video, and at a variety of screen resolutions. Be aware of how big images and videos impact performance. Make sure you’re taking an adaptive approach so your mobile users aren’t waiting for a desktop-sized retina photograph to load over their network data connection. Don’t autoplay videos. Many users are frustrated by videos that play automatically without their consent, especially if those videos have audio. Avoid creating Harry-Potter-painting-style videos of people slowly moving around in the background. You don’t want to distract your users and creep them out. Grid Layouts Used in 43% of sampled interfaces In our sample, we found that 43% of the interfaces used grid layouts to organize content. While this percentage indicates it is a popular design pattern among minimalist designers, it seems that grid layouts are certainly not ubiquitous in their designs. When grid layouts are used in minimalist UI designs, it’s generally for two reasons: Grids are an effective method of organizing homogenous content on the page linearly without adding any visual elements; and Grids are particularly helpful when designing a responsive website—another trend that is separate from minimalism but often co-occurs with minimalism. Paprika The graphic design agency Paprika organizes its projects in a grid, but is not responsive. Sea Chant portfolio The minimalist portfolio of photography studio Sea Chant organizes photographs in a grid at desktop screen widths. Sea Chant portfolio At 400px wide, the Sea Chant portfolio is reduced to a single column of content and removes all hover effects. Circular Graphic Elements Used in 16% of sampled interfaces Some design experts have suggested that circular and rounded graphic elements could be a component of minimalism, but we found only 16% of our sample used them. They seem to be more of a fad. Gesture Theory The homepage of Gesture Theory uses multiple circular elements in its minimalist design. Hidden Global Navigation Used in 13% of sampled interfaces Many websites currently use severely reduced global navigation elements in their desktop presentations, such as the now infamous hamburger menu. This can sometimes be the result of an incomplete mobile-first design strategy that fails to consider the needs and extra screen space available to desktop users, but it can also result from overzealous minimalism. Hiding infrequently accessed items might make sense for your goals, but make sure you aren’t hiding tools or links that are critical to the tasks you want your users to perform. Be particularly cautious if your site has large amounts of content or categories. Visual Soldiers portfolio The desktop portfolio site of design agency Visual Soliders uses a hidden global navigation under a hamburger menu. Visual Soldiers portfolio These few menu items hidden in an overlay could have been made visible globally, but were probably hidden to achieve this ultra-minimalist effect. Commonly Occurring Characteristics of Minimalist Interfaces Our analysis of 112 websites revealed the following defining characteristics for a minimalist website: Flat rather than skeuomorphic patterns and textures Use of a limited or monochromatic color palette Strictly limited features and graphic elements Maximized negative space Dramatic use of typography to communicate hierarchy or create visual interest Some of these characteristics are used almost ubiquitously in minimalism, and some occur slightly less frequently in minimalist interfaces; however, all of the defining characteristics were present in at least 75% of the minimalist sites that we analyzed. In our research, we also identified several related trends that were present in less than 75% of the sampled sites. Large background images or videos Grid layout Circular graphic elements Hidden global navigation Conclusion 2000s interface design was predominantly cluttered and overwhelming. For years, we’ve been advising against this kind of “maximalism”. Feature bloat and gratuitous content is always bad for users. In theory, minimalism should move us away from maximalism, and result in streamlined content and more efficient user task flows. In practice however, we’ve seen minimalism mutate into a superficial visual trend as designers copy popular minimalist characteristics without seriously considering if they support their own site goals. Just as flat design is a reaction to skeuomorphism, minimalism is a reaction to maximalism. In both cases, we strongly advise a balanced approach. A minimalist design strategy can be a powerful tool, but only when it’s framed by the needs of your users—minimalism for minimalism’s sake alone doesn’t help users. (Minimalism is one of the design strategies discussed in the full-day course on Generating UX Redesigns From Broad Design Principles.) Share this article: Twitter | LinkedIn | Google+ | Email Learn More Research Reports Strategic Design for Frequently Asked Questions Full Day Training Courses Top Web UX Design Guidelines The Human Mind and Usability UX Basic Training Web Page UX Design: Optimizing Pages to Deliver on Business Goals Visual Design for Mobile and Tablet: Day 1 and Day 2 Articles The Fold Manifesto: Why the Page Fold Still Matters 10 Usability Heuristics for User Interface Design Banner Blindness: Old and New Findings Scaling User Interfaces: An Information-Processing Approach to Multi-Device Design Teenage Usability: Designing Teen-Targeted Websites How Iterative Testing Decreased Support Calls By 70% on Mozilla's Support Website by SUSAN FARRELL on August 2, 2015 Topics: Agile Prototyping User Testing Summary: User research with data mining and paper prototyping quickly led to measurable success for one of the busiest support websites in the world. One of the more frequent questions that we get asked by our clients or by our seminar attendees is: "Is a redesign for usability worth it?" In other words, what is the return-on-investment (ROI) of a redesign? In recent years, we've seen a decline of the ROI for usability, most likely due to approaching a ceiling of usability improvements: With more than 20 years of web-design experience under their belt, designers have learned a few things and fixed quite a few problems. But a redesign for usability can still save you a significant amount of money. In this article we tell the story of Mozilla's support site, which was able to get a 233% improvement out of a redesign for usability. (Here's an explanation of how the improvement score was computed.) Thus, we can say that the redesigned site was about 3 times better than the original site. The cost involved in this redesign was 14 person-weeks or 560 person-hours. Is it worth spending 14 weeks to become 3 times better? This depends on the hourly rate for your staff and the value of your site and thus cannot be answered in general. However, for Mozilla, which gets huge amounts of traffic, the improvement is certainly worth the trouble, as it would be for almost any big site or company that does substantial business online. So how did Mozilla do it? What was involved in this redesign? Who is Mozilla Mozilla is a large, open-source, worldwide, software organization staffed by both employees and volunteers. It makes one of the most popular web browsers (Firefox), along with other useful products and services. Pain Points Millions of people come to Mozilla's support website every year to get help with Firefox and other products and services. When users cannot get an answer from the information existent on the site, the Mozilla staff aims to help by answering each person's question in the user-support forum, and to respond to questions as quickly as possible. As Mozilla's website had grown organically, users were having difficulty finding information and the support staff couldn't keep up with the number of questions in the forums. Specifically: At about 400 pages or so, the help documentation had become a difficult place in which to locate particular information quickly. The forum staff (employees and volunteers) were having trouble responding to questions as quickly as they wanted to, because of the increasing number of incoming questions for the rapidly updating Firefox. The forum overload was also making it difficult for staff to find time to write new help articles for frequently asked questions. More articles could help, but the growing number of articles also caused more findability problems. Action Plan Mozilla decided to invest in discovery and iterative usability testing in order to improve the IA of its support site. The research questions aimed to understand (1) how people (users and staff) used the support system; (2) which types of information were really important. Top research questions Mobile Faceted Search with a Tray: New and Improved Design Pattern by KATHRYN WHITENTON on July 26, 2015 Topics: Mobile & Tablet Search Visual Design Summary: Displaying faceted-search controls on mobile devices in a ‘tray’ overlay is a new effective solution to the challenge of showing both results and filters on small screens. Recently, a few big brands have introduced a new method for displayed facet controls on mobile devices, by placing them in a ‘tray’ overlay on top of the actual results. This new design approach addresses a major shortcoming typical of many faceted search displays on mobile devices: the placement of facet controls on a separate screen, which forces users to work harder to understand how the facet controls affect the results set. But before understanding why this is the case, let’s go back to the basics of faceted search. What Makes Faceted Search Special? Faceted search lets users refine a set of results by applying filters that comprehensively describe the search space. Such narrowing is invaluable for users who need to find something specific within a large content set. This type of search has become common for ecommerce and travel websites, as well as many different types of document and media collections. A faceted system includes two critical elements: Simple controls to construct sophisticated searches: Providing familiar controls like drop-down menus and checkboxes with natural-language labels empowers ordinary users to narrow down a large set of results to a small set that meets their exact criteria—without any special knowledge of Boolean logic or query syntax. Simultaneous display of the facet controls and the results: Showing both the filters and the results at the same time makes it easier for users to understand the relationship between the two; ideally, this is reinforced by dynamically updating the results set as soon as the user selects a filter criteria. The simple filter controls are the most obvious component of a faceted system. However, the importance of simultaneous display should not be underestimated. Long before faceted search became popular, we had ‘advanced search’ screens with similar controls for creating complex search queries. The big difference introduced with the first faceted navigation system was in displaying the facet controls and the results at the same time, which makes the effects of each filter instantly visible. This innovation embodies 2 of the 10 usability heuristics: provide rapid system feedback, and offer users control and freedom. Challenges of Displaying Search Facets on Mobile Devices Faceted search was originally designed for desktop and laptop users. Translating this experience onto a mobile device is difficult, because the very thing that makes faceted search so helpful to users – being able to see the filters and the results at the same time – is difficult to achieve on a small screen. There simply isn't enough space to show a full set of facets and a decent number of detailed results simultaneously. Until recently, most mobile designers haven’t even tried to display facets and results at the same time, instead opting to place them on separate screens. But this solution forces users to navigate to the facet-control screen, make their selections, then navigate back to the results set to see the effects of their selections. The istockphoto.com mobile website illustrates the typical approach to providing faceted search to mobile users. The results page includes an icon that users can tap to open the facet controls (assuming they can figure out what the icon means). Once the facet controls are displayed, users can select different filtering criteria, but it’s not obvious how the results will be affected by the facet selection because: None of the results are shown on this screen. The number of files, displayed in the page header updates too slowly. The header showing the number of files may not even be visible once a user has scrolled down to expand and select the facets below. Due to these limitations, users have to return to the previous screen in order to find out whether their filter selections were effective at targeting the best results and whether they have narrowed the results set down to a manageable size— or if perhaps they've applied such restrictive criteria that no results match. Mobile search results and facet controls on iStockphoto.com Left: Like many mobile search designs, iStockphoto.com does not display faceted search controls on the actual search results page. Instead it requires users to navigate to the facet controls, in this case via a cryptic icon composed of lines and circles on the right edge of the Search bar. Right: The facet controls take up the entire screen, and in order to see the effects of their selections, users must navigate back to the results screen. New Solution: ‘Tray’ Overlay to Display Facet Controls Recently a new approach to providing faceted search for mobile users has appeared: showing the facet controls as a ‘push-out’ style tray on top of the search results. This design allows for continuous visibility of results: even while the facet controls are open, some information about the results is visible in the background. The Amazon iPhone application and eBay’s mobile website both now use an overlay to display facet controls on the same screen as the search results. Mobile Facet Tray Overlay Examples Amazon’s iPhone application (left) and eBay’s mobile website (right) both recently introduced an overlay to display search facet controls on the same screen as the search results. Design Pattern Elements Both the Amazon and eBay designs include several details that combine to create a good user experience: Once activated, facet controls appear in a vertical panel overlaid on top of the results screen. The results are always visible in the background, and can be seen to change as the user makes her facet selections. (However, in the case of eBay, users can hardly make out what the results are. Amazon’s design is better because users actually get useful information from the background.) The total number of results is always visible, even if the user has scrolled down a long list of facets. (Amazon accomplishes this by fixing the header at the top of the screen so that it remains visible even as the list of facets scrolls up or down). A translucent gray shadow slightly obscures the underlying results and ensures that the facet controls stand out. The facet panel appears at the right edge of the screen, leaving the left edge of the results visible. (This is helpful because the left edge is more likely to have meaningful content; with Amazon you can actually see the product images.) (You may also notice that both Amazon and eBay use actual words – Filter and Refine – as the commands to access facets, rather than a special symbol. Any of the labels commonly used for faceted navigation – narrow your results, refine, and filter – are far more understandable than cryptic icons, and definitely worth the extra space. ) Why Is Simultaneous Display of Results and Facet Controls Important? In usability testing, I am always amazed at how successful people are at immediately understanding and using faceted search screens, which tend to include many different elements and controls. As long as the controls are displayed properly, most people jump right in to creating and refining their queries. Instant results are an important part of the process because they allow users to see right away if they have applied the wrong filter, or applied overly narrow criteria that eliminates too many options. Both of those errors are very easy to recover from if you can instantly see the effects of your actions, but without this visibility users can end up in a tedious cycle of pogo-sticking between the results and the filters. The facet ‘tray’ approach illustrated by Amazon and Ebay doesn’t provide complete visibility, since only a small part of the results screen is visible. But these creative solutions offer at least some visibility into the effects of applying a filter. Users may still find that they need to close and re-open the facet controls, but this approach feels more like expanding a part of the current page, rather than jumping back and forth between different pages. Find out more about the best approaches for visual displays on smaller screens in our full-day courses about Indicators, Validations, and Notifications: Pick the Correct Communication Option by KIM FLAHERTY on July 26, 2015 Topics: Applications Standards Summary: Status feedback is crucial to the success of any system. Knowing when to use 3 common communication methods is key to supporting users. In interaction design, a system, whether an application, website, or piece of hardware (anything from a smartwatch to a thermostat), should always keep users informed, by providing appropriate feedback. Ensuring that the state of the system is always visible is one of the 10 usability heuristics for interface design. Information about system status, such as error messages and notifications of system activity, allows users to fully understand the current context. The best way to communicate system status varies depending on several key factors: The type of information being communicated The urgency of the information — how important it is that the user sees it immediately Whether the user needs to take action as a result of the information Three common approaches for status communication include validation, notifications, and status indicators. These terms are used sometimes interchangeably in product design, but they stand for different communication methods that should be used in different circumstances. Understanding the differences between them will help you sharpen your feedback to users by choosing the best option for each need. Indicators An indicator is a way of making a page element (be it content or part of the user interface) stand out to inform the user that there is something special about it that warrants the user’s attention. Often, the indicator will denote that there has been some change to the item represented by that element. Although, as we’ll see later, indicators are used quite frequently to signal validation errors or notifications, they can also be used on their own. Indicators are visual cues intended to attract users’ attention to a particular piece of content or UI element that is dynamic in nature. (If something always looks the same, it’s not an indicator, no matter how flamboyantly it’s designed.) There are at least three possible ways of implementing indicators: Oftentimes, but not always, indicators are implemented as icons. Easily recognizable icons can make very effective communication tools. Typographical variations can also be used as indicators; examples include the common convention of boldfacing unread email messages or color-coding stock symbols in an investment account if their price has changed substantially. Though less common, enlarged size or animation (e.g., vibration) can also be used to make certain items stand out from the crowd and thus serve as an indicator. Yelp used a green-tag indicator in the search results to indicate that Tea Market had a special deal running. This indicator communicated additional information about Tea Market. Characteristics of indicators: Indicators are contextual. They are associated with a UI element or with a piece of content, and should be shown in close proximity to that element. Indicators are conditional— they are not always present, but appear or change depending on certain conditions. For example, a stock-performance indicator, such as the one in the American Century example below, may change to indicate if the stock price is increasing or decreasing. Additionally, the tag indicator in the Yelp example above only appears if there is a deal at that business. Indicators are passive. They do not require that a user take action, but are used as a communication tool to cue the user to something of note. American Century Investments used a conditional indicator to provide information regarding a specific stock’s performance. When the daily change was negative, the indicator was a red arrow pointing down. When the daily change was positive, it showed a green arrow pointing up. The condition of the stock performance impacted the indicator that was shown next to the price. Indicators can introduce noise and clutter to your overall interface, and may distract users, so it is important to consider how many (if any) indicators to use in your design. Consider the following when deciding if an indicator is appropriate: How important is the information to the user? Is it worth taking up space on the page to inform the user? How often is the information used? Would the user expect to see the information? Would it be missed if it weren’t provided? How important is it for the application that the user discovers the information? Validations Validation messages are error messages related to users’ inputs: they communicate whether the data just entered was incomplete or incorrect. For example, in e-commerce systems, validation messages often involve information such as name, billing address, and credit-card information. Cobragolf.com provided a validation message that clearly indicated which field was in error. The message however was complex and confusing. A better message might say “Please enter a valid email address.” Characteristics of validation: A user needs to take action to clear the validation message. The information in the validation message is contextual and applies to a specific user input that has a problem. The way in which validation should be implemented varies based on the unique needs of the form. However, in general, if the user’s input is incorrect, the system should inform the user by providing an identifiable and clear message that aids in correcting the error. Validation messages should follow the guidelines for error messages rather than simply identifying the problem, they should tell users how to fix it. For instance, don’t state “Field is blank.” Please enter your street address” is more polite and directs to a solution. Since validation is contextual, it can be helpful to use an icon indicator along with the validation message to help communicate which input(s) are missing or need corrected. Bestbuy.com provided a helpful validation message telling users how to fix the problem and also used an icon indicator and a different color to attract users’ attention to the field that needed correction. Notifications Notifications are informational messages that alert the user of general occurrences within a system. Unlike validation, notifications may not be directly tied to user input or even to the user’s current activity in the system, but they usually inform the user of a change in the system state or of an event that may be of interest. In the case of email, social networks, and mobile-phone applications, notifications can even be delivered while a user is away from the application. Notifications can be contextual —applying to a specific UI element— or global —applying to the system as a whole. The Facebook App used a contextual notification in the news feed to communicate that newer stories had been added to the feed. This notification does not require the user to take action. Characteristics of notifications: They are not triggered by users’ immediate actions. They announce an event that has some significance to the user. There are two main types of notifications, which differ based on whether the user is required to act upon the notification: Action-required notifications alert the user of an event that requires a user action. In this sense, they are similar to validation, but since they were not sparked by the user’s own action, they require a different design. Action-required notifications are often urgent and should be intrusive; for instance, they could be implemented as modal popups that interrupt the user, forcing immediate attention and requiring an action to be dismissed. The Mac operating system used a notification to inform users of available system updates. The user had to explicitly dismiss it from the screen, by opting to either install the update or to be reminded again at a later time. This is an intrusive notification that requires that the user take action. Passive notifications are informational; they report a system occurrence that does not require any user action. Many notifications in mobile apps are passive: they usually announce an event of potential interest to the user. Passive notifications are typically not urgent and should be less intrusive. A typical implementation of a passive notification may be a badge icon or a small nonmodal popover in a corner of a screen. Passive notifications can easily be missed, since they require no user action. When the information provided by the notification is key to the understanding of the system, an easy-to-ignore passive notification can be problematic. Adobe Creative Cloud used a nonintrusive passive notification to inform the user of an available application update. This notification appeared on screen for several seconds before disappearing. The user did not need to take any action on it. Uniqlo.com used a nonintrusive passive notification to provide feedback that an item was added to the shopping cart. No action was necessary to dismiss the notification. Such notifications sometimes cause issues for e-commerce shoppers who do not notice the brief messaging. Users who miss the message may respond by adding an item to the cart multiple times, or by disrupting their shopping flow to check the cart to see what items were added. Notifications have the design challenge that they are not the immediate and obvious result of a specific user action. On the contrary, the user is likely in the middle of doing something different and may not be thinking about the issue raised by the notification. This requires notifications to establish more context and provide users with sufficient background information to understand what the notification is about. (In contrast, with a validation, the user has just done the thing that needs to be corrected. Thus, the validation message doesn’t need to educate users about the task at hand. For example, if an e-commerce checkout form has a field for a credit-card expiration date that was left blank, the validation message doesn’t need to say “Please provide the expiration date for the credit card you want to have charged $29.90 to pay for the blue sleeveless dress you are in the process of buying on Uniqlo.com.” However, a notification the following day that the dress has been shipped from the warehouse would need to say more than “Your package has shipped.”) If a notification is contextual and relates to a specific element in the interface, an icon indicator on the element can communicate where that notification applies and catch the user’s attention. For instance, an indicator badge on a mobile-app icon shows that the user has received a notification from the corresponding app. The iPhone messaging app created a notification to communicate that a new message was received. Along with the notification, an indicator badge was placed on the messaging-app icon to communicate where the notification applied. To clear the indicator, the user had to view the message. Mint.com used an indicator together with a notification to communicate that an account needed attention. The warning indicator (1) appeared in close proximity to the summary of the account that needed attention, while the notification (2) appeared in the central area of the page with other important information. The actual text in the notification message could have been more helpful, though. Picking the Right Communication Option Is Important Using the wrong communication method can have a negative impact on the users’ experience. Let’s refer back to the scenario above where Yelp utilized a green-tag indicator in the search results to indicate that Tea Market had a special deal running. This information is contextual and important to users who have specifically searched for a place to have tea. You may think that an alternative way of alerting users of potential tea deals would be to send them a notification when such a deal has become available. Wrong! A notification sent irrespective of the current user goal would likely be ignored, and may even annoy users because it will disrupt their current task and be irrelevant to their current needs. (In general, any type of ad tends to be ignored unless it is related to the users’ aims and mindset.) Alternatively, a toast (a small nonmodal popup that disappears after a few seconds, like the New Stories one used by the Facebook app), while appropriate for passive notifications, would be a bad way to implement an error message, be it validation or otherwise. In fact, one of our mobile users spent 5 minutes waiting for some content to load only because she hadn’t notice the little error message presented at the bottom of the screen that quickly faded away after 5 seconds. Allmodern.com used an action-required notification to communicate that a product was saved as a favorite. For a user that is saving a lot of items to their favorites, this can be a bothersome and intrusive way of providing feedback. This may be better communicated by showing a passive nonmodal popover in the corner of the screen that can be seen, but doesn’t require the user to take action to clear it. Conclusion Remember the key differences between the three communication methods are: Indicators provide supplementary information about a dynamic piece of content or UI element. They are conditional —that is, they may appear or change under specific conditions. Validations are tied to a user’s action or input. Notifications are focused on system-related events. These differences are summarized in the table below: Validation Notifications Indicators Global vs. contextual: Related to a global system event or to a particular page element Contextual Global or contextual Contextual Passive vs. requiring a user action Action required Action required or passive Passive Triggered by user action vs. system event User action System event User action or system event Understanding when and how to use each of these feedback tools is important in order to build consistency in the communication to users. By assessing the type of information delivered, we can determine the correct mechanism to use. How do users and staff interact with the support system? Which problems are the most important to address in the website redesign? What is the most-wanted information? Which words do people use when they search? Which desired information seems to be missing? How can the information best be organized and presented in order to match what users most want to do on the website? The UX Team The UX team consisted of 3 members: Susan Farrell, Senior User Experience Specialist, Nielsen Norman Group. Susan conducted the research, did data discovery, analyzed data, and made design-change recommendations. Crystal Beasley, Product Designer, Mozilla. Crystal led the project, coordinated with Mozilla stakeholders, and played the computer during paper-prototype research sessions. Bram Pitoyo, Web User Experience Designer, Mozilla. Bram designed the task flows and prototypes and supervised the interaction-design changes to the website. He also tested the old IA so we could compare results with the tests of the proposed new IA. The Steps We employed a variety of research methods intended to help us understand users' needs and also to redesign the IA and the workflow on the support site: Doing data discovery and analysis, to understand how users behave on the support site and why In particular, we looked at a variety of data sources to identify users' top tasks, as well as difficulties that they had with the current site. The table below summarizes the methods that we used. Headings Are Pick-Up Lines: 5 Tips for Writing Headlines That Convert by HOA LORANGER on August 9, 2015 Topics: Writing for the Web Summary: Attractive headlines and titles are critical in making the right first impression. Concise titles that sound authentic and relevant get noticed. A headline is often the first piece of content people read. And often it is the ONLY thing people read. If you want your encounters with people to be successful, make sure to write solid headlines. Have you ever tried to retell a story you read only to realize the details are fuzzy because you had only read the headline? This is a sign of a memorable headline. Good headlines entice readers and are critical to the success of your website. Below are 5 tips for writing engaging headlines: 1. Make sure the headline works out of context. We often think of headlines as being connected with the associated story. However, on the web, headlines usually appear out of context in places such as search results, social-media streams, blog posts, and news feeds. Headlines must be strong and descriptive, especially when standing alone, stripped of supporting content. Can you guess what the heading below refers to? New times call for new decisions The headline contains low information scent—that is, few cues to suggest what the story is about. People rely on visual and textual cues to perceive the usefulness of the content. They don’t spend time making inferences and trying to figure out items that don’t make immediate sense. Minimize cognitive load to maximize usability. Treat headlines like microcontent—phrases that can be scanned and still give readers a clear idea of the underlying information. 2. Tell readers something useful. Consider the decision-making process from the users' point of view. When faced with a barrage of links, their time is best spent clicking on headings that have the highest probability of providing value. Useful headings are specific. They provide facts or information that pique the readers’ interest. Avoid broad and generic headings. They don’t provide value or differentiate you from your competitors. Tell people something they don’t know and that benefits them. Headings that contain user-centric language are much more refreshing than vague ones that require guesswork. This headline is too broad: Make better, faster decisions with data visualization Contrast it with: Data visualization helps you detect and prevent fraud faster The second one is better because it is more specific and provides a concrete benefit that might arouse the reader’s curiosity. 3. Don’t succumb to cute or faddish vocabulary. Minimize hype and idioms (expressions). They are often vague, obscure meaning, and often change the tone of copy, usually for the worse. Consider this headline: Get the most bang for your buck with XYZ The headline above sounds pretty tacky and inauthentic, and degrades credibility. In addition, idioms such as “bang for your buck” often lack meaning to nonnative English speakers. Don’t be tempted to include overly informal language to sound modern and hip. It is much better to aim for clarity and authenticity. Keep your headlines straightforward by using familiar keywords. This is better: Increase productivity by 24% with XYZ Of course, there are exceptions to this rule. You can use specialized language when you address a specialized audience; in those cases jargon improves communication. However, before you sprinkle jargon all over your copy, verify that your entire audience truly understands it. 4. Omit nonessential words. The one place worth practicing being concise is in headlines. Spend time editing headlines to cut unnecessary words and tangled messages. Shorter headlines require less cognitive effort. And longwinded headlines don’t scale well to variable container sizes: they have a higher chance of being truncated when displayed on small mobile screens, for instance. Convoluted headlines like this lose readers: Caster, a technology company, buys Mitchell, with assistance from Jon & Smith, for $1.2B There are too many details that obscure the gist of the heading. The sentence also contains three commas, which create a jerky, start–and–stop effect. The headline can be made smoother by removing less important details, as in the versions below: Caster buys Mitchell for $1.2 billion –or– Jon & Smith orchestrates $1.2 billion deal for top technology firms 5. Front-load headings with strong keywords. One of the best ways to get traffic to your site is to front-load your headlines with keywords. Moving keywords to the front of titles increases the likelihood that they get noticed. Our eyetracking studies show that readers pay most attention to the first few words in lists. Don’t count on people reading the end of sentences. Let’s compare the following headlines: (1) Behold the new technologies for creating 3-D imagery and (2) Creating 3-D imagery gets easier with new technologies The first one runs the risk of not being read because the key phrase (creating 3-D imagery) is positioned at the end. Users must read the entire headline to understand its meaning. The second one is better. Moving the keywords to the front makes the heading more scannable. People can read only the first few words and still understand what the article is about. Conclusion Make a good first impression with short, keyword-leading headings that sound authentic, contain useful information, and make sense out of context. Try to follow all of these tips in one headline and you should notice a lift in user engagement. The Freelance Studio Denver, Co. User Experience Agency The Roots of Minimalism in Web Design by KATE MEYER on June 28, 2015 Topics: Human Computer Interaction Visual Design Web Usability Summary: Many of today’s most popular design trends are influenced by minimalism. This web design movement began in the early 2000s, but borrows its philosophy from earlier movements in the fields of fine art and human–computer interaction. Many of today’s most popular design trends (including flat design, large background images, and hidden global navigation) are directly or indirectly influenced by minimalism, a web-design movement that began in the early 2000’s, but borrows its philosophy from earlier movements in the fields of fine art and human–computer interaction. Minimalism sometimes presents as an attempt to prioritize content over the chrome and, when applied correctly, it can help you focus your design to simplify user tasks. Unfortunately, some designers misinterpret minimalism as a purely visual-design strategy. They cut or hide important elements in pursuit of a minimalist design for its own sake—not for the benefits that strategy might have for users. They’re missing the core philosophy and the historical context of minimalism, and they risk increasing complexity rather than reducing it. To better grasp and apply minimalist principles, we need to understand the origins of minimalism and its fundamental characteristics. We explore these topics in a series of two articles: In this first article we define minimalism and look at its history; in a second article we analyze in depth the characteristics of minimalist design and their impact on usability. What Is a Minimalist Interface? When employed correctly, the goal of minimalist web design should be to present content and features in a simple, direct way by providing as little distraction from the core content as possible. This strategy often involves removing content or features that don’t support the primary goals of the interface or its users. Although there is some debate about what exactly qualifies as minimalist web design, there are a few common features that most designers can agree upon. These include flat textures, limited color palettes, and the use of negative space. These and other specific characteristics and their frequency of use in minimalist websites are discussed in detail in the next article in this series. Minimalism is a reaction to bloated, or “maximalist,” UI design. Examples of such maximalist design include Flash intros and gratuitous animations, or applications crammed with as many esoteric features as possible (like Microsoft Office before the 2007 rethink). Brian Danaher's portfolio The portfolio of designer Brian Danaher is a typical example of what many designers would call a minimalist site. When viewed full screen on a 15-inch MacBook Pro, the homepage is almost entirely white space. The site uses a grayscale color palette with a single bold accent color to draw attention to clickable elements—a popular strategy among minimalist designers. Brian Danaher's portfolio Danaher’s site includes very few distractions from its primary content. Minimalism is well suited to portfolio sites like this one, which have fairly simple goals, relatively low amounts of content, and very similar information on most pages. Applying minimalism effectively to more complex sites can be much more difficult. Minimalism’s Rise to Popularity 1960s Decades before minimalism was a trend in web design, it was a visual art movement in the era following World War II. It emerged as a reaction to the chaotic colors, motion, and marked subjectivity often found in abstract expressionists works (such as the drip paintings of Jackson Pollock). It was heavily influenced by the famous German art movement Bauhaus, which focused on simple yet functional design. In the 1960s, minimalism became popular in a variety of fields, particularly fine art and architecture. In visual art, minimalism was characterized by monochromatic palettes, geometric elements, serial arrangements, and industrial materials. Jackson Pollock's Full Fathom Five Jackson Pollock’s Full Fathom Five (1947) in The Museum of Modern Art. Minimalists of note include graphic designer Josef Müller-Brockmann, painter Ellsworth Kelly, and industrial designer Dieter Rams. Note the clean lines, simplicity, and sparing use of color in each of these examples. Despite the wide variety of mediums, a coherent design style is perceptible. Ellsworth Kelly's Brooklyn Bridge VII Ellsworth Kelly’s Brooklyn Bridge VII (1962) in The Museum of Modern Art. Radio by Dieter Rams RT 20 tischsuper radio, 1961, by Dieter Rams for Braun. Unmodified CC image courtesy of Vitsoe. S.R. Crown Hall S.R. Crown Hall, designed by Ludwig Mies van der Rohe, 1956. Unmodified CC image courtesy of Peter Alfred Hess. The perspective behind minimalist art was neatly summarized by the motto of famous 20th century architect Ludwig Mies van der Rohe: “Less is more”. This motto would later become the spirit and unofficial mantra of minimalism in web design: fewer elements on a page results in lower cognitive load for users. 1980-2000 At the end of the twentieth century, minimalism began to take shape as a separate trend within the field of human–computer interaction. In 1983, data-visualization expert Edward Tufte introduced the concept of a data–ink ratio in his work, The Visual Display of Quantitative Information. In print media, the data–ink ratio is the ratio between (1) the amount of ink that communicates information, and (2) all the ink used to print the graphic. Tufte advocated maximizing this data–ink ratio by removing any elements that do not reasonably contribute new information. Data–Ink Ratio = Informative Ink / Total Ink This concept of data–ink ratio can be applied to web interfaces by considering the content–element ratio for any interface. The goal is similar: a high proportion of the amount of meaningful elements relative to all elements in the interface. In 1990, HCI researcher John M. Carroll was studying the ways people used technical training manuals, and looking for ways to improve them. From his research, he developed the theory of minimalism in technical communication. Carroll’s theory suggests that a successful design will support quick action by prioritizing brevity. Carroll stressed that reducing a design to its most basic elements is not the end goal of minimalism. Rather, Carroll championed brevity and simplicity in the service of task-oriented results. To position this approach towards web design, Carroll’s minimalism translates to getting the interface out of the way, in order to allow users to achieve their goals. In 1995, Jakob Nielsen included minimalist design in his 10 usability heuristics. His use of the term aligned with Tufte’s and Carroll’s sense of minimalism, as he advocated eliminating irrelevant information from interfaces. 2000s Beginning in the mid 2000s, echoes of the minimalist art movement began to appear in web interfaces: larger swaths of negative space, lower amounts of content, and restricted color palettes. Google is often credited as the pioneer of minimalist web interfaces. Google has prioritized simplicity and austerity in its interfaces ever since its beta offering in the 1990s. Google, 1999 Google’s homepage (1999, via Wayback Machine) Even though Google now offers a huge variety of products from Google Drive to YouTube to Gmail to Google Maps, its homepage has changed very little over 15 years. Only three navigation options are visible: in order to access the rest of Google’s offerings, users must use the grid icon to expose a tray of more options. Google, 2015 Google’s homepage (2015) In spite of early trendsetters like Google, it took time for minimalism to catch on in web design. In the early 2000s, crowded interfaces dominated the web. During our impression testing sessions at that time, users overwhelmingly described the interfaces as ‘busy’. Slowly but surely, minimalism found a foothold with early adopters: the web designers, graphic designers, artists, photographers, architects, and developers. Designer and blogger Emily Chang wrote about the rise of minimalism in 2006: Perhaps it’s the success of Google’s search page, or our collective reaction against the flashing banner ads and intrusive popups of the last decade, or the Jonathan Ives effect, but it’s as though web users, designers, and developers alike have all agreed to a new de facto standard of Mies van der Rohe’s ‘less is more.’ Chang’s assertion that all web users and professionals embraced minimalism was definitely not accurate in 2006, and may still be an exaggeration today. However, it is reasonable to assume she did speak for the emerging popularity of minimalism among people who are deeply immersed in the cutting-edge trends of the web. 2010-2013 The emergence of responsive web design (RWD) in 2010 primed the wider web to appreciate a minimalist approach. To effectively utilize RWD techniques, organizations must carefully prioritize their content—distractions from primary content that could be ignored on desktop become big problems on mobile. Slowly user and designer preferences began to lean towards greater simplicity in web interfaces. This shift was underscored by major redesigns carried out by two tech industry giants: Microsoft’s Modern design in 2011, and Apple’s release of iOS7 in 2013. Microsoft’s release of Windows 8 in 2011 was the first major redesign of its operating system in decades. At the same time, it announced its design philosophy, “modern design”. This new design philosophy was quintessentially minimalist, drawing directly from the minimalist art movement. Microsoft’s official design documentation even claims that the Bauhaus school is one of its fundamental design pillars. Windows 8 Windows 8 ‘tile’ view Though Apple has worked hard to define its brand in simplicity, Apple designers have historically—and controversially—favored skeuomorphic patterns in their interfaces. In 2013, Apple radically revamped iOS to a much flatter and more minimal style with iOS7. Apple’s decision to move toward a more minimal and flat design particularly underscores the popularity of the trend, given that it fundamentally contradicts the brand’s historic design style. iOS7 Apple’s iOS7 2014-2015 Minimalist design principles are now showing up in new and unexpected places: e-commerce sites, online publications, and even educational sites are adopting minimalist trends and strategies. Many one-stop website-design and hosting services like Squarespace, Weebly, Wix, and Volusion now provide stock site templates that are almost entirely minimalist designs. These offerings are particularly significant because they often target people with no development or design experience—people who want to set up their online bike store or bakery website or online wedding invitation without having to touch Illustrator or a line of HTML. These services are selling minimalist websites because they believe it’s what their customers want. Squarespace's Galapagos theme Squarespace’s ‘Galapagos’ theme Today, minimalism has branched into and overlaps with other prominent web-design trends such as flat design, responsive web design, and clean design. Minimalism’s contributions to these trends will be discussed in detail in next week’s article. The Usability Debate: Is Minimalism Good for Users? Minimalism is a design strategy that significantly influences content and information-architecture decisions. As a result, minimalism has a definite impact on the usability of the interfaces that adopt it. Unsurprisingly, the usability of minimalist-design styles has become the subject of debate amongst web professionals. Proponents argue that minimalism reduces information overload: the more features and content you can cut out, the less people have to deal with. Minimalism done well can also create a positive emotional experience for users. People do tend to respond better to aesthetically-pleasing interfaces. As Don Norman points out, when using such interfaces they are more tolerant of usability obstacles, as long as those flaws are minor. Since Nielsen Norman Group was founded in 1998, we have been forceful critics of maximalist (i.e., bloated) web design. You might expect us to be enthusiastic supporters of minimalist web design, but that’s not the case. When designers adhere too rigidly to a minimalist ideology, they risk ending up with wastefully low information density and poor findability and discoverability. Extreme minimalism can be useful as an internal design exercise, but should never be a final product. Minimalism in moderation can create efficient user experiences, as long as you don’t lose sight of the primary goal—helping users accomplish tasks. Tips for a Successful Minimalist Interface Make sure you seriously consider whether a minimalist design strategy is right for your site, your brand, and your content. If you’re sure a minimalist design is right for you, take some lessons from the roots of minimalism. Adopt Ludwig Mies van der Rohe’s motto, “Less is more,” in your designs. Don’t add elements just for their own sake. This rule can be true for content, visual design, and feature decisions. Consider reducing any elements that don’t contribute meaningful information (think about your content–element ratio.) Learn from Carroll’s minimalism: don’t just cut out features and elements—really think about your users’ needs and try to make tasks as brief and simple as possible. Know that a minimalist visual design alone, without meaningful consideration of user tasks, will not result in a successful interface. The usability issues of Windows 8 provide an excellent cautionary tale. (Minimalism is one of the design strategies discussed in the full-day course on Generating UX Redesigns From Broad Design Principles.) For an in-depth discussion of the characteristics of minimalism, read the next article in this series.Great Summaries on ‘About Us’ Pages Engage Users and Build Trust by HOA LORANGER on June 21, 2015 Topics: Corporate Websites Writing for the Web Summary: Tell your story on top-level pages in ‘About Us.’ People who trust you are much more open to engaging with your organization and website. Even large organizations exist only as words and images within a browser window. How can you make people trust you more than they would trust an equally good-looking set of pixels on another site? Be a good storyteller. The One Thing You Should Do Based on several studies, we’ve generated numerous guidelines on how to present company information on corporate websites and in the About Us sections to increase trust and transparency. However, in this article, I focus on one major guideline to increase perceptions of transparency and improve your relationship with users. If you can do only one thing, what should it be? The answer: Provide key information on major About Us pages. In usability studies, we observe people peeking at top-level pages for answers to foundational questions. Make sure that your site passes the first impressions test by answering top questions succinctly. People are more inclined to engage further once they’ve determined you’re worth the effort. Start telling your story the moment people land on your site. At a minimum, write brief summaries emphasizing a few impressive facts. As people click through the main pages they should gain a fuller understanding of who you are, what you do, and why you exist. Ask yourself, “If users only skim the top pages in About Us, are they getting a coherent story?” In many cases, what new users need most are great highlights written in a scannable format. Summaries are appealing because they provide context and reduce the amount of effort required to click through layers of content. Forcing people to work hard (even if it’s to click on a link to one level down) to receive an introduction is bad manners and reflects poorly on your organization. Examples of Dos and Don’ts Below are examples of what you should practice and what you should avoid. DO AbbVie: This About Us page provides a nice company overview, including Fast Facts to give site visitors a reasonable company snapshot. While this page holds promise, the content could be improved by replacing the marketing jargon with concrete facts that people care about. Steer clear of hollow phrases like “revolutionary” — at best, they tend to confuse users; at worst, they make them mistrust the site. DON’T Abbott: This About page has very low content density and forces users to drill deeper before they can learn about the company. This page acts as a wall that deters people from wanting to go further. Better to start the conversation by providing the highlights on this page. People who research organizations are sensitive to credibility factors. They are looking for clues to determine whether or not to like you. Answering the questions at the right time feels conversational and can be persuasive in garnering trust. People who trust you are much more open to engage with you. DO Chipotle: This summary tells a compelling story of who the company is and how they differ from other fast-food chains. The writing style is clear and hype-free, making the organization sound friendly and credible. DON'T CSC: Can you guess from page that this company offers cloud-computing services? This About page feels unfriendly without an introduction. The sheer number of links puts the onus on the users to determine which door to open. When the tagline could equally well describe thousands of other companies, you know you’re in trouble. The manner in which information is communicated on websites influences people’s perception of your organization. Users perceive sites that answer their questions quickly as being transparent and efficient. Conversely, users regard sites that bury critical information underneath complex layers as being evasive or ineffective. If your site visitors are potential donors, journalists, or clients, leaving such a negaive impression is detrimental to your business and brand. DO GSK: This overview answers the questions and is formatted well for ease of reading. The page contains facts for each business featured (e.g., pharmaceuticals, vaccines). Nice overviews like these minimize the effort required of users to learn about you. DON’T TevaPharm: The summaries on this Company Profile page are generic and don’t give clarity on how they’re unique. You might find specifics underneath Discover more, but why make users jump such hurdles? Halo Effect impacts how people gauge websites, even if the assessment is flawed. People tend to make hasty judgments about organizations based on limited information. If users have a good first impression, the positive feelings permeate to other parts of the site. If users have a bad first impression, the negative feelings extend to the rest of the site. DO Citrix: The images on this Executives overview page literally show the faces behind the organization. At a glance people get an impression of the company culture and the people running the business. Citrix is clearly benefiting from having a recognized UX expert on its executive team. (To nitpick this otherwise good example, reduce the leading slightly between names and job titles, to more closely associate these two pieces of information. Currently, the line reading “Chief Executive Officer” is closer to David Friedman’s photo than to Mark Templeton’s name.) DON'T Defenders of Wildlife: This executive overview feels unfriendly without photos of the members. Featuring photos on this page would tell a better story of who Defenders of Wildlife is. Conclusion Credibility is a major issue on the Web. Site visitors who visit the About Us section are seeking critical information to determine whether or not to engage with you. Explaining who you are matters. Tell your story and tell it succinctly. Featuring key highlights at the top-level keeps users focused on the conversation and not on wrangling the content or navigation. Well-written summaries illuminate your unique qualities and earn trust. (The full set of 70 design guidelines for "About Us" information is available in the 253-page research report, Presenting Company Information on Corporate Websites and in About Us Sections.) Ad Placement for Mobile by AURORA BEDFORD on July 5, 2015 Topics: Advertising Mobile & Tablet Web Usability Summary: Extra care is required when designing mobile page layouts that include advertisements, due to the limited screen real estate available. Ads must be displayed where they will not create false floors nor block users from reaching relevant content. Ads: that necessary evil we encounter every day, and to which we all believe ourselves to be immune. Whether a user ignores an ad completely or becomes annoyed with its presence is strongly related to the ad's size and placement on the page. On mobile phones, screen real estate is already at such a high premium that the position of the ad has an even greater impact on the overall user experience than on desktops. There are two main ad-related usability problems: (1) ads can be too disruptive to the user, and (2) they can create false floors that inaccurately signal the end of content and cause users to miss helpful information. Large Ads Limit Viewable Content Not surprisingly, the larger an advertisement, the more disruptive it is. On a small device, a vertically large ad consumes far too much valuable space, displacing the main content. To add insult to injury, sometimes two ads get stacked at the very top of mobile pages—as sites feel compelled to advertise their mobile apps. As a result, less page content is visible upon page load, which goes against one of the principles of mobile usability: prioritize content. In the example from FineGardening.com below, only the article title and brief summary can be seen without scrolling thanks to an overly large site header and the double ad placement at the top of the page. Screenshot from Finegardening.com on mobile showing multiple ads Finegardening.com: Very little article content can be seen upon page load because the app ad, banner ad, and large site header consume the majority of the screen real estate. Unlike multiple ad elements at the top of the page pushing down the relevant content, an ad at the bottom of the screen in a sticky container is less intrusive to users. This recommendation may seem counterintuitive because the ad would now remain visible on the screen at all times, but in past studies we have found this treatment to be best tolerated by users, which is good because it shows the ad is not getting in the way. Keep in mind that users tend to begin scanning from the top of the page, and resent having to scroll past a lot of chrome to get to the information they actually want to read. Thus, we need to not only consider the overall content-to-chrome ratio, but also ensure that helpful information is prioritized nearer to the top of page in order to grab people's interest and supply them with the information related to their task as soon as possible. An additional benefit to the sticky-container treatment is that the ad is still readily available to users once they finish their task. While the user is focused on completing an activity or researching a topic, ads will be ignored because they aren't part of the goal. Assuming the advertisement is actually relevant to the user, having it available once the main task is completed increases the likelihood that the user would pay attention to the ad and possibly interact with it. (An ad is relevant when it matches the user's current goal: it is more powerful to display an ad for something the user immediately wants rather than something that just matches their general profile.) Screenshots of ad treatment on the Washington Post mobile site The Washington Post mobile site displays an ad in a container fixed at the bottom of the screen (left). The ad is appropriately synced with the current scroll position of the page, and completely collapses when the user reaches a display ad embedded within the page content (right). Avoid Creating False Floors Another main downfall of many mobile ad placements is their tendency to create the “illusion of completeness,” or a false floor, on a page. An advertisement can easily signal to users that they have reached the end of the page's relevant content. This effect is exacerbated when the ad is large enough so it is difficult to see any continuation of content below, and when the ad is placed at a point low enough within the content where it seems reasonable that no more information is available on that page. Pages on WebMD's mobile site, for example, place ads following several paragraphs of text, below links to additional resources on the current topic. Horizontal lines in the design and the presence of copyright information (which is commonly associated with footer content) further cue the user that this is the end of page, when this is actually not true: the page continues far below the ad, displaying more information and additional links to related resources. Screenshots of WebMD.com mobile site article page containing several ads The ad placements on the WebMD mobile site create false floors because they appear in places that could reasonably be the end of relevant content, and are large enough that they hinder the user’s ability to see content continuing down the page. (The black dashed line shows where the fold occurs on an iPhone 6 Plus, and the red dashed lines represent areas where the ad is likely to stop a user from continuing to scroll.) If possible, only display ads at the real end of content rather than between paragraphs of text. Said one user during a recent usability study, “I don't like advertisements in between. It's distracting and gives me the impression that it's the end of the article.” Of course, we often don't have the luxury of neglecting business goals, and so if several ads need to be included on a page, putting them closer to the start of the content—following the title or intro paragraph, for example—can help avoid incorrectly signaling the end of the page. Additionally, shorter banner-style ads are less interruptive of the content than the taller square display ads. Screenshot of ad placement on USA Today mobile site USA Today mobile website uses a thin display ad positioned near the beginning of an article, so it is less likely to be considered a reasonable stopping point in the content. The thin rectangular size also allows the content below to be visible, encouraging the user to continue reading without being too interrupted by the ad. When an ad is placed lower on the page amid content, consider adding additional cues to signal the user to scroll past the ad. This recommendation is especially important if the ad is large or otherwise consumes a lot of page real estate (includes extra whitespace above and below the ad, or is a small ad populated into a placeholder meant for a larger one), and blocks the user from easily seeing any continuation of content. If the user doesn't know for sure that more content exists below the ad, they may not be willing to pay the interaction cost to scroll and possibly get nothing. Simple, clear text such as “Keep Reading” or “Continue Reading Below” along with an arrow pointing down or other directional indicator placed above the ad can work well to let the user know more content is available. Screenshot of ad design on Boston Globe mobile site To encourage users to scroll past a large ad, a cue such as Continue Reading Below should be shown above the advertisement, as seen on the Boston Globe mobile website. Keep in mind that this treatment merely makes the ad placement bearable, and should be considered a last resort if multiple ads must be placed on the page amidst content. In general when it comes to ads, be sure to practice restraint. Having a high number of ads diminishes site credibility: as stated by a user in a recent study, “I have deleted apps because of ads — I tend to not go to the ones with a lot of ads; I think the info is not reliable.” As expected, the most hated advertising techniques on the desktop are also hated on mobile devices; and sadly, top sins such as Covers what you are trying to see and Occupies most of the page are easier to unintentionally commit when the screen size is limited. Because of this, extra care must be taken when deciding where and how often to place ads on mobile apps and websites. Conclusion Ads represent a point of conflict between business needs and user needs. To minimize their impact on user experience, they need to take only a small fraction of the page area and be placed strategically so that they do not create false floors and do not stop people from discovering additional page content. on't Force Users to Register Before They Can Buy by AMY SCHADE on July 5, 2015 Topics: E-commerce Summary: Guest checkout with optional registration on e-commerce sites simplifies the purchase process and invites users to register when they feel comfortable, rather than forcing unwanted registration. One of the most common complaints we hear in e-commerce usability research is about registration. Shoppers have many reasons to dislike or dread site registration. They may not plan to return to the site again, making a one-time purchase or a gift purchase. They may dislike registration in general, frustrated with remembering usernames and passwords for all the sites they visit. Some shoppers don’t want a site to save personal information and assume that if they register for the site, the information will be saved. Many users associate registration with getting unwanted email, and for good reason, since many sites offer tiny preselected checkboxes to sign up for email newsletters. Most of all, registrations involves extra steps, extra hassle, and extra potential for things going wrong (whether user errors or site errors) and stopping the user dead in the water. The higher the interaction cost, the fewer people will complete a process. This is true for any user interface steps, but in the case of e-commerce checkout there’s a particularly direct connection between user hassle and lost sales. TinyPrints.com required that users create an account and also automatically subscribed users to the newsletter, mentioning above the Create Account button that “You will be subscribed to the Tiny Prints email newsletter” (stated in tiny print, which makes users weary right there.) Being signed up for newsletters they do not want is one of many complaints users have about registering on e-commerce sites. Registration sounds like a tedious, lengthy process unrelated to the task at hand: making a purchase. And some sites make registration a lengthy and tedious process, sometimes even presenting registration as a step separate from the checkout process. This doesn’t need to be the case. When a user is making a purchase, typically all the information needed for registration is already being requested of the user. Sites normally ask for information needed for the transaction, including name, shipping, and billing information. In addition, sites commonly ask for an email address in order to email a receipt and update order status. The only aspect of registration that is not covered in a standard checkout transaction is a password. How to Present Optional Registration Before users enter the checkout process, clearly state that registration will be an option. Some users do want to register and like to see assurance that they can if they’d like to. If the option to create a password will be presented after the purchase is complete, rather than during the checkout process, tell users so they know when to expect the option. Under the Guest Checkout option, HomeDepot.com told users that “You will have the opportunity to create an account and track your order once you complete your purchase.” The size of the text could have been larger to make it easier to read, though it is good to present this information less prominently than the main text. Briefly highlight the benefits of registration from the users’ perspective and not the company’s perspective when asking users to register. Shoppers appreciate when sites emphasize aspects that would make the experience easier, such as order tracking or faster checkout. They sometimes complain about sites that stress “benefits” such as receiving email newsletters or becoming a member of the site. Mention customer-focused benefits when users start the checkout process as well as when customers are asked to create optional passwords. A brief bulleted list tends to work well to highlight this information. This list should not be a sales pitch for the site, but a brief reminder to users about how registering benefits them. Nordstrom.com told users that registration would let them, “Check out faster, Track your orders, Write reviews and more!" This nicely presented the information as a benefit to the user, rather than the site. Mark password fields as optional, so it’s clear that users do not have to register for the site. Also make sure to state password requirements so users aren’t left guessing how to create a valid password. Some sites do not mark the password fields as optional; instead they place the fields in a section of the page with the word “optional” in a heading. Users often skim web content, even when filling in forms, and may miss the optional designation if it is only displayed in the heading, rather than next to the field. When the fields are not specifically marked, users can misinterpret it as a requirement for registration. If they were previously told that registration is optional or have pursued guest registration on the site, this inconsistency can break the user’s trust. Staples.com listed the optional passwords fields in a section titled Optional Information. That heading was in close proximity to the password fields, which only appeared if a user selected the Create an account and make your next checkout easy option. Both these factors helped reinforce that the fields were optional. Simple and Optional Rather than forcing users to register before checking out, provide the option to register within the checkout process by presenting optional fields for the user to enter a password. This puts users in control and allows them to decide if it is worthwhile to register or not. In our e-commerce research, we saw users who had previously complained about forced registration happily register for sites where registration was limited to the option of creating a password in the purchase process. Forcing registration causes lost sales. Some users will leave the site, others will struggle with registration. It is common for sites that add guest checkout to immediately realize increased sales. It is a simple way to improve usability and encourage purchasing. The Characteristics of Minimalism in Web Design by KATE MEYER on July 12, 2015 Topics: Visual Design Web Usability Summary: Our analysis of 112 minimalist websites revealed the defining features of minimalism: flat design, limited color schemes, few UI elements, use of negative space, and dramatic typography. This article is the second in a series devoted to the understanding of minimalism in web design. If you’re interested in the origins of the movement, read The Roots of Minimalism in Web Design. A minimalist web-design strategy is one that seeks to simplify interfaces by removing unnecessary elements or content that does not support user tasks. In order to reduce a website to only its most necessary elements, designers must accept a cascade of consequences that impact both the user interface (UI) and the content of the site. Many of the visual-design characteristics commonly associated with minimalism are choices that serve the core strategy of minimalism particularly well, and so have been adopted along with minimalism in most instances. Web design, like language, is defined by the way people use it. The word ‘minimalism’ is thrown around a lot, yet it’s hard to pinpoint exactly what features define a minimalist web design. To more clearly define what constitutes a minimalist design in practice, we analyzed the design characteristics of a sample of 112 minimalist websites. Sites were selected for the study if they were either identified by an outside web-design expert as minimalist, or were included in an online gallery for inspirational minimalist sites, like siiimple. Remember that just because a design technique is popular doesn’t necessarily mean that it always supports user needs and optimizes profitability or other business objectives. In this study, we analyzed sites that are known to employ minimalist design, not sites that are known to be highly profitable. As discussed further below, our other research suggests that while some of these design ideas can support business goals, others can hurt your profitability. Defining Characteristics of Minimalism So what features were present in most of these designs? We included a feature among the defining characteristics of minimalism if it was present in at least three quarters (75%) of the websites that we analyzed. Flat Patterns and Textures Used in 96% of sampled interfaces (but often ineffectively) Over the past few years, there has been an overwhelming shift in the design community away from skeuomorphism, towards purely digital representations of things without physical metaphors. Flat interfaces don’t make use of any of the obvious highlights, shadows, gradients, or other textures that make UI elements look glossy or three-dimensional. Some designers believe that the flat-design trend grew out of the popularity of minimalist UI design (Müller, 2014). The two trends are extremely compatible; removing gratuitous shadows, gradients, and textures falls in line with minimalism’s primary goal of eliminating the unnecessary. In our sample, 96% of the minimalist sites were flat. The two tend to co-occur so frequently that the phrase ‘flat design’ is often (misleadingly) used interchangeably with ‘minimalist design.’ The trends are similar, but not the same. Flat design generally refers to the textures, icons, or graphics in an interface. Minimalist design applies to the larger or overarching content, feature, and layout strategies. An interface may be flat without being minimalist. Jeet.gs The Getting Started page for Jeet.gs grid system API features a completely flat interface, including ‘ghost buttons’ for copying code snippets. (Ghost buttons are empty buttons with a thin rectangular border and text.) Flat ghost buttons can have legibility problems, and they break away from the established convention of what a clickable button should be. (However in this case, the buttons highlight when the mouse passes over them, providing a dynamic signifier of clickability. Also, the buttons show a tiny 3D effect when clicked that adds a small sense of physicality. Thus, the interactive user experience adds depth to the flat interface elements.) As we’ve discussed in other articles, flat designs often fail to communicate to users which elements are selectable or clickable. We believe that a better approach is a compromise between flat and skeuomorphic—a mostly flat design, but with clickable elements that users can recognize easily. Considering that flat design is the design idea most likely to be used incorrectly and degrade the user experience, it’s unfortunate that it’s the most prevalent of the main characteristics of minimalist web design. Limited or Monochromatic Color Palette Used in 95% of sampled interfaces In most minimalist interfaces, color is used strategically to create visual interest or direct attention without adding any additional design elements or actual graphics. With less visual information vying for a user’s attention, color palettes are more noticeable and will be more influential in a site’s impact. Minimalist color palettes are a movement away from the clashing, loud colors of the web design popular in the 2000s. Subdued color schemes are intended to avoid upstaging the content—which, in the case of images, can still be brightly colored. Many minimalist designs are either monochromatic, or use only one bold color as an accent, and use it to—sparingly—highlight the most important elements of the site. These accented elements are usually clickable. When assessing the use of color in the sample websites, we looked at background colors, logos, navigational elements, iconography, and typography, but did not consider content images (like photographs) as part of the color palette. Almost half of the websites sampled (49%, 55 websites) used a monochromatic color palette. Almost as many websites used one or two accent colors in an otherwise monochromatic color palette (46%, 52 websites). Of those 55 monochromatic sites, 51 sites were grayscale-–they used exclusively white, black, and gray shades. Freres d'Encre The monochromatic homepage of Frêres d'Encre, a French tattoo studio, creates a dramatic aesthetic. Solo Solo, project management software, uses a monochromatic but not grayscale color palette. Kayak Travel metasearch engine Kayak uses orange to highlight its logo and the actionable Search button. The popularity of this particular characteristic is an improvement in the sense that it’s moving interfaces away from the loud, clashing color schemes that used to dominate the web. However, there are some considerations to keep in mind when applying a limited color palette: Make sure your color scheme uses enough contrast to be legible to people with limited vision or color blindness. Use accent colors intentionally and consistently to highlight very important information or primary actions. Restricted Features and Elements Used in 87% of sampled interfaces Designers who adopt a minimalist design strategy must consider each element in their interfaces and eliminate any that are not required to support the core functionality or message of the website. An ‘element’ in this context could be any individual unit of the interface: including but not limited to: menu items links images graphics lines captions textures (like gradients) colors fonts icons It’s difficult to assess whether an interface includes ‘unnecessary’ elements without directly asking the sites’ designers what they left out, and without knowing the target users and tasks. To make this characteristic measurable, we focused on assessing whether or not the interface contained graphic elements that did not serve any obvious purpose. In our sample, 87% of minimalist sites avoided gratuitous graphic elements. Alan Trotter's portfolio The portfolio of fiction writer Alan Trotter is severely minimalist. By default, the site doesn’t even reveal his full name: visitors must click the underlined text to get to more details. This strategy might achieve an ‘edgy’ aesthetic, but it’s a big gamble to hide the most important content. The more stuff there is in a user interface, the more stuff users need to process. A favorite mantra of minimalist designers is, “subtract it till it breaks,” which really means, “unless the absence of an element would be serious problem, get rid of it.” This is where designers can get distracted by the pursuit of a clean, modern, minimalist interface—and end up cutting out useful content. Adhering to a rigidly utilitarian approach can produce streamlined designs by eliminating distracting features and content. Just make sure you aren’t making your users’ primary tasks more difficult by removing or hiding content they need. It’s hard to understand a cluttered design or a system overflowing with extraneous features. But it’s even harder to understand a design that doesn’t provide sufficient scaffolding to explain its features or structure. Maximized Negative Space Used in 84% of sampled interfaces Removing or excluding elements from a web page necessarily leaves empty space. Negative space (also called white space) is the name given to the empty areas of an interface. Negative space has been called “practically synonymous with” and “the backbone of” minimalist interfaces. Many minimalist designers use it as a tool to try to direct users’ attention and allow them to digest content more easily. Considering these strong assertions of negative space as the defining characteristic of minimalism, it’s surprising that only 84% of the sample sites used substantial amounts of negative space in their designs. Thomas Buffet's portfolio The screenshot above shows the homepage of French designer Thomas Buffet as seen full-screen on a 15-inch MacBook Pro. Above the fold, the page is almost entirely negative space. In this case, the site is still able to answer the two primary questions people would ask upon arriving at this page: ‘who are you,’ and ‘what do you do’. But this approach will not work in all contexts. Appropriate use of negative space can help draw attention to important content. When deciding how to lay out negative space in your designs, be sure to consider the following questions. How will adding or removing negative space impact the communicated hierarchy of the page? How will the negative space impact what content is displayed at the top of the page? The page fold still matters: users will scroll if they have a reason to, but they pay more attention to the content at the top of the page. How will the negative space impact the interaction cost: will users need to work harder to get to the information that they need? How will the negative space need to change at varying resolutions? Dramatic Use of Typography Used in 75% of sampled interfaces Like color, bold or large typography becomes another tool for communicating meaning when there are few elements on the page. Effectively exploiting interesting typography can help compensate for having fewer elements like photos and graphics, and can make a minimalist design feel more visually engaging. Variations in font size, weight, and style become crucial in helping users understand the hierarchy and relative importance of text. Of the 112 sampled minimalist sites, 75% used typography to convey meaning or create visual interest. Alexander Engzell's portfolio The portfolio of art director Alexander Engzell uses bold typography on his tagline to create visual interest without adding extra graphic elements to the page. However, the text is an image file, which adds to page load time. Also, unlike the Buffet portfolio, this page doesn’t directly explain whose portfolio this is, or what this person does. Users have to click the INFO link in the upper right corner to access that information. Using images for text may allow you to use custom fonts, but it will add to page load time, will require extra considerations for scaling at different resolutions, and can cause accessibility issues. Using web fonts is a better solution, but bear in mind that web fonts can have detrimental performance effects as well. Remember, drawing attention to bold typography is only useful when that text communicates meaningful information. Beware of going overboard on the fancy typography: users can ignore overformatted text if it looks too much like advertising. There’s a delicate balance between meaningfully bold typography and distracting typography. A great designer will come down on the right side of this balance, but if your designers are less skilled in employing advanced typography it’s safer to err on the side of caution. Related Trends Some designers also include the following characteristics as minimalist. Based on our research however, these seem to be design trends that often co-occur with minimalism, but are not actually defining characteristics—they occurred in fewer than 75% of the sites that we analyzed. Large Background Images or Videos Used in 57% of sampled interfaces The presence of a large background image or background videos (enabled by HTML5) is one of the most debated characteristics of minimalist Web design. From a theoretical perspective, a large background image certainly seems contradictory to the core minimalist spirit of reducing non-critical elements. Despite this, large background images and videos are popular in minimalist designs—we found that 57% of our sample included them. Monte Re The homepage of Monte Ré, an Italian fruit producer, uses a full-width background-image carousel within an otherwise pure-white minimal site design that includes ghost buttons. While the text is technically distinguishable from the background images, it’s unpleasant to try to read and understand the copy while colorful images circulate behind it. Depending on the context and the designer’s priorities, an argument can be made for the ability of large background images/videos to create an impact on users’ perception of brand. When a background image is used for a carefully considered, strategic reason, sticking to minimalist-design strategies can help restrain other page elements from competing or clashing with the background. Additionally, some designers may hope that loud background images will keep otherwise minimalist designs from being too boring or stark. If you choose to use a background photo or video with your minimalist design, keep the following points in mind: Make sure the images or videos you choose serve a real purpose or help people understand the site—otherwise they’ll just distract your users from your actual content. Make sure the text is both legible and readable if you want people to understand it. Remember, legibility is the extent to which users can distinguish individual letters. Readability is how well they can process words, phrases, and scan the text. If you’re using a carousel or video, you need to test every possible background—every image or frame of the video, and at a variety of screen resolutions. Be aware of how big images and videos impact performance. Make sure you’re taking an adaptive approach so your mobile users aren’t waiting for a desktop-sized retina photograph to load over their network data connection. Don’t autoplay videos. Many users are frustrated by videos that play automatically without their consent, especially if those videos have audio. Avoid creating Harry-Potter-painting-style videos of people slowly moving around in the background. You don’t want to distract your users and creep them out. Grid Layouts Used in 43% of sampled interfaces In our sample, we found that 43% of the interfaces used grid layouts to organize content. While this percentage indicates it is a popular design pattern among minimalist designers, it seems that grid layouts are certainly not ubiquitous in their designs. When grid layouts are used in minimalist UI designs, it’s generally for two reasons: Grids are an effective method of organizing homogenous content on the page linearly without adding any visual elements; and Grids are particularly helpful when designing a responsive website—another trend that is separate from minimalism but often co-occurs with minimalism. Paprika The graphic design agency Paprika organizes its projects in a grid, but is not responsive. Sea Chant portfolio The minimalist portfolio of photography studio Sea Chant organizes photographs in a grid at desktop screen widths. Sea Chant portfolio At 400px wide, the Sea Chant portfolio is reduced to a single column of content and removes all hover effects. Circular Graphic Elements Used in 16% of sampled interfaces Some design experts have suggested that circular and rounded graphic elements could be a component of minimalism, but we found only 16% of our sample used them. They seem to be more of a fad. Gesture Theory The homepage of Gesture Theory uses multiple circular elements in its minimalist design. Hidden Global Navigation Used in 13% of sampled interfaces Many websites currently use severely reduced global navigation elements in their desktop presentations, such as the now infamous hamburger menu. This can sometimes be the result of an incomplete mobile-first design strategy that fails to consider the needs and extra screen space available to desktop users, but it can also result from overzealous minimalism. Hiding infrequently accessed items might make sense for your goals, but make sure you aren’t hiding tools or links that are critical to the tasks you want your users to perform. Be particularly cautious if your site has large amounts of content or categories. Visual Soldiers portfolio The desktop portfolio site of design agency Visual Soliders uses a hidden global navigation under a hamburger menu. Visual Soldiers portfolio These few menu items hidden in an overlay could have been made visible globally, but were probably hidden to achieve this ultra-minimalist effect. Commonly Occurring Characteristics of Minimalist Interfaces Our analysis of 112 websites revealed the following defining characteristics for a minimalist website: Flat rather than skeuomorphic patterns and textures Use of a limited or monochromatic color palette Strictly limited features and graphic elements Maximized negative space Dramatic use of typography to communicate hierarchy or create visual interest Some of these characteristics are used almost ubiquitously in minimalism, and some occur slightly less frequently in minimalist interfaces; however, all of the defining characteristics were present in at least 75% of the minimalist sites that we analyzed. In our research, we also identified several related trends that were present in less than 75% of the sampled sites. Large background images or videos Grid layout Circular graphic elements Hidden global navigation Conclusion 2000s interface design was predominantly cluttered and overwhelming. For years, we’ve been advising against this kind of “maximalism”. Feature bloat and gratuitous content is always bad for users. In theory, minimalism should move us away from maximalism, and result in streamlined content and more efficient user task flows. In practice however, we’ve seen minimalism mutate into a superficial visual trend as designers copy popular minimalist characteristics without seriously considering if they support their own site goals. Just as flat design is a reaction to skeuomorphism, minimalism is a reaction to maximalism. In both cases, we strongly advise a balanced approach. A minimalist design strategy can be a powerful tool, but only when it’s framed by the needs of your users—minimalism for minimalism’s sake alone doesn’t help users. (Minimalism is one of the design strategies discussed in the full-day course on Generating UX Redesigns From Broad Design Principles.) Share this article: Twitter | LinkedIn | Google+ | Email Learn More Research Reports Strategic Design for Frequently Asked Questions Full Day Training Courses Top Web UX Design Guidelines The Human Mind and Usability UX Basic Training Web Page UX Design: Optimizing Pages to Deliver on Business Goals Visual Design for Mobile and Tablet: Day 1 and Day 2 Articles The Fold Manifesto: Why the Page Fold Still Matters 10 Usability Heuristics for User Interface Design Banner Blindness: Old and New Findings Scaling User Interfaces: An Information-Processing Approach to Multi-Device Design Teenage Usability: Designing Teen-Targeted Websites How Iterative Testing Decreased Support Calls By 70% on Mozilla's Support Website by SUSAN FARRELL on August 2, 2015 Topics: Agile Prototyping User Testing Summary: User research with data mining and paper prototyping quickly led to measurable success for one of the busiest support websites in the world. One of the more frequent questions that we get asked by our clients or by our seminar attendees is: "Is a redesign for usability worth it?" In other words, what is the return-on-investment (ROI) of a redesign? In recent years, we've seen a decline of the ROI for usability, most likely due to approaching a ceiling of usability improvements: With more than 20 years of web-design experience under their belt, designers have learned a few things and fixed quite a few problems. But a redesign for usability can still save you a significant amount of money. In this article we tell the story of Mozilla's support site, which was able to get a 233% improvement out of a redesign for usability. (Here's an explanation of how the improvement score was computed.) Thus, we can say that the redesigned site was about 3 times better than the original site. The cost involved in this redesign was 14 person-weeks or 560 person-hours. Is it worth spending 14 weeks to become 3 times better? This depends on the hourly rate for your staff and the value of your site and thus cannot be answered in general. However, for Mozilla, which gets huge amounts of traffic, the improvement is certainly worth the trouble, as it would be for almost any big site or company that does substantial business online. So how did Mozilla do it? What was involved in this redesign? Who is Mozilla Mozilla is a large, open-source, worldwide, software organization staffed by both employees and volunteers. It makes one of the most popular web browsers (Firefox), along with other useful products and services. Pain Points Millions of people come to Mozilla's support website every year to get help with Firefox and other products and services. When users cannot get an answer from the information existent on the site, the Mozilla staff aims to help by answering each person's question in the user-support forum, and to respond to questions as quickly as possible. As Mozilla's website had grown organically, users were having difficulty finding information and the support staff couldn't keep up with the number of questions in the forums. Specifically: At about 400 pages or so, the help documentation had become a difficult place in which to locate particular information quickly. The forum staff (employees and volunteers) were having trouble responding to questions as quickly as they wanted to, because of the increasing number of incoming questions for the rapidly updating Firefox. The forum overload was also making it difficult for staff to find time to write new help articles for frequently asked questions. More articles could help, but the growing number of articles also caused more findability problems. Action Plan Mozilla decided to invest in discovery and iterative usability testing in order to improve the IA of its support site. The research questions aimed to understand (1) how people (users and staff) used the support system; (2) which types of information were really important. Top research questions Mobile Faceted Search with a Tray: New and Improved Design Pattern by KATHRYN WHITENTON on July 26, 2015 Topics: Mobile & Tablet Search Visual Design Summary: Displaying faceted-search controls on mobile devices in a ‘tray’ overlay is a new effective solution to the challenge of showing both results and filters on small screens. Recently, a few big brands have introduced a new method for displayed facet controls on mobile devices, by placing them in a ‘tray’ overlay on top of the actual results. This new design approach addresses a major shortcoming typical of many faceted search displays on mobile devices: the placement of facet controls on a separate screen, which forces users to work harder to understand how the facet controls affect the results set. But before understanding why this is the case, let’s go back to the basics of faceted search. What Makes Faceted Search Special? Faceted search lets users refine a set of results by applying filters that comprehensively describe the search space. Such narrowing is invaluable for users who need to find something specific within a large content set. This type of search has become common for ecommerce and travel websites, as well as many different types of document and media collections. A faceted system includes two critical elements: Simple controls to construct sophisticated searches: Providing familiar controls like drop-down menus and checkboxes with natural-language labels empowers ordinary users to narrow down a large set of results to a small set that meets their exact criteria—without any special knowledge of Boolean logic or query syntax. Simultaneous display of the facet controls and the results: Showing both the filters and the results at the same time makes it easier for users to understand the relationship between the two; ideally, this is reinforced by dynamically updating the results set as soon as the user selects a filter criteria. The simple filter controls are the most obvious component of a faceted system. However, the importance of simultaneous display should not be underestimated. Long before faceted search became popular, we had ‘advanced search’ screens with similar controls for creating complex search queries. The big difference introduced with the first faceted navigation system was in displaying the facet controls and the results at the same time, which makes the effects of each filter instantly visible. This innovation embodies 2 of the 10 usability heuristics: provide rapid system feedback, and offer users control and freedom. Challenges of Displaying Search Facets on Mobile Devices Faceted search was originally designed for desktop and laptop users. Translating this experience onto a mobile device is difficult, because the very thing that makes faceted search so helpful to users – being able to see the filters and the results at the same time – is difficult to achieve on a small screen. There simply isn't enough space to show a full set of facets and a decent number of detailed results simultaneously. Until recently, most mobile designers haven’t even tried to display facets and results at the same time, instead opting to place them on separate screens. But this solution forces users to navigate to the facet-control screen, make their selections, then navigate back to the results set to see the effects of their selections. The istockphoto.com mobile website illustrates the typical approach to providing faceted search to mobile users. The results page includes an icon that users can tap to open the facet controls (assuming they can figure out what the icon means). Once the facet controls are displayed, users can select different filtering criteria, but it’s not obvious how the results will be affected by the facet selection because: None of the results are shown on this screen. The number of files, displayed in the page header updates too slowly. The header showing the number of files may not even be visible once a user has scrolled down to expand and select the facets below. Due to these limitations, users have to return to the previous screen in order to find out whether their filter selections were effective at targeting the best results and whether they have narrowed the results set down to a manageable size— or if perhaps they've applied such restrictive criteria that no results match. Mobile search results and facet controls on iStockphoto.com Left: Like many mobile search designs, iStockphoto.com does not display faceted search controls on the actual search results page. Instead it requires users to navigate to the facet controls, in this case via a cryptic icon composed of lines and circles on the right edge of the Search bar. Right: The facet controls take up the entire screen, and in order to see the effects of their selections, users must navigate back to the results screen. New Solution: ‘Tray’ Overlay to Display Facet Controls Recently a new approach to providing faceted search for mobile users has appeared: showing the facet controls as a ‘push-out’ style tray on top of the search results. This design allows for continuous visibility of results: even while the facet controls are open, some information about the results is visible in the background. The Amazon iPhone application and eBay’s mobile website both now use an overlay to display facet controls on the same screen as the search results. Mobile Facet Tray Overlay Examples Amazon’s iPhone application (left) and eBay’s mobile website (right) both recently introduced an overlay to display search facet controls on the same screen as the search results. Design Pattern Elements Both the Amazon and eBay designs include several details that combine to create a good user experience: Once activated, facet controls appear in a vertical panel overlaid on top of the results screen. The results are always visible in the background, and can be seen to change as the user makes her facet selections. (However, in the case of eBay, users can hardly make out what the results are. Amazon’s design is better because users actually get useful information from the background.) The total number of results is always visible, even if the user has scrolled down a long list of facets. (Amazon accomplishes this by fixing the header at the top of the screen so that it remains visible even as the list of facets scrolls up or down). A translucent gray shadow slightly obscures the underlying results and ensures that the facet controls stand out. The facet panel appears at the right edge of the screen, leaving the left edge of the results visible. (This is helpful because the left edge is more likely to have meaningful content; with Amazon you can actually see the product images.) (You may also notice that both Amazon and eBay use actual words – Filter and Refine – as the commands to access facets, rather than a special symbol. Any of the labels commonly used for faceted navigation – narrow your results, refine, and filter – are far more understandable than cryptic icons, and definitely worth the extra space. ) Why Is Simultaneous Display of Results and Facet Controls Important? In usability testing, I am always amazed at how successful people are at immediately understanding and using faceted search screens, which tend to include many different elements and controls. As long as the controls are displayed properly, most people jump right in to creating and refining their queries. Instant results are an important part of the process because they allow users to see right away if they have applied the wrong filter, or applied overly narrow criteria that eliminates too many options. Both of those errors are very easy to recover from if you can instantly see the effects of your actions, but without this visibility users can end up in a tedious cycle of pogo-sticking between the results and the filters. The facet ‘tray’ approach illustrated by Amazon and Ebay doesn’t provide complete visibility, since only a small part of the results screen is visible. But these creative solutions offer at least some visibility into the effects of applying a filter. Users may still find that they need to close and re-open the facet controls, but this approach feels more like expanding a part of the current page, rather than jumping back and forth between different pages. Find out more about the best approaches for visual displays on smaller screens in our full-day courses about Indicators, Validations, and Notifications: Pick the Correct Communication Option by KIM FLAHERTY on July 26, 2015 Topics: Applications Standards Summary: Status feedback is crucial to the success of any system. Knowing when to use 3 common communication methods is key to supporting users. In interaction design, a system, whether an application, website, or piece of hardware (anything from a smartwatch to a thermostat), should always keep users informed, by providing appropriate feedback. Ensuring that the state of the system is always visible is one of the 10 usability heuristics for interface design. Information about system status, such as error messages and notifications of system activity, allows users to fully understand the current context. The best way to communicate system status varies depending on several key factors: The type of information being communicated The urgency of the information — how important it is that the user sees it immediately Whether the user needs to take action as a result of the information Three common approaches for status communication include validation, notifications, and status indicators. These terms are used sometimes interchangeably in product design, but they stand for different communication methods that should be used in different circumstances. Understanding the differences between them will help you sharpen your feedback to users by choosing the best option for each need. Indicators An indicator is a way of making a page element (be it content or part of the user interface) stand out to inform the user that there is something special about it that warrants the user’s attention. Often, the indicator will denote that there has been some change to the item represented by that element. Although, as we’ll see later, indicators are used quite frequently to signal validation errors or notifications, they can also be used on their own. Indicators are visual cues intended to attract users’ attention to a particular piece of content or UI element that is dynamic in nature. (If something always looks the same, it’s not an indicator, no matter how flamboyantly it’s designed.) There are at least three possible ways of implementing indicators: Oftentimes, but not always, indicators are implemented as icons. Easily recognizable icons can make very effective communication tools. Typographical variations can also be used as indicators; examples include the common convention of boldfacing unread email messages or color-coding stock symbols in an investment account if their price has changed substantially. Though less common, enlarged size or animation (e.g., vibration) can also be used to make certain items stand out from the crowd and thus serve as an indicator. Yelp used a green-tag indicator in the search results to indicate that Tea Market had a special deal running. This indicator communicated additional information about Tea Market. Characteristics of indicators: Indicators are contextual. They are associated with a UI element or with a piece of content, and should be shown in close proximity to that element. Indicators are conditional— they are not always present, but appear or change depending on certain conditions. For example, a stock-performance indicator, such as the one in the American Century example below, may change to indicate if the stock price is increasing or decreasing. Additionally, the tag indicator in the Yelp example above only appears if there is a deal at that business. Indicators are passive. They do not require that a user take action, but are used as a communication tool to cue the user to something of note. American Century Investments used a conditional indicator to provide information regarding a specific stock’s performance. When the daily change was negative, the indicator was a red arrow pointing down. When the daily change was positive, it showed a green arrow pointing up. The condition of the stock performance impacted the indicator that was shown next to the price. Indicators can introduce noise and clutter to your overall interface, and may distract users, so it is important to consider how many (if any) indicators to use in your design. Consider the following when deciding if an indicator is appropriate: How important is the information to the user? Is it worth taking up space on the page to inform the user? How often is the information used? Would the user expect to see the information? Would it be missed if it weren’t provided? How important is it for the application that the user discovers the information? Validations Validation messages are error messages related to users’ inputs: they communicate whether the data just entered was incomplete or incorrect. For example, in e-commerce systems, validation messages often involve information such as name, billing address, and credit-card information. Cobragolf.com provided a validation message that clearly indicated which field was in error. The message however was complex and confusing. A better message might say “Please enter a valid email address.” Characteristics of validation: A user needs to take action to clear the validation message. The information in the validation message is contextual and applies to a specific user input that has a problem. The way in which validation should be implemented varies based on the unique needs of the form. However, in general, if the user’s input is incorrect, the system should inform the user by providing an identifiable and clear message that aids in correcting the error. Validation messages should follow the guidelines for error messages rather than simply identifying the problem, they should tell users how to fix it. For instance, don’t state “Field is blank.” Please enter your street address” is more polite and directs to a solution. Since validation is contextual, it can be helpful to use an icon indicator along with the validation message to help communicate which input(s) are missing or need corrected. Bestbuy.com provided a helpful validation message telling users how to fix the problem and also used an icon indicator and a different color to attract users’ attention to the field that needed correction. Notifications Notifications are informational messages that alert the user of general occurrences within a system. Unlike validation, notifications may not be directly tied to user input or even to the user’s current activity in the system, but they usually inform the user of a change in the system state or of an event that may be of interest. In the case of email, social networks, and mobile-phone applications, notifications can even be delivered while a user is away from the application. Notifications can be contextual —applying to a specific UI element— or global —applying to the system as a whole. The Facebook App used a contextual notification in the news feed to communicate that newer stories had been added to the feed. This notification does not require the user to take action. Characteristics of notifications: They are not triggered by users’ immediate actions. They announce an event that has some significance to the user. There are two main types of notifications, which differ based on whether the user is required to act upon the notification: Action-required notifications alert the user of an event that requires a user action. In this sense, they are similar to validation, but since they were not sparked by the user’s own action, they require a different design. Action-required notifications are often urgent and should be intrusive; for instance, they could be implemented as modal popups that interrupt the user, forcing immediate attention and requiring an action to be dismissed. The Mac operating system used a notification to inform users of available system updates. The user had to explicitly dismiss it from the screen, by opting to either install the update or to be reminded again at a later time. This is an intrusive notification that requires that the user take action. Passive notifications are informational; they report a system occurrence that does not require any user action. Many notifications in mobile apps are passive: they usually announce an event of potential interest to the user. Passive notifications are typically not urgent and should be less intrusive. A typical implementation of a passive notification may be a badge icon or a small nonmodal popover in a corner of a screen. Passive notifications can easily be missed, since they require no user action. When the information provided by the notification is key to the understanding of the system, an easy-to-ignore passive notification can be problematic. Adobe Creative Cloud used a nonintrusive passive notification to inform the user of an available application update. This notification appeared on screen for several seconds before disappearing. The user did not need to take any action on it. Uniqlo.com used a nonintrusive passive notification to provide feedback that an item was added to the shopping cart. No action was necessary to dismiss the notification. Such notifications sometimes cause issues for e-commerce shoppers who do not notice the brief messaging. Users who miss the message may respond by adding an item to the cart multiple times, or by disrupting their shopping flow to check the cart to see what items were added. Notifications have the design challenge that they are not the immediate and obvious result of a specific user action. On the contrary, the user is likely in the middle of doing something different and may not be thinking about the issue raised by the notification. This requires notifications to establish more context and provide users with sufficient background information to understand what the notification is about. (In contrast, with a validation, the user has just done the thing that needs to be corrected. Thus, the validation message doesn’t need to educate users about the task at hand. For example, if an e-commerce checkout form has a field for a credit-card expiration date that was left blank, the validation message doesn’t need to say “Please provide the expiration date for the credit card you want to have charged $29.90 to pay for the blue sleeveless dress you are in the process of buying on Uniqlo.com.” However, a notification the following day that the dress has been shipped from the warehouse would need to say more than “Your package has shipped.”) If a notification is contextual and relates to a specific element in the interface, an icon indicator on the element can communicate where that notification applies and catch the user’s attention. For instance, an indicator badge on a mobile-app icon shows that the user has received a notification from the corresponding app. The iPhone messaging app created a notification to communicate that a new message was received. Along with the notification, an indicator badge was placed on the messaging-app icon to communicate where the notification applied. To clear the indicator, the user had to view the message. Mint.com used an indicator together with a notification to communicate that an account needed attention. The warning indicator (1) appeared in close proximity to the summary of the account that needed attention, while the notification (2) appeared in the central area of the page with other important information. The actual text in the notification message could have been more helpful, though. Picking the Right Communication Option Is Important Using the wrong communication method can have a negative impact on the users’ experience. Let’s refer back to the scenario above where Yelp utilized a green-tag indicator in the search results to indicate that Tea Market had a special deal running. This information is contextual and important to users who have specifically searched for a place to have tea. You may think that an alternative way of alerting users of potential tea deals would be to send them a notification when such a deal has become available. Wrong! A notification sent irrespective of the current user goal would likely be ignored, and may even annoy users because it will disrupt their current task and be irrelevant to their current needs. (In general, any type of ad tends to be ignored unless it is related to the users’ aims and mindset.) Alternatively, a toast (a small nonmodal popup that disappears after a few seconds, like the New Stories one used by the Facebook app), while appropriate for passive notifications, would be a bad way to implement an error message, be it validation or otherwise. In fact, one of our mobile users spent 5 minutes waiting for some content to load only because she hadn’t notice the little error message presented at the bottom of the screen that quickly faded away after 5 seconds. Allmodern.com used an action-required notification to communicate that a product was saved as a favorite. For a user that is saving a lot of items to their favorites, this can be a bothersome and intrusive way of providing feedback. This may be better communicated by showing a passive nonmodal popover in the corner of the screen that can be seen, but doesn’t require the user to take action to clear it. Conclusion Remember the key differences between the three communication methods are: Indicators provide supplementary information about a dynamic piece of content or UI element. They are conditional —that is, they may appear or change under specific conditions. Validations are tied to a user’s action or input. Notifications are focused on system-related events. These differences are summarized in the table below: Validation Notifications Indicators Global vs. contextual: Related to a global system event or to a particular page element Contextual Global or contextual Contextual Passive vs. requiring a user action Action required Action required or passive Passive Triggered by user action vs. system event User action System event User action or system event Understanding when and how to use each of these feedback tools is important in order to build consistency in the communication to users. By assessing the type of information delivered, we can determine the correct mechanism to use. How do users and staff interact with the support system? Which problems are the most important to address in the website redesign? What is the most-wanted information? Which words do people use when they search? Which desired information seems to be missing? How can the information best be organized and presented in order to match what users most want to do on the website? The UX Team The UX team consisted of 3 members: Susan Farrell, Senior User Experience Specialist, Nielsen Norman Group. Susan conducted the research, did data discovery, analyzed data, and made design-change recommendations. Crystal Beasley, Product Designer, Mozilla. Crystal led the project, coordinated with Mozilla stakeholders, and played the computer during paper-prototype research sessions. Bram Pitoyo, Web User Experience Designer, Mozilla. Bram designed the task flows and prototypes and supervised the interaction-design changes to the website. He also tested the old IA so we could compare results with the tests of the proposed new IA. The Steps We employed a variety of research methods intended to help us understand users' needs and also to redesign the IA and the workflow on the support site: Doing data discovery and analysis, to understand how users behave on the support site and why In particular, we looked at a variety of data sources to identify users' top tasks, as well as difficulties that they had with the current site. The table below summarizes the methods that we used. Headings Are Pick-Up Lines: 5 Tips for Writing Headlines That Convert by HOA LORANGER on August 9, 2015 Topics: Writing for the Web Summary: Attractive headlines and titles are critical in making the right first impression. Concise titles that sound authentic and relevant get noticed. A headline is often the first piece of content people read. And often it is the ONLY thing people read. If you want your encounters with people to be successful, make sure to write solid headlines. Have you ever tried to retell a story you read only to realize the details are fuzzy because you had only read the headline? This is a sign of a memorable headline. Good headlines entice readers and are critical to the success of your website. Below are 5 tips for writing engaging headlines: 1. Make sure the headline works out of context. We often think of headlines as being connected with the associated story. However, on the web, headlines usually appear out of context in places such as search results, social-media streams, blog posts, and news feeds. Headlines must be strong and descriptive, especially when standing alone, stripped of supporting content. Can you guess what the heading below refers to? New times call for new decisions The headline contains low information scent—that is, few cues to suggest what the story is about. People rely on visual and textual cues to perceive the usefulness of the content. They don’t spend time making inferences and trying to figure out items that don’t make immediate sense. Minimize cognitive load to maximize usability. Treat headlines like microcontent—phrases that can be scanned and still give readers a clear idea of the underlying information. 2. Tell readers something useful. Consider the decision-making process from the users' point of view. When faced with a barrage of links, their time is best spent clicking on headings that have the highest probability of providing value. Useful headings are specific. They provide facts or information that pique the readers’ interest. Avoid broad and generic headings. They don’t provide value or differentiate you from your competitors. Tell people something they don’t know and that benefits them. Headings that contain user-centric language are much more refreshing than vague ones that require guesswork. This headline is too broad: Make better, faster decisions with data visualization Contrast it with: Data visualization helps you detect and prevent fraud faster The second one is better because it is more specific and provides a concrete benefit that might arouse the reader’s curiosity. 3. Don’t succumb to cute or faddish vocabulary. Minimize hype and idioms (expressions). They are often vague, obscure meaning, and often change the tone of copy, usually for the worse. Consider this headline: Get the most bang for your buck with XYZ The headline above sounds pretty tacky and inauthentic, and degrades credibility. In addition, idioms such as “bang for your buck” often lack meaning to nonnative English speakers. Don’t be tempted to include overly informal language to sound modern and hip. It is much better to aim for clarity and authenticity. Keep your headlines straightforward by using familiar keywords. This is better: Increase productivity by 24% with XYZ Of course, there are exceptions to this rule. You can use specialized language when you address a specialized audience; in those cases jargon improves communication. However, before you sprinkle jargon all over your copy, verify that your entire audience truly understands it. 4. Omit nonessential words. The one place worth practicing being concise is in headlines. Spend time editing headlines to cut unnecessary words and tangled messages. Shorter headlines require less cognitive effort. And longwinded headlines don’t scale well to variable container sizes: they have a higher chance of being truncated when displayed on small mobile screens, for instance. Convoluted headlines like this lose readers: Caster, a technology company, buys Mitchell, with assistance from Jon & Smith, for $1.2B There are too many details that obscure the gist of the heading. The sentence also contains three commas, which create a jerky, start–and–stop effect. The headline can be made smoother by removing less important details, as in the versions below: Caster buys Mitchell for $1.2 billion –or– Jon & Smith orchestrates $1.2 billion deal for top technology firms 5. Front-load headings with strong keywords. One of the best ways to get traffic to your site is to front-load your headlines with keywords. Moving keywords to the front of titles increases the likelihood that they get noticed. Our eyetracking studies show that readers pay most attention to the first few words in lists. Don’t count on people reading the end of sentences. Let’s compare the following headlines: (1) Behold the new technologies for creating 3-D imagery and (2) Creating 3-D imagery gets easier with new technologies The first one runs the risk of not being read because the key phrase (creating 3-D imagery) is positioned at the end. Users must read the entire headline to understand its meaning. The second one is better. Moving the keywords to the front makes the heading more scannable. People can read only the first few words and still understand what the article is about. Conclusion Make a good first impression with short, keyword-leading headings that sound authentic, contain useful information, and make sense out of context. Try to follow all of these tips in one headline and you should notice a lift in user engagement. The Freelance Studio Denver, Co. User Experience Agency The Roots of Minimalism in Web Design by KATE MEYER on June 28, 2015 Topics: Human Computer Interaction Visual Design Web Usability Summary: Many of today’s most popular design trends are influenced by minimalism. This web design movement began in the early 2000s, but borrows its philosophy from earlier movements in the fields of fine art and human–computer interaction. Many of today’s most popular design trends (including flat design, large background images, and hidden global navigation) are directly or indirectly influenced by minimalism, a web-design movement that began in the early 2000’s, but borrows its philosophy from earlier movements in the fields of fine art and human–computer interaction. Minimalism sometimes presents as an attempt to prioritize content over the chrome and, when applied correctly, it can help you focus your design to simplify user tasks. Unfortunately, some designers misinterpret minimalism as a purely visual-design strategy. They cut or hide important elements in pursuit of a minimalist design for its own sake—not for the benefits that strategy might have for users. They’re missing the core philosophy and the historical context of minimalism, and they risk increasing complexity rather than reducing it. To better grasp and apply minimalist principles, we need to understand the origins of minimalism and its fundamental characteristics. We explore these topics in a series of two articles: In this first article we define minimalism and look at its history; in a second article we analyze in depth the characteristics of minimalist design and their impact on usability. What Is a Minimalist Interface? When employed correctly, the goal of minimalist web design should be to present content and features in a simple, direct way by providing as little distraction from the core content as possible. This strategy often involves removing content or features that don’t support the primary goals of the interface or its users. Although there is some debate about what exactly qualifies as minimalist web design, there are a few common features that most designers can agree upon. These include flat textures, limited color palettes, and the use of negative space. These and other specific characteristics and their frequency of use in minimalist websites are discussed in detail in the next article in this series. Minimalism is a reaction to bloated, or “maximalist,” UI design. Examples of such maximalist design include Flash intros and gratuitous animations, or applications crammed with as many esoteric features as possible (like Microsoft Office before the 2007 rethink). Brian Danaher's portfolio The portfolio of designer Brian Danaher is a typical example of what many designers would call a minimalist site. When viewed full screen on a 15-inch MacBook Pro, the homepage is almost entirely white space. The site uses a grayscale color palette with a single bold accent color to draw attention to clickable elements—a popular strategy among minimalist designers. Brian Danaher's portfolio Danaher’s site includes very few distractions from its primary content. Minimalism is well suited to portfolio sites like this one, which have fairly simple goals, relatively low amounts of content, and very similar information on most pages. Applying minimalism effectively to more complex sites can be much more difficult. Minimalism’s Rise to Popularity 1960s Decades before minimalism was a trend in web design, it was a visual art movement in the era following World War II. It emerged as a reaction to the chaotic colors, motion, and marked subjectivity often found in abstract expressionists works (such as the drip paintings of Jackson Pollock). It was heavily influenced by the famous German art movement Bauhaus, which focused on simple yet functional design. In the 1960s, minimalism became popular in a variety of fields, particularly fine art and architecture. In visual art, minimalism was characterized by monochromatic palettes, geometric elements, serial arrangements, and industrial materials. Jackson Pollock's Full Fathom Five Jackson Pollock’s Full Fathom Five (1947) in The Museum of Modern Art. Minimalists of note include graphic designer Josef Müller-Brockmann, painter Ellsworth Kelly, and industrial designer Dieter Rams. Note the clean lines, simplicity, and sparing use of color in each of these examples. Despite the wide variety of mediums, a coherent design style is perceptible. Ellsworth Kelly's Brooklyn Bridge VII Ellsworth Kelly’s Brooklyn Bridge VII (1962) in The Museum of Modern Art. Radio by Dieter Rams RT 20 tischsuper radio, 1961, by Dieter Rams for Braun. Unmodified CC image courtesy of Vitsoe. S.R. Crown Hall S.R. Crown Hall, designed by Ludwig Mies van der Rohe, 1956. Unmodified CC image courtesy of Peter Alfred Hess. The perspective behind minimalist art was neatly summarized by the motto of famous 20th century architect Ludwig Mies van der Rohe: “Less is more”. This motto would later become the spirit and unofficial mantra of minimalism in web design: fewer elements on a page results in lower cognitive load for users. 1980-2000 At the end of the twentieth century, minimalism began to take shape as a separate trend within the field of human–computer interaction. In 1983, data-visualization expert Edward Tufte introduced the concept of a data–ink ratio in his work, The Visual Display of Quantitative Information. In print media, the data–ink ratio is the ratio between (1) the amount of ink that communicates information, and (2) all the ink used to print the graphic. Tufte advocated maximizing this data–ink ratio by removing any elements that do not reasonably contribute new information. Data–Ink Ratio = Informative Ink / Total Ink This concept of data–ink ratio can be applied to web interfaces by considering the content–element ratio for any interface. The goal is similar: a high proportion of the amount of meaningful elements relative to all elements in the interface. In 1990, HCI researcher John M. Carroll was studying the ways people used technical training manuals, and looking for ways to improve them. From his research, he developed the theory of minimalism in technical communication. Carroll’s theory suggests that a successful design will support quick action by prioritizing brevity. Carroll stressed that reducing a design to its most basic elements is not the end goal of minimalism. Rather, Carroll championed brevity and simplicity in the service of task-oriented results. To position this approach towards web design, Carroll’s minimalism translates to getting the interface out of the way, in order to allow users to achieve their goals. In 1995, Jakob Nielsen included minimalist design in his 10 usability heuristics. His use of the term aligned with Tufte’s and Carroll’s sense of minimalism, as he advocated eliminating irrelevant information from interfaces. 2000s Beginning in the mid 2000s, echoes of the minimalist art movement began to appear in web interfaces: larger swaths of negative space, lower amounts of content, and restricted color palettes. Google is often credited as the pioneer of minimalist web interfaces. Google has prioritized simplicity and austerity in its interfaces ever since its beta offering in the 1990s. Google, 1999 Google’s homepage (1999, via Wayback Machine) Even though Google now offers a huge variety of products from Google Drive to YouTube to Gmail to Google Maps, its homepage has changed very little over 15 years. Only three navigation options are visible: in order to access the rest of Google’s offerings, users must use the grid icon to expose a tray of more options. Google, 2015 Google’s homepage (2015) In spite of early trendsetters like Google, it took time for minimalism to catch on in web design. In the early 2000s, crowded interfaces dominated the web. During our impression testing sessions at that time, users overwhelmingly described the interfaces as ‘busy’. Slowly but surely, minimalism found a foothold with early adopters: the web designers, graphic designers, artists, photographers, architects, and developers. Designer and blogger Emily Chang wrote about the rise of minimalism in 2006: Perhaps it’s the success of Google’s search page, or our collective reaction against the flashing banner ads and intrusive popups of the last decade, or the Jonathan Ives effect, but it’s as though web users, designers, and developers alike have all agreed to a new de facto standard of Mies van der Rohe’s ‘less is more.’ Chang’s assertion that all web users and professionals embraced minimalism was definitely not accurate in 2006, and may still be an exaggeration today. However, it is reasonable to assume she did speak for the emerging popularity of minimalism among people who are deeply immersed in the cutting-edge trends of the web. 2010-2013 The emergence of responsive web design (RWD) in 2010 primed the wider web to appreciate a minimalist approach. To effectively utilize RWD techniques, organizations must carefully prioritize their content—distractions from primary content that could be ignored on desktop become big problems on mobile. Slowly user and designer preferences began to lean towards greater simplicity in web interfaces. This shift was underscored by major redesigns carried out by two tech industry giants: Microsoft’s Modern design in 2011, and Apple’s release of iOS7 in 2013. Microsoft’s release of Windows 8 in 2011 was the first major redesign of its operating system in decades. At the same time, it announced its design philosophy, “modern design”. This new design philosophy was quintessentially minimalist, drawing directly from the minimalist art movement. Microsoft’s official design documentation even claims that the Bauhaus school is one of its fundamental design pillars. Windows 8 Windows 8 ‘tile’ view Though Apple has worked hard to define its brand in simplicity, Apple designers have historically—and controversially—favored skeuomorphic patterns in their interfaces. In 2013, Apple radically revamped iOS to a much flatter and more minimal style with iOS7. Apple’s decision to move toward a more minimal and flat design particularly underscores the popularity of the trend, given that it fundamentally contradicts the brand’s historic design style. iOS7 Apple’s iOS7 2014-2015 Minimalist design principles are now showing up in new and unexpected places: e-commerce sites, online publications, and even educational sites are adopting minimalist trends and strategies. Many one-stop website-design and hosting services like Squarespace, Weebly, Wix, and Volusion now provide stock site templates that are almost entirely minimalist designs. These offerings are particularly significant because they often target people with no development or design experience—people who want to set up their online bike store or bakery website or online wedding invitation without having to touch Illustrator or a line of HTML. These services are selling minimalist websites because they believe it’s what their customers want. Squarespace's Galapagos theme Squarespace’s ‘Galapagos’ theme Today, minimalism has branched into and overlaps with other prominent web-design trends such as flat design, responsive web design, and clean design. Minimalism’s contributions to these trends will be discussed in detail in next week’s article. The Usability Debate: Is Minimalism Good for Users? Minimalism is a design strategy that significantly influences content and information-architecture decisions. As a result, minimalism has a definite impact on the usability of the interfaces that adopt it. Unsurprisingly, the usability of minimalist-design styles has become the subject of debate amongst web professionals. Proponents argue that minimalism reduces information overload: the more features and content you can cut out, the less people have to deal with. Minimalism done well can also create a positive emotional experience for users. People do tend to respond better to aesthetically-pleasing interfaces. As Don Norman points out, when using such interfaces they are more tolerant of usability obstacles, as long as those flaws are minor. Since Nielsen Norman Group was founded in 1998, we have been forceful critics of maximalist (i.e., bloated) web design. You might expect us to be enthusiastic supporters of minimalist web design, but that’s not the case. When designers adhere too rigidly to a minimalist ideology, they risk ending up with wastefully low information density and poor findability and discoverability. Extreme minimalism can be useful as an internal design exercise, but should never be a final product. Minimalism in moderation can create efficient user experiences, as long as you don’t lose sight of the primary goal—helping users accomplish tasks. Tips for a Successful Minimalist Interface Make sure you seriously consider whether a minimalist design strategy is right for your site, your brand, and your content. If you’re sure a minimalist design is right for you, take some lessons from the roots of minimalism. Adopt Ludwig Mies van der Rohe’s motto, “Less is more,” in your designs. Don’t add elements just for their own sake. This rule can be true for content, visual design, and feature decisions. Consider reducing any elements that don’t contribute meaningful information (think about your content–element ratio.) Learn from Carroll’s minimalism: don’t just cut out features and elements—really think about your users’ needs and try to make tasks as brief and simple as possible. Know that a minimalist visual design alone, without meaningful consideration of user tasks, will not result in a successful interface. The usability issues of Windows 8 provide an excellent cautionary tale. (Minimalism is one of the design strategies discussed in the full-day course on Generating UX Redesigns From Broad Design Principles.) For an in-depth discussion of the characteristics of minimalism, read the next article in this series.Great Summaries on ‘About Us’ Pages Engage Users and Build Trust by HOA LORANGER on June 21, 2015 Topics: Corporate Websites Writing for the Web Summary: Tell your story on top-level pages in ‘About Us.’ People who trust you are much more open to engaging with your organization and website. Even large organizations exist only as words and images within a browser window. How can you make people trust you more than they would trust an equally good-looking set of pixels on another site? Be a good storyteller. The One Thing You Should Do Based on several studies, we’ve generated numerous guidelines on how to present company information on corporate websites and in the About Us sections to increase trust and transparency. However, in this article, I focus on one major guideline to increase perceptions of transparency and improve your relationship with users. If you can do only one thing, what should it be? The answer: Provide key information on major About Us pages. In usability studies, we observe people peeking at top-level pages for answers to foundational questions. Make sure that your site passes the first impressions test by answering top questions succinctly. People are more inclined to engage further once they’ve determined you’re worth the effort. Start telling your story the moment people land on your site. At a minimum, write brief summaries emphasizing a few impressive facts. As people click through the main pages they should gain a fuller understanding of who you are, what you do, and why you exist. Ask yourself, “If users only skim the top pages in About Us, are they getting a coherent story?” In many cases, what new users need most are great highlights written in a scannable format. Summaries are appealing because they provide context and reduce the amount of effort required to click through layers of content. Forcing people to work hard (even if it’s to click on a link to one level down) to receive an introduction is bad manners and reflects poorly on your organization. Examples of Dos and Don’ts Below are examples of what you should practice and what you should avoid. DO AbbVie: This About Us page provides a nice company overview, including Fast Facts to give site visitors a reasonable company snapshot. While this page holds promise, the content could be improved by replacing the marketing jargon with concrete facts that people care about. Steer clear of hollow phrases like “revolutionary” — at best, they tend to confuse users; at worst, they make them mistrust the site. DON’T Abbott: This About page has very low content density and forces users to drill deeper before they can learn about the company. This page acts as a wall that deters people from wanting to go further. Better to start the conversation by providing the highlights on this page. People who research organizations are sensitive to credibility factors. They are looking for clues to determine whether or not to like you. Answering the questions at the right time feels conversational and can be persuasive in garnering trust. People who trust you are much more open to engage with you. DO Chipotle: This summary tells a compelling story of who the company is and how they differ from other fast-food chains. The writing style is clear and hype-free, making the organization sound friendly and credible. DON'T CSC: Can you guess from page that this company offers cloud-computing services? This About page feels unfriendly without an introduction. The sheer number of links puts the onus on the users to determine which door to open. When the tagline could equally well describe thousands of other companies, you know you’re in trouble. The manner in which information is communicated on websites influences people’s perception of your organization. Users perceive sites that answer their questions quickly as being transparent and efficient. Conversely, users regard sites that bury critical information underneath complex layers as being evasive or ineffective. If your site visitors are potential donors, journalists, or clients, leaving such a negaive impression is detrimental to your business and brand. DO GSK: This overview answers the questions and is formatted well for ease of reading. The page contains facts for each business featured (e.g., pharmaceuticals, vaccines). Nice overviews like these minimize the effort required of users to learn about you. DON’T TevaPharm: The summaries on this Company Profile page are generic and don’t give clarity on how they’re unique. You might find specifics underneath Discover more, but why make users jump such hurdles? Halo Effect impacts how people gauge websites, even if the assessment is flawed. People tend to make hasty judgments about organizations based on limited information. If users have a good first impression, the positive feelings permeate to other parts of the site. If users have a bad first impression, the negative feelings extend to the rest of the site. DO Citrix: The images on this Executives overview page literally show the faces behind the organization. At a glance people get an impression of the company culture and the people running the business. Citrix is clearly benefiting from having a recognized UX expert on its executive team. (To nitpick this otherwise good example, reduce the leading slightly between names and job titles, to more closely associate these two pieces of information. Currently, the line reading “Chief Executive Officer” is closer to David Friedman’s photo than to Mark Templeton’s name.) DON'T Defenders of Wildlife: This executive overview feels unfriendly without photos of the members. Featuring photos on this page would tell a better story of who Defenders of Wildlife is. Conclusion Credibility is a major issue on the Web. Site visitors who visit the About Us section are seeking critical information to determine whether or not to engage with you. Explaining who you are matters. Tell your story and tell it succinctly. Featuring key highlights at the top-level keeps users focused on the conversation and not on wrangling the content or navigation. Well-written summaries illuminate your unique qualities and earn trust. (The full set of 70 design guidelines for "About Us" information is available in the 253-page research report, Presenting Company Information on Corporate Websites and in About Us Sections.) Ad Placement for Mobile by AURORA BEDFORD on July 5, 2015 Topics: Advertising Mobile & Tablet Web Usability Summary: Extra care is required when designing mobile page layouts that include advertisements, due to the limited screen real estate available. Ads must be displayed where they will not create false floors nor block users from reaching relevant content. Ads: that necessary evil we encounter every day, and to which we all believe ourselves to be immune. Whether a user ignores an ad completely or becomes annoyed with its presence is strongly related to the ad's size and placement on the page. On mobile phones, screen real estate is already at such a high premium that the position of the ad has an even greater impact on the overall user experience than on desktops. There are two main ad-related usability problems: (1) ads can be too disruptive to the user, and (2) they can create false floors that inaccurately signal the end of content and cause users to miss helpful information. Large Ads Limit Viewable Content Not surprisingly, the larger an advertisement, the more disruptive it is. On a small device, a vertically large ad consumes far too much valuable space, displacing the main content. To add insult to injury, sometimes two ads get stacked at the very top of mobile pages—as sites feel compelled to advertise their mobile apps. As a result, less page content is visible upon page load, which goes against one of the principles of mobile usability: prioritize content. In the example from FineGardening.com below, only the article title and brief summary can be seen without scrolling thanks to an overly large site header and the double ad placement at the top of the page. Screenshot from Finegardening.com on mobile showing multiple ads Finegardening.com: Very little article content can be seen upon page load because the app ad, banner ad, and large site header consume the majority of the screen real estate. Unlike multiple ad elements at the top of the page pushing down the relevant content, an ad at the bottom of the screen in a sticky container is less intrusive to users. This recommendation may seem counterintuitive because the ad would now remain visible on the screen at all times, but in past studies we have found this treatment to be best tolerated by users, which is good because it shows the ad is not getting in the way. Keep in mind that users tend to begin scanning from the top of the page, and resent having to scroll past a lot of chrome to get to the information they actually want to read. Thus, we need to not only consider the overall content-to-chrome ratio, but also ensure that helpful information is prioritized nearer to the top of page in order to grab people's interest and supply them with the information related to their task as soon as possible. An additional benefit to the sticky-container treatment is that the ad is still readily available to users once they finish their task. While the user is focused on completing an activity or researching a topic, ads will be ignored because they aren't part of the goal. Assuming the advertisement is actually relevant to the user, having it available once the main task is completed increases the likelihood that the user would pay attention to the ad and possibly interact with it. (An ad is relevant when it matches the user's current goal: it is more powerful to display an ad for something the user immediately wants rather than something that just matches their general profile.) Screenshots of ad treatment on the Washington Post mobile site The Washington Post mobile site displays an ad in a container fixed at the bottom of the screen (left). The ad is appropriately synced with the current scroll position of the page, and completely collapses when the user reaches a display ad embedded within the page content (right). Avoid Creating False Floors Another main downfall of many mobile ad placements is their tendency to create the “illusion of completeness,” or a false floor, on a page. An advertisement can easily signal to users that they have reached the end of the page's relevant content. This effect is exacerbated when the ad is large enough so it is difficult to see any continuation of content below, and when the ad is placed at a point low enough within the content where it seems reasonable that no more information is available on that page. Pages on WebMD's mobile site, for example, place ads following several paragraphs of text, below links to additional resources on the current topic. Horizontal lines in the design and the presence of copyright information (which is commonly associated with footer content) further cue the user that this is the end of page, when this is actually not true: the page continues far below the ad, displaying more information and additional links to related resources. Screenshots of WebMD.com mobile site article page containing several ads The ad placements on the WebMD mobile site create false floors because they appear in places that could reasonably be the end of relevant content, and are large enough that they hinder the user’s ability to see content continuing down the page. (The black dashed line shows where the fold occurs on an iPhone 6 Plus, and the red dashed lines represent areas where the ad is likely to stop a user from continuing to scroll.) If possible, only display ads at the real end of content rather than between paragraphs of text. Said one user during a recent usability study, “I don't like advertisements in between. It's distracting and gives me the impression that it's the end of the article.” Of course, we often don't have the luxury of neglecting business goals, and so if several ads need to be included on a page, putting them closer to the start of the content—following the title or intro paragraph, for example—can help avoid incorrectly signaling the end of the page. Additionally, shorter banner-style ads are less interruptive of the content than the taller square display ads. Screenshot of ad placement on USA Today mobile site USA Today mobile website uses a thin display ad positioned near the beginning of an article, so it is less likely to be considered a reasonable stopping point in the content. The thin rectangular size also allows the content below to be visible, encouraging the user to continue reading without being too interrupted by the ad. When an ad is placed lower on the page amid content, consider adding additional cues to signal the user to scroll past the ad. This recommendation is especially important if the ad is large or otherwise consumes a lot of page real estate (includes extra whitespace above and below the ad, or is a small ad populated into a placeholder meant for a larger one), and blocks the user from easily seeing any continuation of content. If the user doesn't know for sure that more content exists below the ad, they may not be willing to pay the interaction cost to scroll and possibly get nothing. Simple, clear text such as “Keep Reading” or “Continue Reading Below” along with an arrow pointing down or other directional indicator placed above the ad can work well to let the user know more content is available. Screenshot of ad design on Boston Globe mobile site To encourage users to scroll past a large ad, a cue such as Continue Reading Below should be shown above the advertisement, as seen on the Boston Globe mobile website. Keep in mind that this treatment merely makes the ad placement bearable, and should be considered a last resort if multiple ads must be placed on the page amidst content. In general when it comes to ads, be sure to practice restraint. Having a high number of ads diminishes site credibility: as stated by a user in a recent study, “I have deleted apps because of ads — I tend to not go to the ones with a lot of ads; I think the info is not reliable.” As expected, the most hated advertising techniques on the desktop are also hated on mobile devices; and sadly, top sins such as Covers what you are trying to see and Occupies most of the page are easier to unintentionally commit when the screen size is limited. Because of this, extra care must be taken when deciding where and how often to place ads on mobile apps and websites. Conclusion Ads represent a point of conflict between business needs and user needs. To minimize their impact on user experience, they need to take only a small fraction of the page area and be placed strategically so that they do not create false floors and do not stop people from discovering additional page content. on't Force Users to Register Before They Can Buy by AMY SCHADE on July 5, 2015 Topics: E-commerce Summary: Guest checkout with optional registration on e-commerce sites simplifies the purchase process and invites users to register when they feel comfortable, rather than forcing unwanted registration. One of the most common complaints we hear in e-commerce usability research is about registration. Shoppers have many reasons to dislike or dread site registration. They may not plan to return to the site again, making a one-time purchase or a gift purchase. They may dislike registration in general, frustrated with remembering usernames and passwords for all the sites they visit. Some shoppers don’t want a site to save personal information and assume that if they register for the site, the information will be saved. Many users associate registration with getting unwanted email, and for good reason, since many sites offer tiny preselected checkboxes to sign up for email newsletters. Most of all, registrations involves extra steps, extra hassle, and extra potential for things going wrong (whether user errors or site errors) and stopping the user dead in the water. The higher the interaction cost, the fewer people will complete a process. This is true for any user interface steps, but in the case of e-commerce checkout there’s a particularly direct connection between user hassle and lost sales. TinyPrints.com required that users create an account and also automatically subscribed users to the newsletter, mentioning above the Create Account button that “You will be subscribed to the Tiny Prints email newsletter” (stated in tiny print, which makes users weary right there.) Being signed up for newsletters they do not want is one of many complaints users have about registering on e-commerce sites. Registration sounds like a tedious, lengthy process unrelated to the task at hand: making a purchase. And some sites make registration a lengthy and tedious process, sometimes even presenting registration as a step separate from the checkout process. This doesn’t need to be the case. When a user is making a purchase, typically all the information needed for registration is already being requested of the user. Sites normally ask for information needed for the transaction, including name, shipping, and billing information. In addition, sites commonly ask for an email address in order to email a receipt and update order status. The only aspect of registration that is not covered in a standard checkout transaction is a password. How to Present Optional Registration Before users enter the checkout process, clearly state that registration will be an option. Some users do want to register and like to see assurance that they can if they’d like to. If the option to create a password will be presented after the purchase is complete, rather than during the checkout process, tell users so they know when to expect the option. Under the Guest Checkout option, HomeDepot.com told users that “You will have the opportunity to create an account and track your order once you complete your purchase.” The size of the text could have been larger to make it easier to read, though it is good to present this information less prominently than the main text. Briefly highlight the benefits of registration from the users’ perspective and not the company’s perspective when asking users to register. Shoppers appreciate when sites emphasize aspects that would make the experience easier, such as order tracking or faster checkout. They sometimes complain about sites that stress “benefits” such as receiving email newsletters or becoming a member of the site. Mention customer-focused benefits when users start the checkout process as well as when customers are asked to create optional passwords. A brief bulleted list tends to work well to highlight this information. This list should not be a sales pitch for the site, but a brief reminder to users about how registering benefits them. Nordstrom.com told users that registration would let them, “Check out faster, Track your orders, Write reviews and more!" This nicely presented the information as a benefit to the user, rather than the site. Mark password fields as optional, so it’s clear that users do not have to register for the site. Also make sure to state password requirements so users aren’t left guessing how to create a valid password. Some sites do not mark the password fields as optional; instead they place the fields in a section of the page with the word “optional” in a heading. Users often skim web content, even when filling in forms, and may miss the optional designation if it is only displayed in the heading, rather than next to the field. When the fields are not specifically marked, users can misinterpret it as a requirement for registration. If they were previously told that registration is optional or have pursued guest registration on the site, this inconsistency can break the user’s trust. Staples.com listed the optional passwords fields in a section titled Optional Information. That heading was in close proximity to the password fields, which only appeared if a user selected the Create an account and make your next checkout easy option. Both these factors helped reinforce that the fields were optional. Simple and Optional Rather than forcing users to register before checking out, provide the option to register within the checkout process by presenting optional fields for the user to enter a password. This puts users in control and allows them to decide if it is worthwhile to register or not. In our e-commerce research, we saw users who had previously complained about forced registration happily register for sites where registration was limited to the option of creating a password in the purchase process. Forcing registration causes lost sales. Some users will leave the site, others will struggle with registration. It is common for sites that add guest checkout to immediately realize increased sales. It is a simple way to improve usability and encourage purchasing. The Characteristics of Minimalism in Web Design by KATE MEYER on July 12, 2015 Topics: Visual Design Web Usability Summary: Our analysis of 112 minimalist websites revealed the defining features of minimalism: flat design, limited color schemes, few UI elements, use of negative space, and dramatic typography. This article is the second in a series devoted to the understanding of minimalism in web design. If you’re interested in the origins of the movement, read The Roots of Minimalism in Web Design. A minimalist web-design strategy is one that seeks to simplify interfaces by removing unnecessary elements or content that does not support user tasks. In order to reduce a website to only its most necessary elements, designers must accept a cascade of consequences that impact both the user interface (UI) and the content of the site. Many of the visual-design characteristics commonly associated with minimalism are choices that serve the core strategy of minimalism particularly well, and so have been adopted along with minimalism in most instances. Web design, like language, is defined by the way people use it. The word ‘minimalism’ is thrown around a lot, yet it’s hard to pinpoint exactly what features define a minimalist web design. To more clearly define what constitutes a minimalist design in practice, we analyzed the design characteristics of a sample of 112 minimalist websites. Sites were selected for the study if they were either identified by an outside web-design expert as minimalist, or were included in an online gallery for inspirational minimalist sites, like siiimple. Remember that just because a design technique is popular doesn’t necessarily mean that it always supports user needs and optimizes profitability or other business objectives. In this study, we analyzed sites that are known to employ minimalist design, not sites that are known to be highly profitable. As discussed further below, our other research suggests that while some of these design ideas can support business goals, others can hurt your profitability. Defining Characteristics of Minimalism So what features were present in most of these designs? We included a feature among the defining characteristics of minimalism if it was present in at least three quarters (75%) of the websites that we analyzed. Flat Patterns and Textures Used in 96% of sampled interfaces (but often ineffectively) Over the past few years, there has been an overwhelming shift in the design community away from skeuomorphism, towards purely digital representations of things without physical metaphors. Flat interfaces don’t make use of any of the obvious highlights, shadows, gradients, or other textures that make UI elements look glossy or three-dimensional. Some designers believe that the flat-design trend grew out of the popularity of minimalist UI design (Müller, 2014). The two trends are extremely compatible; removing gratuitous shadows, gradients, and textures falls in line with minimalism’s primary goal of eliminating the unnecessary. In our sample, 96% of the minimalist sites were flat. The two tend to co-occur so frequently that the phrase ‘flat design’ is often (misleadingly) used interchangeably with ‘minimalist design.’ The trends are similar, but not the same. Flat design generally refers to the textures, icons, or graphics in an interface. Minimalist design applies to the larger or overarching content, feature, and layout strategies. An interface may be flat without being minimalist. Jeet.gs The Getting Started page for Jeet.gs grid system API features a completely flat interface, including ‘ghost buttons’ for copying code snippets. (Ghost buttons are empty buttons with a thin rectangular border and text.) Flat ghost buttons can have legibility problems, and they break away from the established convention of what a clickable button should be. (However in this case, the buttons highlight when the mouse passes over them, providing a dynamic signifier of clickability. Also, the buttons show a tiny 3D effect when clicked that adds a small sense of physicality. Thus, the interactive user experience adds depth to the flat interface elements.) As we’ve discussed in other articles, flat designs often fail to communicate to users which elements are selectable or clickable. We believe that a better approach is a compromise between flat and skeuomorphic—a mostly flat design, but with clickable elements that users can recognize easily. Considering that flat design is the design idea most likely to be used incorrectly and degrade the user experience, it’s unfortunate that it’s the most prevalent of the main characteristics of minimalist web design. Limited or Monochromatic Color Palette Used in 95% of sampled interfaces In most minimalist interfaces, color is used strategically to create visual interest or direct attention without adding any additional design elements or actual graphics. With less visual information vying for a user’s attention, color palettes are more noticeable and will be more influential in a site’s impact. Minimalist color palettes are a movement away from the clashing, loud colors of the web design popular in the 2000s. Subdued color schemes are intended to avoid upstaging the content—which, in the case of images, can still be brightly colored. Many minimalist designs are either monochromatic, or use only one bold color as an accent, and use it to—sparingly—highlight the most important elements of the site. These accented elements are usually clickable. When assessing the use of color in the sample websites, we looked at background colors, logos, navigational elements, iconography, and typography, but did not consider content images (like photographs) as part of the color palette. Almost half of the websites sampled (49%, 55 websites) used a monochromatic color palette. Almost as many websites used one or two accent colors in an otherwise monochromatic color palette (46%, 52 websites). Of those 55 monochromatic sites, 51 sites were grayscale-–they used exclusively white, black, and gray shades. Freres d'Encre The monochromatic homepage of Frêres d'Encre, a French tattoo studio, creates a dramatic aesthetic. Solo Solo, project management software, uses a monochromatic but not grayscale color palette. Kayak Travel metasearch engine Kayak uses orange to highlight its logo and the actionable Search button. The popularity of this particular characteristic is an improvement in the sense that it’s moving interfaces away from the loud, clashing color schemes that used to dominate the web. However, there are some considerations to keep in mind when applying a limited color palette: Make sure your color scheme uses enough contrast to be legible to people with limited vision or color blindness. Use accent colors intentionally and consistently to highlight very important information or primary actions. Restricted Features and Elements Used in 87% of sampled interfaces Designers who adopt a minimalist design strategy must consider each element in their interfaces and eliminate any that are not required to support the core functionality or message of the website. An ‘element’ in this context could be any individual unit of the interface: including but not limited to: menu items links images graphics lines captions textures (like gradients) colors fonts icons It’s difficult to assess whether an interface includes ‘unnecessary’ elements without directly asking the sites’ designers what they left out, and without knowing the target users and tasks. To make this characteristic measurable, we focused on assessing whether or not the interface contained graphic elements that did not serve any obvious purpose. In our sample, 87% of minimalist sites avoided gratuitous graphic elements. Alan Trotter's portfolio The portfolio of fiction writer Alan Trotter is severely minimalist. By default, the site doesn’t even reveal his full name: visitors must click the underlined text to get to more details. This strategy might achieve an ‘edgy’ aesthetic, but it’s a big gamble to hide the most important content. The more stuff there is in a user interface, the more stuff users need to process. A favorite mantra of minimalist designers is, “subtract it till it breaks,” which really means, “unless the absence of an element would be serious problem, get rid of it.” This is where designers can get distracted by the pursuit of a clean, modern, minimalist interface—and end up cutting out useful content. Adhering to a rigidly utilitarian approach can produce streamlined designs by eliminating distracting features and content. Just make sure you aren’t making your users’ primary tasks more difficult by removing or hiding content they need. It’s hard to understand a cluttered design or a system overflowing with extraneous features. But it’s even harder to understand a design that doesn’t provide sufficient scaffolding to explain its features or structure. Maximized Negative Space Used in 84% of sampled interfaces Removing or excluding elements from a web page necessarily leaves empty space. Negative space (also called white space) is the name given to the empty areas of an interface. Negative space has been called “practically synonymous with” and “the backbone of” minimalist interfaces. Many minimalist designers use it as a tool to try to direct users’ attention and allow them to digest content more easily. Considering these strong assertions of negative space as the defining characteristic of minimalism, it’s surprising that only 84% of the sample sites used substantial amounts of negative space in their designs. Thomas Buffet's portfolio The screenshot above shows the homepage of French designer Thomas Buffet as seen full-screen on a 15-inch MacBook Pro. Above the fold, the page is almost entirely negative space. In this case, the site is still able to answer the two primary questions people would ask upon arriving at this page: ‘who are you,’ and ‘what do you do’. But this approach will not work in all contexts. Appropriate use of negative space can help draw attention to important content. When deciding how to lay out negative space in your designs, be sure to consider the following questions. How will adding or removing negative space impact the communicated hierarchy of the page? How will the negative space impact what content is displayed at the top of the page? The page fold still matters: users will scroll if they have a reason to, but they pay more attention to the content at the top of the page. How will the negative space impact the interaction cost: will users need to work harder to get to the information that they need? How will the negative space need to change at varying resolutions? Dramatic Use of Typography Used in 75% of sampled interfaces Like color, bold or large typography becomes another tool for communicating meaning when there are few elements on the page. Effectively exploiting interesting typography can help compensate for having fewer elements like photos and graphics, and can make a minimalist design feel more visually engaging. Variations in font size, weight, and style become crucial in helping users understand the hierarchy and relative importance of text. Of the 112 sampled minimalist sites, 75% used typography to convey meaning or create visual interest. Alexander Engzell's portfolio The portfolio of art director Alexander Engzell uses bold typography on his tagline to create visual interest without adding extra graphic elements to the page. However, the text is an image file, which adds to page load time. Also, unlike the Buffet portfolio, this page doesn’t directly explain whose portfolio this is, or what this person does. Users have to click the INFO link in the upper right corner to access that information. Using images for text may allow you to use custom fonts, but it will add to page load time, will require extra considerations for scaling at different resolutions, and can cause accessibility issues. Using web fonts is a better solution, but bear in mind that web fonts can have detrimental performance effects as well. Remember, drawing attention to bold typography is only useful when that text communicates meaningful information. Beware of going overboard on the fancy typography: users can ignore overformatted text if it looks too much like advertising. There’s a delicate balance between meaningfully bold typography and distracting typography. A great designer will come down on the right side of this balance, but if your designers are less skilled in employing advanced typography it’s safer to err on the side of caution. Related Trends Some designers also include the following characteristics as minimalist. Based on our research however, these seem to be design trends that often co-occur with minimalism, but are not actually defining characteristics—they occurred in fewer than 75% of the sites that we analyzed. Large Background Images or Videos Used in 57% of sampled interfaces The presence of a large background image or background videos (enabled by HTML5) is one of the most debated characteristics of minimalist Web design. From a theoretical perspective, a large background image certainly seems contradictory to the core minimalist spirit of reducing non-critical elements. Despite this, large background images and videos are popular in minimalist designs—we found that 57% of our sample included them. Monte Re The homepage of Monte Ré, an Italian fruit producer, uses a full-width background-image carousel within an otherwise pure-white minimal site design that includes ghost buttons. While the text is technically distinguishable from the background images, it’s unpleasant to try to read and understand the copy while colorful images circulate behind it. Depending on the context and the designer’s priorities, an argument can be made for the ability of large background images/videos to create an impact on users’ perception of brand. When a background image is used for a carefully considered, strategic reason, sticking to minimalist-design strategies can help restrain other page elements from competing or clashing with the background. Additionally, some designers may hope that loud background images will keep otherwise minimalist designs from being too boring or stark. If you choose to use a background photo or video with your minimalist design, keep the following points in mind: Make sure the images or videos you choose serve a real purpose or help people understand the site—otherwise they’ll just distract your users from your actual content. Make sure the text is both legible and readable if you want people to understand it. Remember, legibility is the extent to which users can distinguish individual letters. Readability is how well they can process words, phrases, and scan the text. If you’re using a carousel or video, you need to test every possible background—every image or frame of the video, and at a variety of screen resolutions. Be aware of how big images and videos impact performance. Make sure you’re taking an adaptive approach so your mobile users aren’t waiting for a desktop-sized retina photograph to load over their network data connection. Don’t autoplay videos. Many users are frustrated by videos that play automatically without their consent, especially if those videos have audio. Avoid creating Harry-Potter-painting-style videos of people slowly moving around in the background. You don’t want to distract your users and creep them out. Grid Layouts Used in 43% of sampled interfaces In our sample, we found that 43% of the interfaces used grid layouts to organize content. While this percentage indicates it is a popular design pattern among minimalist designers, it seems that grid layouts are certainly not ubiquitous in their designs. When grid layouts are used in minimalist UI designs, it’s generally for two reasons: Grids are an effective method of organizing homogenous content on the page linearly without adding any visual elements; and Grids are particularly helpful when designing a responsive website—another trend that is separate from minimalism but often co-occurs with minimalism. Paprika The graphic design agency Paprika organizes its projects in a grid, but is not responsive. Sea Chant portfolio The minimalist portfolio of photography studio Sea Chant organizes photographs in a grid at desktop screen widths. Sea Chant portfolio At 400px wide, the Sea Chant portfolio is reduced to a single column of content and removes all hover effects. Circular Graphic Elements Used in 16% of sampled interfaces Some design experts have suggested that circular and rounded graphic elements could be a component of minimalism, but we found only 16% of our sample used them. They seem to be more of a fad. Gesture Theory The homepage of Gesture Theory uses multiple circular elements in its minimalist design. Hidden Global Navigation Used in 13% of sampled interfaces Many websites currently use severely reduced global navigation elements in their desktop presentations, such as the now infamous hamburger menu. This can sometimes be the result of an incomplete mobile-first design strategy that fails to consider the needs and extra screen space available to desktop users, but it can also result from overzealous minimalism. Hiding infrequently accessed items might make sense for your goals, but make sure you aren’t hiding tools or links that are critical to the tasks you want your users to perform. Be particularly cautious if your site has large amounts of content or categories. Visual Soldiers portfolio The desktop portfolio site of design agency Visual Soliders uses a hidden global navigation under a hamburger menu. Visual Soldiers portfolio These few menu items hidden in an overlay could have been made visible globally, but were probably hidden to achieve this ultra-minimalist effect. Commonly Occurring Characteristics of Minimalist Interfaces Our analysis of 112 websites revealed the following defining characteristics for a minimalist website: Flat rather than skeuomorphic patterns and textures Use of a limited or monochromatic color palette Strictly limited features and graphic elements Maximized negative space Dramatic use of typography to communicate hierarchy or create visual interest Some of these characteristics are used almost ubiquitously in minimalism, and some occur slightly less frequently in minimalist interfaces; however, all of the defining characteristics were present in at least 75% of the minimalist sites that we analyzed. In our research, we also identified several related trends that were present in less than 75% of the sampled sites. Large background images or videos Grid layout Circular graphic elements Hidden global navigation Conclusion 2000s interface design was predominantly cluttered and overwhelming. For years, we’ve been advising against this kind of “maximalism”. Feature bloat and gratuitous content is always bad for users. In theory, minimalism should move us away from maximalism, and result in streamlined content and more efficient user task flows. In practice however, we’ve seen minimalism mutate into a superficial visual trend as designers copy popular minimalist characteristics without seriously considering if they support their own site goals. Just as flat design is a reaction to skeuomorphism, minimalism is a reaction to maximalism. In both cases, we strongly advise a balanced approach. A minimalist design strategy can be a powerful tool, but only when it’s framed by the needs of your users—minimalism for minimalism’s sake alone doesn’t help users. (Minimalism is one of the design strategies discussed in the full-day course on Generating UX Redesigns From Broad Design Principles.) Share this article: Twitter | LinkedIn | Google+ | Email Learn More Research Reports Strategic Design for Frequently Asked Questions Full Day Training Courses Top Web UX Design Guidelines The Human Mind and Usability UX Basic Training Web Page UX Design: Optimizing Pages to Deliver on Business Goals Visual Design for Mobile and Tablet: Day 1 and Day 2 Articles The Fold Manifesto: Why the Page Fold Still Matters 10 Usability Heuristics for User Interface Design Banner Blindness: Old and New Findings Scaling User Interfaces: An Information-Processing Approach to Multi-Device Design Teenage Usability: Designing Teen-Targeted Websites How Iterative Testing Decreased Support Calls By 70% on Mozilla's Support Website by SUSAN FARRELL on August 2, 2015 Topics: Agile Prototyping User Testing Summary: User research with data mining and paper prototyping quickly led to measurable success for one of the busiest support websites in the world. One of the more frequent questions that we get asked by our clients or by our seminar attendees is: "Is a redesign for usability worth it?" In other words, what is the return-on-investment (ROI) of a redesign? In recent years, we've seen a decline of the ROI for usability, most likely due to approaching a ceiling of usability improvements: With more than 20 years of web-design experience under their belt, designers have learned a few things and fixed quite a few problems. But a redesign for usability can still save you a significant amount of money. In this article we tell the story of Mozilla's support site, which was able to get a 233% improvement out of a redesign for usability. (Here's an explanation of how the improvement score was computed.) Thus, we can say that the redesigned site was about 3 times better than the original site. The cost involved in this redesign was 14 person-weeks or 560 person-hours. Is it worth spending 14 weeks to become 3 times better? This depends on the hourly rate for your staff and the value of your site and thus cannot be answered in general. However, for Mozilla, which gets huge amounts of traffic, the improvement is certainly worth the trouble, as it would be for almost any big site or company that does substantial business online. So how did Mozilla do it? What was involved in this redesign? Who is Mozilla Mozilla is a large, open-source, worldwide, software organization staffed by both employees and volunteers. It makes one of the most popular web browsers (Firefox), along with other useful products and services. Pain Points Millions of people come to Mozilla's support website every year to get help with Firefox and other products and services. When users cannot get an answer from the information existent on the site, the Mozilla staff aims to help by answering each person's question in the user-support forum, and to respond to questions as quickly as possible. As Mozilla's website had grown organically, users were having difficulty finding information and the support staff couldn't keep up with the number of questions in the forums. Specifically: At about 400 pages or so, the help documentation had become a difficult place in which to locate particular information quickly. The forum staff (employees and volunteers) were having trouble responding to questions as quickly as they wanted to, because of the increasing number of incoming questions for the rapidly updating Firefox. The forum overload was also making it difficult for staff to find time to write new help articles for frequently asked questions. More articles could help, but the growing number of articles also caused more findability problems. Action Plan Mozilla decided to invest in discovery and iterative usability testing in order to improve the IA of its support site. The research questions aimed to understand (1) how people (users and staff) used the support system; (2) which types of information were really important. Top research questions Mobile Faceted Search with a Tray: New and Improved Design Pattern by KATHRYN WHITENTON on July 26, 2015 Topics: Mobile & Tablet Search Visual Design Summary: Displaying faceted-search controls on mobile devices in a ‘tray’ overlay is a new effective solution to the challenge of showing both results and filters on small screens. Recently, a few big brands have introduced a new method for displayed facet controls on mobile devices, by placing them in a ‘tray’ overlay on top of the actual results. This new design approach addresses a major shortcoming typical of many faceted search displays on mobile devices: the placement of facet controls on a separate screen, which forces users to work harder to understand how the facet controls affect the results set. But before understanding why this is the case, let’s go back to the basics of faceted search. What Makes Faceted Search Special? Faceted search lets users refine a set of results by applying filters that comprehensively describe the search space. Such narrowing is invaluable for users who need to find something specific within a large content set. This type of search has become common for ecommerce and travel websites, as well as many different types of document and media collections. A faceted system includes two critical elements: Simple controls to construct sophisticated searches: Providing familiar controls like drop-down menus and checkboxes with natural-language labels empowers ordinary users to narrow down a large set of results to a small set that meets their exact criteria—without any special knowledge of Boolean logic or query syntax. Simultaneous display of the facet controls and the results: Showing both the filters and the results at the same time makes it easier for users to understand the relationship between the two; ideally, this is reinforced by dynamically updating the results set as soon as the user selects a filter criteria. The simple filter controls are the most obvious component of a faceted system. However, the importance of simultaneous display should not be underestimated. Long before faceted search became popular, we had ‘advanced search’ screens with similar controls for creating complex search queries. The big difference introduced with the first faceted navigation system was in displaying the facet controls and the results at the same time, which makes the effects of each filter instantly visible. This innovation embodies 2 of the 10 usability heuristics: provide rapid system feedback, and offer users control and freedom. Challenges of Displaying Search Facets on Mobile Devices Faceted search was originally designed for desktop and laptop users. Translating this experience onto a mobile device is difficult, because the very thing that makes faceted search so helpful to users – being able to see the filters and the results at the same time – is difficult to achieve on a small screen. There simply isn't enough space to show a full set of facets and a decent number of detailed results simultaneously. Until recently, most mobile designers haven’t even tried to display facets and results at the same time, instead opting to place them on separate screens. But this solution forces users to navigate to the facet-control screen, make their selections, then navigate back to the results set to see the effects of their selections. The istockphoto.com mobile website illustrates the typical approach to providing faceted search to mobile users. The results page includes an icon that users can tap to open the facet controls (assuming they can figure out what the icon means). Once the facet controls are displayed, users can select different filtering criteria, but it’s not obvious how the results will be affected by the facet selection because: None of the results are shown on this screen. The number of files, displayed in the page header updates too slowly. The header showing the number of files may not even be visible once a user has scrolled down to expand and select the facets below. Due to these limitations, users have to return to the previous screen in order to find out whether their filter selections were effective at targeting the best results and whether they have narrowed the results set down to a manageable size— or if perhaps they've applied such restrictive criteria that no results match. Mobile search results and facet controls on iStockphoto.com Left: Like many mobile search designs, iStockphoto.com does not display faceted search controls on the actual search results page. Instead it requires users to navigate to the facet controls, in this case via a cryptic icon composed of lines and circles on the right edge of the Search bar. Right: The facet controls take up the entire screen, and in order to see the effects of their selections, users must navigate back to the results screen. New Solution: ‘Tray’ Overlay to Display Facet Controls Recently a new approach to providing faceted search for mobile users has appeared: showing the facet controls as a ‘push-out’ style tray on top of the search results. This design allows for continuous visibility of results: even while the facet controls are open, some information about the results is visible in the background. The Amazon iPhone application and eBay’s mobile website both now use an overlay to display facet controls on the same screen as the search results. Mobile Facet Tray Overlay Examples Amazon’s iPhone application (left) and eBay’s mobile website (right) both recently introduced an overlay to display search facet controls on the same screen as the search results. Design Pattern Elements Both the Amazon and eBay designs include several details that combine to create a good user experience: Once activated, facet controls appear in a vertical panel overlaid on top of the results screen. The results are always visible in the background, and can be seen to change as the user makes her facet selections. (However, in the case of eBay, users can hardly make out what the results are. Amazon’s design is better because users actually get useful information from the background.) The total number of results is always visible, even if the user has scrolled down a long list of facets. (Amazon accomplishes this by fixing the header at the top of the screen so that it remains visible even as the list of facets scrolls up or down). A translucent gray shadow slightly obscures the underlying results and ensures that the facet controls stand out. The facet panel appears at the right edge of the screen, leaving the left edge of the results visible. (This is helpful because the left edge is more likely to have meaningful content; with Amazon you can actually see the product images.) (You may also notice that both Amazon and eBay use actual words – Filter and Refine – as the commands to access facets, rather than a special symbol. Any of the labels commonly used for faceted navigation – narrow your results, refine, and filter – are far more understandable than cryptic icons, and definitely worth the extra space. ) Why Is Simultaneous Display of Results and Facet Controls Important? In usability testing, I am always amazed at how successful people are at immediately understanding and using faceted search screens, which tend to include many different elements and controls. As long as the controls are displayed properly, most people jump right in to creating and refining their queries. Instant results are an important part of the process because they allow users to see right away if they have applied the wrong filter, or applied overly narrow criteria that eliminates too many options. Both of those errors are very easy to recover from if you can instantly see the effects of your actions, but without this visibility users can end up in a tedious cycle of pogo-sticking between the results and the filters. The facet ‘tray’ approach illustrated by Amazon and Ebay doesn’t provide complete visibility, since only a small part of the results screen is visible. But these creative solutions offer at least some visibility into the effects of applying a filter. Users may still find that they need to close and re-open the facet controls, but this approach feels more like expanding a part of the current page, rather than jumping back and forth between different pages. Find out more about the best approaches for visual displays on smaller screens in our full-day courses about Indicators, Validations, and Notifications: Pick the Correct Communication Option by KIM FLAHERTY on July 26, 2015 Topics: Applications Standards Summary: Status feedback is crucial to the success of any system. Knowing when to use 3 common communication methods is key to supporting users. In interaction design, a system, whether an application, website, or piece of hardware (anything from a smartwatch to a thermostat), should always keep users informed, by providing appropriate feedback. Ensuring that the state of the system is always visible is one of the 10 usability heuristics for interface design. Information about system status, such as error messages and notifications of system activity, allows users to fully understand the current context. The best way to communicate system status varies depending on several key factors: The type of information being communicated The urgency of the information — how important it is that the user sees it immediately Whether the user needs to take action as a result of the information Three common approaches for status communication include validation, notifications, and status indicators. These terms are used sometimes interchangeably in product design, but they stand for different communication methods that should be used in different circumstances. Understanding the differences between them will help you sharpen your feedback to users by choosing the best option for each need. Indicators An indicator is a way of making a page element (be it content or part of the user interface) stand out to inform the user that there is something special about it that warrants the user’s attention. Often, the indicator will denote that there has been some change to the item represented by that element. Although, as we’ll see later, indicators are used quite frequently to signal validation errors or notifications, they can also be used on their own. Indicators are visual cues intended to attract users’ attention to a particular piece of content or UI element that is dynamic in nature. (If something always looks the same, it’s not an indicator, no matter how flamboyantly it’s designed.) There are at least three possible ways of implementing indicators: Oftentimes, but not always, indicators are implemented as icons. Easily recognizable icons can make very effective communication tools. Typographical variations can also be used as indicators; examples include the common convention of boldfacing unread email messages or color-coding stock symbols in an investment account if their price has changed substantially. Though less common, enlarged size or animation (e.g., vibration) can also be used to make certain items stand out from the crowd and thus serve as an indicator. Yelp used a green-tag indicator in the search results to indicate that Tea Market had a special deal running. This indicator communicated additional information about Tea Market. Characteristics of indicators: Indicators are contextual. They are associated with a UI element or with a piece of content, and should be shown in close proximity to that element. Indicators are conditional— they are not always present, but appear or change depending on certain conditions. For example, a stock-performance indicator, such as the one in the American Century example below, may change to indicate if the stock price is increasing or decreasing. Additionally, the tag indicator in the Yelp example above only appears if there is a deal at that business. Indicators are passive. They do not require that a user take action, but are used as a communication tool to cue the user to something of note. American Century Investments used a conditional indicator to provide information regarding a specific stock’s performance. When the daily change was negative, the indicator was a red arrow pointing down. When the daily change was positive, it showed a green arrow pointing up. The condition of the stock performance impacted the indicator that was shown next to the price. Indicators can introduce noise and clutter to your overall interface, and may distract users, so it is important to consider how many (if any) indicators to use in your design. Consider the following when deciding if an indicator is appropriate: How important is the information to the user? Is it worth taking up space on the page to inform the user? How often is the information used? Would the user expect to see the information? Would it be missed if it weren’t provided? How important is it for the application that the user discovers the information? Validations Validation messages are error messages related to users’ inputs: they communicate whether the data just entered was incomplete or incorrect. For example, in e-commerce systems, validation messages often involve information such as name, billing address, and credit-card information. Cobragolf.com provided a validation message that clearly indicated which field was in error. The message however was complex and confusing. A better message might say “Please enter a valid email address.” Characteristics of validation: A user needs to take action to clear the validation message. The information in the validation message is contextual and applies to a specific user input that has a problem. The way in which validation should be implemented varies based on the unique needs of the form. However, in general, if the user’s input is incorrect, the system should inform the user by providing an identifiable and clear message that aids in correcting the error. Validation messages should follow the guidelines for error messages rather than simply identifying the problem, they should tell users how to fix it. For instance, don’t state “Field is blank.” Please enter your street address” is more polite and directs to a solution. Since validation is contextual, it can be helpful to use an icon indicator along with the validation message to help communicate which input(s) are missing or need corrected. Bestbuy.com provided a helpful validation message telling users how to fix the problem and also used an icon indicator and a different color to attract users’ attention to the field that needed correction. Notifications Notifications are informational messages that alert the user of general occurrences within a system. Unlike validation, notifications may not be directly tied to user input or even to the user’s current activity in the system, but they usually inform the user of a change in the system state or of an event that may be of interest. In the case of email, social networks, and mobile-phone applications, notifications can even be delivered while a user is away from the application. Notifications can be contextual —applying to a specific UI element— or global —applying to the system as a whole. The Facebook App used a contextual notification in the news feed to communicate that newer stories had been added to the feed. This notification does not require the user to take action. Characteristics of notifications: They are not triggered by users’ immediate actions. They announce an event that has some significance to the user. There are two main types of notifications, which differ based on whether the user is required to act upon the notification: Action-required notifications alert the user of an event that requires a user action. In this sense, they are similar to validation, but since they were not sparked by the user’s own action, they require a different design. Action-required notifications are often urgent and should be intrusive; for instance, they could be implemented as modal popups that interrupt the user, forcing immediate attention and requiring an action to be dismissed. The Mac operating system used a notification to inform users of available system updates. The user had to explicitly dismiss it from the screen, by opting to either install the update or to be reminded again at a later time. This is an intrusive notification that requires that the user take action. Passive notifications are informational; they report a system occurrence that does not require any user action. Many notifications in mobile apps are passive: they usually announce an event of potential interest to the user. Passive notifications are typically not urgent and should be less intrusive. A typical implementation of a passive notification may be a badge icon or a small nonmodal popover in a corner of a screen. Passive notifications can easily be missed, since they require no user action. When the information provided by the notification is key to the understanding of the system, an easy-to-ignore passive notification can be problematic. Adobe Creative Cloud used a nonintrusive passive notification to inform the user of an available application update. This notification appeared on screen for several seconds before disappearing. The user did not need to take any action on it. Uniqlo.com used a nonintrusive passive notification to provide feedback that an item was added to the shopping cart. No action was necessary to dismiss the notification. Such notifications sometimes cause issues for e-commerce shoppers who do not notice the brief messaging. Users who miss the message may respond by adding an item to the cart multiple times, or by disrupting their shopping flow to check the cart to see what items were added. Notifications have the design challenge that they are not the immediate and obvious result of a specific user action. On the contrary, the user is likely in the middle of doing something different and may not be thinking about the issue raised by the notification. This requires notifications to establish more context and provide users with sufficient background information to understand what the notification is about. (In contrast, with a validation, the user has just done the thing that needs to be corrected. Thus, the validation message doesn’t need to educate users about the task at hand. For example, if an e-commerce checkout form has a field for a credit-card expiration date that was left blank, the validation message doesn’t need to say “Please provide the expiration date for the credit card you want to have charged $29.90 to pay for the blue sleeveless dress you are in the process of buying on Uniqlo.com.” However, a notification the following day that the dress has been shipped from the warehouse would need to say more than “Your package has shipped.”) If a notification is contextual and relates to a specific element in the interface, an icon indicator on the element can communicate where that notification applies and catch the user’s attention. For instance, an indicator badge on a mobile-app icon shows that the user has received a notification from the corresponding app. The iPhone messaging app created a notification to communicate that a new message was received. Along with the notification, an indicator badge was placed on the messaging-app icon to communicate where the notification applied. To clear the indicator, the user had to view the message. Mint.com used an indicator together with a notification to communicate that an account needed attention. The warning indicator (1) appeared in close proximity to the summary of the account that needed attention, while the notification (2) appeared in the central area of the page with other important information. The actual text in the notification message could have been more helpful, though. Picking the Right Communication Option Is Important Using the wrong communication method can have a negative impact on the users’ experience. Let’s refer back to the scenario above where Yelp utilized a green-tag indicator in the search results to indicate that Tea Market had a special deal running. This information is contextual and important to users who have specifically searched for a place to have tea. You may think that an alternative way of alerting users of potential tea deals would be to send them a notification when such a deal has become available. Wrong! A notification sent irrespective of the current user goal would likely be ignored, and may even annoy users because it will disrupt their current task and be irrelevant to their current needs. (In general, any type of ad tends to be ignored unless it is related to the users’ aims and mindset.) Alternatively, a toast (a small nonmodal popup that disappears after a few seconds, like the New Stories one used by the Facebook app), while appropriate for passive notifications, would be a bad way to implement an error message, be it validation or otherwise. In fact, one of our mobile users spent 5 minutes waiting for some content to load only because she hadn’t notice the little error message presented at the bottom of the screen that quickly faded away after 5 seconds. Allmodern.com used an action-required notification to communicate that a product was saved as a favorite. For a user that is saving a lot of items to their favorites, this can be a bothersome and intrusive way of providing feedback. This may be better communicated by showing a passive nonmodal popover in the corner of the screen that can be seen, but doesn’t require the user to take action to clear it. Conclusion Remember the key differences between the three communication methods are: Indicators provide supplementary information about a dynamic piece of content or UI element. They are conditional —that is, they may appear or change under specific conditions. Validations are tied to a user’s action or input. Notifications are focused on system-related events. These differences are summarized in the table below: Validation Notifications Indicators Global vs. contextual: Related to a global system event or to a particular page element Contextual Global or contextual Contextual Passive vs. requiring a user action Action required Action required or passive Passive Triggered by user action vs. system event User action System event User action or system event Understanding when and how to use each of these feedback tools is important in order to build consistency in the communication to users. By assessing the type of information delivered, we can determine the correct mechanism to use. How do users and staff interact with the support system? Which problems are the most important to address in the website redesign? What is the most-wanted information? Which words do people use when they search? Which desired information seems to be missing? How can the information best be organized and presented in order to match what users most want to do on the website? The UX Team The UX team consisted of 3 members: Susan Farrell, Senior User Experience Specialist, Nielsen Norman Group. Susan conducted the research, did data discovery, analyzed data, and made design-change recommendations. Crystal Beasley, Product Designer, Mozilla. Crystal led the project, coordinated with Mozilla stakeholders, and played the computer during paper-prototype research sessions. Bram Pitoyo, Web User Experience Designer, Mozilla. Bram designed the task flows and prototypes and supervised the interaction-design changes to the website. He also tested the old IA so we could compare results with the tests of the proposed new IA. The Steps We employed a variety of research methods intended to help us understand users' needs and also to redesign the IA and the workflow on the support site: Doing data discovery and analysis, to understand how users behave on the support site and why In particular, we looked at a variety of data sources to identify users' top tasks, as well as difficulties that they had with the current site. The table below summarizes the methods that we used. Headings Are Pick-Up Lines: 5 Tips for Writing Headlines That Convert by HOA LORANGER on August 9, 2015 Topics: Writing for the Web Summary: Attractive headlines and titles are critical in making the right first impression. Concise titles that sound authentic and relevant get noticed. A headline is often the first piece of content people read. And often it is the ONLY thing people read. If you want your encounters with people to be successful, make sure to write solid headlines. Have you ever tried to retell a story you read only to realize the details are fuzzy because you had only read the headline? This is a sign of a memorable headline. Good headlines entice readers and are critical to the success of your website. Below are 5 tips for writing engaging headlines: 1. Make sure the headline works out of context. We often think of headlines as being connected with the associated story. However, on the web, headlines usually appear out of context in places such as search results, social-media streams, blog posts, and news feeds. Headlines must be strong and descriptive, especially when standing alone, stripped of supporting content. Can you guess what the heading below refers to? New times call for new decisions The headline contains low information scent—that is, few cues to suggest what the story is about. People rely on visual and textual cues to perceive the usefulness of the content. They don’t spend time making inferences and trying to figure out items that don’t make immediate sense. Minimize cognitive load to maximize usability. Treat headlines like microcontent—phrases that can be scanned and still give readers a clear idea of the underlying information. 2. Tell readers something useful. Consider the decision-making process from the users' point of view. When faced with a barrage of links, their time is best spent clicking on headings that have the highest probability of providing value. Useful headings are specific. They provide facts or information that pique the readers’ interest. Avoid broad and generic headings. They don’t provide value or differentiate you from your competitors. Tell people something they don’t know and that benefits them. Headings that contain user-centric language are much more refreshing than vague ones that require guesswork. This headline is too broad: Make better, faster decisions with data visualization Contrast it with: Data visualization helps you detect and prevent fraud faster The second one is better because it is more specific and provides a concrete benefit that might arouse the reader’s curiosity. 3. Don’t succumb to cute or faddish vocabulary. Minimize hype and idioms (expressions). They are often vague, obscure meaning, and often change the tone of copy, usually for the worse. Consider this headline: Get the most bang for your buck with XYZ The headline above sounds pretty tacky and inauthentic, and degrades credibility. In addition, idioms such as “bang for your buck” often lack meaning to nonnative English speakers. Don’t be tempted to include overly informal language to sound modern and hip. It is much better to aim for clarity and authenticity. Keep your headlines straightforward by using familiar keywords. This is better: Increase productivity by 24% with XYZ Of course, there are exceptions to this rule. You can use specialized language when you address a specialized audience; in those cases jargon improves communication. However, before you sprinkle jargon all over your copy, verify that your entire audience truly understands it. 4. Omit nonessential words. The one place worth practicing being concise is in headlines. Spend time editing headlines to cut unnecessary words and tangled messages. Shorter headlines require less cognitive effort. And longwinded headlines don’t scale well to variable container sizes: they have a higher chance of being truncated when displayed on small mobile screens, for instance. Convoluted headlines like this lose readers: Caster, a technology company, buys Mitchell, with assistance from Jon & Smith, for $1.2B There are too many details that obscure the gist of the heading. The sentence also contains three commas, which create a jerky, start–and–stop effect. The headline can be made smoother by removing less important details, as in the versions below: Caster buys Mitchell for $1.2 billion –or– Jon & Smith orchestrates $1.2 billion deal for top technology firms 5. Front-load headings with strong keywords. One of the best ways to get traffic to your site is to front-load your headlines with keywords. Moving keywords to the front of titles increases the likelihood that they get noticed. Our eyetracking studies show that readers pay most attention to the first few words in lists. Don’t count on people reading the end of sentences. Let’s compare the following headlines: (1) Behold the new technologies for creating 3-D imagery and (2) Creating 3-D imagery gets easier with new technologies The first one runs the risk of not being read because the key phrase (creating 3-D imagery) is positioned at the end. Users must read the entire headline to understand its meaning. The second one is better. Moving the keywords to the front makes the heading more scannable. People can read only the first few words and still understand what the article is about. Conclusion Make a good first impression with short, keyword-leading headings that sound authentic, contain useful information, and make sense out of context. Try to follow all of these tips in one headline and you should notice a lift in user engagement.