User Interface is KingDeveloping a Web App UI

by Dave OlsenWest Virginia University Web Services

I’m nervous.

Who is Dave Olsen?

• I’m a Programmer/Project Manager with WVU Web Services

• Languages: Ruby, PHP, & JavaScript

• 7+ years of experience developing web apps

• Spent the last 2+ years overseeing slate

What is slate?

• A content management system focused on rapid production of traditional web sites

• Uses Ruby on Rails

• Under development for 2+ years

• serving 71 live sites which leads to a quarter of a million page views a month

• Not open sourced... yet

• More info @ slateinfo.blogs.wvu.edu

The Talk• What is User Experience

• Zen of User Interface

• Things You Can Do:

• Before You Code

• While You’re Coding

• After You’ve Coded

• Other Things You Can Do

• Resources

What is User Experience

Interface + Expectations = A Feeling simple math, really

Success Spectrum

Colorful!

credit: amy hoy

Success Spectrum

It’s awesome!

Success Spectrum

It’s pretty cool.

Success Spectrum

It’s ok. SometimesI have problems.

Success Spectrum

I hate it!

What We Want

Everyone to be happy!

Zen of User Interface

Zen of User Interface

Have a Vision For Your App write it down. post it in your cube.

stick to it!

It’s About: Balance, Form, & Function it’s not about “pretty”

Zen of User Interface

Zen of User Interface

Add Nothing But Value avoid “it’d be nice to have” features

Zen of User Interface

Design for 80% don’t listen to all of your users

Zen of User Interface

Be Consistent same font, same alignment, same copy structure

Consistency Example

Example of being consistent ooga!

Consistency Example

Example of being consistent ooga!

Inconsistency Example

Example of being consistent ooga!

Zen of User Interface

Be Opinionatedpreferences are evil

Weak

Be Opinionatedpreferences are evil

Strong

Listen To Your Gut Instinctnegative emotional/physical response = something wrong

Zen of User Interface

But at the end of the day...this is the most important thing!

Zen of User Interface

It’s All About The Userand, remember, their will always be a first-time user

First-time Example

Before You Code

Use Case

Screenflow

Wireframe

Before You Code

Buy a Whiteboard12’x4’ is a good size

Our Whiteboard

Our Whiteboard

Before You Code

Design Your App Around Taskslet the UI determine your feature set

Before You Code

Write Use Cases1. User clicks ‘Feedback’ and short form is shown2. User fills out form noting session was ‘excellent’3. User clicks ‘Submit’ and is shown a success flash

Before You Code

Screenflowget some use out of the whiteboard

Example of Screenflow

Screen 1

Screen 2

Screen 3

Before You Code

Wireframeget some more use out of the whiteboard

Wireframe Example

Example of Wireframeuse our feedback form example

Before You Code

Paper Prototypingfaster than Photoshop but not something we do...

While You’re Coding

<%= ‘Hello World’ -%>

While You’re Coding

Learn To Let Goespecially if you’re part of a team

While You’re Coding

Flex Everything but the Deadlinelimited time will force you to keep your UI clean

While You’re Coding

Iteratelather, rinse, repeat

Iteration Example - v1

Iteratelather, rinse, repeat

Iteration Example - v2

Iteration Example - v3

While You’re Coding

Share UI Conceptslet your users know what you’re up to

UI Concept Demo

While You’re Coding

Have a Prooferfor consistency

After You’ve Coded

mmm... creamery

After You’ve Coded

Ride Out the Stormwait out knee-jerk reactions

After You’ve Coded

Reconnaissance Testingbe stealthy!

After You’ve Coded

Use the Appbecome a user

After You’ve Coded

Don’t Be Afraid to Change Thingsif there’s something wrong, fix it

Change Example - Before

Change Example - After

Other Things You Can Do

Other Things You Can Do

• Be concise. Edit and edit some more.

• Use Headings.

• Paragraphs or, better yet, bulleted lists.

• Avoid technical jargon at all costs.

For Copy

Other Things You Can Do

vs.

Hide Advanced Featuresnot everyone needs them

Other Things You Can Do

Give Hintseveryone needs them

Other Things You Can Do

Segmentationbite-sized chunks

Other Things You Can Do

Space Out Submit Optionsavoid accidental clicks

Other Things You Can Do

Standardize Your Iconschoose icons that make sense

vs.

Other Things You Can Do

Use Icon Keys‘cause not everyone will know what they mean

Resources

• Slash7 (blog)

• Designing the Obvious by Robert Hoekman

• Good Experience (blog)

• UIE Brain Sparks (blog)

• Boxes and Arrows (blog)

• Silk Icon Set (the pretty)

• Your Gut (you)

Q & A

Any Questions?otherwise, thanks!