# UX -> USER EXPERIENCE
Iterativ model, bis die Ziele sind so änhlich als wir vorgestellt haben.

User Centred -> der User satisfaction ist am wichtigsten

## Methodologie

* Empathise: kenne der User und kenne seiene Problemen
* Definition: Problem und Umfang des Projekts
* Idee: Wie unsere Ziel schaffen können
* Prototype:
* Test: am meinstens mit der User

**zusatliche Schritte:**
* Preplanning -> User Stories und User Flow/Scenarios
* Exploration -> Sketching Wilframes
* Desing -> Style Guide
* QA -> Speed Test
* Feedback -> KPI Testing A/B Testing

# Desing Basics
* Münster: Structur 12 Column für Web
* Typografy: Maximal 3, lesbar in alle Große. Kontras
* Farbe:

## Gestalt y UX
In diesen Konzepten wird dies nicht betont, da die Redundanz vermieden werden soll, da diese Konzepte von mehreren Lehrern im Verlauf verschiedener Semester behandelt werden.
* anhlichkeit
* Näherkeit
* Vorsetzen
* Hieranchy
* Closing

## Fitt Gesetz
die gebrauchtete Zeit und ein Ziel zu erreiche ist verbunden mit der Distanz und Große diese Obejktiv

## Hick Gesetz
je mehr Opionen, desto schwer für das User ist, eine entschaidung zu treffen.

## Jakob
der User bevorzeugen Sahcen, die schon kennen zu nutzen.

## Miller Gesetz
in der schnell Erinnerung der User können nur 7 +-2 Sache halten, deswegen ist es empfolen so die Wilframe zu konstruiren.

# Heuristic and Usability

* Feedbackszustand zBs. Fortschrittsanzeige wenn eine user ei Prozess ausfuhrt, mussen wir ein Feedback geben.

* Verbindung zwischen das System und die real Welt. Images

* Controll für der User: der User soll immer die Möglichkeit haben von Abrechen und zuruksetzen jeden Aktion.

* Konsistenz: Versuchen Sie bei der Gestaltung der visuellen Blöcke des Systemflusses, ein Muster in allen Elementen des Systems auszuführen.

* Fehlervermeidung: Geben Sie klare Anweisungen, was der Benutzer in unserem Produkt tun soll.

* Erkennen, bevor Sie sich erinnern: Stellen Sie dem Benutzer wertvolle Informationen zur Verfügung und bieten Sie ihm eine Möglichkeit, diese zu überprüfen, wenn er sie benötigt, ohne in sein Gedächtnis zu wechseln.


* Flexibilität und Effizienz der Verwendung: Stellen Sie eine Schnittstelle bereit, die fortgeschrittene und nicht fortgeschrittene Benutzer zufriedenstellt. Ermöglichen Sie die Verwendung des Produkts, ohne dass Fachwissen erforderlich ist.


* Ästhetisches und minimalistisches Design: Sättigen Sie den Benutzer nicht mit Inhalten, sondern zeigen Sie nur den relevanten Inhalt für jede Ansicht oder jede Aktion an, auf die der Benutzer zugreifen möchte. Platzieren Sie keine Elemente, die den Benutzer vom Ziel der Ansicht ablenken.

* dem Benutzer helfen, Fehler zu erkennen und zu korrigieren: Geben Sie dem Benutzer Informationen darüber, was Fehler oder Inkonsistenzen im System erzeugt.

* Hilfe und Dokumentation: Erkennen Sie die häufigsten Zweifel der Benutzer bei der Verwendung unseres Produkts und geben Sie Informationen an, mit denen diese sofort behoben werden können.

# Verstandins des Problem
### Methoden:
* Pain Points
* 5W: Who, what, wehere, when, why?
* der 5 why? example:
1) warum der User kann nicht der Robot nutzen, um in ein Raum zu gehen?
Antwort: Er finden das richtige Button nicht
2) warum der User finden das button nicht?
Antwort: der User sehen das Button nicht
3) warum der User sieht das Button nicht?
Antowrt: diese Button ist an ein Hamburguer Menü
4) Warum dieses Button ist dort?
Antowrt: gitb es ein Menü um solche Aktionen zu gruppieren
5) Warum ist diese Menü versteck für der User?
Antwort: ......
Möglich Lösung:
1) Filter und search form zu delepotment
2) Menü an andere Stellen zu setzen

# Research
### Research Methoden
* Formal: A/B Testing, Analytics, Interviews
* Informal: Desing Hall -> Drucken Mockups unserer Projekt
* Quantitativ: (Menge, Dauert)
* Qualitativ: (Gefuhlen, Opinionen)

### BenchMarking
* Stand der Technik eines Problems
Sehen Sie, wie andere Arbeitsteams unser Problem gelöst haben.
Was machen Sie um das zu nutzen?
Was funktioniert sehr gut von ihnen?
Welche Verbesserung der prozess wir machen können?
finden Münster auf andere Teams?

### Befragun
* deutlich Zeil -> Immer an enfagt
* User Typ -> Segmentation
* Structur -> other Option und so weiter

### Interviews
* Script

### USER Personas
* für wen entwurfen wir?
Entwurft ein Irreales Person mit Personaliti Ziele Motivation Grenzen.

### User Flow/ Board

# Organization, Information und Skizzieren die wilframes

## Analise der änhliche Arbeiten, die das Problem gelost hat.
Wie ist dargestellt die Information, Input, Outputs, Hierarchie der Information, Hilfe methoden.
## Information Arkitektur
Wie wird die Information dargestellt?
In welche Richtung?
Wie wird es geordnet?
## Nutzung münsterlosung
* Notifications design pattern example at Quora - 3 of 4
* http://ui-patterns.com/patterns/StepsLeft/examples/18216
* Dark Patterns - Types of Dark Pattern
* https://pttrns.com/

## Wildframes
Statiche Dargestellung der View komponentes, wie unterschiedliche Windows und Form. man kann digital oder papier es erstellen.

## Guerilla Testing
Der Benutzer wird gebeten, einen kurzen Prozesslauf durchzuführen. Dies kann in Papierform oder in einem digitalen Protopite erfolgen.

# Entwurt Details
## Mood Board
Bildreferenzen, Farben, Schriftarten, Stile, auf denen unsere Designs basieren
* https://collectui.com
## Entwurt System
***Atomic Desing***
Aufteilung der Komponenten in Atome, Moleküle und Organismen.
Es ist sehr wichtig, dass unser Produkt konsistent ist.

## USER TESTING
Erklären Sie den Benutzern, welche Aufgabe sie ausführen werden, und zeichnen Sie sie auf, um Insing zu finden.

## Iterationen
* A B-Test: Mit dieser Art von Test können wir zwei oder mehr Versionen einer Schnittstelle vergleichen, um festzustellen, welche besser abschneidet. Ein Vorteil ist, dass wir es mit echten Benutzern testen können.
Werkzeug 1: Google Optimize
Werkzeug 2: Hot Jar

# Andere mögliche konzepte
UX-Writting flow desing durch Sprache.