User Interface is King: Developing a Web App UI
-
Upload
dave-olsen -
Category
Technology
-
view
122 -
download
1
description
Transcript of User Interface is King: Developing a Web App UI
![Page 1: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/1.jpg)
User Interface is KingDeveloping a Web App UI
by Dave OlsenWest Virginia University Web Services
![Page 2: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/2.jpg)
I’m nervous.
![Page 3: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/3.jpg)
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
![Page 4: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/4.jpg)
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
![Page 5: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/5.jpg)
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
![Page 6: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/6.jpg)
What is User Experience
Interface + Expectations = A Feeling simple math, really
![Page 7: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/7.jpg)
Success Spectrum
Colorful!
credit: amy hoy
![Page 8: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/8.jpg)
Success Spectrum
It’s awesome!
![Page 9: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/9.jpg)
Success Spectrum
It’s pretty cool.
![Page 10: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/10.jpg)
Success Spectrum
It’s ok. SometimesI have problems.
![Page 11: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/11.jpg)
Success Spectrum
I hate it!
![Page 12: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/12.jpg)
What We Want
Everyone to be happy!
![Page 13: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/13.jpg)
Zen of User Interface
![Page 14: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/14.jpg)
Zen of User Interface
Have a Vision For Your App write it down. post it in your cube.
stick to it!
![Page 15: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/15.jpg)
It’s About: Balance, Form, & Function it’s not about “pretty”
Zen of User Interface
![Page 16: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/16.jpg)
Zen of User Interface
Add Nothing But Value avoid “it’d be nice to have” features
![Page 17: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/17.jpg)
Zen of User Interface
Design for 80% don’t listen to all of your users
![Page 18: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/18.jpg)
Zen of User Interface
Be Consistent same font, same alignment, same copy structure
![Page 19: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/19.jpg)
Consistency Example
Example of being consistent ooga!
![Page 20: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/20.jpg)
Consistency Example
Example of being consistent ooga!
![Page 21: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/21.jpg)
Inconsistency Example
Example of being consistent ooga!
![Page 22: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/22.jpg)
Zen of User Interface
Be Opinionatedpreferences are evil
![Page 23: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/23.jpg)
Weak
Be Opinionatedpreferences are evil
![Page 24: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/24.jpg)
Strong
![Page 25: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/25.jpg)
Listen To Your Gut Instinctnegative emotional/physical response = something wrong
Zen of User Interface
![Page 26: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/26.jpg)
But at the end of the day...this is the most important thing!
![Page 27: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/27.jpg)
Zen of User Interface
It’s All About The Userand, remember, their will always be a first-time user
![Page 28: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/28.jpg)
First-time Example
![Page 29: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/29.jpg)
Before You Code
Use Case
Screenflow
Wireframe
![Page 30: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/30.jpg)
Before You Code
Buy a Whiteboard12’x4’ is a good size
![Page 31: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/31.jpg)
Our Whiteboard
Our Whiteboard
![Page 32: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/32.jpg)
Before You Code
Design Your App Around Taskslet the UI determine your feature set
![Page 33: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/33.jpg)
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
![Page 34: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/34.jpg)
Before You Code
Screenflowget some use out of the whiteboard
![Page 35: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/35.jpg)
Example of Screenflow
Screen 1
Screen 2
Screen 3
![Page 36: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/36.jpg)
Before You Code
Wireframeget some more use out of the whiteboard
![Page 37: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/37.jpg)
Wireframe Example
Example of Wireframeuse our feedback form example
![Page 38: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/38.jpg)
Before You Code
Paper Prototypingfaster than Photoshop but not something we do...
![Page 39: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/39.jpg)
While You’re Coding
<%= ‘Hello World’ -%>
![Page 40: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/40.jpg)
While You’re Coding
Learn To Let Goespecially if you’re part of a team
![Page 41: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/41.jpg)
While You’re Coding
Flex Everything but the Deadlinelimited time will force you to keep your UI clean
![Page 42: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/42.jpg)
While You’re Coding
Iteratelather, rinse, repeat
![Page 43: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/43.jpg)
Iteration Example - v1
Iteratelather, rinse, repeat
![Page 44: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/44.jpg)
Iteration Example - v2
![Page 45: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/45.jpg)
Iteration Example - v3
![Page 46: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/46.jpg)
While You’re Coding
Share UI Conceptslet your users know what you’re up to
![Page 47: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/47.jpg)
UI Concept Demo
![Page 48: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/48.jpg)
While You’re Coding
Have a Prooferfor consistency
![Page 49: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/49.jpg)
After You’ve Coded
mmm... creamery
![Page 50: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/50.jpg)
After You’ve Coded
Ride Out the Stormwait out knee-jerk reactions
![Page 51: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/51.jpg)
After You’ve Coded
Reconnaissance Testingbe stealthy!
![Page 52: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/52.jpg)
After You’ve Coded
Use the Appbecome a user
![Page 53: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/53.jpg)
After You’ve Coded
Don’t Be Afraid to Change Thingsif there’s something wrong, fix it
![Page 54: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/54.jpg)
Change Example - Before
![Page 55: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/55.jpg)
Change Example - After
![Page 56: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/56.jpg)
Other Things You Can Do
![Page 57: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/57.jpg)
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
![Page 58: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/58.jpg)
Other Things You Can Do
vs.
Hide Advanced Featuresnot everyone needs them
![Page 59: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/59.jpg)
Other Things You Can Do
Give Hintseveryone needs them
![Page 60: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/60.jpg)
Other Things You Can Do
Segmentationbite-sized chunks
![Page 61: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/61.jpg)
Other Things You Can Do
Space Out Submit Optionsavoid accidental clicks
![Page 62: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/62.jpg)
Other Things You Can Do
Standardize Your Iconschoose icons that make sense
vs.
![Page 63: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/63.jpg)
Other Things You Can Do
Use Icon Keys‘cause not everyone will know what they mean
![Page 64: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/64.jpg)
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)
![Page 65: User Interface is King: Developing a Web App UI](https://reader033.fdocuments.net/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/65.jpg)
Q & A
Any Questions?otherwise, thanks!