Transcript User Interface Best Practices

User Interface Best Practices
Scott Lines
Web App Express
User Interface Best Practices
User Interface Best Practices
Four objectives for your app / system:
1)
2)
3)
4)
Easy to learn
Easy to use
Fast
Stable
Easy To Learn
• Know your audience
– Who is your user?
– What is their education level?
– How will they be trained?
– Are you using their “language”?
– Where will they be using your app?
Easy To Learn
Boeing 737 Computer
Easy To Learn
Site Inspection App
Easy To Learn
• Keep it simple
– Don’t do more than you need to do
– Do what you need to do in an excellent way
– Use it yourself
– Simple 30 (20, 10) years ago is not simple today
• Users are much more computer savvy
Easy To Learn
Keep it simple!
Easy To Learn
• Let users play with it
– Have a test environment
– Have a test mode
Easy To Learn
• Keep it consistent
– Have a consistent look and feel
– Keep logical actions and components grouped
together
– Use color consistently
– Use the same button labels
– Keep error messages consistent
Easy To Learn
Be consistent and group logically
This!
Not This!
Easy To Use
• Understand the manual process users follow
• Use it yourself
• Instruct the user what to do
Easy To Use
Tell the user what to do.
Easy To Use
Error messages tell the user how to fix
Not This!
Easy To Use
• Error messages tell the user how to fix
This!
Easy To Use
• Easy on the eyes
• Provide feedback
Easy To Use
• Mock it up – Balsamiq Mockups
Fast
• Know the manual process…replicate in the
app/system
• User interface speed vs. data
retrieval/processing speed
• Save data at the appropriate time
• Consistency
Fast
• SQL + Alpha Anywhere
–
–
–
–
–
–
No excuse for slow data retrieval
No excuse for slow processing
Indices
Engine Configuration
Design
If slow -> get help!
• Tip: Put your webroot on an SSD
Stable
• Handling “bugs”
– Log the error so you can fix it
– Email the error to your support team
– Get the user back up and running
– Find the root cause of the error and fix it
Stable
Example email of a database error
Stable
Database error log example
Stable
• Test thoroughly
• What will the user do?
– Data entry
– Backspace key
– F5 key
– Close the app/browser
Stable
• Backup data
– 6 backups per day
– After 7 days delete all intraday backups except last
one
– Especially useful when systems go live
• Make your system fast
– Provide proper server environment
Think!
More Information
• Google
• Blog.teamtreehouse.com/10-user-interfacedesign_fundamentals
• www.balsamiq.com
• [email protected]