Choice Overload in UX

Reading Time: 2 mins

I came across this TED talk given by Sheena Iyengar in New York on November 2011 about choice overload. It's a short, eloquent talk about the plethora of choice that we are faced with as consumers in this day in age. Grocery aisles are filled with an overwhelming number of choices for any given product based on brand, flavour, packaging, etc. 

Sheena talks about reducing choice overload for your consumers and how that can have positive effects on your business. She revealed several studies which found that reducing the number of choices has increased sales, profit and productivity.

She offered some strategies for business to apply to help make choosing easier for their customers:

1. Cut - less is more
It is easier to make a decision when there are less choices. 

2. Concretize - make it vivid
It is easier to make a choice when you understand the consequences of each choice and they can be felt in a concrete way.

3. Categorize - more categories, fewer choices
We can handle more categories than we can choices. Categories help people identify the differences between their choices.

4. Condition - presenting low to high choices is more engaging than high to low choices
It's better to provide people with increasing number of choices step-by-step than to start with a large number of choices right off the bat. Starting people off with lower choices allows them to prepare for their decisions and keeps them engaged.

As I listened to her talk, I realized that some of the lessons and takeaways she presented also apply to design...

Less is more. Clearing clutter in your interfaces and in your web design helps to clearly communicate your intent and also helps your users to navigate your interfaces and understand the tasks they need to accomplish.

Every action in the UI should be clearly labeled so that the consequences of each interaction is clear. Or else allow users to revert the interaction and return to a previous state. This makes your users feel safe while navigating your UI and allows each action to be clearly identified.

Do not overwhelm the UI. For complex interfaces, it can be better to divide tasks and present them to the user one at a time or step-by-step instead of all at once. Overwhelming your users is the surest way of losing them.

Guide new users through your UI. Help users familiarize themselves with your UI whenever possible, this can be done through a quick tutorial/callout or by using in place help as needed. Make it easy for users to learn your interface.

Seeing (and feeling) is believing

When communicating a proof of concept or a design to potential clients seeing (and feeling) is believing.

Sketching ideas and wireframes is a major part of my design process. Sketching allows me to explore and refine ideas. It helps me to narrow my focus and start to understand the requirements and problems that my design needs to address and solve. It's also a great way to communicate your ideas and collaborate with your team - a picture is worth a thousand words.

After the sketching phase I'll usually take my sketches to Balsamiq so that I can start to create my wireframes digitally and make changes easily. I will share these wireframes with the team and we'll use them to discuss features, workflow, and UI design. This process has worked well when we're developing features to our existing product and discussing the project internally. But when we're creating something new and building a concept from scratch it's been helpful to take our wireframes to working prototypes.

A prototype allows us to test ideas internally and refine our assumptions. Most importantly, it allows us to communicate our ideas to clients and get buy in on the interaction design before development begins. We're able to learn about the technical details of our ideas and how that fits with our current product architecture.

Building a prototype is a lot like designing in the browser. But I'm not interested in the visual design. I'm interested in understanding how the UI behaves, the workflow and how the interactions flow from one part to another. Essentially the user experience. This isn't about aesthetics, this is about getting a feel for your interface.

When I build a prototype, I never start blind. That's what the sketches and wireframes are for. Going directly to code alone distract you from the intent of the thing that you're designing and what the goals are for the interface. So I start with my sketches and wireframes and as I build my prototype I discover things that I haven't considered and parts of my workflow that may have been missing. So I can change my decisions right there and test my designs easily.

HTML and CSS are part of my designers toolset and I recommend designers try to use it in theirs to help clients and your team get a feel for your designs. If you have some JavaScript or jQuery knowledge even better but there's frameworks that can help you with that. If you're not the type of designer to design in the browser, I think you'll still find it useful to take your designs to a working prototype and get a feel for the design decisions you made. You can also get some feedback from your team and test your designs on actual users. The prototype doesn't have to be fancy or pretty, and in fact it shouldn't be. Don't focus on the design details, the color, typography, etc. Just focus on the interactions.

You mentioned frameworks?

That's right, there's help! You don't have to start from scratch. That's what front-end frameworks are for...

In one of my recent projects I discovered HTML Kickstart. It's a very lean HTML framework that allows you to build an interactive web interface really quickly. It took me a couple of hours to create a responsive interface with 6 pages. They also use Font Awesome Icons which adds some great UI elements to communicate your interface to  your users.

Other frameworks...

Twitter Bootstrap - This is a popular one and has a whack load of elements that you can use to build your prototype but bootstrap goes beyond prototyping. You can build a full fledged development project with it. You can definitely do a lot more with Bootstrap but HTML Kickstart was ultra lean and light which is why I opted for it. Update: Bootstrap 3 is now out and a lot of it has changed apparently, I haven't tried this version so read more about the changes here.

Foundation - This one I'm excited about. I haven't fully worked with it (just got it setup and tinkered a bit) because again I wanted something really light and quick to use. Foundation is developed on Sass and can work with Compass, both of which I highly recommend, but that was a lot more more setup than I really needed. As a responsive framework I've heard great things and I definitely plan to use it to start my next web design.

Into the world of UX

There is a mind shift that needs to happen for a designer to delve into the world of user experience design. Your aesthetic design sense changes because you're thinking not only of the visual design elements but how they work together. You have to care about the overall look and feel but also of the usability of the application and how users will interact with it. UX design often incites many debates about what it means, it's application, the skill sets people should have if they are to label themselves as such, etc. But the point is that user experience design is important and some people find themselves relegated to that position in addition to being a designer, a front-end developer, an interaction designer, etc. Some of us come from a Human Computer Interaction background, a technical development background, a psychology background, a designer background. All of that I think is great because working in technology these days means being able to adapt, acquire and use different skill sets.

For my role as a UX designer and developer, it means that I have a lot of things to think about... How intuitive is it for people to use the product and to navigate it? What does the visual design of the product say to our users? Does the functional design help to achieve the users goals? How well do the interactive pieces fit together from an architectural point of view? Does the design of the interface support and enhance the user workflow and does the application help to support their needs and goals?

Should all of these things be handled by one person? Probably not. Ideally there would be a team. But in some cases, including mine, you work on all aspects at one point or another. The thing I've learned is to try to separate it. I may be in charge of completing the design from start to finish and perhaps even code it but I try to approach them seperately at first. Tackle the workflow, the design, then usability, then the experience... you may cycle back to the workflow and fine tune it again, then critique the experience and the usability and then redesign. Development might happen after the first pass then you redesign it and make changes to the  implementation.

It's a challenging world to work in but can open a designer and developers mind in new and unexpected ways. It also helps to bridge the gap between design and development as we try to create experiences that are effective, effortless and enjoyable.