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

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

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

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

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

6. 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

7. 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)

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

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

10. 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?

11. Automation Symbols Reuse ITER CODAC work

12. 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

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

14. Thank you for your attention frank.amand@cosylab.com

15. Backup Slides

16. Sketches of navigation screens