Successfully reported this slideshow.

20 percent tips


Published on

This presentation can help newbies to understaind user interface basics. Enjoy!

Published in: Design, Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

20 percent tips

  1. 1. UI Best PracticeThis is a training
  2. 2. What is Interface?Good Interfaces Main PrinciplesDesign Process StepsInterface development 2.5 hCurrent ProjectsTips and RecommendationsPrototype Your App (fast exercise)coffee break 15 minInterfaces 1.5 h
  3. 3. What is interface?
  4. 4. The way that you accomplish tasks with a product—whatyou do and how it responds—thats the interface.Jeff Raskin “the Humane Interface”
  5. 5. Interfaces around you...Usually interfaces are very evident to use
  6. 6. But sometimes they are not so evident…Donal Normans book “The Design of Everyday Things” providessome more examples
  7. 7. «Human-Computer» InterfaceOriginally software interfaces showed too many features.In addition you cannot receive natural feedback (opposite to physicalobjects)
  8. 8. Interface tax — when you have to interact withinterface but not for reaching your objective.The term by Alan Cooper, the famous interface designerTo create good interfaces we should strive to minimize interface taxes.
  9. 9. The most important things...Money Typed data Time
  10. 10. Good Interfaces Main Principles
  11. 11. 1. Simple Mental ModelWYSIWYG
  12. 12. 2. Easy to Reach Essential FunctionsSome complex operations may require complicated interfaces,however simple operations should have simple interface.Compare Gmail and Microsoft Word interfaces for typing.Hide not essential functions.
  13. 13. 3. Enough InformationNeither lack no overload. User should receive enough information about systemstate, tickets availability, goods prices, feature and delivery options, etc.
  14. 14. 4. Immediate ResponceHighlighted Links Progress bars Immediate search results
  15. 15. 5. Forming Habits, Well-Known HotkeysAll professional software forms habits. Adobe Photoshop is a good example.Google Calendar provides Alt/Opt+S for Save an event (instead of prevalentCtrl/Cmd+S). This is a bad example.
  16. 16. 6. Remember Your PreferencesYes – Chrome shows most visited (ie preferrable)pages
  17. 17. 7. Easy to undoHumanes can make mistake. If you cannot undo it is awful.
  18. 18. Summary1. Simple Mental Model2. Easy to Reach Essencial Functions3. Enough Information4. Immediate response5. Forming Habits6. Remember Your Preferences7. Easy to Undo
  19. 19. UI centric solution implementation steps
  20. 20. Projects
  21. 21. Navigation Tree
  22. 22. OPF Configurator
  23. 23. Mobile Client for BlackBerry (prototype)
  24. 24. Optimistic Lock (bunch of functions)
  25. 25. Reference Selector & Fast search
  26. 26. Search
  27. 27. Search Profiles
  28. 28. Connectivity Wizard
  29. 29. Order Entry Module
  30. 30. Portals
  31. 31. Tips and Recommendations
  32. 32. What to improve you interface?Some tips1. What is the main function in the screen?2. Is this function available?3. Can it be better? Sure it can. How?4. Look at good principles list and check.5. Make it visually cleaner.
  33. 33. Check if your interface forms habits• Same elements behaior should be consistent in diffenentmodules• look&feel• Colors palette, Icons,Consistency
  34. 34. FormsLuc Wroblewski wrote the best book about forms
  35. 35. Make Primary Buttons ProminentGfoogle wants to get your mobile phone number.Who can find the button to skip this step?
  36. 36. To readEdward TufteThe Visual display ofQuantitive InformationJef RaskinThe HumaneInterfaceAlan CooperAbout Face