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

8. AdesignprocessfortheWeb
http://www.jjg.net/elements/pdf/elements.pdf

9. Structureplan:InformationArchitecture

10. Skeletonplan

11. Surfaceplan

12. Difficulttodoallthiswithoutadesigner...
=

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?

24. Discussingsolutionsonscreen-level
• GateIn developer forum

25. Proposingdiscussionsaboutthenewdesign
• GateIn developer forum

26. SpeedingupwithTwitterBootstrap

27. SpeedingupwithTwitterBootstrap
• Our HTML, CSS from Twitter Bootstrap

28. SpeedingupwithTwitterBootstrap

29. • 258 lines of CSS = some customization
SpeedingupwithTwitterBootstrap

30. ThecurrentUserInterface

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

36. Thank you!
gcardoso@redhat.com
@cardosogabriel
www.gatein.org
https://github.com/gatein/
http://statichtml-theute.rhcloud.com/cardosogabriel/gatein-client/