Recommended
More Related Content
What's hot
What's hot (20)
Similar to Web UI Best Practices.ppt
Similar to Web UI Best Practices.ppt (20)
Web UI Best Practices.ppt
- 1. www.axon.vnfb.com/AxonActiveVietNam Golden Team Web UI Design Best Practices
- 2. www.axon.vnfb.com/AxonActiveVietNam Agenda ● Introduction ● Best practices ○ Layout ○ Getting input ○ Navigation ○ Data & Content Management ○ Light, Color and Contrast ● How to Choose and Apply ● Q&A
- 4. www.axon.vnfb.com/AxonActiveVietNam UI and UX UX: Design the Experience - How ... feel ... - Emotional UI: Design the Product - What … look ... - Technical
- 5. www.axon.vnfb.com/AxonActiveVietNam There is a saying ...
- 7. www.axon.vnfb.com/AxonActiveVietNam Patterns of Layout ● Two of the common layouts are: ○ F-pattern layout ○ Z-pattern layout ● What? How? Why?
- 10. www.axon.vnfb.com/AxonActiveVietNam F-Pattern Layout ● Why Is This Pattern Effective? ○ It follows users' natural sight. ○ Conversely, It promotes the user’s sight to follow naturally.
- 13. www.axon.vnfb.com/AxonActiveVietNam ● Why Is This Pattern Effective? ○ It follows users' natural sight. ○ It adheres the 4 of principles of an effective design: 1. Branding 2. Visual Hierarchy 3. Structure 4. A Call to Action Z-Pattern Layout
- 16. www.axon.vnfb.com/AxonActiveVietNam Inputs I need hints, hints, hints! I want to fix my mistake now! I hate complication!
- 17. www.axon.vnfb.com/AxonActiveVietNam Users want to know exactly what data to enter.
- 18. www.axon.vnfb.com/AxonActiveVietNam Users want immediate feedback about entered data.
- 19. www.axon.vnfb.com/AxonActiveVietNam Users want to enter data without worrying about the formats.
- 20. www.axon.vnfb.com/AxonActiveVietNam Inputs Hints !!! Immediate feedback !!! Smart formats !!!
- 32. www.axon.vnfb.com/AxonActiveVietNam Data and Content Management ● Content & Data Interaction ● Autosave ● Quick Search Box ● Hidden Information ● Media ● Empty States
- 33. www.axon.vnfb.com/AxonActiveVietNam Content & Data Interaction Hover Click Drag & Drop
- 34. www.axon.vnfb.com/AxonActiveVietNam Content & Data Interaction
- 35. www.axon.vnfb.com/AxonActiveVietNam Autosave The user wants to protect their data and continue working without having to remember to do so.
- 36. www.axon.vnfb.com/AxonActiveVietNam Quick Search Box User remember what he looking for, but he want to reduce manipulations.
- 37. www.axon.vnfb.com/AxonActiveVietNam Hidden Information The user wants quick access secondary information that’s not usually necessary to show.
- 38. www.axon.vnfb.com/AxonActiveVietNam Media Flickr Photo Viewer Lightbox pops up, background grays out Thumb image slider Full screen mode Back and forward navigation button
- 39. www.axon.vnfb.com/AxonActiveVietNam Empty States The user needs to know why a section of the application is empty and what to do next.
- 42. www.axon.vnfb.com/AxonActiveVietNam Light Lighter shades appear closer to us and darker shades further away. Why?
- 43. www.axon.vnfb.com/AxonActiveVietNam Color Warmer colors expand when placed next to colder colors.
- 44. www.axon.vnfb.com/AxonActiveVietNam Contrast Higher contrast items stand out — they catch your eye.
- 48. www.axon.vnfb.com/AxonActiveVietNam S1: Define problem #User Story 6969 As a user, I want to rate a video and overview about all rating of this video Then I can contribute to the site, and help build a great community
- 50. www.axon.vnfb.com/AxonActiveVietNam S3: Choose a good example
- 51. www.axon.vnfb.com/AxonActiveVietNam S4: Apply the solution ● Average of rating ● Clickable items
- 54. www.axon.vnfb.com/AxonActiveVietNam Reference ● http://www.uxpin.com/web-ui-design-best-practices.html ● http://www.uxpin.com/web-design-patterns.html ● http://www.fastcodesign.com/3032719/ui-ux-who-does-what-a-designers- guide-to-the-tech-industry ● http://thecdm.ca/news/ux-vs-ui ● http://www.vanseodesign.com/web-design/3-design-layouts/ ● http://www.uxpin.com/visual-web-ui-design-colors-space-contrast.html