Mobile User Experience Design Apps benutzerzentriert und normenkonform gestalten Alexander Steffen Director Medical & Pharma 04. Juni 2013
USABILITY UND USER EXPERIENCE
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 9241-110 ERGONOMIE DER MENSCH-SYSTEM-INTERAKTION Erwartungskonformität Selbstbeschreibungsfähigkeit Lernförderlichkeit Steuerbarkeit Fehlertoleranz Individualisierbarkeit Quelle: Sony Ericsson Seite 3
Aino, Sony Nokia Morph Sony Ericsson Skins www.handy-aufkleber.de Ä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 9241-210: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
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) www.attrakdiff.de Eines der Ergebnisse einer AttrakDiff-Studie: Die Portfoliodarstellung Seite 5
UX FÜR MOBILE ANWENDUNGEN
USER CENTERED DESIGN Benutzerzentriertes Gestalten Vier Phasen Iterativer Prozess Nach DIN EN ISO 9241-210 Seite 7
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
USER CENTERED DESIGN GESTALTEN Anforderungen in Design umsetzen Methoden-Beispiele: Kooperatives Gestalten Design Rationale Standards Seite 9
USER CENTERED DESIGN ERFAHRBAR MACHEN Design und Interaktion erfahrbar machen Methoden-Beispiele: Storyboarding Prototyping Simulation Seite 10
USER CENTERED DESIGN TESTEN Design und Interaktion untersuchen und verbessern Methoden-Beispiele: Usability Testing Walkthrough Expert Review Seite 11
DIN EN 60601-1-6 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
DIN EN 62366 MEDICAL DEVICES ERGONOMIC USAGE OF MEDICAL DEVICES DIES KANN EBEN AUCH EINE APP SEIN! DIN EN 62366 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
Übersicht über die Normen
Übersicht über die Normen
UX FÜR MOBILE ANWENDUNGEN Mobile First?
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
André / pixelio.de Petra Schmidt / pixelio.de Rainer Sturm / pixelio.de Bernd Sterzl / pixelio.de Birgit Theis / pixelio.de
UX FÜR MOBILE ANWENDUNGEN STAND-ALONE MEDIUM Sozialer Kontakt, Verbundenheit Zerstreuung Sicherheit und Komfort Selbstausdruck, Herausforderung Popularität, Status Originalität, Spaß Runtastic: http://www.a1blog.net/wp-content/uploads/2012/02/runtastic3.jpg Facebook (Screenshot) Angry birds: https://itunes.apple.com/us/app/angry-birds/id343200656?mt=8# Seite 19 23. April 2013 Mobile User Experience
UX FÜR MOBILE ANWENDUNGEN MOBILER CONTEXT Klein Portabel Immer dabei Seite 20
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
UX FÜR MOBILE ANWENDUNGEN Auch mobil?
http://photoblog.nbcnews.com/_news/2010/11/08/5428995-crazy-cars?lite
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 25 4. 23. Juni April 2013 2013 medical Mobile Apps User Experience
UX FÜR MOBILE ANWENDUNGEN UID CROSS PLATFORM MANAGEMENT FRAMEWORK Design & Structure Labels & Wording Interaction & Controls Content & Features Seite 26
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
UX FÜR MOBILE ANWENDUNGEN TAGESSCHAU PC // ipad // iphone // Android Seite 28
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
UX FÜR MOBILE ANWENDUNGEN EBAY PC // ipad // iphone // Android Seite 30
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
Vielen Dank für Ihre Aufmerksamkeit
Alexander Steffen DIRECTOR MEDICAL & PHARMA Alexander.steffen@uid.com www.uid.com