Mobile SoftwareTeknologier MST Interaktionsdesign og usabilityevaluering Mikael B

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

Mobile Software-Teknologier (MST) Frequency range: RX: 935. 000 -944. 000 MHz TX: 890. 000 -899. 000 MHz System: NMT 900 Type: Portable RF power output: 6 W Voltage: ? VDC Current drain: ? A Impedance: 50 ohms Dimensions (W*H*D): 117*175*260 mm Weight: 4. 1 Kg Manufactured: 198 x-19 xx Other: Related documents: 2

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 3

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 4

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. 14. 8) og kapitel 5 (afsnit 5. 1 -5. 2) 5

Mobile teknologier: Hvad er det? 6

Mobile teknologier: Swiss-army knife eller apparat 7

8

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 9

Transferring from the desktop: Instant Messaging 10

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

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

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 13

Ø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 14

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

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/ 16

Sketches vs. prototyper Sketches Prototypes Invite Attend Suggest Describe Explore Refine Question Answer Propose Test Provoke Resolve Non committal Specific depiction Buxton B. (2004) What Sketches (and Prototypes) Are and Are Not. http: //www. billbuxton. com/ 17

Ø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. 18

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 19

(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 20

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-itup or Hands-on the Future. In Greenbaum J. and Kyng M. (eds. ) (1991) Design at Work. Hillsdale, Lawrence Erlbaum Associates, pp. 169 -195 21

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 22

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). 23

Ø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. 2. 3. 4. 5. The different components of the system What the system and its components physically look like What the system and each of its components do How the user physically interacts with the system 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. 24

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 25

(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 26

Example paper prototype 27

Making a paper prototype Basic materials 28

Backgrounds 29

Removable tape and transparencies 30

Small screen interfaces 31

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

Drop-down lists 33

Expandable lists 34

Ø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. 2. 3. 4. The design of the most central screens of the system (if any…) The design of central elements on the screens (buttons, widgets etc. ) Basic navigational structure between screens 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. 35