user interface is king: developing a web app ui
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.TRANSCRIPT
![Page 1: User Interface is King: Developing a Web App UI](https://reader033.vdocuments.mx/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.vdocuments.mx/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/2.jpg)
I’m nervous.
![Page 3: User Interface is King: Developing a Web App UI](https://reader033.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/24.jpg)
Strong
![Page 25: User Interface is King: Developing a Web App UI](https://reader033.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/28.jpg)
First-time Example
![Page 29: User Interface is King: Developing a Web App UI](https://reader033.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/44.jpg)
Iteration Example - v2
![Page 45: User Interface is King: Developing a Web App UI](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/45.jpg)
Iteration Example - v3
![Page 46: User Interface is King: Developing a Web App UI](https://reader033.vdocuments.mx/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.vdocuments.mx/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/47.jpg)
UI Concept Demo
![Page 48: User Interface is King: Developing a Web App UI](https://reader033.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/54.jpg)
Change Example - Before
![Page 55: User Interface is King: Developing a Web App UI](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/55.jpg)
Change Example - After
![Page 56: User Interface is King: Developing a Web App UI](https://reader033.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/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.vdocuments.mx/reader033/viewer/2022061300/54c75a344a795966738b456d/html5/thumbnails/65.jpg)
Q & A
Any Questions?otherwise, thanks!