1 mobile software-teknologier (mst) interaktionsdesign og usability-evaluering mikael b. skov jan...

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

Upload: hailie-lime

Post on 11-Dec-2015

214 views

Category:

Documents


0 download

TRANSCRIPT

1

Mobile Software-Teknologier (MST)Interaktionsdesign og usability-evaluering

Mikael B. Skov

Mikael B. SkovJan Stage

HCI Lab, Department of Computer ScienceAalborg University, Denmark

The Future Home (http://www.dbnet.dk)

2

Mobile Software-Teknologier (MST)

Frequency range:

RX: 935.000-944.000 MHzTX: 890.000-899.000 MHz

System: NMT900

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: 198x-19xx

Other:

Related documents:

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

8

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

Producing a paper prototype Presenting design ideas Group discussions

Creating a mock-up

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/

Sketches Prototypes

Invite Attend

Suggest Describe

Explore Refine

Question Answer

Propose Test

Provoke Resolve

Non committal Specific depiction

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 system2. What the system and its components physically look like3. What the system and each of its components do4. 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

Radio buttons and checkboxes

With a little imagination, you can simulate almost anything

Tabbed interface

boxes

Cursors

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