Interaction Design

1. Interaction Design Christine Robson September 25, 2007

2. Today • User interface consistency • Buttons and widgets • Computer Interaction • Mouse, Keyboard, Stylus, Touchscreen … • Speech, NLP… • Human-Human Interaction • Social effects, tagging • Virtual worlds

3. Review: Fitts’s Law • Time T to move your hand to a target of size S (measured as width) at distance D away is T = RT + MT = a + b log (D/S +1) • Depends only on index of difficulty log (D/S +1) • Hand movement based on a series of micro-corrections D start S

4. Don’t Make Me Think • Make your UI obvious and self-explanatory • Everything should be self-evident • Know in one look what it is • Don’t distract and confuse your user • They have a short attention span!

8. Buttons • Clickable? • Not Clickable? • How many milliseconds will your users waste wondering?

9. Soft vs. Hard Buttons • Hard Buttons • “real” buttons • Generally have a single action • Soft Buttons • Programmable buttons or options • Can appear and disappear in different modes

10. Soft and Hard Buttons

11. SoftButtons • What’s wrong with this picture? Rows of identical buttons… with different meanings in different modes

12. Button pitfalls • Maintain consistency • Don’t make your users think!

13. User Interface Consistency • The Principle of Least Surprise • Similar things should look and act similar • Different things should look different • Other properties • Size, location, color, wording, ordering • Command/argument order • Pre-fix vs. post-fix • Follow platform standards

14. Kinds of Consistency • Internal consistency within your application • External consistency with other applications on the same platform • Metaphorical consistency with your interface metaphor or similar real-world objects

15. Case Against Consistency • Inconsistency is appropriate when context and task demand it • Arrow keys • But if all else is (almost) equal, consistency wins • QWERTY vs Dvorak • OK/Cancel button order

16. Widgets • a widget is an interface element that a computer user interacts with, such as a window or a text box • The term was first applied to user interface elements during Project Athena in the 1980s

17. Widget Toolkits • The Microsoft Foundation Classes (MFC) for Microsoft Windows platform • Cocoa, used in Mac OS X • Swing for Java applications • Adobe Flash • XUL, based on XML (Mozilla project) • Google Web Toolkit, based on AJAX

18. Interactions

19. How do you interact with your computer?

20. Keyboard Design • modeled after the typewriter keyboard • QWERTY vs Dvorak (patented 1936)

21. Other Keyboards

22. Chorded Keyboards • A chorded keyboard • enter characters or commands formed by pressing several keys together • like playing a "chord" on a piano • entered with one hand, leaving the other hand free to do something else (such as manipulating a mouse). • Chord keyboards usually cannot be used by a "hunt and peck" method • additional training required

23. Mouse • pointing based UI • detects two-dimensional motion relative to its supporting surface • name coined at the Stanford Research Institute • Invented 1963, marketed 1981

24. Joystick • Many applications • Computer Interfaces • Video Games • Equipment Controls • Airplanes • First Computer Joysticks in the 80’s

25. Gesture Interfaces – from the mouse to the hand • Mouse Gesture • combining computer mouse movements and clicks • the software recognizes as a specific command • Gesture Devices • The Nintendo Wii • handheld pointing device • can detect acceleration in three dimensions

26. Stylus • Originally used for drawing- widely marketed to artists and architects. • Mouse proved more popular for the average computer user… or was it just better applications? • Now stylus is widely used in pocket devices

27. Stylus • Used in combinationwith touch screens • Detachable pens

28. Touchscreens • Display overlays which have the ability to display and receive information on the same screen

29. Minority Report anyone?

30. Perceptive Pixel by Jeff Han http://www.perceptivepixel.com/

31. More Touchscreens…

32. Speech Interfaces • Most effectively used to give dictation which the computer transcribes • Less effective for executing complex commands • Fast when paired with other tasks • Except auditory ones!

33. Accessibility: Speech • Accessibility software for visually impaired users • Reads the text on the screen aloud to the user very quickly • Can’t read images, only text • :)

34. Natural Language Processing (NLP) • automated generation and understanding of natural human languages • language generation systems • convert information from computer databases into normal-sounding human language • natural language understanding systems • convert samples of human language into more formal representations that are easier for computer programs to manipulate

35. Applications: NLP and miners Consider the following statement: Sam Palmisano spoke at the European Union meeting in Brussels last Thursday Proper Nouns Sam Palmisano European Union Brussels Thursday People Sam Palmisano CEO Sam Palmisano Places Brussels Regions Europe Cities Brussels Countries BelgiumUSA Can now query as a page about “CEO’s in Europe”

36. Applications of NLP:The “Web of Life”

37. NLP Challenges • What does theyrefer to? We gave the monkeys the bananas because they were hungry We gave the monkeys the bananas because they were over-ripe • same surface grammatical structure • cannot be understood properly without knowledge of monkeys and bananas • What might this mean? Time flies like an arrow • Is it a simile? Is “Time” a species of fly? A magazine?

38. Human-Human Interaction

39. Social effects • Fostering Online Community • Facebook • MySpace • LiveJournal • YouTube • Flickr • UI’s reflect the social characteristics of the community

40. Tagging as a Game • Bird Identification at Berkeley • CONE Sutro Forest • online game that allows players to control the movements of a remote camera • earn points by snapping photos of birds and identifying them http://cone.berkeley.edu/

41. Virtual worlds • Neal Stephenson's Snow Crash, published in 1992 • The term metaverse is now widely used to describe fully immersive 3D virtual spaces • An avatar is an Internet user's representation of himself or herself • three-dimensional model used in computer games and virtual worlds • two-dimensional icon (picture) used on Internet forums and other communities • or a text construct found on early systems such as MUDs

42. Second Life Metaverse • Internet-based virtual world • Launched 2003 • Developed by Linden Labs • Models the real world • Economy (Linden Dollars) • Real estate

43. WoW • MMORPG: massively multiplayer online role-playing game • Quests, Experience Points • 9 million users • Purchase things on eBay

44. Other Virtual Worlds • EverQuest • City of Heroes • Many other online games

45. Interactions Bottom-to-Top • Interact with the (computer) system • User interfaces promote usability and functionality of the system • Interact with other users • Functionality and usability of the system promotes social interactions • In the end, users are going to do what’s fun and easy

46. Nuts & Bolts

47. Are you on the class mailing list? • You would have gotten an email… • If not, join the CS160-fall07 group http://groups.google.com/group/cs160-fall07 click apply for membership

48. Social and useful design space Group Individual Pyramid scheme Zombie iLike Useless Grafitti Likeness Social networking Group Friends Useful

49. Contextual Inquiry • Examples of resources • Examples of hindrances • Examples of key design issues

50. Course schedule changes • The Poster Session moved to be part of the Project Demo session (now on Nov. 13) • Both the Project Demo session (now Nov. 13) and Final Presentations (now Dec. 4 & 6) pushed back a week -- more time to work on the group project • Moved the midterm review up to the week before the midterm • Some lectures and discussion section topics moved to accommodate the changes