User Interface Best Practices Scott Lines Web App Express.
-
Upload
kelsey-tindel -
Category
Documents
-
view
216 -
download
0
Transcript of User Interface Best Practices Scott Lines Web App Express.
![Page 1: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/1.jpg)
User Interface Best Practices
Scott LinesWeb App Express
![Page 2: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/2.jpg)
User Interface Best Practices
![Page 3: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/3.jpg)
User Interface Best Practices
Four objectives for your app / system:
1) Easy to learn2) Easy to use3) Fast4) Stable
![Page 4: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/4.jpg)
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?
![Page 5: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/5.jpg)
Easy To Learn
Boeing 737 Computer
![Page 6: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/6.jpg)
Easy To Learn
Site Inspection App
![Page 7: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/7.jpg)
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
![Page 8: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/8.jpg)
Easy To Learn
Keep it simple!
![Page 9: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/9.jpg)
Easy To Learn
• Let users play with it– Have a test environment– Have a test mode
![Page 10: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/10.jpg)
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
![Page 11: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/11.jpg)
Easy To Learn
This!
Not This!
Be consistent and group logically
![Page 12: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/12.jpg)
Easy To Use
• Understand the manual process users follow• Use it yourself• Instruct the user what to do
![Page 13: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/13.jpg)
Easy To Use
Tell the user what to do.
![Page 14: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/14.jpg)
Easy To Use
Not This!
Error messages tell the user how to fix
![Page 15: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/15.jpg)
Easy To Use
• Error messages tell the user how to fix
This!
![Page 16: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/16.jpg)
Easy To Use• Easy on the eyes• Provide feedback
![Page 17: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/17.jpg)
• Mock it up – Balsamiq MockupsEasy To Use
![Page 18: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/18.jpg)
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
![Page 19: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/19.jpg)
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
![Page 20: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/20.jpg)
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
![Page 21: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/21.jpg)
Stable
Example email of a database error
![Page 22: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/22.jpg)
Stable
Database error log example
![Page 23: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/23.jpg)
Stable
• Test thoroughly• What will the user do?– Data entry – Backspace key– F5 key– Close the app/browser
![Page 24: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/24.jpg)
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
![Page 25: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/25.jpg)
Think!
![Page 26: User Interface Best Practices Scott Lines Web App Express.](https://reader030.fdocuments.net/reader030/viewer/2022032516/56649c725503460f949247a4/html5/thumbnails/26.jpg)
More Information
• Google• Blog.teamtreehouse.com/10-user-interface-
design_fundamentals• www.balsamiq.com• [email protected]