User Interface Pattern Flashcards

1
Q

Was sind Interface Pattern?

A

bieten Lösung für Reihe von gleichartigen Designproblemen im Bereich der Benutzerschnittstellen

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Was sind Interface Idiome?

A

beschreiben Muster für Typen oder Stile verschiedener Benutzerschnittstellen
- Gewöhnung und Vertrautheit (engl.
Familiarity) setzen bei wiederkehrende
Nutzung ein

Text-Editor, Formulare, Tabellenkalkulation

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Verhaltensmuster

Was ist Safe Exploration?

A

“Let me explore without
getting lost or getting into trouble.”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Verhaltensmuster

Was ist Instant Gratification?

A

“I want to accomplish something now,
not later.”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Verhaltensmuster

Was ist Satisficing?

A

“This is good enough.
I don’t want to spend more time
learning to do it better.”

satisfying + sufficient

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Verhaltensmuster

Was ist Changes in Midstream?

A

“I changed my mind
about what I was doing.”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Verhaltensmuster

Was ist Deferred Choices?

A

“I don’t want to answer that now; just let me finish.”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Verhaltensmuster

Was ist Incremental Construction?

A

“Let me change this. That doesn’t look right; let me change it again; that’s better!”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Verhaltensmuster

Was ist Habituation?

A

“That gesture works everywhere else, why
doesn’t it work here, too?”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Verhaltensmuster

Was sind Microbreaks?

A

“I’m waiting for the train.
Let me do something useful for two minutes.”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Verhaltensmuster

Was ist Spatial Memory?

A

“I swear that button was here a minute ago.
Where did it go?”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Verhaltensmuster

Was ist Prospective Memory?

A

“I’m putting this here to remind myself to
deal with it later.”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Verhaltensmuster

Was ist Streamlined Repetition?

A

“I have to repeat this how many times?”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Verhaltensmuster

Was ist Keyboard Only?

A

“Please don’t make me use the mouse.”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Was ist Atomic Design?

A

Methodik zur Erstellung
von interaktiven Systemen, die sich in fünf verschiedene Stufen gliedert:

  1. Atome (engl. Atoms)
  2. Moleküle (engl. Molecules)
  3. Organismen (engl. Organisms)
  4. Muster (engl. Templates)
  5. Seiten (engl. Pages)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Was ist das Feature/Search/Browse Pattern?

A
  1. Artikel bzw. Produkte (engl. Features),
  2. Suchfunktion (engl. Search) und
  3. Liste von Items, die durchstöbert werden können (engl. Browse)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Was ist das News Stream Pattern?

A

zeigt zeitsensitive Daten in umgekehrter chronologischer Liste, d.h. aktuellster Item oben etc.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Nach dem News Stream Pattern, welche Informationen sollte jedes Item haben?

A

Was?, Wer?, Wann?, Wo?

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Was ist das Picture Manager Pattern?

A

zeigt Vorschaubilder (engl. Thumbnails) in Grid-Struktur (engl. Thumbnail Grid) von Fotos, Videos oder
sonstigen piktoriellen Items

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Was ist das Dashboard Pattern?

A
  • arrangiert Daten in einzige Darstellung mit hoher Informationsdichte, welche regelmäßig aktualisiert wird
  • können häufig benutzerspezifisch personalisiert werden
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Was ist Canvas Plus Palette?

A
  • bei grafischen Editoren
  • Leinwand und ikonische Palette
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Was ist das Pattern Wizard?

A
  • d leitet Benutzer Schritt-bei-Schritt durch Aufgabe in vorgegebener Reihenfolge
  • Aufgabe des Nutzers chunken
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Was ist das Alternative Views Pattern?

A

erlauben es Benutzern alternative Ansichten auf Daten zu erhalten

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

Was ist das Many Workspaces Pattern?

A

erlauben es Benutzern mehrere Top-Level-Tabs oder
Gruppen von Tabs i.d.R. nebeneinander zu sehen

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

Was ist das Multi-Level Help Pattern?

A

bieten Benutzern Hilfe unterschiedlichen Grades an verschiedenen Stellen an

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

Beschreib Hub & Spoke

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

Beschrieb Fully-Connected

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

Beschreib Multi-Level

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

Beschreib Stepwise

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

Beschreib Pyramid

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

Beschreib Pan & Zoom

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

Beschreib Modal Window

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

Beschreib Clear Entry Points

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

Beschreib Bookmarks

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

Beschreib Escape Hatch

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

Was ist Nested Doll?

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

Was ist Bento Box?

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

Was ist Filtered View?

A

bietet unterschiedliche
Ansichten auf gleichen Datenbestand

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

Was ist eine Sequence Map?

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

Was ist Deep-linked state?

A

erlaubt es Benutzern Status oder Ort einer Seite zu speichern und/oder zu versenden

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

Was ist eine Menu Page?

A

erlauben es Benutzern aus einer großen Menge von Informationen zu selektieren

42
Q

Was sind Fat / Mega Menus?

A

erlauben es Benutzern alle Optionen einer Seite auf einem Blick zu erkunden

43
Q

Was sind Breadcrumbs?

A
44
Q

Was ist eine annotated scrollbar?

A

dient Benutzer als Indikator für wesentliche wichtige Abschnitte im Dokument in der Nähe der Scrollbar-Position

45
Q

Was ist eine Center Stage?

A

unterstützt Benutzer bei Erfüllung einer bestimmten (Haupt-)Aufgabe

46
Q

Benenne

A

Grid of Equals

47
Q

Benenne

A

Titled Sections

48
Q

Benenne

A

Module Tabs

49
Q

Benenne

A

Accordion

50
Q

Benenne

A

Collapsible Panels

51
Q

Benenne

A

Moveable Panels

52
Q

Benenne

A

Diagonal Balance

53
Q

Was ist Responsive Enabling?

A

startet mit Benutzerschnittstelle, die weitestgehend disabled erscheint und bei der Schritt-für- Schritt mehre Elemente enabled werden

54
Q

Was ist Responsive Disclosure?

A

startet mit Benutzerschnittstelle, die wo wenig erscheint und bei der Schritt-für- Schritt mehre Elemente angezeigt werden

55
Q

Was ist Liquid Layout?

A

passt Inhalt an sich verändernde Fenstergrößen an, so dass Fenster konstant “gefüllt” sind

56
Q

Was sind Dark Pattern?

A

sind UI-Pattern, die darauf ausgelegt sind, Benutzer:innen dazu zu bringen, bestimmte Tätigkeiten auszuführen, die deren Interessen entgegenlaufen

57
Q

Was ist Two-Panel Selector?

A

erlaubt Auswahl
einzelner Items in einzigen Side-by-SideAnsicht

58
Q

Was ist One-Window Drilldown?

A

erlaubt Auswahl eines Items aus Liste, wobei selektierte Items daraufhin bildschirmfüllend zuvor dargestellte Liste ersetzt

59
Q

Was ist List Inlay?

A

zeigt Liste von Einträgen in
Spalten bei der selektierte Auswahl (mit Zusatzinformationen) innerhalb der Liste angezeigt wird

60
Q

Was sind Thumbnail Grids?

A

zeigt Menge von Items,
die in Gitter oder Matrix angeordnet sind (vgl. Grid of Equals)

61
Q

Was ist Row Striping?

A
62
Q

Was ist Jump To Item?

A
63
Q

Was ist Alphabet Scroller?

A
64
Q

Was ist eine Cascading List?

A

stellen Hierarchie von
selektierbaren Listen von Items dar

65
Q

Was ist ein Tree Table?

A

stellt zeilenweise Liste von
Items mit mehreren Spalten innerhalb
einer Tabellenstruktur dar, wobei erste
Spalte Baumstruktur enthält

66
Q

Was ist New-Item Row?

A

erlaubt es Benutzer
neues Item am Anfang oder Ende einer Liste durch One-Click zu erstellen

67
Q

Was sind action panel?

A
  • 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
68
Q

Was sind Smart Menu Items?

A

sind Menü-Einträge,
die Aussehen in abhängig von tatsächlichen
Aktion modi!zieren können

69
Q

Was sind Macros?

A

sind Aktionen, die benutzerspezifizierte Sequenz von Aktionen
enthalten, die als eine Aktion aufgerufen werden können

70
Q

Was ist Overlay Plus Detail?

A

zeigt
Informationsgrafik neben zusätzlicher
Detailansicht an

71
Q

Was ist Local Zooming?

A

hilft komplexe Daten in
Ansicht zu explorieren, indem Benutzer innerhalb dieser Ansicht an Maus-CursorPosition zoomen kann

72
Q

Was sind Datatips?

A

zeigen zusätzliche Informationen
zu Objekten in Informationsgra!k im
eigenen Fenster an

73
Q

Was ist ein Data Spotlight?

A
74
Q

Was ist Data Brushing?

A

ermöglicht es Benutzern,
Daten in einer Ansicht zu selektieren und gleiche Daten synchron in weiterer
Ansicht hervorzuheben

74
Q

Was sind Dynamic Queries?

A

ermöglichen es Benutzern durch (vor-)de!nierte Filter, Teile der Daten mit sofortiger
Rückmeldung auszuwählen bzw. deselektieren

75
Q

Was sind sortable table?

A

zeigt Daten in tabellarischer Form (z.B. Tree Table) bei der Benutzer zeilenweise angeordnete Daten nach Spalten sortieren kann

76
Q

Was sind Radial Table?

A
  • zeigt Daten der
    Informationsgra!k in Kreisanordnung
    statt tabellarischer Form an
  • ermöglicht es Relationen
    durch Verbindungen durch Kreismitte zu
    illustrieren
77
Q

Was ist ein Multi-Y Graph?

A
78
Q

Was sind Small Multiples?

A

stellen Menge von kleinen
Grafiken der Daten bzgl. unterschiedlicher
Dimensionen oder Modalitäten dar

79
Q

Was ist eine Treemap?

A

stellt multidimensionale oder
hierarchische Daten als Rechtecke
unterschiedlicher Größe innerhalb einer Informationsgra!k dar

80
Q

Was ist das Forgiving Format?

A
  • erlaubt Benutzer, Text
    in unterschiedlichen Formaten und
    Syntax einzutragen
  • erfordert, dass
    Anwendung Daten ggf. analysiert (engl. parsed) und konvertiert
81
Q

Was ist Fill-in-the-blanks?

A

ordnet ein oder
mehrere Felder in Form eines Satzes an, wobei Benutzer “Freitext-Felder” füllen muss

82
Q

Was ist der Unterschied zwischen Input Hints und Input Prompts?

A
83
Q

Was ist ein Dropdown Chooser?

A

erweitert Konzept
des Menüs durch Verwendung eines Drop-Down oder Pop-Up Panels, welches ähnliche Auswahloptionen anbietet

84
Q

Was ist ein List Builder?

A

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

85
Q

Stanford Web Credibility Project 2002

Was ist ein Deep Background?

A
  • stellt Bild oder Gradient in Hintergrund einer Anwendung
  • erlaubt Fokussierung auf
    Vordergrund
  • sollte u.a. weichen Fokus,
    Tiefenhinweise und keine starken
    Fokuspunkte verwenden
86
Q

Stanford Web Credibility Project 2002

Was besagt das Few Hues / Many Values Prinzip?

A

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

87
Q

Stanford Web Credibility Project 2002

Was besagt das Corner Treatments Prinzip?

A
  • dass (anstelle
    von rechten Winkeln) Kurven oder
    Diagonalen für einige Ecken im UI
    verwendet werden sollten
  • sollten konsistent
    innerhalb des UI Design sein
88
Q

Stanford Web Credibility Project 2002

Was besagt das Border Echo Fonts Prinzip?

A

dass Ränder gleiche/ähnliche visuelle Gestaltung (z.B. Farbe, Dicke und Kurvenverläufe) wie Haupt-Schriftart des UI haben sollte

89
Q

Stanford Web Credibility Project 2002

Was sind Hairlines?

A

erlauben visuelle Trennung
unterschiedlicher Inhalte durch
(Trenn-)linien

90
Q

Stanford Web Credibility Project 2002

Was besagt das Contrasting Fonts Prinzip?

A

dass
mindestens zwei kontrastreiche
Schriftarten verwendet werden sollten

91
Q

Beschreib Milgram’s Kontinuum

A
92
Q

Welche drei Anforderungen muss VR erfüllen?

A
  • Echtzeit-Rendering
  • Räumlichkeit
  • Interaktivität
93
Q

In VR

Was ist Immersion?

A

beschreibt bis zu welchem Grad
Technologie die Illusion realer Umgebung für Nutzer:innen schaffen kann

94
Q

In VR

Was ist Präsenz?

A

Bewusstseinszustand,
der Illusion darstellt, das Gefühl zu haben in virtueller Umgebung zu sein

95
Q

Wie hängen Immersion und Präsenz zusammen?

A

Immersion (objektiv in technologischer Hinsicht) kann subjektives Präsenzgefühl hervorrufen

96
Q

Aus welchen Komponenten besteht Präsenz?

A
97
Q

Beschreib

A
98
Q

Beschreib

A
99
Q

Beschreib

A
100
Q

Was sind die fünf Hauptaufgaben im 3D-Raum?

A
  1. Navigieren & Wegfindung
  2. Systemkontrolle
  3. Symbolische Eingaben
  4. Selektion
  5. Manipulation