Tag: UI design

Posted on

Designing for Trial and Error

Most things in life get done through trial and error, and digital products need to support that sort of fuzziness.

What scares people about technology is that it’s precise and uncompromising. A bank machine asks you for THE number — you can’t type anything else and nothing happens until you do. When you turn a dial on a washing machine, it does exactly and only what you choose. At the other extreme, automated systems take all control away from us.

The beauty of machines is that machines don’t lie. They just do what they are programmed to do. But that’s not how people interact, and that’s what makes machines hard to interact with. Sometimes we need to be guided even as we remain in control.

Many real-life decisions follow a similar pattern:

Julie tries decorating her apartment. She chooses some colors and pieces. She then hires a Designer to pull it all together . The Designer generates potential floor plans and finds photo inspiration. Julie provides feedback: more like this, less like that. She rejects or accepts ideas until the picture comes together.

Many products fail to find a place in our lives, because they try to be too simple, too smart. Perfect anticipation of user’s intent will likely never happen. Even my wife with her human brain and a decade of experience can’t always predict what I will like. So digital products should make educated guesses, but they shouldn’t expect to be right. Instead, technology should be optimized for making suggestions, making corrections, and listening for feedback.

Here are some patterns I’ve been paying attention to lately:

User Input Optimization

Basic ways to integrate lightweight guides into our workflow are found in features like:

  • “snap“ in drawing software gently shifts objects so they lie on a grid or align with guides or other objects; “auto-smoothing” makes lines straighter or curves smoother,
  • “quantization” in music sequencing software automatically aligns notes precisely to a rhythm (or conversely “swing” humanizes rhythms so they sound more natural); “pitch correction” corrects out of pitch singing even in real time; “compressors” or “limiters” remove outliers to maintain a consistent loudness

In these cases, software smooths the rough edges of the user’s input through very light automation, which can be enabled or disabled easily.

Undo (Your Best Friend)

Undo is a powerful feature, which allows users to generate randomized content manually. Randomness is a key part of my creative process.

A few years ago, I created several comic strips for the Suicide Prevention program at the City of Toronto. Although I know nothing about drawing human faces, I was able to create characters real enough to convey emotion. Here is Ida, one of the fictional people at risk, opening her door cautiously:

Ida, a character I created using trial and error in Illustrator.

Ida and the rest were created purely through trial and error. I drew randomized shapes and hit undo a lot, until I assembled a realistic face.

Multiple Takes (Undo’s Big Brother)

The opposite feature is the ability to generate lots of content quickly to be sifted through later. For example, I rely on my ability to take hundreds of shots on my camera, to increase the chance that more will be in focus and that some may even contain pleasant surprises I can extract later in Photoshop.

Multiple Presets

“Smart default” is a great way make an interface easier to use, but why does it have to be just one default? When you open visual effect filters or audio effect plugins, each filter has a default setting. Often there is just the default, and sometimes it’s not so great. A better case is when multiple presets are offered in a pull-down, so I can flip through to see what the filter is capable of. But an even better feature would be to offer an intelligently random set of presets.

Some products make users do work, for example, to categorize their content like emails or photos… It is common for software to start with a suggested categorization and force it on the user — remember when Gmail in 2013 rolled out an automatic and hugely unpopular categorization of email into Social, Primary, etc. Is there a way to quickly generate multiple suggestions based on the user’s own activity and let the user choose?

Randomized Content Generation

Users of complex digital products can’t always express their full potential, because their technical skills are limited. I already showed how I use undo and multiple takes to overcome my limitations.

The key insight for me is that when users hit the limit of what they can create intentionally, they are still able to recognize if shown some options. Besides, people enjoy surprising themselves. They don’t always want predictable outcomes.

The Nord Lead 4 synthesizer has a Mutator function, which takes a seed sound and changes it in slight or major ways. I’ve come to depend on this feature in my creative process. It works on demand — meaning it’s easy to access, so I can easily trigger it manually.

Mutator feature on the Nord Lead 4 synthesizer

There 3 types of randomization and 5 levels of randomization strength. I can hear endless variations on a single sound (similar to the many-takes pattern), evolve a sound gradually, or create a completely random sound.

Here is a sample of gradual mutation followed by a big mutation at the end:

What makes the Mutator effective for me is that the Nord Lead

  1. chooses optimal parameters to randomize (bounded randomness), so most generated sounds are viable,
  2. allows fluid change from manual editing to mutation — I can generate a very random sound, then tweak an aspect I don’t like manually, then randomize slightly

To me it feels just like asking the device for suggestions. It’s not intrusive.

In Closing

I would like to see more light automation and more explicit support for trial-and-error in software.

In the future, I can imagine my sketching app recognize that I am trying to draw a person. The app will automatically fix and elaborate the sketch, using my own line style. It will even be able to ask me, “Hey, how about this?” My writing app will offer alternative ways to arrange my content and offer better headlines to choose from.

That said, I have two concerns:

  1. Products that try to be too smart often fail to listen to feedback. Products should have humility as a feature. How do we create digital collaborators and partners rather than intrusive automatons? Past attempts to do this failed miserably — remember Clipy from MS Office? Many people were frustrated with the Nest thermostat. And so on.
  2. Are there good working patterns for a digital product to offer content and ask for feedback without obstructing the user’s workflow? Most cases of such interaction today are intrusive and built on selling the user something, not on truly being helpful. How do we avoid unwanted help?

Let me know your thoughts and please share examples.

Update: Check out the workflow when working with AI to create music https://www.theverge.com/2018/8/31/17777008/artificial-intelligence-taryn-southern-amper-music

Posted on

Compact Mobile Navigation Patterns

Problem: Running Out of Width

What if all your navigation items don’t fit onto one line on mobile? In the screenshot below, if Habanero opens another office, it won’t fit:

Pattern 1: Horizontal Swipe

You can let the choices go off-canvas. You’ll find this in use on the web and in native apps.

Make sure to hint at the concealed content. Adjust spacing to ensure the last item is cut off:

Google adds a fade effect as an added cue, which also makes the cut off item less awkward:

Strymon adds fade effect AND a small arrow for clarity. Moreover, they turned the links into buttons, which makes it easier to see they are cut off (not a video):

This pattern isn’t useful just on mobile. LinkedIn uses this pattern in their Create Post pop-up, where width is restricted and the concealed tags are low priority:

Samsung adds motion as an affordance. In the video below, notice that it’s important to auto-pan the selected item into view after a page redirect:

This diversity and number of cues highlights the main disadvantage of this pattern: discoverability. A user may not recognize a swipeable menu and may miss out on the concealed choices.

Pattern 2: Hide Low Priority Items

A common pattern is to hide complex navigation behind a hamburger icon or icon + label. You should avoid hiding important choices if possible. It may be appropriate if the menu is redundant and the high priority options are prominent in the body of the page.

Try a hybrid approach to achieve a balance between discoverability and layout constraints.

CASE STUDY: Interaction Design Foundation Home Page
IDF decided to hide all its links, including “UX Courses”. The courses offered are listed in large cards way down the page. So at first blush, it’s not obvious what courses they offer, although it’s the primary interest of visitors.

Here’s how the page looks now:

SOLUTION 1: Move Courses Higher
Here we leave navigation unchanged but move the relevant content above the fold:

SOLUTION 2: Expose Top Priority Menu Item
Here we leave the page unchanged but surface the UX Courses as a button:

Another hybrid example
Vivobarefoot exposes the high-level filters but conceals more precise filters behind an icon. This is better than hiding all filters, but the “filter” row is empty, so they should use available space to expose 1 or 2 mostly frequently used
precise filters:

Pattern 3: Simplify and Fit

You can save some space by using icons without labels, but you should avoid pure icons if possible. When you choose this approach, be pragmatic. Certain icons like Home are safe, while others are less recognizable. I use YouTube every day, but I don’t know what the flame icon represents:

Simon Cowell’s gesture symbolizes the idea that if a user doesn’t know what something means, it’s as if it’s not there.

You can fit links by grouping them under pulldowns:

Another approach is to shorten text labels on mobile. Here is a desktop nav I did for a client:

On mobile, I kept just the key words:

Here’s how the code for this looks: <a>Promote <span class=”mobile-hide”>Your Listing</span></a>. A media query hides .mobile-hide class on narrow screens. Note that assistive technologies may still be able to read the full label depending on how you hide it (e.g., if you make it 0 width and height).

Sometimes the links are just too long and won’t fit. In that case, you can let them overflow:

On that note, let’s talk about my preferred approach.

Pattern 4: Let It Overflow (Counter-Pattern)

The approach I generally prefer is to not hide anything. As you can see in the previous example, I let the links overflow on mobile. I want them all visible at a glance as an overview.

If you visit my site on mobile, you’ll notice my sitemap is fully exposed right at the top to orient visitors to what I’m about:

On the inner pages, I’ve removed low priority items, but I still let items overflow onto a second row:

This works for a limited number of links, 3 rows at most. I do the same thing for inline tabs:

When I worked on GoodUI.org, we usually exposed links in the body and let users scroll through them normally. 100% discoverable:

Sometimes you have tabs that are not links but switch up some text in-page. If the tabs take up a lot of height, the user may not be aware that the text below has changed. In those cases, checking if text is out of view and auto-scrolling to it may be an option.

Wrapping Up: Best Practices

  • Keep choices exposed whenever possible to ensure disoverability
  • Try simplifying to fit the choices on one line by using icons carefully, simplifying text labels, or grouping (simplify without sacrificing function and clarity)
  • If you rely on horizontal swipe, use fading, cut-off text / buttons, and motion to increase discoverability
  • If you decide to hide choices, use available space to keep high priority choices exposed in the nav area or the page body
  • Don’t be afraid to give navigation a large treatment if it makes sense

Do you need a UX audit of your mobile app or site? Send me a link, and I’ll check it out.

Posted on

The Real Life Test For Intuitiveness

This article is a work in progress…

Comparing an interaction to its real-life equivalent can be a useful test of how intuitive it is. Does it match your real-life mental model?

Example 1: In-Game Inventory Management

Imagine you’re scavenging in a post-apocalyptic city. Your bag is full. Get to a safe place. Lock the door. See what you have.

What do you do?

I bet you dump it out on the floor in front of you. 

But in the Fallout games, you pull out an alphabetical list with obscure names:

Now, you could get fancy with mimicking a real-life experience. Instead, what if we had a simple gallery that we can reorder by dragging, like this rough mock-up:

You can now see how many pistols you have, which weapons are bigger… all at a glance.

It’s best to use an existing intuitive cue (like size) than create a new abstract cue (like range). What if more powerful weapons were always beefier? What if the most accurate rifles were longer?

In the game, there is little correlation between a weapon’s size or visual impressiveness and its damage. You’d think ANY gun would finish an enemy with just a shot or two at close range, but that’s not the case. I don’t know which weapon can incapacitate a raider with a single shot at close range. If I did, the choice of which pistol to carry would be less intimidating.

Example 2: Storage Metaphors

Here’s another example. In the Farmville game, the user can buy all sorts of equipment, seeds, etc. But seeing getting to the inventory requires menu diving.

Where’s my stuff?

Well, in real life, my stuff would be in my storage shed. So let’s add a shed:

Example 3: Character Interaction

In one aquarium simulation game, the fish swim around, and you have to feed them and buy stuff for the aquarium. I found it unexciting.

I used to have a real fish once (a rescue) and my real-life experience with him was quite rewarding. He saw me and followed me when I entered the room. He was at times curious, lethargic, startled, cozy… Why not model the AI of the fish to simulate some of these real-life behaviors? Wouldn’t that engage users more?

There are many situations where comparing to the real-life equivalent can generate solutions to UI problems.

Posted on

The User Story In Context And Time

Meaning is not in the words — it’s in the total situation. – Ronald Langacker

To know if we created a great product, we need to test the User Experience beyond the screen:

Level of Test Types of Stories
Individual screens

Short-term usability stories about UI-level problems.

“I wanted to buy the product but couldn’t find a Buy button.”
Flow in context

User Experience stories that show whether the product can successfully do the job it was hired for.

“I avoided using the medical software, because it forced me to turn away from my patient.”
Usage over time

Full User Experience stories that show how well the product works as the details of the job change over time.

“The gorgeous curved screen design that I loved at first caused the screen to break a few months later, which cost me $400 to repair.”

Visually polished and usability-tested screens can still lead to a failed product experience in the long run.

Case Study: Inventory System in Fallout 4 Game

The inventory gets long and hard to manage as you pick up tons of items. For example, it’s hard to compare weapons, because you can only see stats for one at a time:

But these sorts of usability-level issues are easiest to fix. For example, as a work around, this user prefixed the weapon names with useful stats. This makes it possible to compare items at a glance.

However, fixing screen-level problems is small potatoes in comparison to the larger issues that hurt the game. Here are user stories that evaluate the inventory system at different levels:

Example: Choosing the best apparel Screen Level Context & Time Levels
Problem I can apply clothing in inventory mode A by clicking it, but how do I apply apparel while in inventory mode B? Clicking in mode B sells apparel instead. What kind of apparel is going to keep me safe?
What happened? My workaround is to exit the trade dialogue and go into inventory mode A. I then use the body chart there to see what I’m wearing now and which new apparel is superior. I click the right apparel to apply it and go back into the trade dialogue and click the apparel I’m no longer wearing to sell it. However, I sometimes nearly sell an item by mistake when I reflexively click it to apply it.

I’ve spent hours wondering which items to carry, figuring out where to stash inventory when I had too much to carry, comparing items, and agonizing over which to sell. In the end, I mastered the inventory UI, but my overall UX was poor.

I expected my diligence to pay off, but that optimal weapon I handpicked still couldn’t kill the next enemy and despite all the hoarding and trading I still couldn’t afford the best apparel.

At times I was paralyzed, even quit the game, when I found something important and had to figure out what to drop to make room. I’ve found myself not wanting to go into a new building, because finding new things had become a burden.

You can clearly see which user stories affects the User Experience more profoundly. 

There are issues of both clarity and meaning. Should I use the gun with 100 accuracy & 30 damage or the gun with 200 accuracy & 10 damage? What’s the difference between “accuracy” and “range”? Is a “fire rate” of 6 good or bad? These questions are frustrating, but the bigger UX problem is why any of this matters in the first place.

How does a feature translate into outcomes the user cares about?

If we can’t answer that, we have more than just a usability problem.

Case Study: Context for Medical Software

There’s a great story about software failure in Clayton Christensen’s Competing Against Luck:

We’d designed a terrific software system that we thought would help this doctor get his job done, but he was choosing to ‘hire’ a piece of paper and pen instead…

Why? The design team overlooked the situational and emotional context:

“As [Dr. Holmstrom] began to discuss Dunn’s prognosis, he grabbed a piece of paper to sketch out, crudely, what was wrong with Dunn’s knee and what they could do to fix it. This was comforting, but puzzling. Dunn knew there was state-of-the-art software in that computer just over Holmstrom’s shoulder to help him record and communicate his diagnosis during an examination. But the doctor didn’t choose to use it. “Why aren’t you typing this into the computer?” Dunn asked.

…The doctor then explained that not only would typing the information into the computer take him too much time, but it would also cause him to have to turn away from his patient, even just for a few moments, when he was delivering a diagnosis. He didn’t want his patients to have that experience. The doctor wanted to maintain eye contact, to keep the patient at ease, to assure him that he was in good hands…”

Case Study: Samsung Galaxy Edge

The Samsung S7 Edge phone was very slick with its curved edge. But it turned out that this design choice makes the phone hard to protect. Flat screens allow protective cases with higher sides that rise over the screen. Cases for curved screens rise just barely. Even with a high quality case, this screen cracked along the curved edge (and it happened twice)!

If we look beyond the first experience and aesthetic factors, we see a very different User Experience story.

The cost of repair was $400 the first time. The second time, I had to replace the perfectly functional phone, which didn’t suit my ecological values.

Sadly, Samsung appears to have standardized this design. I suspect it’s even financially lucrative, due to demand for pricey replacement parts or replacement devices.

Case Study: Fitbit Dashboard

In The Big Book of Dashboards, Steve Wexler describes how his experience with his Fitbit changed over time:

“After a while, I came to know everything the dashboard was going to tell me. I no longer needed to look at the dashboard to know how many steps I’d taken. The dashboard had educated me to make a good estimate without needing to look at it. Step count had, in other words, become a commodity fact. I’d changed my lifestyle, and the dashboard became redundant.

Now my questions were changing: What were my best and worst days ever? How did my daily activity change according to weather, mood, work commitments, and so on? Fitbit’s dashboard didn’t answer those questions. It was telling the same story it had been telling on the first day I used it, instead of offering new insights. My goals and related questions were changing, but Fitbit’s dashboard didn’t. After a year, my Fitbit strap broke, and I decided not to buy a replacement. Why? Because the dashboard had become a dead end. It hadn’t changed in line with my needs.”

So there wasn’t anything wrong with the dashboard in 2 dimensions, but its usefulness wasn’t constant along the dimension of time.

How to Uncover the User Experience Story

Time is a necessary dimension of user testing. Retrospective interviews and delayed customer feedback help reveal the total story. You want to know how the customer enjoyed the shopping experience or their first time playing a game. Then you should follow up to see how they feel weeks later.

You can get more insight into how the story unfolds through something like a diary study, which allows users to keep track of their usage at their own pace. They can capture one-off occurrences and experiences that might at first seem insignificant and would get lost otherwise.

Posted on

Storytelling for Cryptocurrency News (2018)

Developed case studies for a financial news site in order to clarify its value proposition and increase subscriptions.

The Original

  1. No clear value proposition – there are many ways to get similar information elsewhere.
  2. The original graphs are too small and don’t make it obvious what happened, when, and what the user can learn from the example.
  3. The study shows a “Learn More” button forcing users to do more work, instead of improving the case study so it does the work of persuading visitors.

To address this, I developed the improved case studies, wrapping the top benefit of the product in a simple narrative with a simple visualization.

Concepting and Collaboration

I always start on paper and get alternative viewpoints from others whenever possible.

I did some rough paper sketches to capture my idea: My collegue (@jlinowski) did his own sketch:

My Solution

A new simple case study looked like this:

I also took the opportunity to show a multi-step scenario that involve both buying and selling:

These were based on my domain research and interview of the business owner, to learn past stories of success.

I designed and wrote 3 strong case studies to improve:

  • Value proposition: New case studies better convey that early info = profit, which is the key benefit of this subscription. All examples are real, dead simple, and recent. The “How To” wording in the headline also helps convey that these sample strategies are repeatable.
  • Visual hierarchy: The diagram is larger to emphasize the importance of this section to a prospective customer and reduce distractions.
  • Usability: I simplified the diagrams and added clear annotations to show what happened, when, and why it’s important.
  • Transparency: Trying to anticipate visitors’ questions, I lead with a consice screenshot of the actual news feed, so it’s clear what info lead to the decision being described.

Measurement

We A/B tested other aspects of the home page redesign. We agreed not to A/B test the case studies, because (1) team agreed it was an improvement (low risk) and (2) testing would impact other business priorities. After our initial engagement the client reached out to create several more case studies, based on positive feedback to the ones we originally launched.

Posted on

Landing Page Content Redesign (2017)

I was hired to improve the sales of client’s eBooks/Guides about health supplements. The challenge was showing what’s inside (improve usability) without giving away too much for free. I hand-sketched new page design, built it, and ran A/B test.

Problem 1

The top of the landing page did a poor job of explaining the value proposition and contents of the products. Also it lacks a low-friction action to engage a visitor:

The list of health topics covered appeared mid-way on the page and was not easy to scan:

Solution 1

I created a strong start with the main value proposition and top 3 benefits of the product. I categorized the products into 3 buckets Body, Lifestyle, and Mind (something the client had not done), which made the topics easy to scan at a glance. “Three” is a common number in design. Finally, I made the topics clickable to create an area for gradual engagement:

Feature 2

The contents of the guides were originally shown way below the fold in small font. There was little to show a potential buyer what the guides actually contain and envision how they will be using them:

I decided to turn this afterthought into a feature, giving away some more free information without giving away too much.

Here’s an early concept that highlighted a sample supplement:

After several iterations and collaboration with another designer, we decided on a different approach. When the visitor clicked a topic, they would see all the supplements covered. The supplements were categorized into 3 categories: work, unproven, and avoid. I also included scenarios for combining supplements, so users could better gauge if those supplements are applicable to them:

Testing With Users

We A/B tested the old and new versions with ~40,000 users. The new version increased completion rate by ~6% and revenue by ~15%. This was done through a genuine improvement in content usability as well as persuasion techniques like curiosity.

Posted on

Detailed Fintech UI Concepting & Design (2015)

Optimized content to persuade visitors to upgrade to the paid product and designed new functionality, dashboards, and reports.

Applying User Centered Lens

I helped the client to create a matrix to clarify their target audiences and user needs in Plain English. Here’s an example:

Writing copy samples helps the team refine its message and value proposition. It generates ideas for design. Later it can serve as raw material for headings, labels, and marketing copy.

This eventually evolved into personas focusing on empathy and context:

Product Concepting & Strategy

I helped the client connect their raw business ideas to specific user goals. I asked user-centered who/how/why questions to tease out the core opportunity. It is common for clients to have implicit knowledge that they don’t think to make explicit.

For example, while discussing a screen, I suggested we break users into “buyers” and “sellers”. It turned out “buyer” and “seller” terminology didn’t feature anywhere in the UI, because the clien’t site isn’t a marketplace. However, this language well described the goals of the users.

I sketched  a lo-fi wireframe in real time. It targeted buyers and sellers explicitly instead of saying “Lists of Products”:

Discussions like this lead to new product ideas, different ways of organizing the existing offerings, and different strategies for marketing.

Landing Pages And Calls To Action

I designed a number of landing pages for this client. When they needed to “collect user data”, I helped them reframe this as a user goal i.e. why are they giving their data? When they wanted a page to list some facts about their product, I helped them articulate the value proposition. I wrote copy and organized content rooted in the user’s situation:

Real-Time Sketching & Collaboration

The client and I using screencasts and email to exchange ideas. Then we’d get on a Skype call to sketch the ideas with real-time feedback.

For example, the client had a screen that lacked purpose and consistency:

I improved the information architecture of the screen (it’s value proposition, hierarchy, and clickable items). During the conversation I redesigned the numerical scale and proposed to expand it create a “report card” for all criteria with useful “how it works” insights for the user (useful based on actual comments from users):

Real-time collaboration allowed design decisions to cascade and evolve to create a more useful, cleaner screen that the client was happy with.

Guiding Users Through Complex Processes

Problem: During our Skype call, the client and I arrived at the idea of “generating leads”, something users are currently not able to do using any tool on the market. To get at this info using the site would require multiple steps and reports.

Solution: I proposed to clarify and emphasize this feature by creating a unified step-wise wizard culminating in a practical “Prospect List” a sales person can run with:

I encouraged the client to guide users more. For example, I recommended adding more descriptions and training videos to various complex areas of the site.

Dashboard Concepting

This is a mockup to summarize a financial portfolio. This report gives users details and a key takeaway i.e. a breakdown of their key product buckets plus a single number summary (top right):

The mockup embodied existing requirements but also served as a proof-of-concept for new potential ideas. For example, in this diagram, I included a blue line that compares Product A to a benchmark. This is a way of asking the question visually: Does the user need to compare to a benchmark?

In this concept for a dashboard component, the idea is to see a subset of the data that’s relevant and then act on it directly. I’m filtering data to show only the negative y axis to highlight only the negative events. I’m then comparing it to the equivalent on the benchmark. I’m also detecting the lowest point (worst event) and allowing the user to click it directly:

I created a summary component to  let uses compare current value to the range, and how far it is from the highly probable values (cutting to the key insight instead of a long table with a complex chart):

Divergent Ideation

There are usually many ways to doing something. When I sketch ideas for a concept, I usually diverge to explore many options. I then converge based on what makes most sense and with client’s feedback OR I propose an A/B test.

For example, I tried an upgrade pop-up instead of the full report to persuade users to pay:

Some of our questions explored as separate variations were: Should I tease user with some summary data? If so, what data? Should I show upgrade call to action and input fields on the same page or hide them behind an upgrade link? Should I go with a dark or light motif? What’s the optimal message for the heading? Should I list top benefits or speak with data?…

For the home page, I concepted out different ways to get the user started:

In version B, I proposed a single field with a call to action, an action 90% of users would be interested in. In version C, I proposed instead to let user choose who they are, then show them a tailored message and call to action (Gradual Engagement). In Version D, I proposed showing the user several “I want to …” statements to directly link to user goals… and so on.

Posted on

Wireframes For Insured Dashboard Redesign (2014)

Developed concepts to modernize and expand features on a customer portal.

Problem

The original dashboard (which I cannot share) was missing a lot of key details. There were lots of links and generic info. I wanted to give the user a summary of their account and emphasize actionable items, such as access policy documents or payment history. As a team, we captured several business priorities, like reducing paper documents, more self-serve options to free up call center, etc.

User Profiles and Use Cases

After talking with the project owner and interviewing a business subject matter expert, I captured several light personas defined by use cases:

My personas are defined by WHAT a user intends to do. A persona or use case becomes a trigger for a wireframe flow that meets one or more requirements.

Wireframes

I created detailed wireframes like this. Their function was “proof of concept” and exploration of other potential features. Clients need to see something to be able to better understand what they need:

I usually encourage clients to build components as needed, to think in Agile terms and embrace rapid iteration over perfection. As a result, wireframes for each screen are more detailed in key area and less in others.

Solutions on the dashboard above included:

  • Holistic view: I summarized all aspects of the user’s interaction with the company and categorized them into 3 columns with subsections. I also added a global summary info bar at the top (e.g., “You have 6 unread docs”)
  • Hierarchy: I showed content in order of importance/relevence, from top to bottom, left to right. Older and secondary content was concealed behind summary links.
  • Consistent Clickable Styles: I exposed the key actions as buttons or links. For example, under Payment, I added a prominent Pay Now button and a secondary link to View Invoice.
  • Relevance & Quick access: New and unread items highlighted. I exposed some key actions. For example, I added a pull-down to quickly switch the policy holder for those account that have multiple people on them.
  • Surfaced Meta-Data: To increase the relevance of each link, I tried to surface the key metadata from the item being linked to. For example, a document link came with a concise description showing document data, policy number, expiry date, etc. For the View Invoice link, I showed how much they saved on that invoice, due date, etc.

Ideation & Storyboarding

I developed a layout for the dashboard to standardize existing pages. Based on this layout standard, I explored various areas of functionality. The client didn’t know what exactly they wanted. They wanted to see options and get advice on what their client might be interested in seeing and how.

Most interactions dealt with looking up the right documents, managing access, and sending documents:

I mapped out user actions and screen transitions by connecting various wireframes, like this:

The client and I went through multiple iterations of each screen. I would start by making suggesting of what might be useful features. They would give me feedback on what they thought would work for their clients. I would make revisions and so on.

Prototyping

Even a rough functional prototype can help better “feel out” a solution than a static representation. Here’s a simple HTML prototype that the user could click through to test the overall flow. I also mocked up an alert email, which triggers the process. This way the client could start seeing the full story of how a user will to log into their dashboard:

The client would then take my concepts to his team for testing and further elaboration. My objective as to quickly concept and prototype UI ideas for them.

Posted on

UX Audit of a Facebook Game (2018)

Farmville is a farm simulator for Facebook from 2009.

Original Home

Redesigned UI (Rough Mock)

Theme Problem Solution
Neighbours Greatest real estate to empty slots for Facebook friends Simplified Neighbors pane and surfaced stats (level and cash), can grow as more social features are used (progressive disclosure)
Action menu Buried actions requiring multiple clicks Exposed action menu with animated transition to avoid loss of context (view prototype)
Key Stats Key Stats are scatteredDifference between “Cash” and “FVO” Farm Cash is unclear Compact Key Stats, together on the leftFarm Cash deleted
Levels Unclear “level” system Explicit level labelLevels are now goal-driven, so it’s clearer what to do and what the constraint/deadline is (added Time Remaining to the stats)
Selected States No selected states for tools, selected seed, etc. Clear selected style for actions (e.g,. in my mockup, the Plow is selected in nav and mouse cursor looks like plow)
Plot labels Easy to miss wilted plots Clearer labeling of plot status (Ready, Wilted tags)Status summary on the side (when plot clicked, map pans the screen to the plot)
Cash Two types of cash (confusing) Simplified “cash” concept (removed Farm cash)
Inventory No buildings by default.Unclear where my inventory is. Created default building (how can you have a farm without buildings?)This building doubles as the inventory (you can click the barn to see what you own so far)
Settings Full screen mode not discoverable. Full screen icon in standard bottom right location.

Original Product List

Redesigned Product List Concept

Theme Problem Solution
Costs / Layout Low contrast on costsUnclear prices (two prices shown: cost to buy and eventual profit; unclear which is which) Cleaner, standard layout for all “costs”Can’t confuse cost and profit (using price look for cost and “earn” label on profit)
Action Small BUY buttons and unclear that BUY means Plant Now Entire item card is clickable
Scrolling Horizontal navigation via arrows is awkward Standard, faster scrollbar navigation
Transition Loss of context when menu opens and covers up game Animated slide out attached to main menu, less jarring (See Adobe XD Prototype below)

Top Usability Lessons

Avoid Competing Concepts

It was unclear why I was seeing a “you’re out of cash” message when I had tons of cash.

In my mockup, I removed Farm Cash, leaving money and water as the two main constraints. Users would buy regular cash or other perks.

Free Should Be Playable

I ran out of “Farm Cash” too fast, without knowing what it is, leaving few things left to do in the game. A game should still be playable and fun for all, not only paid players. A user could still make upgrades later. Otherwise, they will just spread the word that the game is not fun, hurting adoption.

User Research Question: At what point would players be ready to invite friends? Would they do so right away to say “Hey, I’ve just started this game” or would they do it later to say “Hey, I’ve played this game already and it’s great”.

Reward Every Session

Once you plant a lot of  stuff, there’s not much to do. It teaches users not to expect much. Delayed gratification and long feedback loops are always weaker motivators. One factor aggrevating this is that interesting Actions are burried inside the Market dialogue:

Even if the game could support short play times (plant now and harvest tomorrow), it should also be playable during longer sessions. In my mockup, I exposed some of the actions, so it looks like there is more stuff to do. I would also unlock more of the categories, so users could play around. For example, they could buy 1 cow and maybe do something with that cow (feed it, tickle it). This would provide a simple experience with immediate feedback, while the longer feedback loop of growing/harvesting is ongoing.

User research question: What are some contexts in which users will play the game? For example, user plays for 1 min while waiting for a bus or for 15 minutes while riding the bus. Will there be lots of distractions? How long should the typical session be to fit the constraints? What are the user’s most satisfying moments?

Avoid Interrupting The User

There are lots of pop-ups and early upgrades that happen at the wrong time or interrupt another process.  For example, I was trying to plow but found a box. This popped up a new screen and another about the box, completely interrupting my task. Often dialogues pop up one over the other. It’s better to show messages when they are relevant. When I’m planting is not a good time to suggest that I customize my character. Detect the “end” of a process or task and show relevant messages then.

User research question: What are natural pauses in the user’s game play where a general message could be shown? What are key problem moments when a contextual message could help? Which things do users enjoy figuring out for themselves and which things are frustrating?

Enable Wayfinding

There are many screen orphans: they pop up, you close them, and later don’t know how to go back to them. For example, when you click a plot of land with the default Multi-tool, you get a pop-up with seed choices to plant. There’s no direct link to this screen. There’s no headline to explain whether this is an inventory of seeds I own or stats on what I’ve planted. Also, there is no selected state although you can choose your seed.

User Research Question: What are most common and enjoyable tasks? How long do users spend on a task e.g., planting crops? What categories of items do users care about? What do they want to do with those items? How much choice is too much?

Clearly Label What Is Selected

There is no selected state on tools, which makes it unclear what mode I’m in or what to do (especially if I clicked something just exploring early on). In the screenshot below, my mouse pointer shows no clue as to what tool is selected and what will happen if I click the ground. The plow tool has no selected state. It’s also unclear how to exit plow mode.

In my mockup, I labeled the selected states and the tool clearly.

Create Explicit Rules And Constraints

Some of my crops wilted, and it was unclear by looking at them that they wilted. When I clicked them, I just plowed over them, because I didn’t know what “unwilting” means.

In my mockup, I labeled “wilted” plants more explicitly. I would also show some kind of message, perhaps along with the “Ready” status updates on the side.

User Research Question: What do users want to do while things are growing? Are they receptive to, say, email notification when their crop is ready or wilting?

Feature Ideas To Improve Immersion And Create Better User Stories

Keeping It Fresh

  • Daily opportunities + challenges:
    • Extra rain causes crops to mature faster, BUT you have to harvest quickly
    • Drought is causing wilting, you have to water your crop immediately
    • Phone call from a vendor who wants to arrange an ongoing bulk order and pay your extra (if you grab the deal, you make extra for every sale and you get free shipment of resources like fertilizer)
  • Material upgrades:
    • A barn upgrade, so you can store more stuff
    • Better rake that can plow faster and cheaper
    • A plot size upgrade, so you plant more and earn more per plot
    • You discover an old well that gives you extra water
    • You receive sample bags of fertilizer so your next 10 crops will grow faster
  • Environmental challenges and opportunities:
    • Storm endangers your crop so you have to build greenhouse to protect your crops, or fix damage before your crops fail
    • A tornado destroys your barn so you need to recruit neighbours to help you rebuild it
  • Surprise new characters:
    • A part-time helper shows up to pick crops before they wilt (your cousin who’s come to stay for a week and help for free or a part-time employee who requires minimum payment)
    • A feral dog comes wandering onto your property, and you can tame it (it then keep badgers away)
    • A new neighbour moves in: if you get on bad terms, they can drive you out of business, but if you get on good terms, they can help you
    • Compete with AI neighbors for business
  • Mini games
    • Add some RPG elements (e.g., ride a tractor), so there is a purpose to controlling the avatar
    • Combine big picture activities and specific farming tasks: zoom on crop plots and do something detailed (e.g., a mini bug spraying game like Whack-a-Mole or Candy Crush)

Characters

  • Invite friends to visit farm. They can water crops or pick ready crops when I’m not available. If they want to do more, they need to get their own farm next door.
  • Users get different perks and can share props e.g., “Can I borrow your tractor? I’ll pay you 50 coins for a day” You get rewarded for sharing.
  • Auction where you can get items cheaper (tractor, animals, tools)
  • Invite friends as helpers (e.g., “A drought destroyed my farm. I need 2 people to sign up to help me rebuild. I need someone to play carpenter to rebuild the barn and someone to dig a new well”)
  • AI neighbours whom you can borrow things from
  • Multiplayer-like features and co-ownership of items:
    • Start a farm together with friend, spouse, etc.
    • The more people, the larger the default farm and more cool farm props (e.g., a farm with 3 people gets a tractor by default)

Chat features

  • Game posts friend updates automatically (e.g., “John just got a larger shed”); users can then like an update or reply with text
  • Team chat for multi-player farm g., User 1 asks User 2: “Hey, I just sold a large harvest. Should we buy a tractor or buy more land?”
  • Chatbot: you can talk to your avatar or AI neighbour e.g., “How are you? Go plant some carrots”
  • Integration with Messenger for chat with avatar e.g., “Something’s happened. Come right away.” or “Crops ready. Should I harvest?”)
Posted on

Remote Testing Paid Signup Flow

Recency: 2015
Role: Owned project, client-facing designer and A/B test developer
Process: Solo with over a dozen A/B test iterations
Top Challenge: Improve sales by genuinely improving UX

Iterative redesign and A/B testing to improve the Plans/Payment flow on a dating site to increase paid sign-ups.

Problems With Original

The original process failed to emphasize the top benefits:

There is no guidance on what to choose. Is 3 month plan long enough?

Buying message packs and the option to enter a coupon code further complicate the choice. Analytics showed some of the options were never used. Some benefits, like “Extra privacy options”, are unclear. Some benefits, like “Organize singles events”, are not relevant for the average user.

Once the user picked a plan, they went to Step 2:

The 2-step flow was awkward. Step 1 had the per-month price prominently, yet step 2 starts with a higher prepay-3-months price. Checking analytics showed people went back and forth between the two steps, suggesting Step 1 wasn’t effective as a gateway page.

My Solution

My final redesign looked like this:

The key aspects of the solution were:

  • Hierarchy & Flow: Simplified to single-page process over multiple steps. Tabs for each plan allowed user to explore plans without flipping back and forth between pages.
  • Value proposition: I turned the top benefit into the headline (“Make A Great First Impression, Send the First Message”). Showed only the best next 3 benefits below instead of many.
  • User-centric: Guided user’s decision with Plain English financial and situational advice. For example, the 6-month plan says: “Pays for itself in X months. Take your time meeting people.” Used more casual language when describing the plans too.
  • Hierarchy: Removed distractions and moved secondary payment options way down to the footer.

Many Interactions Of A/B Experiments

Over multiple tests, I removed various components, such as the message pack footer. I also tried simplifying the choice by setting different defaults and using a single column layout.

Here’s an intermediate variation, which did NOT do better:

I tested setting the default to Plan 1 as well as Plan 2. During the testing, I monitored the impact on sales counts and revenue, as well as user behavior.

After each round of testing, I prepared summmary reports and analyses with lessons learned and recommendations.

User Behavior Research

I tracked user behavior in detail, like if they were chosing a plan then going back and changing their choice. I tracked how long they spent at a given step. 

Some results were surprising. For example, setting the default to Plan 1 reduced sales of Plan 1 but tripled the sales of Plan 2 instead BUT in a way that did not increase overall revenue due to the price differences between the plans.

A/B Test Outcome

I A/B tested this solution and it increased revenue and sales for all plans. It took 3-4 iterations.

Posted on

Wireframes & Responsive Design For Fashion / E-Commerce Client (2015)

I created wireframes and a partial high fidelity design for a fashion e-commerce site looking to increase its click-through rate.

Direction

My hypothesis was that larger images and exposed curators would encourage users to browse more slowly and pay more attention to each item. Instead of 3 columns of smaller images, I opted for 2 columns with larger images. I exposed basic item details, including the brand, because this site is all about curated, select items from boutique brands.

Wireframing

I sketched a desktop concept in Adobe Illustrator and annotated my design rationale and interaction details. I then showed the flow of various edge cases and states:

I use Illustrator to be able to freely explore layout options without being constrained by the shapes and features of the software.

I created a responsive mobile view in parallel, showing how the columns could be collapsed and filters overlaid:

High Fidelity Designs

Posted on

Guidelines for instant search filters

Vivareal.com.br recently ran a test, where they removed the Apply Filter button and instead updated the search results instantly (screenshot from goodui.org/evidence):

The results are weak but suggest a simple filter behavior might improve a deep metric like Leads (form submits). Given that many prominent sites are doing it, it gives the rest something to try. It also raises questions about what is the best implementation for a given site.

Progress Indicator Is Mandatory

On other sites, like Reverb.com, the transition is smooth. The search results go grey, then they populate in-place:

If search results take more than 200ms to update, use a spinner and/or grey out results, or use another progress indicator (see Jeff Johnson, 2010 for more on human timing requirements). Beyond that, the search filter won’t be perceived as instant and users will be off-put.

Autotrader.ca doesn’t show results instantly. To avoid confusion, they grey out the results and shows a green alert to confirm that user’s filter changes have not yet applied:

Page Refresh Or Not?

On many big sites like eBay and Amazon, filters behave as links. There is a delay and a full page refresh. Here’s eBay:

Some problems with this:

  • The redirect always takes too long. And after a page refresh, I find I need a second to refocus and figure out what happened.
  • I usually don’t find it obvious how to undo a filter or go back in that case, because the UI has changed. I’m probably not the only one.
  • Change Blindness could obscure some important visual change (e.g., people may not notice that some other categories have been updated).

A page refresh may be necessary if there’s a long list of filters that goes past the fold. If you update listings immediately in that case, the top results could be out of sight, at the top. Many sites also update related categories and sub-filters based on the filter chosen, so essentially the whole page does have to change.

I would be very interested to see an alternative pattern to this that is less jarring, faster, and allows easy backtracking. For instance, an animated scroll back to the top may be a better option than a full page refresh in some cases.

Submit For Inputs Or Update As You Type

In the case of Reverb, notice there is a small submit button for the text inputs. All the other fields are instant, but you submit an input field manually when you’re done typing:

In contrast, on sites like Netflix and platforms like Apple TV, filter-as-you-type is heavily used and is very effective:

My recommendation is to use this only if you serve results FAST and if the search terms are bounded. For example, Netflix is a repository of movies and there are only so many movies that start with “Fast and”. So it’s a good solution for them. Likewise, on a stock site, showing the most common stocks might work, because stock symbols are a limited set.

Autocomplete

If filter-as-you-type is not feasible, consider using Autocomplete on the input fields. When using Autocomplete, you can delay showing results until enough characters are typed. And when you show matches, it’s text-only and right below, so it’s not distracting. Moreover, web users are all familiar with this pattern.

Reverb uses Autocomplete in its main search input on the home page, but not on the Keywords filter.

Do Not Freeze

When a search filter is clicked, it should not block the whole app. That is, a user could apply more filters while the previous ones are still fetching data. Similarly, removing a filter should apply opportunistically. For example, when I click an enabled checkbox filter, it should immediately show as “off”, even while the data is still being fetched.

Cache Results

If data sets take a long time to load, we should cache the results. That way when people undo a filter, we can go back to the previous view instantly. It may also be a good idea to keep the original results until new ones are ready. That way, if a user accidentally clicks a filter and then undoes it, you can just cancel the new lookup and show the original results.

Best For Simpler Searches

If a user is expected to enter multiple filters, then there is no point submitting after every search. A manual submit is best in this case. This is also true when there are many filters. For example, your basic search could be instant, but if the user pulls down the massive set of Advanced filters, then a submit button would be needed.

Also if the data set takes a long time to filter (because it’s vast or complex), a manual submit may be better. For example, the search filter for the ChemTrac municipal chemical data repository has an Apply button which filters a very busy map:

Estimate Search Time

It’s a good idea to log search times to see if it’s taking too long. If searches take more than 1 sec on average, then you could show the ETA using a progress indicator or countdown, rather than just a generic spinner. For example, the map for ChemTrac can take a few seconds to populate. Here’s what it might look like with an ETA:

What is your experience with Instant Filters?

Share your thoughts and additional criteria.

Posted on

Patterns for optimizing checkouts: flow

When a visitor knows what to expect and completes a process smoothly, I call this good “flow”. This post shows some options for how a checkout can be organized and presented to anticipate questions like: Does everything look right with my order? How long will this take? Is it going to be complicated? What are my options?)

 

Account Creation

Allow users to checkout as guests without side-stepping into an account creation flow:

checkout-guest

Better yet, conceal account creation. For example, ask customers if they want to save their information at the bottom of the form (or on the Confirmation page after the order is completed):

checkout-noaccount

For existing customers, you can provide a link to login or a small sign-in form on the side. If a user chooses not to login, you might check if their email is already in the system and offer to retrieve their last used info:

checkout-login

If someone forgot their password, you can tell them to continue as a guest to avoid the delay of recovering their password:

checkout-recover

Express Checkouts

Give existing customer an express checkout option. On different sites, it may be called “express checkout” or “1-click purchase”:

checkout-express

Another type of express checkout is when your email recipient clicks a unique email link, so when they land on the page, they get the option of using same billing and shipping details. A Complete Money Back Guarantee helps ease doubts about an “express” checkout, since the customer sometimes doesn’t even get to see their last used information. If you offer 1-click purchases, include a Cancel/Undo option right on the Confirmation page. I’ve used a 1-step checkout before, not realizing it would literally put in the order without any confirmation.

 

Checkout Tunnels (Enclosed Checkouts)

A checkout that keeps normal navigation and sidebars creates a more natural transition. It tells customers “Check out now if you want, or keep looking around for other products”.

In contrast, a checkout tunnel removes all distractions. It tells customers “You’ve finished browsing. Time for payment”. Test the impact on your total order value, time to purchase, as well as completion rate. Keep consistent branding, and keep some common elements as visual anchors (e.g., remove the navigation links but preserve the area, so content areas don’t jump too much after the page transition).

checkout-tunnel

One hybrid approach is opening the checkout in a modal with a faded background. The fading shifts attention away from background elements. At the same time, it maintains a strong connection to the product, since the product page remains in the background. One way to preserve that on a separate checkout is to include the image of the product being purchased.

 

Form Layout

The goal is to make the form look easy to fill.

Direct flow of attention in one direction, top to bottom. Avoid columns. That said, you can group short and closely related fields, especially if it’s expected (e.g., credit card dd/mm/yy expiry fields should appear together):

checkout-cols

Give fields an appropriate maximum width. A narrow form will look simpler, because it appears to require less typing in each field:

checkout-width

Keep labels above fields to make the field-label unit easier to process. Left-aligned labels have advantages – they shorten the form and are easier to scan (see Top, Right or Left Aligned Form labels):

checkout-labels

Avoid placeholder text and inner labels, because it creates confusion about which fields are completed and which are not. Inner labels may be ok on very short forms (2-3 fields), but make sure the label remains visible once the user starts typing. I like the pattern that moves the label over to the border area rather than removes it.

Stepped Progress

To make the form look like less work, chunk it up. You can have a long form with numbered sections separated with spaces or lines. Alternatively, you can use the “accordion” pattern to show one section at a time, while other sections are collapsed. Some checkouts span separate pages, such as Personal Info > Shipping > Payment (see examples with test data on GoodUI Evidence):

checkout-steps

If you use a single long form, create distinct, intuitive sections (like Shipping Address, Payment), which you can also number. Test for best field to start with: Is it the email? Is it shipping preference? What is low friction? What is high engagement? What is high commitment?

If you use a multi-page checkout, use a breadcrumb or other progress indicator. For your “Next” buttons, use a label that sets an expectation, such as “Next: Payment”.

In your analytics, measure drop-offs at each step and engagement with key fields, so you can compare effectiveness of each layout (e.g., how many people start filling credit card).

Payment Alternatives

Choose a transaction processor with a high success rate. In addition to your default processor, you can offer an alternative gateway, such as PayPal. Conversely, see if removing the choice increases revenue:

checkout-processors

A 3rd party checkouts usually takes the user away from your site and provides an experience you can’t track and have no control over, but it may increases revenue.

You can also use a fallback processor when a transaction is declined. If automating that is not possible, you can show a more informative Declined message with a link to the alternative, like PayPal.

Order Review

If you have a review step, try removing it, as it’s likely unnecessary. However, if you have a long checkout spanning several screens, it may be reassuring to see a summary before committing to the order. See what works.

checkout-review

In the next post, I plan to look at the Fields aspect of a checkout, which tells the user what data to provide and in what format. If you’re interested in reading that, please leave a comment so I know you’re interested.

Are there other patterns and aspects of a checkout I have not covered?