ux

The Freelance Studio Denver, Co. User Experience Agency Mystical guidelines for creating great user experiences by Tal Bloom March 3rd, 2015 10 Comments The Jewish Torah teaches that the Creator created our world through ten utterances–for example, “let there be light.” The Jewish mystical tradition explains that these utterances correspond with ten stages in the process of creation. Every creative process in the world ultimately follows this progression, because it is really a part of the continual unfolding of the world itself, in which we are co-creators. This article aims to present an overview of the mystical process of creation and principal of co-creation and to illustrate how it can guide bringing digital product ideas into reality–although it’s easy enough to see how this could translate to other products and services–in a way that ensures a great user experience, and makes our creative process more natural and outcomes more fruitful. And a note as you read: In Jewish mysticism, the pronoun “He” is used when referring to the transcendent aspect of the Creator that is the source of creation, and “She” is used when referring to the imminent aspect that pervades creation, because they are characterized by giving and receiving, respectively. Because this article discusses the relationship of the transcendent aspect, the masculine pronoun has been used. The process of creation Ten stages, four realms Ten stages, four realms The order of creation The ten stages in the process of creation progressively create four realms. Three triads create three spiritual realms, and the tenth stage creates our tangible reality, which is the culmination of creation. It is understood that creation becomes increasingly defined and tangible as the creative power flows from one realm to the next. When we participate in creation, our efforts naturally follow the same progression. The four realms are traditionally referred to by Hebrew terms, so to make things easier I’ll refer to them using a designer’s day-to-day terms–ideation, design, implementation, and operation. Before we dive in though, one more thing to note is that within each realm there is a three-stage pattern whereby the creation first becomes revealed, then delineated, and finally consolidated in a state of equilibrium. Hang in there, you’ll shortly see what this means. The realm of ideation In the beginning there was only the Creator, alone. In the first three stages of creation, He simply created the possibility for a creation. This corresponds with the generation of business ideas. Just as before there was anything else it had to arise in the Creator’s mind to create the world, so too, the starting point of all products and services is the emergence of an idea–a simple and common example of which is “a digital channel will help our customers connect with us.” Next, the seed sprouts a series of details to define it. In creation, the details included the fact that creation will be limited and that there is an order to its unfolding. In business, the idea undergoes an extrapolation to define its reach and scope. For example, “the digital channel will need product information, a shopping cart, a customer database, and a social function for customers’ reviews.” The third stage in the process of creation is the preparation for bridging the gap between the abstract realm of potential where the Creator is still effectively alone, with a new reality of seemingly separate creations. Correspondingly, in business the third step requires bringing the idea from a place of theory to a point that it can be shared with others, such as presenting to decision makers and stakeholders, or briefing agents and consultants. The realm of design Now that it’s possible to distinguish between the Creator and His creation, the next three stages serve to coalesce the homogenous creation into spiritual templates. This corresponds with the conceptual design of how the business idea may be realized. The first stage in this realm is an expression of the Creator’s kindness, as He indiscriminately bestows life to all of creation. Correspondingly, the design process begins with telling the end-to-end story of the idea, from the user discovering the new product or service through to their consummate pleasure in using it, without our being too concerned with practical considerations. This could be captured in business process diagrams, but human-centred user journey maps or storyboards have proven more natural. Next, the Creator expressed His attribute of judgement to establish the boundaries of His evolving creations. In business, we begin addressing practical considerations, such as time, budget, and technical constraints to define the boundaries of the concept. This generally involves analyzing the desired story to establish the finite set of practical requirements for realizing it. For digital products, the requirements are often closely followed by a business case, an information architecture, and a system architecture. As mentioned, the third stage is where a consolidated state of equilibrium is reached to form the output of the realm. In creation, mystics describe the culmination of this realm as being sublime angels who are only identified by their function–for example to heal or to enact justice–and consider them to be the templates for these attributes, as they become manifest in the lower beings. Similarly, we consolidate the business idea by sketching or prototyping how we envision it will become manifest. Typically we deliver low-fidelity interaction, product or service designs, which are often accompanied by a business plan and functional and technical specifications. The realm of implementation Using the spiritual templates, the next three stages serve to create individualized spiritual beings. This corresponds with implementing our conceptual designs into an actual digital product. In creation, the life-force is now apportioned according to the ability of the created being to receive, similar to pouring hot liquid material into a statue mould. Correspondingly, we apply branding, colors, and shapes to bring the blueprint to life–the result being high-fidelity visual designs of what the digital product will actually look and feel like. Next, the life-force solidifies to form the individual spiritual being, similar to when the hot liquid cools and the mould can be removed. This corresponds with slicing the visual designs to develop the front-end, developing the database, and integrating the back-end functionality. The culmination of this realm is often depicted in artwork and poetry as being angels that have human form, wings, and individual names. They are, however, still spiritual beings, not physical beings like us. Correspondingly, at the final stage of implementation, there exists a fully functional digital product…in a staging environment. The realm of operation The culmination of the process of creation is our tangible reality, which is comprised of physical matter and its infused life-force (part of which is our physical bodies infused with our souls). Bridging the infinitely large gap between the spiritual and physical realms is often considered the most profound step in the process of creation, yet paradoxically it’s simultaneously the smallest conceptual distance from a spiritual being that looks and functions like a physical being, and an actual physical being. Correspondingly, launching a digital product into the live public domain can be the most daunting and exciting moment, yet it can be as easy as pressing a button to redirect the domain to point to the new web-server or to release the app on the app store. At this point the Creator is said to have rested, observing His creation with pleasure. Similarly, it can be very satisfying to step back at this point and soak in how our initial seed of an idea has finally evolved into an actual operational reality–which will hopefully fulfill our business goals! The principle of co-creation User feedback By now we can appreciate why there seems to be a natural and logical sequence for the activities typically involved in creating a new product or service. Jewish mysticism, however, unequivocally adds that we are co-creators with the Creator. That is: We, created beings, are able to influence what the end product of creation will be, just like users can influence our products and services when we engage with them during the creation process. Jewish mysticism relates that the Creator consults with His retinue of angels to make decisions regarding His creation. This corresponds with our soliciting user input to validate the direction of our creative efforts, such as: during ideation, conducting research to ensure the ideas indeed meet users’ needs and desires; during design, conducting user validation to ensure the sensibility and completeness of the story, correlation of the framework with users’ mental models, and usability of the blueprints; and during implementation, conducting user testing to help smooth out any remaining difficulties or doubts in the user experience. We are also taught that the Creator is monitoring human activity and makes adjustments accordingly. Similarly, at the stage of operation, it’s good practice to steer the finished product to better achieve business goals by monitoring the usage analytics. Finally, we’re taught that the Creator desires our prayers beseeching Him to change our reality, similar to how we’ve come to understand the most potent consideration is user feedback on the fully operational product. Continual improvement On the surface it still seems as though the process of creation is a cascading “waterfall,” but we see that our world is constantly evolving–for example, more efficient transport, more sophisticated communication, more effective health maintenance–seemingly through our learning from experience to improve our efforts. In a simple sense, this can be likened to the “agile” feedback loop where learnings from one round of production are used to influence and improve our approach to the next round. Jewish mysticism teaches, however, that under the surface our genuine efforts below arouse a magnanimous bestowal of ever-increasingly refined life-force into the creation. This can be understood as similar to a pleased business owner allocating increasingly more budget to continue work on an evidently improving product or service. These days, it is becoming more common for businesses to implement a continuous improvement program, whereby an ongoing budget is allocated for this purpose. The paradigm of continually looking for ways to more effectively meet user needs and achieve business goals–such that they can be fed back into the process for fleshing out the idea, designing, and then implementing–perfectly parallels the reality that we are co-creating an ever more refined world using ever-deepening resources. But how can a compounding improvement continue indefinitely? Jewish mysticism explains that as the unlimited creative power becomes exponentially more revealed within our limited reality, there will eventually come a grand crescendo with the revelation of the Creator’s essential being, which is neither unlimited or limited, but both simultaneously. This will be experienced as the messianic era–“In that era, there will be neither famine or war, envy or competition, for good will flow in abundance and all the delights will be freely available as dust. The occupation of the entire world will be solely to know their Creator.”1 Users front of mind at every stage Before we get there, however, it can be seen from the above how every stage of the creative process has a unique effect on the user experience of the end product or service, such that it would bode well if we strive to ensure: The initial business idea meets an actual need or fulfils an actual desire of our users The concept is designed to function according to the user’s understanding and expectations The product or service is implemented in a way that is appealing and easy to use The operating product or service is continually improved to meet users’ evolving needs By knowing each stage and each skill set’s proper place in the sequence and how to incorporate our learnings and user sentiment, we can achieve a more natural creative process for ourselves, our peers, and our clients and ensure the end product or service offers the best possible user experience, indefinitely. Creative activity Co-creation activity Output Ideation Innovation brainstorms Idea prioritization User research User pain points Idea pitch/brief Design Business analysis Requirements analysis Card sorting Interaction design User focus groups User interviews Tree testing User walkthroughs User journeys/storyboards Product requirements Information architecture Wireframes/prototype Implementation Visual design Front-end development Back-end development Content preparation User testing Staging product Operation Product launch Product maintenance Analytics User feedback/surveys Live product Ideas for improvement References and further reading Sefer Likutei Amarim, “The Tanya”, by the Alter Rebbe, Rabbi Schneur Zalman of Liadi Sefer HaMaamorim Melukatim, by the Lubavitcher Rebbe, Rabbi Menachem Mendel Schneerson Basi L’Gani, by the Rebbe Rayatz, Rabbi Yosef Yitzchak Shneerson. Beshaah Shehikdimu 5672, “Ayin Beis”, by the Rebbe Rashab, Rabbi Shalom DovBer Schneersohn Mishneh Torah, Sefer Shoftim, Melachim uMilchamot, Chapter 12, Halacha 5, by the Rambam, Rabbi Moses ben Maimon Share this: EmailTwitter183RedditLinkedIn141Facebook139Google Posted in Design Principles, Process and Methods | 10 Comments » 10 Comments Jonathan March 3, 2015 at 11:39 am Endearingly bonkers. Mystical guidelines for creating great user exp... March 4, 2015 a A Beginner’s Guide to Web Site Optimization—Part 3 Communication and team and tool selection by Charles Shimooka March 10th, 2015 2 Comments Web site optimization has become an essential capability in today’s conversion-driven web teams. In Part 1 of this series, we introduced the topic as well as discussed key goals and philosophies. In Part 2, I presented a detailed and customizable process. In this final article, we’ll cover communication planning and how to select the appropriate team and tools to do the job. Communication For many organizations, communicating the status of your optimization tests is an essential practice. Imagine if your team has just launched an A/B test on your company’s homepage, only to learn that another team had just released new code the previous day that had changed the homepage design entirely. Or imagine if a customer support agent was trying to help users through the website’s forgot password flow, unaware that the customer was seeing a different version due to an A/B test that your team was running. To avoid these types of problems, I recommend a three-step communication program: Pre-test notification This is an email announcing that your team has selected a certain page/section of the site to target for its next optimization test and that if anyone has any concerns, they had better voice them immediately, before your team starts working on it. Give folks a day or two to respond. The email should include: Name/brief description of the test Goals Affected pages Expected launch date Link to the task or project plan where others can track the status of the test. Here’s a sample pre-test notification. Pre-launch notification This email is sent out a day or two before a new experiment launches. It includes all of the information from the Pre-Test Notification email, plus: Expected test duration Some optimization tools create a unique dashboard page in which interested parties can monitor the results of the test in real-time. If your tool does this, you can include the link here. Any other details that you care to mention, such as variations, traffic allocation, etc… Here’s a sample pre-launch email. Test results After the test has run its course and you’ve compiled the results into the Optimization Test Results document, send out a final email to communicate this. If you have a new winner, be sure to brag about it a little in the email. Other details may include: Brief discussion A few specifics, such as conversion rates, traffic and confidence intervals Next steps Here’s a sample test results email. Team size and selection As is true with many things, good people are the most important aspect of a successful optimization program. Find competent people with curious minds who take pride in their work – this will be far more valuable than investment in any optimization tool or adherence to specific processes. The following are recommendations for organizations of varying team sizes. One person It is difficult for one person to perform optimization well unless they are dedicated full-time to the job. If your organization can only cough-up one resource, I would select either a web analytics resource with an eye for design, or a data-centric UX designer. For the latter profile, I don’t mean the type of designer who studied fine art and is only comfortable using Photoshop, but rather the type who likes wireframes, has poked around an analytics tool on their own, and is good with numbers. This person will also have to be resourceful and persuasive, since they will almost certainly have to borrow time and collaborate with others to complete the necessary work. Two to three people With a team size of three people, you are starting to get into the comfort zone. To the UX designer and web/data analytics roles, I would add either a visual designer or a front-end developer. Ideally, some of the team members would have multiple or overlapping competencies. The team will probably still have to borrow time from other resources, such as back-end developers and QA. Five people A team that is lucky enough to have five dedicated optimization resources has the potential to be completely autonomous. If your organization places such a high value on optimization, they may have also invested accordingly in sophisticated products or strategies for the job, such as complex testing software, data warehouses, etc… If so, then you’ll need folks who are specifically adept at these tools, broadening your potential team to roles such as data engineers, back-end developers, content managers, project managers, or dedicated QA resources. A team of five would ideally have some overlap with some of the skill-sets. Tool selection The optimization market is hot and tool selection may seem complicated at first. The good news is that broader interest and increased competition is fueling an all-out arms race towards simpler, more user-friendly interfaces designed for non-technical folks. Data analysis and segmentation features also seem to be evolving rapidly. My main advice if you’re new to optimization is to start small. Spend a year honing your optimization program and after you’ve proven your value, you can easily graduate to the more sophisticated (and expensive) tools. Possibly by the time you’re ready, your existing tool will have advanced to keep up with your needs. Also realize that many of the cheaper tools can do the job perfectly well for most organizations, and that some organizations with the high-powered tools are not using them to their fullest capabilities. A somewhat dated Forrester Research report from February 2013 assesses some of the big hitters, but notably absent are Visual Website Optimizer (VWO) and, for very low end, Google’s free Content Experiments tool. Conversion Rate Experts keeps an up-to-date comparison table listing virtually all of today’s popular testing tools, but it only rates them along a few specific attributes. I performed my own assessment earlier this year and here is a short list of my favorites: Entry-level Visual Website Optimizer (VWO) Optimizely Google Content Experiments Advanced Maxymiser Monetate Adobe Test & Target Here are a few factors to consider when deciding on products: Basic features Intuitive user interface Luckily, most tools now have simple, WYSIWYG type of interfaces that allow you to directly manipulate your site content when creating test variations. You can edit text, change styles, move elements around, and save these changes into a new test variation. Some products have better implementations than others, so be sure to try out a few to find the best match for your team. Targeting Targeting allows you to specify which site visitors are allowed to see your tests. Almost all tools allow you to target site visitors based on basic attributes that can be inferred from their browser, IP address, or session. These attributes may include operating system, browser type/version, geographical location, day of week, time of day, traffic source (direct vs. organic vs. referral), and first time vs. returning visitor. More advanced tools also allow you to target individuals based on attributes (variables) that you define and programmatically place in your users’ browser sessions, cookies, or URLs. This allows you to start targeting traffic based on your organization’s own customer data. The most advanced tools allow you to import custom data directly into the tool’s database, giving you direct access to these attributes through their user interface, not only for targeting, but also for segmented analysis. Analysis and reporting Tools vary widely in their analysis and reporting capabilities, with the more powerful tools generally increasing in segmentation functionality. The simplest tools only allow you to view test results compared against a single dimension, for example, you can see how your test performed on visitors with mobile vs. desktop systems. The majority of tools now allow you to perform more complicated analyses along multiple dimensions and customized user segments. For example, you might be interested in seeing how your test performed with visitors on mobile platforms, segmented by organic vs. paid vs. direct traffic. Keep in mind that as your user segments become more specific, your optimization tool must rely on fewer and fewer data points to generate the results for each segment, thereby decreasing your confidence levels. Server response time Optimization tools work by adding a small snippet of code to your pages. When a user visits that page, the code snippet calls a server somewhere that returns instructions on which test variation to display to the user. Long server response times can delay page loading and the display of your variations, thereby affecting your conversions and reporting. When shopping around, be sure to inquire about how the tool will affect your site’s performance. The more advanced tools are deployed on multiple, load-balanced CDNs and may include contractual service level agreements that guarantee specific server response times. Customer support Most optimization vendors provide a combination of online and telephone support, with some of the expensive solutions offering in-person set-up, onboarding and training. Be sure inquire about customer support when determining costs. A trick I’ve used in the past to test a vendor’s level of service is to call the customer support lines at different times of the day and see how fast they pick up the phone. Price and cost structure Your budget may largely determine your optimization tool options as prices vary tremendously, from free (for some entry tools with limited features) to six-figure annual contracts that are negotiated based on website traffic and customer support levels (Maxymiser, Monetate and Test & Target fall into this latter category). Tools also vary in their pricing model, with some basing costs on the amount of website traffic and others charging more for increased features. My preference is towards the latter model, since the former is sometimes difficult to predict and provides a disincentive to perform more testing. Advanced features Integration with CMS/analytics/marketing platforms If you are married to a single Content Management System, analytics tool, or marketing platform, be sure to inquire from your vendor about how their tool will integrate. Some vendors advertise multi-channel solutions (the ability to leverage your customer profile data to optimize across websites, email, and possibly other channels, such as social media or SMS). Enterprise-level tools seem to be trending towards all-in-one solutions that include components such as CMS, marketing, ecommerce, analytics, and optimization (ie. Adobe’s Marketing Cloud or Oracle’s Commerce Experience Manager). But for smaller organizations, integration may simply mean the ability to manage the optimization tool’s javascript tags (used for implementation) across your site’s different pages. In these situations, basic tools such as Google Tag Manager or WordPress plugins may suffice. Automated segmentation and targeting Some of the advanced tools offer automated functionality that tries to analyze your site’s conversions and notify you of high-performing segments. These segments may be defined by any combination of recognizable attributes and thus, far more complicated than your team may be able to define on their own. For example, the tool might define one segment as female users on Windows platform, living in California, and who visited your site within the past 30 days. It might define a dozen or more of these complex micro-segments and even more impressively, allow you to automatically redirect all future traffic to the winning variations specific to each of these segments. If implemented well, this intelligent segmentation has tremendous potential for your overall site conversions. The largest downside is that it usually requires a lot of traffic to make accurate predictions. Automated segmentation is often an added cost to the base price of the optimization tool. If so, consider asking for a free trial period to evaluate the utility/practicality of this functionality before making the additional investment. Synchronous vs. asynchronous page loading Most tools recommend that you implement their services in an asynchronous fashion. In other words, that you allow the rest of your page’s HTML to load first before pinging their services and potentially loading one of the test variations that you created. The benefit of this approach is that your users won’t have to wait additional time before your control page starts to render in the browser. The drawback is that once the call to the optimization’s services is returned, then your users may see a page flicker as the control page is replaced by one of your test variations. This flickering effect, along with the additional time it takes to display the test variations, could potentially skew test results or cause surprise/confusion with your users. In contrast, synchronous page loading, which is recommended by some of the more advanced tools, makes the call to the optimization tool before the rest of the page loads. This ensures that your control group and variations are all displayed in the same relative amount of time, which should allow for more accurate test results. It also eliminates the page flicker effect inherent in asynchronous deployments. Conclusion By far, the most difficult step in any web site optimization program is the first one – the simple act of starting. With this in mind, I’ve tried to present a complete and practical guide on how to get you from this first step through to a mature program. Please feel free to send me your comments as well as your own experiences. Happy optimizing. Share this: EmailTwitter42RedditLinkedIn56Facebook25Google Posted in Discovery, Research, and Testing, Process and Metho Creativity Must Guide the Data-Driven Design Process by Rameet Chawla March 17th, 2015 8 Comments Collecting data about design is easy in the digital world. We no longer have to conduct in-person experiments to track pedestrians’ behavior in an airport terminal or the movement of eyeballs across a page. New digital technologies allow us to easily measure almost anything, and apps, social media platforms, websites, and email programs come with built-in tools to track data. And, as of late, data-driven design has become increasingly popular. As a designer, you no longer need to convince your clients of your design’s “elegance,” “simplicity,” or “beauty.” Instead of those subjective measures, you can give them data: click-through and abandonment rates, statistics on the number of installs, retention and referral counts, user paths, cohort analyses, A/B comparisons, and countless other analytical riches. After you’ve mesmerized your clients with numbers, you can draw a few graphs on a whiteboard and begin claiming causalities. Those bad numbers? They’re showing up because of what you told the client was wrong with the old design. And the good numbers? They’re showing up because of the new and improved design. But what if it’s not because of the design? What if it’s just a coincidence? There are two problems with the present trend toward data-driven design: using the wrong data, and using data at the wrong time. The problem with untested hypotheses Let’s say you go through a major digital redesign. Shortly after you launch the new look, the number of users hitting the “share” button increases significantly. That’s great news, and you’re ready to celebrate the fact that your new design was such a success. But what if the new design had nothing to do with it? You’re seeing a clear correlation—two seemingly related events that happened around the same time—but that does not prove that one caused the other. Steven D. Levitt and Stephen J. Dubner, the authors of “Freakonomics,” have built a media empire on exposing the difference between correlation and causation. My favorite example is their analysis of the “broken windows” campaign carried out by New York City Mayor Rudy Giuliani and Police Commissioner William Bratton. The campaign coincided with a drop in the city’s crime rate. The officials naturally took credit for making the city safer, but Levitt and Dubner make a very strong case that the crime rate declined for reasons other than their campaign. Raw data doesn’t offer up easy conclusions. Instead, look at your data as a generator of promising hypotheses that must be tested. Is your newly implemented user flow the cause of a spike in conversion rates? It might be, but the only way you’ll know is by conducting an A/B test that isolates that single variable. Otherwise, you’re really just guessing, and all that data you have showing the spike doesn’t change that. Data can’t direct innovation Unfortunately, many designers are relying on data instead of creativity. The problem with using numbers to guide innovation is that users typically don’t know what they want, and no amount of data will tell you what they want. Instead of relying on data from the outset, you have to create something and give it to users before they can discover that they want it. Steve Jobs was a big advocate of this method. He didn’t design devices and operating systems by polling users or hosting focus groups. He innovated and created, and once users saw what he and his team had produced, they fell in love with a product they hadn’t even known they wanted. Data won’t tell you what to do during the design process. Innovation and creativity have to happen before data collection, not after. Data is best used for testing and validation. Product development and design is a cyclical process. During the innovation phase, creativity is often based on user experience and artistry — characteristics that aren’t meant to be quantified on a spreadsheet. Once a product is released, it’s time to start collecting data. Perhaps the data will reveal a broken step in the user flow. That’s good information because it directs your attention to the problem. But the data won’t tell you how to fix the problem. You have to innovate again, then test to see if you’ve finally fixed what was broken. Ultimately, data and analysis should be part of the design process. We can’t afford to rely on our instincts alone. And with the wealth of data available in the digital domain, we don’t have to. The unquantifiable riches of the creative process still have to lead design, but applying the right data at the right time is just as important to the future of design. Share this: EmailTwitter225RedditLinkedIn270Facebook41Google Posted in Design Principles, Discovery, Research, and Testing | 8 Comments » 8 Comments Rick March 17, 2015 at 2:54 pm Kind of playing both sides there – do user testing before creating a product, but users really don’t know what they want. Steve Jobs went off his gut, so be creative and let the analytics after release see where issues are. I get it is a tough, non black and white, kind of thing. Maybe building out the rationale more of testing as an influence in decision making, but not a mandate in what needs to be done, would relate more to both UX and non-UX professionals. Jonathan March 17, 2015 at 6:01 pm I’m not sure that any serious designer would say that just because the stats got better after a re-design then it means the improvement was due to the design change alone. But I’m willing to believe some might. They’ll be ex-designers pretty soon so it hardly matters much. Be that as it may, I’m not sure what your point really is here. People who don’t understand probability and statistics shouldn’t be using that in the design process. That’s obvious, isn’t it? You may as well write an article about how blind people should’t drive cars. I think in general though, all designers need to understand is that unless they personally know how to calculate a p-value from test data, then they should just ask an analyst what they think before they make any claims about it. Then after that you need to bear in mind that data can only tell you what happened, not why. Chris March 19, 2015 at 6:48 am I agree with Jonathan in that I’m not really sure of the point, either. And I especially don’t agree with the premise that we have at our fingertips all the data sources we need through web analytics and numbers, and this is all about improper understanding of causation vs. correlation. Of course such methods will not show causation; we have no idea WHY users are doing what they are doing. It’s common sense these are unreliable, but not because of how people are interpreting them – because of the type of data people are expecting from such stuff. So, isn’t that a bit like “throwing the baby out with the bathwater” when it comes to getting user data? What about reexaming the tried and true methods of UCD (user-centered design?) If we do that, it doesn’t really jive with this notion to just get all creative and wait until the product is released to test – reallly?? Getting user data does not mean you are not using your innovation chops. It is a matter of knowing when to get creative and when to get data to validate your ideas – it’s a juggling act and an important one if you want success. And user “research” doesn’t have to be a bunch of complicated methods – think “lean”. As Jakob Nielsen has always said, test simple prototypes on just 3-5 users, and if done properly (using think out loud, keeping questioning open, not leading, all best done with a skilled moderator) you will get a wealth of information – and I would add, much faster than creating a bunch of magical designs in the dark which then require rework later in development if not accepted. And pretty risky to do without – prior to release – in today’s customer-driven, usability-focused competitive landscape. Steve Jobs is touted as the “hero” of innovation – but let’s be clear what that means, and not get “correlation” wrong here. :) Innovation in that context was inventing brand new things for mass consumption. So, in a way, it was valid that the whole market was his test bed. But let’s not confuse that notion of innovation the life cycle of a typical product. 99% of the time these are not “invented” products – they are offshoots of some other familiar functionality. Testing after release is just counterintuitive to user-centered design and is one of the biggest impediments to success in a world demanding simplicity. We just can’t keep singing the praises of user-centered design methods, and then completely ignore them. And finally – I cannot let this the focus group reference slide. Focus groups is a term bandied about with user research – but let’s be clear – a focus group might be OK for coming up with a brand, but it has nothing to do with getting interface and interaction data. Becki March 30, 2015 at 2:41 pm I think this article is very valuable — for non-experts. I’ve seen plenty of people claim that “the analytics says this design wins, so it must be the right one” in situations that simply are not that black-and-white. We can’t get teams to support user-centered design if they believe that A/B testing on whole-site redesigns is the best determinant for success. Jeff March 30, 2015 at 3:11 pm How about calling it “Data-Driven Refinement” instead of “Data-Driven Design”? jrosell April 9, 2015 at 9:54 am Some days before this post was published i posted in my blog about the need of creativity in optimization process. (in catalan) http://elnostreraco.com/blog/cro/necessitat-desforc-creatiu-en-processos-doptimitzacio/ CL Bridges April 16, 2015 at 8:10 pm There’s an ethical discussion here. Critiques of mHealth apps note various challenges and research gaps within industry user requirements, of particular concern are ethical issues where technology is favored over interpersonal supports, potentially reducing access to quality health supports for people at-risk, you know like old people and kids. That’s good cause for considering industry policy within data design to be informed about your users needs. Innovations that actually solves this problem will be focused on how real people use tech, not on how tech can inform us about some people. Intent to Solve by Laura Klein April 14th, 2015 8 Comments When we’re building products for people, designers often do something called “needs finding” which translates roughly into “looking for problems in users’ lives that we can solve.” But there’s a problem with this. It’s a widely held belief that, if a company can find a problem that is bad enough, people will buy a product that solves it. That’s often true. But sometimes it isn’t. And when it isn’t true, that’s when really well designed, well intentioned products can fail to find a market. When isn’t it true? When I tell product managers and entrepreneurs that their dream customers might not buy this product—even if the product solves a problem—sometimes they get angry. “No!” the managers and entrepreneurs yell. “This is a serious problem for my users! They struggle with this thing every day! They told us this. We saw them struggling with it. We did our research!” But think about all of the problems that you encounter in a day. Some of them are almost entirely in your control, like deciding how to feed yourself. Some of them are largely out of your control, like sitting in traffic on the way to work. Some of them are almost entirely out of your control, like certain types of health problems. So, there you are. Sitting in traffic, with a migraine, and trying to figure out what you want for lunch. Which problem do you solve? Do you solve the worst one? The one that happens every day? The easiest one? Do you give up entirely and just turn around and go back to bed? The only thing that most people won’t do is to solve all of them all at once. In other words, every day, humans use their limited emotional resources to solve specific problems while they choose to live with other problems or put off solving them until another day. This tendency of humans to not always solve their worst problems is incredibly important for you to recognize when you’re doing early user research because it has implications for your product. Just because you’ve identified a serious problem doesn’t mean that anybody will pay you to solve it for them. And remember, when we’re talking about “payment,” we’re not necessarily just talking about money. Free products are often only free if your time has no value. Sure, some products cost money, but people also pay with their time, attention, and effort. If you’re asking somebody to spend hours learning how to use your product, you’ve just charged them a fairly high hourly rate for your free product. You’d better make it worth their while. You can do something about this So, how can you separate out the problems that people will pay you to solve from the problems they won’t? Sure, intensity, frequency, and difficulty of solving the problem can influence whether a user will try to solve it. But there’s an even more important thing to look for: Intent to solve. For example, if you’re a gym owner, and you talk to three women, all of whom say they want to get into better shape, which of the following sounds like the person most likely to join your gym? a) I’m in terrible shape, and it’s really affecting my health. I’ve never joined a gym, but I’m definitely going to do it this year. b) I really love running and swimming at my neighborhood pool, and I consider myself to be in pretty good shape. But I’m not a fan of gyms. c) I’m in ok shape. I’ve belonged to several gyms in the past, but I don’t currently belong to one. Did you say C? You should have. Sure, A specifically states that she is going to join a gym and her perceived problem is larger than the other two, but we’ve all declared that we’re absolutely going to do something this year and then not done it. That’s what New Year’s resolutions are. B seems perfectly happy with her routine and doesn’t really have the problem that we’re solving. C, on the other hand, shows both motivation and a past intent to solve the problem in the way that you, as a gym owner, would like. In other words, she has previously sought ways to get into better shape and has even spent money on gyms. She has shown an intent to solve in the past which is an excellent predictor of her behavior in the future. There is one notable exception But hang on. I know what you’re thinking. You’re thinking “but what about Twitter?” Or maybe Snapchat, or WhatsApp, or a dozen other products that solve problems that people didn’t know they had. It’s true, there are products that don’t solve an obvious problem. Things like Twitter create new behaviors (sort of) and don’t seem to solve anything that anybody ever intended to solve before Twitter came along. Now, we could argue all day about whether or not Twitter solves a specific problem or perhaps many problems—or even creates problems. The important thing to point out here is that, when you’re creating a product that is truly going to create a new behavior, it is just much, much harder to validate before you build. That’s doubly true if the product relies on network effects, like Twitter does. Honestly, there may simply be no way to tell if something like Twitter is going to take off before you build anything at all. That’s why, although we do have things like Twitter, we also have tens of thousands of social networking sites and apps that nobody’s ever heard of. What to look for If your product does solve a problem that people likely knows exists, though, there’s a very useful technique for figuring out if it’s a good one to solve. We’ll assume for the moment that you’re already doing user research and customer development. You’re building something, so obviously you’re talking to people who you think might be in the market for such a product—or at least people who have the problem that your product solves. Just talking to people though, isn’t enough; you have to ask them the right questions. Instead of just asking them questions designed to confirm whether or not they have a specific problem, you need to ask questions designed to find out if they have already shown an “intent to solve” that problem. What you’re looking for is not just a problem—in the case of the gym owner, a potential user wanting to get into better shape—you’re also looking for a previous behavior of trying to solve the problem. Bonus points if they have spent money trying to solve the problem. When you find a serious problem that people have tried and failed to solve, you can generally count on their trying to solve it again in the future. Ideally, you want something that they’re actively searching for a solution to right now. If you want to convince somebody to join your gym, it’s much easier to start with somebody who already wants to join a gym. At that point, you’re being compared to all other gyms. You’re not being compared to literally everything else that the user could do with her money and time. Humans encounter all sorts of problems every day. Most, we just ignore or deal with. Only a few reach a level that we will spend our precious resources to solve. If you find a problem that is serious enough that people have already shown an intent to solve, it will be far easier to convince people to try your solution. If you think you have a brilliant idea for a product that creates a brand new form of user behavior and may or may not solve a particular problem, more power to you. It’s not impossible to make it work, but it’s significantly harder to get it adopted than the millions of things that solve real problems that people encounter every day. For the rest of you who want to make sure a problem really exists before you try to solve it, try evaluating your user’s intent to solve before you build anything. It’ll give you tremendous insight into whether or not your product will be adopted. Share this: EmailTwitter203RedditLinkedIn95Facebook51Google Posted in Uncategorized | 8 Comments » 8 Comments Kelly Moran April 15, 2015 at 4:39 pm Excellent point that not all problems require solutions (surely there must be a deeper meaning here). This is where observation comes in. Potential users/customers may state they have a problem, but has anyone seen them deal with it/attempt to solve it? Online Surveys On a Shoestring: Tips and Tricks by Gabriel Biller and Lada Gorlenko April 28th, 2015 6 Comments Design research has always been about qualitative techniques. Increasingly, our clients ask us to add a “quant part” to projects, often without much or any additional budget. Luckily for us, there are plenty of tools available to conduct online surveys, from simple ones like Google Forms and SurveyMonkey to more elaborate ones like Qualtrics and Key Survey. Whichever tool you choose, there are certain pitfalls in conducting quantitative research on a shoestring budget. Based on our own experience, we’ve compiled a set of tips and tricks to help avoid some common ones, as well as make your online survey more effective. We’ve organized our thoughts around three survey phases: writing questions, finding respondents, and cleaning up data. Writing questions Writing a good questionnaire is both art and science, and we strongly encourage you to learn how to do it. Most of our tips here are relevant to all surveys, but particularly important for the low-budget ones. Having respondents who are compensated only a little, if at all, makes the need for good survey writing practices even more important. Ask (dis)qualifying questions first A sacred rule of surveys is to not waste people’s time. If there are terminating criteria, gather those up front and disqualify respondents as quickly as you can if they do not meet the profile. It is also more sensitive to terminate them with a message “Thank you for your time, but we already have enough respondents like you” rather than “Sorry, but you do not qualify for this survey.” Keep it short Little compensation means that respondents will drop out at higher rates. Only focus on what is truly important to your research questions. Ask yourself how exactly the information you collect will contribute to your research. If the answer is “not sure,” don’t ask. For example, it’s common to ask about a level of education or income, but if comparing data across different levels of education or income is not essential to your analysis, don’t waste everyone’s time asking the questions. If your client insists on having “nice to know” answers, insist on allocating more budget to pay the respondents for extra work. Keep it simple Keep your target audience in mind and be a normal human being in framing your questions. Your client may insist on slipping in industry jargon and argue that “everyone knows what it is.” It is your job to make the survey speak the language of the respondents, not the client. For example, in a survey about cameras, we changed the industry term “lifelogging” to a longer, but simpler phrase “capturing daily routines, such as commute, meals, household activities, and social interactions.” Keep it engaging People in real life don’t casually say, “I am somewhat satisfied” or “the idea is appealing to me.” To make your survey not only simple but also engaging, consider using more natural language for response choices. For example, instead of using standard Likert-scale “strongly disagree” to “strongly agree” responses to the statement “This idea appeals to me” in a concept testing survey, we offered a scale “No, thanks” – “Meh” – “It’s okay” – “It’s pretty cool” – “It’s amazing.” We don’t know for sure if our respondents found this approach more engaging (we certainly hope so), but our client showed a deeper emotional response to the results. Finding respondents Online survey tools differ in how much help they provide with recruiting respondents, but most common tools will assist in finding the sample you need, if the profile is relatively generic or simple. For true “next to nothing” surveys, we’ve used Amazon Mechanical Turk (mTurk), SurveyMonkey Audience, and our own social networks for recruiting. Be aware of quality Cheap recruiting may easily result in low quality data. While low-budget surveys will always be vulnerable to quality concerns, there are mechanisms to ensure that you keep your quality bar high. First of all, know what motivates your respondents. Amazon mTurk commonly pays $1 for the so-called “Human Intelligence Task” that may include taking an entire survey. In other words, someone is earning as little as $4 an hour if they complete four 15-minute surveys. As such, some mTurk Workers may try to cheat the system and complete multiple surveys for which they may not be qualified. SurveyMonkey, on the other hand, claims that their Audience service delivers better quality, since the respondents are not motivated by money. Instead of compensating respondents, SurveyMonkey makes a small donation to the charity of their choice, thus lowering the risk of people being motivated to cheat for money. Use social media If you don’t need thousands of respondents and your sample is pretty generic, the best resource can be your social network. For surveys with fewer than 300 respondents, we’ve had great success with tapping into our collective social network of Artefact’s members, friends, and family. Write a request and ask your colleagues to post it on their networks. Of course, volunteers still need to match the profile. When we send an announcement, we include a very brief description of who we look for and send volunteers to a qualifying survey. This approach costs little but yields high-quality results. We don’t pay our social connections for surveys, but many will be motivated to help a friend and will be very excited to hear about the outcomes. Share with them what you can as a “thank you” token. For example, we used social network recruiting in early stages of Purple development. When we revealed the product months later, we posted a “thank you” link to the article to our social networks. Surprisingly even for us, many remembered the survey they took and were grateful to see the outcomes of their contribution. Over-recruit If you are trying to hit a certain sample size for “good” data, you need to over-recruit to remove the “bad” data. No survey is perfect and all can benefit from over-recruiting, but it’s almost a must for low-budget surveys. There are no rules, but we suggest over-recruiting by at least 20% to hit the sample size you need at the end. Since the whole survey costs you little, over-recruiting will equally cost little. Cleaning up data Cleaning up your data is another essential step of any survey that is particularly important for the one on a tight budget. A few simple tricks can increase the quality of responses, particularly if you use public recruiting resources. When choosing a survey tool, check what mechanisms are available for you to clean up your data. Throw out duplicates As mentioned earlier, some people may be motivated to complete the same survey multiple times and even under multiple profiles. We’ve spotted this when working with mTurk respondents by checking their Worker IDs. We had multiple cases when the same IDs were used to complete a survey multiple times. We ended up throwing away all responses associated with the “faulty IDs” and gained more confidence in our data at the end. Check response time With SurveyMonkey, you can calculate the time spent on the survey using the StartTime and EndTime data. We benchmarked the average time of the survey by piloting the survey in the office. This can be used as a pretty robust fool-proof mechanism. If the benchmark time is eight minutes and you have surveys completed in three, you may question how carefully respondents were reading the questions. We flag such outliers as suspect and don’t include them in our analysis. Add a dummy question Dummy questions help filter out the respondent quickly answering survey questions at random. Dummy questions require the respondent to read carefully and then respond. People who click and type at random might answer it correctly, but it is unlikely. If the answer is incorrect, this is another flag we use to mark a respondent’s data as suspect. Low-budget surveys are challenging, but not necessarily bad, and with a few tricks you can make them much more robust. If they are used as an indicative, rather than definitive, mechanism to supplement other design research activities, they can bring “good enough” insights to a project. Educate your clients about the pros and cons of low-budget surveys and help them make a decision whether or not they want to invest more to get greater confidence in the quantitative results. Setting these expectations up front is critical for the client, but you never know, it could also be a good tool for negotiating a higher survey budget to begin with! Share this: EmailTwitter83RedditLinkedIn57Facebook32Google Posted in Discovery, Research, and Testing, Learning From Others, Methods | 6 Comments » 6 Comments Weekly Roundup of Web Design and Development Resources: May 1, 2015 May 1, 2015 at 4:38 pm […] Online Surveys On a Shoestring: Tips and Tricks: While Amazon Mechanical Turk (mTurk) and SurveyMonkey Audience are great for low-budget surveys, be aware of the drawbacks and plan accordingly says Gabriel Biller and Lada Gorlenko. Check response time, add a dummy question, and throw out duplicates. […] Mark May 6, 2015 at 10:35 am Don’t you think it is rude to say “Thank you for your time, but we already have enough respondents like you” to participant? It sounds like “You are worth nothing for us. Get lost” Instead I would say “Thank you for you time. If selected, we will get in touch with you”. That is more polite I think. Дайджест продуктового дизайна, апрель 2015 | Юрий Ветров об интерфейсах May 12, 2015 at 11:55 am […] Памятка Gabriel Biller и Lada Gorlenko о проведении дешевых по…. Что делать в ситуации наверняка некачественной базы респондентов. […] Surveys and the quantitative edge | masters digital May 12, 2015 at 6:57 pm […] There are tools — some elaborate, some quite simple — that can help you conduct quantitative research on a shoestring budget. See these tips and tricks for getting the most out of surveys. […] Nancy June 11, 2015 at 8:39 pm Great tip about making the labels on L Mentoring as an Investment by Chris Poteet May 5th, 2015 2 Comments Have you ever asked for an update on a project you’d invested a great deal of time and energy in, only to hear “they have completely redesigned it since then”? I did, and it left me with this very empty feeling. After some wallowing, I realized I needed to discover a new way to think about the way I work and what really matters in my consulting career. My answer: The mark of a truly good consultant is investing in people. Focusing on investing in people will ensure that your work will still continue to see results long after the application is redesigned, and that is change that matters in the long run. In the following article, I will give three areas in which we can focus our efforts: mentoring, client education, and our own team members. I hope that the reflection will help us all be better consultants and make better investments. Client mentoring as an investment There are often opportunities for us to invest in “client side” people, but they might not be readily apparent. I will give two examples of this. On a recent project, I was the designer paired with a recently-hired UX director, who was a little bewildered still by the new gig. When we talked, it became apparent that what he needed was someone to mentor him in an intentional way because he was overwhelmed and feeling lost. I spent lunches with this gentleman talking about UX strategy, how my company had handled process definition, and I eventually worked on a project where I invited him to come do user research with me. Now mind you, this mentoring was not the part of any statement of work. This was something I did because it was the right thing to do. It was an opportunity to make an investment much bigger than the project at hand—and to see someone blossom right before your eyes makes the time investment very much worthwhile. By the end of the client engagement, he was extremely thankful to have had someone invest time in him, to point him in the right direction—which allowed him to lead the UX capability much better than he was before. It turned out to be the most satisfying work I had done in ages. Fortunately, both my company and the client were extremely appreciative of the time spent with their people. A second example is on the implementation side. I was the interface developer for an intranet project, and the client had a talented UI person who had questions about the CMS and approach we were using. To complicate the situation, we came to the project after they fired another firm for an inability to deliver. This woman had been given poor advice by the previous vendor, and she naturally had lots of questions about how to do the implementation the right way. It is easy to become exhausted with external consultants, and I wanted to ensure that she and their team quickly came to trust us to deliver. I set up bi-weekly meetings with her throughout the four month implementation. Before we even started development, she and I mapped out the scope of the work and talked about all kinds of details, down to and including minutia like CSS class names. The regular meetings gave her a chance to see and give input throughout the entire process. Another advantage of this approach—beyond those that accrue through collaboration—was that there was no big knowledge handoff at the end. It was something that was built into the project from the beginning. As companies become more lean, we can get a double benefit of increased collaboration and knowledge sharing: First, we spend far less time writing copious documentation because we have been sharing all along, and second, the solution has a much greater chance for long-term success due to our time spent investing in these individuals who take over after we leave. Client education as an investment We can also educate clients even if they are not themselves in the UX world. A big intranet project I worked on was scoped to be responsive, but it became very apparent in the beginning that the design that went into it was not done in the best way for my company to implement; it was not designed in a mobile-first fashion. I had two options: Either I just let it go, do my work, and move on; or, I could take the time to reach out to the client and educate them. I knew that this project was already moving forward, but I could set up a foundation for this client’s future success. One thing to gauge is whether the client is even interested in such a relationship. Sometimes, despite your best intentions, clients are only interested in timelines and not interested in spending lots of billable time learning or re-learning. And I had to ask: What did I value? Was I only in it for the money, or could I help enact lasting change and provide real value? This client was not himself a UX practitioner, and he was looking for someone to be the expert he could trust. Working with non-UX people is a challenge, because you have to sell them a bit harder on why doing things the right way is important, even when they do not understand the implications or appreciate the time necessary to do it the right way. I pulled him aside in a couple of private meetings and talked about everything with him, from defining responsive design correctly, understanding mobile-first design, and even things like home page carousel use and abuse. In the end, it not only furthered our relationship, but it afforded me a high level of trust and rapport with the client. This particular client was open to the discussion and was even excited about extending the relationship, but if you have a hesitant client, don’t give up on them. Show them the quantifiable benefits of this increased collaboration by pointing to your experience in the past, or that the time they spend with you learning will only pay dividends in the future. Remember that even if things aren’t changeable in the short term, you can make investments in people for the next project and longer term. Teams as an investment There is one last, important group we can’t forget: our co-workers. These are the people that become like a family in ways our clients never will. Project after project, these are the people we are tasked to work with, and in some ways these are often the most strategic people to invest in but also sometimes the most difficult to do it with because we can so easily overlook them. During my firm’s adoption of the CSS preprocessor SASS, my team was mostly junior people who were looking for leadership in all kinds of areas. This time, I was given the opportunity to help others use this powerful tool. I took the lead in understanding its implications and how to use it in our teams, and then I spent concentrated time with each member of the UX team to help them understand how to use the technology in both a programmatic and process way. Taking advantage of opportunities like these furthers your relationship with your team members and demonstrates to them that you care deeply about their professional development. To this day, those team members reach out to me with questions and best practices due to the trust gained through leading in this way. It is amazing how doing this even on a detail like a CSS preprocessor can assist your team members greatly. We all have different motivations for doing the work that we do, and I imagine that for most of us money—as good as money is—is not the primary factor. Instead, very talented people tend to thrive on being an expert, enacting change, and leading others. True leaders are not given an opportunity to lead—they find those opportunities. Leading inside your organization will make you as close to irreplaceable as you can get. Share this: EmailTwitter75RedditLinkedIn51Facebook18Google Posted in Learning From Others, Workplace and Career | 2 Comments » 2 Comments Recent Publications May 22, 2015 at 8:10 pm […] Read: Mentoring as an investment […] William Singh September 6, 2015 at 3:44 pm This article boils down to saying that a lead consultant should mentor clients and team members. I don’t really see anything new or insightful about this at all. The only difference is that the term “investment” is applied as a veneer to describe basic consulting skills 101. Worse still is that the author then claims that these fundamental skills “will ENSURE your work will continue to see results.” This is pure hyperbole. Conveniently, this article only describes successful examples of collaboration and knowledge-sharing. In the real world of consulting, like in finance, there is a big difference between SPECULATION and INVESTING. A more expository discussion would have included *speculating* on people – taking chances, sharing information and best practices – *without* necessarily receiving anything in return. This happens every day, with all kinds of people and projects. You share ideas with a client and they take them to another agency. You train an employee and they leave for another company. So I am really surprised that any experienced consultant would claim that mentoring and education are “investments” that will “ensure” positive results. Really a one-sided, happy-path article in my opinion, sorry. Your Guide to Online Research and Testing Tools by Bartosz Mozyrko May 12th, 2015 20 Comments The success of every business depends on how the business will meet their customers’ needs. To do that, it is important to optimize your offer, the website, and your selling methods so your customer is satisfied. The fields of online marketing, conversion rate optimization, and user experience design have a wide range of online tools that can guide you through this process smoothly. Many companies use only one or two tools that they are familiar with, but that might not be enough to gather important data necessary for improvement. To help you better understand when and which tool is valuable to use, I created a framework that can help in your assessment. Once you broaden your horizons, it will be easier to choose the set of tools aligned to your business’s needs. The tools can be roughly divided into three basic categories: User testing: Evaluate a product by testing it with users who take the study simultaneously, in their natural context, and on their own device. Customer feedback: Capture feedback of customer’s expectations, preferences, and aversions directly from a website. Web analytics: Provide detailed statistics about a website’s traffic, traffic sources, and measurement of conversions and sales. To better understand when to use which tool, it is helpful to use the following criteria: What people say versus what people do… and what they say they do Why versus how much Existing classifications of online tools The possible services are included at the latter part of the article to help you start. What people say versus what people do… and what they say they do What people say, what people do, and what they say they do are three entirely different things. People often lack awareness or necessary knowledge which would enable them to provide correct information. Anyone who has any experience with user research or conversion rate optimization and has spent time trying to understand users has seen firsthand that more often than not user statements do not match the acquired data. People are not always able to fully articulate why they did that thing they just did. That’s the reason it’s sometimes good to compare information about opinions to information on behavior, as this mix can provide better insights. You can learn what people do by studying your website from your users’ perspective and drawing conclusions based on observations of their behavior, such as click tracking or user session recording. However, that is based on the idea that you test certain theories about people’s behavior. There is a degree of uncertainty, and to validate the data you’ve gathered, you will sometimes have to go one step further and simply ask your users, which will allow you to see the whole picture. Therefore, you can learn what people say by reaching out to your target group directly and asking them questions about your business. Why versus how much Some tools are better suited for answering questions about why or how to fix a problem, whereas tools like web analytics do a much better job at answering how many and how much types of questions. Google Analytics tells you the percentage of people who clicked what thing to through to what page, but it doesn’t tell you why they did or did not do that. Having knowledge of these differences helps you prioritize certain sets of tools and use them while fixing issues having the biggest impact on your business. The following chart illustrates how different dimensions affect the types of questions that can be asked: chart illustrates how different dimensions affect the types of questions that can be asked. Source: http://www.nngroup.com/articles/which-ux-research-methods/ Choosing the right tool—infographics There are a lot of tools out there these days that do everything from testing information architecture and remote observation. With more coming out every day, it can be really hard to pick the one that will give you the best results for your specific purpose. To alleviate some of the confusion, many experts tried to classify them according to different criteria. I decided to include some of examples for your convenience below. Which remote tool should I use? By Stuff On My Wall A flow chart to evaluate remote tool choices. Source: http://remoteresear.ch/moderated-research/ Choosing a remote user experience research tool by Nate Bolt Another chart showing evaluation criteria for remote research tools. Source: http://remoteresear.ch/categories/ The five categories of remote UX tools by Nate Bolt Five categories of user research tools. Source: http://remoteresear.ch/categories/ Four quadrants of the usability testing tools matrix by Craig Tomlin Usability testing tools arranged in a quadrant chart. Source: http://www.usefulusability.com/14-usability-testing-tools-matrix-and-comprehensive-reviews/ Tool examples The examples of tools which I list below are best suited for web services. The world of mobile applications and services is too vast to be skimmed over and has enough material to be a different article completely. The selection is narrowed down in order to not overwhelm you with choice, so worry not. User testing User testing and research is vital to creating a successful website, products and services. Nowadays using one of the many existing tools and services for user testing is a lot easier than it used to be. The important thing is to find a tool or service that works for your website and then use it to gather real-world data on what works and what does not. Survey: The most basic form of what people say. Online surveys are often used by companies to gain a better understanding of their customers’ motives and opinions. You can ask them to respond in any way they choose or ask them to select an answer from a limited number of predetermined responses. Getting feedback straight from your customers may be best used in determining their painpoints or figuring out their possible needs (or future trends). However, what you need to remember about is that people do not always communicate best what is exactly the issue they are facing. Be like Henry Ford: Do not give people faster horses when they want quicker transportation—invent a car. Examples: Typeform Survey Gizmo Card sorting: It focuses on asking your users to categorize and sort provided items in the most logical way for them or create their own possible categories for items. These two methods are called respectively closed and open card sorting. This will help you to rework the information architecture of your site thanks to the knowledge about the users’ mental models. If you aim to obtain information that balances between “what they do” and “what they say”, sorting is your best bet. Be sure to conduct this study in a larger group – some mental models might make sense, but aren’t the most intuitive for others. Focus on the responses that are aligned with each other, as it is possibly the most representative version of categories. Examples: ConceptCodify usabiliTEST Click testing/automated static/design surveys: This lets you test screenshots of your design, so you can obtain detailed information about your users’ expectations and reactions to a website in various stages of development. This enters the territory of simply gathering data about the actions of your users, so you obtain information about what they do. The study is conducted usually by asking a direct question: “Click on the button which will lead to sign-ups”. However, remember, click testing alone is not sufficient enough, you need other tools that cover the part of “why” in order to fully understand. Examples: Usaura Verify App 5-Second testing/first impression test: Because your testers have only five seconds to view a presented image, they are put under time pressure and must answer questions relying only on almost subconscious information they obtained. This enables you to improve your landing pages and calls to action, as users mostly focus only on the most eye-catching elements. Examples: UsabilityHub Optimal Workshop Chalkmark Diary studies: An extensive database of all thoughts, feelings and actions of your user, who belongs to a studied target market. All events are being recorded by the participants at their moment of occurrence. This provides insights into firsthand needs of your customers, asking them directly about their experiences. Yet, it operates in a similar fashion to surveys, therefore remember that your participants do not always clearly convey what they mean. Examples: FocusVision Revelation Blogger Moderated user studies/remote usability testing: The participants of this test are located in their natural environment, so their experiences are more genuine. Thanks to the tools and software there is no necessity for participants and facilitators to be in the same physical location. Putting the study into context of a natural/neutral environment (of whatever group you are studying) gives you insight into unmodified behaviours. Also, the study is a lot cheaper than other versions. Examples: GoToMeeting Skype Self-moderated testing: The participants of the test are expected to complete the tasks independently. After that you will obtain videos of their test sessions, along with a report containing information what problems your users were facing and what to do in order to fix them. The services offering this type of testing usually offer the responses quickly, so if you are in a dire need of feedback, this is one of possibilities. Examples: Uxeria UserTesting Automated live testing/remote scenario testing: Very similar to remote testing, yet the amount of information provided is much more extensive and organized. You get effectiveness ratios (success, error, abandonment and timeout), efficiency ratios (time on task and number of clicks), and survey comments as the results. Examples: UX Suite Loop11 Tree testing/card-based classification: It is a technique which completely removes every distracting element of the website (ads, themes etc.) and focuses only on the simplified text version. Through this you can evaluate the clarity of your scheme and pinpoint the chokepoints that present problems to users. It is a good method to test your prototypes or if you want to detect a problem with your website and suspect the basic framework is at fault. Examples: UserZoom Optimal Workshop Treejack Remote eye tracking/online eye tracking/visual attention tracking: Shows you where people focus their attention on your landing pages, layouts, and branding materials. This can tell you whether the users are focused on the page, whether they are reading it or just scanning, how intense they are, and what is the pattern of their movement. However, it cannot tell you exactly whether your users actually do see something or do not, or why exactly do they look at a given part. This can be remedied for example with voiceovers, where the participants tell you right away what they feel. a) Simulated: creates measurement reports that predict what a real person would most likely look at. Examples: VAS Eyequant b) Behavioral: finds out whether people actually notice conversion-oriented elements of the page and how much attention they pay to them. Examples: Attensee Eyetrack Shop These are the singular features which are prominent elements of the listed services. However, nowadays there is a trend to combine various tools together, so they can be offered by a single website. If you happen to find more than one tool valuable for your business, you can use services such as UsabilityTools or UserZoom. Customer feedback Successful business owners know that it’s crucial to take some time to obtain customer feedback. Understanding what your customers think about your products and services will not only help you improve quality, but will also give you insights into what new products and services your customers want. Knowing what your customers think you’re doing right or wrong also lets you make smart decisions about where to focus your energies. Live chats: an easy to understand way of communicating through the website interface in real time. Live chat enables you to provide all the answers your customers could want. By analyzing their questions and often inquired issues you can decide what needs improvement. Live chats usually focus on solving an immediate problem, so it is usually used for smaller issues. The plus is the fact that your client will feel acknowledged right away. Examples: LiveChat Live Person Insight surveys: They help you understand your customers thanks to targeted website surveys. You can create targeted surveys and prompts by focusing them on the variables such as the time on page, the number of visits, the referring search term or your own internal data. You can even target custom variables such as the number of items in a shopping cart. However, they are very specific and operate on the same principle as general surveys, so you must remember about the risk that the survey participants won’t always be able to provide you with satisfactory answers. Examples: Survicate Qualaroo Feedback forms: They are a simple website application to receive feedback from your website visitors. You can create a customized form, copy and paste code into your site’s HTML, and start getting feedback. This is a basic tool for getting feedback forms from your customer, and receiving and organizing results. If you want to know the general opinion about your website and the experiences of your visitors (and you want it to be completely voluntary), then forms are a great option. Examples: Feedbackify Kampyle Feedback forums: Users enter a forum where they can propose and vote on items which need change or need to be discussed. That information allows you to prioritize issues and decide what needs to be fixed as fast as possible. The forums can be also used for communicating with users, for example you can inform them that you introduced some improvements to the product. Remember, however, that even the most popular issues might be actually least important for imrpoving your serive and/or website, it is up to you to judge. Examples: UserVoice Get Satisfaction Online customer communities: You refer to your customer directly, peer-to-peer, and offer problem solving and feedback. Those web-based gathering places for customers, experts, and partners enable you to discuss problems, post reviews, brainstorm new product ideas, and engage with one another. Examples: Socious Lithium There are also platforms that merge some of the functionalities such as UserEcho or Freshdesk which are an extremely popular solution to the growing demands of clients who prefer to focus on single service with many features. Website analytics Just because analytics provide you with some additional data about your site doesn’t mean it’s actually valuable to your business. You want to find the errors and holes within your website and fill them with additional functionality for your users and customers. Using the information gathered you can influence your future decisions in order to improve your service. Web analytics: all movement of the users is recorded and stored. However, their privacy is safe, as the data gathered is used only for optimization, and the data is impossible to be personally identified. The data can be later used for evaluating and improving your service and website in order to achieve your goals such as increasing the amount of visitors or sales. Examples: Mint Mixpanel KISSmetrics Woopra Google Analytics In-page web analytics: They differ from traditional web analytics as they focus on the users’ movement within the page and not between them. These tools are generally used to understand behavior for the purposes of optimizing a website’s usability and conversion. a) Click tracking: This technique used to determine and record what the users are clicking with their mouse while browsing the website–it draws you a map of their movements, which allows you to see step by step the journey of your user. If there is a problem with the website, this is one of the methods to check out where that problem could’ve occured. Examples: Gemius Heatmap CrazyEgg b) Visitor recording/user session replays: Every action and event is recorded as a video. Examples: Inspectlet Fullstory c) Form testing: This allows you to evaluate the web form and identify areas that need improvement, for example which fields make your visitors leave the website before completing the form. Examples: Formisimo UsabilityTools Conversion Suite In a similar fashion to the previous groups, there is also a considerable amount of analytic Swiss army knives offering various tools in one place. The examples of such are ClickTale, UsabilityTools, or MouseStats. Conclusion This is it—the finishing line of this guide to online research tools. It is an extremely valuable asset which can provide important and surprising data. The amount of tools available at hand is indeed overwhelming, that is why you need to consider the listed factors of what, why and such. This way you will reach a conclusion about what exactly you need to test in order to improve your service or obtain required information. Knowing what you want to do will help you narrow your choices and in result choose the right tool. Hopefully, what you’ve read will help you choose the best usability tools for testing, and you will end up an expert in your research sessions. Share this: EmailTwitter323RedditLinkedIn347Facebook206Google Posted in Discovery, Research, and Testing, Process and Methods, Software and Tools | 20 Comments » 20 Comments John Weidner May 12, 2015 at 2:28 pm Nice collection of tools. Here’s another one to consider adding – https://userbob.com It’s a un-moderated remote user testing tool. OwainThe Freelance Studio Denver, Co. User Experience Agency Mystical guidelines for creating great user experiences by Tal Bloom March 3rd, 2015 10 Comments The Jewish Torah teaches that the Creator created our world through ten utterances–for example, “let there be light.” The Jewish mystical tradition explains that these utterances correspond with ten stages in the process of creation. Every creative process in the world ultimately follows this progression, because it is really a part of the continual unfolding of the world itself, in which we are co-creators. This article aims to present an overview of the mystical process of creation and principal of co-creation and to illustrate how it can guide bringing digital product ideas into reality–although it’s easy enough to see how this could translate to other products and services–in a way that ensures a great user experience, and makes our creative process more natural and outcomes more fruitful. And a note as you read: In Jewish mysticism, the pronoun “He” is used when referring to the transcendent aspect of the Creator that is the source of creation, and “She” is used when referring to the imminent aspect that pervades creation, because they are characterized by giving and receiving, respectively. Because this article discusses the relationship of the transcendent aspect, the masculine pronoun has been used. The process of creation Ten stages, four realms Ten stages, four realms The order of creation The ten stages in the process of creation progressively create four realms. Three triads create three spiritual realms, and the tenth stage creates our tangible reality, which is the culmination of creation. It is understood that creation becomes increasingly defined and tangible as the creative power flows from one realm to the next. When we participate in creation, our efforts naturally follow the same progression. The four realms are traditionally referred to by Hebrew terms, so to make things easier I’ll refer to them using a designer’s day-to-day terms–ideation, design, implementation, and operation. Before we dive in though, one more thing to note is that within each realm there is a three-stage pattern whereby the creation first becomes revealed, then delineated, and finally consolidated in a state of equilibrium. Hang in there, you’ll shortly see what this means. The realm of ideation In the beginning there was only the Creator, alone. In the first three stages of creation, He simply created the possibility for a creation. This corresponds with the generation of business ideas. Just as before there was anything else it had to arise in the Creator’s mind to create the world, so too, the starting point of all products and services is the emergence of an idea–a simple and common example of which is “a digital channel will help our customers connect with us.” Next, the seed sprouts a series of details to define it. In creation, the details included the fact that creation will be limited and that there is an order to its unfolding. In business, the idea undergoes an extrapolation to define its reach and scope. For example, “the digital channel will need product information, a shopping cart, a customer database, and a social function for customers’ reviews.” The third stage in the process of creation is the preparation for bridging the gap between the abstract realm of potential where the Creator is still effectively alone, with a new reality of seemingly separate creations. Correspondingly, in business the third step requires bringing the idea from a place of theory to a point that it can be shared with others, such as presenting to decision makers and stakeholders, or briefing agents and consultants. The realm of design Now that it’s possible to distinguish between the Creator and His creation, the next three stages serve to coalesce the homogenous creation into spiritual templates. This corresponds with the conceptual design of how the business idea may be realized. The first stage in this realm is an expression of the Creator’s kindness, as He indiscriminately bestows life to all of creation. Correspondingly, the design process begins with telling the end-to-end story of the idea, from the user discovering the new product or service through to their consummate pleasure in using it, without our being too concerned with practical considerations. This could be captured in business process diagrams, but human-centred user journey maps or storyboards have proven more natural. Next, the Creator expressed His attribute of judgement to establish the boundaries of His evolving creations. In business, we begin addressing practical considerations, such as time, budget, and technical constraints to define the boundaries of the concept. This generally involves analyzing the desired story to establish the finite set of practical requirements for realizing it. For digital produ The Freelance Studio Denver, Co. User Experience Agency The Roots of Minimalism in Web Design by KATE MEYER on June 28, 2015 Topics: Human Computer Interaction Visual Design Web Usability Summary: Many of today’s most popular design trends are influenced by minimalism. This web design movement began in the early 2000s, but borrows its philosophy from earlier movements in the fields of fine art and human–computer interaction. Many of today’s most popular design trends (including flat design, large background images, and hidden global navigation) are directly or indirectly influenced by minimalism, a web-design movement that began in the early 2000’s, but borrows its philosophy from earlier movements in the fields of fine art and human–computer interaction. Minimalism sometimes presents as an attempt to prioritize content over the chrome and, when applied correctly, it can help you focus your design to simplify user tasks. Unfortunately, some designers misinterpret minimalism as a purely visual-design strategy. They cut or hide important elements in pursuit of a minimalist design for its own sake—not for the benefits that strategy might have for users. They’re missing the core philosophy and the historical context of minimalism, and they risk increasing complexity rather than reducing it. To better grasp and apply minimalist principles, we need to understand the origins of minimalism and its fundamental characteristics. We explore these topics in a series of two articles: In this first article we define minimalism and look at its history; in a second article we analyze in depth the characteristics of minimalist design and their impact on usability. What Is a Minimalist Interface? When employed correctly, the goal of minimalist web design should be to present content and features in a simple, direct way by providing as little distraction from the core content as possible. This strategy often involves removing content or features that don’t support the primary goals of the interface or its users. Although there is some debate about what exactly qualifies as minimalist web design, there are a few common features that most designers can agree upon. These include flat textures, limited color palettes, and the use of negative space. These and other specific characteristics and their frequency of use in minimalist websites are discussed in detail in the next article in this series. Minimalism is a reaction to bloated, or “maximalist,” UI design. Examples of such maximalist design include Flash intros and gratuitous animations, or applications crammed with as many esoteric features as possible (like Microsoft Office before the 2007 rethink). Brian Danaher's portfolio The portfolio of designer Brian Danaher is a typical example of what many designers would call a minimalist site. When viewed full screen on a 15-inch MacBook Pro, the homepage is almost entirely white space. The site uses a grayscale color palette with a single bold accent color to draw attention to clickable elements—a popular strategy among minimalist designers. Brian Danaher's portfolio Danaher’s site includes very few distractions from its primary content. Minimalism is well suited to portfolio sites like this one, which have fairly simple goals, relatively low amounts of content, and very similar information on most pages. Applying minimalism effectively to more complex sites can be much more difficult. Minimalism’s Rise to Popularity 1960s Decades before minimalism was a trend in web design, it was a visual art movement in the era following World War II. It emerged as a reaction to the chaotic colors, motion, and marked subjectivity often found in abstract expressionists works (such as the drip paintings of Jackson Pollock). It was heavily influenced by the famous German art movement Bauhaus, which focused on simple yet functional design. In the 1960s, minimalism became popular in a variety of fields, particularly fine art and architecture. In visual art, minimalism was characterized by monochromatic palettes, geometric elements, serial arrangements, and industrial materials. Jackson Pollock's Full Fathom Five Jackson Pollock’s Full Fathom Five (1947) in The Museum of Modern Art. Minimalists of note include graphic designer Josef Müller-Brockmann, painter Ellsworth Kelly, and industrial designer Dieter Rams. Note the clean lines, simplicity, and sparing use of color in each of these examples. Despite the wide variety of mediums, a coherent design style is perceptible. Ellsworth Kelly's Brooklyn Bridge VII Ellsworth Kelly’s Brooklyn Bridge VII (1962) in The Museum of Modern Art. Radio by Dieter Rams RT 20 tischsuper radio, 1961, by Dieter Rams for Braun. Unmodified CC image courtesy of Vitsoe. S.R. Crown Hall S.R. Crown Hall, designed by Ludwig Mies van der Rohe, 1956. Unmodified CC image courtesy of Peter Alfred Hess. The perspective behind minimalist art was neatly summarized by the motto of famous 20th century architect Ludwig Mies van der Rohe: “Less is more”. This motto would later become the spirit and unofficial mantra of minimalism in web design: fewer elements on a page results in lower cognitive load for users. 1980-2000 At the end of the twentieth century, minimalism began to take shape as a separate trend within the field of human–computer interaction. In 1983, data-visualization expert Edward Tufte introduced the concept of a data–ink ratio in his work, The Visual Display of Quantitative Information. In print media, the data–ink ratio is the ratio between (1) the amount of ink that communicates information, and (2) all the ink used to print the graphic. Tufte advocated maximizing this data–ink ratio by removing any elements that do not reasonably contribute new information. Data–Ink Ratio = Informative Ink / Total Ink This concept of data–ink ratio can be applied to web interfaces by considering the content–element ratio for any interface. The goal is similar: a high proportion of the amount of meaningful elements relative to all elements in the interface. In 1990, HCI researcher John M. Carroll was studying the ways people used technical training manuals, and looking for ways to improve them. From his research, he developed the theory of minimalism in technical communication. Carroll’s theory suggests that a successful design will support quick action by prioritizing brevity. Carroll stressed that reducing a design to its most basic elements is not the end goal of minimalism. Rather, Carroll championed brevity and simplicity in the service of task-oriented results. To position this approach towards web design, Carroll’s minimalism translates to getting the interface out of the way, in order to allow users to achieve their goals. In 1995, Jakob Nielsen included minimalist design in his 10 usability heuristics. His use of the term aligned with Tufte’s and Carroll’s sense of minimalism, as he advocated eliminating irrelevant information from interfaces. 2000s Beginning in the mid 2000s, echoes of the minimalist art movement began to appear in web interfaces: larger swaths of negative space, lower amounts of content, and restricted color palettes. Google is often credited as the pioneer of minimalist web interfaces. Google has prioritized simplicity and austerity in its interfaces ever since its beta offering in the 1990s. Google, 1999 Google’s homepage (1999, via Wayback Machine) Even though Google now offers a huge variety of products from Google Drive to YouTube to Gmail to Google Maps, its homepage has changed very little over 15 years. Only three navigation options are visible: in order to access the rest of Google’s offerings, users must use the grid icon to expose a tray of more options. Google, 2015 Google’s homepage (2015) In spite of early trendsetters like Google, it took time for minimalism to catch on in web design. In the early 2000s, crowded interfaces dominated the web. During our impression testing sessions at that time, users overwhelmingly described the interfaces as ‘busy’. Slowly but surely, minimalism found a foothold with early adopters: the web designers, graphic designers, artists, photographers, architects, and developers. Designer and blogger Emily Chang wrote about the rise of minimalism in 2006: Perhaps it’s the success of Google’s search page, or our collective reaction against the flashing banner ads and intrusive popups of the last decade, or the Jonathan Ives effect, but it’s as though web users, designers, and developers alike have all agreed to a new de facto standard of Mies van der Rohe’s ‘less is more.’ Chang’s assertion that all web users and professionals embraced minimalism was definitely not accurate in 2006, and may still be an exaggeration today. However, it is reasonable to assume she did speak for the emerging popularity of minimalism among people who are deeply immersed in the cutting-edge trends of the web. 2010-2013 The emergence of responsive web design (RWD) in 2010 primed the wider web to appreciate a minimalist approach. To effectively utilize RWD techniques, organizations must carefully prioritize their content—distractions from primary content that could be ignored on desktop become big problems on mobile. Slowly user and designer preferences began to lean towards greater simplicity in web interfaces. This shift was underscored by major redesigns carried out by two tech industry giants: Microsoft’s Modern design in 2011, and Apple’s release of iOS7 in 2013. Microsoft’s release of Windows 8 in 2011 was the first major redesign of its operating system in decades. At the same time, it announced its design philosophy, “modern design”. This new design philosophy was quintessentially minimalist, drawing directly from the minimalist art movement. Microsoft’s official design documentation even claims that the Bauhaus school is one of its fundamental design pillars. Windows 8 Windows 8 ‘tile’ view Though Apple has worked hard to define its brand in simplicity, Apple designers have historically—and controversially—favored skeuomorphic patterns in their interfaces. In 2013, Apple radically revamped iOS to a much flatter and more minimal style with iOS7. Apple’s decision to move toward a more minimal and flat design particularly underscores the popularity of the trend, given that it fundamentally contradicts the brand’s historic design style. iOS7 Apple’s iOS7 2014-2015 Minimalist design principles are now showing up in new and unexpected places: e-commerce sites, online publications, and even educational sites are adopting minimalist trends and strategies. Many one-stop website-design and hosting services like Squarespace, Weebly, Wix, and Volusion now provide stock site templates that are almost entirely minimalist designs. These offerings are particularly significant because they often target people with no development or design experience—people who want to set up their online bike store or bakery website or online wedding invitation without having to touch Illustrator or a line of HTML. These services are selling minimalist websites because they believe it’s what their customers want. Squarespace's Galapagos theme Squarespace’s ‘Galapagos’ theme Today, minimalism has branched into and overlaps with other prominent web-design trends such as flat design, responsive web design, and clean design. Minimalism’s contributions to these trends will be discussed in detail in next week’s article. The Usability Debate: Is Minimalism Good for Users? Minimalism is a design strategy that significantly influences content and information-architecture decisions. As a result, minimalism has a definite impact on the usability of the interfaces that adopt it. Unsurprisingly, the usability of minimalist-design styles has become the subject of debate amongst web professionals. Proponents argue that minimalism reduces information overload: the more features and content you can cut out, the less people have to deal with. Minimalism done well can also create a positive emotional experience for users. People do tend to respond better to aesthetically-pleasing interfaces. As Don Norman points out, when using such interfaces they are more tolerant of usability obstacles, as long as those flaws are minor. Since Nielsen Norman Group was founded in 1998, we have been forceful critics of maximalist (i.e., bloated) web design. You might expect us to be enthusiastic supporters of minimalist web design, but that’s not the case. When designers adhere too rigidly to a minimalist ideology, they risk ending up with wastefully low information density and poor findability and discoverability. Extreme minimalism can be useful as an internal design exercise, but should never be a final product. Minimalism in moderation can create efficient user experiences, as long as you don’t lose sight of the primary goal—helping users accomplish tasks. Tips for a Successful Minimalist Interface Make sure you seriously consider whether a minimalist design strategy is right for your site, your brand, and your content. If you’re sure a minimalist design is right for you, take some lessons from the roots of minimalism. Adopt Ludwig Mies van der Rohe’s motto, “Less is more,” in your designs. Don’t add elements just for their own sake. This rule can be true for content, visual design, and feature decisions. Consider reducing any elements that don’t contribute meaningful information (think about your content–element ratio.) Learn from Carroll’s minimalism: don’t just cut out features and elements—really think about your users’ needs and try to make tasks as brief and simple as possible. Know that a minimalist visual design alone, without meaningful consideration of user tasks, will not result in a successful interface. The usability issues of Windows 8 provide an excellent cautionary tale. (Minimalism is one of the design strategies discussed in the full-day course on Generating UX Redesigns From Broad Design Principles.) For an in-depth discussion of the characteristics of minimalism, read the next article in this series.Great Summaries on ‘About Us’ Pages Engage Users and Build Trust by HOA LORANGER on June 21, 2015 Topics: Corporate Websites Writing for the Web Summary: Tell your story on top-level pages in ‘About Us.’ People who trust you are much more open to engaging with your organization and website. Even large organizations exist only as words and images within a browser window. How can you make people trust you more than they would trust an equally good-looking set of pixels on another site? Be a good storyteller. The One Thing You Should Do Based on several studies, we’ve generated numerous guidelines on how to present company information on corporate websites and in the About Us sections to increase trust and transparency. However, in this article, I focus on one major guideline to increase perceptions of transparency and improve your relationship with users. If you can do only one thing, what should it be? The answer: Provide key information on major About Us pages. In usability studies, we observe people peeking at top-level pages for answers to foundational questions. Make sure that your site passes the first impressions test by answering top questions succinctly. People are more inclined to engage further once they’ve determined you’re worth the effort. Start telling your story the moment people land on your site. At a minimum, write brief summaries emphasizing a few impressive facts. As people click through the main pages they should gain a fuller understanding of who you are, what you do, and why you exist. Ask yourself, “If users only skim the top pages in About Us, are they getting a coherent story?” In many cases, what new users need most are great highlights written in a scannable format. Summaries are appealing because they provide context and reduce the amount of effort required to click through layers of content. Forcing people to work hard (even if it’s to click on a link to one level down) to receive an introduction is bad manners and reflects poorly on your organization. Examples of Dos and Don’ts Below are examples of what you should practice and what you should avoid. DO AbbVie: This About Us page provides a nice company overview, including Fast Facts to give site visitors a reasonable company snapshot. While this page holds promise, the content could be improved by replacing the marketing jargon with concrete facts that people care about. Steer clear of hollow phrases like “revolutionary” — at best, they tend to confuse users; at worst, they make them mistrust the site. DON’T Abbott: This About page has very low content density and forces users to drill deeper before they can learn about the company. This page acts as a wall that deters people from wanting to go further. Better to start the conversation by providing the highlights on this page. People who research organizations are sensitive to credibility factors. They are looking for clues to determine whether or not to like you. Answering the questions at the right time feels conversational and can be persuasive in garnering trust. People who trust you are much more open to engage with you. DO Chipotle: This summary tells a compelling story of who the company is and how they differ from other fast-food chains. The writing style is clear and hype-free, making the organization sound friendly and credible. DON'T CSC: Can you guess from page that this company offers cloud-computing services? This About page feels unfriendly without an introduction. The sheer number of links puts the onus on the users to determine which door to open. When the tagline could equally well describe thousands of other companies, you know you’re in trouble. The manner in which information is communicated on websites influences people’s perception of your organization. Users perceive sites that answer their questions quickly as being transparent and efficient. Conversely, users regard sites that bury critical information underneath complex layers as being evasive or ineffective. If your site visitors are potential donors, journalists, or clients, leaving such a negaive impression is detrimental to your business and brand. DO GSK: This overview answers the questions and is formatted well for ease of reading. The page contains facts for each business featured (e.g., pharmaceuticals, vaccines). Nice overviews like these minimize the effort required of users to learn about you. DON’T TevaPharm: The summaries on this Company Profile page are generic and don’t give clarity on how they’re unique. You might find specifics underneath Discover more, but why make users jump such hurdles? Halo Effect impacts how people gauge websites, even if the assessment is flawed. People tend to make hasty judgments about organizations based on limited information. If users have a good first impression, the positive feelings permeate to other parts of the site. If users have a bad first impression, the negative feelings extend to the rest of the site. DO Citrix: The images on this Executives overview page literally show the faces behind the organization. At a glance people get an impression of the company culture and the people running the business. Citrix is clearly benefiting from having a recognized UX expert on its executive team. (To nitpick this otherwise good example, reduce the leading slightly between names and job titles, to more closely associate these two pieces of information. Currently, the line reading “Chief Executive Officer” is closer to David Friedman’s photo than to Mark Templeton’s name.) DON'T Defenders of Wildlife: This executive overview feels unfriendly without photos of the members. Featuring photos on this page would tell a better story of who Defenders of Wildlife is. Conclusion Credibility is a major issue on the Web. Site visitors who visit the About Us section are seeking critical information to determine whether or not to engage with you. Explaining who you are matters. Tell your story and tell it succinctly. Featuring key highlights at the top-level keeps users focused on the conversation and not on wrangling the content or navigation. Well-written summaries illuminate your unique qualities and earn trust. (The full set of 70 design guidelines for "About Us" information is available in the 253-page research report, Presenting Company Information on Corporate Websites and in About Us Sections.) Ad Placement for Mobile by AURORA BEDFORD on July 5, 2015 Topics: Advertising Mobile & Tablet Web Usability Summary: Extra care is required when designing mobile page layouts that include advertisements, due to the limited screen real estate available. Ads must be displayed where they will not create false floors nor block users from reaching relevant content. Ads: that necessary evil we encounter every day, and to which we all believe ourselves to be immune. Whether a user ignores an ad completely or becomes annoyed with its presence is strongly related to the ad's size and placement on the page. On mobile phones, screen real estate is already at such a high premium that the position of the ad has an even greater impact on the overall user experience than on desktops. There are two main ad-related usability problems: (1) ads can be too disruptive to the user, and (2) they can create false floors that inaccurately signal the end of content and cause users to miss helpful information. Large Ads Limit Viewable Content Not surprisingly, the larger an advertisement, the more disruptive it is. On a small device, a vertically large ad consumes far too much valuable space, displacing the main content. To add insult to injury, sometimes two ads get stacked at the very top of mobile pages—as sites feel compelled to advertise their mobile apps. As a result, less page content is visible upon page load, which goes against one of the principles of mobile usability: prioritize content. In the example from FineGardening.com below, only the article title and brief summary can be seen without scrolling thanks to an overly large site header and the double ad placement at the top of the page. Screenshot from Finegardening.com on mobile showing multiple ads Finegardening.com: Very little article content can be seen upon page load because the app ad, banner ad, and large site header consume the majority of the screen real estate. Unlike multiple ad elements at the top of the page pushing down the relevant content, an ad at the bottom of the screen in a sticky container is less intrusive to users. This recommendation may seem counterintuitive because the ad would now remain visible on the screen at all times, but in past studies we have found this treatment to be best tolerated by users, which is good because it shows the ad is not getting in the way. Keep in mind that users tend to begin scanning from the top of the page, and resent having to scroll past a lot of chrome to get to the information they actually want to read. Thus, we need to not only consider the overall content-to-chrome ratio, but also ensure that helpful information is prioritized nearer to the top of page in order to grab people's interest and supply them with the information related to their task as soon as possible. An additional benefit to the sticky-container treatment is that the ad is still readily available to users once they finish their task. While the user is focused on completing an activity or researching a topic, ads will be ignored because they aren't part of the goal. Assuming the advertisement is actually relevant to the user, having it available once the main task is completed increases the likelihood that the user would pay attention to the ad and possibly interact with it. (An ad is relevant when it matches the user's current goal: it is more powerful to display an ad for something the user immediately wants rather than something that just matches their general profile.) Screenshots of ad treatment on the Washington Post mobile site The Washington Post mobile site displays an ad in a container fixed at the bottom of the screen (left). The ad is appropriately synced with the current scroll position of the page, and completely collapses when the user reaches a display ad embedded within the page content (right). Avoid Creating False Floors Another main downfall of many mobile ad placements is their tendency to create the “illusion of completeness,” or a false floor, on a page. An advertisement can easily signal to users that they have reached the end of the page's relevant content. This effect is exacerbated when the ad is large enough so it is difficult to see any continuation of content below, and when the ad is placed at a point low enough within the content where it seems reasonable that no more information is available on that page. Pages on WebMD's mobile site, for example, place ads following several paragraphs of text, below links to additional resources on the current topic. Horizontal lines in the design and the presence of copyright information (which is commonly associated with footer content) further cue the user that this is the end of page, when this is actually not true: the page continues far below the ad, displaying more information and additional links to related resources. Screenshots of WebMD.com mobile site article page containing several ads The ad placements on the WebMD mobile site create false floors because they appear in places that could reasonably be the end of relevant content, and are large enough that they hinder the user’s ability to see content continuing down the page. (The black dashed line shows where the fold occurs on an iPhone 6 Plus, and the red dashed lines represent areas where the ad is likely to stop a user from continuing to scroll.) If possible, only display ads at the real end of content rather than between paragraphs of text. Said one user during a recent usability study, “I don't like advertisements in between. It's distracting and gives me the impression that it's the end of the article.” Of course, we often don't have the luxury of neglecting business goals, and so if several ads need to be included on a page, putting them closer to the start of the content—following the title or intro paragraph, for example—can help avoid incorrectly signaling the end of the page. Additionally, shorter banner-style ads are less interruptive of the content than the taller square display ads. Screenshot of ad placement on USA Today mobile site USA Today mobile website uses a thin display ad positioned near the beginning of an article, so it is less likely to be considered a reasonable stopping point in the content. The thin rectangular size also allows the content below to be visible, encouraging the user to continue reading without being too interrupted by the ad. When an ad is placed lower on the page amid content, consider adding additional cues to signal the user to scroll past the ad. This recommendation is especially important if the ad is large or otherwise consumes a lot of page real estate (includes extra whitespace above and below the ad, or is a small ad populated into a placeholder meant for a larger one), and blocks the user from easily seeing any continuation of content. If the user doesn't know for sure that more content exists below the ad, they may not be willing to pay the interaction cost to scroll and possibly get nothing. Simple, clear text such as “Keep Reading” or “Continue Reading Below” along with an arrow pointing down or other directional indicator placed above the ad can work well to let the user know more content is available. Screenshot of ad design on Boston Globe mobile site To encourage users to scroll past a large ad, a cue such as Continue Reading Below should be shown above the advertisement, as seen on the Boston Globe mobile website. Keep in mind that this treatment merely makes the ad placement bearable, and should be considered a last resort if multiple ads must be placed on the page amidst content. In general when it comes to ads, be sure to practice restraint. Having a high number of ads diminishes site credibility: as stated by a user in a recent study, “I have deleted apps because of ads — I tend to not go to the ones with a lot of ads; I think the info is not reliable.” As expected, the most hated advertising techniques on the desktop are also hated on mobile devices; and sadly, top sins such as Covers what you are trying to see and Occupies most of the page are easier to unintentionally commit when the screen size is limited. Because of this, extra care must be taken when deciding where and how often to place ads on mobile apps and websites. Conclusion Ads represent a point of conflict between business needs and user needs. To minimize their impact on user experience, they need to take only a small fraction of the page area and be placed strategically so that they do not create false floors and do not stop people from discovering additional page content. on't Force Users to Register Before They Can Buy by AMY SCHADE on July 5, 2015 Topics: E-commerce Summary: Guest checkout with optional registration on e-commerce sites simplifies the purchase process and invites users to register when they feel comfortable, rather than forcing unwanted registration. One of the most common complaints we hear in e-commerce usability research is about registration. Shoppers have many reasons to dislike or dread site registration. They may not plan to return to the site again, making a one-time purchase or a gift purchase. They may dislike registration in general, frustrated with remembering usernames and passwords for all the sites they visit. Some shoppers don’t want a site to save personal information and assume that if they register for the site, the information will be saved. Many users associate registration with getting unwanted email, and for good reason, since many sites offer tiny preselected checkboxes to sign up for email newsletters. Most of all, registrations involves extra steps, extra hassle, and extra potential for things going wrong (whether user errors or site errors) and stopping the user dead in the water. The higher the interaction cost, the fewer people will complete a process. This is true for any user interface steps, but in the case of e-commerce checkout there’s a particularly direct connection between user hassle and lost sales. TinyPrints.com required that users create an account and also automatically subscribed users to the newsletter, mentioning above the Create Account button that “You will be subscribed to the Tiny Prints email newsletter” (stated in tiny print, which makes users weary right there.) Being signed up for newsletters they do not want is one of many complaints users have about registering on e-commerce sites. Registration sounds like a tedious, lengthy process unrelated to the task at hand: making a purchase. And some sites make registration a lengthy and tedious process, sometimes even presenting registration as a step separate from the checkout process. This doesn’t need to be the case. When a user is making a purchase, typically all the information needed for registration is already being requested of the user. Sites normally ask for information needed for the transaction, including name, shipping, and billing information. In addition, sites commonly ask for an email address in order to email a receipt and update order status. The only aspect of registration that is not covered in a standard checkout transaction is a password. How to Present Optional Registration Before users enter the checkout process, clearly state that registration will be an option. Some users do want to register and like to see assurance that they can if they’d like to. If the option to create a password will be presented after the purchase is complete, rather than during the checkout process, tell users so they know when to expect the option. Under the Guest Checkout option, HomeDepot.com told users that “You will have the opportunity to create an account and track your order once you complete your purchase.” The size of the text could have been larger to make it easier to read, though it is good to present this information less prominently than the main text. Briefly highlight the benefits of registration from the users’ perspective and not the company’s perspective when asking users to register. Shoppers appreciate when sites emphasize aspects that would make the experience easier, such as order tracking or faster checkout. They sometimes complain about sites that stress “benefits” such as receiving email newsletters or becoming a member of the site. Mention customer-focused benefits when users start the checkout process as well as when customers are asked to create optional passwords. A brief bulleted list tends to work well to highlight this information. This list should not be a sales pitch for the site, but a brief reminder to users about how registering benefits them. Nordstrom.com told users that registration would let them, “Check out faster, Track your orders, Write reviews and more!" This nicely presented the information as a benefit to the user, rather than the site. Mark password fields as optional, so it’s clear that users do not have to register for the site. Also make sure to state password requirements so users aren’t left guessing how to create a valid password. Some sites do not mark the password fields as optional; instead they place the fields in a section of the page with the word “optional” in a heading. Users often skim web content, even when filling in forms, and may miss the optional designation if it is only displayed in the heading, rather than next to the field. When the fields are not specifically marked, users can misinterpret it as a requirement for registration. If they were previously told that registration is optional or have pursued guest registration on the site, this inconsistency can break the user’s trust. Staples.com listed the optional passwords fields in a section titled Optional Information. That heading was in close proximity to the password fields, which only appeared if a user selected the Create an account and make your next checkout easy option. Both these factors helped reinforce that the fields were optional. Simple and Optional Rather than forcing users to register before checking out, provide the option to register within the checkout process by presenting optional fields for the user to enter a password. This puts users in control and allows them to decide if it is worthwhile to register or not. In our e-commerce research, we saw users who had previously complained about forced registration happily register for sites where registration was limited to the option of creating a password in the purchase process. Forcing registration causes lost sales. Some users will leave the site, others will struggle with registration. It is common for sites that add guest checkout to immediately realize increased sales. It is a simple way to improve usability and encourage purchasing. The Characteristics of Minimalism in Web Design by KATE MEYER on July 12, 2015 Topics: Visual Design Web Usability Summary: Our analysis of 112 minimalist websites revealed the defining features of minimalism: flat design, limited color schemes, few UI elements, use of negative space, and dramatic typography. This article is the second in a series devoted to the understanding of minimalism in web design. If you’re interested in the origins of the movement, read The Roots of Minimalism in Web Design. A minimalist web-design strategy is one that seeks to simplify interfaces by removing unnecessary elements or content that does not support user tasks. In order to reduce a website to only its most necessary elements, designers must accept a cascade of consequences that impact both the user interface (UI) and the content of the site. Many of the visual-design characteristics commonly associated with minimalism are choices that serve the core strategy of minimalism particularly well, and so have been adopted along with minimalism in most instances. Web design, like language, is defined by the way people use it. The word ‘minimalism’ is thrown around a lot, yet it’s hard to pinpoint exactly what features define a minimalist web design. To more clearly define what constitutes a minimalist design in practice, we analyzed the design characteristics of a sample of 112 minimalist websites. Sites were selected for the study if they were either identified by an outside web-design expert as minimalist, or were included in an online gallery for inspirational minimalist sites, like siiimple. Remember that just because a design technique is popular doesn’t necessarily mean that it always supports user needs and optimizes profitability or other business objectives. In this study, we analyzed sites that are known to employ minimalist design, not sites that are known to be highly profitable. As discussed further below, our other research suggests that while some of these design ideas can support business goals, others can hurt your profitability. Defining Characteristics of Minimalism So what features were present in most of these designs? We included a feature among the defining characteristics of minimalism if it was present in at least three quarters (75%) of the websites that we analyzed. Flat Patterns and Textures Used in 96% of sampled interfaces (but often ineffectively) Over the past few years, there has been an overwhelming shift in the design community away from skeuomorphism, towards purely digital representations of things without physical metaphors. Flat interfaces don’t make use of any of the obvious highlights, shadows, gradients, or other textures that make UI elements look glossy or three-dimensional. Some designers believe that the flat-design trend grew out of the popularity of minimalist UI design (Müller, 2014). The two trends are extremely compatible; removing gratuitous shadows, gradients, and textures falls in line with minimalism’s primary goal of eliminating the unnecessary. In our sample, 96% of the minimalist sites were flat. The two tend to co-occur so frequently that the phrase ‘flat design’ is often (misleadingly) used interchangeably with ‘minimalist design.’ The trends are similar, but not the same. Flat design generally refers to the textures, icons, or graphics in an interface. Minimalist design applies to the larger or overarching content, feature, and layout strategies. An interface may be flat without being minimalist. Jeet.gs The Getting Started page for Jeet.gs grid system API features a completely flat interface, including ‘ghost buttons’ for copying code snippets. (Ghost buttons are empty buttons with a thin rectangular border and text.) Flat ghost buttons can have legibility problems, and they break away from the established convention of what a clickable button should be. (However in this case, the buttons highlight when the mouse passes over them, providing a dynamic signifier of clickability. Also, the buttons show a tiny 3D effect when clicked that adds a small sense of physicality. Thus, the interactive user experience adds depth to the flat interface elements.) As we’ve discussed in other articles, flat designs often fail to communicate to users which elements are selectable or clickable. We believe that a better approach is a compromise between flat and skeuomorphic—a mostly flat design, but with clickable elements that users can recognize easily. Considering that flat design is the design idea most likely to be used incorrectly and degrade the user experience, it’s unfortunate that it’s the most prevalent of the main characteristics of minimalist web design. Limited or Monochromatic Color Palette Used in 95% of sampled interfaces In most minimalist interfaces, color is used strategically to create visual interest or direct attention without adding any additional design elements or actual graphics. With less visual information vying for a user’s attention, color palettes are more noticeable and will be more influential in a site’s impact. Minimalist color palettes are a movement away from the clashing, loud colors of the web design popular in the 2000s. Subdued color schemes are intended to avoid upstaging the content—which, in the case of images, can still be brightly colored. Many minimalist designs are either monochromatic, or use only one bold color as an accent, and use it to—sparingly—highlight the most important elements of the site. These accented elements are usually clickable. When assessing the use of color in the sample websites, we looked at background colors, logos, navigational elements, iconography, and typography, but did not consider content images (like photographs) as part of the color palette. Almost half of the websites sampled (49%, 55 websites) used a monochromatic color palette. Almost as many websites used one or two accent colors in an otherwise monochromatic color palette (46%, 52 websites). Of those 55 monochromatic sites, 51 sites were grayscale-–they used exclusively white, black, and gray shades. Freres d'Encre The monochromatic homepage of Frêres d'Encre, a French tattoo studio, creates a dramatic aesthetic. Solo Solo, project management software, uses a monochromatic but not grayscale color palette. Kayak Travel metasearch engine Kayak uses orange to highlight its logo and the actionable Search button. The popularity of this particular characteristic is an improvement in the sense that it’s moving interfaces away from the loud, clashing color schemes that used to dominate the web. However, there are some considerations to keep in mind when applying a limited color palette: Make sure your color scheme uses enough contrast to be legible to people with limited vision or color blindness. Use accent colors intentionally and consistently to highlight very important information or primary actions. Restricted Features and Elements Used in 87% of sampled interfaces Designers who adopt a minimalist design strategy must consider each element in their interfaces and eliminate any that are not required to support the core functionality or message of the website. An ‘element’ in this context could be any individual unit of the interface: including but not limited to: menu items links images graphics lines captions textures (like gradients) colors fonts icons It’s difficult to assess whether an interface includes ‘unnecessary’ elements without directly asking the sites’ designers what they left out, and without knowing the target users and tasks. To make this characteristic measurable, we focused on assessing whether or not the interface contained graphic elements that did not serve any obvious purpose. In our sample, 87% of minimalist sites avoided gratuitous graphic elements. Alan Trotter's portfolio The portfolio of fiction writer Alan Trotter is severely minimalist. By default, the site doesn’t even reveal his full name: visitors must click the underlined text to get to more details. This strategy might achieve an ‘edgy’ aesthetic, but it’s a big gamble to hide the most important content. The more stuff there is in a user interface, the more stuff users need to process. A favorite mantra of minimalist designers is, “subtract it till it breaks,” which really means, “unless the absence of an element would be serious problem, get rid of it.” This is where designers can get distracted by the pursuit of a clean, modern, minimalist interface—and end up cutting out useful content. Adhering to a rigidly utilitarian approach can produce streamlined designs by eliminating distracting features and content. Just make sure you aren’t making your users’ primary tasks more difficult by removing or hiding content they need. It’s hard to understand a cluttered design or a system overflowing with extraneous features. But it’s even harder to understand a design that doesn’t provide sufficient scaffolding to explain its features or structure. Maximized Negative Space Used in 84% of sampled interfaces Removing or excluding elements from a web page necessarily leaves empty space. Negative space (also called white space) is the name given to the empty areas of an interface. Negative space has been called “practically synonymous with” and “the backbone of” minimalist interfaces. Many minimalist designers use it as a tool to try to direct users’ attention and allow them to digest content more easily. Considering these strong assertions of negative space as the defining characteristic of minimalism, it’s surprising that only 84% of the sample sites used substantial amounts of negative space in their designs. Thomas Buffet's portfolio The screenshot above shows the homepage of French designer Thomas Buffet as seen full-screen on a 15-inch MacBook Pro. Above the fold, the page is almost entirely negative space. In this case, the site is still able to answer the two primary questions people would ask upon arriving at this page: ‘who are you,’ and ‘what do you do’. But this approach will not work in all contexts. Appropriate use of negative space can help draw attention to important content. When deciding how to lay out negative space in your designs, be sure to consider the following questions. How will adding or removing negative space impact the communicated hierarchy of the page? How will the negative space impact what content is displayed at the top of the page? The page fold still matters: users will scroll if they have a reason to, but they pay more attention to the content at the top of the page. How will the negative space impact the interaction cost: will users need to work harder to get to the information that they need? How will the negative space need to change at varying resolutions? Dramatic Use of Typography Used in 75% of sampled interfaces Like color, bold or large typography becomes another tool for communicating meaning when there are few elements on the page. Effectively exploiting interesting typography can help compensate for having fewer elements like photos and graphics, and can make a minimalist design feel more visually engaging. Variations in font size, weight, and style become crucial in helping users understand the hierarchy and relative importance of text. Of the 112 sampled minimalist sites, 75% used typography to convey meaning or create visual interest. Alexander Engzell's portfolio The portfolio of art director Alexander Engzell uses bold typography on his tagline to create visual interest without adding extra graphic elements to the page. However, the text is an image file, which adds to page load time. Also, unlike the Buffet portfolio, this page doesn’t directly explain whose portfolio this is, or what this person does. Users have to click the INFO link in the upper right corner to access that information. Using images for text may allow you to use custom fonts, but it will add to page load time, will require extra considerations for scaling at different resolutions, and can cause accessibility issues. Using web fonts is a better solution, but bear in mind that web fonts can have detrimental performance effects as well. Remember, drawing attention to bold typography is only useful when that text communicates meaningful information. Beware of going overboard on the fancy typography: users can ignore overformatted text if it looks too much like advertising. There’s a delicate balance between meaningfully bold typography and distracting typography. A great designer will come down on the right side of this balance, but if your designers are less skilled in employing advanced typography it’s safer to err on the side of caution. Related Trends Some designers also include the following characteristics as minimalist. Based on our research however, these seem to be design trends that often co-occur with minimalism, but are not actually defining characteristics—they occurred in fewer than 75% of the sites that we analyzed. Large Background Images or Videos Used in 57% of sampled interfaces The presence of a large background image or background videos (enabled by HTML5) is one of the most debated characteristics of minimalist Web design. From a theoretical perspective, a large background image certainly seems contradictory to the core minimalist spirit of reducing non-critical elements. Despite this, large background images and videos are popular in minimalist designs—we found that 57% of our sample included them. Monte Re The homepage of Monte Ré, an Italian fruit producer, uses a full-width background-image carousel within an otherwise pure-white minimal site design that includes ghost buttons. While the text is technically distinguishable from the background images, it’s unpleasant to try to read and understand the copy while colorful images circulate behind it. Depending on the context and the designer’s priorities, an argument can be made for the ability of large background images/videos to create an impact on users’ perception of brand. When a background image is used for a carefully considered, strategic reason, sticking to minimalist-design strategies can help restrain other page elements from competing or clashing with the background. Additionally, some designers may hope that loud background images will keep otherwise minimalist designs from being too boring or stark. If you choose to use a background photo or video with your minimalist design, keep the following points in mind: Make sure the images or videos you choose serve a real purpose or help people understand the site—otherwise they’ll just distract your users from your actual content. Make sure the text is both legible and readable if you want people to understand it. Remember, legibility is the extent to which users can distinguish individual letters. Readability is how well they can process words, phrases, and scan the text. If you’re using a carousel or video, you need to test every possible background—every image or frame of the video, and at a variety of screen resolutions. Be aware of how big images and videos impact performance. Make sure you’re taking an adaptive approach so your mobile users aren’t waiting for a desktop-sized retina photograph to load over their network data connection. Don’t autoplay videos. Many users are frustrated by videos that play automatically without their consent, especially if those videos have audio. Avoid creating Harry-Potter-painting-style videos of people slowly moving around in the background. You don’t want to distract your users and creep them out. Grid Layouts Used in 43% of sampled interfaces In our sample, we found that 43% of the interfaces used grid layouts to organize content. While this percentage indicates it is a popular design pattern among minimalist designers, it seems that grid layouts are certainly not ubiquitous in their designs. When grid layouts are used in minimalist UI designs, it’s generally for two reasons: Grids are an effective method of organizing homogenous content on the page linearly without adding any visual elements; and Grids are particularly helpful when designing a responsive website—another trend that is separate from minimalism but often co-occurs with minimalism. Paprika The graphic design agency Paprika organizes its projects in a grid, but is not responsive. Sea Chant portfolio The minimalist portfolio of photography studio Sea Chant organizes photographs in a grid at desktop screen widths. Sea Chant portfolio At 400px wide, the Sea Chant portfolio is reduced to a single column of content and removes all hover effects. Circular Graphic Elements Used in 16% of sampled interfaces Some design experts have suggested that circular and rounded graphic elements could be a component of minimalism, but we found only 16% of our sample used them. They seem to be more of a fad. Gesture Theory The homepage of Gesture Theory uses multiple circular elements in its minimalist design. Hidden Global Navigation Used in 13% of sampled interfaces Many websites currently use severely reduced global navigation elements in their desktop presentations, such as the now infamous hamburger menu. This can sometimes be the result of an incomplete mobile-first design strategy that fails to consider the needs and extra screen space available to desktop users, but it can also result from overzealous minimalism. Hiding infrequently accessed items might make sense for your goals, but make sure you aren’t hiding tools or links that are critical to the tasks you want your users to perform. Be particularly cautious if your site has large amounts of content or categories. Visual Soldiers portfolio The desktop portfolio site of design agency Visual Soliders uses a hidden global navigation under a hamburger menu. Visual Soldiers portfolio These few menu items hidden in an overlay could have been made visible globally, but were probably hidden to achieve this ultra-minimalist effect. Commonly Occurring Characteristics of Minimalist Interfaces Our analysis of 112 websites revealed the following defining characteristics for a minimalist website: Flat rather than skeuomorphic patterns and textures Use of a limited or monochromatic color palette Strictly limited features and graphic elements Maximized negative space Dramatic use of typography to communicate hierarchy or create visual interest Some of these characteristics are used almost ubiquitously in minimalism, and some occur slightly less frequently in minimalist interfaces; however, all of the defining characteristics were present in at least 75% of the minimalist sites that we analyzed. In our research, we also identified several related trends that were present in less than 75% of the sampled sites. Large background images or videos Grid layout Circular graphic elements Hidden global navigation Conclusion 2000s interface design was predominantly cluttered and overwhelming. For years, we’ve been advising against this kind of “maximalism”. Feature bloat and gratuitous content is always bad for users. In theory, minimalism should move us away from maximalism, and result in streamlined content and more efficient user task flows. In practice however, we’ve seen minimalism mutate into a superficial visual trend as designers copy popular minimalist characteristics without seriously considering if they support their own site goals. Just as flat design is a reaction to skeuomorphism, minimalism is a reaction to maximalism. In both cases, we strongly advise a balanced approach. A minimalist design strategy can be a powerful tool, but only when it’s framed by the needs of your users—minimalism for minimalism’s sake alone doesn’t help users. (Minimalism is one of the design strategies discussed in the full-day course on Generating UX Redesigns From Broad Design Principles.) Share this article: Twitter | LinkedIn | Google+ | Email Learn More Research Reports Strategic Design for Frequently Asked Questions Full Day Training Courses Top Web UX Design Guidelines The Human Mind and Usability UX Basic Training Web Page UX Design: Optimizing Pages to Deliver on Business Goals Visual Design for Mobile and Tablet: Day 1 and Day 2 Articles The Fold Manifesto: Why the Page Fold Still Matters 10 Usability Heuristics for User Interface Design Banner Blindness: Old and New Findings Scaling User Interfaces: An Information-Processing Approach to Multi-Device Design Teenage Usability: Designing Teen-Targeted Websites How Iterative Testing Decreased Support Calls By 70% on Mozilla's Support Website by SUSAN FARRELL on August 2, 2015 Topics: Agile Prototyping User Testing Summary: User research with data mining and paper prototyping quickly led to measurable success for one of the busiest support websites in the world. One of the more frequent questions that we get asked by our clients or by our seminar attendees is: "Is a redesign for usability worth it?" In other words, what is the return-on-investment (ROI) of a redesign? In recent years, we've seen a decline of the ROI for usability, most likely due to approaching a ceiling of usability improvements: With more than 20 years of web-design experience under their belt, designers have learned a few things and fixed quite a few problems. But a redesign for usability can still save you a significant amount of money. In this article we tell the story of Mozilla's support site, which was able to get a 233% improvement out of a redesign for usability. (Here's an explanation of how the improvement score was computed.) Thus, we can say that the redesigned site was about 3 times better than the original site. The cost involved in this redesign was 14 person-weeks or 560 person-hours. Is it worth spending 14 weeks to become 3 times better? This depends on the hourly rate for your staff and the value of your site and thus cannot be answered in general. However, for Mozilla, which gets huge amounts of traffic, the improvement is certainly worth the trouble, as it would be for almost any big site or company that does substantial business online. So how did Mozilla do it? What was involved in this redesign? Who is Mozilla Mozilla is a large, open-source, worldwide, software organization staffed by both employees and volunteers. It makes one of the most popular web browsers (Firefox), along with other useful products and services. Pain Points Millions of people come to Mozilla's support website every year to get help with Firefox and other products and services. When users cannot get an answer from the information existent on the site, the Mozilla staff aims to help by answering each person's question in the user-support forum, and to respond to questions as quickly as possible. As Mozilla's website had grown organically, users were having difficulty finding information and the support staff couldn't keep up with the number of questions in the forums. Specifically: At about 400 pages or so, the help documentation had become a difficult place in which to locate particular information quickly. The forum staff (employees and volunteers) were having trouble responding to questions as quickly as they wanted to, because of the increasing number of incoming questions for the rapidly updating Firefox. The forum overload was also making it difficult for staff to find time to write new help articles for frequently asked questions. More articles could help, but the growing number of articles also caused more findability problems. Action Plan Mozilla decided to invest in discovery and iterative usability testing in order to improve the IA of its support site. The research questions aimed to understand (1) how people (users and staff) used the support system; (2) which types of information were really important. Top research questions Mobile Faceted Search with a Tray: New and Improved Design Pattern by KATHRYN WHITENTON on July 26, 2015 Topics: Mobile & Tablet Search Visual Design Summary: Displaying faceted-search controls on mobile devices in a ‘tray’ overlay is a new effective solution to the challenge of showing both results and filters on small screens. Recently, a few big brands have introduced a new method for displayed facet controls on mobile devices, by placing them in a ‘tray’ overlay on top of the actual results. This new design approach addresses a major shortcoming typical of many faceted search displays on mobile devices: the placement of facet controls on a separate screen, which forces users to work harder to understand how the facet controls affect the results set. But before understanding why this is the case, let’s go back to the basics of faceted search. What Makes Faceted Search Special? Faceted search lets users refine a set of results by applying filters that comprehensively describe the search space. Such narrowing is invaluable for users who need to find something specific within a large content set. This type of search has become common for ecommerce and travel websites, as well as many different types of document and media collections. A faceted system includes two critical elements: Simple controls to construct sophisticated searches: Providing familiar controls like drop-down menus and checkboxes with natural-language labels empowers ordinary users to narrow down a large set of results to a small set that meets their exact criteria—without any special knowledge of Boolean logic or query syntax. Simultaneous display of the facet controls and the results: Showing both the filters and the results at the same time makes it easier for users to understand the relationship between the two; ideally, this is reinforced by dynamically updating the results set as soon as the user selects a filter criteria. The simple filter controls are the most obvious component of a faceted system. However, the importance of simultaneous display should not be underestimated. Long before faceted search became popular, we had ‘advanced search’ screens with similar controls for creating complex search queries. The big difference introduced with the first faceted navigation system was in displaying the facet controls and the results at the same time, which makes the effects of each filter instantly visible. This innovation embodies 2 of the 10 usability heuristics: provide rapid system feedback, and offer users control and freedom. Challenges of Displaying Search Facets on Mobile Devices Faceted search was originally designed for desktop and laptop users. Translating this experience onto a mobile device is difficult, because the very thing that makes faceted search so helpful to users – being able to see the filters and the results at the same time – is difficult to achieve on a small screen. There simply isn't enough space to show a full set of facets and a decent number of detailed results simultaneously. Until recently, most mobile designers haven’t even tried to display facets and results at the same time, instead opting to place them on separate screens. But this solution forces users to navigate to the facet-control screen, make their selections, then navigate back to the results set to see the effects of their selections. The istockphoto.com mobile website illustrates the typical approach to providing faceted search to mobile users. The results page includes an icon that users can tap to open the facet controls (assuming they can figure out what the icon means). Once the facet controls are displayed, users can select different filtering criteria, but it’s not obvious how the results will be affected by the facet selection because: None of the results are shown on this screen. The number of files, displayed in the page header updates too slowly. The header showing the number of files may not even be visible once a user has scrolled down to expand and select the facets below. Due to these limitations, users have to return to the previous screen in order to find out whether their filter selections were effective at targeting the best results and whether they have narrowed the results set down to a manageable size— or if perhaps they've applied such restrictive criteria that no results match. Mobile search results and facet controls on iStockphoto.com Left: Like many mobile search designs, iStockphoto.com does not display faceted search controls on the actual search results page. Instead it requires users to navigate to the facet controls, in this case via a cryptic icon composed of lines and circles on the right edge of the Search bar. Right: The facet controls take up the entire screen, and in order to see the effects of their selections, users must navigate back to the results screen. New Solution: ‘Tray’ Overlay to Display Facet Controls Recently a new approach to providing faceted search for mobile users has appeared: showing the facet controls as a ‘push-out’ style tray on top of the search results. This design allows for continuous visibility of results: even while the facet controls are open, some information about the results is visible in the background. The Amazon iPhone application and eBay’s mobile website both now use an overlay to display facet controls on the same screen as the search results. Mobile Facet Tray Overlay Examples Amazon’s iPhone application (left) and eBay’s mobile website (right) both recently introduced an overlay to display search facet controls on the same screen as the search results. Design Pattern Elements Both the Amazon and eBay designs include several details that combine to create a good user experience: Once activated, facet controls appear in a vertical panel overlaid on top of the results screen. The results are always visible in the background, and can be seen to change as the user makes her facet selections. (However, in the case of eBay, users can hardly make out what the results are. Amazon’s design is better because users actually get useful information from the background.) The total number of results is always visible, even if the user has scrolled down a long list of facets. (Amazon accomplishes this by fixing the header at the top of the screen so that it remains visible even as the list of facets scrolls up or down). A translucent gray shadow slightly obscures the underlying results and ensures that the facet controls stand out. The facet panel appears at the right edge of the screen, leaving the left edge of the results visible. (This is helpful because the left edge is more likely to have meaningful content; with Amazon you can actually see the product images.) (You may also notice that both Amazon and eBay use actual words – Filter and Refine – as the commands to access facets, rather than a special symbol. Any of the labels commonly used for faceted navigation – narrow your results, refine, and filter – are far more understandable than cryptic icons, and definitely worth the extra space. ) Why Is Simultaneous Display of Results and Facet Controls Important? In usability testing, I am always amazed at how successful people are at immediately understanding and using faceted search screens, which tend to include many different elements and controls. As long as the controls are displayed properly, most people jump right in to creating and refining their queries. Instant results are an important part of the process because they allow users to see right away if they have applied the wrong filter, or applied overly narrow criteria that eliminates too many options. Both of those errors are very easy to recover from if you can instantly see the effects of your actions, but without this visibility users can end up in a tedious cycle of pogo-sticking between the results and the filters. The facet ‘tray’ approach illustrated by Amazon and Ebay doesn’t provide complete visibility, since only a small part of the results screen is visible. But these creative solutions offer at least some visibility into the effects of applying a filter. Users may still find that they need to close and re-open the facet controls, but this approach feels more like expanding a part of the current page, rather than jumping back and forth between different pages. Find out more about the best approaches for visual displays on smaller screens in our full-day courses about Indicators, Validations, and Notifications: Pick the Correct Communication Option by KIM FLAHERTY on July 26, 2015 Topics: Applications Standards Summary: Status feedback is crucial to the success of any system. Knowing when to use 3 common communication methods is key to supporting users. In interaction design, a system, whether an application, website, or piece of hardware (anything from a smartwatch to a thermostat), should always keep users informed, by providing appropriate feedback. Ensuring that the state of the system is always visible is one of the 10 usability heuristics for interface design. Information about system status, such as error messages and notifications of system activity, allows users to fully understand the current context. The best way to communicate system status varies depending on several key factors: The type of information being communicated The urgency of the information — how important it is that the user sees it immediately Whether the user needs to take action as a result of the information Three common approaches for status communication include validation, notifications, and status indicators. These terms are used sometimes interchangeably in product design, but they stand for different communication methods that should be used in different circumstances. Understanding the differences between them will help you sharpen your feedback to users by choosing the best option for each need. Indicators An indicator is a way of making a page element (be it content or part of the user interface) stand out to inform the user that there is something special about it that warrants the user’s attention. Often, the indicator will denote that there has been some change to the item represented by that element. Although, as we’ll see later, indicators are used quite frequently to signal validation errors or notifications, they can also be used on their own. Indicators are visual cues intended to attract users’ attention to a particular piece of content or UI element that is dynamic in nature. (If something always looks the same, it’s not an indicator, no matter how flamboyantly it’s designed.) There are at least three possible ways of implementing indicators: Oftentimes, but not always, indicators are implemented as icons. Easily recognizable icons can make very effective communication tools. Typographical variations can also be used as indicators; examples include the common convention of boldfacing unread email messages or color-coding stock symbols in an investment account if their price has changed substantially. Though less common, enlarged size or animation (e.g., vibration) can also be used to make certain items stand out from the crowd and thus serve as an indicator. Yelp used a green-tag indicator in the search results to indicate that Tea Market had a special deal running. This indicator communicated additional information about Tea Market. Characteristics of indicators: Indicators are contextual. They are associated with a UI element or with a piece of content, and should be shown in close proximity to that element. Indicators are conditional— they are not always present, but appear or change depending on certain conditions. For example, a stock-performance indicator, such as the one in the American Century example below, may change to indicate if the stock price is increasing or decreasing. Additionally, the tag indicator in the Yelp example above only appears if there is a deal at that business. Indicators are passive. They do not require that a user take action, but are used as a communication tool to cue the user to something of note. American Century Investments used a conditional indicator to provide information regarding a specific stock’s performance. When the daily change was negative, the indicator was a red arrow pointing down. When the daily change was positive, it showed a green arrow pointing up. The condition of the stock performance impacted the indicator that was shown next to the price. Indicators can introduce noise and clutter to your overall interface, and may distract users, so it is important to consider how many (if any) indicators to use in your design. Consider the following when deciding if an indicator is appropriate: How important is the information to the user? Is it worth taking up space on the page to inform the user? How often is the information used? Would the user expect to see the information? Would it be missed if it weren’t provided? How important is it for the application that the user discovers the information? Validations Validation messages are error messages related to users’ inputs: they communicate whether the data just entered was incomplete or incorrect. For example, in e-commerce systems, validation messages often involve information such as name, billing address, and credit-card information. Cobragolf.com provided a validation message that clearly indicated which field was in error. The message however was complex and confusing. A better message might say “Please enter a valid email address.” Characteristics of validation: A user needs to take action to clear the validation message. The information in the validation message is contextual and applies to a specific user input that has a problem. The way in which validation should be implemented varies based on the unique needs of the form. However, in general, if the user’s input is incorrect, the system should inform the user by providing an identifiable and clear message that aids in correcting the error. Validation messages should follow the guidelines for error messages rather than simply identifying the problem, they should tell users how to fix it. For instance, don’t state “Field is blank.” Please enter your street address” is more polite and directs to a solution. Since validation is contextual, it can be helpful to use an icon indicator along with the validation message to help communicate which input(s) are missing or need corrected. Bestbuy.com provided a helpful validation message telling users how to fix the problem and also used an icon indicator and a different color to attract users’ attention to the field that needed correction. Notifications Notifications are informational messages that alert the user of general occurrences within a system. Unlike validation, notifications may not be directly tied to user input or even to the user’s current activity in the system, but they usually inform the user of a change in the system state or of an event that may be of interest. In the case of email, social networks, and mobile-phone applications, notifications can even be delivered while a user is away from the application. Notifications can be contextual —applying to a specific UI element— or global —applying to the system as a whole. The Facebook App used a contextual notification in the news feed to communicate that newer stories had been added to the feed. This notification does not require the user to take action. Characteristics of notifications: They are not triggered by users’ immediate actions. They announce an event that has some significance to the user. There are two main types of notifications, which differ based on whether the user is required to act upon the notification: Action-required notifications alert the user of an event that requires a user action. In this sense, they are similar to validation, but since they were not sparked by the user’s own action, they require a different design. Action-required notifications are often urgent and should be intrusive; for instance, they could be implemented as modal popups that interrupt the user, forcing immediate attention and requiring an action to be dismissed. The Mac operating system used a notification to inform users of available system updates. The user had to explicitly dismiss it from the screen, by opting to either install the update or to be reminded again at a later time. This is an intrusive notification that requires that the user take action. Passive notifications are informational; they report a system occurrence that does not require any user action. Many notifications in mobile apps are passive: they usually announce an event of potential interest to the user. Passive notifications are typically not urgent and should be less intrusive. A typical implementation of a passive notification may be a badge icon or a small nonmodal popover in a corner of a screen. Passive notifications can easily be missed, since they require no user action. When the information provided by the notification is key to the understanding of the system, an easy-to-ignore passive notification can be problematic. Adobe Creative Cloud used a nonintrusive passive notification to inform the user of an available application update. This notification appeared on screen for several seconds before disappearing. The user did not need to take any action on it. Uniqlo.com used a nonintrusive passive notification to provide feedback that an item was added to the shopping cart. No action was necessary to dismiss the notification. Such notifications sometimes cause issues for e-commerce shoppers who do not notice the brief messaging. Users who miss the message may respond by adding an item to the cart multiple times, or by disrupting their shopping flow to check the cart to see what items were added. Notifications have the design challenge that they are not the immediate and obvious result of a specific user action. On the contrary, the user is likely in the middle of doing something different and may not be thinking about the issue raised by the notification. This requires notifications to establish more context and provide users with sufficient background information to understand what the notification is about. (In contrast, with a validation, the user has just done the thing that needs to be corrected. Thus, the validation message doesn’t need to educate users about the task at hand. For example, if an e-commerce checkout form has a field for a credit-card expiration date that was left blank, the validation message doesn’t need to say “Please provide the expiration date for the credit card you want to have charged $29.90 to pay for the blue sleeveless dress you are in the process of buying on Uniqlo.com.” However, a notification the following day that the dress has been shipped from the warehouse would need to say more than “Your package has shipped.”) If a notification is contextual and relates to a specific element in the interface, an icon indicator on the element can communicate where that notification applies and catch the user’s attention. For instance, an indicator badge on a mobile-app icon shows that the user has received a notification from the corresponding app. The iPhone messaging app created a notification to communicate that a new message was received. Along with the notification, an indicator badge was placed on the messaging-app icon to communicate where the notification applied. To clear the indicator, the user had to view the message. Mint.com used an indicator together with a notification to communicate that an account needed attention. The warning indicator (1) appeared in close proximity to the summary of the account that needed attention, while the notification (2) appeared in the central area of the page with other important information. The actual text in the notification message could have been more helpful, though. Picking the Right Communication Option Is Important Using the wrong communication method can have a negative impact on the users’ experience. Let’s refer back to the scenario above where Yelp utilized a green-tag indicator in the search results to indicate that Tea Market had a special deal running. This information is contextual and important to users who have specifically searched for a place to have tea. You may think that an alternative way of alerting users of potential tea deals would be to send them a notification when such a deal has become available. Wrong! A notification sent irrespective of the current user goal would likely be ignored, and may even annoy users because it will disrupt their current task and be irrelevant to their current needs. (In general, any type of ad tends to be ignored unless it is related to the users’ aims and mindset.) Alternatively, a toast (a small nonmodal popup that disappears after a few seconds, like the New Stories one used by the Facebook app), while appropriate for passive notifications, would be a bad way to implement an error message, be it validation or otherwise. In fact, one of our mobile users spent 5 minutes waiting for some content to load only because she hadn’t notice the little error message presented at the bottom of the screen that quickly faded away after 5 seconds. Allmodern.com used an action-required notification to communicate that a product was saved as a favorite. For a user that is saving a lot of items to their favorites, this can be a bothersome and intrusive way of providing feedback. This may be better communicated by showing a passive nonmodal popover in the corner of the screen that can be seen, but doesn’t require the user to take action to clear it. Conclusion Remember the key differences between the three communication methods are: Indicators provide supplementary information about a dynamic piece of content or UI element. They are conditional —that is, they may appear or change under specific conditions. Validations are tied to a user’s action or input. Notifications are focused on system-related events. These differences are summarized in the table below: Validation Notifications Indicators Global vs. contextual: Related to a global system event or to a particular page element Contextual Global or contextual Contextual Passive vs. requiring a user action Action required Action required or passive Passive Triggered by user action vs. system event User action System event User action or system event Understanding when and how to use each of these feedback tools is important in order to build consistency in the communication to users. By assessing the type of information delivered, we can determine the correct mechanism to use. How do users and staff interact with the support system? Which problems are the most important to address in the website redesign? What is the most-wanted information? Which words do people use when they search? Which desired information seems to be missing? How can the information best be organized and presented in order to match what users most want to do on the website? The UX Team The UX team consisted of 3 members: Susan Farrell, Senior User Experience Specialist, Nielsen Norman Group. Susan conducted the research, did data discovery, analyzed data, and made design-change recommendations. Crystal Beasley, Product Designer, Mozilla. Crystal led the project, coordinated with Mozilla stakeholders, and played the computer during paper-prototype research sessions. Bram Pitoyo, Web User Experience Designer, Mozilla. Bram designed the task flows and prototypes and supervised the interaction-design changes to the website. He also tested the old IA so we could compare results with the tests of the proposed new IA. The Steps We employed a variety of research methods intended to help us understand users' needs and also to redesign the IA and the workflow on the support site: Doing data discovery and analysis, to understand how users behave on the support site and why In particular, we looked at a variety of data sources to identify users' top tasks, as well as difficulties that they had with the current site. The table below summarizes the methods that we used. Headings Are Pick-Up Lines: 5 Tips for Writing Headlines That Convert by HOA LORANGER on August 9, 2015 Topics: Writing for the Web Summary: Attractive headlines and titles are critical in making the right first impression. Concise titles that sound authentic and relevant get noticed. A headline is often the first piece of content people read. And often it is the ONLY thing people read. If you want your encounters with people to be successful, make sure to write solid headlines. Have you ever tried to retell a story you read only to realize the details are fuzzy because you had only read the headline? This is a sign of a memorable headline. Good headlines entice readers and are critical to the success of your website. Below are 5 tips for writing engaging headlines: 1. Make sure the headline works out of context. We often think of headlines as being connected with the associated story. However, on the web, headlines usually appear out of context in places such as search results, social-media streams, blog posts, and news feeds. Headlines must be strong and descriptive, especially when standing alone, stripped of supporting content. Can you guess what the heading below refers to? New times call for new decisions The headline contains low information scent—that is, few cues to suggest what the story is about. People rely on visual and textual cues to perceive the usefulness of the content. They don’t spend time making inferences and trying to figure out items that don’t make immediate sense. Minimize cognitive load to maximize usability. Treat headlines like microcontent—phrases that can be scanned and still give readers a clear idea of the underlying information. 2. Tell readers something useful. Consider the decision-making process from the users' point of view. When faced with a barrage of links, their time is best spent clicking on headings that have the highest probability of providing value. Useful headings are specific. They provide facts or information that pique the readers’ interest. Avoid broad and generic headings. They don’t provide value or differentiate you from your competitors. Tell people something they don’t know and that benefits them. Headings that contain user-centric language are much more refreshing than vague ones that require guesswork. This headline is too broad: Make better, faster decisions with data visualization Contrast it with: Data visualization helps you detect and prevent fraud faster The second one is better because it is more specific and provides a concrete benefit that might arouse the reader’s curiosity. 3. Don’t succumb to cute or faddish vocabulary. Minimize hype and idioms (expressions). They are often vague, obscure meaning, and often change the tone of copy, usually for the worse. Consider this headline: Get the most bang for your buck with XYZ The headline above sounds pretty tacky and inauthentic, and degrades credibility. In addition, idioms such as “bang for your buck” often lack meaning to nonnative English speakers. Don’t be tempted to include overly informal language to sound modern and hip. It is much better to aim for clarity and authenticity. Keep your headlines straightforward by using familiar keywords. This is better: Increase productivity by 24% with XYZ Of course, there are exceptions to this rule. You can use specialized language when you address a specialized audience; in those cases jargon improves communication. However, before you sprinkle jargon all over your copy, verify that your entire audience truly understands it. 4. Omit nonessential words. The one place worth practicing being concise is in headlines. Spend time editing headlines to cut unnecessary words and tangled messages. Shorter headlines require less cognitive effort. And longwinded headlines don’t scale well to variable container sizes: they have a higher chance of being truncated when displayed on small mobile screens, for instance. Convoluted headlines like this lose readers: Caster, a technology company, buys Mitchell, with assistance from Jon & Smith, for $1.2B There are too many details that obscure the gist of the heading. The sentence also contains three commas, which create a jerky, start–and–stop effect. The headline can be made smoother by removing less important details, as in the versions below: Caster buys Mitchell for $1.2 billion –or– Jon & Smith orchestrates $1.2 billion deal for top technology firms 5. Front-load headings with strong keywords. One of the best ways to get traffic to your site is to front-load your headlines with keywords. Moving keywords to the front of titles increases the likelihood that they get noticed. Our eyetracking studies show that readers pay most attention to the first few words in lists. Don’t count on people reading the end of sentences. Let’s compare the following headlines: (1) Behold the new technologies for creating 3-D imagery and (2) Creating 3-D imagery gets easier with new technologies The first one runs the risk of not being read because the key phrase (creating 3-D imagery) is positioned at the end. Users must read the entire headline to understand its meaning. The second one is better. Moving the keywords to the front makes the heading more scannable. People can read only the first few words and still understand what the article is about. Conclusion Make a good first impression with short, keyword-leading headings that sound authentic, contain useful information, and make sense out of context. Try to follow all of these tips in one headline and you should notice a lift in user engagement.