MOBILE APPS NEED A ‘CAR MODE’?

This writeup is about the many popular mobile apps out there who would be so much more better, if only they were designed for context of use.

Car 1

The car is becoming a strong player in the digital ecosystem. There is a reason why Apple, Google and Microsoft are making big bets with things like CarPlay,Android Auto and Windows in the car.

Car 2

But those experiences, at least initially will be reserved for premium models and will take some time before they become mainstream.

Car 3

Designers and Engineers are striving hard to keep customers connected in this fourth dimension that is poised for a huge disruption like 2007, when the iPhone was born.

But this post is not about these new technologies. It is about the regular person who drives a regular car and has a regular smartphone.

One such person is me and I just happen to be an experience designer. I have a car. I also have a smartphone and I live a very connected digital life. There is no reason that some of these useful and popular apps can’t be enhanced with a “car mode.

First thought. Why not use voice right?

Wrong. A recent study by AAA shows the imperfections in the usual suspects like Siri, Google Voice, Cortana, etc.

So back to car mode. There are four key objectives when designing any experience that is consumed while driving.

Make it safe.

Show only relevant information.

Make it accessible and intuitive.

Make it usable in all conditions. DayTwilightNight, etc.

Some obvious scenarios

  1. You have to take a meeting on your phone. Number, Guest Code, Leader Code, Moderator Pin, Fuck you Lync… Blah Blah… you know drill and the frustrations… Solution: Tempo
  2. You need to find gas, coffee (I live in Seattle), or your favorite food chain in a new city maybe? Solution: Yelp
  3. Discover music. Skip, Switch, Like, Dislike… Solution: Pandora
  4. You are lost. Left Turn? Right Turn? Ave, Cross Street? Address? Landmark? Parking? Solution: Google Maps

Lets explore some solutions where a car mode will go a long way in making these interactions safe and useful.

  1. Tempo

Tempo, the smart calendar is a fantastic application. Must admit that I can’t live without it. I use it for the single reason that I never ever have to remember a meeting passcode ever again.

I typically attend meetings through my phone docked in the car when I’m driving to work in the morning. Legally allowed.

Now here is how it looks as a full size screenshot to say someone who designed it on Photoshop in a comfortable room with mood lighting and a stable chair.

Car 4Tempo as it might appear on a designer’s 27in display. Source.

Here is how it looks like in my hand at a typical viewing distance. Welcome to the real world Neo. What happened to contrast, viewing distance, environment, accessibility? In my car… a different story. Extremely dangerous and virtually impossible to use.

Car 5As it looks in my hand.

Now some common sense. If I turn on car mode at 8:20am, then the app knows a few things like…

  1. My next meeting is at 8:30am.
  2. Know which country I am in and knows which number to dial.
  3. I usually keep car mode on for about an hour.

So why the heck do I need to see every cool feature that the app has to offer when all I care about is my next meeting. Something that the app is already aware of!

Meet Tempo with Car Mode

Car 6Proposed design for TEMPO in car mode.

Car 7In my hand at a normal viewing distance.

Car 8In my car!

  1. Pandora with Car Mode

Advantages

  1. Pandora gets full real estate to show better and safer ads.
  2. Users experience beautiful full screen cover art and a very safe way to interact for just the bare minimum interaction if any.

Car 9Pandora Rest Mode. Tapping anywhere on the screen invokes the interact view for the user.

Car 10Pandora Car Mode. Only the controls that I care about with clear and safe touch targets.

Car 11Pandora Car Mode. Only the controls that I care about with clear and safe touch targets.

  1. Yelp

Advantages

  1. Users can set preferences on the places they usually visit. No search, no voice, no messing with controls or search results.
  2. Just 4 personalized and relevant results and safe touch targets.

Car 12Proposed design for Yelp in Car Mode.

Car 13Yelp in my car!

Conclusion

Disclaimer. I am not advocating people using anything when they drive. As we all know… people love breaking rules and I’m only addressing some approaches that can make these habits a little safe.

By Jatin Shah

UX Architect

 

How to Read Customer Support Reports for Usability

In any usareading-customer-support-reports-for-usability-studies-blog-thumbnailbility study conducted in an organization, the focus is on conducting user tests to gauge the workability of the product. But customer support reports give an entirely different picture.

We have all called customer support at some point seeking their assistance for product or services that we are using. The call could be related to a bank account, purchase order, missing luggage, changing mobile plans, etc. The common thread in all these is the understanding of customers’ problems, solving them & keeping a record of it. Customer support is one division within an organization that interacts most frequently with its customers. And for a usability consultant, that’s a knowledge bank out there to understand its users. The key advantage of looking into customer support data is that usability enhancements can be done at any part of product life-cycle & don’t cost anything extra.

Usability Study Input Area
reading-customer-support-reports-for-usability-studies-pic1 (1)

Not all parts of customer support data will be useful for a usability study. It needs careful filtering of data to drill down to issues reported by customers on usage of product. It could be related to incomplete transactions, error scenarios, unsuccessful operations or difficulty in understanding product in itself. These reports give a clear picture as to where the application is failing with users. Sometimes, customer support executives walk customers through the whole process and help them finish it step by step. This is when we know the product’s not working with users & needs immediate attention. Most companies are opting to record conversations between customer support staff & customers for quality monitoring purposes. This enables us to listen to actual conversations & underline customer needs. Possible usability solutions could include fixing navigational flow, making cosmetic design changes, adding usable features etc.

Usability experts will then jot down these issues and give them priority & severity ratings. It’s also a good practice to check if the issue has been reported in any other study such as user testing, surveys etc.

Usability Issues Categorization
reading-customer-support-reports-for-usability-studies-pic2 (1)

Customer Support Data Sources

An organization will have one or more support systems in place to assist customer on their products or services. And these are the places to look for usability roadblocks.

reading-customer-support-reports-for-usability-studies-pic3

Customer Support Data Consumption

The data from customer support not only benefits usability studies, but has been regularly consumed by various departments of an organization. Examples would include identifying incorrect product details (content management division),fixing  system errors (development teams) and recording system bugs (quality assurance team).

reading-customer-support-reports-for-usability-studies-pic4

Case Study

In May last year, while working in the Las Vegas office of our customer, I happened to meet employees of a popular e-commerce site whose office was just a few yards away. During the conversation, I got to learn about their customer first culture. They take customers so seriously that all new joiners work for Customer Support for a few weeks before being added to their respective departments. That’s part of their induction program. Hearing this gave me goose bumps!

Bottom Line

Good usability practices will help cut down costs on customer support and gain customer confidence.

By Balachandra Shetty

The Importance of Creating Learnable Systems

Why it is important to focus on learnability as an important aspect of creating any experience.

User Experience (UX)

A common definition is the combined broad disciplines of user research, personas, information architecture, content strategy, interaction design, visual design, prototyping, usability testing and ultimately front end development.

Customer Experience (CX)

The design of the complete customer journey from the point where the user connects with the brand to the level of support they expect and receive…at every level, on every device and on every channel.

UX according to Wikipedia…

User experience (UX) involves a person’s behaviors, attitudes, and emotions about using a particular product, system or service. User experience includes the practical, experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership. Additionally, it includes a person’s perceptions of system aspects such as utility, ease of use and efficiency.

I tend to describe it as any act or effort that makes people happy.

Learnability

In my opinion, “Learnability” is the most important aspect about usability. Measuring perception is everything when it comes to learnability. It is not just about the placement of a piece of text, the size of a button, thecoolness of a control or the colors of status indicators. Its more about the piece of text itself and how your users interpret it when they read it for thevery first time.

Does the design provide closure?
Does it help users with the next logical step?
Does it prevent them from turning to someone and asking “Hey, do you remember how to…

Learnability is about the details you add to help increase the adoption and comprehension of any experience. It is about those finer details that help save time for your users when they experience something new.

People have an amazing knack of getting accustomed to badly designed interfaces. For any product or experience to be successful in the long run, there are a few basics that must absolutely be in place. These are not value adds or USPs (Unique Selling Point), but plain and simple table stakes.

Interactions have to be usable, else they are going to fail.
Products have to be aesthetic, else they will mostly fail.
Systems have to be performant, else they will definitely fail.
Systems that are hard to learn… WILL FAIL.

As designers, we strive to make the most intuitive, aesthetic and usable systems for our users and often ignore learnability. We often forget that users start with a blank canvas. I’ve come to realize that the success of any system should be measured by how quickly someone, with absolutely little or no context, gets it or how easy it is for someone to complete a task after watching it no more than once.

Example 1 — Uninstall Programs (Otherwise called Removing something from your computer that you no longer want or need.)

Removing software on Windows (prior to Win 8).

Windows 8_UX

 

Let’s look at how a user uninstalls a program from her/his computer. For starters, the word uninstall itself is daunting.

Do you really uninstall your tap, bulb or your television? You remove it. You trash it.

Though much improved in Windows 8, the process was extremely daunting in previous versions. They still have this thing called the Control Panel if uninstall wasn’t scary enough.

One had to open the control panel if you managed to locate it, find the software you wanted to uninstall and then click a button and then hope that it did a clean job. Microsoft even has a detailed page describing the process.

And here’s a video in case you want to refresh your memory.

http://youtu.be/6iWM-y17_No

Compare this with the experience in OSX. You find a program and then drag it to the trash can just like any other file. Simple and Learnable.

Microsoft_improved

To the credit of Microsoft, they’ve improved it a great deal by making the interaction a lot simpler and learnable in Windows 8.

Example 2 — Interacting with an ATM screen.

ATM_UX_Example

How many call to actions do you see? What do you think about the UI text on this screen? What do you think about the sizes of each control and their positions? How long do you think it would take a customer with little or no technical knowledge to learn how to enter a pin?

Now compare the above example with the one below.

ATM_UX

Clearly the skeuomorphism is a bit much but the interaction seems so learnable! From the messaging on the screen to the size of the buttons, it just seems that it would take very little time for someone to ‘get’ what they need to do.

In Conclusion

Everything that we add to a screen matters. Your perception of an interaction or an interface does not count. Test, Test and Test again. See how your users perceive every single element that you add for them. Your job is to make their lives a little easier. Don’t make it hard for anyone to learn something new. Remember how we learnt the alphabet using standing and sleeping lines?

Every little thing is important. The verbiage, color, size, padding, margins, line-spacing, sentences, feedback and interactions of every single element on that screen. Never ever compromise on learnability and performance. As a rule, If it is hard to learn and doesn’t work fast enough, its pretty much useless.

This writeup was partly inspired by a quote I heard from someone at Microsoft. Yes you read that right… Microsoft.

“50% of most usability related issues can be solved by simply addressing the UI text.”

By: Jatin Shah
UX Architect at Aditi Technologies
Twitter

 

 

 

Designing for Dyslexic Users

Dyslexia_Mervin

Dyslexia is a learning disability which is often overlooked while designing accessible websites. However dyslexia is fairly common among young users and should be definitely considered while designing sites which might cater to children. Dyslexia also occurs among adults and hence designing for it should also be a factor while designing any site irrespective of whether it caters to children or adults.

So what exactly is Dyslexia?

The British Dyslexia Association defines dyslexia as:

“A combination of abilities and difficulties that affect the learning process in one or more of reading, spelling and writing.

Accompanying weaknesses may be identified in areas of speed of processing, short-term memory, sequencing and organization, auditory and/or visual perception, spoken language and motor skills. It is particularly related to mastering and using written language, which may include alphabetic, numeric and musical notation.”

As per the Dyslexia research institute, 15% of the US population is dyslexic while about while about 10% of the UK population suffers from dyslexia.

The challenges faced by dyslexics has been highlighted in a number of movies including Taare Zameen Par which was India’s official entry for the Best Foreign Film award in the 2009 Academy Awards.

designing-for-dyslexic-users-taare-zameen-par

 

So how do I design for dyslexic users?

When asked to design for accessibility, designers are overawed by the large number of requirements and expected levels of compliance which are needed to make a site accessible.

While it is of critical importance that your site should be accessible to provide a uniform experience to all users despite them being differently abled, designing for dyslexic users is relatively simpler provided some design principles are adhered to as elaborated below:

1. Avoid using justified text

Justified text was introduced while designing for print as the straight line of each margin can guide the eye across columns of text and the aligned columns help define the different areas of text creating a logical flow of words, thus enhancing readability.

That said, justified text in the web causes large uneven spaces between letters and words making it hard for people to read and even more harder for dyslexic users. When these words line up above one another, a distracting river of whitespace appears which causes dyslexic users to lose their bearing while reading content. This is called the river effect.

designing-for-dyslexic-users

2. Avoid double spacing after periods

While browsers eliminate redundant spaces, additional spaces present between the HTML content tags are retained. Hence double spacing after periods can confuse dyslexic users, as they can create “rivers” within text that make it difficult for users to find the end of sentences.

3. Avoid extremely high contrast between the text color and the background

While high contrast does enhance readability, extremely high contrast such as pure black text (#00000) on a white background (#FFFFFF) is hard for dyslexic users are they are sensitive to the brightness that high contrast colors cause resulting in the words to swirl around or blur for them.

How Dyslexic see

To avoid this, ensure the text color is a lighter shade of black like dark grey to ensure dyslexic users are not affected by the contrast.

This W3C article has good recommendations on the recommended contrast while designing for people with dyslexia.

4. Avoid using moving images

While moving images and flashy animations are distractions for everyone, they are even more severe for dyslexic users as they constantly distract them from their focus on the page and almost make the page unreadable for them. Hence while designing pages with animations, make sure they are very subtle and don’t distract the user from the content. However if possible avoid using animations at all.

5. Break your content down

While long lines are text are hard for users to read, it’s even harder for dyslexic users as they suffer from low concentration and can lose their place while reading long lines of text. Hence break down the text into smaller manageable pieces with a lot of white space and a suitable heading. To quote this research article on document design for dyslexic users

 

“Text should be chunked into groups according to subject matter. This breaks up long groups of text into more easily read sections. Chunked text should usually be grouped under a heading and spaced out, so the reader can easily tell apart each chunk. “

An excellent example is how apple does it

Apple_ Engineered to perfection

 

6. Choose your font correctly

While there are a number of font options available while designing for dyslexic users, If possible, use a sans-serif font. The decorative “hooks” on the main strokes of serif letters may create problems for dyslexic users.

This is because Serifs tend to obscure the shapes of letters, making the letters run together. But a sans-serif font would allow dyslexic users to see the shapes of letters clearer. This is because a lack of hooks increases the spacing between letters and makes them more distinguishable

Hence dyslexic users might see words with a washout effect as shown below:

Dyslexia User

 

Some good font choices while designing for dyslexic users are

  • Arial
  • Century Gothic
  • Verdana
  • Trebuchet
  • Lexia Readable ( free font designed specifically for dyslexic users)
  • Dyslexie (free font designed specifically for dyslexic users)
  • Sassoon (paid font designed for dyslexic children)
  • Sylexiad (paid font designed for dyslexic adults)

Designing for dyslexic users does not involve significant effort and if some preliminary efforts are taken during the design phase, you can make it so much easier for someone with dyslexia to view the site without frustration. It’s not easy to get information when you read with visual distortion. Everyone has the right to information, whether they’re dyslexic or not.

 

By: Mervin John Singh