Post on 12-Apr-2017
transcript
Designing a New User Interface for Open Source Projects
Gabriel Cardoso, Red Hat
GateIn
• Single Sign-On• Advanced layout support• User and group management• Mobile redirects• ...
The Open Source Website Framework
www.gatein.org
Agenda
• Inconsistencies in design• A design process• The new UI proposal for GateIn• Speeding up with Twitter Bootstrap• The Responsive Web Design
A project without a designer
➔
• Visual design • Usability
Repositório para extensões em PHP
There was some initial design here
Updated by developers inconsistencies in the UI➔
Inconsistencies in the User Interface
• Visual design • Navigation design
A design process for the Web
http://www.jjg.net/elements/pdf/elements.pdf
Structure plan: Information Architecture
Skeleton plan
Surface plan
Difficult to do all this without a designer...
=
Usability inspection
• 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
• 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.
Usability inspectionJakob Nielsen’s 10 Heuristics for User Interface Design
Consistency and standards
• Humm, a different screen. It is something else?
Consistency and standards
• Redesign: same visual / information for the same functionality
Error prevention
• Ah, only two required fields! Actually not...
Error prevention
• All required fields are displayed in the screen
Recognition rather than recall
• Should I select an item on the left or right? Or both?
Recognition rather than recall
• On the left THEN on the right.
Help users recognize, diagnose, and recover from errors
• Where is the “Access Permission Setting”? I don’t see it on the screen...
Collaborating with the team
• Prioritize where to start
Discussing structural changes
• What do you think about this new structure for the navigation?
Discussing solutions on screen-level
• GateIn developer forum
Proposing discussions about the new design
• GateIn developer forum
Speeding up with Twitter Bootstrap
Speeding up with Twitter Bootstrap
• Our HTML, CSS from Twitter Bootstrap
Speeding up with Twitter Bootstrap
• 258 lines of CSS = some customization
Speeding up with Twitter Bootstrap
The current User Interface
Spaces
Mobile redirects
Mobile Demo
Mobile Demo
CSS for Responsive Web Design
• Fluid widths and distances in percentage {%}
• Fixed widths and distances in relative unit {em}
• Break points
Thank you!
gcardoso@redhat.com@cardosogabriel
www.gatein.orghttps://github.com/gatein/
http://statichtml-theute.rhcloud.com/cardosogabriel/gatein-client/