one-by-one – WIMPish Elements

1. one-by-one – WIMPish Elements • widgets - the bits that make the GUI • what do they do, what are they good for • little things matter

2. widgets? • individual items on a GUI screen ... • checkboxes, menus, toolbars, buttons etc. • three aspects: • appearance - what they look like • interaction - how they behave • semantics - what they mean

3. appearance

4. appearance includes words • verbs - action words • quit, exit, embolden, italicise • adjectives - description/state words • bold, italic • nouns - usually as a form of description • Times New Roman, US Letter • beware of mixes … • embolden + italic !!?!

5. behaviour

6. behaviour … ctd. • some bits the toolkit does for you • but is it right? • some you control • e.g. drawing, interactions between widgets • beware timing issues • e.g. large selections under Windows apps.

7. semantics • menus, buttons, etc. • do things … … lets make it bold italic

8. YOU say what it means • semantics usually up to you • although widgets may link direct to database • even then, you say what links • think separately: • meaning first - what you want it to do • then appearance - how you do it • choose the widget for the job

9. what do you want? • actions • usually menu, buttons, or toolbar • setting state/options • usually checkbox, radio button, combi-box • but … • menus can be used to set state etc. ...

10. how many? • one of several options • radio buttons, selection menu • zero, one or more options • checkbox, multi-choice menu • free choice • offer recent/typical shortcuts • one line text boxes often terrible!

11. and more ... • number • fixed e.g. bold, italic, underline • variable e.g. font list • scolling through telephone list … • liveness • grey out inactive options • dynamic interactions • some choices dependent on others

12. design is difficult little things matter

13. a design story ... • documentation browser • numbered scroll bar • page-up/down buttons • … on screen only … • no-one used the buttons • … why?

14. a design story … ctd. • text jump scrolled • eye focus on buttons  disorientating • … can we put it right?

15. a design story ... ctd. • section head at top • scroll buttons at top • opposite section head difference? … amazing!

16. still looks wrongwhy?

17. hands across the screen? guidance • appearance • instinct • behaviour • analysis • why questions

18. let’s look at scroll bars

19. scroll bars are simple ... Scrollbars may look different, but are basically the same. They just sit on the right hand side of the screen. You press the up button and the screen goes down, you press the down button and the screen goes up... hey wait a minute

20. always on the right? • well usually … • but is it right? • or should it be left?

21. watch the birdie

22. a little history • Xerox Palo Alto Labs • hotbed of computing research • programming environments (Lisp, Smalltalk) • Xerox Star (late 1970s) - 1st office GUI • Apple • Lisa - technology from Star, but too expensive • Macintosh - birth of popular windows interfaces • Microsoft • may get there someday ...

23. Star and scrollbars • pre-Star (Smalltalk etc.) on the left • Star - scrollbar on the right • to avoid visual clutter and ease text reading • Star scrolling • page at a time - not continuous • very different model • what is right - left or right … just hands across the screen?

24. up or down • Option 1 - normal today • arrow up = screen down & scroll handle up • Option 2 • arrow up = screen up & scroll handle down which is right? no easy answer do an experiment!

25. Star team did it • Option 2 - won • so we have the wrong kind of scroll bar! • why? • two versions of Star interface • before and after experiments • Xerox passed designs to Apple … … but gave the wrong one

26. who it was Alan Dix alan@hcibook.com http://www.hcibook.com/ http://www.hiraeth.com/alan/teaching/bigui http://www.hiraeth.com/alan/topics/widget http://www.aqtive.com/