Designing a new user interface for open source projects
1 like1,040 views
The document discusses redesigning the user interface for the open source GateIn project. It identifies inconsistencies in the current design and proposes using a design process involving information architecture, skeleton and surface plans. The redesign would use Twitter Bootstrap for speed and responsive design techniques. It also suggests prioritizing areas to focus on like structure, navigation and screen-level solutions. The goal is to improve the consistency, error prevention, recognition over recall and help users diagnose problems in the interface.
Designing a new user interface for open source projects
- 2. Designing a New User Interface for Open Source Projects Gabriel Cardoso, Red Hat
- 3. GateIn • Single Sign-On • Advanced layout support • User and group management • Mobile redirects • ... The Open Source Website Framework www.gatein.org
- 4. Agenda • Inconsistencies in design • A design process • The new UI proposal for GateIn • Speeding up with Twitter Bootstrap • The Responsive Web Design
- 5. Aprojectwithoutadesigner ➔ • Visual design • Usability
- 6. Therewassomeinitialdesignhere Updated by developers inconsistencies in the UI➔
- 7. InconsistenciesintheUserInterface • Visual design • Navigation design
- 10. Skeletonplan
- 11. Surfaceplan
- 13. Usabilityinspection • Visibility of system status: keep users informed about what 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” in case of mistake; • Consistency and standards: use the same elements to similar actions; • Error prevention: better than good error messages; Jakob Nielsen’s 10 Heuristics for User Interface Design
- 14. • Recognition rather than recall: minimize the user’s memory load; • Flexibility and efficiency of use: accelerators for the expert user; • Aesthetic and minimalist design: hide irrelevant information; • Help users recognize, diagnose, and recover from errors: good error messages; • Help and documentation. Usabilityinspection Jakob Nielsen’s 10 Heuristics for User Interface Design
- 15. Consistencyandstandards • Humm, a different screen. It is something else?
- 16. Consistencyandstandards • Redesign: same visual / information for the same functionality
- 17. Errorprevention • Ah, only two required fields! Actually not...
- 18. Errorprevention • All required fields are displayed in the screen
- 19. Recognitionratherthanrecall • Should I select an item on the left or right? Or both?
- 20. Recognitionratherthanrecall • On the left THEN on the right.
- 21. Helpusersrecognize,diagnose,andrecoverfrom errors • Where is the “Access Permission Setting”? I don’t see it on the screen...
- 22. Collaboratingwiththeteam • Prioritize where to start
- 23. Discussingstructuralchanges • What do you think about this new structure for the navigation?
- 27. SpeedingupwithTwitterBootstrap • Our HTML, CSS from Twitter Bootstrap
- 29. • 258 lines of CSS = some customization SpeedingupwithTwitterBootstrap
- 31. Spaces
- 32. Mobileredirects
- 33. MobileDemo
- 34. MobileDemo
- 35. CSSforResponsiveWebDesign • Fluid widths and distances in percentage {%} • Fixed widths and distances in relative unit {em} • Break points