uidC

Andreas Meier

User Interface und Interaction Design

01Warum Design?

Usability

ISO 9241-11
Anforderungen an die Gebrauchstauglichkeit

  • Effektivität
  • Effizienz
  • Zufriedenheit

ISO 9241-110
Grundsätze der Dialoggestaltung

  • Aufgabenangemessenheit
  • Selbstbeschreibungsfähigkeit
  • Lernförderlichkeit
  • Steuerbarkeit
  • Erwartungskonformität
  • Individualisierbarkeit
  • Fehlertoleranz

Erkenntnisse

In der Informatik bildet das Design die Verbindung zwischen Mensch und Maschine. Es soll dem Benutzer Orientierung geben und ihm helfen, sich innerhalb eines Produktes zurechtzufinden.

Ein gutes Design erlaubt ein positives Benutzererlebnis und trägt wesentlich dazu bei, das man gerne mit einem Produkt arbeitet. Es schafft Vertrauen und vermittelt Seriosität.

Konsistenz in einem Design stiftet Identität. Es schafft Verbindungen zu einer bestimmten Marke oder kann gewisse Eigenschaften und Werte vermitteln.

Nicht zuletzt geht es im Design auch um Ästhetik. Um Schönheit in ihrer ganzen Vielfalt und mit all ihren Facetten.

02 03 04Multiscreen und Bildsprache

Swiss Abflüge fürs Web

Screen von Swiss Abfluginformationen

Swiss Abflüge für Info-Screen

Swiss Abfluginformationen für Info-Screen

Swiss Abflüge Web Redesign

Bold | Innovative | Hip

Screen von Swiss Abfluginformationen Redesign

05Designprozesse

Branded Interachtion

Designprozesse

Design Thinking

Designprozesse

Lean UX

Designprozesse

Usability Engineering

Designprozesse

06Notfall-App für das Kantonsspital Aarau

Briefing durch das KSA

  • Problem:
    • Viele Leute haben keinen Hausarzt mehr und kommen dafür in den Notfall.
    • Spitzenzeiten um 11:00 und 16:00 Uhr, dazwischen unterbelastung
  • Ziel:
    • weniger Überlastung für Personal
    • kleinere Wartezeiten für Patienten
    • grosse Zufriedenheit
  • dies soll erreicht werden durch
    • konstantere Auslastung, dadurch
    • den Leuten kommunizieren, was sie tun sollen
  • Priorisierung der Fälle
    • In der Notfallstation ist eine sog. Manchester-Triage vorhanden: eine Software, die bei der Priorisierung der Fälle hilft.
    • Triage erfolgt mittels 2-3 sog. Redflag-Fragen.
    • Lieber einen Patienten zu viel bestellen als zu viele Fragen stellen.
  • Das soll vermittelt werden:
    • wir sind fachlich kompetent
    • wir nehmen Sie ernst
    • Sie bekommen eine zeitnahe Antwort

Erste Ideen

  • Auslastung und Wartezeiten sind online ersichtlich
  • Vordiagnose und Priorisierung mittels 2-3 Fragen
  • Termin vereinbaren
  • notwendige Angaben im Voraus übermitteln
  • Hilfe für erste Sofortmassnahmen (2. Priorität)

07-1Personas

Allen Personas ist gemeinsam, dass sie keinen Hausarzt haben und deshalb bei gesundheitlichen Problemen in den Notfall gehen.

07-2Szenario

Kontextszenario

Kontextszenario Aufgabenerfordernisse
Consuela hat starke Rückenschmerzen, die sie am Arbeiten hindern. Sie informiert sich über Sprechstunden im Spital.
  • Sie weiss, wo sie hin muss.
  • Sie weiss, wann sie dort hin kann.

Nutzerszenatio

Benutzeraktion Aktion des Systems
1

Ausgangssituation: Der Benutzer hat die App heruntergeladen und befindet sich auf dem Homescreen. Er hat folgende Optionen:

  • Vordiagnose starten
  • Situationsplan anzeigen
2 Der Benutzer betätigt den Button „Vordiagnose“ Die App führt den Benutzer durch drei einfache Fragen, die er jeweils über eine Multiple Choice Auswahl beantworten kann.
3 Der Benutzer beantwortet die Fragen.
Über den „Weiter“-Button gelangt er jeweils zur nächsten Frage.
Zu jedem Zeitpunkt besteht die Möglichkeit, die Befragung abzubrechen und zum Homescreen zurückzukehren.
Sind alle Fragen beantwortet, wertet die App die Antworten aus und liefert dem Benutzer eine Empfehlung für das weitere Vorgehen.

mögliche Aktionen:
  • basierend auf seiner Vordiagnose ggf. empfohlene Sofortmassnahmen anzeigen lassen
  • einen Termin vereinbaren
  • zurück zum Homescreen
4 Der Benutzer betätigt den Butten für die Terminvereinbarung. Die App gibt dem Benutzer die Möglichkeit zu wählen, bei welchem der zwei Standorte er einen Termin vereinbaren möchte. Es werden dem Benutzer jeweils drei Terminvorschläge unterbreitet, aus denen er auswählen kann.

mögliche Aktionen:
  • Terminauswahl bestätigen
  • abbrechen und zum Homescreen zurückkehren
  • direkt zu den empfohlenen Sofortmassnahmen
5 Der Benutzer wählt seinen gewünschten Standort und einen Termin an und bestätigt mit dem „OK“-Button. Die App bestätigt dem Benutzer, dass er den Termin gebucht hat. Sie gibt ihm eine Ticket-Nummer sowie einige Bemerkungen zu den Bedingungen.

mögliche Aktionen:
  • zur Eingabe der persönliche Angaben
  • zum Homescreen zurückkehren
  • direkt zu den empfohlenen Sofortmassnahmen
6 Der Benutzer betätigt den Button für die Übermittlung der persönlichen Angaben. Es erscheint ein Formular, wo der Benutzer die benötigten Angaben eingeben kann.

mögliche Aktionen:
  • persönliche Angaben übermitteln
  • zum Homescreen zurückkehren
  • direkt zu den empfohlenen Sofortmassnahmen
7 Der Benutzer gibt die Angaben ein, die er übermitteln möchte und bestätigt mit dem „OK“-Button. Die App gibt dem Benutzer die Bestätigung, dass seine Angaben übermittelt wurden.

mögliche Aktionen:
  • zum Homescreen zurückkehren
  • direkt zu den empfohlenen Sofortmassnahmen
  • vereinbarten Termin anzeigen

08-1Informationsarchitektur

Informationsarchitektur
Start Screen
Vordiagnose Screen
Empfehlung Screen
Termin Screen
Terminbestätigung Screen
Persönliche Angaben Screen
Bestätigung persönliche Angaben Screen
Standorte Screen
Sofortmassnahmen Screen

LoFi Klickprototyp

Ausprobieren

09Zielgruppenbefragung

Die Hauptprobleme sind an folgenden Punkten:

  • Startbildschirm: Plan für Standorte wird oben bei der Angabe der Wartezeiten erwartet
  • Auf dem Situationsplan werden die Standorte verwechselt. Die Funktion mit Routenplanung und ÖV-Verbidung ist nicht klar und wird als "Bahnhof" interpretiert.
  • Unterschied zwischen Abbrechen-Icon (Kreuz) und Home-Icon (Haus) ist nicht klar.
Usability Journale

10Designentwurf Iteration 2

Moodboard

Designprozesse

Styleguide

Designprozesse

Pattern Library

Designprozesse

11Designentwurf HiFi Prototype 1

iPhone Screen 1
iPhone Screen 1
iPhone Screen 1
iPhone Screen 1
iPhone Screen 1

Feedback der Dozenten zum ersten Designentwurf

  • Text auf weissen Hintergrund setzen.
  • Ablauf und Fortschritt des ganzen Prozesses abbilden.
  • Identität schaffen, so dass man sieht, dass es sich um eine Notfallstation/-praxis handelt.

12Finaler Designentwurf

iPhone Screen 1
iPhone Screen 2
iPhone Screen 3
iPhone Screen 4
iPhone Screen 5
iPhone Screen 6
iPhone Screen 7
iPhone Screen 8

HiFi Klickprototyp

Ausprobieren

Flow Chart

Ansehen