View
121
Download
1
Category
Tags:
Preview:
DESCRIPTION
An overview of what the user experience is, changes you can make to your applications, and tips for testing. Uses before and after examples from our content management system (CMS) slate to demonstrate the topics.
Citation preview
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!
Recommended