Kartenstapel

Storyboards

Paper prototypes

Flow Diagrams

1. Einfache, grobe Darstellung von Ideen (z.B. Skizzen, Wireframes).

2. Fokus auf Funktion statt auf Design oder Details.

3. Schnell und kostengünstig herstellbar.

4. Geringe Interaktivität (meist statisch oder nur einfache Abläufe).

5. Einsatz: frühe Ideenfindung, Nutzerfeedback, Teamabstimmung.

6. Vorteil: Änderungen sind leicht und schnell möglich.

Types of high fidelity prototypes

● Web – FrontPage, GoLive, Dreamweaver,…

● Screen mockups – Illustrator, Photoshop, PowerPoint,….

● Click throughs – Flash, PowerPoint, Figma, Invision, Adobe XD…

● Graphic toolkits – Java JFC/Swing, TCL/TK, Prefuse,

High-Fidelity-Prototypen

• Sehr realistische Darstellung des finalen Produkts.

• Detailreiches Design: Farben, Typografie, Grafiken und Inhalte ausgearbeitet.

• Hohe Interaktivität: Funktionen, Übergänge und Benutzerfluss sind simuliert.

• Wird oft mit spezialisierten Tools (z.B. Figma, Adobe XD) erstellt.

• Einsatz: Nutzer-Tests, Präsentationen für Stakeholder, letzte Validierungen vor der Entwicklung.

• Vorteil: Nutzererlebnis und Design können fast wie im echten Produkt getestet werden.

Medium-Fidelity-Prototypen

• Detaillierter als Low-Fidelity, aber noch nicht final.

• Klarere Struktur und Layout, oft schon am Computer erstellt.

• Teilweise interaktiv (z.B. klickbare Menüs, Navigation).

• Design und Inhalt sind teilweise ausgearbeitet, aber noch nicht perfekt.

• Einsatz: Benutzerfluss testen, Usability-Tests, frühes Nutzerfeedback.

• Vorteil: Realistischere Darstellung, trotzdem noch flexibel anpassbar.

Menschliche Wahrnehmung ist auf natürliche Umgebungen optimiert, nicht auf künstliche Systeme → UI-Design muss diese Limitierungen berücksichtigen (z.B. eingeschränktes Sichtfeld, langsame Anpassung).

Wahrnehmung muss schnell UND genau sein – beides gleichzeitig ist schwer.→ Im UI-Design Priorität setzen: Wichtige Infos klar und schnell erfassbar machen.

1. Nutzer nehmen nur einen kleinen Ausschnitt wahr.

2. UI muss wichtige Informationen herausheben.

3. Hypothesenbildung nutzen: Erwartungen der Nutzer unterstützen (z.B. bekannte Icons, Layouts).

1. Scharfes Sehen nur auf 2° Sichtfeld → zentrale Infos dort platzieren.

2. Peripherie nutzt Bewegungs- und Helligkeitsänderungen → geeignet für dezente Hinweise.

1. Interfaces so gestalten, dass Fixationen sinnvoll gesteuert werden.

2. Wichtige Elemente dort platzieren, wo Nutzer wahrscheinlich fixieren (z.B. Bildschirmmitte, gewohnte Scanrichtungen).

1. Peripherie erkennt Bewegungen schnell.

2. Bewegte Elemente (Blinken, Animationen) nur sparsam einsetzen → sonst Ablenkung!

3. Bewegte Hinweise gezielt nutzen, z.B. bei Benachrichtigungen.

1. Animationen sollten weich und vorhersagbar sein.

2. Keine endlosen Loops → sie belasten die Informationsverarbeitung.

3. Fokus auf einzelne, relevante Bewegungen.

1. Prä-attentive Merkmale (z.B. Farbe, Formunterschiede) nutzen, um sofort Aufmerksamkeit zu lenken.

2. Einheitliches Grunddesign nötig, damit Auffälliges überhaupt als relevant wahrgenommen wird.

1. Nutzer interpretieren Größe, Form, Helligkeit stabil trotz veränderter Bedingungen.

2. UI-Elemente sollten in sich konsistent bleiben, z.B. gleiche Größenrelationen, Lichtannahmen beachten.

1. Menschen erwarten Licht von oben → Schattierungen, Beleuchtung und 3D-Effekte sollten dem folgen.

2. Fehlerhafte Lichtquellen wirken irritierend und unnatürlich.

1. Kräftige Farben, hohe Helligkeit und Kontrast holen Elemente in den Vordergrund.

2. Matte, dunkle, kontrastarme Flächen wirken wie Hintergrund → gezielt einsetzen für Strukturierung.

1. Sanfte Farb- und Helligkeitsverläufe deuten auf Tiefe und Kontinuität.

2. Plötzliche Änderungen wirken wie Objektgrenzen → nützlich für Trennung von UI-Bereichen.

1. Wahrnehmungsphysiologie zwingt uns, Interfaces einfach, erwartungskonform und aufmerksamkeitsfreundlich zu gestalten.

2. Störungen (z.B. hektisches Blinken) vermeiden, Hypothesenbildung der Nutzer unterstützen.

○ Aesthetic-Usability Effect

○ Fitt’s Law

○ Hick’s Law

○ Doherty Threshold

○ Jakob’s Law

○ Miller’s Law

○ Peak End Rule

○ Postel’s Law

○ Tesler’s Law

○ Von Restorff Effect

○ Goal-Gradient Effect

○ Parkinson’s Law

○ Zeigarnik Effect

Card sorts are useful to organize information to help

people find what they are looking for & also use a

language they understand

User Interface Design Patterns

User Interface Design patterns are recurring solutions that solve common design

problems.

They are not too general --> Adapt to each design project.

Think of them as design rules with flexibility.

Pattern libraries are a hub of UI patterns

that are used to build an interface

The most important content should stand out the most, and the least important should

stand out the least.