Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing a new user interface for open source projects


Published on

  • Be the first to comment

Designing a new user interface for open source projects

  1. 1. Designing a New User Interfacefor Open Source ProjectsGabriel Cardoso, Red Hat
  2. 2. GateIn• Single Sign-On• Advanced layout support• User and group management• Mobile redirects• ...The Open Source Website
  3. 3. Agenda• Inconsistencies in design• A design process• The new UI proposal for GateIn• Speeding up with Twitter Bootstrap• The Responsive Web Design
  4. 4. Aprojectwithoutadesigner➔• Visual design • Usability
  5. 5. TherewassomeinitialdesignhereUpdated by developers inconsistencies in the UI➔
  6. 6. InconsistenciesintheUserInterface• Visual design • Navigation design
  7. 7. AdesignprocessfortheWeb
  8. 8. Structureplan:InformationArchitecture
  9. 9. Skeletonplan
  10. 10. Surfaceplan
  11. 11. Difficulttodoallthiswithoutadesigner...=
  12. 12. Usabilityinspection• Visibility of system status: keep users informed aboutwhat is going on;• Match between system and the real world: use words,phrases and concepts familiar to the user;• User control and freedom: offer “emergency exit” incase of mistake;• Consistency and standards: use the same elements tosimilar actions;• Error prevention: better than good error messages;Jakob Nielsen’s 10 Heuristics for User Interface Design
  13. 13. • Recognition rather than recall: minimize the user’smemory load;• Flexibility and efficiency of use: accelerators for theexpert user;• Aesthetic and minimalist design: hide irrelevantinformation;• Help users recognize, diagnose, and recover fromerrors: good error messages;• Help and documentation.UsabilityinspectionJakob Nielsen’s 10 Heuristics for User Interface Design
  14. 14. Consistencyandstandards• Humm, a different screen. It is something else?
  15. 15. Consistencyandstandards• Redesign: same visual / information for the same functionality
  16. 16. Errorprevention• Ah, only two required fields! Actually not...
  17. 17. Errorprevention• All required fields are displayed in the screen
  18. 18. Recognitionratherthanrecall• Should I select an item on the left or right? Or both?
  19. 19. Recognitionratherthanrecall• On the left THEN on the right.
  20. 20. Helpusersrecognize,diagnose,andrecoverfromerrors• Where is the “Access Permission Setting”? I don’t see it on the screen...
  21. 21. Collaboratingwiththeteam• Prioritize where to start
  22. 22. Discussingstructuralchanges• What do you think about this new structure for the navigation?
  23. 23. Discussingsolutionsonscreen-level• GateIn developer forum
  24. 24. Proposingdiscussionsaboutthenewdesign• GateIn developer forum
  25. 25. SpeedingupwithTwitterBootstrap
  26. 26. SpeedingupwithTwitterBootstrap• Our HTML, CSS from Twitter Bootstrap
  27. 27. SpeedingupwithTwitterBootstrap
  28. 28. • 258 lines of CSS = some customizationSpeedingupwithTwitterBootstrap
  29. 29. ThecurrentUserInterface
  30. 30. Spaces
  31. 31. Mobileredirects
  32. 32. MobileDemo
  33. 33. MobileDemo
  34. 34. CSSforResponsiveWebDesign• Fluid widths and distances in percentage{%}• Fixed widths and distances in relative unit{em}• Break points
  35. 35. Thank you!