27
User Centered Interface Design Making things easy for your users...and yourself

User Centered Interface Design Making things easy for your users...and yourself

Embed Size (px)

Citation preview

User Centered Interface Design

Making things easy for your users...and yourself

The following things have probably happened to you…

Because you’re stupid?

No.

Lack of user input results in poor design decisions.

How does this happen?!?

You (the programmer) are not your users.

YOUR USERS

How can this be avoided?

Follow the 5 E’s of Usability

*Effective

*Efficient

*Engaging

*Error Tolerant

*Easy to Learn

The best way to design your interface:

Things your users will love:

Do some quick and simple usability testing.

Usability testing is setting a series of tasks for people to complete and noting any problems

they encounter.

How do I know if my design is user-friendly?

What’s the ROI?

Budget Overruns

*Determine design inconsistencies and usability problem areas within user interface.

*Establish baseline user performance

*Validate concerns

*Save $$

Goals of a Usability Test

Before/After Example: Groupon● Immediately asks for the user's

email address

● Plain and basic

● Conveys next-to-no information about what a user could "save 50 percent to 90 percent" on.

Before

Before/After Example: Groupon● Contemporary sidebar navigation

that breaks down popular categories for savings and deals

● Beautiful, large photography

● Search feature

After

Before/After Example: USAToday● Cluttered mass of text-based links.

● The visual content was practically an afterthought -- after all, of the two largest images on the homepage, one is a display advertisement located at the bottom of the page.

● The logo feels dated and the color scheme uninviting, utilizes primarily blue text on white background

Before

Before/After Example: USAToday● Utilizes best practices

relating to layout and site navigation

● Visually appealing, with clean, crisp images of newsworthy stories.

● Offers users the ability to scroll horizontally through the top stories just as you would a print magazine. In fact, the entire experience is very reminiscent of a tablet app, and the site now outshines its competitors.

After

Would you buy a car without test driving it first?

Usability testing is like test driving a car...for your design.

• Hand drawn sketch

• Forms

• Wireframes

• Screenshots

• HTML prototype

• Live site

• API

You can test ANYTHING

• Ct. Management System

• Software

• New Programs

How do I conduct a usability test?

My friend Matt explains how.

● 3-6 people, in your typical user demographic

● Ask them to do a task, without telling them where to navigate to

● The user is never wrong! If they don’t go to the right place, ask them why they made that particular decision and use the feedback to correct your design.

● The biggest design mistakes will be pointed out by most of the participants, such as “I can’t read the text” or “I don’t know where to go next”.

Profit

Swim in piles of money because you saved your boss time and money and your users love your design.