A considerable amount of that success derives from the ongoing effort of Airbnb’s design team to create a user experience for its booking platform which surpasses that of other similar services.

Airbnb’s Landing Page (above the fold) as I am typing this

As a designer, I was always astonished of how Airbnb approaches their product design challenges and delivers a product that converts, for years now. So in this article, I’ll try to identify what makes their landing page different and why it is successful.

Visual Clarity and Minimalism

I strive for two things in design: simplicity and clarity. Great design is born of those things.” — Lindon Leader

Using colour contrast and shadows, the user interface is basically structured as two layers: The card, which contains the explanatory text and the Call-to-Action (CTA) button, forms the upper layer, while the rest of the page is perceived as the background layer.

Perceived layers of user interface

With little to no cognitive effort, users can identify the upper layer (card) as the area with which they can interact. The page as a whole does not overload the users with information, hence framing a clear interaction path for users who land on it.

Reducing the cognitive load the user needs for achieving his goals is of the utmost importance when designing for humans.

Let’s see how it compares to Booking’s landing page, in terms of visual clarity, by using predictive technology:

Measuring optical clarity of the landing pages (above the fold) for Booking.com and Airbnb via VisualEyes plugin

More clarity contributes to easier and driven scanning of information. Two metrics that can determine how an interface is efficiently designed for human interaction is Visual Complexity and Prototypicality. The conjunction of those two metrics affects the aesthetics processing of the user significantly and, thus, defines how he will interact with the interface.

More complexity requires more cognitive load. More cognitive load means less user engagement and, sequentially, less conversion and profitability.

Key Takeaway:

Airbnb has set an interaction focal point; therefore users have already determined where they will have to “lay their eyes” in order to forage information.

The Double Z-Pattern

The Z-Pattern (for people that read from left to right)

Humans have a natural reading pattern, which is applied when visual stimuli are present. Following the natural flow of eye-scanning a layout, the Z-Pattern complements better single-purpose webpages that contain only one CTA.

This specific pattern “traces” eye movement of the users, thus allowing for strategic placement of visual elements.

So, Airbnb used the Z-Pattern.

Twice.

Airbnb is setting focal points for their users, using the Z-Pattern

By utilising this layout, Airbnb’s designers achieved to establish a concise visual hierarchy. Areas of interest that convey some kind of message are pinpointed and brought up to the user’s attention. Below you can view how Airbnb’s Z-layout translates into attention heatmaps:

Attention Heatmaps generated in Figma, using the VisualEyes plugin.

Attention heatmaps suggest that the selected areas are drawing the most of the user’s attention in this particular instance.

As it is shown on the right image, the Area of Interest, in which the Card is placed, stands out three times more than the focal point of the hero image, while the CTA Button on the bottom right of the white card is almost three times more prominent than the card itself.

Key Takeaway

Airbnb augments, even more, the pre-established interaction path, by driving most of the attention to the single action -clicking the button- needed in order to “dive deeper” into their product.

Read more on the Z-Pattern here.

Priming

“Priming is a technique whereby exposure to one stimulus influences a response to a subsequent stimulus, without conscious guidance or intention.”

In other words, priming takes place when taking one’s memories or mental associations and using them to influence his future behaviour towards an upcoming matter.

The first image (Hero) someone views when interacting with Airbnb’s website

Almost all websites/products apply the “priming” effect to their audience in some way. In our case, the Airbnb landing page, visitors are subject to associative priming with the use of imagery. The design team is doing an excellent job in finding images that fit the company’s target group perfectly, so they can ensure that the desired emotions will be triggered.

Different target audiences, different hero images.

Which words pop in your mind when viewing the house on the left image? Maybe something like soothing, peaceful, refreshing, unique, care-free or even vacation-material?

Key Takeaway:

By “priming” their target audience, Airbnb’s designers use carefully-picked images to spark the emotions that could be associated with the subsequent expected experience: Staying in an awesome place for their vacation.

Read more on Priming from NN/g here.

Simple, strong and effective language

The text serves two purposes:

1. Validate the reason a user visited the website in the first place — “I’m where I was supposed to.”
2. Set a user goal — “Now I should search for places I want to visit.”

Using simple and clear language when communicating messages is essential in web design, as it establishes that your audience will not misinterpret your offering. Remember that communication is a “two-way street”:

“How well we communicate is determined not by how well we say things, but how well we are understood.” — Andrew Grove

Airbnb avoids unnecessary jargon, while choosing a set of words that their target audience will comfortably understand.

Key Takeaway:

Text content was carefully selected to disclose a specific message and the value of the product as quickly as possible, with few words in the play. All that without endangering that their audience will not understand the offering.

Conclusion

Insightful design is human-oriented and drives human actions and emotions. Airbnb’s design team found a very subtle -almost transparent- way to direct users’ actions on their website. The framing of the experience was so delicately designed that it accelerates interaction while keeping the primary user goal in mind.

Thanks for tuning in!

Written by: Thanos Dimitriou (via Medium)
Posted by: Situated Research

The post How Airbnb drives users’ actions with their landing page design — a UX analysis appeared first on Situated Research.

Online businesses in 2020 are forced to compete with large online and big box retailers, including Amazon, Wayfair, and brick-and-mortar stores like Walmart and Best Buy. In order to compete, e-commerce websites need to have a great user-experience (UX) and a streamlined buying process. Complicated checkout systems, over-cluttered product pages, and a lack of mobile optimization can severely inhibit a retailer from competing with large companies that have large, dedicated user-experience teams.

For the business owner, a well-designed e-commerce platform allows them to run their business easily, and can help streamline daily operations and customer service calls. Following are some tips and best practices to follow to help grow both organic traffic and sales conversions moving into 2020.

Search Engine Optimization (SEO) and UX

User Experience and SEO are critical components of any e-commerce site, especially as industry verticals are becoming more competitive. Digital advertising prices continue to rise and generating organic traffic is essential. In addition, cross-functional expertise is required to build a website that has good UX and SEO, as these fields continue to overlap. Google algorithms are becoming better at reading page content, placing priority on well-designed content that is not artificial. Prior black-hat tactics to raise search rank, like loading page footers with keyword-dense text, are now causing page ranks in search engines (like Google or Bing) to drop. Driving organic traffic can feel daunting and will take time, but will pay-off in the end with good SEO practices.

Website Sitemap

Part of good UX and SEO involves a well-designed sitemap. A sitemap reflects the website page and navigation structure, and hierarchically organizes website content. Adding a sitemap to Google Search Console is important for any e-commerce site, so that search engines crawl and understand product information. Google will be notified to any changes that you make to your site, which should happen on a frequent basis so content does not become stale. A sitemap not only makes the new content you post discovered quickly by search engines, but is reflected in the website navigation to users (helping tell them about the content on your website).

Simplify Page Content (and Clutter)

Clear, simple to understand content can raise engagement with your audience. In many instances, “less is more” – as said by Ludwig Mies Van der Rohe, a German-American architect that pioneered the minimalist movement. Your website visitors appreciate you communicating your message in a simple, yet efficient manner.

Similar to a cluttered advertisement, websites with distracting content, too much text, or an unclear message will lose their effectiveness. Over time, more and more things fight for our attention, and the average user has a shorter attention span. Users are willing to spend less time figuring out what you’re trying to get across, so get the job done with simple, clear messaging on your website. Design each page using proper keyword research and ensure landing pages have a clear engagement goal in mind so that your content has a purpose.

Optimizing Website Structure and User Journey

Supporting the intentions of website visitors is critical to raising conversion rates. Whether the goal is to sell a product or communicate an important piece of information, users should be able to fulfill their needs as efficiently as possible when using your website. If a product is difficult to find or a message becomes muddled, conversion rates will fall.

Part of optimizing the user experience (UX) of a website is to ensure that different types of users (personas) are able to achieve their goals efficiently: whether it be completing an action or finding information. A well-designed navigation structure will help the user journey, so that users can find what they want in the least amount of clicks (and with less confusion along the way).

Make Sure Your Site is Responsive

More people are becoming accustomed to purchasing groceries, clothing, home décor, and vehicles in the comfort of their homes. According to Forbes, Cyber Week had 62% of traffic coming from mobile in 2018, and fifteen percent of orders of were placed on mobile phones over the Thanksgiving holiday. Other sources place over 60% of website visitors (and climbing) using a mobile device like a phone or tablet. With this in mind, websites need to use a responsive design to be sure that content is optimized for mobile devices. The lack of an intuitive UX can result in user frustration, causing visitors to leave before completing a purchase on a website.

Website speed

Website performance contributes heavily to page rank and SEO, as well as usability. Research by Google describes how sites appearing on page one of Google display content in 1.19 seconds on average, while those on page two display primary content in 1.29 seconds. Some tools that can help you gauge and improve your website speed are Website Grader by HubSpot, Google PageSpeed Insights, and Pingdom Website Speed Test.

SSL (Secure Socket Layer) certificate

An SSL certificate authenticates your website to encrypt data that is being transferred from a website to users. SSL certificates ensure that a website is secure when visitors make purchases, which is important is the growing age of e-commerce. An SSL certificate encrypts sensitive user data, such as personal bank information, phone numbers and addresses.

Google Chrome, the most-used browser, has begun notifying users when a website is not fully secured with an SSL certificate. Fully encrypting data using SSL will provide users the best, most secure experience: ensuring that sensitive data is transmitted securely between the browser and web server. In a world where data breaches and security are becoming commonplace, users will trust and show loyalty to brands that value their privacy and sensitive information: highlighting the need for SSL certificates on websites.

Conclusion

Optimizing your website has a powerful effect on your marketing effectiveness, as well as your bottom line. Increasing conversions on your website, whether serving a goal of purchasing products or communicating information about your business (in a clear, efficient manner) will attract new customers and build loyalty. By optimizing the user journey for your website, different types of users can be served in a more effective manner.

The skill sets involved in designing a website continue to broaden and overlap. Experts in development, graphic design, SEO, UX, marketing and content writing need to know how their design decisions impact other areas of design. For example, designing a page around a keyword (SEO) impacts the website structure (UX), written content, and image content on the page (which can also impact website speed). A working knowledge of these fields is required to balance design decision trade-offs to make websites more effective, and this expertise can yield powerful improvements. In many instances, a simple analysis of a website by an expert can present some low-hanging fruit, which can have a huge impact on results.

To gauge how your website currently measures up, and identify some low-hanging fruit that can improve your website, request a free website marketing analysis from CueCamp. This report is in video form, generated by CueCamp’s team of experts to show the user-friendliness and marketing effectiveness of your website. Start out 2020 on the right foot, and reach out today.

Authors: Shannon Olear and Matt Sharritt, Ph.D. (Situated Research)

The post Boost 2020 Profit: E-commerce Experience Optimization appeared first on Situated Research.

Consider the ease of simply clicking a button within an attractive user interface, following the vehicle as it comes to your door and enjoying a smooth ride. For all the talk about their technology, their business model and their strategy, experience is what ensures customers continue to use the service. This idea has brought me to the concept of UX as strategy. It’s the idea that today, more than anything else, your UX will determine the success or failure of your software and your business.

A killer UX creates deeper customer engagement and loyalty.

A powerful and engaging UX doesn’t just make your product easier to use — it helps you engage more deeply with your customers, ensuring they stay loyal to you rather than looking to your competition. It builds brand loyalty and increases the chances that your customers will become your most effective advocates. Your UX also plays a key role in enrichment, ensuring your customers purchase additional products and services.

Your UX now forms the heart of your competitive differentiation.

I don’t believe I’m writing anything new in highlighting the importance of UX for software and applications. What is new, however, is how your UX can form the basis of your competitive differentiation. Building long-term, sustainable, competitive differentiation is one of the toughest objectives that executives face. In today’s digital world, the UX of your products and services plays a fundamental role. People engage with brands and companies via their software, and thus via their UX.

It is your brand, plus highly satisfied customers and fans, that will result not just in your business growing, but in building competitive differentiation. For example, it’s incredibly hard for other companies to match the loyalty of people who love Apple’s products and services. Even when other manufacturers build products that can compete on a technical and functional level, and that may even sell at lower price points, people remain loyal to the brand. Apple has been at the forefront of blending the concept of a brand with people’s identity, their image of who they are as individuals. Apple’s UX is at the very heart of this.

Making UX Your Strategy

At a high level, I recommend the following actions as you make UX your business strategy:

• Link your design metrics to your business metrics.

Those individuals responsible for the design of your software are now at the heart of the success of your business. As a result, we also need to ensure that their success, and that of your design, becomes linked to your business’s key performance indicators.

• Use the latest technology to build hyperpersonalized services.

Increasingly, in order to build these powerful experiences, organizations will need to use the latest technologies, from automation to machine learning. Customers now consider such personalization the norm, part of the overall experience of using your software. Airbnb’s personalized travel recommendations after you book a trip, such as offering a tour of Boston’s live music scene just after you reserve a stay in the city, is one such example.

• Build design systems.

Leading organizations such as Adobe and Salesforce have increasingly spoken about the need to create “design systems” to build these powerful user experiences. These are the systems and processes that enable them to scale their design best practices, rather than constantly reinventing the wheel. Forrester analyst Gina Bhawalkar points out that they also play a key role in linking your design team to your development team. She mentions that design systems should “also include the reusable code behind those design elements, and for this reason they should be created as a partnership between design and development teams.”

• Foster a product-centric culture and mindset.

If you listen to any of the founders of the UX-centric companies I’ve mentioned before, you will realize that they obsess about their products and the experiences their customers have with them. I would argue that if it’s not their top priority, it probably ranks very high. This is something easy to achieve as a startup, but much harder when you are, for example, a large financial institution that is used to thinking that your “product” is a checking account or a home loan, instead of the app or website your customers use to buy and manage those financial solutions. I often wonder whether the top executives at large firms even use their software products because some of them are so bad.

The democratization of technology helps drive better UX.

Ultimately, this is all part of what many people have referred to as the “democratization of technology.” This is because, fueled by cloud computing and new open-source technologies, it’s not just large companies or tech giants that can create these compelling user experiences.

So while effective UX design is one of the hardest aspects of product development, new technologies, tools and approaches are making it possible even for startup teams on a budget to build these compelling digital experiences. We’re seeing organizations take advantage of this to move nimbly and build light, attractive, mobile-first experiences. This is what it means to make UX your strategy, and in 2019, I believe it is the only way your organization will achieve success.

Written by: Alex Robbio (Co-founder of Belatrix Software and Member of Forbes Technology Council)
Posted by: Situated Research

The post User Experience Is Now Your Business Strategy appeared first on Situated Research.

Onboarding

The first thing your user experiences is onboarding. The knee-jerk response to onboarding is to darken everything besides the button the user should click on, make detailed instructions telling the user how this button is used, and repeat for each button.

Standard. Easy. Done. Right? Wrong.

‘I wish this app had a splash page,’ said no one ever.”

For one, nobody remembers all those tips along the way—they just click right through because they want to get to the experience. Secondly, you should have created an experience that’s so easy, the user’s only choice is to be right. If your design is so complex that users need a step-by-step walk through, you need to reconsider what you’ve created.

The best way to onboard a user is to not onboard them at all. Let the user dive right into the experience and play around, free of anxiety or fear that they might get lost and not know what to do.

Design by Georg Bednorz.

Tips for a better onboarding experience

1. Let users interact with your experience—don’t hide it behind some pay wall, info grab, or layer of instructions.
2. Don’t interrupt the user’s experience just because you want their data. Users know you make your money off their data, and they’re not as excited to give it out as you are to take it. If you’re going to ask for info, make sure the user feels like they’ve gotten something in return.

The best way to onboard a user: don’t onboard them at all.”

Form fields

Form fields are often the hardest to design, both from a design and a code perspective. From a design perspective they have to be fairly straight forward so they’re understandable, and from a code perspective they’re pretty much the farthest behind of all HTML elements in terms of ability to customize.

However, form fields are often one of the most crucial pieces of your site or application—they’re where you get info from your users. If your form fields create a poor experience for your user you need to reconsider what you’re doing.

Animation by Xavier Coulombe-Murray.

Tips for better form fields

1. Make sure your user always knows what form they’re interacting with. Getting up for something then coming back and forgetting what you were doing is totally a thing.
2. Use autofill whenever possible—especially on mobile. Not only does it speed up the process, but on mobile it also means less typing on that tiny mobile keyboard!
3. Give users real-time feedback about whether the info they gave you is valid, and what to do if they messed up.
4. Let the user know how far along they are in the process. Sometimes just knowing there isan end is comforting.
5. Design the experience to feel secure, especially if you’re asking for sensitive or private information.

Design the experience to feel secure.”

Copy

Right off the bat, I already know what you’re thinking—“I’m a UX designer. I wasn’t hired to be a copywriter!” And you’re absolutely right—you are a UX designer. But here’s the deal: The copy users read and interact with is part of the experience you’re designing.

Design by Igor Izhik.

Tips for better copy

1. Be creative, but make sure it also makes sense
2. Know your audience. A younger audience might be fine with your fun button copy but an audience that’s less tech-savvy probably just wants to know what happens when they click.
3. A/B test your copy—either online or with users in real life

404 errors

The 404 page is one of the most forgotten experiences outside of empty states. While it is our hope that users will never have to see the 404 error as long as the experience is developed well, we can’t just forget about it. The 404 page is one of the best places to turn a frustrated user into a delighted, returning user.

One of my favorite 404 error examples is in the Chrome browser. Not because it’s the most incredible visual design, but because it’s something you wouldn’t expect, it’s entertaining, and it distracts you from the fact that you don’t have internet—and, if anything, it makes you feel like you do.

However, I realize it isn’t the sexiest 404 error out there. For 404 error inspiration, check out this 404 inspiration post by Muzli.

Design by Viktor Kern.

Tips for better 404 errors

1. Make the user laugh or distract them otherwise.
2. Admit your failure.
3. Give your users directions on how to fix the situation or when you will have it fixed for them.

Empty states

Empty states are places users don’t expect to be engaged but are surprisingly delighted when they are. Only true UX pros take advantage of the empty states.

An empty state can include the view a user experiences when they first arrive on a screen, the view they see when they zero out their inbox, the loading screen, and many more. You can consider an empty state pretty much any state that has no data to interact with.

Design by Kim Sullivan.

For empty state inspiration, check out a site dedicated solely to the best of them: emptystat.es.

Tips for better empty states

1. Give directions on how to change the empty state to an active one
2. Make calls to action very clear, with well-written copy
3. Distract the user from excessive load times with dummy content or entertaining animations

Notifications

Lastly, when creating the best experience possible we can’t forget about notifications. Why does our user need to be notified, when do they need to be notified, and how?

So much data is involved in notifications, yet they’re often the most overlooked part of our application because they aren’t states our users experience within the app. Notifications represent the experience beyond the interface, and only the best UX designers consider how they fit in the experience they’re designing.

We need to consider how notifications fit into the experience we’re designing.”

Being intelligent about how we design our notification experience can be a make or break feature of our application. One of my favorite is the ESPN app.

My favorite basketball team is the Golden State Warriors, but I’m a busy man and I don’t always notice when things outside of my immediate attention are happening. ESPN allows me to customize my notifications so that I receive alerts about what is happening with my favorite team(s). But they don’t just send me every notification in their system, they allow me to choose which ones I want.

Beyond team notifications, I can set notifications per game as well.

The control ESPN gives me when it comes to managing my sports news and information is incredibly well thought through. It makes me feel important and like I’m in control of my experience, not someone that created the app.

Tips for better notifications

1. Ask users what kind of content they want to be notified about
2. Ask your users whether there’s a specific time of day they want to be notified or if they want notifications to be real time
3. Monitor your analytics to find out if your notifications are increasing the KPIs you hoped they would. If they’re not, figure out how they should change based on that data.

Design is in the details

Steve Jobs’ dad used to make him build the inside of their fence just as nice as the outside—not because the inside mattered as much, but because “For you to sleep well at night, the aesthetic, the quality, has to be carried all the way through.”

With the amount of data we’re sending, receiving, and tracking daily, with the availability of users and test users, with all the inspiration out there on the web, there’s really no reason we shouldn’t be doing these 6 things well. The details are what separate the good UX designers from the great.

It’s easy to forget about the pieces that we feel no one is ever going to see. Remember, though, every piece of the experience is an opportunity for engaging design.

To be a great UX designer, we have to push ourselves to create the best experience possible!

Written by: Joe Toscano, via InVision Blog
Posted by: Situated Research

The post 6 Things That Take Your UX from Above Average to World Class appeared first on Situated Research.

In this post and the next, you will learn 10 tips for designing dashboards and application interfaces that are stylish and user-friendly while still presenting important data to your users in a format that they can understand. Whether you are just starting UI design or your product is almost finished, jump in and learn how to design the perfect dashboard.

#1: Ask Your Audience

What do your users care about? Developers frequently make mistakes in determining what their applications will be used for, in turn focusing on metrics that aren’t as important as they think they are.

Instead of guessing about what your users will find important, poll them to find out directly. Facebook used this strategy to understand the needs of its advertisers and released a UI update as a result. They understood that understanding their end user was important and that they should have conducted research before their initial launch.

#2: Design for Different Platforms

How will your users interact with your application? Will they view it on their iPad, on a full resolution PC, or on their smartphone? Knowing the platform which your users prefer is key to building a powerful and usable interface.

While every modern website should be responsive it is important to design your application with your most widely used platform in mind. Things like large buttons, for example, are crucial for tablet apps.

Use Google Analytics to see which devices are used to access your website, and then design for your most popular platform.

#3: Don’t Reinvent the Wheel

There are certain features of UI design that are common between websites. Almost every social network, for example, has a feed of recent updates. Almost every B2B application has a left-aligned navigation bar and a right-aligned content section.

Instead of designing your dashboard from the ground up, use features common to your type of application to speed up the design process. Dropdown notifications or top-right corner account menus are ubiquitous and well-known in UI design.

#4: Color Psychology is Important

Colors play a fundamental role in design, particularly in the design of great user interfaces. Use colors to alert and notify users to tasks, activities, features, and more in the form of button colors and alerts.

Generally, it’s best to use predictable and common colors within your design. Green is a great indicator that everything is okay, while orange and red can be used to indicate a small or serious problem.

#5: Keep the Design Simple

When in doubt, simplify. The best user interfaces are not massively complex – in fact, the best UIs are not complex at all. With the right approach to usability, you can put a huge amount of functionality behind a simple, user-friendly dashboard design.

Break your product’s functions down into core categories, then use these categories to determine your interface’s design.

If your product has hundreds of features, categorize them and create a tabbed or modular layout for users to select features from. Simplicity works, and it’s always best to select clean, simple design over something cluttered but powerful.

We hope that this post helped to give you a good start to creating an awesome dashboard. We will post the last five tips later on this week. In the mean time if you would like to learn more about our company or the services that we offer, visit our website at www.situatedresearch.com. We would love to help you out with your next big design.

Written by: Michel Ann Sharritt
Posted by: Situated Research

The post Tips on Creating an Awesome Dashboard User Experience appeared first on Situated Research.

REWIND: Let’s look at WHY each one of these situations happen and how they relate to poor user experience design. The traffic accident caused by a man who had to take his eyes off the road to lower the radio’s volume. The radio had a poorly designed knob layout and was confusing to our driver. The line at the gas station was so long because the cashier had to use a complex and confusing system to charge clients. The fact that he had to stand in line at all was because the gas pump didn’t offer any instructions on how to properly insert your card. The coffeemaker didn’t work because he had to push the button all the way down but there was nothing to let him know it was turned on or not – no lights, sounds, no feedback. And everything started when his cat stepped on the alarm clock, resetting it without notification.

Can you relate?

I’m pretty sure we’ve all had experiences like this. Our technology and appliances aren’t always very clear in their use. However, we ALL are forced to interact with these failing user interfaces on a daily basis. It’s the TV remote, the pay kiosk at the parking ramp, and especially the custom Excel spreadsheet you use to track expense reports. In order to get what we want from these interfaces, we have to successfully interact with them and that can be difficult.

That said, we have seen a huge increase in good (read: not great) user experiences over the past decade. As we become more and more reliant upon different inputs, we’re bound to learn what works and what doesn’t and that directly affects the development interfaces we use today and in the future.

Assessing the User’s Needs

In 1943, Abraham Maslow introduced Maslow’s hierarchy of needs. In it, he described what we need as humans to fully operate. From physiological (air, water, food) to safety (personal security, financial security, health), love (friends, family, sex), esteem (self-respect, self-esteem), and finally self-actuallization (reaching your full potential).

How does this relate to UX Design in the digital and physical world? Maslow gives us the method to understanding the needs of our users. Take online banking for an example:

1. Make the interface functional. It would mean the user being able to login, pay bills, and view an account summary.
2. Make it feel safe for the user to use. I don’t need to tell you how crucial that is for the banking industry and a user will refuse to use something that even APPEARS to be unsafe.
3. Make it usable. It needs to be easy to navigate between pages and it all the functions exactly as the user expects.
   Note: This is where 99% of all services end, but great UX design goes further.
4. Make it pleasurable. I know what you’re thinking – a pleasurable online banking experience? Crazy! It may seem laughable, but it’s only crazy until someone actually makes one. Then the whole industry will scramble to catch up.

Using Maslow’s hierarchy of needs to create great user experiences

The Extra Effort goes a Long Way

Great user experiences are the result of putting in the extra effort. When usable just isn’t enough. Maslow states that when a person is fully self-actualized, they find contentment as their needs have been all fulfilled. A user finds that same sense of contentment using a product that invested in creating a great user experience. That fully contented user is happier to be a returning customer and brand advocate.

Written by: Anton Sten
Posted by: Situated Research

The post The Extra Effort for Great UX appeared first on Situated Research.

While the term “UX” is relatively new, the concept of user-friendly design has been around for generations. “Good design is good business,” the second president of IBM, Thomas J. Watson, famously told Wharton students in 1973. “We are convinced,” he said, “that good design can materially help make a good product reach its full potential.” 

Watson had just retired as IBM CEO, having grown the company tenfold. He predicted the trend that made companies like Apple, Facebook and Google what they are today. Apple didn’t invent the smartphone, but it made one very easy to use. Facebook wasn’t the first social network, but its simplicity was instrumental to its growth. And there were many other search engines before Google, but none made it so easy to find the most relevant information. All three companies became successful by improving user experience for products that already existed.

User experience contributes to many other success stories. Jeff Bezos invested 100 times more into customer experience than advertising during the first year of Amazon. AirBnB’s Mike Gebbia credits UX with taking the company to $10 billion. Tom Proulx, co-founder of Intuit, was one of the pioneers of usability testing, putting emphasis on ease of use in his products.

Good user experience is clearly good for business. Studies show that companies that invest in UX see a lower cost of customer acquisition, lower support cost, increased customer retention and increased market share, according to a study done by Forrester. When compared to their peers, the top 10 companies leading in customer experience outperformed the S&P index with close to triple the returns. Forester Research shows that, on average, every dollar invested in UX brings 100 dollars in return. That’s an ROI of a whopping 9,900 percent.

To Improve User Experience, Start by Observing Customers Interact with Your Product

The first step to improving your own UX (and reaping the business benefits) is to conduct a usability assessment of your product, application or website. This process uncovers the most common problems. Often, usage analytics indicate UX issues with your product. Usability testing explains these issues.

In my agency, we regularly see websites that are underperforming because they were designed without the end user in mind. In these situations, executives who think they know their users typically make these important decisions. As a result, websites are designed for the executives and not for the customers.

Proper UX design requires understanding users’ needs and creating a solution that solves their problems and helps complete their tasks in the easiest and quickest way possible. To do this properly, you need to get inside users’ heads by interviewing them and observing them while they interact with the product. Mental models can then be constructed outlining users’ behavioral patterns. In turn, those can be applied to prototype products that better serve the users’ needs. With continuous testing and adjustments, you can improve ease of use, reduce mistakes and increase overall customer satisfaction.

Despite popular belief, usability testing doesn’t have to be conducted behind mirrored glass with hundreds of participants. According to Norman Nielsen Group, the world’s foremost authority in UX, observing and interviewing just five users usually uncovers about 85 percent of all usability problems. Simply recruit five participants who represent your actual users and offer them an incentive to use your product in an observed environment. Give them real tasks to complete. Ask them to think aloud, but don’t help or guide them. Observe their behavior and listen to their feedback to uncover potential issues.

Make Good UX a Part of Your Internal Processes

After fixing usability problems, think about how you can incorporate UX design into your process to avoid making the same mistakes in the future. One way to do so is by integrating pattern libraries. A pattern library is a collection of previously tested user interfaces that solve common design problems. Organizations that rely on pattern libraries, as opposed to reinventing the wheel each time, see a 50 percent increase in product development efficiency. You can develop your own pattern library or use public libraries like UI Patterns or the Yahoo Design Pattern Library.

In business, speed and efficiency are paramount. I recommend starting with low-fidelity wireframes. At Intechnic, we sketch initial ideas on paper and focus on only the most important elements first. We use Sharpies — thick lines force you to limit the details you can fit on a sheet of paper. Eventually, we transfer designs onto a dry-erase board where we can fill in more detail and play with variations. Once designs pass internal reviews, we convert them into high-fidelity interactive prototypes that simulate real-life scenarios and can be tested with real users. There are a number of tools for that: Axure, Uxpin, Balsamiq and iRise, just to name a few.

User acceptance is critical to any product, project or service. A good rule of thumb: test early (with real users) and test often. Businesses simply fail without happy customers. Make yours happy with good UX.

Written by: Andrew Kucheriavy, Intechnic (via Forbes)
Posted by: Situated Research

The post Good UX Is Good Business: How To Reap Its Benefits appeared first on Situated Research.

Have you ever experienced a user interface that feels lifeless? Have you created a UI that just seems to be missing…something? 

If that’s the case, you’ve probably experienced a case of Awkward UI.

Awkward UI is a missing a loading indicator. It’s forgetting to tell your customer where something went wrong. Bonus points for doing so with a scary error message. It’s a graph that looks weird with only a few data points. It’s a linear snap into place when introducing a new piece of data.

Still not clear about what Awkward UI is? Here’s a simple real world example: I use Apple TV. A lot. (In fact, I have the latest episode ofStar Wars: Rebels playing in the background as I write this). Whenever I pull up my Purchased movies, I see this screen:

For a second, I get scared. Every time. And I use this screen often. Why am I scared? I don’t see any loading indicator. There’s no indication of activity. In the span of seconds, scary questions race through my head. Where are my movies? Are they lost? Deleted? Hijacked?

Then, after my heart stops racing, the movies I own suddenly and unceremoniously pop into place.

Man, that’s jarring.

Contrast this with playing a movie. After clicking “play” on the Apple remote, I see a nice indicator that Back to the Future is getting ready to play.

Notice the experiential difference?

Creating interfaces that are easily understood by humans puts us product designers right up against the sad fact that computers are lazy. They don’t care about helping people understand what’s new, what to do next, or how to react when something goes wrong.

In a computer’s ideal world, all they’d have to do is throw obscure error codes and scary-sounding alerts when something unexpected happens. Or, better yet, they’d just talk with you in binary.

But we don’t speak binary. We think in flows, and we’re used to the physical world. When a door opens, it swings on an arc. When something travels, you can see it move. When something falls, you can see it bounce.

Awkward UI is when a product designer doesn’t take these things into account. That means that somewhere along the line, some rules have been broken.

But which rules?

The rules of the UI Stack. Let’s talk about that now.

THE UI STACK

Every screen you interact with in a digital product has multiple personalities.

Five, to be exact.

Depending on the context, these personalities are revealed to your customer. In designer-speak, we call these states. And you should consider these states for every screen you make.

That’s because following the rules of the UI Stack and the five states helps you create a cohesive interface that’s forgiving, helpful, and human.

Be honest with yourself. When’s the last time you created a screen that had only one state? Even if you’re creating weather apps (cue Dribbble joke), one state won’t cut it.

The reality is that the world in which we live isn’t perfect, and things go wrong. Servers take time to respond. And your customers won’t always use your product the way in which you intended.

So, as a product designer, you’ve got to take these realities into account.

That’s why every screen you’ll design for your product can have up to five states (click on any to skip to the section):

• Ideal State
• Empty State
• Error State
• Partial State
• Loading State

As your customer moves through your product’s flows, they’re also going to move seamlessly between between each state within those flows.

A real-life UI Stack for a messaging app. Each screen transitions seamlessly between each other.

Want to see the UI Stack in action? You can skip there now if you want.

Skip to the UI Stack prototypes

Surprise! It’s time for a brief interlude in Internet history. Back in 2004, Basecamp, the company-formerly-known-as-37signals, wrote, for me, a groundbreaking piece entitled “The Three State Solution.” (And no, this isn’t a plan to end the Israeli-Palestinian conflict). They outlined that every screen should consider three possible states: “regular, blank, and error.” This blew my mind. And changed how I thought about design for the web forever.

But things change on the Internet. First, there was the AJAX revolution, second, there came mobile apps. Third came the mass consumerization of technology. Demands and expectations for UIs changed. This is my adaptation of that decade+ idea.

With that noted, let’s talk about the Ideal State.

IDEAL STATE

This is the first state I create, since it’s what you want people to see most often. Aptly named, it embodies the zenith of your product’s potential — when your product is providing maximum value and is full of useful, actionable content. It’ll serve as the foundation for every other state you’ll create for this screen. Think of this as the quintessential marketing page or mobile app store screenshot.

Let this state set the tone of each of the other states. Because as you iterate on your core interface, this UI could change completely over time. That’s both the beauty and the risk of iteration.

And this has vast consequences for all of the other states.

All UI states lead to the Ideal State. So start with this first, and let all of the other states fall into place as your designs get closer to solving your customer’s problem.

Still not sure what I mean by the Ideal State? Let’s take a look at some examples to clarify.

Ah, how picturesque. So data. Much photos.

Tinder has one of the best ideal states on the market.

EMPTY STATE

An empty state really is bigger than just one screen. It’s about providing your customer an incredible first impression as you introduce them to your product — to spur them to action, keep them interested, and remind them of the value your product’s going to provide.

There are three broad versions of the empty state. The first is what’s seen by your customer the first time they use your product. The second is what’s seen when your customer voluntarily clears existing data from the screen, like when you attain the exalted “Inbox Zero,” for example. And the third is what happens when there isn’t anything to show, say, for a search result.

Broadly speaking, the risk with empty states is that it’s easy to tack them on as an afterthought. Most of the time, doing this either creates an overwhelming experience or a cold, impersonal one.

As George Takei would say: “Oh, my…”

Coach marks — or instructional overlays — are, in my opinion, the best examples of an under-thought first-time experience. They place the burden of learning on the customer that includes more interface, more memorization, all done with a pretty big mental interruption. What a buzzkill.

Let’s explore the first-time use state more in depth below.

FIRST-TIME USE / ONBOARDING

If a customer is using your product for the first time, this state is your one shot to describe what your customer will see when data exists. It’s your opportunity to encourage action, to help them understand the value they’re going to get out of this screen. First impressions only happen once, and this is your chance to make a great one.

I liken this state partially to what’s known in the literary world as the “Hero’s Journey.” Introduced by Joseph Campbell in his amazing work Hero With a Thousand Faces, it’s the foundation of mythological stories found throughout the world from The Odysseyto Star Wars. Here’s the basic premise:

“A hero ventures forth from the world of common day into a region of supernatural wonder: fabulous forces are there encountered and a decisive victory is won: the hero comes back from this mysterious adventure with the power to bestow boons on his fellow man.”  Propel your customer down the hero’s journey with the Empty State. Call them to adventure, take them through known challenges and the temptations of the abyss, and transform them into a more powerful individual.

But how? Some ideas:

• Lead a horse to water. Be encouraging and uplifting in your copywriting, and speak plainly about what to do. For example, saying things like “Nothing to see here” really says nothing about what your customer should expect, and it’s a bit depressing that this would be the first thing you’d see. Instead, telling your customer the exact button to press and why they should press it is a much more helpful prospect.
• Use your product’s content to instruct your customer about what to do. For example, if you’re building a messaging product, your first-time experience might automatically include a message in the customer’s inbox. The subject line could say “tap to open me,” while the text within the message discusses more about how to manipulate and reply to a message.
• Offer an example screenshot of what the screen will look like in the ideal state. It brings a bit of hope to your customer that they’ll achieve something similar while showing off how potentially useful your product can be.
• Monitor your customer’s progress and respond accordingly. If they pause too long on a certain screen, for example, you could message them with a live chat asking if they need help.

Here are a few first-time use empty states that I love.  

Hipchat comes right out and tells you what to do while hinting at some fun, extra functionality that’s hidden beneath the surface.

Facebook Paper gradually introduces you to its functionality while teaching you key gestures. 

Basecamp has no content to show you — but instead of filling the screen with nothing, it places stand-in content for you to visualize the product’s potential. The completionist in me wants to create projects so I can see this screen full of utopian productivity.

Tapping into Airbnb’s Wish List for the first time gives you this stylishly simple empty state. What I love about this design is that it doesn’t try too hard (fitting with Airbnb’s design language), but also has a very clear call-to-action to get you to start gathering data.

The subject of on boarding and first-time states is a topic big enough for another book. And it just so happens that one exists. If you want to jump into the user on boarding pool, I highly recommend Samuel Hulick’s excellent The Elements of User Onboarding.

USER-CLEARED DATA

The second type of empty state is the case where your customer has voluntarily removed data from the screen. An example of this would be if your customer completed all of the items on their to-do list, read all of their notifications, archived all of their emails, or finished downloading all of their music.

These types of empty states are great opportunities to reward your customers or to spur further action. Achieved “Inbox Zero?” Great! View this amazing photo. Downloaded all of your music? Good, now go listen to it. Sifted through all of your notifications? Here’s something else you might want to read.

A customer clearing data is a customer who’s engaged with your product. Keep them in the flows your product has in place by doing the work for them. Don’t put the onus on your customer to make the next leap.



A vintage screenshot from iOS 6, yes, but one that still illustrates the slight dopamine drip that comes with achieving Inbox Zero. Your reward is a hand-selected Instagram scene from somebody’s coffee shop or sunset — and you can share it out onto the Interwebz, where you’ll celebrate your Inbox Zero and also advertise for Mailbox. Triple win!

NO RESULTS

In cases where your customers are browsing or searching for a piece of data in your product, there’s a chance that they won’t find what they’re looking for. These scenarios are amazing opportunities to infer what your customer intended to find and to make intelligent suggestions.

Amazon employs one of the best examples I’ve seen of this technique. Accounting for misspellings and similar searches, Amazon’s search rarely gives you an empty result. Instead, it’ll give you the closest matching result while showing which terms it didn’t match.

The example where I finally reveal my love for metal. Oh, well, it had to come out sometime.  As for Pinterest, well, not quite the same results as Amazon, but this is Pinterest, after all. Based upon how their search parsed my query, it should be relatively easy for a customer to adjust their search terms to get what they want.

The lesson: don’t just drive your customer off a wall in this state. Give them something they might be able to work with or suggest an alternate path.

ERROR STATE

The screen when things go wrong. Typically, this is more complex than just one screen, since errors can occur in surprising combinations. Error states can include anything from form data that’s missing or invalid; an inability for your app to connect to the server; trying to move forward to the next step without finishing an upload, leaving a page without text submitted, and more.

Error states should also be comforting in the sense that your product keeps all user input safe. Your product shouldn’t undo, destroy, or delete anything entered or uploaded by your customer in the event of an error.

It’s apt to paraphrase Jef Raskin, creator of the original Macintosh and author of The Humane Interface. He writes: “The system should treat all user input as sacred and — to paraphrase Asimov’s first law of robotics, ‘A robot shall not harm a human, or, through inaction, allow a human to come to harm.’ The first law of interface design should be: A computer shall not harm your work or, through inaction, allow your work to come to harm.”

This advice could be well-heeded by some particularly vile offenders of this rule: airline websites. Missing a tiny form field for a credit card security code, for example, frequently results in a page reload that blows away all of your meticulously-entered details while highlighting the missed field with an offensive red hue.


So long, and thanks for all the fish. 

NO! YES! MAYBE? 

Ah, finally, a contextual error message we can follow. Bonus: we get a little sense of humor to humanize it.

Ideal error states occur dynamically without destroying any data input by the user. If a page reload must occur to detect an error, please do everyone a favor and save whatever data — however flawed — was input into your product. Typically, though, page reloads to detect an error is a sign of laziness. For the sake of your customers, ensure you and your developers go the extra mile to handle errors in graceful and accommodating ways.

Additionally, error states shouldn’t be dramatic, nor should they be vague. Remember the “Blue Screen of Death?” The Mac’s “Kernel Panic?” Or — for those computing veterans — “Abort, Retry, Fail?” Each of these error states, by necessity, mark a significant system error requiring a computer reboot or retry. But to this day, each of these error states are well-remembered because of the shock, fear, and confusion each of them conveyed to the end user.


Microsoft’s Blue Screen of Death became so infamous because it simply freaked people out. The blue screen — while better than a red one — was out of context, abrupt, and filled with scary-sounding jargon, even if it was useful in debugging the problem.

That’s because error states must incorporate concise, friendly, and instructive copy as to what to do next. Vague error codes, hexadecimal numbers and confusing advancement options are only going to scare and frustrate the people who experience these errors.

Of course, your product’s audience might consist of rocket scientists or computer engineers. Then these highly-technical error messages may be well-suited to your customer. But as most of the world adopts software in their everyday lives, these types of error messages become less and less appropriate.

It’s simple. Make error messages human, not technical, and suited to your audience. What would you want to be told when something goes wrong?

The error state is such a widespread occurrence, and one of the least-desirable states for which to design. But I promise that if you put as much care into this state as you do into the previous two states, your product will be infinitely more joyful to use — and, more helpful, as you’ll have thought through common customer pitfalls and solved them in advance.

PARTIAL STATE

The difference between an error state and an ideal state is like night and day. But how does the screen look when there’s only one row of data? A few photos? A half-completed profile?

The partial state is the screen someone will see when the page is no longer empty and sparsely populated. Your job here is to prevent people from getting discouraged and giving up on your product.

This is a great opportunity to design micro interactions to guide people towards the full glory of the Ideal State. It’s a journey on which you take your customers to help them realize the true value of your product. This implies an accomplishment — that your customer has spent some time in your product to see a glimpse of its potential. Keep them hooked.

Some game design principles can be useful here. I’m not referring to the scourge-like practice of making your customers gather crystals to advance a la Clash of Clans, but instead building what is called acceleration into this state of your product.

It’s a game design term that helps a player visualize how they’ll be more powerful in the future, guiding them along a predefined series of tasks to complete to achieve this vision. The trick is to make the player not realize they’re performing what could be perceived as tedium in order to extract the maximum value from your product.

“Players entering an acceleration phase aren’t thinking about the tedious repetitions they have to perform in order to level up, they’re just doing them, and enjoying the accelerating rate of the results…Rather, those players are caught up in a future in which their character(s) will be powerful in a way they can’t even understand yet. To put it more technically, they’re inferring an exponentially increasing power structure that vanishes beyond their player prediction horizon. It’s not exactly the same as traditional flow, but the exhilaration of the players is subjectively very similar.”

Here are some great examples of the Partial State in the wild…


LinkedIn’s famous “Profile Completeness” bar, encouraging you to perform exact tasks to achieve 100%. Completionists cheer.


Dropbox shows you how close you are to achieving some extra storage space, which is a major attractor for most Dropbox customers, I’m sure. Not only does Dropbox show you how many steps you have left to complete, but these steps also have the side effect of making customers more valuable through education and activation.

LOADING STATE

It’s easy to overlook this state, and many product designers insert it as an afterthought. But there’s a very real burden that comes with setting expectations. When your app is loading data, waiting for an Internet connection, or transitioning to another screen, you must take great care to be mindful of how you represent situations where you’re fetching data. This can consist of an entire page takeover, lazy loading of content panes, or inline loading, potentially used when one might look up username availability from a form field.

And the perception of loading is equally as important. Too often designers simply fill their screens with whitespace and spinners, placing a massive burden of responsibility on the content that isn’t there. This, in turn, encourages your customers to figuratively watch the clock — putting the focus on the indication of progress versus actual loading progress being made.

Such is the belief of Luke Wroblewski, a product design expert that’s led design teams from eBay to Yahoo! to Google, where he now resides after selling his mobile polling startup Polar.

Wroblewski and his team discovered that after implementing a series of loading spinners for each poll, Polar customers began complaining that the app seemed slower, saying things like “There seems to be an excessive amount of waiting around for pages to refresh and load — it doesn’t seem as quick as the previous version.”

Wroblewski realized that:

“With the introduction of these progress indicators, we had made people watch the clock,” he said. “As a result, time went slower and so did our app. We focused on the indicator and not the progress, that is making it clear you are advancing toward your goal not just waiting around.”

SKELETON SCREENS

This realization directly resulted in the creation of what he calls “Skeleton Screens.” It’s a technique now being used by Pinterest and Facebook in both their web and mobile versions.

Skeleton Screens are an innovative take on the loading state — it places the focus on the content as it loads versus the fact that the content is loading. This is accomplished by displaying the basic structure of the page and gradually filling in the missing pieces as they download. The beautiful thing about this technique is that it can eliminate spinners completely. And it can increase the perceived performance of your product.


Luke Wroblewski’s app, Polar, and its skeleton loading screens.

Pinterest, while employing the use of the Skeleton Screen loading state concept, put a unique twist on its implementation: deriving the “average color” of the pin’s image and using that color to fill in the pin’s background. So before the pin’s image loads, you feel like you get a preview of what the pin will be. 

Facebook invented a similar technique used in their mobile app Paper and later implemented it into their web version. Combined with what they call the “shimmer effect,” the Facebook experience will display a stylized Skeleton Screen with shapes resembling content. And to communicate that the content is loading, the shapes will pulse with a shimmering effect.

ASSUMING SUCCESS WITH OPTIMISTIC ACTIONS

“Nobody wants to wait while they wait,” said Instagram co-founder Mike Krieger in 2011 as he described how his engineering efforts achieved the app’s perceived speed.

Krieger, in fact, pioneered the notion that actions should be performed “optimistically” by a product. By assuming an action’s success, actions appear to take place much faster.

Take the case of “liking” a photo or leaving a comment. In both cases, the action is registered as completed instantly from the perspective of the customer. And in the background, the product is making server requests to actually complete the action. 

Optimistic actions can also greatly help to reduce the perceived speed of uploading media. Instead of uploading when a user taps “Done” at the end of the photo upload flow, Instagram starts uploading the photo immediately after a filter is selected. While it’s not an optimal engineering solution — and data might get thrown out if your customer backtracks — it makes uploads appear to happen very quickly. Following the “move bits when no one’s watching” mantra can help make your product’s speed one of your assets.

You’ve seen a number of examples of the UI Stack and its five states in isolation. But how would they work together? How does the UI account for the transitions between each state?

That’s the power of the UI Stack. These states don’t exist in vacuums. They exist on a vertical axis that can be called at any time by the product. It’s your job not only to account for each of these states, but to dictate how the screen moves between each state.

I’ve created a hypothetical messaging app to illustrate these ideas.

Why a messaging app? Because it’s not an immediately obvious example of these states at play. But I think it’s a great example of how even temporal UIs like messaging interfaces follow the rules of the UI Stack. And, even further, it’s an illustration of how immense our responsibility is to ensure that each screen’s states flow smoothly from one to another.

So what do we have to deal with in a messaging app?

We have to account for when there’s no messages. This is our blank state.

Our partial state is when only one party has sent a message.

Then, there’s receiving a message — the typing indicator. This, in other words, is our loading state.

But wait. There’s another series of loading states — when we send a message out. And then there’s the delivery confirmation.

An error can happen along the line, too. That’s when our message fails to send.

And you can’t forget the mechanism by which we recover from an error, and attempt to send again. There’s another version of the loading state.

Finally, we reach our ideal state: when messages turn into a conversation.

A HYPOTHETICAL EXAMPLE

Let’s say Marty and Doc just exchange numbers and Marty wants to message Doc about what he’s just seen at Twin Pines Mall.

Since there are no messages, we have an opportunity to exploit the empty state and encourage the customer into acting how we want them to act — in this case, that’s sending a message.

But what happens to this state when a message is sent? We need to gracefully wash away the empty state and shift it into a partial state: in this case, that’s when Marty sends only one message.

Let’s fast forward to when Doc has responded. He’s sent one message — but he’s not done yet! Hence the typing indicator, another form of a loading state.

Once the typing is done and the message is sent, we transition out of the typing indicator and bring in the new message, pushing the others out of the way.

But what about when Marty wants to reply back? First, we have to show some state awareness when there is text in the field — notice how the “Send” button turns from grey (a disabled state) to blue (an enabled state). Then, once we send the message, another loading state occurs for our send process. We keep the message dimmed during this time because there’s not a successful delivery yet — until the “delivered” stamp tells the customer that all is well.

But what happens if the message isn’t successfully delivered? Here comes our error state. The red marker replaces the loading spinner, and we’re left with a message in the “undelivered” dimmed state. Tapping (or, in this case, clicking into the Quartz Composer prototype) on the undelivered message retries the send. We’re in luck this time, and the message fills in after the angry red “!” disappears and we can register a delivered indicator.

HERE, IN THE REAL WORLD…

And that, my friends, is the UI Stack in action. It’s the five screen states and the seamless transitions between them. Without these transitionary elements, we risk confusing or surprising our customers as new states appear and disappear. Making people uncomfortable and confused isn’t exactly in our job description, now, is it?

In the end, the implementation of these states requires an intense collaboration between design and development. Invest time in each of them — they all work together to create the best, most holistic experience for your customer.

(If you liked anything in this post, I’d be grateful if you shared. Just one click to Tweet (can edit before you send).)

A PLOT SUMMARY OF THE THRILLING TALE YOU JUST READ

• Don’t get stuck designing only for your Ideal State and tacking on the other states. Your product solves a problem. How can each screen’s state handhold your customer to that goal?
• Read Samuel Hulick’s The Elements of User Onboarding.
• Make your loading states a part of your prototyping efforts. They’re a part of your product’s experience and shouldn’t be tacked on last. Huddle with engineering to figure out ways to make perceived — and, if possible actual — performance better.
• Spend time thinking through edge cases that can trigger errors. How will you handle them? What’s the friendliest response you can give your customer? There is a cost / benefit tradeoff here, but at least cover the most painful errors and go to great efforts to preserve your customers’ data.

Written by: Scott Hurff
Posted by: Situated Research

The post How to Fix a Bad User Interface appeared first on Situated Research.

When Apple introduced the iPad 2 in 2011, it laid out a noble goal for the future of technology.

“Technology alone is not enough,” an Apple ad proclaimed. “Faster, thinner, lighter, those are all good things, but when technology gets out of the way, everything becomes more delightful, even magical. That’s when you leap forward.” 

With the iPad, the notion of technology getting out of the way meant designing a computer so easy to use that the apps took center stage. But the result was in some sense counterproductive; we’ve become so sucked into our phones and tablets that technology is actually getting in the way of the real world.

It’s not going to be like that forever. In talking to leaders from some of the most innovative companies in consumer electronics, it’s clear that the next five years will represent an attempt to bring us back to reality. This may seem paradoxical, but a proliferation of wearable devices, smart-home gizmos, smart cameras, and augmented-reality systems will exist largely to save us from our screens.

Wearables return to the real world

The cynical way to view wearable technology is as yet another intrusion—another set of screens to keep us separated from the physical world. But Yusuf Mehdi, Microsoft’s corporate vice president of devices and studios, doesn’t see it that way. He believes these devices, more than ever, will help technology fade into the background.

Mehdi gives a basic example that applies today: Instead of sounding an alarm, many fitness trackers can wake you with a gentle vibration to avoid disturbing your spouse. It’s a seemingly minor feature, but one that takes the focus off the device itself and onto the people around you. “That’s an interesting thing where people are taking a personal device and saying, ‘Well, the win is for my spouse, not for me,’” Mehdi says.

Moving forward, Mehdi sees devices like Microsoft’s recently announced HoloLens as a way to stay present in the physical world without completely shutting out technology. The still-experimental headset works by projecting 3-D images into a head-mounted visor so they appear to be part of your natural surroundings.

Imagine a scenario in which two coworkers collaborate on a 3-D model projected into their headsets, or someone walking down the street who can see information about surrounding shops and restaurants. Mehdi points out that the original codename for HoloLens was “analog,” for the way it blends with the physical world.

“If you have a device that you’re wearing, and information is being overlaid on top of that, now you’re back in the real world, and you’re interacting, and you’re not missing what’s going on around you, because your head’s there,” Mehdi says.

On a more practical level, these “mixed reality” devices—as Mehdi calls them—will pave the way for more natural input methods like gesture control and eye tracking, which never quite made sense on tablets and laptops. “A lot of things become more human, and the technology kind of goes back out of the way, and we think that’s a big opportunity,” Mehdi says.

The Disappearing Smart Home

Wearable tech will also play a starring role in smart homes—at least if we expect them to offer the kind of breezy convenience that tech companies have been promising.

Dennis Miloseski, Samsung’s U.S. head of design, describes the dream scenario: You pull into your garage and your wearable connects to your Wi-Fi network, which in turn triggers your hallway lights and queues up some music on the living room stereo. “I like to call it the automatic future,” he says.

But he also notes how easily things can go wrong. Maybe your spouse is sleeping on the couch and doesn’t want the lights to come on. That’s why it’ll be so important to have intelligence that figures out what you want, along with some sort of way to confirm your intentions on a wearable device.

“We’re sort of in this archaic age right now, where we’re in this raw form of data readout, meaning, ‘this is how many steps you’ve taken,’ or ‘this is your heart rate,’ or the light is on or off,’” Miloseski says. “I think the next magical innovation is how do we take that data and actually create a form of valuable experience of that data.”

Again, it all comes back to getting the technology out of the way so the user doesn’t have to think about logistics or shuffle through a bunch of apps just to have a fully functional smart home. Miloseski likens it to starting a car or turning on a light switch, in that the complexity is completely hidden from the user.

“I think that we will hit a point in time where, when we think of technology and devices and gadgets and all these things, when they actually impact the social fabric and they become an essential part of how we live our lives, they will become invisible,” Miloseski says.

New Smarts for Dumb Cameras

Photography might be the one area where Apple’s vision of getting technology out of the way seems fully realized. Smartphone cameras are no longer just a quick and dirty image capture tool; they’re the best way to take photos that you can immediately touch up and share with the world.

But as wearable cameras like the GoPro and drone-based ones like DJI’s Phantom enable new kinds of photography, they’ve yet to receive phone-like smarts. Expect that to change in the coming years as capturing and sharing footage from these devices starts to feel as effortless as using the camera in your pocket.

“If I think specifically about us, and the things that we get super-jazzed about, that’s a big piece of it, it’s the whole solving of pain points from when you first capture content to seamlessly sharing it,” says CJ Prober, GoPro’s senior vice president of software and services.

Today, when you capture footage on a GoPro, you’ve got to load it into your computer—itself a time-consuming process—and spend hours looking for highlights and turning them into a YouTube-worthy video. But in the future, a wearable camera might tap into gyroscopes and accelerometers to flag exciting moments, or use machine learning algorithms to sniff out quality footage. It could even tie into other wearable sensors to measure things like jump height or speed, and bring those details straight into the video.

“It’s really important to not think of video and photo capture as an independent thing to do on the device,” Prober says. “It’s really, ‘What do you do with the content when it’s captured?’”

That question will become even more important as new tools like 360-degree cameras become available. Suddenly, you have a lot more footage to work with, which means cameras will need to get smarter at helping you tell the best story.

Drone camera makers like DJI face a slightly different challenge, but with similar overall goals. In the near term, it’ll need to make the actual flight mechanisms smarter so that drones can safely navigate on their own. But once that happens, and the drones themselves become cheaper and more commoditized, it’ll open up all kinds of new smart applications.

“There could be a really rich app economy that’s task-driven instead of product-driven,” says Eric Cheng, DJI’s ‎general manager in San Francisco.

A basic example, he said, would be some kind of live-blogging application that steers a drone as it follows you down the street. Or maybe you’d have an application that can automatically capture and reconstruct a scene in 3-D using cameras. “You can imagine a whole lot of functionality moving into the domain-specific and being a lot smarter,” Cheng says.

Room For The Familiar

None of this is to suggest that the tools we use today are going to vanish, or that you’ll never have occasion to get sucked into your phone, tablet, or computer for a while.

Rick Osterloh, president of Motorola Mobility, now part of China’s Lenovo, says that if anything, the smartphone will remain at the center of all these new smart devices. “It’s resonated so well because it’s actually well-designed, for both utility and a critical feature, which is carryability and pocketability,” he says.

While Osterloh imagines we will see some new technological twists for the smartphone in the form of folding screens and superfast charging, the biggest advances will come from all the different types of data a phone can gather and interpret. Think of it kind of like the Assist feature in Motorola’s current phones, but with more automation and intelligence.

“That is a pretty interesting area writ large, we believe, for the future, where the combination of context and probably sensors will give you a user experience that just helps your phone adapt to what you want,” Osterloh says, “like the magical ‘do what I want’ machine that people in computer science have been trying to develop for decades.”

Likewise, Microsoft’s Mehdi doesn’t see mouse-and-keyboard devices going away, since there’s nothing better for tasks like writing or data entry. “I don’t think this is like tapes and CDs that go away,” he says. “I think it’s more like TV and radio, that don’t actually go away. They just become another part of the media that you consume, and over time they kind of get tuned for the use case.”

The question, then, is how we’re actually going to make room for this expanding roster of wearables, drones, headsets, and smart-home devices. At some point, it might be too much to wrangle, but as Medhi points out, it wasn’t long ago that owning just a cell phone and a computer was hard to fathom. People make room for more devices when there’s sufficient value.

In other words, making all that technology disappear may only work if we own a whole lot more of it.

Written by: Jared Newman, Fast Company (via Presence)
Posted by: Situated Research

The post The Future of Consumer Tech Is About Making You Forget It’s There appeared first on Situated Research.

We just finished a heavily scripted, carefully managed, and completely amazing demonstration of Microsoft’s HoloLens technology. Four demos, actually, each designed to show off a different use case for a headset that projects holograms into real space. We played Minecraft on a coffee table. We had somebody chart out how to fix a light switch right on top of the very thing we were fixing.

We walked on Mars.

You’ll notice there aren’t photos here, and that’s because before we were even allowed into the labs where the HoloLens team tests out its user experiences, we had to deposit our cameras and phones into a locker. No recording equipment of any kind was allowed, not even audio. We entered the basement below Microsoft’s visitor center laughing at the absurdity of it all — many reporters needed to get notepads from the company and weren’t carrying pens, either.

But it was all worth it, because HoloLens is probably the most intriguing (and, in many ways, most infuriating) technology we’ve experienced since the Oculus Rift. And there are many parallels with the Rift to be had: both are immersive, but in different ways; both require you to strap a weird thing on your head; both leave you grinning like at absolute idiot at a scene only you can see. And, crucially, both need more work when it comes to thinking through exactly how to control and interact with virtual things.

Minecraft IRL
by Dieter Bohn

By far, the most impressive demo for my money was the Minecraft demo — though Microsoft called it something like “Building Blocks” or some such, presumably so as not to fully commit to releasing a full holograph version ofMinecraft. But before we could enter this virtual world — actually, the virtual entered our world — we had to strap on the development unit for the HoloLens.

It’s a contraption, to be sure. There’s a small, heavy block you hang around your neck which contains all the computing power. It’s comprised of lenses and tiny projectors and motion sensors and speakers (or something that makes sound, anyway), and god knows what else. And then there’s a screen right there in your field of view.

A “screen in your field of view” is the right way to think about HoloLens, too. It’s immersive, but not nearly as immersive as proper virtual reality is. You still see the real world in between the virtual objects; you can see where the magic holograph world ends and your peripheral vision begins.

But before you can apply your jaded “I’ve done VR before” attitude to this situation, you look down at the coffee table and there’s a castle sitting right on the damn thing. It’s not shimmery, but it’s not quite real, either. It’s just sitting there, perfectly flat on the table, reacting in space to your head movements. It’s nearly as lifelike as the actual table, and there’s no lag at all. The castle is there. It’s simply magic.

You definitely have a big stupid grin on your face even though the contraption that’s strapped to it is pressing your eyeglasses into the bridge of your nose in a painful way.

Then it’s demo time. You can’t touch anything, but you can look and point a little circle at objects on it by moving your head around. You learn how a “glance” is just you looking at things and pointing your reticle at them, and an “AirTap” is the equivalent of clicking your mouse. The demo involves digging Minecraft holes and blowing up Minecraft zombies with Minecraft TNT. It’s basically incredible to see these digital things in real space.

You blow up a hole in the table and then you look through it to more digital objects on the floor. You blow up a hole in the wall and tiny bats fly out and you see that behind your very normal wall is a virtual hellscape of lava and rock. You peer into the hole, around the corner, and see that dark realm extend far into space.

And then the demo’s over.

Skype
by Tom Warren

Microsoft’s Skype demo was as equally impressive to me as playing around withMinecraft blocks in a living room. After a two-hour keynote, Microsoft wanted me to fix a light switch. It all started by sitting down and facing some tools and a socket with exposed wiring. A little dazed and confused, I looked up and scanned across the Skype interface which was suddenly appearing in front of me, and picked a face to call. The video call popped into a little window, and my journey to fix a light switch began.

On the other end of the call was a Microsoft engineer. I could see and hear her, but she could only hear me and see exactly what I was seeing in front of me. My eyes, or the headset on my head, was relaying everything over Skype. It was a support call of sorts — here she was to help me fix a light switch. We started by pinning her little window on top of a lamp. I could then look around the room and return to the lamp to see her face. She guided me where to go. It felt strangely natural, and I didn’t need to configure anything or learn gestures other than the same “Air Tap” you use to simulate a mouse click.

While I was being talked through which real world tools we needed for the job, the Microsoft engineer called my attention to the wall with wiring and then started drawing where to position the light switch right on the wall. Thinking about it now it sounds totally surreal, but during the demo I didn’t even think about it — it just felt like I was being guided around with annotations and a helpful friend. We connected the wiring, tested it for an electrical current, and then turned the power back on and switched the light on. It was all fixed, and all by using a crazy combination of a headset, augmented reality, and Skype. It might sound gimmicky, but the applications here are truly impressive. I use YouTube guides to figure out home improvements or to service my car, but this is on another level. Imagine a surgeon performing complex surgery and writing notes in real time and guiding a colleague through it all. Imagine support calls to resolve a problem with your PC. If this works as well as Microsoft’s controlled demo, then this really has the ability to change how we communicate and learn.

Microsoft’s next demo didn’t have us using the HoloLens prototypes directly. Instead, we watched as “Nick” (nobody in Microsoft’s blue-tinted demonstration basement has last names. I asked.) manipulate objects in digital space so he could build a Koala bear or a pickup truck. It was actually quite impressive, as cameras filmed him and screens showed both Alex and the virtual objects he was manipulating in the same space in real time.

The idea was to convince us that HoloLens would unleash a wave of creators who would be able to dream up 3D objects with little to no training. It’s much easier to understand what a thing is in your living room than it is in AutoCad.

But sitting there after our whirlwind of actually experiencing HoloLens, my mind was elsewhere. For example, there are only a few ways to interact with this system so far:

• Glance: you point your head at something.
• AirTap: you make a “Number 1″ sign with your hand, then move your finger down like you’re depressing a lever.
• Voice: you can issue commands, usually to switch what “tool” you’re using.
• Mouse: So actually the neatest thing is that objects you use to interact with computers can be used to interact with holograms.

That seems like enough, but it’s not nearly enough. It’s wildly impressive that these objects really do feel like they’re out there in your living room, but it’s equally depressing to know that you can’t treat them like real objects.

At one point in the demo, Alex needed to put a tire on his pickup. He had to twist his body and head around to get his pointer in just the right spot and get the tire arranged just right to fix on the axle. Then, AirTap! the tire is connected. But how much easier would it be if you could grab the tire in your actual hands?

Our hands are simply more dextrous than our necks. You have finer control over small motions, you can move your hands in so many different ways and vectors, with pressure and nuance and delicacy. Your neck and head, well, not so much.

But then Microsoft gave us 3D printed Koalas with a USB drive inside them, which was nice. And if this HoloLens thing takes off, you will be able to design your own and it will be way easier than learning current 3D design software. But not as easy as it would be if you just imagined building with holograms.

Walking on Mars
By Tom Warren

Microsoft has teamed up with NASA to let scientists explore what Curiosity sees on Mars. Instead of panoramic imagery on a computer screen, Microsoft’s demo lit up a room and turned it into Mars. I walked around the rocky terrain, bumped into the Curiosity rover, and generally just checked out a planet I will never visit in my lifetime. It’s a totally new perspective that felt like I was immersed in touring Mars, but not necessarily there. The field of view felt a little too limited to truly immerse myself and trick my brain into thinking I was really on another planet, but what impressed me most is what Microsoft has built into this experience.

I held a call with a NASA engineer and he talked me through the terrain. I squatted to look more closely at rocks, took snapshots of various rock formations, and even planted flags for points of interest. My jaw dropped when I ventured over to a PC in the room and started to experiment with the mouse. I pulled the mouse pointer off the screen and suddenly it was on the floor next to me, allowing me to set markers in the virtual environment. It’s everything I’ve seen in demonstrations from Microsoft Research before, but here it was on my head and working.

The collaboration part was the key here, allowing me to interact with this data in a unique way, but also alongside the NASA engineer who could drop flags on the Mars terrain and guide me to look at certain sections. While this isn’t traditional productivity with a mouse and keyboard, it’s certainly something new and intriguing. I could see this type of scenario working for big teams that need to communicate across time zones and on big sets of complex data.

Overall, HoloLens is Microsoft at its most ambitious. It’s a big bet on the future of computing, the future of Windows, and ultimately the future of Microsoft itself. While the company is struggling at mobile, it wants to catch the next wave of computing and lead. Is HoloLens the next wave? Developers and consumers will be the ultimate test of that, but if anything HoloLens is an incredibly brave and impressive project from Microsoft. It’s true innovation, which is something Microsoft has lacked during its obsession with protecting Windows. It’s also another example of an experience that takes the complex technology out of the way, leaving you to experience what really matters.

Written by: Dieter Bohn and Tom Warren, The Verge (via Presence)
Posted by: Situated Research

The post Welcome to the Age of Holographs appeared first on Situated Research.