Skip to content

Latest commit

 

History

History
46 lines (27 loc) · 3.43 KB

prototype.md

File metadata and controls

46 lines (27 loc) · 3.43 KB

Prototype

Durch die intensive Auseinadersetzung mit der Problemdomäne, der Ausarbeitung von Erfordernissen, Anforderungen, weiteren Artefakten und eines NUI/GUI Konzepts konnte ein zuerst ein Low-Fidelity und dann ein High-Fidelity Prototype entwickelt werden.

Low-Fidelity

Die Screens in der Low-Fidelity wurden die Zonen aus dem Navigations-Modell in der Gruppe aufgeteilt. Die einzelnen benötigten Screens wurden als Paper-Prototyp umgesetzt, und dann via Design Critique in der Gruppe diskutiert.

Profil & Einstellungen

Paper-Prototypes für Profil & Einstellungen

Route anlegen

route anlegen

Onboarding

onboarding

Live-Ansicht

live-ansicht

High-Fidelity

Die Screens aus dem Low-Fidelity konnten dann in einer weiteren Iteration in einen HiFi-Prototyp überführt werden:

HiFi-Protoyp als Figma-Klickdummy

Style

Um ein konsequentes Aussehen des Prototyps zu erreichen wurden zunächsten die wichtigsten Design Elemente festgelegt. Um auch auf einer niedrigen Interaktionsstufe ein hohes Maß an Zugänglichkeit zu ermöglichen, wurden für den Style Prinzipien aus der WCAG1 und einer Sammlung von GUI-Elementen2, die für nicht-neurotypische Personen entwickelt wurde, beachtet.

  • Schrift: Lesbarkeit für Menschen mit Dyslexia (Zielgruppe) muss gegeben sein. Da durch die User Test festgestellt wurde, dass die verwendete Schriftart nicht geeignet ist, wird im neuen Prototypen Atkinson Hyperlegibal verwendet. -> Bessere Lesbarkeit, da sich alle Zeichen voneinander unterscheiden.
  • Grauwerte: Kontrast-Werte von mind. AA (WCAG 2.0) -> bestehende Grauwerte (IBM‘s Carbon Design System)

  • Farbe: es soll verschiedene Farbschema geben, die in den persönlichen Einstellugnen geändert werden können

  • Buttons wurden mit einem Schlagschatten versehen, um besser zu verdeutlichen, dass sie klickbar sind

Footnotes

  1. Web Content Accessibility Guidelines (WCAG) 2: https://www.w3.org/WAI/standards-guidelines/wcag/

  2. Neurodiversity Design System (NDS): https://www.neurodiversity.design