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/