Outline • Background GUI Design • Script languages for GUIs • GUI design do’s & don’ts Brian H. Toby NIST Center for Neutron Research Why use a GUI? Portable GUIs GUI = Graphical User Inferface Windows only? • A well-designed GUI speeds learning Support for Linux & Mac offers wider – Opens software to occasional users & range of users & growth into parallel novices processing • Scaleable: offers power tools to experts Portable GUI tools 1st vs 2nd Generation GUIs • Compiled (usually C++) packages – FLTK (www.fltk.org) – wxWidgets [nee wxWindows] (www.wxwidgets.org) • Virtual Machine – Java • Script languages – Python + Tk, +wxWidgets, +GTK • GUI Builders: wiki.python.org/moin/GuiProgramming – Tcl/Tk (www.tcl.tk & comp.lang.tcl) 1 IMHO 1: GUIs do not need Pros & cons of scripting tremendous speed Pros Cons • GUIs interact with people, who cannot • Easy to code • Slower than tell the difference between a 10 µsec • Test small routines compiled code vs a 50 millisec screen paint • Extensible when • Debugging can be speed is needed non-trivial • Highly portable • Add code at run time IMHO 2: Where possible don’t Example: Calling an external incorporate code into script language, use external programs program CMPR EditCell replaced SGI GL program When more extensive computations are MANDEX: animate powder diffraction line needed, one can pass information to positions an external program, run it & read back • 1st draft: run FORTRAN program each time slider is moved results – Fast enough – More portable • Final version: modify FORTRAN output for – Easier to debug direct parsing by interpreter – More than fast enough: overhead of write, – Even faster! fork & read is usually trivial 1st vs. 2nd gen. output ICD H K L MULT 11 0 0 1 2 -- 1 17.7176 5.00000 11 0 1 1 2 -- 2 28.5434 3.12348 set dgen1(x) { 11 1 0 0 2 -- 3 29.7447 3.00000 11 1 107 . 7 1 2 9 710 7 2 22. 1-9-1 5 9 7 4 2 83.45.385383285 7 22.95.77234688317 11 -1 304 . 8 2 4 4 612 9 3 52. 8-6-7 8 5 1 35 3 73.44.186353880 2 24.15.76284383496 11 0 402 . 5 8 3 1 128 4 4 52. 2-7-5 0 6 6 46 4375..285797155 9 1 24.85.09080109603 Thoughts on GUI design 11 1 } 1 1 2 -- 7 41.6947 2.16366 11 -1 s e t1 d g e n 1 (1h ) { 2 -- 8 41.6947 2.16366 11 0 10 0 12 1 - 12 -0- 1 -91 402 . 519 4-71 02.12000 11 1 } 0 2 2 -- 10 47.2722 1.92055 11 -1 s e t0 d g e n 1 (2k ) { 2 -- 11 47.2722 1.92055 11 0 20 1 01 0 02 -0- 1 1 21 418 . 909 5 50 21.85695 11 1 } 1 2 2 -- 13 52.8140 1.73133 set dgen1(l) { 1 1 0 1 1 2 1 1 2 2 2 1 } 2 2nd Generation GUIs depend • Geographic proximity helps connect GUI on a visual short-hand components • Analogy to physical things – Push Buttons/Toggle buttons • Separators (boxes, – Notebook tabs lines) keep sets of items distinct • Last operation in bottom corner – MS: Save/Cancel – Motif: Apply/Accept/Cancel • GUIs often follow visual conventions Other Design Goals • Screen space is valuable - don’t waste it • A little bit of color helps guide the eye • Too much color is confusing GUI design: – Keep contrast levels high (have pity on the color blind) Hall of Fame & Shame • Try to use color consistently Another of my “greatest hits” CIFEDIT: not simple but easy EXPGUI 3 Multi-step processes are Multi-step processes are tough with GUIs tough with GUIs Multi-step processes are Multi-step processes are tough with GUIs tough with GUIs Multi-step processes are Multi-step processes are tough with GUIs tough with GUIs 4 I don’t know how to make this I don’t know how to make this more intuitive more intuitive I don’t know how to make this I don’t know how to make this more intuitive more intuitive I don’t know how to make this more intuitive Even worse 5 Even worse Even worse Even worse Conclusions • Script languages are great for portable GUI design • Intuitive GUIs take considerable thought • Use conventional designs where possible • Multi-step procedures are tough to make intuitive – Tutorials help • Users really like GUIs 6.