FHNW: uuid

Ein Dialog ist steuerbar, wenn der Benutzer in der Lage ist, den Dialogablauf zu starten sowie seine Richtung und Geschwindigkeit zu beeinflussen, bis das Ziel erreicht ist.

Ein Dialog ist fehlertolerant, wenn das beabsichtigte Arbeitsergebnis trotz erkennbar fehlerhafter Eingaben entweder mit keinem oder mit minimalem Korrekturaufwand seitens des Benutzers erreicht werden kann.

Die Informationsarchitektur einer Website besteht aus zwei Hauptkomponenten:

1. Identifikation und Definition von Seiten Inhalt/Funktionalität
2. Die grundliegende Organisation, Struktur und Nomenklatur, welche die Beziehung zwischen dem Seiteninhalt bzw. der Funktionalität definiert.

Bei Sketchboards geht es darum Ideen zu visualisieren und Kontext zu schaffen. Bei Papierprototypen möchte man die Interaktionen und Wahrnehmungen des Nutzers testen und protokolieren.

1. Design Patterns sind bekannte Muster, die sich für die Lösung eines Design-Problems anbieten.
    
2. Sie können über eine gute Usability verfügen, müssen aber nicht zwingend: Ein Design Pattern ist keine Garantie für eine gute Usability.
    
3. Design Patterns ändern sich stetig.
    
4. Bei DPs handelt es sich nicht um Neuentwicklungen. Sie stützen sich auf bereits bekannte Lösungen ab.

Use When:

If you are showing a reduced set of information in an overview graphics like a diagramm or a map. This user is able to point at the information.

Use when:

Filter or explore large, multivariate data sets.
Data sets are numeric and range-bound or sortable objects (strings, dates, categories)
Also applicable for just visible areas or search results

• What: 
  • Schaltflächen werden sichtbar, wenn man mit der Maus auf ein Element zeigt.
• When:
  •  Listen mit weiteren Optionen für einzelne Einträge
  • Um Übersichtlichkeit zu erhöhen
  • Funktioniert schlecht mit Touch-Eingabe
• Why
  • Offensichtlich sichtbar im Gegensatz zu Popups
• How
  • Hoverarea um Element erstellen
  • Keine Animationen beim Ein- und Ausblenden

...

What?
Eine Liste von der verschachtelten Hierarchie

When?
Falls die Hierarchie der Seite zwei oder mehrere Stufen tief ist.

Why?
Es bietet Kontext und hilft den User herauszufinden wo er steht.

How?
An oberster Stelle auf einer Seite, welche die aktuelle Stufe der Hierarchie hervorhebt.

What?
Eine lange Liste von Navigationsoptionen, die als Dropdown oder Flyout menu dargestellt wird.

When?
Falls die Seite aus vielen Kategorien (>3) und Unterseiten besteht.

Why?
Eine komplexe und umfassende Seite dem User transparenter zu machen.

How?
Jede Kategorie und dessen Navigationsoptionen organisiert auflisten. 

• What?
  • List builder pattern
• Use When?
  • Select any of N items in any order
  • Set of items
• Why?
  • Selected set is easy to view
  • Selection can be an ordered list
  • Easy handles a large source list
• How?
  • Show N items and the chosen set

Was?

Button am Ende einer Liste um weitere Einträge zu laden.

Wann verwenden?

Lange Listen, Bsp. von Suchresultaten. Oder generell «endlose» Listen.

Der User wird das gesuchte vermutlich am Anfang der Liste finden, in vereinzelten Fällen müssen aber mehr Einträge geladen werden.

Wieso?

-Das Initiale laden einer beschränkten Menge ist schneller als das Laden von vielen Resultaten, verhindert lange Wartezeiten für den Benutzer.

-Das hinzuladen weiterer Resultate in kleineren Mengen ist schnell und der Benutzer entscheidet ob noch weitere Einträge geladen werden sollen.

-Die Einträge werden der Liste unten angefügt und sind dem Benutzer direkt ersichtlich. Der Benutzer muss dazu nicht auf eine neue Seite navigieren.

Wie?

Es wird nur der Anfang der Liste an den Client geschickt. Die Menge an Einträge variiert und ist von verschiedenen Faktoren abhängig (Downloadzeit, Was will der User erreichen, …).

Ein Button am Ende der Liste um weitere X Elemente zu laden.

Anstelle eines Buttons am Ende der Liste kann auch ein automatisches Laden implementiert werden wenn der Benutzer fast am Ende der Liste angekommen ist (Lazy Loading & Infinite Scroll).

• What:
  • Liste mit aufklappbarem Detail
• Use when:
  • Bei Gesamtübersicht von allen Listenelementen
  • Wenn man Details sichtbar haben will ohne den Fokus zu verlieren
• Why:
  • Zeigt Detail + gesamt Liste
• How:
  • Bei Klick auf Listenelement, öffnet sich das Detail
  • Durch erneuten Klick schliesst es sich wieder

• What
  • Liste mit Alphabet als Scroll Balken
• When
  • Wenn User weiss, was er sucht
• Why
  • Muss nicht ganze Liste durchscrollen um Listeneintrag zu finden
• How
  • Scrollbar durch Auflistung des Alphabets ersetzen
  • Beim direkten Klick auf einen Buchstaben des Alphabets wird zu selbigem gesprungen

...

...

...

• Übersicht neben einer gezoomten Detailansicht
• Grosse Datensets auf grossen Informationsgrafiken
• High Level Ansicht, um interessante Details zu finden
• Schnelle Wechsel von Übersicht <> Detail
• Umsetzung
  • Jederzeit Übersicht zeigen
  • Detailfenster / Zweites Fenster

•What:
Den Inhalt einer mobilen Webseite in einer vertikalen Spalte anordnen. Zeilenumbruch verwenden.

•Use When:
Alle mobilen Webseiten für verschiedene Geräte mit textbasiertem Inhalt und Formen.

•Why:
Mobile Geräte kommen mit unterschiedlichen Breiten.

•How:

•Den Inhalt einer mobilen Webseite in einer vertikalen Spalte anordnen. Zeilenumbruch verwenden. Wichtige Informationen oben, unwichtige unten. Keine unnötigen Toolbars oder grosse Logos etc.

Wenn

• die Arbeitssicherheit verbessert werden soll
• die krankheitsbedingten Ausfallstunden hoch sind
• eine Verbesserung der Arbeitsmotivation angestrebt wird
• das Wohlbefinden der Mitarbeiter verbessert werden soll

Usability ist das Ausmass, in dem ein Produkt durch bestimmte Nutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen.

User Experience beinhaltet die gesamte Wahrnehmung und Reaktionen, die aus der Nutzung eines Produktes, Systems oder Dienstleistung entstehen.

UX umfasst Emotionen, Überzeugungen, Vorlieben, Wahrnehmungen, Reaktionen, Verhaltensweisen und Leistungen, die vor, während und nach der Nutzung auftreten.

• Den Nutzer und seine Anforderungen ins Zentrum der Entwicklung stellen
• Methoden der Psychologie und nicht nur der Software-Entwicklung anzuwenden
• Die Anwendung von Iterativen Entwicklungsmethoden
• Das Talent, den Nutzer und seine Anfroderungen zu verstehen
• Die Vermeidung von Kommunkiationsproblemen

• Menschengerechte Gestaltung der Interaktion zwischen Mensch und Computer
• Anpassung der Arbeitsbedingungen an die kognitiven Fähigkeiten des Menschen

Den Fokus auf den Nutzer und dessen Bedürfnisse und Ziele setzen. Der Nutzer steuert das Design, wobei der Designer die Bedürfnisse und Ziele abholt.

• Weil der Nutzer das Design steuert, kann eine falsche Nutzerauswahl zu falschen Bedürfnissen und Zielen führen, welche das Design schädigt.
   
• Nutzer können das Design oder ihre Wünsche nur schlecht abstrahieren. Ein Designer muss daher ihre Bedürfnisse gut abholen.

1. Ein frühzeitiger Fokus auf den Nutzer und die Aufgaben
2. Die Anwendung empirischer Messprinzipien für die Produktnutzung
3. Zweckmässige Zuordnung der Funktionen zu Nutzer und System (abgestützt auf die Fähigkeiten der Nutzer und Ihre Anforderungen an das System)
4. Iteratives Design
5. Verstehen und Spezifikation des Nutzungskontexts

• Nutzerforschung: Interviews, Umfragen, Beobachtungen
• Interpretation: Auswertung (siehe oben), Persona, Storyboard, Kontexanalyse
• Ideenbildung: Brainstorming
• Experimentieren: Design Pattern, Prototyping, Eye Tracking
• Evaluation: Auswertung, Dokumentation

1. Aufgabenangemessenheit
2. Erwartungskonformität
3. Selbstbeschreibungsfähigkeit
4. Lernförderlichkeit
5. Individualisierbarkeit
6. Steuerbarkeit
7. Fehlertoleranz

1. Gebündelte Archetypen (Modell einer Nutzergruppe)
2. Ein Modell, keine wirkliche Person
3. Stützt sich auf Verhaltensbeobachtungs-Daten ab
4. Setzt sich aus vielen verschiedenen Nutzern zusammen
5. Wird während der Reasearch-Phase bestimmt
6. Verfeinert sich in den späteren Phasen des Projekts
7. Wird während des gesamten Projekts beibehalten (sollte zu Beginn gemacht werden)

Ein Produkt, welches für eine spezifische Persona mit speziellen Bedürfnissen entwickelt wurde, hat ein erhöhtes Potential für eine breite Nutzung.

1. Foto
2. Alter
3. Geschlecht
4. Technische Affinität (Tech/Design Geek, Telefon, Laptop, Applikationen)
5. Motivation (Ziele), Frustrationen
6. Hobbies
7. Herkömmlicher Tag (wie sieht der aus?)
8. Familie
9. Zeit (wieviel Zeit hat er, um die App zu nutzen

1. Analyse:
   1. Business Requirements führen zu:
   2. Persona
   3. Usability Ziele
   4. Task Analyse
   5. User Scenarios
   6. Marktstudien
2. Design Iterativ:
   1. High-Level Design (Sketches)
   2. Design Walkthrough (Nutzer einbeziehen)
   3. Informations-Architektur, Navigationsmodell, Farbkonzept, Schriftkonzept, Bildkonzept
   4. Papierprototyp (beeinflusst von Styleguide und Standards)
   5. Low Fi Paper Prototyp (Nutzer einbeziehen) und Feedback geben (wieder bei 2.3 beginnen)
   6. High Fidelty Prototyp
   7. Usability Test (Nutzer einbeziehen) Feedback für 2.6
   8. Design Spezifikation
3. Implementation
   1. Codierung
   2. Usability Tests (Nutzer einbeziehen)
   3. Acceptance Tests
4. Release
   1. Online Surveys
   2. Befragungen

1. Sketching: Low Fidelity Prototyp
2. Wireframes: Low Fi
3. Mockups: Mid Fi 
4. Prototyp: High Fi

1. Informationsarchitektur
2. Navigation
3. Informationsdarstellung
4. Kompaktheit
5. Konsistenz
6. Farbgestaltung
7. Schriftgestaltung

Vorteile:

• Geringe Entwicklungskosten
• Geeignet für Grobkonzepte
• Evaluation von Alternativen
• Ideen kommunizieren
• Kein technisches Know-How nötig

Nachteile:

• Kaum Navigation und Interaktion (diese werden beim PP allerdings simuliert)
• Eingeschränkte Wiederverwendung
• Fehlerbehandlung nicht enthalten

Vorteile

• Look & Feel ähnlich zum Endprodukt
• Interaktiv, Navigation
• Weiterverwendung möglich
• Detailierte Nutzer-Rückmeldung

Nachteile

• Mittlere-/Hohe Entwicklungskosten/zeit
• Einschränkung der Kreativität
• Gefahr der Detailarbeit

Vorteile:

• Look nd Feel ähnlich zum Endprodukt
• Realistisch, interaktiv, zeitecht
• Weiterverwendung möglich
• Detailierte Nutzerrückmeldung

Nachteile

• Hohe Entwicklungskosten
• Einschränkung der Kreativität
• Gefahr der Detailarbeit