Designing for Extreme Accessibility – Yossi Langer to Present at EuroIA

How would you design digital tools to be used by people who can manipulate only a foot or an eye? How do you create an interface that works equally for people with full motor control and those unable to even touch a screen?

Find out in Yossi’s presentation for next week’s EuroIA conference in Amsterdam:  “Switches, Keyguards, Eyegaze Trackers: Designing Device Interfaces for Extreme Accessibility,” – inspired by a particularly interesting design challenge that Iteration Group embarked on with Prentke Romich Company (PRC) earlier this year.

PRC is a leader in speech generating software and devices. They have been been making tools to help people who cannot speak for over 50 years and asked us to redesign their user interface. This interface is used by people with autism, cerebral palsy, ALS, and other conditions that prevent speech communication.

We’ll make sure to share the video after the conference, but for anyone who might be around Amsterdam in late September, stop by and say hi to Yossi or tweet him @yossilanger!

Make Sure that Your Application Meets Accessibility Guidelines

There are 60 million people with disabilities in the United States, so making sure they can all use your website easily isn’t just the right thing to do – it’s also good business.

Virtually all businesses can be sued if their website or application does not comply with the Americans with Disabilities Act (ADA).

How well does your site do? Try this validator to find out some basics.

For a good overview of guidelines and resources, see this brief presentation that one of our team members recently put together here.

As a basis, just remember the simple acronym “POUR“:

Perceivable

  • Provide text  alternatives for images, form elements
  • User good color contrast to make it easier for users to see content
  • Avoid nose, movement, and distractions on pages

Operable

  • All functionality should be accessible via keyboard (tabbing, opening links without the mouse, etc.)
  • Provide ways to help users navigate, find content, and determine where they are in the system / application

Understandable

  • Use economical and plain use of language
  • Make pages operate in predictable ways
  • Help users avoid and correct mistakes

Robust

  • Ensure that your application is functional across various technologies
  • Verify that syntax is correct – syntax errors may not affect visual presentation but may hamper assistive technology and accessibility valuation tools

Creating Landing Pages That Work: Auto Insurance

How do you create landing pages that work?  Pages that ensnare users into your process of filling out a form, getting more information, getting a quote, etc.?

We believe that the auto insurance industry, in particular, offers many useful examples around how to create high-performing and persuasive website landing pages.

Let’s take a look.

If you go to Google and search for “get car insurance,” you’ll see something like this:

Google Results for Get Car Insurance Search

 

Notice that most of the screen is covered in advertisements:

Google Results for Get Car Insurance Search Showing Ads

 

In fact, 10 of the results are advertisements, and only 4 are “organic” (e.g. not directly paid for) results.  And this is just online!

Here in the US, we are constantly bombarded (online, on television, in print, via direct mail) with advertisements from Allstate, GEICO, Nationwide, Progressive, and other leaders in the auto insurance industry.

One would have to assume that:

  • They’re spending incredible amounts of money advertising their products.
  • The space is massively competitive. We learned, anecdotally, that some auto insurance companies are paying up to $150 USD per click for Google Adwords online advertising, for example (that’s just for a raw lead – not a person that has converted to being a customer!).
  • They’ve worked very hard to optimize their landing pages and their funnels (e.g. convincing and ensnaring folks to “get a quote”) to maximize conversion rates.

Now, back to those Google Search results.  When you click on one of those ads, you’ll see a page that looks like this:

Geico Landing Page for Web

 

Or this:

Allstate Landing Page for Web

 

Or this:

Progressive Landing Page for Web

 

Or, if you’re on mobile, something like this:

Geico Landing Page for Mobile

 

We believe that there’s a lot to learn here:

  • How to create a persuasive and effective landing page, using typography, photographs, social proof, and other mechanisms to elicit a certain response and encourage certain behavior.
  • How to get folks started in the process.
  • How to easily enable folks to resume from where they left off (if they do indeed leave).
  • How not to distract folks with other content and information that might unintentionally encourage them to fall out of the funnel.
  • How to ask questions in a way that is not overwhelming or intimidating (e.g. perhaps in an iterative, one-step-at-a-time fashion).

 

Innovative Design; Water Curtain Stop Sign

We were inspired by this innovative design (from a while back) that has been deployed in Sydney.

What do you do when truck drivers just don’t notice the multiple warnings you’ve placed on the road? And then wedge their truck into a tunnel entrance causing massive traffic jams?

What some smart folks have done is, using a curtain of water and a projected image, put a giant stop sign smack dab in the center of the road where it can’t possibly be missed. See it in action here – very cool!

Mostly Avoid Sidebar “Hamburger” Menus

Many of you might have noticed Facebook’s change from a “Hamburger” menu to a more traditional, docked-to-the-bottom-of-the-screen menu.

Luis Abreu, a blogger and UX / UI Designer suggests that Hamburger menus should be avoided in many cases because:

  • Stuff is hidden and hard to discover
  • It’s less efficient; requires one tap to reveal the menu options, and another to tap the item you want
  • It can clash with standard navigation patterns like the “< Back” button, causing confusion

In our experience, Hamburger menus make sense for some audiences, but straightforward bottom-navigation menus work for everyone.

Phones are Getting Larger; Design Appropriately

Scott Hurff explains that “Apple’s iPhone 6…officially signaled the Dawn of the Era of Huge Screens.”

The “natural” zone for your thumb has changed; it’s harder to tap things at the top of the screen, for example. If you upgraded to an iPhone 6, you probably noticed this in the first few minutes.

Be sure to design accordingly. Don’t put important buttons / icons / targets in areas that are hard to reach.

P.S. You may not be aware of an iOS feature called “Reachability” – double tap (don’t press but just tap) the Home button and whatever app you’re using will slide down within easy reach of your thumb. See here.

How We Conduct User Testing and User Interviews

Usually “Informal” User Testing is the Best ROI

Too often “user-testing” can mean a months-long process that only creates reams of documentation that go unread. We typically focus on getting the highest-value results as quickly as possible. Our staff is trained in methods of identifying target customers, segmenting them, and then building understanding of how to optimally design for those target groups. We do this in a way that balances the need to move fast with the rigor and balance of an unbiased experiment.

7483010074_cd45e2bfcd_oWe work with our clients to develop an understanding of the target market, and then challenge those assumptions to create a nuanced view of the target customer. Then we’ll identify ways to quickly reach people in those markets (including Facebook ads, attending industry meetups, finding enthusiasts on Instagram, and more) and schedule a series of interviews with those users (in the office or at a coffee shop), which are recorded, transcribed, and mined for insights.

Once a prototype has been developed, we’ll sit down with additional users in the target areas to gauge the usability of the prototype and ensure that it’s meeting their needs. In our experience, no other methodology works as quickly to ensure that we’re building products to delight customers.

 

If Needed – Formal Usability Testing in a Lab

In these cases, we handle the entire project “turn-key,” including recruiting and compensating the participants, preparing the testing facility, and reporting the results.  We expect the following work will be required, in ongoing collaboration with the client:

  • Kickoff / Assessments
    • Discuss top-level goals, what is good and bad about the existing product, areas for improvement, advantages / disadvantages, motivators, drawbacks, calls-to-action. Discuss hypotheses (e.g. “we think it breaks because of x”).
    • Discuss metrics that might be available that suggest current product performance or areas for improvement.
    • Discuss demographic breakdowns (e.g. lean more towards customers that are shopping for more expensive items or just an “across the board” type of customer sample).
  • Develop a screener that successfully selects for the right participants from the general population. Attempt to screen for certain recent qualifying activities related to the task (i.e. visited a competitors web site, purchased books on the subject, etc.).

Lab

  • Recruit participants from the general population. Recruit “floater” participants to be available as-needed in the case of no-shows or disqualified participants. Compensate the participants.
  • Develop test materials including the moderator guide. Handle the multiple ways and platforms in which the product should be tested (e.g. mobile, web, tablet, etc.).
  • Run the usability testing and handle the testing logistics.
    • Prepare the testing facility, prepare the technology (including video recording and live stream if necessary), prepare the observation room with large screen, and prepare all of the devices that are to be tested.
    • Expect several days at the usability testing lab.
    • Testing conducted by UX Researchers under the supervision of our Engagement Manager. Detailed logging and note taking.
    • Some participation by client, e.g. two to five people in attendance per day observing the testing in progress. Parking and meals to be provided.
  • Conduct analysis and report testing results. Review and crunch the resulting data.  Report on the results, issues, and recommendations in an actionable presentation format.

Expectations are Changing; UI Designers and UX Designers Take Note

In recent years, the massive shift towards web apps and mobile apps have completely changed user expectations around how software should look and work.

When most folks are using the computer, they’re on the web (and increasingly not in a Windows app, except, of course, for the web browser that they’re using to access the web) and at these web sites:

Google
Facebook
YouTube

Yahoo
eBay
Amazon

MSN
Pinterest
Hotmail

Bing
Wikipedia
Twitter

 

And, these same folks have a smartphone and are using these apps:

 

 

 

Users are expecting apps to be simpler, dynamic, “active” or “alive,” personalized, and responsive:

  • 3 days ago”; relative date/time formatting
  • Content first; labels and other items demoted
  • Mixed Case vs. all UPPERCASE; natural and easier to read
  • Hierarchy represented with whitespace and lines vs. rectangles within rectangles
  • Minimal horizontal scrolling
  • Modal; focus on one thing at a time
  • Beautiful and actionable dashboards
  • Progressive disclosure (show stuff as-needed)

What does this mean for the user experience design of your enterprise applications?

For Inspiration: Uncover Invisible Motion in Video

Here’s one of those simple ideas that can yield incredibly useful results.

Take a video of something (like a baby sleeping), take notice of the tiny little changes that are barely visible (to the human eye), and amplify those changes.

WOW – a stunning visualization technique that could enable a person to see things with the naked eye that were previously invisible.

This NYTimes article (and must-see video) is incredible and inspiring.

We’ve seen the technique used by Philips Medical in their iPhone app: by taking a short video of your face (or someone elses of course), it can detect the heart rate.

Imagine this used with Google Glass when playing poker (what would an elevated heart rate reveal!?)

User Interface Designers: Create Crude Prototypes in 15 Minutes

PopApp is a really simple tool, for iPhone and Android, that lets you:

  • Draw-out your idea for an app
  • Take photos of those drawings, and
  • Stitch them together.

The result is a crude prototype and lets you see and feel how your app might look and work.

We use it often (with final screens that our mobile designer has created in Photoshop) in user testing: before we write a single line of code, get a sense of how users might interact with the app, what they might find confusing, etc.