interactivity

1. interactivity easy to focus on look what about feel?

2. Speech–driven interfaces • rapidly improving … … but still inaccurate • how to have robust dialogue? … interaction of course! • e.g. airline reservation: reliable “yes” and “no”

3. Look and … feel • WIMP systems have the same elements:windows, icons., menus, pointers, buttons, etc. • but different window systems … behave differently • e.g. MacOS vs Windows menus • Interactivity is also crucial in determining the ‘feel’ of a WIMP environment. • appearance + behaviour = look and feel

4. understanding and choosing widgets widgets - bits that make the GUI what do they do what are they good for

5. one-by-one – WIMP elements • widgets - bits that make the GUI • what do they do • what are they good for

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

7. appearance

8. 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 !!?!

9. behaviour Move mouse over button – highlights Move mouse off target withbutton still down – highlight removed Release mouse – nothing happens

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

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

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

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

14. 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!

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

16. Initiative • who has the initiative? old question–answer – computer WIMP interface – user • modal dialog boxes • come and won’t go away! • good for errors, essential steps • but use with care • When a major fault has been detected, or for certain kinds of instructional software

17. Interactivity is also critical in dealing with errors. . If users can detect errors then they can correct them can’t always avoid errors … … but we can put them right make it easy to detect errors … then the user can repair them Error and repair

18. Context Interaction affected by social and organizational context This interaction does not occur within a vacuum. We have already noted some of the physical factors in the environment that can directly affect the quality of the interaction

19. other people • desire to impress, competition, fear of failure • The presence of other people in a work environment affects the performance of the worker in any task • motivation • In order to perform well, users must be motivated. • fear, allegiance, ambition and self-satisfaction. • inadequate systems • cause frustration and lack of motivation

20. Experience, engagement and fun designing experience physical engagement managing value

21. Experience? • home, entertainment, shopping • not enough that people can use a system • Shopping is as much about going to theshops, feeling the clothes, being with friends • they must want to use it! • You can go shopping and never intend to spend money. • Shopping is not about an efficient financial transaction, it is an experience.

22. Designing experience • real crackers • cheap and cheerful! • bad joke, plastic toy, paper hat • pull and bang

23. Designing experience • virtual crackers • cheap and cheerful • bad joke, web toy, cut-out mask • click and bang

24. Designing experience • virtual crackers • cheap and cheerful • bad joke, web toy, cut-out mask • click and bang

25. To: wxv From: .. fill in web form receive email closedcracker page joke links open message watches progress recipient clicks cracker opens ... very slowly sender sender recipient opencracker page web toy mask how crackers work

26. Physical design • many constraints: • ergonomic – minimum button size • physical – high-voltage switches are big • legal and safety – high cooker controls • context and environment – easy to clean • aesthetic – must look good • economic – … and not cost too much!

27. Design trade-offs constraints are contradictory … need trade-offs within categories: • e.g. safety – cooker controls • front panel – safer for adult • rear panel – safer for child between categories • e.g. ergonomics vs. physical – MiniDisc remote • ergonomics – controls need to be bigger • physical – no room! • solution – multifunction controls & reduced functionality

28. people use somethingONLY IF it has perceived valueAND value exceeds cost BUT NOTE exceptions (e.g. habit) value NOT necessarily personal gain or money Managing value

29. Weighing up value value • helps me get my work done • fun • good for others cost • download time • money £, $, € • learning effort

30. Discounted future • in economics Net Present Value: • discount by (1+rate)years to wait • in life people heavily discount • future value and future cost • hence resistance to learning • need low barriersand high perceived present value

31. example – HCI book search • value for people who have the book helps you to look up things • chapter and page number • value for those who don’t … sort of online mini-encyclopaedia • full paragraph of context • … but also says “buy me”!! … but also says “buy me”!!

32. Value and organisational design • coercion • tell people what to do! • value = keep your job • enculturation • explain corporate values • establish support (e.g share options) • emergence • design process so thatindividuals value  organisational value

33. General lesson … if you want someone to do something … • make it easy for them! • understand their values

34. Thank You Next week interaction design basics