ESS Control System Applications GUI Development Style Guide Introduction to the document Frank Amand Cosylab

Purpose of the document Avoid needless divergence in GUIs, create consistent look & feel Speed-up development

Scope of the document Design of Control Screens Complementary to overall ESS Style

Basic Panel Sizes: Grid A grid is good design starting point The 960px grid is flexible and proven

Basic Panel Sizes: Default, Medium, Small Flexible for GUI needs Build a large full- screen app with blocks

Colors GUI Blues & Greys in sync with corporate style Use Signal Colors in full saturation & brightness in the right dose Corporate Communications Manual ESS GUI Blue

The Titillium font: Open Source, Italian design, delivers a distinct corporate style… …which for maximum readability we reserve for app titles. GUI body is in contemporary (2010, humanist sans-serif) Open Sans “optimized for legibility across print, web, and mobile interfaces” (wiki)

Device Control Screen Design Pattern Start with ample white space Iterations tend to add elements, not remove

Diagnostics Screen Design Pattern Build around the right visualization of your data

On Navigation One Start, One Click Drilldown, Visual Cues 7 Levels deep? 7 7 > 800k Jump halfway in? Shortcuts? The Machine is large enough for a predicting search?

Automation Symbols Reuse ITER CODAC work

Next step are Usability Guidelines Usability A particular GUI becomes highly useable when it is designed with a specific user, his goals and tasks in mind. The result of a creative process that cannot come out of a document. We can describe process, provide principles and best practices. Usability* Easy to learn Efficient to use Easy to remember Few errors Subjectively pleasing *Jacob Nielsen

Human Machine Interaction Design Illustration The result of iterations with product owner, medical experts & actual users Where operator error can be fatal

Thank you for your attention

Backup Slides

Sketches of navigation screens