Select Page

Extreme Design – Derek Featherstone

Jul 26, 2016 | An Event Apart 2016

There’s a bath tap in a London hotel with two hot water spouts… and the directions for these spouts is about 6 feet away out of your field of view if you’re looking at the spout. This is bad design. It could have benefitted from proximity.

Proximity – a design principle that’s been around for… a while.

Group closely related items.

Exercise: Use the ‘straw test’ (look through a hole in your hand as if you were holding a straw with one eye) to “complete a form” on the screen. This simulates what someone with low vision would experience. The form in question has 4 questions on the left of the screen, and the answer sets/spaces

Someone that magnifies to 200% sees roughly 1/9 of the screen. Someone that magnifies to 500% sees roughly 1/25 of the screen. As the magnification goes up and up and up you see less and less of the screen which makes it very difficult to see things in context.

Zooming in with this form at the top of the page so you can see the questions better, you can’t see the answers. Then when you scroll over to see the answers you can’t see the question. These 2 things that are related really should be close together! However we create these forms all the time with 2 column layouts where the question is on the left and the answer is on the right. This isn’t the best, honestly.

Plus, even worse, we’ve created a pattern of movement when you move from the left to the right, then down a bit and start over at the left, then to the right, etc. So as we continue this pattern of movement, once we’re ready to submit the form we move down to the bottom left which gives us the WRONG button: Quit!

This form was CODED perfectly for someone with blindness that would use a screen reader to ‘see it,’ but it was designed horrible for someone with low vision. So, it’s not as simple as we may have thought.

Visual Weight: The 3 buttons on the form all have the same visual weight. The only way to tell the difference in between them is to read them. To someone with low vision these buttons are essentially the same.

So how to improve this interface?

Think of changing the way this form is laid out. The traditional 2 column layout isn’t what we want here.

Use layout to create there might chunks.

We’ve also created a better pattern of use to lead the eye to the correct action.

Not every button needs to go directly below the form fields, but keep in mind that we’re leading people someone so let’s put things in a predictable place that makes sense to them.

derek-featherstone-extreme-design-form-fixed

 

USE THE STRAW TEST TO FIND LAYOUT AND DESIGN CHALLENGES FOR PEOPLE WITH LOW-VISION. 

This is an example of ‘Extreme Design.’ We’re taking an extreme, projecting it onto a design, and taking that problem and solving it. Solving that problem for that particular disability makes the design better for everyone.

One of the best design videos he’s ever seen is IDEO: The Deep Dive (http://www.youtube.com/watch?v=M66ZU2PClcM)

In the process of designing a real life shopping cart, they explored the different ways people use shopping carts… so you have people who are racing through the story, load up 5 or 6 things, and are out of the store before other people even make it in the store. Then, you have the people that spend 2 hours on Saturday mornings to do their shopping, etc. So they analyze how people use them. They ultimately ended up designing a cart that took into account how groceries are collected, how people check out, and then also getting them to the car. The shopping cart ended up having hooks around the side that allows you to hang your full grocery bag

“By examining the extreme ends of a set of phenomena in depth, the entire universe of relationships can be illuminated since other instances will fall somewhere between on the map of relations and links.”

Basically: If you look at the extremes, and understand and design for those extremes, you’re going to have designed something great for everyone, because the majority of people fall within those extremes.

So designing for extremes can really help us design for everyone.

‘The spectrum’ is used in terms of disabilities sometimes, especially cognitive disabilities. http://sateach.es/spectrum

Sometimes with Autism people expect that they’re either ‘not very Autistic’ or ‘very Autistic’. Think of the spectrum not as a linear thing but as a 2 dimensions or even 3 dimensional thing. There are levels inside multiple cognitive functions, and someone can have different levels of development in various areas.

This type of ‘spectrum’ can be applied to other disabilities like visual disabilities. They could have color blindness, depth perception difficulty, limited peripheral vision, etc. There’s not just ‘can see well’ and ‘can’t see well.’

derek-featherstone-extreme-design-spectrum

 

Sure we’re taking things and simplifying them but disability is not something we can simplify and say ‘oh, this is how we fix that problem.’

So how can we take these ideas and use them to make better design, period?

 

____________________________________________

 

Examples: 

EXTREME – CANNOT SEE A CRITICAL VISUAL

What happens if that critical visual is not available to you? A client of theirs was working with some maps, and wanted to put them on their site. What this client was trying to do is communicate that there is a proposed boundary change to city limits, and they put the existing and proposed boundaries on a map of the city.

So they had to figure out how to represent those polygons to people who couldn’t see. The border could be described in words (for both existing and proposed). It wasn’t a bad idea, but what it doesn’t do is tell you between the difference between the two boundaries. So they decided they needed a third description of how the border is being extended exactly. Other ideas were to provide GPS coordinates.

Then they said ‘well why are you putting the map on the page in the first place? What is it’s purpose?’ The answer was ‘well it’s a map we want to use this map!’ The answer was that people wanted to know whether this boundary affected them. Ok BUT WHY?? The biggest reason would be if the new boundary would affect their taxes. So then the question arose: how else can we let someone figure out if the change affects them? Sure we want the map so people can explore it but the main reason people wanted to look at the map is to find out if they would be impacted by the change. SO they decided a great solution would be to have a query where they put in their postal code and can be told directly whether the change impacts you.

It doesn’t take much of a stretch to see how this is better than everyone.

Take a critical piece of information and assume it’s not there. How are you going to communicate the same information or purpose

 


 

EXTREME- LIMITED VISION OF THE SCREEN

We see tables all the time that are large and have multiple columns. Someone with a limited view of the screen would need to scroll left and right to see the table data and then you lose context of the cell data. ***This actually happens to me too when trying to make a ‘responsive table’ (yes I know, oxymoron) so I’m super interested on how to do this. 

So how can we solve this problem? They started showing a little icon that when you click it the table headers are brought in right at the cell in question.

They’re looking for opportunities to put this into production so if you have large tables of data contact them.

http://examples.simplyaccessible.com/cell-headers

They’ve also played with dockable controls to a video. The idea is that someone who is magnifying the screen and is looking at only a portion of the video, the controls for the video are always stuck at the bottom, but someone using a magnifier may want to put the controls in a different place. You can put the controls anywhere on the screen, wherever you want.

 


 

EXTREME – DESIGN FOR DORY

She had the worst memory ever. If we imagine people can’t remember things how does that change design?

Think through booking a flight, and imagine there’s a leaving from, arriving to, date fields, etc..

By the way, side note, we should not create form fields where the placeholders disappear after it’s clicked. Leave it there but move it to a place that allows you to enter a value! People don’t necessarily remember what it said when they clicked on it!

Also think about a Date of birth field with the format as a placeholder (MM/DD/YYYY). One way to do this is to move the placeholder into the label itself.

HAVING PLACEHOLDER INFORMATION PERSIST IN THE INTERFACE IS EXTREMELY IMPORTANT!

Error Messaging:

Most forms have a global error message collection box at the top of the form. But let’s assume someone will forget which fields have errors, so let’s have local messaging in each of the fields in question too, as well as a reminder on what the NEXT error is!

 


 

EXTREME – DESIGN FOR MOTION IN ONE DIRECTION ONLY

Some people with dexterity challenges use a program that executes movements for them. Some testing they did with real users that had that type of software and

If we increase the size of the target that is probably the easiest way to solve the problem without changing the interface in other ways. This isn’t just going to be easier for people with interface challenges

 


 

EXTREME – DESIGN FOR ANDRE THE GIANT

The finger pad of Andre’s finger is 1 inch. The average person’s finger pad size is 10-14mm, Andre’s were 25mm! In terms of an Apple Watch, his finger would literally cover the entire watch screen. The home screen with a bunch of little dots would be way too difficult for him to use. So instead of a clustered interface, you could allow him to change the interface so there’s only one thing there at a time that he scrolls through.

Touch targets are difficult. It’s not just about the size of the touch targets, but the space in between them.

 


 

EXTREME – DESIGN FOR HANDS FREE USAGE

Don’t focus on the solution, focus on the problem. So, “use voice recognition” isn’t the answer we want here.

Think of the idea ‘Minimum Viable Interaction”

The smallest amount of information and functionality that someone needs to complete an interaction. Create the minimum viable interaction by providing the most valuable piece of information for decision making as early as possible.

We’re trying to accomplish a task. What is the smallest amount of functionality that allows them to take action?

What if someone can only read the headings?

What if someone can only interact with the form fields?

 


 

EXTREME – SOMEONE IS ONLY ABLE TO INTERACT WITH FORM FIELDS

Limit your ingredients. What if you have a bunch of sliders that people can drag a slider to the right or left until they reach the value they want. If someone if using voice recognition software to interact with those form fields, a

 


 

EXTREME – SOMEONE CAN ONLY READ HEADINGS

How can you make a design or interface easier to understand for someone who just scans headings and not looking through all the content. Take the important piece of information from the body and put it up in a heading. Ex: If someone sorts flights by shortest duration, take that information and pop it up in the heading so it’s easy to scan by what they’re searching for.

 


 

EXTREME – TRANSFORM DIGITAL TO PHYSICAL

His dad went to register his mp3 player online in case he needed to get it fixed ever under warranty, and he got emotionally overwhelmed by the error messages that appeared when he tried to submit the form. The submission process took him 2 hours, and because of that experience, he didn’t want to do anything else online ever!

Having physical expressions or manifestations of things that are happening in the digital world can help people feel like the digital world is less scary, more understandable. An example is to have a light that changes colors (a real light bulb in the real world) as the strength of a password being input changes from weak to strong.

 

____________________________________________

 

The idea behind extreme design is that by solving a problem for someone with a disability, you really end up making it better for everybody. 

 

[email protected]

@feather

 

2 Comments

  1. Aaron

    Several sections of this article seemed like the cut off or were unintentionally clipped, such as “Use layout to create there might chunks” and “the huge 7 inch touch screen in the center of the console is supposed to have voice recognition, but it only going”

    Am I missing something? This is a super informative piece!

    Reply
    • Torre

      Hey Aaron! You are totally right – these articles of talks are from me taking notes during live conferences, and I type as fast as I can and occasionally just have to jump ahead to the next sentence if I can’t keep up or my fingers spaz out lol. You found evidence of that! I’m actually going to delete that sentence because without the end of it, it has no meaning. Thank you so much for catching it and I’m glad this was helpful. An Event Apart is THE MOST AMAZING front-end web development conference out there, and we attend every year. If you find this valuable you’d love the full conference.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

how-to-choose-a-wordpress-theme-thumbnail

How To Choose A WordPress Theme For Your Website

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier. This is a 5 page guide with an approximately 4 minute read.

How To Pick A WordPress Theme For Your Website • Download the Guide

How-to-choose-a-wordpress-theme-thumbnail-sm 5 page guide • 4 minute read

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier.

Powered by ConvertKit

Success! Check your email for the guide.

where-to-host-thumbnail

Where To Host Your WordPress Website and Why It Matters

In this guide we discuss what makes 'good hosting' including security, speed, and support. We tell you who we use and why, and give you a coupon! YAY COUPONS! This is a 45 page guide with an approximately 3 minute read.

How To Pick A WordPress Theme For Your Website • Download the Guide

How-to-choose-a-wordpress-theme-thumbnail-sm 5 page guide • 4 minute read

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier.

Powered by ConvertKit

Success! Check your email for the guide.

8-next-level-plugins-cover

8 WordPress Plugins That Can Take Your Website To The Next Level

For our business clients, we install some specialized WordPress plugins. Get our list of the 8 next level plugins we love and the use case for each. 

How To Pick A WordPress Theme For Your Website • Download the Guide

How-to-choose-a-wordpress-theme-thumbnail-sm

5 page guide • 4 minute read

In this guide you'll learn four tips to make choosing a WordPress theme a bit easier.

Powered by ConvertKit

Success! Check your email for the guide.