UX 2

The Freelance Studio Denver, Co. User Experience Agency Should Small Companies Have an Intranet? by KARA PERNICE on September 13, 2015 Topics: Intranets Summary: Small organizations with a stable employee base, systemized storage of information and policies, and a workforce that communicates and collaborates easily may not need to invest in an intranet… yet. But even small organizations rapidly outgrow email, social feeds, and file sharing solutions. Since 2010, 12 out of the 50 winning organizations in our Intranet Design Annuals have had 2,000 or fewer employees, with one, Accolade, with just 200 intranet users. (See the end of this article for the list of these winners.) Comprising 24% of this winning set is not too shabby for the little guys. But organizations with fewer than 1,000 employees often forgo creating an intranet. Many small organizations make do with email, Yammer, and a file-storage system. And these can work quite well in the short term. However, as more information is added and time passes, relying on such tools to access a company’s knowledge repository can get very ugly and disjointed. The lack of a global-search feature and not knowing who uses what or when a document can be deleted can significantly impact the employees’ productivity. The cost of purchasing, deploying, and maintaining big solutions such as SharePoint is prohibitive for smaller organizations. Since 5 out of the 12 small organizations in our 2010-2015 Intranet Design Annuals do run on SharePoint, we know this can be done successfully. Still, other “out-of-box” intranet solutions may be cheaper and lighter, and more attractive to small organizations. But, no matter what you read, always keep in mind that no good intranet is truly turnkey. Design, development, customization, maintenance, and governance are required elements for any intranet design. If there is one conclusion from the thousands of intranets we’ve analyzed over the years, it’s that an unmodified turnkey user experience will be substandard, no matter where it’s used. Every company is special, and therefore no one intranet design will be effective everywhere right out of the box. You can, however, look for software with an initial design that is a good basis for customization without the need to change everything. The number of employees is only one factor that should contribute to making a good decision about whether to have an intranet. Even if you have only 25 employees, an intranet may provide substantial benefits if any of the following are true at your organization: Multiple office locations A substantial percentage of the workforce working remotely or from the road Planning to hire many new employees High employee turnover Mergers and acquisitions Poor internal communication Clogged email inboxes Confusion about where to locate the most updated information, policy, customer information, sales decks, legal requirements, industry guidelines, announcements, and so on. Multiple Office Locations When all employees work in one office building together, a specific culture forms. This culture may include coffee-room banter, common jokes, bonding over lunch, and sometimes even yelling over cubicle walls. But once there are multiple offices, the communication needs to adapt. An intranet can help solve this problem, and can encourage employee communication through social features and team spaces. (In fact, research on inter-employee communication shows that people communicate more with other employees on their own floor than with employees on a different floor in the same building. That said, we still don’t feel that having office space across multiple floors is enough to recommend an intranet.) Employees care about their workspace and want to know what is happing there. Information that applies to a particular location—such as a conference-room scheduling, the cafeteria menu, or a (physical) publication library—should be easily accessible and up-to-date. An intranet is a one-stop location to find all of this information, either personalized to the logged-in user by her role, or accessible via a menu link for each office location. Workforce Working Remotely Speaking in person can be productive and encourage collaboration. Online wall feeds and other social tools can also do this. But open communication about a particular project or topic is not always well suited to a wall feed. Intranet systems can provide better collaboration tools, and easily link to other information, documents, and people working on that project. For example, at Huron Consulting Group, consultants were often working at client locations, but needed to find information about other consultants. Huron’s intranet made this information easy to access everywhere on the site. Lawyers and senior managers at Bennet Jones LLP frequently worked from home, especially in the evening, on weekends, and when they traveled. They used their intranet then to access the latest legal rulings, policies, and more—keeping their business moving after hours. National Geographic Society encouraged mobile use of the intranet from remote locations, when traveling on business or even between buildings on the organization’s main campus (in Washington, D.C.). The mobile site offered access to the employee directory, news, and social features. Hiring More Employees New employees usually don’t know how things get done at the organization they just joined. They need to learn people, processes, tools and terminology. Figuring out where to go to look for these things can waste a lot of their time and elongate their onboarding process. A good intranet can help new hires learn about the organization in an efficient way. In fact, many intranets provide sections such as New Employees and Onboarding to help new hires become productive more quickly. Information here can make them feel more confident in what they are doing. It can also help break the ice when trying to get to know new coworkers. Even if it is a small company, unless you all see each other each morning and have the opportunity to introduce new employees in person to every colleague and process, doing it on an intranet can be very positive. High Employee Turnover When people leave a company, their knowledge leaves with them, unless it has been documented and is accessible, findable, and usable by other employees. If the information is in the departing employee’s email, local computer, or scattered on various network drives, only the most motivated coworkers will be able to pull it all together and decode the personal notes. An intranet can make sharing knowledge easy and systematic, and accessing that knowledge a day-to-day occurrence. Mergers and Acquisitions When companies merge and are acquired, the business needs to find methods for streamlining processes, identifying and getting to know people to work with, eliminating duplicate processes and effort, and communicating to all. Keeping disparate systems can foster an undesired “us versus them” and “this is how we do it” attitude. Unifying systems and processes, and taking the best from both (or multiple) businesses can result in a better system—a better intranet—that promotes unity and core business values and goals. CenturyLink, resulting from Qwest acquiring USWest in 2000, combined the two company’s intranets soon after the merger. Over the years the intranet design was iterated, and databases and templates created better consistency across the site. Information-rich content exploded when nonprogrammers could add content. In 2010, CenturyLink’s intranet, designed after identifying the content most often accessed by users, was one of winners of our Intranet Design Annual. Poor Internal Communication Employees need a place where they can methodically share information in a secure and findable way. Employees should be aware of what they should share, and have tools and methods for communicating information about projects, policies, or teams, as well as news, and announcements. Announcements and news keep employees abreast of happenings, and can foster a feeling of excitement and unity. They can make people feel respected, as though they are important enough to the organization to be informed about particular efforts. Employees often begin their workday on the homepage of their intranet to read the news and get a pulse on what’s happening at the organization and in the industry as a whole. In fact, reading corporate news is the second most popular task users do on most intranets. (Do you know the most popular? The answer is at the end of this article.) Clogged Email Inboxes In the absence of a good intranet, employees often turn to sending mass emails about every topic—from a new president to free soft pretzels in the break room. There is so much wrong with this, and users in our studies often complain about too many emails. The perceived urgency of the medium can distract from employees’ true priories, too many emails are time-consuming and stressful to act on and even file, important information can be lost or difficult to locate, and it is easy to find the wrong information and miss a later email with the changed or corrected information. Because of the distaste for misused email, one of our Design Annual winners, Klick Health, focused on creating an intranet system composed of task-tailored tools that would address all of the company’s business requirements in one place, and thus eliminate much of the emailing that was being done before. Bennett Jones LLP encouraged users to think of the blogs on their intranet as a substitute for email conversations. In a legal environment such as theirs, people can read blog conversations around important cases, new legislation, best practices, and new precedents. These are fully searchable and entries never disappear. Feedback from a user of Accolade’s intranet was that the intranet allowed him to email less, see what his colleagues are working on, scan corporate news, find needed information, and connect with colleagues. Confusion About Where to Locate the Most Up-to-Date Information File-sharing solutions such as Box, Dropbox, Egnite, and Google Drive are popular and have many helpful features. But finding the right, most up-to-date information is still an issue with most file-sharing systems. Confusion about where to locate the most updated policy, customer information, sales decks, legal requirements, industry guidelines, announcements, and so on can be incredibly time consuming and detrimental. A good intranet can help employees avoid these pitfalls. Another user of Accolade’s intranet noted that the intranet enabled him to share information in a very simple way: he did not have to send documents anymore or save them on local storage; rather, information was saved and accessible in one place. The intranet also made it possible to target information to a specific audience. Combining information in one tool means creating an IA and search for that tool. While neither is a fast or easy endeavor even at small organizations with little content, it is worthwhile to make important information accessible and searchable. Going Forward Consider your current tools and systems and their relationships to employee efficiency and business needs before you embark on the process of creating an intranet. If you decide to have an intranet, don’t choose the tool first or the features first. Write goals that align with business goals and employee needs. Then get buy-in from stakeholders. List of Small-Company Winners 2015 Accolade, 200 users Klick Health, approximately 400 users Saudi Food & Drug Authority, 2,000 users 2014 National Geographic Society, approximately 1,500 full-time employee users (plus numerous contractors, interns, and international partners) triptic, 20 users 2013 Acorda Therapeutics, Inc., 350 users Luzerner Kantonalbank AG, 1,000 users 2012 CenturyLink Business, approximately 2,000 users LivePerson, Inc., 550 users 2011 Bennett Jones LLP, 925 users Mota-Engil Engenharia e Construção, S.A., 500 users 2010 Huron Consulting Group, approximately 2,000 users For more information about excellent intranets at small organizations buy our report: Best Small Organization Intranets 2010-2015 Answer to our riddle: What’s the most popular feature on most intranets? The employee directory is the killer app, and finding information about employees is the most common task. Share this article: Twitter | LinkedIn | Google+ | Email Audience-Based Navigation: 5 Reasons to Avoid It by KATIE SHERWIN on September 7, 2015 Topics: Information Architecture Navigation Summary: Role-based IAs increase cognitive effort and user anxiety. Clear language and mutually exclusive categories reduce the chance of harming the user experience. “What do you think about audience-based navigation?” It’s a question that I am asked when teaching at our Usability Week conferences, and it tends to come up at least once per conference. It’s a reasonable question, and I understand why people wonder about it. The intention is to help users focus on what is relevant and important to them, while hiding content that doesn’t apply to what they need. Unfortunately, my short answer is that organizing site navigation based on audience type is usually problematic. As a short definition, audience-based navigation is when the site offers different features to different segments of the target audience and allows visitors to see the features for their segment by clicking on the name of their group. Labels for all the targeted segments are usually provided in the global navigation and sometimes also prominently shown on the homepage. The theory is that each user will know what segment he or she belongs to and will only need the features targeted at this segment. Under these assumptions, the hope is that users will save time from not being exposed to those features that are targeted at all the other audience segments. 5 Problems with Audience-Based Navigation It seems like organizing information by audience type would be easier for both users and content creators. Companies are inclined to choose this method, partly because they are already armed with information about their target audiences and about their site’s users. Designers hope to help users navigate more efficiently by anticipating each group’s needs and sending people down their respective paths. They also see an advantage to tailoring the tone of the writing and images to each audience. In spite of these apparent advantages, usability issues with role-based navigation are incredibly common. Below are the top five issues that we see in our research. Users don’t know which group to choose. Sometimes users identify with more than one audience group. Other times, they don’t identify with any of the options. In some cases, people don’t understand the labels, because the audience categories are based on the organization’s internal jargon. The reality is that people don’t always fall neatly into a single category, nor are they able to quickly self-identify. Tabbed audience categories Key Bank has audience-based navigation, but the difference between Private, Business, and Corporate is not clear. Where should the owner of a privately owned small business (that happens to be also a corporation) look for services? Users question whether the category will have information about that group or for that group. Imagine a university website with a link in the main navigation called “Faculty.” Would you expect to see information about the professors that teach at the university, or would you expect specialized information for faculty members? Based on the label alone, you can’t tell, and neither can users. (As a side note, during usability testing, you can learn a lot by asking participants what they expect from audience categories, before they click). Forcing people to self-identify creates an additional step and takes people out of their task mindset. Web users are task oriented; they aren’t thinking about who they are. In audience-based navigation, people must ask themselves who the site thinks they are and what type of content that type of person wants. All these questions increase users’ cognitive effort, and people haven’t even made it past the navigation yet. Users feel anxious that the information they see might be incomplete or incorrect. When users feel stuck in one group, they wonder what other groups get that they don’t. Particularly in e-commerce or B2B contexts, users want to know if other audience groups have access to better options or prices. Websites with audience-based navigation often have overlapping content, which creates a greater workload for users (and content maintainers). Often, topics relate to more than one audience group. So designers end up either creating two pages, one for each audience (a technique that replicates content), or they use the same page with multiple links to it from different sections. Most of the time, this results in users questioning if the information is different in different areas of the site, and people end up pogo-sticking between sections, testing links to see if there is new information. Ways to Mitigate the Risks of Audience-Based Navigation Despite the potential pitfalls, there are ways to make audience-based navigation work. Below are a few tips to avoid the most common issues. Make audience categories mutually exclusive and jargon free. Audience groups should be distinct and descriptive, so that users can quickly identify themselves. Category names should use plain-language terms that people can easily relate to. Indicate if the category contains information for that group. Users are much more successful with audience navigation that includes the additional word(s) “for” or “Information for”. "For Medical Professionals" clarifies the audience label Global navigation on the Mayo Clinic website is mostly topic based, with the exception of the For Medical Professionals category. The simple addition of the preposition “for” clarifies the purpose and the contents of that category. Only use audience-based navigation when the content truly justifies it. Role-based navigation works best when the content is unique to that audience group. There should be enough information specifically for that group to justify its own section. In our 2015 Intranet Design Annual, many of the winners successfully incorporated role-based personalization into their intranets. For example, one company created special sections that only appeared for managers or for users on certain teams. University page dedicated to military audiences Southern New Hampshire University has a section dedicated to military students that contains information directly relevant to military students and families. This section effectively avoids overlapping content by not repeating general information about the school or the admissions process. Add additional context by showing subcategories early on. Surfacing deeper links (for example, with a mega menu) introduces users to the scope of a section and affords a shortcut to the content. This way, users can scan the options and better understand each category and its contents. Mega menu adds context to audience labels The second tier categories on the Multiple Sclerosis Society of Canada website are organized by audience. The mega menu design allows users to see the scope of each audience section and links directly to those topics. Design navigation that allows users to easily switch between audiences. As with any navigation system, users should be able to understand where they are in the site, and where else they can go. Avoid portals that lock users into an audience section with no obvious way to move between sections. Prioritize topics and tasks over audience categories. Remember that web users are task-oriented: they come to a website with a goal in mind. Information organized by topic or by frequent tasks is often easier to navigate because it immediately addresses what people seek. Audience-based navigation can be used as secondary or tertiary navigation when the content merits its own section. Audience categories in utility navigation Trusted Choice Insurance relies on topic-based global navigation, but it offers two role-based sections (For Agents and For Carriers) that are given less priority with their placement in the utility navigation. Conclusion Audience-based navigation demands additional cognitive effort from users, as they must determine which category to choose, what information to expect in each category, and whether there is other useful information in different audience groups. It forces users to identify themselves instead of presenting topics upfront. But by ensuring that categories are mutually exclusive, and that there is sufficiently unique content to justify a new section, designers can reduce the risks of this type of navigation. Slider Design: Rules of Thumb by AURORA BEDFORD on September 13, 2015 Topics: Applications Mobile & Tablet Summary: Selecting a precise value using a slider is a difficult task requiring good motor skills, even if the slider is well designed. If picking an exact value is important to the goal of the interface, choose an alternate UI element. Sliders are often the UI control of choice for letting users select a value or range from a fixed set of options. However, in practice, sliders are difficult to manipulate. Especially on touch interfaces, the level of control needed to meticulously operate a slider to an exact value is simply not realistic. Definition: A slider is a control element that uses a knob or lever moved horizontally to control a variable, such as volume on a radio or brightness on a screen. Imprecise Interactions When designing a usable UI we must consider the context in which the interface will be used. For mobile design in particular, users often hold their device in one hand while doing other activities—watching television, walking, or even driving. In such circumstances it can be daunting to tap and drag a control precisely to a particular spot. Sliders are subjected to the steering law, which describes the time needed to navigate through a tunnel—as you might guess, the longer and narrower the tunnel, the more time it takes to steer through it. (The steering law also applies to drop-down menus and horizontal scrollbars.) With mobile devices being, well, mobile, it is not surprising that we see many users accidentally nudge the slider off the value they were attempting to select just as they lift their finger off the screen. Screenshot of Kayak iOS app filters The Kayak app uses multiple sliders for filtering based on the time of flights. The Depart and Arrive sliders only allow whole hour values, but the Duration sliders force users to select a value down to the precise minute. Another major consideration when designing a touch interface is the accessibility of various UI elements. Think about how challenging it would be to interact with a slider control for users with motor difficulties. Would they be able to select a value even close to what they wanted? How much effort and how many tries would it take them? Many older users have less steady hands than younger users and would have similar difficulties performing precise gestures to manipulate small UI elements. Unless you want to render these users helpless, a slider control may not be the best choice. Is an Exact Value Necessary? Allowing the selection of a very specific value is often not necessary, nor very helpful, to the user. Sliders work best when the specific value does not matter to the user, but an approximate value is good enough. Thus, Kayak may get away with using sliders for duration and arrival and departure hours, as most users will be fine with a departure time that is, say, midday, and won’t care to specify the exact moment of the departure. But whenever the exact value matters, sliders are not okay. For instance, if you had to enter quantities such as age or current weight or height within a form, a slider would not be appropriate. The wider or the denser the range selectable through a slider, the harder it is to select a precise value. The Delectable app asks users to rate wine on a 6-10 scale, accurate to a tenth of a point. Not only is the abnormal scale is confusing, but selecting the precise value (9.5 vs. 9.3, for instance) is quite a motor feat. One could perhaps argue that the user won’t mind rating the wine a 9.3 instead of a 9.5, since the values are in the same ballpark. But then, why bother with the tenths of a rating and not use a simpler 5-point scale instead? Screenshots of product rating elements on Delectable iOS app and Amazon iOS app Left: The Delectable app uses a slider for assigning a very specific rating to a bottle of wine. Right: Amazon app uses the more common, and easier to select, tappable stars to assign a rating for a product. Screenshot of Weightbot iOS app slider Weightbot, a weight-tracking app, commits a double error: (1) it uses a slider (that is an imprecise control) for something that needs to be indicated with precision (weight) and (1) the slider moves in very small increments (.1 lb). Plus, the value it starts with is random: if you weigh 120 or 210 lbs, good luck adjusting the slider! Think About the Thumb In cases where the use of a slider may be appropriate, ensure that the visual design of the element does not hinder its usability. For touchscreens, consider where the user’s finger will be placed on the screen—and what areas of the screen will thus be covered—while manipulating the slider. While labels placed directly below the slider may work on desktop designs used with a mouse cursor, the same label placement does not work well for mobile devices and other touchscreen designs because the labels may be obscured by the users’ finger while they are interacting with the control. Screenshots of filters on BrilliantEarth.com and AirBnB.com Left: The sliders on BrilliantEarth.com place the labels describing the slider increments below the slider track, where they will be obscured by the user’s thumb during the interaction. Right: AirBnB.com correctly displays the slider values above the UI element, so they would remain visible throughout use. In order to remain visible during use, any labels describing the slider or its currently selected value must appear beside or above both thumbs involved: the thumb of the user, and the thumb of the slider (also known as the knob or elevator). Conclusion Use a slider only when the precise value won’t matter to the user, but rather only the approximate range. Make sure that the users can select that range correctly without having to struggle too much to hit a precise value. In addition, any slider labels must be displayed above or beside the slider, rather than below it, in order to remain visible while the user is selecting a value. Alternatively, consider a different UI element that allows users to tap or even type to specify their choice rather than relying on press-and-drag gestures. When to Hide Content Behind Forms and When to Give Content Away by HOA LORANGER on September 20, 2015 Topics: B2B Websites Content Strategy Summary: Understand your users’ intents and stage in the sales funnel before you gate content. Should you gate content — that is, keep white papers, case studies, or e-books behind a form that becomes the gate-keeper for allowing users access? (Or — just as often — for denying users access to the content, because they refuse to complete the form.) Most people detest such lead-generation forms, especially when they ask nosey questions that are irrelevant to the task at hand. Long, drawn-out forms are a sure way to scare people away. Yet, traditional websites have relied on heavy forms to find and convert leads, even at the high risk of losing potential customers. Gated content is particularly common on B2B sites. There are situations, however, when people are more likely to fill in such forms. Mapping content to the user’s journey will help you determine whether or not to gate content on a case by case basis. The type of content as well as the implementation of the actual “gate” also affect the users’ willingness to go past the gate and fill in the lead-generation form. When Not to Gate Content such as articles and blog posts should not be gated if your main goal is to establish stronger thought leadership, increase site traffic, and improve SEO. Search engines usually can’t see content behind gates, so it’s best to keep content within view if you want to make it findable. Additionally, content that is meant to increase awareness or answer fundamental product questions should remain ungated as well. Early in the buying cycle, people need to understand what the thing does and how it benefits them. Gating content prematurely creates tension and distrust. Many organizations make the mistake of placing items such as case studies, FAQs, and product specifications behind gates. These content assets don’t usually belong behind gates. People in the initial stages of the buying cycle have lower commitment and a higher propensity to abandon forms than people in later stages. At low-commitment stages, one way to shine is to immediately appear transparent and courteous. This is your chance to initiate the conversation and make a good first impression. If users perceive value, they will be more inclined to move the relationship forward and provide you with their personal details later. When to Gate People are more willing to risk offering their personal information when they perceive your content as valuable and unique. Sometimes it’s appropriate to gate high-value content in resources such as research papers, webinars, and training videos. The challenge for organizations is to determine what content visitors consider valuable enough to be worth their personal information. Site visitors are most apt to complete forms when they can’t get the information elsewhere and when the purchase intent is high. People do expect to have to answer a few questions in exchange for free trials, quotes, downloads, webinars, and consultation requests. If you decide to gate content, make sure you: Provide a reasonable level of content outside of the gate to demonstrate the value of your offering. Prove your worth before asking for something in return. Use the reciprocity principle to motivate engagement. Placing the gate within the content could be a viable option. For example, give people a list of tips but save the most critical ones for after the reader completes the form. Balance SEO with lead generation. Keep in mind, locking your best content behind gates will significantly diminish your search rankings. It’s no good to have great content if no one discovers it. Landing pages and gateway pages can improve SEO and increase user engagement by reassuring users that they are in the right place and by setting proper expectations. Find the right moment in the workflow to gate content. Do it when people are ready to have a conversation with you about your services. Determine where users are in the sales funnel and tailor your communication to the buyer’s state and commitment level. Keep the questions short and targeted. Studies show that shorter forms have higher conversion rates. Only ask for essential information that you can use now and leave out questions that merely satisfy some vague curiosity: every time you cut a question from the gating form, you’ll get more responses to the remaining questions. A single question (such as a request for an email address) is low risk for users and appropriate especially during the initial phases. The less work required to access content, the more willing people are to exchange information. Consider employing progressive profiling to nurture the relationship. Rather than asking people to complete a long and tedious profile form, collect information about each prospect over time, by asking different questions that are customized to the situation and buyer’s intent. Make sure you have stellar content behind gates. Users are more willing to give personal information when they trust the content quality. Your challenge is to find out what content people value and to make it consistently remarkable. Ensure that people understand the value of your content before having to pass through the gate. If users have downloaded some of your gated content before, then their level of satisfaction on that earlier occasion will dictate whether they’ll try to do it again. For new users, you must work harder to increase their comfort. Providing a clear summary or list of benefits could lower their resistance to completing the form. Protect the user’s inbox. Once people trust you with their email address, use it respectfully. Continue to nurture the relationship by providing people with information they need, not with what you want them to need. Conclusion Not all content must be gated and not all gated content must be annoying. When done well, gating information can benefit both prospects and businesses. The key for successful gating is to understand customers' intent and to have high quality content for which people are willing to trade their personal information. Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users by KATE MEYER on September 27, 2015 Topics: Visual Design Web Usability Summary: Flat design is a web-design style that became popular around 2012. It is still widely used today, and its overuse can cause serious usability problems. One of the biggest usability issues introduced by flat design is the lack of signifiers on clickable elements. Flat 2.0 may provide a better alternative. Flat design is a popular design style that is defined by the absence of glossy or three-dimensional visual effects in the graphical elements of a web page. Many designers consider it to be an offshoot of minimalist web design. Three-Dimensional Effects, Skeuomorphism, and Realism To define flat design, we must define what flat design isn’t. Flat design is commonly interpreted as a reactionary movement against three-dimensional, skeuomorphic, and realist design styles. A fully flat interface doesn’t use any of these styles. Three-Dimensional Effects Three-dimensional effects give an illusion of depth to an interface, which can help users interpret visual hierarchy and understand which elements are interactive. Elements that appear raised look like they could be pressed down (clicked with the mouse). This technique is often used as a signifier for digital buttons. Elements that appear sunken or hollow look like they could be filled. This technique is often used as a signifier for input fields, like search bars. Since the early days of graphical user interfaces, screens have employed pseudo-three-dimensional effects (shadows, gradients, highlights) to help users understand the available actions at a glance. However, the pseudo3D effect in these early GUIs tended to be aggressive, overdone, and visually distracting. Windows 95 dialog box This Windows 95 dialog box made use of heavy shadows and highlights to create 3D effects. Notice how the buttons appear raised and the input fields appear sunken. It’s also clear which of the three tabs is on top of the other two. However, heavy shadows can easily make an interface visually unappealing. Skeuomorphism In digital design, a skeuomorphic design is an object that has unnecessary, ornamental design features that mimic a real-world precedent. Skeuomorphic designs are intended to help users understand how to use a new interface by allowing them to apply some prior knowledge about that precedent. Kindle Fire In earlier models of Amazon’s Kindle Fire tablet, the Android-based operating system used a skeuomorphic bookshelf design, complete with three-dimensional ‘shelves’ and wood textures. The bookshelf metaphor was intended to help users transfer previous knowledge about bookshelves (as a place to store and organize physical media) to the digital environment. The ‘shelves’ and wood textures are irrelevant to the system’s functionality, but were supposed to reinforce the metaphor. Amazon later removed the skeuomorphic bookshelf design from the UI. Realism Realism is a design style that mimics physical items or textures for aesthetic reasons. Skeuomorphism is often confused with realism. In web design, the two styles are usually found together. The primary distinction is that realism is a visual style that uses design elements and textures that mimic the physical world for purely aesthetic purposes, while skeuomorphism supports a metaphor to help users understand the interface. Sprouts homepage Like the earlier Kindle Fire tablets, Sprouts grocery chain’s website uses three-dimensional wood textures. However, the realism in this design is only for aesthetic appeal. It does not serve to support any kind of metaphor to help users understand how to use the interface, nor does it mimic any real-world predecessor. The Origins of Flat Design The release of Microsoft’s Metro design language and Windows 8 in 2011 was particularly influential in popularizing flat design. Microsoft’s design documentation referred to its new style as ‘authentically digital’—a phrase that neatly captures the appeal of flat design for many designers. Unlike skeuomorphic design, flat design was seen as a way to explore the digital medium without trying to reproduce the appearance of the physical world. The flattening of Apple’s homepage provides a useful benchmark for the growth of the trend’s popularity. Skeuomorphism and realism had long been trademarks of Apple design, and its homepage resisted the flat trend until around 2013. Apple, 2007 Apple’s homepage in 2007 (via WayBack Machine). The navigation bar is styled to appear as glossy, three-dimensional tabs. Apple, 2012 Apple’s homepage in 2012 (via WayBack Machine). The tabs metaphor is gone, but the navigation bar still appears glossy and rounded (an example of realism rather than skeuomorphism). The new search bar has inset shadows to make it appear hollow (a more elegant visual effect than the appearance of the Windows input fields 17 years earlier, but conceptually the same idea). The icons visible in the lower right corner are so glossy, they almost interfere with the viewer’s ability to understand what they are. These buttons almost appear to be glowing, rather than raised. Apple, 2015 Apple’s homepage in 2015. The entire navigation bar, including the logo, is entirely flat—no detectable shadows, textures, or highlights. There are no 3D, realistic, or skeuomorphic effects here. The only way users know that the navigation options are clickable is by convention: a strongly colored stripe across the top of a web page tends to be a navigation bar (except when it’s an ad, but this one is too thin to fall victim to banner blindness). Usability Problems with Flat Design Since flat design’s emergence in 2011, Nielsen Norman Group has been a vocal critic of its inherent usability issues. Our primary objection to flat design is that it tends to sacrifice users’ needs for the sake of trendy aesthetics. For years, users had been exposed to traditional signifiers of clickability, such as blue, underlined links and 3D effects on buttons. As design trends shift and users are exposed to new patterns, the average user’s ability to intuitively identify linked elements has evolved. But just because users are better at detecting linked elements doesn’t mean they don’t need any clues at all. When we asked a 22-year-old Canadian (who participated in research for our upcoming Designing for Millennials course) how she knew what she could click on in websites, she gave the following answer. “When it’s blue and underlined, that’s how you know initially. You see that even in Word and stuff. But really, especially when it’s underlined, that helps. Or if it’s a button, it doesn’t have to say Click here, but if it says, Buy now or Purchase or Add to cart.” This quote neatly illustrates the types of cues people use to determine clickability: Traditional, externally consistent signifiers (e.g., the blue underlined text, raised buttons) Something reminiscent of a traditional signifier (e.g., underlined text of any color, boxed text) Context clues (e.g., actionable text, placement at the top of the page) Trader Joes homepage The homepage of Trader Joe’s displays a variety of clickability signifiers. (1) The blue, underlined text of View All is a traditional signifier. (2) The flat, red background on the Find link is reminiscent of a button, even without three-dimensional or realistic visual effects. (3) The black links in the main navigation bar communicate their clickability only by their placement and text. (Note that the mostly flat page does have one element of skeuomorphism—the wooden ‘shelf’ under the featured product carousel.) If your organization wants to transition to a flatter aesthetic, follow our guidelines for designing recognizably clickable elements to make sure you aren’t causing click uncertainty. Fattening Flat Design Recently, designers have begun to realize the usability issues of flat design. As a result, a more mature and balanced interpretation of flat design has emerged. Designers are finding they can be ‘authentically digital’ and explore the unique opportunities of the medium without compromising usability. This is sometimes referred to as ‘semi flat,’ ‘almost flat,’ or ‘flat 2.0.’ This design style is mostly flat, but makes use of subtle shadows, highlights, and layers to create some depth in the UI. A designer's portfolio using long shadow effects Flat design elements with long shadows, as seen in this designer’s portfolio, became popular around 2013. Long shadows are one example of flat 2.0 gone wrong—the 3D effects are purely aesthetic and don’t add any meaningful information for users. Thankfully, their popularity has declined, but icons with long shadows are still in use in some flat interfaces. Google’s Material design language is one example of flat 2.0 with the right priorities: it uses consistent metaphors and principles borrowed from physics to help users make sense of interfaces and interpret visual hierarchies in content. Evernote Android application The Evernote app for Android is a good example of the possible benefits of flat 2.0. Despite having a mostly flat UI, the app provides a few subtle shadows on the navigation bar and the floating plus button (‘add new’). It also makes use of the card metaphor to display content as flat, layer-able planes in a 3D space. As with any design trend, we advise balance and moderation. Don’t make design decisions that sacrifice usability for trendiness. Don’t forget that—unless you’re designing only for other designers—you are not the user. Your preferences and ability to interpret clickability signifiers aren’t the same as your users’ because you know what each element in your own design is intended to do. Early pseudo3D GUIs and Steve-Jobs-esque skeuomorphism often produced heavy, clunky interfaces.Scaling back from those excesses is good for usability. But removing visual distinctions to produce fully flat designs with no signifiers can be an equally bad extreme. Flat 2.0 provides an opportunity for compromise—visual simplicity without sacrificing signifiers. Share this article: Twitter | LinkedIn | Google+ | Email Learn More iOS 9 App Switching and the Back-to-App Button by RALUCA BUDIU on September 27, 2015 Topics: Mobile & Tablet Navigation Summary: App switching in iOS 9 can disorient users in multiple ways. Simple design fixes can significantly improve the user experience. When people use their phones to plan dinner out with friends on a Friday night, there is often a lot of back and forth between different apps — looking up restaurant ratings on an app such as Yelp, checking restaurant availability on OpenTable, and synchronizing with everybody in their party through email and SMS. Research recently published confirms that users who look for information on their mobile phones often interact with more applications and for longer — on average, they interact with 4.6 different apps and launch apps 10.8 times within the same information-seeking session (compared with only 2.6 apps and 3.9 launches per session in other types of sessions, such as browsing sessions). So there is definitely a need to support mobile multitasking and combining multiple sources of information, or, at least, switching back and forth between multiple apps. Besides going back to the home screen and launching a second recently used app by tapping on its icon, there are two quick ways to switch between apps: Go to the list of recent apps, find the app you’re looking for, and tap on it. (In iOS this is done by tapping the Home button twice; in Android by tapping the Recent Apps physical button.) Use the Backbutton. Until iOS 9, the second option was only available to Android users: the phone’s physical Back button works across applications and thus allows users to go back to a previous app, provided that the current app was launched from the previous one. In other words, if someone sent you a link in an email and you tapped on it while reading the message in the Gmail app, the link would be launched in the browser and once you’ve finished reading the page you’d be able to go back to Gmail by tapping the phone’s Back button. However, if you decided to stay on that site and browse one more page, tapping the Back button would not take you back to the app, but to the page you’d seen before in the browser’s history. In other words, the Android physical Back button has a meaning that is fairly easy to understand by the users: it undoes the previous action. With iOS 9, Apple introduced some changes to how users can switch between apps: not only did it redesign the list of recent apps, but it also introduced a new Back-to-app button. The new list of recent apps displays the different apps in a stack of cards, not unlike the stack of cards used for the same purpose in Android. But Android makes better use of the limited screen space, by stacking cards vertically instead of horizontally and by using a fish-eye effect to still fit in some of the apps used farther away in the past. List of recent apps in Android and IOS 9 List of recent apps: Android (left) uses a vertical stack of cards and iOS 9 (right) uses a horizontal stack of cards for the apps most recently run. The iOS list now looks like a horizontal version of the Android equivalent, with the previously used app displayed in larger detail than the other apps and the current app being the last one on the left. However, one of the most notable changes in iOS 9 is not the new list of apps, but rather the new Back-to-app button. Unlike the Android physical Back button, the iOS Back-to-app has a very limited functionality: In certain circumstances, it allows people to go back to the previous app they used. Issues with the Back-To-App Button As usability experts, we are trained to look for and see the worst in interfaces. So let me preface my list of complaints by admitting right away that the Back­-to-App button is definitely useful since it decreases the interaction cost of switching apps. However, the implementation creates some potential issues. Luckily app designers can alleviate at least one of these problems. Target size. First, it is obvious that the Back-to-app button is an afterthought — it feels almost like a Band-Aid on a beautifully finished product. Its size is tiny and its position at the very top of the screen makes it easy to accidentally hit other buttons that apps traditionally place in the top left corner of their design (for instance, the hamburger menu or the in-app Back button). Although is hardly noticeable because of the small size, its lack of discoverability is likely not a huge problem: since this is an operating system (and not a random app or website), users will have many opportunities to eventually notice it and hopefully learn to use it. When Yelp is invoked directly from the App Store, The Back to iTunes Store button appears in the top left corner of the screen. Mental model. The Back-to-app button only takes users back to a previous app if the current app has been invoked by that previous app. In other words, if you’re listening to a song in Pandora, then double tap the phone’s Home button to invoke the list of recent apps, and finally select iTunes from that list to look for the same song, there won’t be a Back to Pandora button displayed in iTunes. However, if you tap a shopping-cart icon in Pandora and it takes you to iTunes directly, then the Back to Pandora button will be displayed. Some users will have a hard time understanding precisely why the button sometimes appears up at the top of the screen and sometimes doesn’t. Because of this apparently nondeterministic behavior, people may end up not relying much on the button and opting instead to use the other, more beaten and reliable path, of switching apps — namely, hitting the phone’s Home button twice to invoke the list of recent apps. The designer’s mental model of the Back-to-app button is not easily conveyed to the user. Something that always works is preferable to something that sometimes works. (Because if it always works, it’s a no-brainer to reach for it. But if it only works sometimes, there’s a risk in looking for the feature, only to be disappointed. People don’t like disappointments and, once disappointed, they may not reach again for the same feature.) Moreover, the Back-to-app button is not recursive — you can only go back one level. So if you click on a link in Mail and it takes you to the App Store to download, say, IMDb, and then you open IMDb, you will only be able to navigate back to the App Store, but not back to the Mail app using the Back-to-app. The only one level of Back may not seem like a big problem. After all, users’ working memory is limited and they are unlikely to keep track of a long chain of apps that they’ve used over time. However, remember that users do use the Back button repeatedly on web browsers to retrace their steps until they return to a safe place, such as their browsers’ homepage. Conflict with the in-app Back button.If you land on a deep page within an app, often the top left corner of that screen is taken by the Back button. But what does the Back button mean when this is the first page you’re seeing in that app? In the Yelp example above, what would Back take you to — the previous page you’ve visited in Yelp the last time you’ve used the app? Who can remember what that page was, especially if your last session wasn’t so recent? Although that button in Yelp does take users to the previously visited page (in this case Nearby), laudably, Yelp has likely realized very quickly the potential for confusion, since an update seems to have fixed this problem by labeling the button Nearby instead of Back. Imdb Emmys page (left) and Yelp Voya restaurant page Left: IMDB’s Back button has a confusing meaning for users who come from a different app. Right: A quick update in Yelp fixed the problem of an ambiguous in-app Back button by labeling it Nearby to indicate that it takes users (back) to the Nearby page. Messenger page displaying conversations with one friend When the Messenger app is invoked from Facebook, the button displayed in the top left corner correctly reads Recent to point to a screen one level up in the information hierarchy. From the three issues pointed out here, this is the only one that can actually be fixed by app designers. And the fix is an old design recommendation: do not call a button Back unless it undoes the previous action taken by the user. Like it or not, this is the behavior of Back that users have come to expect from their experience with the browser Back button on the desktop. If there is a circumstance in which the Back button does not undo the last action taken by users, then increase the information scent by labeling that button with the name of the page that it leads to. A Note on Apps Invoking Apps With iOS 9, Apple has made it easier for an app to directly give control to a different app. A potential danger that lurks on this road is user disorientation. When apps can seamlessly invoke other apps it is easy for users to get confused and think they are in the wrong app. For instance, clicking on a link in Pandora sends users (seamlessly) to iTunes, but since iTunes does not display any logo on the page or in the navigation bar, it’s easy for people to miss that they are in a different app (admittedly slightly less easy now, because the Back-to-Pandora button offers a supplementary cue, should the users be inclined to notice it and make the right inference). Pandora Simon and Garfunkel page displaying the Boxer (left); iTunes album page (right) ( Clicking on the shopping-cart icon in Pandora takes users to iTunes. However, because no logo is displayed in iTunes, it’s easy for users to get disoriented and think they are still in Pandora. Until recently, we used to say that apps don’t need a logo because users usually know what they’ve launched. If you expect your app to be invoked by other apps, seriously consider adding a logo in the navigation bar even on deep pages to tell people where they are. Otherwise, they may be not notice that they were switched to a new app and be confused when they don’t see the content that they expect. Conclusion Being able to directly invoke an app from another app is not a completely new feature in iOS, but the Back-to-app button offers more support to it and allows users to switch easily between two apps. We’ll see if applications will take advantage of this feature and call other apps, or rather, in the spirit of keeping users more and more within their own cage, will prefer to continue serving mobile pages within browsers. In any case, if you’re planning to embrace this feature, make sure that (1) you add information scent to a within-app Back button by labeling it with the name of the page it points to; and (2), you show the app logo on deep pages within your app. Reference J.P. Carrascal, K. Church. 2015. An In-Situ Study of Mobile App & Mobile Search Interactions. CHI '15. http://doi.acm.org/10.1145/2702123.2702486 Share this article: Twitter | LinkedIn | Google+ | Email Learn More Research Reports User Experience for Mobile Applications and Websites Tablet Website Smart-TV Usability: Accessing Content is Key by KIM FLAHERTY on September 20, 2015 Topics: Interaction Design Technology Summary: UX design for television UIs should focus on minimizing user effort and providing quick and smooth access to content. When it comes to television service, we’ve got our choice of cable-TV providers, satellite-TV providers, online media-streaming services, and more. With all of these options there is always an ongoing discussion about which service is the “best” for various reasons. When thinking about what sets them all apart, one important comparison should include the television-watching experience and the TV interface itself. Regardless of the TV service you subscribe to, you were most likely given a remote control that can be used to access and interact with the provided TV user interface. With extras like DVR functionality being offered by many services, modern TV interfaces must support fairly complex interactions around recording content. That said, the primary purpose of the interface should be to enable users to watch the TV programs that they want. In this article we discuss the overarching principles that must be considered to address the top user tasks in this domain: browsing, locating, and accessing television programs. Minimize Button Clicks on the Remote Modern remote controls are cumbersome and nonstandard devices, inconsistent across the multiple pieces of consumer electronics in the modern home. With current smart TVs that display a set of onscreen choices, people need to use the remote’s four directional arrow buttons to position the cursor on the desired item and then confirm the selection by pressing the Select button on the remote. Moving through a TV interface and making selections with the remote can be an intensive process. Unlike with a mouse, moving on a TV screen with a remote is a discrete process that involves going through all the clickable screen elements that happen to be on the path to an object of interest. The average selection will thus incur a significantly larger interaction cost, so it’s important to minimize the amount of selections needed to achieve a task. The Google Fiber television service (a fast broadband plus TV service available in a few areas of the US) has this problem in the On Demand movie-selection screens. It uses Windows-8-style tiles for content selection. This tile layout does not lend itself well to browsing the entire set of options. The tiles are scrollable horizontally, so in order to view the next set of movies, the user must click the right arrow on the remote through all 5 tiles in a row before being able to move to the next page. For example, to see all of the 500 movies that are offered On Demand (see the screenshot below), users had to click the right arrow 245 times (5 times to advance to each new 10-channel page.) One user with whom I spoke bemoaned the effort of arrowing through each option and said he would have preferred to be able to page through the content. If one-click horizontal paging were supported to browse this content, the user would “only” have to click 49 times to view all of the movies. Google Fiber Movies Google Fiber‘s On Demand movie-selection page showed horizontally scrollable tiles and required 5 clicks to advance to the next set of movies. Viewing the entire set of available movies was an intensive process, likely reserved only for the most committed viewers. The screen does provide a more advanced way to view options. The ABC button at the top (see screenshot above) opens a small alphabetical menu. Since the movies are already arranged alphabetically, selecting each letter creates somewhat of a “fast forward” effect, taking the user directly to the beginning of the options that start with that letter. While this design works if you know exactly what movie you want to see, it’s a bad solution for those looking to browse options. Don’t Obscure Content When it comes down to it, the TV interface is not the “star of the show.” The TV program itself is what’s important to users, and the interface is simply a tool to help them access it. The interface should be as minimally invasive as possible, and should not obscure programming content unnecessarily. AT&T U-verse shows navigation menus by way of a transparent overlay atop the background programming. The overlay allows users to continue viewing the content in the background while they navigate the interface. This feature can be nice sometimes, but when the background programming displays text, the interface becomes difficult to read. AT&T U-Verse Record menu AT&T U-verse interface displayed a transparent overlay on top of the program currently being watched. This caused difficulties when the background content contained text. Google Fiber’s interface does not obscure content until it is necessary. The top level of the menu, triggered by pressing the key Menu on the remote, is slim and occupies little screen space, displaying only the main top-level navigation categories. As a result, users who accidentally expose the menu will not get their TV-viewing experience interrupted by a complex navigation display. Once users have shown their commitment to navigation by pressing one of the main-menu categories, the menu options are displayed on the whole screen. Google Fiber TV Menu Google Fiber’s main navigation menu appeared at the bottom of the screen. We will still see if the batter strikes out. After the user has committed to the navigation menu, the programming content is obscured by a full-screen interface, but the current program is still displayed in a small thumbnail at the top right corner of the screen, allowing users to give attention to the program while also using the interface. Google Fiber Program Thumbnail Google Fiber’s interface put primary focus on the navigation while showing the current program in the top right corner. Content is obscured but still provided in sufficient degree to allow viewers to demine if something is happening in the live video that they want to watch. Provide Appropriate Visual Hierarchy and Navigational Cues Some services offer thousands of channels and On Demand programs. All this content can be organized into complex organizational structures involving many levels of categories and subcategories. That being the case, it’s incredibly important that these architectures be intuitive and provide the proper navigational cues to prevent the user from feeling lost in the interface. (Of course, good IA is always important, but it becomes crucial when users are not provided with a powerful user interface that they can easily and forcefully manipulate.) Time Warner Cable’s channel-browsing feature creates this problem with its placement of menus. When the user selects the Live TV category, the list of different subcategories (Entertainment, Movies & Premiums, etc.) is displayed on the screen and the overarching category (Live TV) is shown below it. This layout breaks the convention of showing the categories in a logical top–down visual hierarchy. When the user chooses a subcategory such as News and Info, the screen adjusts: the overarching-category label Live TV moves to the top of the page. The selected subcategory News and Info moves to the menu at the bottom of the page, and the underlying channel selections (Al Jazeera, BBC World News, etc.) are then shown in the center. With such a split layout of categories, it’s hard for users to quickly understand the information hierarchy of the system and where they are in it. Time Warner Cable channel browsing Time Warner Cable’s channel-browsing feature split the information hierarchy across different sections of the screen: the level immediately above the content was shown at the bottom of the screen, and, if an even higher level was available (such as Live TV in the second screenshot above), it was displayed at the top of the screen. ATT U-verse does a good job of showing the hierarchy of the content that the user is viewing. When the Menu button on the remote is selected, the information structure is clear. The high-level categories (Recordings, On Demand, etc.) are shown, along with the related subcategories (for Recordings: Recorded, Scheduled, etc.) below them. After making a category selection (e.g., Recordings), the main-category menu is no longer needed and is removed. The selected-category heading is displayed boldly and on top of the smaller subcategory menu. By displaying prior selections with this visual hierarchy, it is clear to the user where they are within in the system and how to navigate back out. ATT U-verse Menu AT&T U-verse’ hierarchical structure is clear and informative. Support Search With the sheer volume of programming content available, providing a content-search feature is crucial. This feature should be obvious and easily accessible. In Time Warner Cable’s interface, the search feature is not visible on the screen, but instead users must know to select an arbitrary blue-square button labeled B on the remote control. Since the button is not labeled Search, the user needs to rely on explicit instructions within the interface or in the physical user manual to learn how to access system search. Time Warner Cable guide Time Warner Cable’s interface showed instructions across the bottom of the screen to tell the user to access the search feature by pushing the blue B button on the remote. In contrast, Google Fiber’s search feature is easily discoverable and accessible. There is a large search button on the remote itself and it is also listed as one of only five options in the main menu. Since locating content is a key user task in the television domain, it’s important that this feature not be hidden from the user. Google Fiber's main menu Google Fiber’s main menu exposed search as one of only 5 options in the main menu. Google Fiber, AT&T U-Verse, and Time Warner provide very similar solutions when it comes to the search feature itself. While entering text into the search field with a remote comes with the same challenges it always has, within these constraints, each service has created a usable search feature. They’ve done so by implementing a few simple time savers to make entering a search query more bearable: Autocomplete search terms. In each service, when users begin entering a search query, the result area displays partial matches to the search term, potentially saving them from entering the entire query. Show recently searched items. Google Fiber users can also select items from their search history and can clear their history, a helpful privacy-sensitive piece of functionality welcome on a shared device. Google Fiber search feature Google Fiber search feature displayed the TV’s search history for quick access to commonly searched terms. Optimize the alphanumeric text-entry pad. Time Warner Cable gets the prize for the most efficient selection grid: by showing numeric options as part of the set of symbol choices displayed by default. This makes entering numbers into the search query easier than on Google Fiber (screenshot above) or AT&T U-verse, which both require a deliberate action to enable numeric selections. Time Warner Cable search feature Time Warner search feature used numeric selections as part of the default keypad. ATT U-verse search feature AT&T U-verse’ search feature required users take action to enable the number pad. Support Decision Making The interface must not only support users in locating specific programs, but it must also support content discovery and browsing. As users browse large sets of content like the channel guide or the On Demand programs, the design of these screens should provide the right information in the right way at the right time. Enough detail should be shown on the screen to prevent unnecessary digging through pages and pages of content and to decrease browsing effort. Time Warner Cable and AT&T U-verse’s On Demand movie-guide screens make browsing for a movie labor intensive. These services only display the cover photo of the movie on the screen. While it can be nice to see a visual representation of the movie, often the text on this artwork is not readable at the size it is displayed and it forces users to arrow through the grid to get the name of the movie. ATT U-verse movies AT&T U-verse’s movie-search feature did not show the movie title label with the thumbnail. Users had to select a thumbnail to see the name of the movie. The green banners at the bottom of the thumbnails indicated the rental period and sometimes obscured the text on the movie cover artwork. Google Fiber shows imagery along with text labels to aid in decision making. Relevance-enhanced image reduction is used to create images that focus on a small, salient element, as opposed to brutally resizing a complex image with many elements. This solution allows quick scanning and enables people to get the information needed for choosing a movie without selecting and revealing the title on each thumbnail. Google Giber movie selection Google Fiber’s On Demand movie-selection menu showed movie artwork along with the title and year the movie was released. Conclusion While a smart TV set is still not a computer, it’s picking up computer-like elements such as navigation and generating a user experience that’s far from the old world of simply watching live broadcasts. The granularity of user decisions is getting finer, increasing the importance of the user experience and usability of the provided TV interface. As with any other domain, we must understand the primary role of the UI as it relates to the user’s goals. For television interfaces, the primary user goal is to find the right content as quickly and seamlessly as possible. Supporting this goal is crucial to designing a usable and enjoyable television interface. Share this article: Tw