INTERACTION DESIGN 2017 PROTOTYPING - LMU München · Svena Dittrich (svena.dittrichcampus.lmu.de)...

15
INTERACTION DESIGN 2017 PROTOTYPING

Transcript of INTERACTION DESIGN 2017 PROTOTYPING - LMU München · Svena Dittrich (svena.dittrichcampus.lmu.de)...

Page 1: INTERACTION DESIGN 2017 PROTOTYPING - LMU München · Svena Dittrich (svena.dittrichcampus.lmu.de) IXD 2017 GETTING STARTED Goals of Today: 1. View wireframes 2. Get to know prototyping

Svenja Dittrich ([email protected])

IXD 2017

INTERACTION DESIGN 2017

PROTOTYPING

Page 2: INTERACTION DESIGN 2017 PROTOTYPING - LMU München · Svena Dittrich (svena.dittrichcampus.lmu.de) IXD 2017 GETTING STARTED Goals of Today: 1. View wireframes 2. Get to know prototyping

Svenja Dittrich ([email protected])

IXD 2017

GETTING STARTED

Goals of Today: 1. View wireframes

2. Get to know prototyping techniques

3. Start with paper prototyping

Page 3: INTERACTION DESIGN 2017 PROTOTYPING - LMU München · Svena Dittrich (svena.dittrichcampus.lmu.de) IXD 2017 GETTING STARTED Goals of Today: 1. View wireframes 2. Get to know prototyping

Svenja Dittrich ([email protected])

IXD 2017

A App for „Opa“

Wireframe

The wireframe shows a paper prototype ,which reminds or assists elderly people to take their

medicine in time on daily basis. It should be easily understood by the users and clearly illustrate

what it does. Just within the thick boxes show where the user is allocated.

Page 4: INTERACTION DESIGN 2017 PROTOTYPING - LMU München · Svena Dittrich (svena.dittrichcampus.lmu.de) IXD 2017 GETTING STARTED Goals of Today: 1. View wireframes 2. Get to know prototyping

Svenja Dittrich ([email protected])

IXD 2017

Thema: SchmatzsucheName: Nini Nguyen

Use Case: Log-In in der App1. Öffnen der App2. bereits registriert: auf „einloggen“ klicken3. a. Eingabe von Emailadresse und Passwort: „einloggen“ klicken

b. „mit QR-Code anmelden“4. a. Erfolgreiche Anmeldung -> Home-Screen

Page 5: INTERACTION DESIGN 2017 PROTOTYPING - LMU München · Svena Dittrich (svena.dittrichcampus.lmu.de) IXD 2017 GETTING STARTED Goals of Today: 1. View wireframes 2. Get to know prototyping

Svenja Dittrich ([email protected])

IXD 2017Mockup (1) Tagesablauf Medikamenteneinnahme  

Schedule: 

- Übersicht über die Einnahme-Zeiten und wichtigen Informationen zur Einnahme (z.b. vor oder nach dem Essen, Notizen des Nutzers..) - der Nutzer bekommt über ein Dialogfenster eine Erinnerung zur nächsten Einnahme - der Nutzer kann hier schnell ein neues Medikament anlegen und den Alarm für einen gewählten Zeitraum stumm schalten  

Termine: 

Übersicht über zukünftige (Arzt)termine 

 

Punkte in der Navigation: 

- Optionen (Klingeltöne, Schriftgrößen..) - Medikamente - Notruf - .. 

  Mögliche Erweiterungen: 

- Jede Einnahme muss vom Nutzer bestätigt werden (die App signalisiert außerdem, wenn ein Medikament zu spät eingenommen oder vergessen wurde).  (optional: automatische Nachricht an Bezugsperson, wenn wichtiges Medikament nicht bestätigt wurde)  - Die App könnte spezifisch für SmartWatches erstellt werden → hätte den Vorteil, dass sie immer in der Nähe des Nutzers ist  - Die App erstellt eine History-Datei, die per Mail verschickt werden kann  - Die App bietet eine schnelle und einfache Möglichkeit einen medizinischen Notruf abzusetzen und Rettungskräfte zu alamieren. Dabei werden Standortdaten sowie ein gleichzeitig aufgenommenes Foto versendet, das die Situation beschreiben kann. 

Page 6: INTERACTION DESIGN 2017 PROTOTYPING - LMU München · Svena Dittrich (svena.dittrichcampus.lmu.de) IXD 2017 GETTING STARTED Goals of Today: 1. View wireframes 2. Get to know prototyping

Svenja Dittrich ([email protected])

IXD 2017

Scanned by CamScanner

Page 7: INTERACTION DESIGN 2017 PROTOTYPING - LMU München · Svena Dittrich (svena.dittrichcampus.lmu.de) IXD 2017 GETTING STARTED Goals of Today: 1. View wireframes 2. Get to know prototyping

Svenja Dittrich ([email protected])

IXD 2017

Page 8: INTERACTION DESIGN 2017 PROTOTYPING - LMU München · Svena Dittrich (svena.dittrichcampus.lmu.de) IXD 2017 GETTING STARTED Goals of Today: 1. View wireframes 2. Get to know prototyping

Svenja Dittrich ([email protected])

IXD 2017

PAPER PROTOTYPING – POP

Page 9: INTERACTION DESIGN 2017 PROTOTYPING - LMU München · Svena Dittrich (svena.dittrichcampus.lmu.de) IXD 2017 GETTING STARTED Goals of Today: 1. View wireframes 2. Get to know prototyping

Svenja Dittrich ([email protected])

IXD 2017

PAPER PROTOTYPING – POP

- choose from a wide range of interface modules

- import your sketched wireframes

- turn sketches into clickable prototypes

Page 10: INTERACTION DESIGN 2017 PROTOTYPING - LMU München · Svena Dittrich (svena.dittrichcampus.lmu.de) IXD 2017 GETTING STARTED Goals of Today: 1. View wireframes 2. Get to know prototyping

Svenja Dittrich ([email protected])

IXD 2017

PAPER PROTOTYPING – BALSAMIQ

Page 11: INTERACTION DESIGN 2017 PROTOTYPING - LMU München · Svena Dittrich (svena.dittrichcampus.lmu.de) IXD 2017 GETTING STARTED Goals of Today: 1. View wireframes 2. Get to know prototyping

Svenja Dittrich ([email protected])

IXD 2017

PAPER PROTOTYPING – BALSAMIQ

- choose from a wide range of interface modules

- create fast low fidelity clickable prototypes

Page 12: INTERACTION DESIGN 2017 PROTOTYPING - LMU München · Svena Dittrich (svena.dittrichcampus.lmu.de) IXD 2017 GETTING STARTED Goals of Today: 1. View wireframes 2. Get to know prototyping

Svenja Dittrich ([email protected])

IXD 2017

POP VS. BALSAMIQPOP

+ Use your own sketches+ Fast and easy prototyping

– Only available on iTunes– Limited UI elements

BALSAMIQ

+ Create new mockups directly from the “Create New” menu+ Simply click to edit wireframes+ Sketch-based wireframes allow designers to focus on functionality + 30 days free trial

– Limited functionality– No options for creating interactive prototypes– Limited UI elements

Page 13: INTERACTION DESIGN 2017 PROTOTYPING - LMU München · Svena Dittrich (svena.dittrichcampus.lmu.de) IXD 2017 GETTING STARTED Goals of Today: 1. View wireframes 2. Get to know prototyping

Svenja Dittrich ([email protected])

IXD 2017

MORE TOOLSLow Fidelity

– POP– Balsamiq

High Fidelity

– InVision– Marvel – Justinmind– Framer– Adobe XD

Average Fidelity

– Sketch– Proto.io– Pixate– axure– Mockplus

Page 14: INTERACTION DESIGN 2017 PROTOTYPING - LMU München · Svena Dittrich (svena.dittrichcampus.lmu.de) IXD 2017 GETTING STARTED Goals of Today: 1. View wireframes 2. Get to know prototyping

Svenja Dittrich ([email protected])

IXD 2017

MORE TOOLS

Page 15: INTERACTION DESIGN 2017 PROTOTYPING - LMU München · Svena Dittrich (svena.dittrichcampus.lmu.de) IXD 2017 GETTING STARTED Goals of Today: 1. View wireframes 2. Get to know prototyping

Svenja Dittrich ([email protected])

IXD 2017

TODO

TASK TODAY:

Find you group, sit together and start paper protoyping the ideas of your application

HOMEWORK:

Finish your paper protoypes with at least one usecase per student (group of 4 = 4 usecases)