Mobile User Experience Design Apps benutzerzentriert und normenkonform gestalten. Alexander Steffen Director Medical & Pharma 04.

Transkript

1 Mobile User Experience Design Apps benutzerzentriert und normenkonform gestalten Alexander Steffen Director Medical & Pharma 04. Juni 2013

2 USABILITY UND USER EXPERIENCE

3 USABILITY UND USER EXPERIENCE USABILITY DEFINITION Aufgabenangemessenheit Das Ausmaß, in dem ein Produkt durch bestimmte Benutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und mit Zufriedenheit zu erreichen. DIN EN ISO ERGONOMIE DER MENSCH-SYSTEM-INTERAKTION Erwartungskonformität Selbstbeschreibungsfähigkeit Lernförderlichkeit Steuerbarkeit Fehlertoleranz Individualisierbarkeit Quelle: Sony Ericsson Seite 3

4 Aino, Sony Nokia Morph Sony Ericsson Skins Ästhetik Neuartigkeit Selbstausdruck Herausforderung Wii Nintendo Definition of UX A person s perceptions and responses that result from the use or anticipated use of a product, system or service. ISO DIS :2008 Die Wahrnehmungen und Reaktionen einer Person, die aus der Benutzung oder auch angenommenen Benutzung eines Produktes, eines Systems oder einer Dienstleistung hervorgehen. Im Gegensatz zur Usability behandelt UX auch nichtinstrumentelle Aspekte der Produktnutzung. UX fördert positive Lebensaspekte: Freude, Spaß, Attraktivität, Herausforderung, Selbstausdruck. User Experience motiviert. Seite 4

5 USABILITY UND USER EXPERIENCE BEWERTUNGSTOOL ATTRAKDIFF AttrakDiff erfasst das subjektive Nutzungserlebnis Pragmatische Qualität (z. B. Bedienbarkeit) und hedonische Qualität (z. B. Neugier und Identifikation) Eines der Ergebnisse einer AttrakDiff-Studie: Die Portfoliodarstellung Seite 5

6 UX FÜR MOBILE ANWENDUNGEN

7 USER CENTERED DESIGN Benutzerzentriertes Gestalten Vier Phasen Iterativer Prozess Nach DIN EN ISO Seite 7

8 USER CENTERED DESIGN ANALYSIEREN Kontext der Nutzung verstehen Methoden-Beispiele: Kontextinterview Fokusgruppen Card Sorting Seite 8 Picture taken from: Prinziplösungen zur ergonomischen Gestaltung von Medizingeräten, U. Hölscher, W. Laurig, H. W. Müller-Arnecke

9 USER CENTERED DESIGN GESTALTEN Anforderungen in Design umsetzen Methoden-Beispiele: Kooperatives Gestalten Design Rationale Standards Seite 9

10 USER CENTERED DESIGN ERFAHRBAR MACHEN Design und Interaktion erfahrbar machen Methoden-Beispiele: Storyboarding Prototyping Simulation Seite 10

11 USER CENTERED DESIGN TESTEN Design und Interaktion untersuchen und verbessern Methoden-Beispiele: Usability Testing Walkthrough Expert Review Seite 11

12 DIN EN MEDICAL DEVICES The manufacturer is obligated to follow a process that includes Analyses Development and design Verification and validation to ensure usability and suitability. This process must be formally documented. Page 12

13 DIN EN MEDICAL DEVICES ERGONOMIC USAGE OF MEDICAL DEVICES DIES KANN EBEN AUCH EINE APP SEIN! DIN EN scope covers the following medical devices: Instrument, apparatus Device, machine Application, implant In-Vitro-reagent or calibrator Medical software, material or any similar or related product that is used to observe, prevent, diagnose, treat, or alleviate a disease or medical condition. Page 13

14 Übersicht über die Normen

15 Übersicht über die Normen

16 UX FÜR MOBILE ANWENDUNGEN Mobile First?

17 UX FÜR MOBILE ANWENDUNGEN MOBILE FIRST Luke Wroblewski Ein Design Ansatz» Fokussiert» Ausgehend von der mobilen Nutzung» Verzicht auf unwesentliche Informationen und Bedienelemente Seite 17

18 André / pixelio.de Petra Schmidt / pixelio.de Rainer Sturm / pixelio.de Bernd Sterzl / pixelio.de Birgit Theis / pixelio.de

19 UX FÜR MOBILE ANWENDUNGEN STAND-ALONE MEDIUM Sozialer Kontakt, Verbundenheit Zerstreuung Sicherheit und Komfort Selbstausdruck, Herausforderung Popularität, Status Originalität, Spaß Runtastic: Facebook (Screenshot) Angry birds: Seite April 2013 Mobile User Experience

20 UX FÜR MOBILE ANWENDUNGEN MOBILER CONTEXT Klein Portabel Immer dabei Seite 20

21 Umwelt Licht Feuchtigkeit Temperatur Identifikation RFID Fingerabdruck* Lage (absolut) * zukünftige Sensoren Eingabe Kamera Mikrofon Touch-Sensor Näherungs-Sensor GPS Höhenmesser Bewegung/Lage (relativ) Rotation Beschleunigung Magnetfeld (Kompass) Kommunikation Internet Bluetooth W-LAN GSM/UMTS/LTE NFC

22 UX FÜR MOBILE ANWENDUNGEN Auch mobil?

23

24

25 UX FÜR MOBILE ANWENDUNGEN THANKSGIVING Truthahn-Sandwich Nur die Basics : Truthahn, Salat, Preiselbeersauce Genau richtig für unterwegs Thanksgiving to go Salat und Gemüse nach eigenem Gusto Seite Juni April medical Mobile Apps User Experience

26 UX FÜR MOBILE ANWENDUNGEN UID CROSS PLATFORM MANAGEMENT FRAMEWORK Design & Structure Labels & Wording Interaction & Controls Content & Features Seite 26

27 UX FÜR MOBILE ANWENDUNGEN UID CROSS PLATFORM MANAGEMENT FRAMEWORK Unbedingt konsistent einsetzen Design & Structure Farbpalette Logos und Icons Hervorhebung von Modus und Status Labels & Wording Möglichst konsistent einsetzen Gruppierung Bilder/Bildsprache Schriftart Interaction & Controls Auf Hardware (Screen-Größe) und Kontext anpassen Hierarchie (falls nötig) Layout und Struktur Content & Features Seite 27

28 UX FÜR MOBILE ANWENDUNGEN TAGESSCHAU PC // ipad // iphone // Android Seite 28

29 UX FÜR MOBILE ANWENDUNGEN TAGESSCHAU Design & Structure Farbpalette & Farbsystem Gruppierung Artikel: Struktur & Hierarchie Multimedia: Struktur & Hierarchie Labels & Wording Labels Wording & Style Interaction & Controls Ablauf von Aufgaben Controls Content & Features PC // ipad // iphone // Android Artikel Multimedia Seite 29

30 UX FÜR MOBILE ANWENDUNGEN EBAY PC // ipad // iphone // Android Seite 30

31 UX FÜR MOBILE ANWENDUNGEN EBAY Design & Structure Farbpalette & Farbsystem Gruppierung Struktur & Hierarchie Labels & Wording Labels Wording & Style Interaction & Controls Ablauf von Aufgaben Controls Content & Features Hauptbedienfunktionen PC // ipad // iphone // Android Filter, Optionen, zusätzliche Tools Seite 31

32 Vielen Dank für Ihre Aufmerksamkeit

33 Alexander Steffen DIRECTOR MEDICAL & PHARMA