Mobile Software-Teknologier (MST) Interaktionsdesign og usability-evaluering Mikael B. Skov

1. Mobile Software-Teknologier (MST) Interaktionsdesign og usability-evaluering Mikael B. Skov Mikael B. Skov Jan StageHCI Lab, Department of Computer ScienceAalborg University, Denmark The Future Home (http://www.dbnet.dk)

2. Mobile Software-Teknologier (MST)

3. Overblik over kurset • Fredag d. 29. februar 2008: Interaktionsdesign af mobile teknologier • Forelæsninger + øvelser • Torsdag d. 6. marts 2008: Usability-evaluering af mobile teknologier • Forelæsninger + øvelser

4. Program • 09:00 Interaktionsdesign af mobile teknologier • Introduktion til mobile teknologier og mobilt brug • Mobile produkter til mennesker • Innovation • 09:20 Introduktion til øvelse 1: Sketching • 09:30 Øvelse 1 • 10:15 Introduktion til øvelse 2: Mock-ups • 10:30 Øvelse 2 • 12.00 Frokost • 12:45 Præsentation og demonstration af mock-ups • 13:15 Introduktion til øvelse 3: Prototyper • 13:30 Øvelse 3 • Næste gang: 09:00: Præsentation of prototyper

5. Litteratur • Matt Jones and Gary Marsden. Mobile Interaction Design. Wiley. ISBN: 0470090898. (Findes i boghandelen) • Intensivt: Kapitel 1 (afsnit 1.2), kapitel 2 (afsnit 2.2-2.4), kapitel 3 (afsnit 3.2-3.4), kapitel 5 (afsnit 5.3-5.5) • Ekstensivt: Kapitel 1 (1.1, 1.3-1.5), kapitel 2 (afsnit 2.1, 2.5), kapitel 3 (afsnit 3.1), kapitel 4 (afsnit 4.1-4.8) og kapitel 5 (afsnit 5.1-5.2)

6. Mobile teknologier: Hvad er det?

7. Mobile teknologier: Swiss-army knife eller apparat

9. Innovation • Innovation er vigtigt for udviklingen indenfor mobile software teknologier - ”Uden innovation ville organisationer og økonomier stagnere” • Nokia investerede f.eks. 13% af deres nettosalg til forskning og udvikling (2003) • Jones og Marsden foreslår forskellige måder for at opnå innovation: • Technology-centered approaches • Transferring from the desktop • Building on past mobile succes • Drama

10. Transferring from the desktop: Instant Messaging

11. Vi skal igennem dette, cirka… Creating design sketches Developing design ideas Creating a mock-up Producing a paper prototype Presenting design ideas Group discussions

12. The Interactive Shopping Trolley • I skal forestille jer, at Dansk Supermarked eller Coop har bestilt jer til at designe deres ny innovative og interaktive indkøbsvogn. Den nye indkøbsvogn skal understøtte det at handle dagligvarer i et supermarked, men ellers er der frie muligheder for at udfolde jer.

13. Program • 09:00 Interaktionsdesign af mobile teknologier • Introduktion til mobile teknologier og mobilt brug • Mobile produkter til mennesker • Innovation • 09:20 Introduktion til øvelse 1: Sketching • 09:30 Øvelse 1 • 10:15 Introduktion til øvelse 2: Mock-ups • 10:30 Øvelse 2 • 12.00 Frokost • 12:45 Præsentation og demonstration af mock-ups • 13:15 Introduktion til øvelse 3: Prototyper • 13:30 Øvelse 3 • Næste gang: 09:00: Præsentation of prototyper

14. Øvelse : design sketching • What is design sketching? • A technique from architecture and industrial design • Useful for early conceptual design • Usually created using pen and paper • Relatively new in relation to interface design • Sketches are NOT prototypes

15. Sketching indenfor arkitektur • (Fra “Utzon og den nye tradition”, 2004)

16. Karakteristika ved sketching • Quick • Timely • Inexpensive • Plentiful • Clear vocabulary • Distinct Gesture • Constrained resolution • Appropriate degree of refinement • Ambiguity • Suggest & explore rather than confirm Buxton B. (2004) What Sketches (and Prototypes) Are and Are Not. http://www.billbuxton.com/

17. Sketches vs. prototyper Buxton B. (2004) What Sketches (and Prototypes) Are and Are Not. http://www.billbuxton.com/

18. Øvelse 1 – sketching(9:30-10:15) • As a starting point, we want you to briefly recap on the idea for the interactive shopping trolley. We want you to note down some of your experiences with shopping challenges or characteristics. You should do this individually and spend 5 minutes in this activity. Afterwards present and discuss these challenges in the group. We would then like you to: • 1. Produce a series of design sketches for your design idea showing different aspects of how you imagine it should look, how it should work, what it does, and how it is used. A good way to start is to spend 10 minutes on producing a few of design sketches each, and then present them to the others. • 2. Reflect on the design sketches and discuss which ideas you would like to move forward with. Then produce a few new sketches that reflect your combined ideas. Your new sketches should contain a few statements about the core idea of the envisioned design. • You will not be asked to present the sketches to the other team after this exercise, but you will need the sketches for the next exercise.

19. Program • 09:00 Interaktionsdesign af mobile teknologier • Introduktion til mobile teknologier og mobilt brug • Mobile produkter til mennesker • Innovation • 09:20 Introduktion til øvelse 1: Sketching • 09:30 Øvelse 1 • 10:15 Introduktion til øvelse 2: Mock-ups • 10:30 Øvelse 2 • 12.00 Frokost • 12:45 Præsentation og demonstration af mock-ups • 13:15 Introduktion til øvelse 3: Prototyper • 13:30 Øvelse 3 • Næste gang: 09:00: Præsentation of prototyper

20. (2) mocking-it up • Working with non-functional real-size representations of the system being designed • Mock-ups are often • Physical • Paper-based • Combined with partially functional elements • Useful for concept development • Brings the designer beyond current technical limitations

21. Example case: the utopia project • Pre desktop-publishing development of computer-based tools for the publishing industry Pictures from Ehn P. and Kyng M. (1991) Cardboard Computers: Mocking-it-up or Hands-on the Future. In Greenbaum J. and Kyng M. (eds.) (1991) Design at Work. Hillsdale, Lawrence Erlbaum Associates, pp. 169-195

22. Physical full scale mock-ups • Industrial design mock-up • Mock-up or real system? Advertisement for the TIPS page make up system based on the Utopia specifications. When the ad was published no “real” system existed

23. Playing with physical input devices • A sample of different key pad and “mice-like” input devices mock-ups produced in the Utopia project (an attempt not to get stuck in the standard interface).

24. Øvelse 2 - mocking it up(10:30-12:00) • Now that you have produced a series of design sketches, we would like you to work with the form factor of your design and produce a physical mockup of your shopping trolley. • As a guideline, the mockup should reflect: • 1. The different components of the system • 2. What the system and its components physically look like • 3. What the system and each of its components do • 4. How the user physically interacts with the system • 5. How the system and the user interact with their environment • The mock-up should be made from cardboard, paper, foam etc. mounted on the shopping trolley from Føtex. The mockup does not have to be limited to the actual trolley. You can also mock-up elements of the supermarket for envisioning how the trolley is used. • You will be asked to present the mock-up to the other teams. Each team has 10 minutes for their presentation including time for questions and discussion.

25. Program • 09:00 Interaktionsdesign af mobile teknologier • Introduktion til mobile teknologier og mobilt brug • Mobile produkter til mennesker • Innovation • 09:20 Introduktion til øvelse 1: Sketching • 09:30 Øvelse 1 • 10:15 Introduktion til øvelse 2: Mock-ups • 10:30 Øvelse 2 • 12.00 Frokost • 12:45 Præsentation og demonstration af mock-ups • 13:15 Introduktion til øvelse 3: Prototyper • 13:30 Øvelse 3 • Næste gang: 09:00: Præsentation of prototyper

26. (3) paper prototyping • What is paper prototyping? • A method of brainstorming, designing, testing and communicating user interfaces • “Paper prototyping is a variation of usability testing where representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person “playing computer”, who doesn’t explain how the interface is intended to work” (Snyder 2003) • Example process • Determine some typical tasks that you expect the user to do • Make screen shots and/or hand-sketched versions of all the windows, menus, dialog boxes, pages, data, pop-up messages, and so on that are needed to perform those tasks • Conduct a usability test: bring in a representative person and ask this user to attempt the tasks by interacting with the prototype • Make modifications to the prototype

27. Example paper prototype

28. Making a paper prototype • Basic materials

29. Backgrounds

30. Removable tape and transparencies

31. Small screen interfaces

32. Interface widgets • With a little imagination, you can simulate almost anything Radio buttons and checkboxes Cursors Tabbed interface boxes Scrolling

33. Drop-down lists

34. Expandable lists

35. Øvelse 3 - paper prototyping(13:30-) • Now that you have produced a physical mockup, we would like you to go into more detail with its interface design and produce a simple hand-drawn paper prototype that extends the scope of your mock-up. Using the paper prototype you should be able to step through complete scenarios of use covering the most central envisioned functionality of your system. • As a guideline, the paper prototype should include: • 1. The design of the most central screens of the system (if any…) • 2. The design of central elements on the screens (buttons, widgets etc.) • 3. Basic navigational structure between screens • 4. Intended user interaction • The paper prototype should be integrated with the physical mock-up so that it is capable of simulating the operation of the whole system. • You will be asked to present your paper prototype to the other team at 14.40 using one of their members as “user”. Each team has 10 minutes for their presentation including time for questions and discussion.