UX 23

The Freelance Studio Denver, Co. User Experience Agency There are plenty of online courses available for anyone looking. They come from both educational institutions like Stanford and MIT, and from those looking to disrupt the education industry, like Udemy and Khan Academy. Although these efforts have all achieved a fair amount of popularity, they suffer from regular shortcomings, ranging from certifications that don’t prove their value, to lack of engagement, to lack of curricular direction. In the design and tech industry there is an eager community of students, willing to pay and interested in learning. As a result, a number of organizations specialize in the tech industry, including the casual Treehouse, more institutionalized General Assembly, and our topic for today, Designlab. Designlab focuses on user experience, visual design, and branding courses, and has a few big names on its advisory board. Designlab looks impressive. But rather than compare it to other online courseware, we thought we’d take a look at a simple question: how does Designlab’s UX Research & Strategy course stack up as a standalone approach to the topics it addresses? What sort of UX practitioner will benefit from it? Take a peak at Designlab before we dive in Below, we look at at the straight-up facts about the course, what makes it something special, where they’re working out the kinks, and ultimately, a final verdict. STRAIGHT FACTS First, the basics. Designlab’s UX Research & Strategy covers user experience research, design thinking, and product ideation. The coursework is set up to be reviewed and completed over 4 weeks, costs $300, and demands about 40 hours of the student’s time, all in all. Before getting started, students are encouraged (but not required) to check out the following toolset: Adobe Photoshop and Illustrator Balsamiq Mockups Sketch Keynote Macaw According to Designlab, coursework is broken up as 30% reading time, 50% project time, and 20% communications. As for structure, the course is divided into 6 “units.” Each unit comprises an introduction, some descriptions and then “Lectures,” which are separate from the main interface, and provide a distraction-free clickthrough experience. The Lectures are brief, and often link to further recommended reading or watching. The 6 units are: Introduction Empathize Define Ideate Prototype Test This list might look familiar — the curriculum is modeled off of the Stanford design thinking methodology (also seen all over the place at IDEO’s Design Kit). For the more seasoned UXers and designers, there are probably no surprises hidden within these lectures and exercises. However, for those new to user experience research and design, this is a solid overview. What makes Designlab stand out is their mentorships. All students are assigned a real human mentor, who reviews exercises, answers questions, and checks in on a weekly basis. Mentor meetings are built into the requirements, and count toward course completion. In addition, the course encourages students to bring their own real-world projects to work on and workshop with their mentor. Finally, upon course completion, students are given a certificate for all their hard work. But that’s enough of the facts. Let’s jump into the the good stuff, the minor gripes, and other qualitative bits. THE GOOD My overall experience in this course was positive. Although I’m an experienced UX designer, I enjoyed a few “aha” moments while working through the exercises. Designlab’s web app for the online coursework is simple but nice, and it was neat to see other students’ work in the community showcase area (but more on that later). There were a few things that stood out, though. THE CURRICULUM Make no mistake—this is certainly an introductory course, and it’s nothing novel. For students who have any project experience (agency or in-house), this course is likely not worth the cost. But for beginners, this is one of the best overview courses I’ve seen. The folks who designed Designlab’s course very much subscribe to the Stanford D-School style of design thinking—and that’s a very good thing. By providing students with a respected and useful framework for design ideation, the course does a good job setting the stage for those “aha!” moments. It also serves as a good introduction into the field’s jargon; those new to UX will walk away from the course ready to throw down “storyboard” or “empathy map” into a conversation. I could certainly understand any criticism that the curriculum is a mile wide and an inch deep, but the point of this work isn’t so much in the lectures—it’s in the application and exercises. And those, for the most part, are well structured. Interspersed within each of the units are “projects,” which require students to apply what they’ve just learned. Projects range from storyboards to landing page mockups to landing page testing. Once projects are completed, the student uploads the work (in various formats—there’s a lot of flexibility) and then, come time for the weekly mentor meeting, student and mentor are prepared to discuss. This process makes the course curriculum a knock-out. THE WEB APP As web apps go, this is a nice app. It does what it needs to do, which is allow me to complete my coursework and submit it. The collapsible vertical navigation is usable and yet stays out of the student’s way while she works through the units. A progress wheel on the dashboard vibrantly displays the amount of work done, and what’s remaining. The mentor’s happy face is on that dashboard too, welcoming the student to ask questions, should questions arise. The Designlab welcome screen I feel real, real good about those check marks. Units are broken out by vertically stacked cards, which ensures each unit is clearly separate. When activated, the unit takes over the whole screen, further ensuring that visual distractions are a minimum. While it’s not perfect (for example, there are surveys that pop up at the end of each and every lecture) , it’s certainly an environment conducive to learning, and one that allowed me to understand my overall position in the course. And perhaps more importantly, the bright colors, soft shadows, and plethora of icons is friendly. It just feels nice to interact with. THE (WELL, MY) MENTOR Still, what sets Designlab apart is their mentor program, and having been through a course, I can understand why. My mentor had no business being as patient as she was. She was fantastic. Always prompt, always firm with her requests or suggestions, and always fully present. When a pretty severe personal crisis interfered with the course (I actually was unable to finish in 4 weeks, extending the course to 6), she was thoughtful, accommodating, and understanding. Our sessions were over Skype (though Skype can be finicky), and were scheduled to be an hour long, once a week. We’d go over the exercises I’d completed, discuss them and the choices I’d made, and just generally talked design. The value may be self evident, but having someone available to talk through a design or an idea — this might have been what made or broke the course as a whole. The conversations really drive a need to justify decisions and choices, which is an invaluable skill and requisite in a UX professional’s day-to-day. Without having a real person to go over things with, driving things, it would have been a very different beast. BE FOREWARNED While Designlab is doing a great job with their mentorship opportunities and course offerings, there are always areas for growth and opportunity. And, to be honest, there are some things that prospective students should just know ahead of time, so that they might avoid frustration or mishap.. THE TIME CONSTRAINTS Students are expected to finish their Designlab coursework in a month. I’m a firm believer in deadlines, and the Designlab folks are not afraid to tell us “the design process requires a lot of time and effort.” Good on them. And yet… while boundaries are awesome and, arguably, essential for maintaining momentum, it really turned into a primary source of stress. Yes I committed to it, and yes I was told up front it would be a lot of work. Still, most people taking a course have full time jobs (as I do) and after-work activities (guilty as well). As a result, I was left feeling guilty for having to reschedule with my mentor a number of times. Again, this isn’t on Designlab; it’s on me. But it’s worth pointing out to prospective students—with accountability measures in place, this can certainly be a point of stress. Designlab is not as casual as other online learning tools: be prepared, and clear your schedule! THE COMMUNITY This is where Designlab has the most work ahead of them. Social pressure, interaction, obligation, etc—these are important elements in the success and efficacy of any online learning experience (and an ongoing challenge online learning environments). Designlab attempts to address this in two ways. First, the Discussions tab; essentially a message board. A rather empty one at that, or at least it was in this particular course. It would have been really nice if students were more eager to communicate in the discussion section; I’m not convinced, however, there’s a solution to this, particularly given the amount of attention required for the actual project work. Students may not have time to contribute to the message board, which decreases the sense of community. Next, the Explore section. This is where all students currently enrolled in the course showcase their work—which, as I mentioned earlier, was extremely valuable. Sharing is automated—there’s no opt out available. It’s like a collective portfolio. And since we’re all working on the same exercises, it’s both educational and feels supportive to be able to scroll around and see what else folks have done. That said, it’s just not fleshed out well enough yet. For instance, I am able to see another student’s “Research Methodology” exercise, along with the comments from his mentor. I don’t mind having my critiques public, but I imagine for new designers, this might be mildly intimidating, especially because not a lot of other interaction seems to happen there. One of the homework assignments. One of my projects—A UX research plan—which everyone else in the course can see. This feature can be improved by building more of a sense of community in the course, which as we’ve noted, is tough to do. That’s not for want of trying though; Harish, one of the cofounders of Designlab, actively posts in the Discussion section, even though there’s not a lot of response. Granted, this stuff is tough to get right, and I’m not convinced anyone has done it yet. They’re trying, and given their product so far, I have high hopes. THE FINAL VERDICT Designlab provides a solid learning tool, with a vetted curriculum, and a 1-on-1 element missing in many other online learning platforms. The UX Research & Strategy course in particular is good for those who are new to user experience and design thinking. The course teaches a well respected methodology, and does so without getting too weighed down in the philosophy, which can scare away the greener folks. The value is clear: Limited Time Offer: New subscribers get a 15% coupon to Rosenfeld Media + other goodies BROUGHT TO YOU BY Capture every click, swipe and scroll on your site with one easy-to-install script. Dip your toe with a free 14-day trial. READ OUR REVIEW Read our review We reviewed the UX Research & Strategy course by Designlab. Take a look. We were very pleased to interview author Joe Natoli about his new book Think First: My no-nonsense approach to creating successful products, memorable user experiences and happy customers. Today, we’ll be offering readers an excerpt of the book itself. Strategy Means Putting People First Products are used by people, so putting users and their needs first is a pretty good place to start: What do they need to be able to do, and why do these things matter to them? What do they want from us, and how is that related to other goals they may have? How does using our product fit with other products they may be using? What do they expect, based on their experiences with similar (or even dissimilar) products? These are all user-focused areas of inquiry. People live on the other side of the fence as well, except they’re funding the project. Which dictates that they’re concerned with business objectives. Creation always entails cost — time, effort, money. And nearly every creator is looking for a way to cover that cost, along with a little extra. Even if you build apps for free, there is something you expect to get in return. That doesn’t have to be money; it could be recognition or widespread adoption. It may simply be something that you truly feel good about because it helps people who are less fortunate. Whatever the case, there are objectives you have that need to be met, measures of success that matter. If the business end of the equation is actually a business, then the objective, at the end of the day, is either making money or saving money. There are one or more strategic objectives that have to be met as a result of building this thing and putting it out there into the world. If you’re responsible for helping make a product reality, then you’re also responsible for uncovering what those objectives are and why they matter. Strategy, then, is all about finding the sweet spots between what users want to make their lives easier and what the business needs to accomplish in order to survive, to prosper. It’s about recognizing the gaps and the overlaps between those goals and thinking about how design can best serve both of these masters. The UX Sweet Spot WHY THE STRATEGY PLANE RULES THEM ALL The UX designer’s job is not only to address information concerns and the related needs of users — it’s also to insist on being very selective and analytical in designing task flows and functional elements that serve a greater goal. And that greater goal is what I call the value loop: creating something that delivers value to users, so that value also comes back to the product’s creator in the form of increased use, efficiency or good old fashioned dollars and cents. UX strategy is the origin of the value loop, the part that you absolutely, positively have to get right if you want the finished product to be around longer than ten minutes. The strategy plane is where you think first: where you work to uncover and qualify user needs, where you ensure that you understand all relevant business objectives. It’s where you begin planting seeds of product success — or failure. Correctly identify and address these needs and objectives, and you deliver an experience that is the answer to someone’s prayer. Guess wrong, or don’t do enough digging, and you identify the wrong needs and objectives. Which turns the product into everyone’s worst nightmare, including yours. When it comes right down to it, design of any kind really means problem solving. Here’s some advice given to me by a colleague many years ago that couldn’t possibly be more true: If you’re a designer — experienced or fresh out of school — I want you to understand that you will not find inspiration looking at the work of other designers. Let that sink in a minute. I say again: you will not find inspiration. What you will find is someone else’s solution to someone else’s problem. You’re looking at the end result, not the process. And the process, my friends, is where the power of design really lies. The first thing you have to do, no matter what you’re creating, is identify the problem — and then make sure it’s actually the right problem to solve. When I was in college, my professors drilled the following fact into our heads, over and over across our four years together: If you don’t come up with a good solution to something, it’s likely that you don’t have a very good problem. That’s a roundabout way of saying that the key to successful design is identifying the right problems to solve. User experience design essentially explores feasible solutions to strategic design problems: What matters most? What issues have the most impact, the most measurable value? What can we do to address these issues, and do we have the time, money and personnel to take that action? Is it realistic that we can provide a solution to this particular, precise, complex problem? Anything involving human beings is inherently messy. We’re interesting creatures. What we say doesn’t always match what we do, and in general we can be very difficult to please. So any problems that involve our using something are typically difficult to solve. And if they aren’t, raise the red flag — because that’s a sure sign you’re on the wrong path. Joe Natoli’s new book, Think First: My No-Nonsense Approach to Creating Successful Products, Memorable User Experiences + Very Happy Customers will be available in eBook and Paperback October 5th, 2015. Visit givegoodux.com/think-first to find out how you can get 3 free bonuses worth $600 when you buy Think First the week of launch! Sponsor ABOUT THE AUTHOR UX Booth UX Booth's editors are constantly pushing the digital envelope. UX Booth shares stories by and for those practicing user-centered design. RELATED ARTICLES An Analytics-First Approach to UX, Part 1 A Few Lessons From Real World Usability Designing Digital Strategies, Part 2: Connected User Experiences Building Products, Building Habits As an experienced designer, I had new moments of insight when working on old concepts, like playing with “How Might We” statements—questions that guide the quest for solutions based on insights gained in research—for the first time in ages. Awesome. Mentors are invaluable. My mentor in particular—once again—she rocked. Though it’s rocky at the moment, I applaud Designlab’s efforts in starting community interaction. It is really, really tough, and I imagine with time they’ll be going strong. I’m left wondering how the other courses are, which is a good sign! For confident, disciplined self learners there are plenty of free alternatives to this Designlab course out there. But anyone looking for a directed learning experience and some 1-on-1 time with a UX professional should definitely give this course a shot. Enroll at Designlab Sponsor ABOUT THE AUTHOR Kristina Bjoran Kristina is a content strategist and UX designer for Forum One, where she focuses her strategy efforts on nonprofit organizations across the world. She also keeps herself busy with Reddit, video games, and illustration. Follow her at @bjoran_identity. RELATED ARTICLES The Value of Modern-Day Mentorship Getting Experience with User Experience A Chat with Bill Gribbons, Part 2 Reimagining UX Designers must not only create concepts and designs; they must also make the process of creation transparent and communicate the basics of UX design to all the projects’ participants. In my experience working on web projects over the last few years, I’ve observed that people tend to reach a point where they struggle to begin (or continue) with the next step, whether they’re moving from product idea to user stories, or from features to a user interface. This is normal, especially in a field that essentially requires daily innovation. Common interactions like “Sign Up,” “Onboarding,” and “Check Out,” can apply functionality, interactions, or visual design from other solutions. In these cases, resources like UX Archive and UI Patterns can be a designer’s best friend. But what about the unique, challenging tasks? What about situations that require us to create intuitive methods and accomplish complex objectives? In these unique cases, I’ve experienced that the temptation to stop when the going gets tough is always lurking around the corner. The fact is, it’s easy to become overwhelmed by the complexity of information or a problem. The road from idea to solution is often slow, with many twists and turns. Luckily, there are research-based tactics that can help with navigating that road. In this article we’ll review a number of reasons we experience a loss of motivation, and ways to forge ahead. GET STARTED (AND KEEP GOING) Knowing how to get started, and actually getting started are very different things. Another obstacle to momentum might be not properly understanding the user, or not understanding and the need behind the task or interaction. This is basically like walking into a dark room only to fumble for the light switch. An image of a person walking up stairs through the clouds. The stairs are labeled with parts of the design process, such as digital wireframes, digital mockups, paper prototype, and screenflow sketch. The UX stairway to heaven. From idea to product we have a lot of possibilities to get closer to the product. But most of all, we have to get started and continue the creative process. If there’s a lack of depth to the understanding, it’s essential to dig deeper. Get online, do some research about the audience. Observe them on social media. Get out of the building to interview potential users. Collect more data! Of course, this can easily lead to another obstacle: information overload. One way to maneuver around information overload is to group, sort, and structure the collected information. Affinity diagrams can be a helpful method in this case. Combined with prioritization tools like MoSCoW Method or a Priority Matrix, we can better structure thoughts and make them more actionable. PICK ONE FIGHT AT A TIME The more complex the problem, the more likely it is to breed frustration. This is where strategy comes in. In the face of inherently limited energy, it’s crucial to be particular about where that energy is invested. I’ve seen designers try to tackle several design solutions at the same time, and almost without fail, they end up with unsatisfying results (or they just stop progressing). For instance, when thinking about functionality, it’s probably not the right time to consider typefaces or button colors. We need to focus on the problem at hand: the functionality, and trust there will be time to come back to visuals after we’ve completed the interactions. At the end of the day, this is a matter of design energy management. It’s just like how President Obama always wears the same suits—it’s a part of his secret strategy for staying productive. Too many decisions lead to what psychologists call a decision fatigue, which eventually leads to poor decisions, or none at all. POSTPONING IS BAD “I’ll do it tomorrow” may feel like the result of motivation loss, but in reality it can be part of the problem. We often postpone decisions that feel difficult, and thus fall into a procrastination trap. It’s not surprising; unpleasant decisions are harder to make. Cognitive psychology posits that we are far more likely to avoid an unpleasant task or decision. There is a reason we all have tendencies to procrastinate when struggling. Predominantly, according to cognitive psychology, we tend to underestimate the future emotional state, based on what we feel right now. When I make a decision to do something in the future, I assume that it will be more comfortable in the future than it actually is. This has very serious implications for those of us involved in the design process. If designers succumb to the satisfaction that accompanies postponing a task until a “more suitable tomorrow,” they may find that tomorrow never comes. Instead, learn to identify those thought patterns, and don’t let them lead the process astray. An image of a rollercoaster, with a person saying The creative process rollercoaster of emotions. From excitement to frustration. Designing for a great user experience is a great experience itself. NO NEED FOR PERFECTION Perfectionism is a key obstacle to forward momentum. When describing this concept, I like to refer to this story of a ceramics teacher and his class. In this story, two teams had 50 pounds of clay and, out of that clay, they had to build pots. One team was to strive for quantity and build as many pots as possible, while the other team was told to focus on quality pots. In the end, perhaps surprisingly, the highest quality works were all produced by the quantity group. It seems that while the quantity team was busily churning out piles of work and learning from their mistakes, the quality team sat theorizing about perfection, and in the end had little more to show for their efforts than grandiose theories and a pile of shapeless clay. Striving for perfection will not always push design forward. Especially in an early product phase. Done is better than perfect! REFLECT AND IMPROVE, ALWAYS IMPROVE It’s extremely important to take some time for self reflection about the processes, particularly when we feel blocked in some way. Here are a few self-reflection questions I find helpful: Am I trying to solve too many problems at the same time? Do I have enough information to get started? Is there some insecurity keeping me from moving forward? Am I still trying to make it perfect from the beginning? In addition, here are some great resources, to help UX designers improve their processes: Prototyping: A Practitioner’s Guide, by Todd Zaki Warfel, is a how-to guide to prototyping. Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces, by Carolyn Snyder. This guide to paper prototyping explains in detail how to use paper prototypes for quick and valuable user research. Sketching User Experiences: Getting the Design Right and the Right Design, by Bill Buxton. This holistic approach to design thinking is a good starting point for designers struggling with motivation. Sketching User Experiences: The Workbook Austin Kleon on 10 Things Every Creative Person Should Remember But We Often Forget is taken from his book, and well worth five minutes of any designer’s day. Art & Fear: Observations On the Perils (and Rewards) of Artmaking, by David Bayles. As the title alludes to, this book investigates how art is made, and how fear stops so much art from being created. Solving the Procrastination Puzzle: A Concise Guide to Strategies for Change, by Timothy A Pychyl. This book is a helpful way to understand the reasons we tend to procrastinate, as well as ways to stop doing it. The Procrastination Equation Flowchart, a useful poster displaying procrastination variables and a handful of strategies to deal with it. For readers who are currently struggling with the idea-to-product process, let’s connect! Send me an email, or comment down below! Want to meet and connect with other designers? Come to push.conference in Munich on October 23 and 24, where Thomas will be organizing more amazing speakers. It’s a 2-day conference that unites 450 professionals from the UX field in order to exchange, learn and get inspired. Frank Lloyd Wright’s 1935 masterpiece, Fallingwater, is a perfect example of how minding a site’s properties can seamlessly cement relationships between a new architectural structure and its existing environment. In fact, when an architect receives a new project brief, he is obligated to conduct a detailed site analysis. According to The Architect’s Handbook of Professional Practice, the architect must possess the skills to do an initial assessment of the site, both for regulatory approvals and economic reasons, and also because it’s fundamental to good building design. Perhaps it’s time for those same requirements to apply to UX designers. Every state has its own building code that architects and developers must comply with. In fact, in order to receive a permit for building construction, the architect has to submit a plan with the site’s existing conditions, along with a proposal for future development—not unlike a design proposal. However, unlike a design proposal, the architect is unable to complete his plan without in depth research. Given that research is not a legally enforced prerequisite for design, is it any surprise that lack of research is one of the main reasons why startups fail? Some UX designers struggle to justify spending time on user research to product owners. Others see it as a luxury they can’t afford. As a result, designers and stakeholders make inaccurate assumptions about their potential users, and create features that no one uses. Dictating solutions without first engaging in user research costs startups time and money, and will continue to do so until we consider user research as high a priority as architectural research. UX professionals can learn from architects in the early stages of designing a product. Let’s take a look at how successful architects design in context, study the competition, and consider the user journey. By the end of the piece, readers will be ready to design like an architect. DESIGNING IN CONTEXT In both architecture and UX design, the context of the design can make or break the product. Consider Mombasa, Kenya, where new construction resulted in a large, concrete building standing between old colonial buildings. This was more than just a one-time problem; it happened so frequently that UNESCO created a World Heritage List in 1972 to protect heritage “in its environment.” An image of the building discussed in Kenya In Mombasa, a new building completely ruined the landscape. That’s not to say that good architecture must completely conform to its surroundings. In 1981, the new building of the School of Architecture at Rice University was completed. Its quietness and respect to its context were shocking. At first glance, the new addition appears to look just like its neighbors—an imitation of the other buildings. However, the new building was full of subtle variations, gradually moving architecture toward the future without disrupting the general look and feel of the area. This is no accident; the architect of the building, James Stirling, believes that his buildings can be completely different from their neighbors, but they should never defy their surroundings. A blueprint of a James Stirling building. James Stirling believed it was important for his building to fit into the general landscape The American Institute of Architects’ Code of Ethics states that “architects should uphold human rights in all their professional endeavors.” The ethical challenges of architectural practices involve the responsibility to study the site so that the eventual building design is sustainable ecologically and financially. Similarly, a good user experience involves designing for both the user’s context and the existing constraints of associated products or systems owned by the same brand. It’s important to develop a clear product style guide and to remain consistent within brand guidelines. This serves to ensure visual consistency and respect between new and existing elements throughout the product’s overall design, just like in the case of the Rice University extension. In addition, a product should be intended for a clear purpose, and for a specific group of users. Since many startups create solutions for problems the team hasn’t personally experienced, user research is valuable tool. The product owner can then serve as the user’s representative, and must therefore understand his constituency. One recurring problem that causes ecommerce businesses to lose money is the failure to optimize their websites for mobile users. A lot of retailers have taken steps to improve their mobile shopping platforms. Together with greater connectivity, consumers are gaining confidence in purchasing products securely over mobile phones. While many businesses understand this trend towards mobile shopping, there are still ecommerce businesses lagging behind. Understanding the general mobile usage behavior of a store’s target customers’ would inform stakeholders on the usage of mobile platforms as shopping channels. Designing for context also means having a clear understanding of what the product is, and why people will use it. If users come across the product thinking it will solve one problem, but then discover it is not intended to accomplish those goals, they are less likely to give the product a chance. Case in point, at myWebRoom, we build a visual bookmarking platform focused on content discovery and organization. Giving users the ability to personalize and design their web rooms is complimentary to our main feature. However, based on user feedback, we learned that our old landing page delivered the message that myWebRoom was a design tool before it was a bookmarking tool. Upon learning that, we tested new landing pages focused on explaining the true concept of our product. The result? Conversion rates increased from 10% to 18%. COMPETITOR STUDIES When an architect receives a brief to design a commercial retail space, it’s his responsibility to analyze competition so that his design will yield more profit for his client than nearby competitors. The same is true of UX design: it’s the designer’s responsibility to analyze the competition and identify opportunities. I worked on a commercial shopping complex, the Westgate Mall, located in Singapore, right by the train station and bus interchanges. There were two other major shopping malls in close proximity. In order to help my client boost traffic to his development, my team and I had to incorporate special design features to stay ahead of our competition. We designed the mall to be the only mall that has direct connections to the train station and bus interchanges. The mall was also awarded the GoldPlus Award under the Universal Design scheme which meant that it was designed beyond the minimum requirements of user-friendliness. These implementations have ensured success in the mall, clinching >75% committed occupancy with high rents. The Freelance Studio Denver, Co. User Experience Agency Supporting Mobile Navigation in Spite of a Hamburger Menu by AMY SCHADE on August 16, 2015 Topics: Mobile & Tablet Navigation Summary: Mobile sites that use the hamburger or three-line menu need to support navigation activities throughout the site, in case users don’t locate or use the main site navigation. In mobile designs the hamburger menu or three-line icon is a popular tool to address the concern that on a small screen, space for navigation is limited. Placing the navigation behind a menu is a way to keep it available, but out of the way, giving users access to navigation when they need it. However, the reason the hamburger menu is useful is also the reason it can be harmful to a website’s business goals. When navigation is visible on a page, it is consistently available, giving users not only quick access to the navigation, but also a way to get an at-a-glance overview of what the site has to offer. When that same navigation is hidden behind a hamburger menu or even a Menu label in a mobile design, there is a higher interaction cost to get the same information – the user has to think about navigation, then locate and expose it in order to view it. If a user cannot or does not locate or expose the navigation, interaction on the site becomes limited. The use of a hamburger menu can reduce the likelihood of users moving around the site. Navigation was visible, rather than hidden behind a hamburger menu, on ProPublica.org, requiring less user effort to move around the site. Not every site is able to limit navigational categories to a number that is easily displayed in a visible navigation bar on a mobile device. This means many designs are drawn to using the hamburger menu, despite its potential drawbacks. So what can a site do to help alleviate the potentially negative effect of using a hamburger menu? One way to minimize the impact of hidden navigation is to make key user tasks easy to do in the absence of navigation. Imagine a user comes to your site and never finds or uses the primary navigation. How many of your site’s key tasks could still be accomplished? On the Homepage A homepage, of course, should reflect the key content and functionality of the site. This lets users know they’ve reached the right page as well as informs visitors what the site (or corresponding organization) does. Sites can provide links directly to the primary tasks that users come to the site to complete, allowing quick navigation to those key tasks. Quick access to these tasks does not mean simply listing all the navigational links on the homepage. Mobile homepages can support key tasks by providing direct access to these tasks via links and content that drive users to appropriate important areas. The Bill & Melinda Gates Foundation website provided homepage links to main content areas of the site, supporting common tasks. Displaying content or stories from different content areas of the site can also give users quick access to different sections of the site without accessing navigation. Headings Are Pick-Up Lines: 5 Tips for Writing Headlines That Convert by HOA LORANGER on August 9, 2015 Topics: Writing for the Web Summary: Attractive headlines and titles are critical in making the right first impression. Concise titles that sound authentic and relevant get noticed. A headline is often the first piece of content people read. And often it is the ONLY thing people read. If you want your encounters with people to be successful, make sure to write solid headlines. Have you ever tried to retell a story you read only to realize the details are fuzzy because you had only read the headline? This is a sign of a memorable headline. Good headlines entice readers and are critical to the success of your website. Below are 5 tips for writing engaging headlines: 1. Make sure the headline works out of context. We often think of headlines as being connected with the associated story. However, on the web, headlines usually appear out of context in places such as search results, social-media streams, blog posts, and news feeds. Headlines must be strong and descriptive, especially when standing alone, stripped of supporting content. Can you guess what the heading below refers to? New times call for new decisions The headline contains low information scent—that is, few cues to suggest what the story is about. People rely on visual and textual cues to perceive the usefulness of the content. They don’t spend time making inferences and trying to figure out items that don’t make immediate sense. Minimize cognitive load to maximize usability. Treat headlines like microcontent—phrases that can be scanned and still give readers a clear idea of the underlying information. 2. Tell readers something useful. Consider the decision-making process from the users' point of view. When faced with a barrage of links, their time is best spent clicking on headings that have the highest probability of providing value. Useful headings are specific. They provide facts or information that pique the readers’ interest. Avoid broad and generic headings. They don’t provide value or differentiate you from your competitors. Tell people something they don’t know and that benefits them. Headings that contain user-centric language are much more refreshing than vague ones that require guesswork. This headline is too broad: Make better, faster decisions with data visualization Contrast it with: Data visualization helps you detect and prevent fraud faster The second one is better because it is more specific and provides a concrete benefit that might arouse the reader’s curiosity. 3. Don’t succumb to cute or faddish vocabulary. Minimize hype and idioms (expressions). They are often vague, obscure meaning, and often change the tone of copy, usually for the worse. Consider this headline: Get the most bang for your buck with XYZ The headline above sounds pretty tacky and inauthentic, and degrades credibility. In addition, idioms such as “bang for your buck” often lack meaning to nonnative English speakers. Don’t be tempted to include overly informal language to sound modern and hip. It is much better to aim for clarity and authenticity. Keep your headlines straightforward by using familiar keywords. This is better: Increase productivity by 24% with XYZ Of course, there are exceptions to this rule. You can use specialized language when you address a specialized audience; in those cases jargon improves communication. However, before you sprinkle jargon all over your copy, verify that your entire audience truly understands it. 4. Omit nonessential words. The one place worth practicing being concise is in headlines. Spend time editing headlines to cut unnecessary words and tangled messages. Shorter headlines require less cognitive effort. And longwinded headlines don’t scale well to variable container sizes: they have a higher chance of being truncated when displayed on small mobile screens, for instance. Convoluted headlines like this lose readers: Caster, a technology company, buys Mitchell, with assistance from Jon & Smith, for $1.2B There are too many details that obscure the gist of the heading. The sentence also contains three commas, which create a jerky, start–and–stop effect. The headline can be made smoother by removing less important details, as in the versions below: Caster buys Mitchell for $1.2 billion –or– Jon & Smith orchestrates $1.2 billion deal for top technology firms 5. Front-load headings with strong keywords. One of the best ways to get traffic to your site is to front-load your headlines with keywords. Moving keywords to the front of titles increases the likelihood that they get noticed. Our eyetracking studies show that readers pay most attention to the first few words in lists. Don’t count on people reading the end of sentences. Let’s compare the following headlines: (1) Behold the new technologies for creating 3-D imagery and (2) Creating 3-D imagery gets easier with new technologies The first one runs the risk of not being read because the key phrase (creating 3-D imagery) is positioned at the end. Users must read the entire headline to understand its meaning. The second one is better. Moving the keywords to the front makes the heading more scannable. People can read only the first few words and still understand what the article is about. Conclusion Make a good first impression with short, keyword-leading headings that sound authentic, contain useful information, and make sense out of context. Try to follow all of these tips in one headline and you should notice a lift in user engagement. Learn how to write compelling digital copy at our conference. Share this article: Twitter | LinkedIn | Google+ | Email Learn More How Iterative Testing Decreased Support Calls By 70% on Mozilla's Support Website by SUSAN FARRELL on August 2, 2015 Topics: Agile Prototyping User Testing Summary: User research with data mining and paper prototyping quickly led to measurable success for one of the busiest support websites in the world. One of the more frequent questions that we get asked by our clients or by our seminar attendees is: "Is a redesign for usability worth it?" In other words, what is the return-on-investment (ROI) of a redesign? In recent years, we've seen a decline of the ROI for usability, most likely due to approaching a ceiling of usability improvements: With more than 20 years of web-design experience under their belt, designers have learned a few things and fixed quite a few problems. But a redesign for usability can still save you a significant amount of money. In this article we tell the story of Mozilla's support site, which was able to get a 233% improvement out of a redesign for usability. (Here's an explanation of how the improvement score was computed.) Thus, we can say that the redesigned site was about 3 times better than the original site. The cost involved in this redesign was 14 person-weeks or 560 person-hours. Is it worth spending 14 weeks to become 3 times better? This depends on the hourly rate for your staff and the value of your site and thus cannot be answered in general. However, for Mozilla, which gets huge amounts of traffic, the improvement is certainly worth the trouble, as it would be for almost any big site or company that does substantial business online. So how did Mozilla do it? What was involved in this redesign? Who is Mozilla Mozilla is a large, open-source, worldwide, software organization staffed by both employees and volunteers. It makes one of the most popular web browsers (Firefox), along with other useful products and services. Pain Points Millions of people come to Mozilla's support website every year to get help with Firefox and other products and services. When users cannot get an answer from the information existent on the site, the Mozilla staff aims to help by answering each person's question in the user-support forum, and to respond to questions as quickly as possible. As Mozilla's website had grown organically, users were having difficulty finding information and the support staff couldn't keep up with the number of questions in the forums. Specifically: At about 400 pages or so, the help documentation had become a difficult place in which to locate particular information quickly. The forum staff (employees and volunteers) were having trouble responding to questions as quickly as they wanted to, because of the increasing number of incoming questions for the rapidly updating Firefox. The forum overload was also making it difficult for staff to find time to write new help articles for frequently asked questions. More articles could help, but the growing number of articles also caused more findability problems. Action Plan Mozilla decided to invest in discovery and iterative usability testing in order to improve the IA of its support site. The research questions aimed to understand (1) how people (users and staff) used the support system; (2) which types of information were really important. Top research questions How do users and staff interact with the support system? Which problems are the most important to address in the website redesign? What is the most-wanted information? Which words do people use when they search? Which desired information seems to be missing? How can the information best be organized and presented in order to match what users most want to do on the website? The UX Team The UX team consisted of 3 members: Susan Farrell, Senior User Experience Specialist, Nielsen Norman Group. Susan conducted the research, did data discovery, analyzed data, and made design-change recommendations. Crystal Beasley, Product Designer, Mozilla. Crystal led the project, coordinated with Mozilla stakeholders, and played the computer during paper-prototype research sessions. Bram Pitoyo, Web User Experience Designer, Mozilla. Bram designed the task flows and prototypes and supervised the interaction-design changes to the website. He also tested the old IA so we could compare results with the tests of the proposed new IA. The Steps We employed a variety of research methods intended to help us understand users' needs and also to redesign the IA and the workflow on the support site: Doing data discovery and analysis, to understand how users behave on the support site and why In particular, we looked at a variety of data sources to identify users' top tasks, as well as difficulties that they had with the current site. The table below summarizes the methods that we used. UX data Usability reports and user profiles done by others Behavioral data Frequently asked questions Traffic and search analytics Content analysis Information organization and connectivity Structure: titles, headings, groupings Task-flow evaluation, form usability Gaps: missing most-wanted information Interviews with staff Conduct video calls with subject-matter experts about pain points, known problems, and redesign hopes and concerns Testing old and new navigation schemes using card sorting and tree testing to improve the information architecture Testing variations of the most-important task flows for desktop and mobile web designs, using paper prototypes We conducted the paper-prototype research with users in Portland, Oregon, USA. Bram designed the evolving prototypes in Jakarta, Indonesia after watching each day's sessions on video. Bram changed the designs and sent them back to us as PDF files, which we sent to an office supply store to print for us on their large-format printer. Because of the 14-hour time difference, it was possible to work around the clock as a team most days. By revising designs between test days, we were able to progress key pages in the design through 7 versions in only 2 weeks of testing. Prototype-design time, including testing and final revisions, took place over 9 weeks. Although not every project can test 7 design versions in 2 weeks, this example is certainly proof that usability can be agile (whether with a lower-case a or an upper-case A) if the team is sufficiently efficient and decides to emphasize throughput and fast research methods. Redesign Results A 70% decrease in support questions means forum staff are less overwhelmed and able to respond more quickly. After prototype testing, but before implementation of the new design, Mozilla staff implemented a temporary quicklinks navigation item on the homepage to test whether direct access to the identified, most-wanted content would decrease the volume of new questions coming into the forum. Quicklinks are often a workaround for poor navigation structures, so we don't recommend them, but in this case it was important to test those key research findings at scale before implementing the new navigation scheme. As a result of the website redesign and content improvement effort, the Mozilla Support help documentation was expanded to sufficiently address the most general questions we discovered. Because articles on basic and frequent issues are more findable now, visitors ask fewer questions, and their questions are about more-specific topics. Graph showing a 70% drop in support calls after redesign begins This graph from the Mozilla KPI Dashboard shows the volume of questions (in solid blue) in the Mozilla support forum before, during, and after the 3-month UX activities (red box). Providing easy access to the most-wanted information caused the volume of new help questions in the forum to drop immediately by about 70% (from about 7000 to about 2000 questions per month), allowing forum staff to exceed their quality goals. A month after the UX activities, Mozilla staff revised the support documentation to make it more findable, and ongoing data analysis allows the hot topics to change as needed. Graph showing fewer questions being answered more quickly after the redesign The redesign increased the 24-hour response rate remarkably, from 40-60% of questions answered to 80-90%. This view of the 4 months during the UX activities and the initial redesign implementation shows the incoming forum questions in blue with a shorter, overlapping, green, answer volume. The drop of 5000 questions per month is good in itself, but having question and answer rates converge on the right (as they do) also shows a good match between user needs and customer-support capacity after the redesign. Lessons Learned Support websites are made of answers to frequently asked questions, which are a moving target. By periodically analyzing user data of various kinds, customer service can document the standard answers that users need, allowing support staff to focus on new issues and questions that require unique answers. Data is key to gaining needed resources. Data mining proved the problems existed, and analytics proved the solutions worked. It was easy for support-site stakeholders to gain the resources and momentum to implement recommended changes once some of the fixes measurably addressed their pain points. This early success led to more support for UX activities and new hires: an information architect and a content manager, who now optimize content, navigation and search. Collaboration over time helped the UX team, support staff, and developers, who were located in many places around the world, to share knowledge and develop a shared vision. This unification of purpose and concerns while working closely together to solve problems resulted in a great website design, one that helps meet everyone's needs. Clearly, Mozilla's investment in UX design for its support website has paid off beautifully, and it showed measurable improvement almost immediately. We hope this example helps you make the case for user-experience ROI and paper prototyping — for iterative, user-centered design. Indicators, Validations, and Notifications: Pick the Correct Communication Option by KIM FLAHERTY on July 26, 2015 Topics: Applications Standards Summary: Status feedback is crucial to the success of any system. Knowing when to use 3 common communication methods is key to supporting users. In interaction design, a system, whether an application, website, or piece of hardware (anything from a smartwatch to a thermostat), should always keep users informed, by providing appropriate feedback. Ensuring that the state of the system is always visible is one of the 10 usability heuristics for interface design. Information about system status, such as error messages and notifications of system activity, allows users to fully understand the current context. The best way to communicate system status varies depending on several key factors: The type of information being communicated The urgency of the information — how important it is that the user sees it immediately Whether the user needs to take action as a result of the information Three common approaches for status communication include validation, notifications, and status indicators. These terms are used sometimes interchangeably in product design, but they stand for different communication methods that should be used in different circumstances. Understanding the differences between them will help you sharpen your feedback to users by choosing the best option for each need. Indicators An indicator is a way of making a page element (be it content or part of the user interface) stand out to inform the user that there is something special about it that warrants the user’s attention. Often, the indicator will denote that there has been some change to the item represented by that element. Although, as we’ll see later, indicators are used quite frequently to signal validation errors or notifications, they can also be used on their own. Indicators are visual cues intended to attract users’ attention to a particular piece of content or UI element that is dynamic in nature. (If something always looks the same, it’s not an indicator, no matter how flamboyantly it’s designed.) There are at least three possible ways of implementing indicators: Oftentimes, but not always, indicators are implemented as icons. Easily recognizable icons can make very effective communication tools. Typographical variations can also be used as indicators; examples include the common convention of boldfacing unread email messages or color-coding stock symbols in an investment account if their price has changed substantially. Though less common, enlarged size or animation (e.g., vibration) can also be used to make certain items stand out from the crowd and thus serve as an indicator. Yelp used a green-tag indicator in the search results to indicate that Tea Market had a special deal running. This indicator communicated additional information about Tea Market. Characteristics of indicators: Indicators are contextual. They are associated with a UI element or with a piece of content, and should be shown in close proximity to that element. Indicators are conditional— they are not always present, but appear or change depending on certain conditions. For example, a stock-performance indicator, such as the one in the American Century example below, may change to indicate if the stock price is increasing or decreasing. Additionally, the tag indicator in the Yelp example above only appears if there is a deal at that business. Indicators are passive. They do not require that a user take action, but are used as a communication tool to cue the user to something of note. American Century Investments used a conditional indicator to provide information regarding a specific stock’s performance. When the daily change was negative, the indicator was a red arrow pointing down. When the daily change was positive, it showed a green arrow pointing up. The condition of the stock performance impacted the indicator that was shown next to the price. Indicators can introduce noise and clutter to your overall interface, and may distract users, so it is important to consider how many (if any) indicators to use in your design. Consider the following when deciding if an indicator is appropriate: How important is the information to the user? Is it worth taking up space on the page to inform the user? How often is the information used? Would the user expect to see the information? Would it be missed if it weren’t provided? How important is it for the application that the user discovers the information? Validations Validation messages are error messages related to users’ inputs: they communicate whether the data just entered was incomplete or incorrect. For example, in e-commerce systems, validation messages often involve information such as name, billing address, and credit-card information. Cobragolf.com provided a validation message that clearly indicated which field was in error. The message however was complex and confusing. A better message might say “Please enter a valid email address.” Characteristics of validation: A user needs to take action to clear the validation message. The information in the validation message is contextual and applies to a specific user input that has a problem. The way in which validation should be implemented varies based on the unique needs of the form. However, in general, if the user’s input is incorrect, the system should inform the user by providing an identifiable and clear message that aids in correcting the error. Validation messages should follow the guidelines for error messages rather than simply identifying the problem, they should tell users how to fix it. For instance, don’t state “Field is blank.” Please enter your street address” is more polite and directs to a solution. Since validation is contextual, it can be helpful to use an icon indicator along with the validation message to help communicate which input(s) are missing or need corrected. Bestbuy.com provided a helpful validation message telling users how to fix the problem and also used an icon indicator and a different color to attract users’ attention to the field that needed correction. Notifications Notifications are informational messages that alert the user of general occurrences within a system. Unlike validation, notifications may not be directly tied to user input or even to the user’s current activity in the system, but they usually inform the user of a change in the system state or of an event that may be of interest. In the case of email, social networks, and mobile-phone applications, notifications can even be delivered while a user is away from the application. Notifications can be contextual —applying to a specific UI element— or global —applying to the system as a whole. The Facebook App used a contextual notification in the news feed to communicate that newer stories had been added to the feed. This notification does not require the user to take action. Characteristics of notifications: They are not triggered by users’ immediate actions. They announce an event that has some significance to the user. There are two main types of notifications, which differ based on whether the user is required to act upon the notification: Action-required notifications alert the user of an event that requires a user action. In this sense, they are similar to validation, but since they were not sparked by the user’s own action, they require a different design. Action-required notifications are often urgent and should be intrusive; for instance, they could be implemented as modal popups that interrupt the user, forcing immediate attention and requiring an action to be dismissed. The Mac operating system used a notification to inform users of available system updates. The user had to explicitly dismiss it from the screen, by opting to either install the update or to be reminded again at a later time. This is an intrusive notification that requires that the user take action. Passive notifications are informational; they report a system occurrence that does not require any user action. Many notifications in mobile apps are passive: they usually announce an event of potential interest to the user. Passive notifications are typically not urgent and should be less intrusive. A typical implementation of a passive notification may be a badge icon or a small nonmodal popover in a corner of a screen. Passive notifications can easily be missed, since they require no user action. When the information provided by the notification is key to the understanding of the system, an easy-to-ignore passive notification can be problematic. Adobe Creative Cloud used a nonintrusive passive notification to inform the user of an available application update. This notification appeared on screen for several seconds before disappearing. The user did not need to take any action on it. Uniqlo.com used a nonintrusive passive notification to provide feedback that an item was added to the shopping cart. No action was necessary to dismiss the notification. Such notifications sometimes cause issues for e-commerce shoppers who do not notice the brief messaging. Users who miss the message may respond by adding an item to the cart multiple times, or by disrupting their shopping flow to check the cart to see what items were added. Notifications have the design challenge that they are not the immediate and obvious result of a specific user action. On the contrary, the user is likely in the middle of doing something different and may not be thinking about the issue raised by the notification. This requires notifications to establish more context and provide users with sufficient background information to understand what the notification is about. (In contrast, with a validation, the user has just done the thing that needs to be corrected. Thus, the validation message doesn’t need to educate users about the task at hand. For example, if an e-commerce checkout form has a field for a credit-card expiration date that was left blank, the validation message doesn’t need to say “Please provide the expiration date for the credit card you want to have charged $29.90 to pay for the blue sleeveless dress you are in the process of buying on Uniqlo.com.” However, a notification the following day that the dress has been shipped from the warehouse would need to say more than “Your package has shipped.”) If a notification is contextual and relates to a specific element in the interface, an icon indicator on the element can communicate where that notification applies and catch the user’s attention. For instance, an indicator badge on a mobile-app icon shows that the user has received a notification from the corresponding app. The iPhone messaging app created a notification to communicate that a new message was received. Along with the notification, an indicator badge was placed on the messaging-app icon to communicate where the notification applied. To clear the indicator, the user had to view the message. Mint.com used an indicator together with a notification to communicate that an account needed attention. The warning indicator (1) appeared in close proximity to the summary of the account that needed attention, while the notification (2) appeared in the central area of the page with other important information. The actual text in the notification message could have been more helpful, though. Picking the Right Communication Option Is Important Using the wrong communication method can have a negative impact on the users’ experience. Let’s refer back to the scenario above where Yelp utilized a green-tag indicator in the search results to indicate that Tea Market had a special deal running. This information is contextual and important to users who have specifically searched for a place to have tea. You may think that an alternative way of alerting users of potential tea deals would be to send them a notification when such a deal has become available. Wrong! A notification sent irrespective of the current user goal would likely be ignored, and may even annoy users because it will disrupt their current task and be irrelevant to their current needs. (In general, any type of ad tends to be ignored unless it is related to the users’ aims and mindset.) Alternatively, a toast (a small nonmodal popup that disappears after a few seconds, like the New Stories one used by the Facebook app), while appropriate for passive notifications, would be a bad way to implement an error message, be it validation or otherwise. In fact, one of our mobile users spent 5 minutes waiting for some content to load only because she hadn’t notice the little error message presented at the bottom of the screen that quickly faded away after 5 seconds. Allmodern.com used an action-required notification to communicate that a product was saved as a favorite. For a user that is saving a lot of items to their favorites, this can be a bothersome and intrusive way of providing feedback. This may be better communicated by showing a passive nonmodal popover in the corner of the screen that can be seen, but doesn’t require the user to take action to clear it. Conclusion Remember the key differences between the three communication methods are: Indicators provide supplementary information about a dynamic piece of content or UI element. They are conditional —that is, they may appear or change under specific conditions. Validations are tied to a user’s action or input. Notifications are focused on system-related events. These differences are summarized in the table below: Validation Notifications Indicators Global vs. contextual: Related to a global system event or to a particular page element Contextual Global or contextual Contextual Passive vs. requiring a user action Action required Action required or passive Passive Triggered by user action vs. system event User action System event User action or system event Understanding when and how to use each of these feedback tools is important in order to build consistency in the communication to users. By assessing the type of information delivered, we can determine the correct mechanism to use. Share this article: Twitter | LinkedIn | Google+ | Email Mobile Faceted Search with a Tray: New and Improved Design Pattern by KATHRYN WHITENTON on July 26, 2015 Topics: Mobile & Tablet Search Visual Design Summary: Displaying faceted-search controls on mobile devices in a ‘tray’ overlay is a new effective solution to the challenge of showing both results and filters on small screens. Recently, a few big brands have introduced a new method for displayed facet controls on mobile devices, by placing them in a ‘tray’ overlay on top of the actual results. This new design approach addresses a major shortcoming typical of many faceted search displays on mobile devices: the placement of facet controls on a separate screen, which forces users to work harder to understand how the facet controls affect the results set. But before understanding why this is the case, let’s go back to the basics of faceted search. What Makes Faceted Search Special? Faceted search lets users refine a set of results by applying filters that comprehensively describe the search space. Such narrowing is invaluable for users who need to find something specific within a large content set. This type of search has become common for ecommerce and travel websites, as well as many different types of document and media collections. A faceted system includes two critical elements: Simple controls to construct sophisticated searches: Providing familiar controls like drop-down menus and checkboxes with natural-language labels empowers ordinary users to narrow down a large set of results to a small set that meets their exact criteria—without any special knowledge of Boolean logic or query syntax. Simultaneous display of the facet controls and the results: Showing both the filters and the results at the same time makes it easier for users to understand the relationship between the two; ideally, this is reinforced by dynamically updating the results set as soon as the user selects a filter criteria. The simple filter controls are the most obvious component of a faceted system. However, the importance of simultaneous display should not be underestimated. Long before faceted search became popular, we had ‘advanced search’ screens with similar controls for creating complex search queries. The big difference introduced with the first faceted navigation system was in displaying the facet controls and the results at the same time, which makes the effects of each filter instantly visible. This innovation embodies 2 of the 10 usability heuristics: provide rapid system feedback, and offer users control and freedom. Challenges of Displaying Search Facets on Mobile Devices Faceted search was originally designed for desktop and laptop users. Translating this experience onto a mobile device is difficult, because the very thing that makes faceted search so helpful to users – being able to see the filters and the results at the same time – is difficult to achieve on a small screen. There simply isn't enough space to show a full set of facets and a decent number of detailed results simultaneously. Until recently, most mobile designers haven’t even tried to display facets and results at the same time, instead opting to place them on separate screens. But this solution forces users to navigate to the facet-control screen, make their selections, then navigate back to the results set to see the effects of their selections. The istockphoto.com mobile website illustrates the typical approach to providing faceted search to mobile users. The results page includes an icon that users can tap to open the facet controls (assuming they can figure out what the icon means). Once the facet controls are displayed, users can select different filtering criteria, but it’s not obvious how the results will be affected by the facet selection because: None of the results are shown on this screen. The number of files, displayed in the page header updates too slowly. The header showing the number of files may not even be visible once a user has scrolled down to expand and select the facets below. Due to these limitations, users have to return to the previous screen in order to find out whether their filter selections were effective at targeting the best results and whether they have narrowed the results set down to a manageable size— or if perhaps they've applied such restrictive criteria that no results match. Mobile search results and facet controls on iStockphoto.com Left: Like many mobile search designs, iStockphoto.com does not display faceted search controls on the actual search results page. Instead it requires users to navigate to the facet controls, in this case via a cryptic icon composed of lines and circles on the right edge of the Search bar. Right: The facet controls take up the entire screen, and in order to see the effects of their selections, users must navigate back to the results screen. New Solution: ‘Tray’ Overlay to Display Facet Controls Recently a new approach to providing faceted search for mobile users has appeared: showing the facet controls as a ‘push-out’ style tray on top of the search results. This design allows for continuous visibility of results: even while the facet controls are open, some information about the results is visible in the background. The Amazon iPhone application and eBay’s mobile website both now use an overlay to display facet controls on the same screen as the search results. Mobile Facet Tray Overlay Examples Amazon’s iPhone application (left) and eBay’s mobile website (right) both recently introduced an overlay to display search facet controls on the same screen as the search results. Design Pattern Elements Both the Amazon and eBay designs include several details that combine to create a good user experience: Once activated, facet controls appear in a vertical panel overlaid on top of the results screen. The results are always visible in the background, and can be seen to change as the user makes her facet selections. (However, in the case of eBay, users can hardly make out what the results are. Amazon’s design is better because users actually get useful information from the background.) The total number of results is always visible, even if the user has scrolled down a long list of facets. (Amazon accomplishes this by fixing the header at the top of the screen so that it remains visible even as the list of facets scrolls up or down). A translucent gray shadow slightly obscures the underlying results and ensures that the facet controls stand out. The facet panel appears at the right edge of the screen, leaving the left edge of the results visible. (This is helpful because the left edge is more likely to have meaningful content; with Amazon you can actually see the product images.) (You may also notice that both Amazon and eBay use actual words – Filter and Refine – as the commands to access facets, rather than a special symbol. Any of the labels commonly used for faceted navigation – narrow your results, refine, and filter – are far more understandable than cryptic icons, and definitely worth the extra space. ) Why Is Simultaneous Display of Results and Facet Controls Important? In usability testing, I am always amazed at how successful people are at immediately understanding and using faceted search screens, which tend to include many different elements and controls. As long as the controls are displayed properly, most people jump right in to creating and refining their queries. Instant results are an important part of the process because they allow users to see right away if they have applied the wrong filter, or applied overly narrow criteria that eliminates too many options. Both of those errors are very easy to recover from if you can instantly see the effects of your actions, but without this visibility users can end up in a tedious cycle of pogo-sticking between the results and the filters. The facet ‘tray’ approach illustrated by Amazon and Ebay doesn’t provide complete visibility, since only a small part of the results screen is visible. But these creative solutions offer at least some visibility into the effects of applying a filter. Users may still find that they need to close and re-open the facet controls, but this approach feels more like expanding a part of the current page, rather than jumping back and forth between different pages. Find out more about the best approaches for visual displays on smaller screens in our full-day courses about Visual Design for Mobile and Tablet. Share this article: Twitter | LinkedIn | Google+ | Email Mobile Faceted Search with a Tray: New and Improved Design Pattern by KATHRYN WHITENTON on July 26, 2015 Topics: Mobile & Tablet Search Visual Design Summary: Displaying faceted-search controls on mobile devices in a ‘tray’ overlay is a new effective solution to the challenge of showing both results and filters on small screens. Recently, a few big brands have introduced a new method for displayed facet controls on mobile devices, by placing them in a ‘tray’ overlay on top of the actual results. This new design approach addresses a major shortcoming typical of many faceted search displays on mobile devices: the placement of facet controls on a separate screen, which forces users to work harder to understand how the facet controls affect the results set. But before understanding why this is the case, let’s go back to the basics of faceted search. What Makes Faceted Search Special? Faceted search lets users refine a set of results by applying filters that comprehensively describe the search space. Such narrowing is invaluable for users who need to find something specific within a large content set. This type of search has become common for ecommerce and travel websites, as well as many different types of document and media collections. A faceted system includes two critical elements: Simple controls to construct sophisticated searches: Providing familiar controls like drop-down menus and checkboxes with natural-language labels empowers ordinary users to narrow down a large set of results to a small set that meets their exact criteria—without any special knowledge of Boolean logic or query syntax. Simultaneous display of the facet controls and the results: Showing both the filters and the results at the same time makes it easier for users to understand the relationship between the two; ideally, this is reinforced by dynamically updating the results set as soon as the user selects a filter criteria. The simple filter controls are the most obvious component of a faceted system. However, the importance of simultaneous display should not be underestimated. Long before faceted search became popular, we had ‘advanced search’ screens with similar controls for creating complex search queries. The big difference introduced with the first faceted navigation system was in displaying the facet controls and the results at the same time, which makes the effects of each filter instantly visible. This innovation embodies 2 of the 10 usability heuristics: provide rapid system feedback, and offer users control and freedom. Challenges of Displaying Search Facets on Mobile Devices Faceted search was originally designed for desktop and laptop users. Translating this experience onto a mobile device is difficult, because the very thing that makes faceted search so helpful to users – being able to see the filters and the results at the same time – is difficult to achieve on a small screen. There simply isn't enough space to show a full set of facets and a decent number of detailed results simultaneously. Until recently, most mobile designers haven’t even tried to display facets and results at the same time, instead opting to place them on separate screens. But this solution forces users to navigate to the facet-control screen, make their selections, then navigate back to the results set to see the effects of their selections. The istockphoto.com mobile website illustrates the typical approach to providing faceted search to mobile users. The results page includes an icon that users can tap to open the facet controls (assuming they can figure out what the icon means). Once the facet controls are displayed, users can select different filtering criteria, but it’s not obvious how the results will be affected by the facet selection because: None of the results are shown on this screen. The number of files, displayed in the page header updates too slowly. The header showing the number of files may not even be visible once a user has scrolled down to expand and select the facets below. Due to these limitations, users have to return to the previous screen in order to find out whether their filter selections were effective at targeting the best results and whether they have narrowed the results set down to a manageable size— or if perhaps they've applied such restrictive criteria that no results match. Mobile search results and facet controls on iStockphoto.com Left: Like many mobile search designs, iStockphoto.com does not display faceted search controls on the actual search results page. Instead it requires users to navigate to the facet controls, in this case via a cryptic icon composed of lines and circles on the right edge of the Search bar. Right: The facet controls take up the entire screen, and in order to see the effects of their selections, users must navigate back to the results screen. New Solution: ‘Tray’ Overlay to Display Facet Controls Recently a new approach to providing faceted search for mobile users has appeared: showing the facet controls as a ‘push-out’ style tray on top of the search results. This design allows for continuous visibility of results: even while the facet controls are open, some information about the results is visible in the background. The Amazon iPhone application and eBay’s mobile website both now use an overlay to display facet controls on the same screen as the search results. Mobile Facet Tray Overlay Examples Amazon’s iPhone application (left) and eBay’s mobile website (right) both recently introduced an overlay to display search facet controls on the same screen as the search results. Design Pattern Elements Both the Amazon and eBay designs include several details that combine to create a good user experience: Once activated, facet controls appear in a vertical panel overlaid on top of the results screen. The results are always visible in the background, and can be seen to change as the user makes her facet selections. (However, in the case of eBay, users can hardly make out what the results are. Amazon’s design is better because users actually get useful information from the background.) The total number of results is always visible, even if the user has scrolled down a long list of facets. (Amazon accomplishes this by fixing the header at the top of the screen so that it remains visible even as the list of facets scrolls up or down). A translucent gray shadow slightly obscures the underlying results and ensures that the facet controls stand out. The facet panel appears at the right edge of the screen, leaving the left edge of the results visible. (This is helpful because the left edge is more likely to have meaningful content; with Amazon you can actually see the product images.) (You may also notice that both Amazon and eBay use actual words – Filter and Refine – as the commands to access facets, rather than a special symbol. Any of the labels commonly used for faceted navigation – narrow your results, refine, and filter – are far more understandable than cryptic icons, and definitely worth the extra space. ) Why Is Simultaneous Display of Results and Facet Controls Important? In usability testing, I am always amazed at how successful people are at immediately understanding and using faceted search screens, which tend to include many different elements and controls. As long as the controls are displayed properly, most people jump right in to creating and refining their queries. Instant results are an important part of the process because they allow users to see right away if they have applied the wrong filter, or applied overly narrow criteria that eliminates too many options. Both of those errors are very easy to recover from if you can instantly see the effects of your actions, but without this visibility users can end up in a tedious cycle of pogo-sticking between the results and the filters. The facet ‘tray’ approach illustrated by Amazon and Ebay doesn’t provide complete visibility, since only a small part of the results screen is visible. But these creative solutions offer at least some visibility into the effects of applying a filter. Users may still find that they need to close and re-open the facet controls, but this approach feels more like expanding a part of the current page, rather than jumping back and forth between different pages. Find out more about the best approaches for visual displays on smaller screens in our full-day courses about Visual Design for Mobile and Tablet. Share this article: Twitter | LinkedIn | Google+ | Email 4 iOS Rules to Break by AURORA BEDFORD, RALUCA BUDIU, KARA PERNICE, and AMY SCHADE on July 19, 2015 Topics: Navigation Standards Visual Design Summary: Page control (dots), Submit at top, and the Plus (+) and Move icons are 4 common iOS patterns that cause usability problems in testing. Large software organizations (such as Apple, Microsoft, and Google) create design guidelines to help both users and designers. On the one hand, designers and developers can get a head start on creating interfaces that will hopefully be good, without needing to invent (and test) all-new UI elements. On the other hand, users get a consistent look-and-feel across applications running on the same operating system if all designers comply with these guidelines. Following style guides is almost always recommended. But there are some cases where the “official” design does not work well in practice. Nonetheless, for reasons unknown—maybe the recommendation was a trade-off, it wasn't thoroughly researched, or it seemed to be the best possible a solution to a very difficult design challenge—it still made it in the style guide. The following are 4 common iOS patterns that Apple has used extensively in its apps and that have been followed by many other designers. Some of them are part of the iOS human-interface guidelines. Time and again, we have seen these designs cause usability problems. The Apple gods may strike us down with lightning, but we recommend against following these patterns because they fail in usability testing: Page control: dots to indicate pages Form Submit button at the top Plus (+) icon Move icon 1. Page Control: Dots to Indicate Pages Many iOS users are familiar with the page control. The iOS page control is a line of horizontal dots that represent open views or pages. The currently selected page is represented with an opaque dot and the other pages are represented with translucent dots. iOS home screen uses dots (page control) to indicate the current view The iOS home screen uses dots (page control) to indicate the current view and the number of additional views (that is, additional pages of apps pages) available. While this is one of the most recognized and common examples of the dots it’s also one of the few cases where they work tolerably well, because users know that they have multiple screens full of a muddled mix of icons that people swipe through in the attempt to locate a desired application. (The overall UX of locating icons is not ideal, but the page dots are not the problem.) Some apps and sites use this interface element to indicate that users can swipe through pages of content while others use it in a partial area of the page to show a carousel of content. It’s a popular pattern in both mobile-web and app design, but it is also one commonly overlooked by users. In usability testing, these dots are often too subtle in the interface to clearly indicate to users that there is another view of content available. As such, they should never be used for key functionality, such as navigating between features, or as the sole method for accessing information. use dots at the bottom of the page and swipe In the iOS app Stock Market HD Stocks and Shares, the only apparent way to navigate between the Watchlist, Wishlist, Sold and My Holdings views is to notice the dots at the bottom of the page and swipe to discover the additional functionality. While designers and developers can select what colors to use for the tint of the circles, it is difficult to make a small, subtle, and translucent design element stand out on a page. Many designs use these circles on top of busy images, which causes an already subtle design to further fade into the background. If using the dots, help users notice them by increasing the color contrast between the dots and background, and placing the dots on a solid color background when possible. zappos dots barely visible The Zappos iOS app uses dots to indicate multiple views of content in the top half of the page. The dots are barely visible on the background of the shoe in the first image and disappear completely into the background picture of the chair in the second image. Some sites and apps take liberties even with the existing iOS conventions, using squares or other shapes or moving the dots around the page. Users struggle to locate and use these dots even when they follow the design conventions described by the iOS guidelines. Changing the elements to diverge from these standards makes them that much more difficult to identify and understand. If using the dots, center them and place them directly below the elements they control. Fab app for Android borrows the iOS-inspired dots The Fab app for Android borrows the iOS-inspired dots, but places them to the right side of the carousel rather than centering them. Even if users do notice the dots, an essential usability problem remains. The dots allow only sequential access to content, and provide no indication of what the content is. Whether the dots indicate items in a carousel or stand for separate pages in a deck-of-cards pattern, the same usability concerns apply. In particular, carousels using symbols to represent pages limit users’ control over their experience. Users have no way to know what’s coming next and no way to navigate directly to content of interest. Instead, we recommend: Consider if content should even be accessed via swiping. It may be better accessed via navigation or text links. Cut off a piece of content (text or image) to visually indicate that users can swipe to reveal more information. iOS App Store avoids the use of dots and instead uses cut off The iOS App Store avoids the use of dots and instead uses cut off elements to show users that the navigational carousels are movable. 2. Form Submit Button (or Equivalent) at the Top On iOS, the Done button is often displayed in a navigation bar at the top of the page. Sometimes the form Submit button (whether called Submit or something else — for instance, Place Order) is also placed at the top of the form. This pattern has started to trickle into Android apps as well. Add button that submits form is in the top right corner Calendar for iOS (left): The Add button that submits the form is placed in the top right corner, in the navigation bar. Todoist (a to-do–list app) for Android (right) borrows the iOS pattern and places the Submit button (the checkmark icon) in the top right corner. (Note also that the form fields violate many of our guidelines: the labels are inside the field, and can you guess what GMT-8:00 stands for?) Even in iOS apps we recommend against following this pattern for the simple reason that it goes against the natural top–bottom workflow on the page. As users fill in the form, they usually do it top to bottom. When they get to the end of it, they expect to find a Submit button right there, next to the last field they have completed. Most of the time, when people don’t find it there, they get confused and start looking around, not knowing what to do. In the examples below (Pinkberry and Nordstrom), the Sign In and Place Order buttons need to be pressed after the user has filled in the form. Placing these buttons at the top of the screen is against the natural flow of filling in the form: once done with all the fields of the form, users find themselves at the bottom of the page, left with nothing to do next. Even on a small mobile screen, looking for and finding the corresponding Submit button requires unnecessary extra effort that could be saved if that button was placed at the bottom of the page, under the last field, as it is customary on most forms on the desktop. (The generally accepted design guideline for any GUI — mobile or not — is proximity between actions and objects, not to place the action button as far away as possible from the data it acts upon.) working area is disconnected from the Submit button The working area in Pinkberry for iPhone (left) and in Nordstrom for iPhone (right) is disconnected from the Submit buttons (labeled Sign In and Place Order, respectively), which are placed at the top of the screen. One of the advantages of having the Submit button in the page header is that, because this header is sticky in iOS apps, users can access the button easily at all times—whether they have filled in all the form fields and reached the bottom of the list, or not. (For the Calendar app it may be reasonable to assume that users won’t bother with all fields, but for a login form it’s not.) In any case, if having the button accessible at all times is important for you, consider instead a sticky Submit button at the bottom of the page, like in the Hotel Tonight app. Yes, you will sacrifice some screen real estate, but in return you will gain a better, more usable interaction flow. The Pay button at the bottom of the page is persistent and accessible at all times Hotel Tonight: The Pay button at the bottom of the page is persistent and accessible at all times. This allows users to interact with the page as much as necessary while having consistent access to the payment button, which appears in a predictable and logical location. Instead, we recommend: Display the form Submit button (or equivalent) under the form fields rather than at the top of the page. 3. Plus (+) Icon Throughout many mobile apps, the Plus icon is used to represent a variety of functions. When placed within a top navigation bar, it most commonly means “Add,” but when placed within a table or list of items the icon can signify either adding that item to some sort of list or group, or expanding that list item for more detailed information. When multiple interpretations exist, it becomes difficult for users to consistently understand an icon's meaning. a Plus icon most commonly means to add a new item When located in the top navigation bar, a Plus icon (top right corner) most commonly means to add a new item, as used in the MyFitnessPal app to allow adding a friend. The usability of the Plus icon is highly dependent on where it is located within a UI. When found in a common place, such as a navigation bar, the meaning is usually correctly understood as long as adding new items makes sense for the type of content shown on that screen. However, when the Plus icon appears within the main content of an interface, it can have multiple meanings, which creates confusion for users. For example, a previous version of the app Any.do displayed the Plus icon alongside the label of existing to-do lists. In this context, it is unclear whether tapping the Plus icon would expand the list to view the items it contained, or if it would trigger adding a new to-do item to the corresponding list. The current version of the app has solved this ambiguity by relocating the Plus to the navigation bar: however it is now used to add an entirely new to-do list. the meaning of the Plus icon was unclear In a previous version of the Any.do iOS app (left), the meaning of the Plus icon was unclear, as it could be interpreted as either allowing the expansion of the list or adding an item to a specific list. In the current version (right), the Plus icon is part of the top navigation bar, and is now used to add an entirely new to-do list. Leveraging the Plus icon to trigger actions is particularly harmful when the user misinterprets what will occur. Since the Plus icon is regularly used on the web and in mobile apps to communicate that a list can be expanded—together with the arrow and the caret—users often do not expect that same Plus icon to actually perform some sort of action. In the LinkedIn mobile app, a Plus icon in a circle is used to Follow a company or Join a group depending on where it is located. In usability testing, several users were surprised when they accidentally joined groups they were intending to merely get more information about. LinkedIn app reuses the same Plus icon throughout the app The LinkedIn app reuses the same Plus icon throughout the app for a variety of functions. On the main home screen shown above, the Plus icon can be tapped to follow a company (without confirming this is what the user intended). When searching in the app, the Plus icon can also be used to quickly join groups. Thankfully the questionable icon is omitted from the search results for People or Jobs, as that could lead to some interesting consequences. Avoid adding the Plus icon haphazardly throughout an app, as it can be interpreted in several different ways depending on its exact context within the interface. Instead, we recommend: While the navigation bar is a fairly safe location, displaying the + icon in other areas in a design must be tested with users to ensure the meaning is correctly understood. The only way to fully avoid the issue is to also avoid the icon, and to use an arrow or caret for expandable lists, and text labels for buttons triggering any action associated with a list item. 4. Move Icon move icon Move icon Like many icons for mobile devices, the move icon does not clearly reveal what it does. By looking at it you probably will not recognize that this icon will move an item in a list. The 3 horizontal lines used for the Move icon may represent a list, or maybe, as one reader pointed out, "ridges prevening the finger from slipping off the item while dragging it." When this icon appears within a row of a list, users are supposed to tap the icon and hold it while dragging the related item to its rightful place in the list. There are a few usability issues with this pattern. When items are movable in a list, users expect to tap directly on an item (word, button, etc.) and drag it. They don’t expect to need to touch a small, hard-to-decipher icon instead and drag that. The icon is a much smaller and harder to tap target than the item in the list itself is. So it increases the interaction cost and makes users work harder to tap and drag than they should need to. Additionally, in list views, users expect all the elements in a row to be associated with the same action: in other words, they think that dragging the item or the icon should do the same thing. app displays the shadow text of the item as it moves YAHOO! Finance uses Apple’s iOS recommendation for moving items in a list. Tap the 3-horizontal-line icon on the right (left) and drag and move the selected item. The app displays the shadow text of the item as it moves (middle) and the change takes effect (right). The list items themselves are a much larger tap target, but tapping and dragging them does not work. Finally, nearly the exact same icon recommended in the iOS style guide has come to mean something completely different on the mobile web and elsewhere: The “hamburger” icon looks incredibly similar to the move icon. move and hamburger On the left is a Move icon, on the right is a hamburger menu. It can be disconcerting and confusing to people when the same thing, or what is perceived to be the same thing, is used to invoke different commands. If the hamburger menu continues to gain traction, more users will learn that clicking three horizontal lines opens a menu (even if they may still overlook this feature more often than we would like). But this is not how the move icon works. This disagreement hurts users’ ability to recall what the icons do after they have already used them. Instead, we recommend: Make it possible to tap and drag items in place without needing to click a particular icon to do so. Instead of the hamburger icon alone for a menu, display it with the word Menu to indicate that a menu will open, or use the word Menu alone. Conclusion Deviating from well-researched interface patterns is usually not recommended. It is better to follow the probable best practices, knowing that consistency and knowledge transferred from use of other iOS apps will prime users’ expectations. With any guidelines or style guides, doing usability testing can demonstrate or disprove if the guideline works well in your own design. Through watching people use these designs, we have witnessed enough consistent issues to recommend against using these 4 patterns. Share this article: Twitter | LinkedIn | Google+ | EmailThe Characteristics of Minimalism in Web Design by KATE MEYER on July 12, 2015 Topics: Visual Design Web Usability Summary: Our analysis of 112 minimalist websites revealed the defining features of minimalism: flat design, limited color schemes, few UI elements, use of negative space, and dramatic typography. This article is the second in a series devoted to the understanding of minimalism in web design. If you’re interested in the origins of the movement, read The Roots of Minimalism in Web Design. A minimalist web-design strategy is one that seeks to simplify interfaces by removing unnecessary elements or content that does not support user tasks. In order to reduce a website to only its most necessary elements, designers must accept a cascade of consequences that impact both the user interface (UI) and the content of the site. Many of the visual-design characteristics commonly associated with minimalism are choices that serve the core strategy of minimalism particularly well, and so have been adopted along with minimalism in most instances. Web design, like language, is defined by the way people use it. The word ‘minimalism’ is thrown around a lot, yet it’s hard to pinpoint exactly what features define a minimalist web design. To more clearly define what constitutes a minimalist design in practice, we analyzed the design characteristics of a sample of 112 minimalist websites. Sites were selected for the study if they were either identified by an outside web-design expert as minimalist, or were included in an online gallery for inspirational minimalist sites, like siiimple. Remember that just because a design technique is popular doesn’t necessarily mean that it always supports user needs and optimizes profitability or other business objectives. In this study, we analyzed sites that are known to employ minimalist design, not sites that are known to be highly profitable. As discussed further below, our other research suggests that while some of these design ideas can support business goals, others can hurt your profitability. Defining Characteristics of Minimalism So what features were present in most of these designs? We included a feature among the defining characteristics of minimalism if it was present in at least three quarters (75%) of the websites that we analyzed. Flat Patterns and Textures Used in 96% of sampled interfaces (but often ineffectively) Over the past few years, there has been an overwhelming shift in the design community away from skeuomorphism, towards purely digital representations of things without physical metaphors. Flat interfaces don’t make use of any of the obvious highlights, shadows, gradients, or other textures that make UI elements look glossy or three-dimensional. Some designers believe that the flat-design trend grew out of the popularity of minimalist UI design (Müller, 2014). The two trends are extremely compatible; removing gratuitous shadows, gradients, and textures falls in line with minimalism’s primary goal of eliminating the unnecessary. In our sample, 96% of the minimalist sites were flat. The two tend to co-occur so frequently that the phrase ‘flat design’ is often (misleadingly) used interchangeably with ‘minimalist design.’ The trends are similar, but not the same. Flat design generally refers to the textures, icons, or graphics in an interface. Minimalist design applies to the larger or overarching content, feature, and layout strategies. An interface may be flat without being minimalist. Jeet.gs The Getting Started page for Jeet.gs grid system API features a completely flat interface, including ‘ghost buttons’ for copying code snippets. (Ghost buttons are empty buttons with a thin rectangular border and text.) Flat ghost buttons can have legibility problems, and they break away from the established convention of what a clickable button should be. (However in this case, the buttons highlight when the mouse passes over them, providing a dynamic signifier of clickability. Also, the buttons show a tiny 3D effect when clicked that adds a small sense of physicality. Thus, the interactive user experience adds depth to the flat interface elements.) As we’ve discussed in other articles, flat designs often fail to communicate to users which elements are selectable or clickable. We believe that a better approach is a compromise between flat and skeuomorphic—a mostly flat design, but with clickable elements that users can recognize easily. Considering that flat design is the design idea most likely to be used incorrectly and degrade the user experience, it’s unfortunate that it’s the most prevalent of the main characteristics of minimalist web design. Limited or Monochromatic Color Palette Used in 95% of sampled interfaces In most minimalist interfaces, color is used strategically to create visual interest or direct attention without adding any additional design elements or actual graphics. With less visual information vying for a user’s attention, color palettes are more noticeable and will be more influential in a site’s impact. Minimalist color palettes are a movement away from the clashing, loud colors of the web design popular in the 2000s. Subdued color schemes are intended to avoid upstaging the content—which, in the case of images, can still be brightly colored. Many minimalist designs are either monochromatic, or use only one bold color as an accent, and use it to—sparingly—highlight the most important elements of the site. These accented elements are usually clickable. When assessing the use of color in the sample websites, we looked at background colors, logos, navigational elements, iconography, and typography, but did not consider content images (like photographs) as part of the color palette. Almost half of the websites sampled (49%, 55 websites) used a monochromatic color palette. Almost as many websites used one or two accent colors in an otherwise monochromatic color palette (46%, 52 websites). Of those 55 monochromatic sites, 51 sites were grayscale-–they used exclusively white, black, and gray shades. Freres d'Encre The monochromatic homepage of Frêres d'Encre, a French tattoo studio, creates a dramatic aesthetic. Solo Solo, project management software, uses a monochromatic but not grayscale color palette. Kayak Travel metasearch engine Kayak uses orange to highlight its logo and the actionable Search button. The popularity of this particular characteristic is an improvement in the sense that it’s moving interfaces away from the loud, clashing color schemes that used to dominate the web. However, there are some considerations to keep in mind when applying a limited color palette: Make sure your color scheme uses enough contrast to be legible to people with limited vision or color blindness. Use accent colors intentionally and consistently to highlight very important information or primary actions. Restricted Features and Elements Used in 87% of sampled interfaces Designers who adopt a minimalist design strategy must consider each element in their interfaces and eliminate any that are not required to support the core functionality or message of the website. An ‘element’ in this context could be any individual unit of the interface: including but not limited to: menu items links images graphics lines captions textures (like gradients) colors fonts icons It’s difficult to assess whether an interface includes ‘unnecessary’ elements without directly asking the sites’ designers what they left out, and without knowing the target users and tasks. To make this characteristic measurable, we focused on assessing whether or not the interface contained graphic elements that did not serve any obvious purpose. In our sample, 87% of minimalist sites avoided gratuitous graphic elements. Alan Trotter's portfolio The portfolio of fiction writer Alan Trotter is severely minimalist. By default, the site doesn’t even reveal his full name: visitors must click the underlined text to get to more details. This strategy might achieve an ‘edgy’ aesthetic, but it’s a big gamble to hide the most important content. The more stuff there is in a user interface, the more stuff users need to process. A favorite mantra of minimalist designers is, “subtract it till it breaks,” which really means, “unless the absence of an element would be serious problem, get rid of it.” This is where designers can get distracted by the pursuit of a clean, modern, minimalist interface—and end up cutting out useful content. Adhering to a rigidly utilitarian approach can produce streamlined designs by eliminating distracting features and content. Just make sure you aren’t making your users’ primary tasks more difficult by removing or hiding content they need. It’s hard to understand a cluttered design or a system overflowing with extraneous features. But it’s even harder to understand a design that doesn’t provide sufficient scaffolding to explain its features or structure. Maximized Negative Space Used in 84% of sampled interfaces Removing or excluding elements from a web page necessarily leaves empty space. Negative space (also called white space) is the name given to the empty areas of an interface. Negative space has been called “practically synonymous with” and “the backbone of” minimalist interfaces. Many minimalist designers use it as a tool to try to direct users’ attention and allow them to digest content more easily. Considering these strong assertions of negative space as the defining characteristic of minimalism, it’s surprising that only 84% of the sample sites used substantial amounts of negative space in their designs. Thomas Buffet's portfolio The screenshot above shows the homepage of French designer Thomas Buffet as seen full-screen on a 15-inch MacBook Pro. Above the fold, the page is almost entirely negative space. In this case, the site is still able to answer the two primary questions people would ask upon arriving at this page: ‘who are you,’ and ‘what do you do’. But this approach will not work in all contexts. Appropriate use of negative space can help draw attention to important content. When deciding how to lay out negative space in your designs, be sure to consider the following questions. How will adding or removing negative space impact the communicated hierarchy of the page? How will the negative space impact what content is displayed at the top of the page? The page fold still matters: users will scroll if they have a reason to, but they pay more attention to the content at the top of the page. How will the negative space impact the interaction cost: will users need to work harder to get to the information that they need? How will the negative space need to change at varying resolutions? Dramatic Use of Typography Used in 75% of sampled interfaces Like color, bold or large typography becomes another tool for communicating meaning when there are few elements on the page. Effectively exploiting interesting typography can help compensate for having fewer elements like photos and graphics, and can make a minimalist design feel more visually engaging. Variations in font size, weight, and style become crucial in helping users understand the hierarchy and relative importance of text. Of the 112 sampled minimalist sites, 75% used typography to convey meaning or create visual interest. Alexander Engzell's portfolio The portfolio of art director Alexander Engzell uses bold typography on his tagline to create visual interest without adding extra graphic elements to the page. However, the text is an image file, which adds to page load time. Also, unlike the Buffet portfolio, this page doesn’t directly explain whose portfolio this is, or what this person does. Users have to click the INFO link in the upper right corner to access that information. Using images for text may allow you to use custom fonts, but it will add to page load time, will require extra considerations for scaling at different resolutions, and can cause accessibility issues. Using web fonts is a better solution, but bear in mind that web fonts can have detrimental performance effects as well. Remember, drawing attention to bold typography is only useful when that text communicates meaningful information. Beware of going overboard on the fancy typography: users can ignore overformatted text if it looks too much like advertising. There’s a delicate balance between meaningfully bold typography and distracting typography. A great designer will come down on the right side of this balance, but if your designers are less skilled in employing advanced typography it’s safer to err on the side of caution. Related Trends Some designers also include the following characteristics as minimalist. Based on our research however, these seem to be design trends that often co-occur with minimalism, but are not actually defining characteristics—they occurred in fewer than 75% of the sites that we analyzed. Large Background Images or Videos Used in 57% of sampled interfaces The presence of a large background image or background videos (enabled by HTML5) is one of the most debated characteristics of minimalist Web design. From a theoretical perspective, a large background image certainly seems contradictory to the core minimalist spirit of reducing non-critical elements. Despite this, large background images and videos are popular in minimalist designs—we found that 57% of our sample included them. Monte Re The homepage of Monte Ré, an Italian fruit producer, uses a full-width background-image carousel within an otherwise pure-white minimal site design that includes ghost buttons. While the text is technically distinguishable from the background images, it’s unpleasant to try to read and understand the copy while colorful images circulate behind it. Depending on the context and the designer’s priorities, an argument can be made for the ability of large background images/videos to create an impact on users’ perception of brand. When a background image is used for a carefully considered, strategic reason, sticking to minimalist-design strategies can help restrain other page elements from competing or clashing with the background. Additionally, some designers may hope that loud background images will keep otherwise minimalist designs from being too boring or stark. If you choose to use a background photo or video with your minimalist design, keep the following points in mind: Make sure the images or videos you choose serve a real purpose or help people understand the site—otherwise they’ll just distract your users from your actual content. Make sure the text is both legible and readable if you want people to understand it. Remember, legibility is the extent to which users can distinguish individual letters. Readability is how well they can process words, phrases, and scan the text. If you’re using a carousel or video, you need to test every possible background—every image or frame of the video, and at a variety of screen resolutions. Be aware of how big images and videos impact performance. Make sure you’re taking an adaptive approach so your mobile users aren’t waiting for a desktop-sized retina photograph to load over their network data connection. Don’t autoplay videos. Many users are frustrated by videos that play automatically without their consent, especially if those videos have audio. Avoid creating Harry-Potter-painting-style videos of people slowly moving around in the background. You don’t want to distract your users and creep them out. Grid Layouts Used in 43% of sampled interfaces In our sample, we found that 43% of the interfaces used grid layouts to organize content. While this percentage indicates it is a popular design pattern among minimalist designers, it seems that grid layouts are certainly not ubiquitous in their designs. When grid layouts are used in minimalist UI designs, it’s generally for two reasons: Grids are an effective method of organizing homogenous content on the page linearly without adding any visual elements; and Grids are particularly helpful when designing a responsive website—another trend that is separate from minimalism but often co-occurs with minimalism. Paprika The graphic design agency Paprika organizes its projects in a grid, but is not responsive. Sea Chant portfolio The minimalist portfolio of photography studio Sea Chant organizes photographs in a grid at desktop screen widths. Sea Chant portfolio At 400px wide, the Sea Chant portfolio is reduced to a single column of content and removes all hover effects. Circular Graphic Elements Used in 16% of sampled interfaces Some design experts have suggested that circular and rounded graphic elements could be a component of minimalism, but we found only 16% of our sample used them. They seem to be more of a fad. Gesture Theory The homepage of Gesture Theory uses multiple circular elements in its minimalist design. Hidden Global Navigation Used in 13% of sampled interfaces Many websites currently use severely reduced global navigation elements in their desktop presentations, such as the now infamous hamburger menu. This can sometimes be the result of an incomplete mobile-first design strategy that fails to consider the needs and extra screen space available to desktop users, but it can also result from overzealous minimalism. Hiding infrequently accessed items might make sense for your goals, but make sure you aren’t hiding tools or links that are critical to the tasks you want your users to perform. Be particularly cautious if your site has large amounts of content or categories. Visual Soldiers portfolio The desktop portfolio site of design agency Visual Soliders uses a hidden global navigation under a hamburger menu. Visual Soldiers portfolio These few menu items hidden in an overlay could have been made visible globally, but were probably hidden to achieve this ultra-minimalist effect. Commonly Occurring Characteristics of Minimalist Interfaces Our analysis of 112 websites revealed the following defining characteristics for a minimalist website: Flat rather than skeuomorphic patterns and textures Use of a limited or monochromatic color palette Strictly limited features and graphic elements Maximized negative space Dramatic use of typography to communicate hierarchy or create visual interest Some of these characteristics are used almost ubiquitously in minimalism, and some occur slightly less frequently in minimalist interfaces; however, all of the defining characteristics were present in at least 75% of the minimalist sites that we analyzed. In our research, we also identified several related trends that were present in less than 75% of the sampled sites. Large background images or videos Grid layout Circular graphic elements Hidden global navigation Conclusion 2000s interface design was predominantly cluttered and overwhelming. For years, we’ve been advising against this kind of “maximalism”. Feature bloat and gratuitous content is always bad for users. In theory, minimalism should move us away from maximalism, and result in streamlined content and more efficient user task flows. In practice however, we’ve seen minimalism mutate into a superficial visual trend as designers copy popular minimalist characteristics without seriously considering if they support their own site goals. Just as flat design is a reaction to skeuomorphism, minimalism is a reaction to maximalism. In both cases, we strongly advise a balanced approach. A minimalist design strategy can be a powerful tool, but only when it’s framed by the needs of your users—minimalism for minimalism’s sake alone doesn’t help users. (Minimalism is one of the design strategies discussed in the full-day course on Generating UX Redesigns From Broad Design Principles.) Share this article: Twitter | LinkedIn | Google+ | Email Don't Force Users to Register Before They Can Buy by AMY SCHADE on July 5, 2015 Topics: E-commerce Summary: Guest checkout with optional registration on e-commerce sites simplifies the purchase process and invites users to register when they feel comfortable, rather than forcing unwanted registration. One of the most common complaints we hear in e-commerce usability research is about registration. Shoppers have many reasons to dislike or dread site registration. They may not plan to return to the site again, making a one-time purchase or a gift purchase. They may dislike registration in general, frustrated with remembering usernames and passwords for all the sites they visit. Some shoppers don’t want a site to save personal information and assume that if they register for the site, the information will be saved. Many users associate registration with getting unwanted email, and for good reason, since many sites offer tiny preselected checkboxes to sign up for email newsletters. Most of all, registrations involves extra steps, extra hassle, and extra potential for things going wrong (whether user errors or site errors) and stopping the user dead in the water. The higher the interaction cost, the fewer people will complete a process. This is true for any user interface steps, but in the case of e-commerce checkout there’s a particularly direct connection between user hassle and lost sales. TinyPrints.com required that users create an account and also automatically subscribed users to the newsletter, mentioning above the Create Account button that “You will be subscribed to the Tiny Prints email newsletter” (stated in tiny print, which makes users weary right there.) Being signed up for newsletters they do not want is one of many complaints users have about registering on e-commerce sites. Registration sounds like a tedious, lengthy process unrelated to the task at hand: making a purchase. And some sites make registration a lengthy and tedious process, sometimes even presenting registration as a step separate from the checkout process. This doesn’t need to be the case. When a user is making a purchase, typically all the information needed for registration is already being requested of the user. Sites normally ask for information needed for the transaction, including name, shipping, and billing information. In addition, sites commonly ask for an email address in order to email a receipt and update order status. The only aspect of registration that is not covered in a standard checkout transaction is a password. How to Present Optional Registration Before users enter the checkout process, clearly state that registration will be an option. Some users do want to register and like to see assurance that they can if they’d like to. If the option to create a password will be presented after the purchase is complete, rather than during the checkout process, tell users so they know when to expect the option. Under the Guest Checkout option, HomeDepot.com told users that “You will have the opportunity to create an account and track your order once you complete your purchase.” The size of the text could have been larger to make it easier to read, though it is good to present this information less prominently than the main text. Briefly highlight the benefits of registration from the users’ perspective and not the company’s perspective when asking users to register. Shoppers appreciate when sites emphasize aspects that would make the experience easier, such as order tracking or faster checkout. They sometimes complain about sites that stress “benefits” such as receiving email newsletters or becoming a member of the site. Mention customer-focused benefits when users start the checkout process as well as when customers are asked to create optional passwords. A brief bulleted list tends to work well to highlight this information. This list should not be a sales pitch for the site, but a brief reminder to users about how registering benefits them. Nordstrom.com told users that registration would let them, “Check out faster, Track your orders, Write reviews and more!" This nicely presented the information as a benefit to the user, rather than the site. Mark password fields as optional, so it’s clear that users do not have to register for the site. Also make sure to state password requirements so users aren’t left guessing how to create a valid password. Some sites do not mark the password fields as optional; instead they place the fields in a section of the page with the word “optional” in a heading. Users often skim web content, even when filling in forms, and may miss the optional designation if it is only displayed in the heading, rather than next to the field. When the fields are not specifically marked, users can misinterpret it as a requirement for registration. If they were previously told that registration is optional or have pursued guest registration on the site, this inconsistency can break the user’s trust. Ad Placement for Mobile by AURORA BEDFORD on July 5, 2015 Topics: Advertising Mobile & Tablet Web Usability Summary: Extra care is required when designing mobile page layouts that include advertisements, due to the limited screen real estate available. Ads must be displayed where they will not create false floors nor block users from reaching relevant content. Ads: that necessary evil we encounter every day, and to which we all believe ourselves to be immune. Whether a user ignores an ad completely or becomes annoyed with its presence is strongly related to the ad's size and placement on the page. On mobile phones, screen real estate is already at such a high premium that the position of the ad has an even greater impact on the overall user experience than on desktops. There are two main ad-related usability problems: (1) ads can be too disruptive to the user, and (2) they can create false floors that inaccurately signal the end of content and cause users to miss helpful information. Large Ads Limit Viewable Content Not surprisingly, the larger an advertisement, the more disruptive it is. On a small device, a vertically large ad consumes far too much valuable space, displacing the main content. To add insult to injury, sometimes two ads get stacked at the very top of mobile pages—as sites feel compelled to advertise their mobile apps. As a result, less page content is visible upon page load, which goes against one of the principles of mobile usability: prioritize content. In the example from FineGardening.com below, only the article title and brief summary can be seen without scrolling thanks to an overly large site header and the double ad placement at the top of the page. Screenshot from Finegardening.com on mobile showing multiple ads Finegardening.com: Very little article content can be seen upon page load because the app ad, banner ad, and large site header consume the majority of the screen real estate. Unlike multiple ad elements at the top of the page pushing down the relevant content, an ad at the bottom of the screen in a sticky container is less intrusive to users. This recommendation may seem counterintuitive because the ad would now remain visible on the screen at all times, but in past studies we have found this treatment to be best tolerated by users, which is good because it shows the ad is not getting in the way. Keep in mind that users tend to begin scanning from the top of the page, and resent having to scroll past a lot of chrome to get to the information they actually want to read. Thus, we need to not only consider the overall content-to-chrome ratio, but also ensure that helpful information is prioritized nearer to the top of page in order to grab people's interest and supply them with the information related to their task as soon as possible. An additional benefit to the sticky-container treatment is that the ad is still readily available to users once they finish their task. While the user is focused on completing an activity or researching a topic, ads will be ignored because they aren't part of the goal. Assuming the advertisement is actually relevant to the user, having it available once the main task is completed increases the likelihood that the user would pay attention to the ad and possibly interact with it. (An ad is relevant when it matches the user's current goal: it is more powerful to display an ad for something the user immediately wants rather than something that just matches their general profile.) Screenshots of ad treatment on the Washington Post mobile site The Washington Post mobile site displays an ad in a container fixed at the bottom of the screen (left). The ad is appropriately synced with the current scroll position of the page, and completely collapses when the user reaches a display ad embedded within the page content (right). Avoid Creating False Floors Another main downfall of many mobile ad placements is their tendency to create the “illusion of completeness,” or a false floor, on a page. An advertisement can easily signal to users that they have reached the end of the page's relevant content. This effect is exacerbated when the ad is large enough so it is difficult to see any continuation of content below, and when the ad is placed at a point low enough within the content where it seems reasonable that no more information is available on that page. Pages on WebMD's mobile site, for example, place ads following several paragraphs of text, below links to additional resources on the current topic. Horizontal lines in the design and the presence of copyright information (which is commonly associated with footer content) further cue the user that this is the end of page, when this is actually not true: the page continues far below the ad, displaying more information and additional links to related resources. Screenshots of WebMD.com mobile site article page containing several ads The ad placements on the WebMD mobile site create false floors because they appear in places that could reasonably be the end of relevant content, and are large enough that they hinder the user’s ability to see content continuing down the page. (The black dashed line shows where the fold occurs on an iPhone 6 Plus, and the red dashed lines represent areas where the ad is likely to stop a user from continuing to scroll.) If possible, only display ads at the real end of content rather than between paragraphs of text. Said one user during a recent usability study, “I don't like advertisements in between. It's distracting and gives me the impression that it's the end of the article.” Of course, we often don't have the luxury of neglecting business goals, and so if several ads need to be included on a page, putting them closer to the start of the content—following the title or intro paragraph, for example—can help avoid incorrectly signaling the end of the page. Additionally, shorter banner-style ads are less interruptive of the content than the taller square display ads. Screenshot of ad placement on USA Today mobile site USA Today mobile website uses a thin display ad positioned near the beginning of an article, so it is less likely to be considered a reasonable stopping point in the content. The thin rectangular size also allows the content below to be visible, encouraging the user to continue reading without being too interrupted by the ad. When an ad is placed lower on the page amid content, consider adding additional cues to signal the user to scroll past the ad. This recommendation is especially important if the ad is large or otherwise consumes a lot of page real estate (includes extra whitespace above and below the ad, or is a small ad populated into a placeholder meant for a larger one), and blocks the user from easily seeing any continuation of content. If the user doesn't know for sure that more content exists below the ad, they may not be willing to pay the interaction cost to scroll and possibly get nothing. Simple, clear text such as “Keep Reading” or “Continue Reading Below” along with an arrow pointing down or other directional indicator placed above the ad can work well to let the user know more content is available. Screenshot of ad design on Boston Globe mobile site To encourage users to scroll past a large ad, a cue such as Continue Reading Below should be shown above the advertisement, as seen on the Boston Globe mobile website. Keep in mind that this treatment merely makes the ad placement bearable, and should be considered a last resort if multiple ads must be placed on the page amidst content. In general when it comes to ads, be sure to practice restraint. Having a high number of ads diminishes site credibility: as stated by a user in a recent study, “I have deleted apps because of ads — I tend to not go to the ones with a lot of ads; I think the info is not reliable.” As expected, the most hated advertising techniques on the desktop are also hated on mobile devices; and sadly, top sins such as Covers what you are trying to see and Occupies most of the page are easier to unintentionally commit when the screen size is limited. Because of this, extra care must be taken when deciding where and how often to place ads on mobile apps and websites. Conclusion Ads represent a point of conflict between business needs and user needs. To minimize their impact on user experience, they need to take only a small fraction of the page area and be placed strategically so that they do not create false floors and do not stop people from discovering additional page content. Share this article: Twitter | LinkedIn | Google+ | Email Learn More Research Reports User Experience for Mobile Applications an Staples.com listed the optional passwords fields in a section titled Optional Information. That heading was in close proximity to the password fields, which only appeared if a user selected the Create an account and make your next checkout easy option. Both these factors helped reinforce that the fields were optional. Simple and Optional Rather than forcing users to register before checking out, provide the option to register within the checkout process by presenting optional fields for the user to enter a password. This puts users in control and allows them to decide if it is worthwhile to register or not. In our e-commerce research, we saw users who had previously complained about forced registration happily register for sites where registration was limited to the option of creating a password in the purchase process. Forcing registration causes lost sales. Some users will leave the site, others will struggle with registration. It is common for sites that add guest checkout to immediately realize increased sales. It is a simple way to improve usability and encourage purchasing. Share this article: Twitter | LinkedIn | Google+ | Email The Bleacher Report homepage included stories from various content areas, allowing quick access to sections without relying on site navigation. On Interior Pages Interior pages can provide navigation other than the main hamburger navigation as well, leading users to additional or related resources or other important areas of content. In-line links, or links that appear within text, can move users to supporting or related information. Lists of related links within or adjacent to content can also aid navigation without users needing to access the hamburger menu. Such links can also direct users to other types of content, such as associated slideshows, video clips, or blogs. An article on the American Academy of Allergy, Asthma and Immunology site included many in-line links to lead users to additional information. The American Society of Association Executives’ site included related links at the end of stories, leading users to other articles people read as well as to suggested content. Information about the cast of the show Graceland on the USA Network site was followed by a video recap and a link leading to full episodes of the show. Another approach is the inclusion of a highly visible search. If the search tool is strong enough, presenting it prominently in the design allows users to use it as an alternative to navigation. (Though search can’t be the only solution to users’ content discovery problem.) Loft.com included a visible search box across all pages of the site, allowing users to quickly enter a query and find items of interest. Bottom of the Page If all else fails, links in or near the footer can give immediate access to key content to those users who scroll to the bottom of the page. Repeating the main site navigation in the footer allows users who reach the bottom of the page to have quick access to navigation, but also exposes the site navigation to those who don't explore the hamburger menu. Lumina Foundation included links to key areas, including What You Can Do, What Needs to be Redesigned, and Facts & Figures, at the bottom of the page. Samsung.com repeated their main site navigation in the footer of the page. Supporting Navigation None of these methods are unique to mobile design or new to website design. In fact, many simply support how users often navigate content and functionality. However, in the realm of mobile designs that hide navigational options behind a hamburger menu, they also act to support users who may not locate or use the primary method of navigating the site. Share this article: Twitter | LinkedIn | Google+ | Email In UX design, competitive research measures the experience of a product in comparison to its direct and indirect competitors. This work can help designers identify problem areas, develop new insights and inspirations, and plan for a vision that showcases best practices. For example, Userzoom conducted a benchmark study between Priceline and Kayak to compare the mobile experience of obtaining hotel information. By having participants attempt to find a specific hotel in San Francisco, the team at Userzoom was able to determine the strengths and weaknesses of both products, and could then identify ways to provide what the others lacked. CONSIDER THE USER JOURNEY An important aspect of a building’s success is easy access to the site. As I mentioned earlier, part of Westgate Mall’s success could be attributed to the fact that it’s the only mall with direct routes to major transportation ports. With respect to the competition, easier access to the retail space ensures that users get to Westgate Mall first. In the larger scheme of things, designing delightful connectivity not only contributes to a business’ success, but also adds to the vitality in a neighborhood. An excellent example is the beautiful and functional linear High Line park in Manhattan. The park connects three neighborhoods on Manhattan’s West Side: the Meatpacking District, West Chelsea and Hell’s Kitchen. It’s essentially a walkway boasting views of the Hudson River and Midtown Manhattan, alongside spaces for art programs and gardens. It’s certainly changed its environment—employees of a pizza shop located by the park report that business has doubled twice in the past 2 years. In UX design, designing delightful connectivity means considering the journey—sometimes by driving organic traffic to the site, other times by designing a delightful onboarding experience. Learning the user’s journey ensures the product teams better understand their users, which then allows for a more persuasive, attractive design. Once users arrive to a product’s landing page, a good onboarding process could drive growth in a few ways. Onboarding is like approaching the entrance of a building. There are a few ways designers can make this walk as pleasant as possible and make a great first impression. One of the most common approaches is the “joyriding approach” where the user is walked through the features of a product. When executed beautifully, there is clarity from the get-go. Read about some other onboarding methods in MC Cook’s article, UX Flows: How to Turn Onboarding into an Amazing First Date with Your User. MOVING FORWARD Architects are also experience designers. The considerations and steps that architects take before going into designing ensure they are addressing the target users’ needs. Unlike in UX design, many of these steps are mandatory and regulated by authorities. But that’s no reason for UX designers to slack. Great design in both architecture and UX design boils down to having deep empathy and sensitivity for users. An architect is an agent of the client and the public; he or she needs to incorporate delightful user experiences while achieving business goals. For new projects, UX designers should consider the following: Relentlessly attempt to understand the product’s context. This could mean traveling to where the problem is and living it before committing on a design solution. Simplify. Be clear on the product’s main intention. Reducing confusion is one of the first things UX designers can do to ensure good UX. Conduct competitive analysis. Userzoom has an excellent article, Competitive UX Benchmarking, on how to conduct UX benchmarking. Make it fun! Just like in real life, people like to engage in fun and positive experiences.