User Interface Pattern Flashcards
Was sind Interface Pattern?
bieten Lösung für Reihe von gleichartigen Designproblemen im Bereich der Benutzerschnittstellen
Was sind Interface Idiome?
beschreiben Muster für Typen oder Stile verschiedener Benutzerschnittstellen
- Gewöhnung und Vertrautheit (engl.
Familiarity) setzen bei wiederkehrende
Nutzung ein
Text-Editor, Formulare, Tabellenkalkulation
Verhaltensmuster
Was ist Safe Exploration?
“Let me explore without
getting lost or getting into trouble.”
Verhaltensmuster
Was ist Instant Gratification?
“I want to accomplish something now,
not later.”
Verhaltensmuster
Was ist Satisficing?
“This is good enough.
I don’t want to spend more time
learning to do it better.”
satisfying + sufficient
Verhaltensmuster
Was ist Changes in Midstream?
“I changed my mind
about what I was doing.”
Verhaltensmuster
Was ist Deferred Choices?
“I don’t want to answer that now; just let me finish.”
Verhaltensmuster
Was ist Incremental Construction?
“Let me change this. That doesn’t look right; let me change it again; that’s better!”
Verhaltensmuster
Was ist Habituation?
“That gesture works everywhere else, why
doesn’t it work here, too?”
Verhaltensmuster
Was sind Microbreaks?
“I’m waiting for the train.
Let me do something useful for two minutes.”
Verhaltensmuster
Was ist Spatial Memory?
“I swear that button was here a minute ago.
Where did it go?”
Verhaltensmuster
Was ist Prospective Memory?
“I’m putting this here to remind myself to
deal with it later.”
Verhaltensmuster
Was ist Streamlined Repetition?
“I have to repeat this how many times?”
Verhaltensmuster
Was ist Keyboard Only?
“Please don’t make me use the mouse.”
Was ist Atomic Design?
Methodik zur Erstellung
von interaktiven Systemen, die sich in fünf verschiedene Stufen gliedert:
- Atome (engl. Atoms)
- Moleküle (engl. Molecules)
- Organismen (engl. Organisms)
- Muster (engl. Templates)
- Seiten (engl. Pages)
Was ist das Feature/Search/Browse Pattern?
- Artikel bzw. Produkte (engl. Features),
- Suchfunktion (engl. Search) und
- Liste von Items, die durchstöbert werden können (engl. Browse)
Was ist das News Stream Pattern?
zeigt zeitsensitive Daten in umgekehrter chronologischer Liste, d.h. aktuellster Item oben etc.
Nach dem News Stream Pattern, welche Informationen sollte jedes Item haben?
Was?, Wer?, Wann?, Wo?
Was ist das Picture Manager Pattern?
zeigt Vorschaubilder (engl. Thumbnails) in Grid-Struktur (engl. Thumbnail Grid) von Fotos, Videos oder
sonstigen piktoriellen Items
Was ist das Dashboard Pattern?
- arrangiert Daten in einzige Darstellung mit hoher Informationsdichte, welche regelmäßig aktualisiert wird
- können häufig benutzerspezifisch personalisiert werden
Was ist Canvas Plus Palette?
- bei grafischen Editoren
- Leinwand und ikonische Palette
Was ist das Pattern Wizard?
- d leitet Benutzer Schritt-bei-Schritt durch Aufgabe in vorgegebener Reihenfolge
- Aufgabe des Nutzers chunken
Was ist das Alternative Views Pattern?
erlauben es Benutzern alternative Ansichten auf Daten zu erhalten
Was ist das Many Workspaces Pattern?
erlauben es Benutzern mehrere Top-Level-Tabs oder
Gruppen von Tabs i.d.R. nebeneinander zu sehen
Was ist das Multi-Level Help Pattern?
bieten Benutzern Hilfe unterschiedlichen Grades an verschiedenen Stellen an
Beschreib Hub & Spoke
Beschrieb Fully-Connected
Beschreib Multi-Level
Beschreib Stepwise
Beschreib Pyramid
Beschreib Pan & Zoom
Beschreib Modal Window
Beschreib Clear Entry Points
Beschreib Bookmarks
Beschreib Escape Hatch
Was ist Nested Doll?
Was ist Bento Box?
Was ist Filtered View?
bietet unterschiedliche
Ansichten auf gleichen Datenbestand
Was ist eine Sequence Map?
Was ist Deep-linked state?
erlaubt es Benutzern Status oder Ort einer Seite zu speichern und/oder zu versenden
Was ist eine Menu Page?
erlauben es Benutzern aus einer großen Menge von Informationen zu selektieren
Was sind Fat / Mega Menus?
erlauben es Benutzern alle Optionen einer Seite auf einem Blick zu erkunden
Was sind Breadcrumbs?
Was ist eine annotated scrollbar?
dient Benutzer als Indikator für wesentliche wichtige Abschnitte im Dokument in der Nähe der Scrollbar-Position
Was ist eine Center Stage?
unterstützt Benutzer bei Erfüllung einer bestimmten (Haupt-)Aufgabe
Benenne
Grid of Equals
Benenne
Titled Sections
Benenne
Module Tabs
Benenne
Accordion
Benenne
Collapsible Panels
Benenne
Moveable Panels
Benenne
Diagonal Balance
Was ist Responsive Enabling?
startet mit Benutzerschnittstelle, die weitestgehend disabled erscheint und bei der Schritt-für- Schritt mehre Elemente enabled werden
Was ist Responsive Disclosure?
startet mit Benutzerschnittstelle, die wo wenig erscheint und bei der Schritt-für- Schritt mehre Elemente angezeigt werden
Was ist Liquid Layout?
passt Inhalt an sich verändernde Fenstergrößen an, so dass Fenster konstant “gefüllt” sind
Was sind Dark Pattern?
sind UI-Pattern, die darauf ausgelegt sind, Benutzer:innen dazu zu bringen, bestimmte Tätigkeiten auszuführen, die deren Interessen entgegenlaufen
Was ist Two-Panel Selector?
erlaubt Auswahl
einzelner Items in einzigen Side-by-SideAnsicht
Was ist One-Window Drilldown?
erlaubt Auswahl eines Items aus Liste, wobei selektierte Items daraufhin bildschirmfüllend zuvor dargestellte Liste ersetzt
Was ist List Inlay?
zeigt Liste von Einträgen in
Spalten bei der selektierte Auswahl (mit Zusatzinformationen) innerhalb der Liste angezeigt wird
Was sind Thumbnail Grids?
zeigt Menge von Items,
die in Gitter oder Matrix angeordnet sind (vgl. Grid of Equals)
Was ist Row Striping?
Was ist Jump To Item?
Was ist Alphabet Scroller?
Was ist eine Cascading List?
stellen Hierarchie von
selektierbaren Listen von Items dar
Was ist ein Tree Table?
stellt zeilenweise Liste von
Items mit mehreren Spalten innerhalb
einer Tabellenstruktur dar, wobei erste
Spalte Baumstruktur enthält
Was ist New-Item Row?
erlaubt es Benutzer
neues Item am Anfang oder Ende einer Liste durch One-Click zu erstellen
Was sind action panel?
- zeigen verbundene Aktionen, die im UI ständig sichtbar sind
- werden anstelle von Menus oder Button Groups verwendet, wegen Sichtbarkeit, verfügbarer Platz und Freiheit bei Präsentation
Was sind Smart Menu Items?
sind Menü-Einträge,
die Aussehen in abhängig von tatsächlichen
Aktion modi!zieren können
Was sind Macros?
sind Aktionen, die benutzerspezifizierte Sequenz von Aktionen
enthalten, die als eine Aktion aufgerufen werden können
Was ist Overlay Plus Detail?
zeigt
Informationsgrafik neben zusätzlicher
Detailansicht an
Was ist Local Zooming?
hilft komplexe Daten in
Ansicht zu explorieren, indem Benutzer innerhalb dieser Ansicht an Maus-CursorPosition zoomen kann
Was sind Datatips?
zeigen zusätzliche Informationen
zu Objekten in Informationsgra!k im
eigenen Fenster an
Was ist ein Data Spotlight?
Was ist Data Brushing?
ermöglicht es Benutzern,
Daten in einer Ansicht zu selektieren und gleiche Daten synchron in weiterer
Ansicht hervorzuheben
Was sind Dynamic Queries?
ermöglichen es Benutzern durch (vor-)de!nierte Filter, Teile der Daten mit sofortiger
Rückmeldung auszuwählen bzw. deselektieren
Was sind sortable table?
zeigt Daten in tabellarischer Form (z.B. Tree Table) bei der Benutzer zeilenweise angeordnete Daten nach Spalten sortieren kann
Was sind Radial Table?
- zeigt Daten der
Informationsgra!k in Kreisanordnung
statt tabellarischer Form an - ermöglicht es Relationen
durch Verbindungen durch Kreismitte zu
illustrieren
Was ist ein Multi-Y Graph?
Was sind Small Multiples?
stellen Menge von kleinen
Grafiken der Daten bzgl. unterschiedlicher
Dimensionen oder Modalitäten dar
Was ist eine Treemap?
stellt multidimensionale oder
hierarchische Daten als Rechtecke
unterschiedlicher Größe innerhalb einer Informationsgra!k dar
Was ist das Forgiving Format?
- erlaubt Benutzer, Text
in unterschiedlichen Formaten und
Syntax einzutragen - erfordert, dass
Anwendung Daten ggf. analysiert (engl. parsed) und konvertiert
Was ist Fill-in-the-blanks?
ordnet ein oder
mehrere Felder in Form eines Satzes an, wobei Benutzer “Freitext-Felder” füllen muss
Was ist der Unterschied zwischen Input Hints und Input Prompts?
Was ist ein Dropdown Chooser?
erweitert Konzept
des Menüs durch Verwendung eines Drop-Down oder Pop-Up Panels, welches ähnliche Auswahloptionen anbietet
Was ist ein List Builder?
zeigt gleichzeitig Quell- (engl. Source) und Ziel- (engl. Destination) Liste und lässt Benutzer Einträge zwischen beiden hin- und herschieben, z.B. via Button- oder Drag- &-Drop-Interaktion
Stanford Web Credibility Project 2002
Was ist ein Deep Background?
- stellt Bild oder Gradient in Hintergrund einer Anwendung
- erlaubt Fokussierung auf
Vordergrund - sollte u.a. weichen Fokus,
Tiefenhinweise und keine starken
Fokuspunkte verwenden
Stanford Web Credibility Project 2002
Was besagt das Few Hues / Many Values Prinzip?
besagt, dass wenig
Farbtöne (ca. 3-5) gewählt werden sollten, die durch verschiedene Stufen der Sättigung und Helligkeit in Palette kombiniert werden
Stanford Web Credibility Project 2002
Was besagt das Corner Treatments Prinzip?
- dass (anstelle
von rechten Winkeln) Kurven oder
Diagonalen für einige Ecken im UI
verwendet werden sollten - sollten konsistent
innerhalb des UI Design sein
Stanford Web Credibility Project 2002
Was besagt das Border Echo Fonts Prinzip?
dass Ränder gleiche/ähnliche visuelle Gestaltung (z.B. Farbe, Dicke und Kurvenverläufe) wie Haupt-Schriftart des UI haben sollte
Stanford Web Credibility Project 2002
Was sind Hairlines?
erlauben visuelle Trennung
unterschiedlicher Inhalte durch
(Trenn-)linien
Stanford Web Credibility Project 2002
Was besagt das Contrasting Fonts Prinzip?
dass
mindestens zwei kontrastreiche
Schriftarten verwendet werden sollten
Beschreib Milgram’s Kontinuum
Welche drei Anforderungen muss VR erfüllen?
- Echtzeit-Rendering
- Räumlichkeit
- Interaktivität
In VR
Was ist Immersion?
beschreibt bis zu welchem Grad
Technologie die Illusion realer Umgebung für Nutzer:innen schaffen kann
In VR
Was ist Präsenz?
Bewusstseinszustand,
der Illusion darstellt, das Gefühl zu haben in virtueller Umgebung zu sein
Wie hängen Immersion und Präsenz zusammen?
Immersion (objektiv in technologischer Hinsicht) kann subjektives Präsenzgefühl hervorrufen
Aus welchen Komponenten besteht Präsenz?
Beschreib
Beschreib
Beschreib
Was sind die fünf Hauptaufgaben im 3D-Raum?
- Navigieren & Wegfindung
- Systemkontrolle
- Symbolische Eingaben
- Selektion
- Manipulation