UX 5

The Freelance Studio Denver, Co. User Experience Agency 3rd edition Topics: Mobile & Tablet Report PDF cover image Summary Although there are more smartphone users worldwide than desktop and laptop users, the usability of mobile websites and applications is still well behind the usability of desktop websites. This report documents our findings from 15 series of usability studies with users in 6 countries (mostly in the USA, but also in Australia, Hong Kong, The Netherlands, Romania, and the UK). It presents a set of design recommendations intended to help designers create a good mobile user experience. This 506-page report offers 336 design guidelines based on our usability research. Discussions and more than 700 screenshot illustrations supplement our findings. Topics Activities commonly performed on mobile phones and types of content that mobile users expect Mobile limitations and strengths App functionality: Which types of tasks make sense in a mobile app Relative advantages and disadvantages of mobile websites vs. mobile apps (hybrid or native) Benefits and drawbacks of responsive or adaptive web design vs. mobile-dedicated sites Accessing mobile sites and making them findable Making apps findable and discoverable Advertising mobile apps on websites Icons, names, and descriptions of mobile apps App discoverability: Making your app findable in an app store Dealing with multiple apps from the same company Differences between mobile platforms for apps Physical buttons on different platforms Transitioning from a desktop app to a phone app Hybrid apps Skeuomorphism and flat design Logo and company name Icons and icon labels Controls Spinners, sliders, and other selectors Carousels and carousel cues Button and button placement Feedback Errors and alerts; reporting errors in forms and elsewhere Notifications Modal dialogs and alerts Progress indicators Orientation Input and the touchscreen Touch targets: size, placement, affordances or signifiers Gestures Making gestures usable Usability of the horizontal swipe or horizontal navigation Gesture ambiguity Typing and mobile input-field design Forms Workflow and form steps Submit buttons Login and registration forms Navigation and IA on mobile; how to make navigation accessible and discoverable Menus: Dropdown boxes, accordions, overlays, sliding menus, pie menus Tab bars, navigation bars, hamburger and other navigation menus, navigation hubs How to deal with deep hierarchies on mobile The Back button Hidden navigation: More and action overflow Lists and scrolling View All, pagination, and infinite scrolling Search, filter, sort Scoped search Presenting search results Presenting and submitting filters Content Text content: readability and scannability Headlines and summaries Related content Images and videos Dealing with long pages: Mini-IA and in-page tables of contents Location information, maps, locator forms Instructions and help: instructional overlays, coach marks, contextual tips Initial experience (onboarding) Benefits Checklist of 336 specific design recommendations: Review your mobile user experience for these 336 items, and you will discover many things that need improvement Score your design against a checklist of usability guidelines to make sure you don't do anything wrong Description of how users behave when using a variety of mobile sites and apps, including extensive quotes: Learn from the users' comments and reactions to common design mistakes in the sites we tested $400,000 worth of research at 0.07% of the cost The differentiating factors that caused site visitors and app users to complete tasks successfully or unsuccessfully More than 700 color screenshots from a very wide variety of mobile sites and apps, with descriptions of why they worked well or caused problems in usability testing Methodology description helping you define the protocol for running your own mobile usability studies What’s New in the Third Edition? This third edition of the mobile report is a completely revised and reorganized version of our second edition that reflects the changes in the mobile landscape. The additions in this report reflect many of the new mobile topics and patterns that emerged or were revived in the recent years since the second edition. Additions include: responsive design and how it relates to mobile design in general, findability of apps, flat design, accordions and overlays, hamburger menus, gestures, pagination and infinite lists, flattening navigation hierarchies for mobile, secondary navigation and submenus, in-page tables of contents and page mini-IA, instructional overlays, and more. USA Today article about the first edition Who Should Read This Report? Those responsible for a company's or organization's mobile strategy Mobile designers and UX researchers Table of Contents Research Method The information in this report is based on usability research with mobile users 20-50+ years old. We used 3 different research methods: One-on-one usability testing Diary-based longitudinal study, for which people recorded their experiences with their mobile devices for approximately one week Design reviews Representative users tested a variety of websites and apps on a range of mobile devices, including touch phones and smartphones from many vendors. The studies took place in the United States, Australia, China (Hong Kong), the United Kingdom, the Netherlands, and Romania. Purchase Digital files for immediate download Individual License $298 Add to Cart Group License $598 Add to Cart Which license should I purchase? Related Research Reports Tablet Website and Application UX Mobile Intranets and Enterprise Apps iPad App and Website Usability WAP Usability 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. Share this article: Twitter | LinkedIn | Google+ | EmailGreat 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.) Apple's products are getting harder to use because they ignore principles of design. I'm a long-term fan of Apple, having used their products since the days of the Apple II computer. I loved the products so much that in 1993 I left my University job and moved to Apple where I established the User Experience Architect's Office. Afterwards I became Vice President of Apple's Advanced Technology Group. Indeed, I am typing this on an Apple computer. I was once proud to be at Apple, proud of Apple's reputation of advancing ease of use and understanding. Alas, these attributes are fast disappearing from their products in favor of pretty looks, or as designers call it "styling." Apple has gotten carried away by the slick, minimalist appearance of their products at the expense of ease of use, understandability, and the ability to do complex operations without ever looking at the manual. Today, the products are beautiful, but for many of us, confusing. The fonts are pleasant to the eye, but difficult to read. The principle of "discoverability" has been lost. The only way to know what to do in many situations is to have memorized the action. The screens offer no assistance in remembering whether one should swipe left or right, up or down, one finger or two. Or three. One tap or two. I frequently have to "re-read the manual," which means going back to the control panel to review the multiple finger swipes -- which are not even the same for all devices: the magic mouse is different from the trackpad which is different from the iPad. Inscrutable icons litter the face of the devices even though the research community has long demonstrated that people cannot remember the meaning of more than a small number of icons. Icon plus label is superior to icon alone or label alone. Who can remember what each icon means? Not me. The modern gesture devices lack feedback, they lack "undo." Menus were banished, evidently because they might detract from the lovely minimalist appearance, despite the conflict between that minimalism and the essential prompts and signifiers that simplify the person's ability to use and understand the product. Fortunately, most of my comments refer only to the gesture, iOS devices -- iPhone and iPad, but similar changes are appearing on the desktop devices. Unfortunately, Google has caught the same disease in its Android designs, although Google still allows menus (and an indicator of the menu's presence on the screens). I'm not alone in these views. Many ordinary users of Apple devices agree. Several senior, well-respected designers with whom I have discussed this agree. My good friend Bruce Tognazzini (Tog) agrees. Tog is a long-term friend, partner in the Nielsen Norman group, and Apple's first interface designer (he was Apple employee number 66). He and I are writing a critique entitled "How Apple ruined design."(See Tog's Wikipedia entry and his blog.) Meanwhile, my complaints have been noticed. Ayesha Salim interviewed me and published my views in her column on the IDG Connect website: Design guru Don Norman slams Apple's ease-of-use 'disservice'. Which means Tog and I better get busy and complete our more detailed, more comprehensive article.