The One Thumb, One Eyeball Test

Imaging that your user is on their phone, standing in the bus, surrounded by distractions and your app has to hold their attention. They must be able to use your product using an average thumb. If they can’t, you fail the One Thumb, One Eyeball test, and will lose users.

A woman using the mobile phone with one hand on a beach

Many mobile products have call to action buttons that are either too small, or placed too close together, or links are confusing, or new unwanted windows pop up. As soon as you redirect someone to a screen they didn’t want or expect, they’ll lift their head up and your product has lost. Users should be able to complete critical tasks quickly without losing focus. This means all the critical tasks are "do-able"using one thumb and one eyeball what come may - be it standing in the bus, leaning on to the wall at train station, sitting in a congested place at work, comfortably lying down on the couch or even better, sitting on the beach.

One Thumb, One Eyeball Test

People use mobile phones everywhere and anywhere. They are often distracted away from their mobile phones to get some work done or distracted by mobile phones to do some physical work without dropping the phone down. This forces them to use the mobile phone by investing only one eye and one thumb. This enables high speed interaction using one hand needing short attention spans.

The one thumb, one eyeball test was proposed by Luke W during the design of “Polar”, an app designed to create photo polls and allow voting on them. 

The objective was that a user should be able to create a new poll in less than a minute using only one thumb to do so. This test is now a global standard for mobile apps across the world.

Moving away from Hamburger to Tab bar design

Hamburger menu placed in top left corners of the app are too hard to access. Take a look:

A user who is driving a car needs to use the phone in one hand with the other hand on the steering wheel. If the app hamburger is in the top-left corner, the one thumb use case fails. In other words, users must be able to perform critical tasks on the mobile app with just one thumb in a few seconds. Lesser the time (in seconds), the better. Users work in micro-moments - small units of time with distracted attention. Hence the need for speed.

In the above app, notice that most of the critical tasks like My Flights, Today's Deals, Booking are easily accessible using one thumb. This is the freedom users need.

Takeaway

Effective mobile designs must accommodate for one eye and one thumb experiences.

If people can get things done in time sensitive, limited mobility situations, they'll be even more efficient and products will have their full attention.

How To Educate Mobile Users Using Contextual Tutorials

You heard good things about an app. You downloaded and installed it. You launched the app. You are faced with 7-screen long swipe tutorial that educates you about each and every feature in the app. You hope to remember the features like a memory expert would. Except that, you won't! Mobile app tutorials make or break the app based on their design. Let's take a look at two types of tutorial and which one of these creates a positive impact on users.

 1. Screen by Screen Tutorial

Pulse app throws a big help file called Quick Tutorial educating the user about 4 gestures. The first thing the user does is to 'Dismiss' this screen, due to cognitive overload. As he uses the app thereafter, he struggles to recollect which gestures are mapped to which tasks. In many apps, a quick tutorial is a first-time launch screen that disappears into wilderness forever. Users end up uneducated.

Another example is a static tutorial like the one above. Perhaps, some users take a screenshot and store it. In this case, user's don't just forget the tutorial, but they even forget where the screenshot was stored in the first place. End solution - uninstall the app, reinstall and re-launch the app. Easy. Isn't it?

NO!

Users don't install apps to get a Ph.D degree in How to use your app. They want to accomplish their primary goal, quickly. They are least interested in browsing a 7 screen tutorial on app design features.

Conventional wisdom states that tutorials/static educational screens must be displayed at first launch of the app. Users must go through the learning process (if you are lucky, there'll be a skip option), before proceeding to use the app. This works best in a world where tasks happen in a linear sequence - one task after the other. Sadly, tasks are non-sequential, occurring in a random manner. This leads to remembering features, gestures or ideas difficult.

2. Contextual (Just In Time) Tutorials

A contextual (just-in-time) tutorial is displayed just in time when the user needs it. A contextual tutorial tells the user what is the right thing to do at that moment in time, without referring to the previous or next screen. It provides relevant and necessary information, unlike screen by screen tutorial which throws loads of information at once, irrespective of which flow the user might be using.

Contextual tutorials can be used to educate users in multiple ways:

a. Interactive Tour, One Feature At A Time

Elk is a currency converter app with simple UI. A user can convert a value from one currency to another for whole numbers and decimals. For e.g., a user can seek conversion of 10.35 INR to HUF. This app doesn't show a long tutorial at first launch. Instead, the feature is introduced step by step, the app waits for the user to try the step, understand it and then move on to next feature. Interactive tour works well for complex apps.

b. When Users Commit Errors

When users commit errors, it is common practice to display an error message, educating the user. It turns out, users don't want to be educated. Rather, they love to be guided when they go wrong. On Wego app, when the user forgets to select travel dates during flight booking, a simple action dulls rest of the screen and highlights just the departure and arrival dates, indicating that user needs to enter this data to proceed. This is a delightful way to tell users how exactly they went wrong, where they went wrong and how to fix it. The job is done well.

Users are no longer excited about elaborate onboarding ceremonies before performing their task. They want to setup the app as quickly as possible, complete the task on hand and get out. It's best to think of contextual/just in time education as improving the quality of lives users have by creating delightful experiences for them.

Do you have a contextual tutorial in your app?

Top UX Influencers You Need to Know

This article was originally published on Linked In.

If I have seen further than others, it is by standing upon the shoulders of giants.

Thus said, Isaac Newton. Thanks to the Internet, I am constantly learning from the work of many great people across the world. This article is a small attempt to introduce you to few giants in User Experience (UX) space. This list is never complete as there are hundreds of thousands of people who are quietly doing their work.

Twitter is a treasure trove of experts in different fields. I frequent Twitter to learn from the experts on specific topics like UX, read about latest trends and apply them to projects based on the context. Many experts I wrote to, responded graciously and guided me. I am amazed and grateful forever, for the great work done by these great people who have generously shared their experience and expertise for free to make this world a better place for all of us. Aspiring UXers and designers looking for inspiration can learn from these UX influencers with a great legacy behind them. The names are in no particular order.

********************************************************

Donald Norman @jnd1er

www.jnd.org

The founding father of user experience, Donald Norman is credited with coining the term “user experience”. He is one of the world’s most famous UX Designers with @NNgroup. Don Norman’s books are intense, thought-provoking, and showcase his love to create humanizing experiences for users.

Recommended Reading: All of Donald Norman’s books

********************************************************

Luke Wroblewski @lukew

www.lukew.com

Luke Wroblewski is my digital transformation hero. He is a straight-speaking UX guy with a penchant for all things UX in Web and Mobile. His deep work and advice on building next generation mobile apps are close to none other. True to his Twitter bio, he is truly humanizing technology. Luke is a truly hands-on, highly insightful technical subject matter expert of our times.

Recommended Reading: Every article he has ever written!

********************************************************

Jared Spool @jmspool

https://www.uie.com/brainsparks/

Jared Spool is a UX legend and one of the most influential authority on UX design for almost 40 years. His articles, talks, and workshops give you fundamental insights we need to build great experiences. He emphasizes on overall human experiences while building products. Jared’s thought-provoking satire on his experience of flying United Airlines experiences can air drop you into a thinking pool.

Recommended Reading: Every article he has ever written!

********************************************************

Steve Krug @skrug

https://www.sensible.com/

Steve’s best-selling book Don’t Make Me Think was the first book that got me thinking about usability. His books are simple and easy to understand for beginners. His insights on human-computer interactions and user testing are commendable. If you are starting out in usability, this guy’s body of work does wonders for you.

Recommended Reading: Don’t Make Me Think

********************************************************

David Rose @davidrose

https://about.me/davidlrose

David Rose is a world-renowned MIT Media Lab researcher who has built fabulous products with enchanting experiences, as he calls them. The products he has built imbibe subtle human feelings. His products and book are must learn stuff. David is one of the gifted UX artists we have today.

Recommended Reading: Enchanted Objects: Design, Human Desire, and the Internet of Things

********************************************************

Bill Buxton @wasbuxton

http://www.billbuxton.com/

Bill Buxton is a Principal Researcher, Interaction Designer and a relentless advocate for innovation and design. His 2007 book, Sketching User Experiences reflects his love for human values and culture.

Recommended Reading: Sketching User Experiences

********************************************************

Alan Cooper @MrAlanCooper

https://www.cooper.com/

Rightly called the Software Alchemist, Alan Cooper is the ‘Father of Visual Basic,’ and Inventor of design personas. Alan’s books focus on how not to drive users crazy and keep them sane.

Recommended Reading: The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity.

********************************************************

Golden Krishna @goldenkrishna

http://www.nointerface.com

One of the top hands-on designers with a legacy of great UX work at Zappos, Amazon, Samsung, Cooper and now at Google, Golden Krishna is a human-centered designer who is making technology human-friendly.

Recommended Reading: Best Interface is No Interface

********************************************************

I follow many others like Jakob Nielsen, Bruce Tognazzini, Adrian Zumbrunnen, Susan Weinschenk, Karen McGrane, Annette Priest, Laura Klein, Ethan Marcotte, Jess James Garrett and a hundred others. I’ll add their information once I have read their books/blogs and learn more about their body of work.

I use the term Expert for a constant learner, a teacher or a guru. With due credits to all great people who claim to be experts as well as those who don’t think of themselves as experts, we need to understand, there are no EXPERTS on any subject or in any field. Every so called expert builds on the knowledge and experience of their predecessors and contemporaries. Making this world a better place to live is the only thing that matters. And many people do that. I express my heartfelt thanks to everyone who share what they know and help others to become better moment by moment through Twitter, books, blogs, and other online/offline forums. THANK YOU!

Guru devo bhava!

The Traveler from Stone Soup - The Secret to Design Thinking by Jared M. Spool

This article was originally published by Jared M. Spool as Shh! Don’t Tell Them There’s No Magic In Design Thinking. I am reposting a part of the article - an inspiring story titled, 'The Traveler from Stone Soup' here.

[As written by Jared M. Spool]

The magical powers that people assign to Design Thinking reminds me of an old Eastern European folk tale. The story takes place at a time when walking was the only way to travel from one village to the next (before horses were invented). In that time, it was traditional to offer visitors to your village scraps of food to replenish their hunger after such a long walk.

Source: www.expectmiraculous.com

One traveler, upon arriving at a new town, knocked on the door of the first house he saw. However, despite the tradition, the homeowner didn’t offer any food. She explained that they were experiencing a drought and barely had enough food to feed their own family. They couldn’t spare a scrap.

Every house the traveler visited had the same story. It was a drought and there was no extra food.

When the traveler reached the center of town, he decided he needed to make something for himself. He took out his pots, started a little fire, and set up to cook himself some dinner.

He reached into his bag and pulled out a round stone. He set the stone in the bottom of the pot and started stirring. A crowd of villagers started to form.

“What are you doing?” a curious villager asked.

“I’m making Stone Soup,” the traveler responded.

“You can make a soup out of stone?” asked the villager.

“Yes, but a little water makes it better.”

“I have a little water in my well,” said another villager. He then ran off and fetched the water. The water was added to the pot and the traveler resumed his stirring.

“What will it taste like?” a villager new to the scene asked.

“Well, it would taste better with some carrots.” Upon hearing this another villager ran to his house to grab a few carrots from his garden.

Then another villager offered up some other vegetables he’d salvaged from his garden. And a woman mentioned she had some meat scraps on her pantry.

“All of it would make the soup even better,” said the traveler. Off they all went to grab what they had.

Soon the pot was filled with a lovely large stew. The traveler graciously shared his dinner with the villagers. Everybody had a grand time eating the Stone Soup.

After the festive evening, as the traveler was packing up to head on his way, he thanked everyone for helping.

“As a repayment for your kindness and generosity,” the traveler announced, “I’d like to give your village the gift of this stone. So, you can keep making soup even when you have a drought upon you.” The villagers all cheered with delight.

They thanked the traveler profusely as he made his way out of town. He continued on his way.

When the traveler was a few miles out of the town, he looked down at the road and spotted a lovely round stone. He picked it up and admired it for second. Then he dropped it into his bag and continued on his way with a smile on his face.

What Does the Traveler Think?

Design Thinking is our stone. When we apply Design Thinking, we bring the entire organization together to collaboratively solve big problems.

Yet, to me, that’s not the important lesson from the story. The lesson I take away is that, at no time during the story, do we believe that the traveler thinks the stone makes soup.

Instead, the traveler sees that the villagers need their thinking reframed. They have enough food to eat, if only they worked together. The stone isn’t magical. It’s a device.

Maybe the villagers believe the stone makes soup? Maybe a smart villager or two see what the traveler did? But at no time did the traveler himself ever believe the stone made soup. He’d starve if he did.

As design professionals, we shouldn’t let ourselves think there’s any magic in Design Thinking. Our teams, stakeholders, and executives can believe in it, but we shouldn’t. To do so would be to depend on Design Thinking having magic and such magic doesn’t really exist.

That’s the design professional’s secret. Shh! Don’t tell them!

Microinteractions: Designing the Little Details

Last week, I was in Auckland and Wellington, speaking on User Experience (UX) and teaching UX Design courses at two WeTest Conferences in Auckland and Wellington. I also had a rare opportunity to teach/speak at large corporates like Bank of New Zealand and Assurity Consulting. I am blown away by the lovely interactions I had and the new bridge I created with many in New Zealand. 

Token of Thanks

I extend my heartfelt gratitude to Katrina Clokie for inviting me to WeTest Conference. I never ever imagined that a chance meeting with Katrina at CAST 2013, which was my first self-funded trip to a US conference would bring us together again. I would also like to thank the Conference Organizers Katrina Clokie, Aaron Hodder, Shirley Tricker and Daniel Domnavand for conducting a world-class conference, for taking care of the little details for international speakers and introducing me to a super awesome community in New Zealand which is so passionate, warm, curious, learning-focussed and yet humble. This conference and my interactions will truly remain close to my heart for getting the ‘Conference based Microinteractions’ right! 

Teaching UX

It was a fabulous experience to teach UX Courses at the other end of the planet. At the end of these talks/workshops, many people walked up to me and shared many *pain points* in their daily line of work. For example, one of the workshop organisers, Merridy said, “Pari, I am going to put up a board indicating ‘Toilets’ on the door and avoid frustrating our visitors.” One of the conference organisers Shirley mentioned, “The motion detector lamb in our service apartment doesn’t light up instantly and expects a tribal dance which needs to be fixed.” I was thrilled to see people pick up this concept so quickly and apply it at work. 

Ctrl+Alt+Delete

Have you ever wondered why you need ‘Ctrl+Alt+Delete’ to lock/unlock windows? Did you ever wonder why we couldn’t have a single key to do the same task? In my early days of school, I was told to believe that 3 keys were given as a security measure (God knows how this could prevent hackers though!). However, Bill Gates confessed that having three keys was a mistake. “It was a mistake,” Gates admits to an audience left laughing at his honesty. “We could have had a single button, but the guy who did the IBM keyboard design didn’t wanna give us our single button.” David Bradley, an engineer who worked on the original IBM PC, invented the combination which was originally designed to reboot a PC. This brings us to microinteractions. 

Microinteractions

Microinteractions is a concept introduced by Dan Saffer in his acclaimed book, ‘Microinteractions’. By definition,

A microinteraction is a contained product moment that does one task well.

Every time you change a setting, update a device or post a tweet, you are engaging with a microinteraction. They are everywhere and they just need some *noticing*. Microinteractions are so simple that we don’t notice them until something goes wrong. Yet, they are incredibly important in creating delightful experiences for users. 

Structure of a Microinteraction

A beautifully crafted microinteraction contains four main parts: Trigger, Rules, Feedback and Loops & Modes. 

Trigger

A trigger initiates a microinteraction. For example, turning ON a lamp needs someone to press the switch. 

Rules

The rules determine what can happen, what cannot happen and the sequence of events that might happen. 

For example, what should happen when a user presses the switch in a particular direction (Up/Down), is determined by rules defined for this lamp. 

Feedback

Feedback lets people know what’s happening. In his book, ‘The Design of Everyday Things’, Don Norman writes,

“Sending back to the user, information about what action has actually been done, what result has been accomplished is a well-known concept in the science of control and information theory. Imagine trying to talk to someone when you cannot even hear your own voice, or trying to draw a picture with a pencil that leaves no mark: there would be no feedback.”

Feedback gives each action an immediate and obvious effect to avoid pain to the user. 

Loops and Modes

Loop is a cycle and mode is a state. Consider ‘Memories’ feature on Facebook. Facebook app constantly loops into your account to check if you have posted something on this day, 1 year, 2 years, 3 years….. X years ago. If the condition turns out to be true, a message pops up to remind you of your memory and your willingness to share your memory. 

If you share the memory, the state of your timeline changes, by showing you a memory in addition to other posts on your timeline. To summarize, loops & modes form the meta-rules of a microinteraction. 

Sketchnote

While there are different components that form a good microinteraction, one should remember that each one must be applied based on the context. Putting a hard rule saying, ‘Every microinteraction has to follow the set guidelines may turn out to be painpoints rather than delightful experiences.’ TEST Yvonne Tse, who works at Assurity Consulting in New Zealand attended my talk on ‘Microinteractions’ at WeTest Conference, Wellington. She created a lovely sketch note that is very close to what I covered in my talk. Take a look. 

Show That You Care!

Users today, have scores of options to choose from. All they want in return for their loyalty is that you care. In the words of Dan Saffer,

What microinteractions have made you happy today?

Labels on Mobile Forms

Labels describe the purpose of form controls, including text fields, check boxes, radio buttons, drop-down menus amongst others. On mobile apps, screen real estate is limited. This forces app developers to save space by placing labels in varying positions on tiny screens. Labels can be placed in many different ways. I cover five varied approaches in this article.

Positioning Labels – The Right Way

1. Inline Labels

Labels placed inside the form field are called Inline Labels. These continue to be a fad for many programmers after Apple introduced them in most of their apps.

Image Source: Dash Lane app

Pros

• Simplistic look
• Space efficiency and better use of mobile real estate

Cons

• Loss of Context – When user begins typing or even upon entering the field, label is lost thereby taking away the memorability aspect of the field

On Dash lane app, text fields have an inline label. Tapping on the text field keeps the inline label intact, until user starts typing into it. If user deletes existing data, inline label re-appears, to remind the user about the context of the field, just in case, user forgot what the field means.

Inline labels suit best on forms with fewer fields. E.g., on login forms, , it’s hard to forget which field is for what kind of input(username, password), for most part as there are just fewer fields with a straightforward goal.

Inline label could be a great feature if it is used in the right way. A good approach is to use it as supporting text or short descriptions that provide cues to users.

Luke Wroblewski, writes simple guidelines for input labels in his book, Mobile First.

A label within an input field:

• Should never become part of someone’s answer. This seems simple enough but still happens quite frequently when things haven’t been loaded or aren’t coded correctly. Ever try searching only to find the word “search” has become part of your query?
• Should not be confused with an actual answer in an input field. If labels and inputs look too similar, people might (rightly) assume an answer has already been provided for them. I’ve seen this happen too often in usability testing.
• Is usually absent when someone starts answering a question and when they finish answering a set of questions. This can make it harder to know which question is being answered or to go back and check answers after the labels are gone.

2. Floating Labels

Image Source: Google Material Design

Material Design guideline, introduced us to floating labels, i.e. the label appears as an Inline Label on the screen (Description field). As soon as user starts typing into the field, the label slowly floats upwards and places itself at the top of the field (Title field).

A downside to this approach is that, unless the features are coded for accessibility, visually impaired users might find it difficult to understand this behavior.

3. Top Aligned Labels

Labels are aligned above input fields, hence the name Top Aligned. I forgot the mobile app from where I picked this screenshot. That leads us to another problem. Shouldn't each screen have app logo on it, just in case, amnesia patients like me could recollect which app we are on? Well, I can only say, the world is tough out there.

Pros

• Faster completion time from users as per Matteo Penzo’s findings
• Works well for long labels
• Labels that require localization might have good flexibility

Cons

• They take up a lot of vertical real estate, leading to perennial vertical scrolling / swiping for long-ish mobile forms

4. Right Aligned Labels

Image Source: www.css-tricks.com

Labels are right-aligned while input fields follow them in left-alignment.

Pros

• Slightly slower completion times compared to top aligned labels
• Less vertical space

Cons

• When labels change, this alignment leads to flexibility issues in the layout

5. Left Aligned Labels

Image Source: www.css-tricks.com

Labels are left-aligned while input fields follow them in left-alignment.

Pros

• Best suited for forms where users need to slow down and scan the fields. For e.g., bank forms

Cons

• Slowest completion time compared to top aligned and right aligned labels
• Difficult to parse fields on long forms

Luke Wroblewski, has talked about top, right and left aligned labels in an elegant way, here that is almost impossible for me to beat. 

Image Source: Polar mobile app

As you notice in Polar mobile app above, inline labels can be used as placeholder texts inside input fields to complement labels with additional information. Notice that Polar has ensured that branding is intact on login screens with their 'Join Polar' title. There is little possibility that a user forgets which app this is. By the way, Polar app was designed by Luke Wroblewski, which was acquired by Google a while ago.

Labels appear to be the least important elements on mobile screens, yet play a major role in how these screens appear to users. We need to pay attention to not just their behavior, but also their placement.

How do you handle labels in your apps?