Posts

Posted on

Designing Solutions for Unpleasant Tasks

We can all agree that there are tasks out there that aren’t fun at all, such as filing taxes, paying bills, creating a will, etc. When it comes to designing UX for an unpleasant task, the first thing to accept (and remind oneself throughout) is that the task itself sucks because it just does, and that the UX professional should do as much as possible to not make it suck more. From UXMatters.com comes a FANTASTIC piece discussing design strategies for unpleasant tasks, starting with:

Accept That You Can’t Make Some Tasks Pleasant
A positive user experience can help minimize the pain and avoids adding more unpleasantness, but it’s not going to completely take the pain away. As UX designers, our job is to help people get through their unpleasant tasks smoothly, without piling on more difficulty. Ease of use and efficiency are especially important in easing the way through unpleasant situations.

Stay Out of the Way
Ensure that the UI you design doesn’t get in the way or cause more problems. Remove unnecessary features, distractions, questions, and interruptions so users can focus on their icky tasks.

Be Careful What You Say
When writing messages and other text relating to unpleasant tasks, it’s best for the tone of the content to remain neutral or perhaps mildly encouraging. Being cute or irreverent is not going to go over well.

Avoid Overwhelming People
Too much information or too many options can easily overwhelm people who are already stressed, anxious, fed up and pissed off. Keep in mind the following techniques:

Ease into Things
Dashboards present an overview that eases users into complex information by presenting a simplified view first before they dive into the details. This approach may be more appropriate than dumping a user into complicated screen right away.

Show What’s Coming Up
Another way to ease into a process is by telling users what to expect. People are more likely to begin and complete a process if you give them a reason to do so and show them what’s involved. Consider a quick text overview before a new section to better set expectations, or a progress indicator like those used in a check out process in e-commerce transactions.

Focus on One Step at a Time
How do you eat an elephant? Exactly. For some activities it’s best to break the task into smaller, more manageable “bites.” This makes the overall task feel less overwhelming and allows the user focus better on requirements.

Use Progressive Disclosure
Provide only the information and options users need to see in order to accomplish the tasks they’re dealing with now.

Hide Complexity
Don’t expose users to information they don’t need to see. Duh, right?

Minimize the Need to Read (when appropriate)
It’s widely accepted that people don’t like to read online instructions. Under normal circumstances, they’ll skim just the content they need to get through. When people are stressed out, this is even more true. So for stressed out users, do them a favor and keep the content concise and make it easy to scan with headings, bullet points, and format text that needs to be emphasized.

Automate Actions
Automate frequent, repetitive actions, or make it easy for the user to set an automated preference. Then make it obvious that it’s been completed in case the user wants to undo the action.

Provide Common Defaults
Provide time-saving defaults to users so they don’t have to input the values themselves.

Avoid Surprises
Enough said. Keep users informed and set proper expectations.

Give Users Control
Give users a sense of control by providing them with options instead of constraining them to a specific path. Advanced, knowledgeable users will appreciate skipping the screens and information they’ve seen before. Also, in the same vein:

Provide Options For Different Audiences
E.g, Novice vs Advanced users.

Give a Sense of Progression to Encourage Users
“Are we there yet?” Not knowing makes just about everyone nuts. Especially in the midst of an unpleasant task. So let users see how their progressing to remind them that relief is in sight.

Provide Various Levels of Help
Instructional text, tool tips, contextual help, live chat access, call center access, email, contact us, progressive disclosure tips.

Help Users Make Difficult Decisions
Provide information, suggestion and recommendations. Especially when tasks and/or subjects may be unfamiliar or infrequent.

Oh yeah, avoid being annoying. “Clippy” anyone?

Read the complete article with relevant examples at UX Matters:
“Designing Solutions for Unpleasant Tasks”

Posted on

Button Identity Crisis

Came across this beauty of a button in the upper right-corner of a lightbox overlay.

Image

 

The value of identity of course is that so often with it comes purpose.

– Richard R. Grant

Posted on

A case of the hiccups

Earlier this week I was creating an online account in order to start a trial for a cloud wireframing prototype tool. The form itself was easy to scan and follow, aesthetically pleasing from a visual standpoint, and was using real-time field validation instead of “on submit.” It was all good until I had to enter, in order, a username and password. Then I encountered an unforeseen hiccup in the validation implementation.

After I entered my first choice for my username, I received the following alert and error messaging. uname3
“Nice error message design”

So I deleted my first choice and proceeded to type my second choice for my username.uname4
“That’s weird. What are the odds”

So I deleted my second choice and proceeded to type my third choice for my username.
uname2
Did I create an account once and forget? WTH is going on?”

And other colorful commentary.

Then realization hit through happenstance of clicking away from the field. The form field didn’t recognize that I was typing in a different username after I had deleted the first. It was “stuck” on the original choice I entered. The field wouldn’t “clear” until I tabbed or clicked away, then entered a new choice for username.

uname5
Success! I wasn’t losing my mind. I wonder how many users of the same cloud software tried half a dozen usernames and passwords (yep, same issue) before they gave up or (luckily) figured it out. And/or lost their minds trying.

But, lesson learned. When implementing real-time form-field validation make sure legacy messaging validation, specifically in the case of error messaging, clears appropriately in order to better inform the user. 

 

 

 

 

Posted on

Even UX for hoodies matters

Image

I am a hoodie fanatic. My husband can’t stand it and had literally phased me out of them several years ago but then they made a fashion resurgence.

However, I won’t just buy any old hoodie. The details are too important (I’m confident other hoodie freaks can relate). Too thin (as in weight)? Forget it. Not fuzzy enough? See ya. Sleeves not long enough? Buh-bye. It has to maintain the fuzzy, comfy appeal through repeated washings. I go so far as to hang dry to keep the fuzz factor from getting sucked away in the dryer (except to fluff). Even if the hoodie has a design or graphic that is the shizzzzz, if the sum of the parts don’t add up after repeated wear, fail. Honestly, I like my Lululemon Scuba Hoodie, but I don’t LOVE it.

Sounds like someone finally got hoodie design RIGHT. 

 

Posted on

Dueling remote buttons

ImageThis remote has two buttons, in shades of red, in key positions at the top of the remote.  The one on the left is labeled “POWER” while the one on the right is labeled “ON/OFF.” To a remote novice like myself, my first instinct was to press the “ON/OFF” button to turn the television “on.”  Makes some manner of sense, right? After several failed attempts, I was forced to turn to a fellow co-worker and ask WTH? Turns out, the “ON/OFF” button is to turn the button lights “on” so they’re visible in the dark. (!?!?!?!) Lesson learned, but I still question the: 1) size 2) relative position and placement 3) use of color 4) and labeling applied to the Power and the On/Off buttons. It seems the On/Off button could be given a little less prominence, a different color, and don’t we have technology to make them glow in the dark or react accordingly with sensors?

 

Posted on

Join Together, Be Moved

Quick break from the action to mention a recent commercial created by Wieden + Kennedy (Portland, OR) for the folks at Sony, “Join Together.” I love the concept: bringing together the engineer and the artist because, well, it’s the world I live prefer work in.

They usually live in different worlds, but when they work together, that’s when you can get something really new.

And the soundtrack, a sick remix of “Join Together,” by the Izzie Twins, is superb.

Check out the commercial (you may end up watching several times, like me) and read on: AdWeek.

Posted on

UX Mobile Immersion Conference 2014 – Day 3

I begged the powers-that-be to send me to the UX Mobile Immersion Conference (#UXIM) in Denver, Colorado this year. I started submitting requests and rationale in November 2013. Since I got a passive aggressive “nope,” I’m living vicariously through Twitter right now, following #UXIM. There are some amazingly fun and informative tweets coming from the conference right now, my favorites listed below.

Creating apps that are ‘usable’ are the equivalent to food being ‘edible’ ” – Jared Spool

Jason Grigsby: When Responsive Design Meets the Real World

  • Jason Grisgby has led us all down a responsive workflow, now he is going to tell us how wrong we all are.
  • “I now use progressive JPEGs, the algorithms have gotten better”
  • “Answer to responsive tables: “What are you using the table for?” Then plan #RWD around that.”
  • “To do responsive web design correctly, you are probably going to need more than responsive web design”

Nate Schutta: Coding Prototypes, Even if You’ve Never Tried

  • “If a picture is worth a thousand words, how many meetings is a prototype worth?”
  • “Friends don’t let friends use IE 6.”
  • “jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.”

Karen McGrane: Adapting Your content for Mobile

  • “Print is awesome. You put the words on the paper and they stay there!”
  • “Whatever the next big thing is going to be, we are going to have to get our content onto it.”
  • “Thinking about where content will ‘live’ on a ‘web page’ is pretty 1999.” – Lisa Welchman via Karen McGrane
  • “Imitating paper on a computer screen is like tearing the wings off a 737 & using it as a bus on the highway” Ted Nelson via Karen McGrane
  • “We need systems that allow us to create content hierarchy programmatically to better translate into other platforms.”
  • “Truncation is not a content strata…”
  • “We have to treat content management as UX. Content creators often want to crawl back to Word & a simple WYSIWYG.”
  • “The purpose of doing the inventory is not so you have an inventory, it is so you can make decisions about the content.”
  • “The user’s goal is not to look at a table. It is to give them the info they need in order to complete a task.”
Posted on

UX Mobile Immersion Conference 2014 – Day 2

I begged the powers-that-be to send me to the UX Mobile Immersion Conference (#UXIM) in Denver, Colorado this year. I started submitting requests and rationale in November 2013. Since I got a passive aggressive “nope,” I’m living vicariously through Twitter right now, following #UXIM. There are some amazingly fun and informative tweets coming from the conference right now, my favorites listed below.

Luke W:

  • Hotel Tonight – 4 taps/swipes and 8 seconds to book a room. So easy babies and cats were booking rooms…
  • Hotels.com – 40 taps/109sec b/c they couldn’t let go of desktop method…

Bkuva7KCAAEXoJ_

  • “If it’s important, it should be visible.”
  • “The evil lord fold, who is a tyrant… Controls the scroll.”
  • “The problem isn’t is it visible above the fold, it’s about having it visible when the user needs it.”
  • “When the hamburger icon is paired with the word ‘menu’, it’s 7.2% better. When made to look like a button it’s 22.4%” (Facebook)
  • “Long pages, in mobile, create a flat hierarchy, heavy download and lack context generally.”
  • “We’ve been at it for 30 years designing for personal computers and ~6 years designing for mobile.”

Karen McGrane:

  • “You don’t get to decide which device people use to go on the internet. They do.”
  • “Responsive design won’t fix your content problem.”
  • “It’s not a strategy if you can’t maintain it.”
  • “Theres no such thing as how to write for mobile, there’s just good writing.”
  • “88% of Americans without a high school diploma don’t have internet access at home.”

Jason Grigsby:

  • “Resolution does not define the optimal experience.”
  • “We can no longer make assumptions about input based on screen size or form factor…and we probably never should have.”
  • “The web never had a fixed canvas.”
  • “Any attempt to draw a line around a device class has as much permanence as a literal line in the sand.”
  • “Phone, tablet and desktop interfaces are fundamentally different platforms with different usability considerations.”
  • Design for a user need not for a specific form factor or input.

Jared Spool:

  • We are not creating designers fast enough to meet the demand for user experience. Big companies are building out an army of user experience designers.
  • Experience designer (also known as a design unicorn) → information architecture, user research practices, visual design, interaction design, editing and curating, copywriting, design process management, information design.
  • Specialist → having more expertise in one area over others (really good designers, having specialization in an area outside of design)
  • Generalist→ having equal expertise in most areas
  • Compartmentalist → having expertise in only one area (a career-limit decision)
  • How to become a design unicorn:

1. Train yourself (absorb everything)

2. Practice your new skills

3. Deconstruct as many designs as you can (learn from others)

4. Seek out feedback (and listen to it)

5. Teach others

Posted on

UX Mobile Immersion Conference 2014 – Day 1

I begged the powers-that-be to send me to the UX Mobile Immersion Conference (#UXIM) in Denver, Colorado this year. I started submitting requests and rationale in November 2013. Since I got a passive aggressive “nope,” I’m living vicariously through Twitter right now, following #UXIM. There are some amazingly fun and informative tweets coming from the conference right now, my favorites listed below.

  • People swap devices 21 times an hour… continuity matters.
  • #1 goal is to achieve content parity.
  • Start with a small screen first, then expand until it looks like shit. Time to insert a breakpoint. (Stephen Hay via Brad Frost)
  • Navigation (especially complex), should be scannable. There are lots of design patterns that are becoming de-facto standards.

From Brad Frost: Using Atomic Design to Create Responsive Interfaces

  • 5 Principles of Adaptive Design: Ubiquity, Content Parity, Performance, Enhancement, and Future Friendly
  • “Vocab word of the day: Interdigitate“
  • “If you need to convince someone to care about the mobile web, all you need to say is ‘social.'”
  • “We’re not designing pages anymore; we’re designing systems of components.”
  • “Respect their users and their time. Road blocks and interstitials are bullshit.”
  • “Phablets – dirtiest word in technology.”
  • “More iPhones are sold every day than babies are born.”
  • “Responsive design is not expensive. The dynamic web is expensive, responsive design is not to blame.”
  • “Mobile First Design forces you to take a hard, cold, look at the priorities of your site’s navigation.”
  • ‘Don’t just do a content inventory… it’s just as important to do an interface inventory.”
  • “Carousels on home pages exist to keep people from beating the shit out of each other in meetings” #shouldiuseacarousel
  • “If you are hiding something for mobile, you are doing it wrong.”
  • “If your content doesn’t make sense on mobile, you need to ask yourself if it makes sense at all.”
  • “We sell websites like paintings. Instead, we should be selling beautiful and easy access to content.”
  • “Atoms (HTML Tags) -> Molecules (functionality) -> Organisms (modules) -> Templates (content structure) -> Pages (content presentation)”

BkoT0NCCYAACs5D

 

From Ben Callahan: Workflow on Responsive Design (RWD) Projects

  • “You best solve problems using tools you are fluent with.”
  • “Do the dishes and people will follow.”
  • “The amount of process required is inversely proportional to the skill, humility, and empathy of your team.”
  • “If you don’t have the authority to say “no”, it’s not a collaborative process.”
  • “Constraints–you need them to create.”
  • “Our specializations of expertise are fragmenting the experiences we build.”
  • “Create guidelines instead of rigid process. “
Bko2bG2CMAAkHU8
Meeting Notes by James Matchett, Careerbuilder