188

Informatik (Fach) / Interaktions Design (Lektion)

Diese Lektion wurde von marvin1504 erstellt.

Lektion lernen

zurück  |  weiter 3 / 4

• Pattern Pattern bezeichnen Lösungen eines grundlegenden Gestaltungsproblems mit Hilfe von Mustern bzw. Templates Feature/Search/BrowseFeature - ProduktSearch - SuchfunktionBrowse - Listen von Items die durchstöbert werden können BreadcrumbsBreadcrumbs helfen Benutzer sich in tiefer Hierarchie zurechtzufinden, indem jewilige Parent-Seiten aufgezeigt werden
• Farbwirkung Farben besitzen unterstützende Funktion beim KommunikationsprozessFarben helfen Strukturen, Bezüge und Aussagen etc. zu unterstreichen und zuvisualisieren und sollten Betrachter Orientierung erleichtern - harmonische Gestaltungen wirken gediegener und ausgewogener- disharmonische Gestaltungen wirken aufregender und unruhiger- Kontraste helfen beim Auffinden relevanter Objekte und lenken Aufmerksamkeit Kalt-Warm-Kontrast- Hintergrund in warmer Farbe lässt Farbton kühler wirken- Hintergrund in kalter Farbe lässt Farbton wärmer wirken
• (A-)symmetrische Gestaltung - Symmetrie strahlt Ruhe, Korrektheit und Stabilität aus- Asymmetrie strahlt Dynamik und Bewegung aus
• Leerraum - Leerräume (leere Flächen) sorgen für Ausgewogenheit und verstärken Wirkung anderer Gestaltungselemente- leiten Augen und bieten Ruhepunkt- sorgen für elegantes und klares Design (Flat-Design)
• Drittel-Regel Drittel-Regel oder Zwei-Drittel-Regel ist Vereinfachung des Goldenen Schnitts
• Extreme Programming (XP) - iteratives und inkrementelles VorgehensmodellGrundprinzipien:- Kunde vor Ort (im Entwicklerteam)- kleine Versionsschritte (Funktion nimmt nach und nach zu)- Paar-Programmierung (aktiver Programmierer / Beobachter)- Codierungsstandard (Layout, Kommentierung)- kollektiver Code-Besitz (jeder ist berechtigt, jeden Code zu ändern)- Testen (test first-Prinzip (vor Code))- Refaktorisierung - 40-Stunden-WocheNachteil (eher für kleine Teams geeignet)
• Scrum - empirisches Vorgehensmodell- sehr transparent, viele Beurteilungen und AnpassungenProduct Backlog (priorisierte Liste zu entwickelnder Produktinformationen)Sprint Backlog (Übersicht der für einen Sprint zu erledigende Aufgaben)Impediment Backlog (enthält alle aktuell identifizierten Hindernisse mit Datum)Burndown Chart (dient als Visualisierung bereits geleisteter und noch verbleibender Arbeit in einem Sprint)Rollen im Scrum:- Scrum-Team (Product Owner (erstellt Product Backlog mit User Stories (Zusammenarbeit))Entwicklungsteam (entwickelt eigenverantwortlich)Scrum Master (Einführung und Überprüfung der Scrum-Regeln, Führungskraft))- Externe Rollen (Customer, User und Management)Spring Planning (dauert max 2 Std pro Sprint-Woche) -> Sprint Backlog)Daily Scrum (max 15min)Sprint Review (Ende vom Sprint - Ziel erreicht?)
• Vorteile Trennung UI und Datenmodell - Modulisierbarkeit, Fehlerlokaisierung, Wartbarkeit- Erweiterbarkeit- Austauschbarkeit der Benutzerschnittstelle (Kommandozeile vs. GUI)
• Model-View-Controller trennt Darstellung (View) von Programmsteuerung (Control) und Datenmodell (Model) siehe Grafik bzw. Beobachtermodell
• Fehlerarten Capture Error: Vertraute Aktionen kapert eigentlich gewollte Aktion (Büroschlüssel für Haustür verwenden)Description Error: Aktionen werden am falschen Objekt durchgeführt (Herdschalter)Mode Error: korrekte Aktion wird im falschen Modus ausgeführt (Landung im Sinkflugmodus)
• Anzeige
• Benutzerverhalten - Safe Exploration (Vor und Zurück)- Instant Gratification (Entscheidung ob jetzt oder später)- Keyboard Only (Keine Maus)
• Dashboard - arrangiert Daten in einzige Darstellung, welche regelmäßig aktualisiert wird- benutzerspezifiziert
• Canvas Plus Palette - Einsatz in grafischen Editoren- Leinwand (Canvas) und ikonische Palette (Paint links)
• Wizard - leitet Benutzer Schritt-bei-Schritt durch Aufabe in vorgegebener Reihenfolge
• Navigationsmodelle Hierarchical Tree (Top Down)Nested Doll (linear z.B. Einstellungen)Hub and Spoke (zentraler Screen z.B. Home)Filtered View (unterschiedliche Ansichten auf gleichen Daten (Artisten, Songs, Now Playing))
• Sequence Map Sequence Map zeigen Benutzer während der Stepwise-Navigation 1. wo er schon war2. wo er sich gerade befindet3. wieviel noch kommt
• Pyramid Sequentielle Menge mit vor und Zurück navigieren.Unten Liste aller (Pr0gramm, Bildbetrachtungsprogramme)
• Modal Panel Modal Panel / Window zeigt genau ein Fenster an und zwingt Benutzer zur Interaktion in diesem bevor andere AUfgaben weitergeführt werden können
• Deep-linked State Deep-linked State erlaubt es Benutzern Status oder Ort einer Seite zu speichern und/oder zu versenden. (Google-Maps-Koordinaten z.B.)
• Menu Page vs. Fat Menu Menu Page - grobe Übersicht Fat Menu - grobe Übersicht mit Details
• Escape Hatch Escape Hatch erlauben es Benutzern von jeder Seite einer Anwendung zu einer bekannten (Start-) Seite zurückzukehren.
• Sitemap Footer Ähnlich wie Fat Menu oder Menu Pages, aber unten auf der Seite
• Sign-in-Tools Sign-in Tools werden meist oben rechts dargestelltSign-in Tools zeigen z.B. Shopping Cards, Profile oder Account Settings
• Dynamische Displays Dynamische Displays erlauben es, beschränkte Display-Flächen zu erweiternBeispiele: Scrollbars, Tabs Accordions, Moveable Panels etc.
• Visueller Framework Visueller Framework dient als Basis- Layout für Gestaltung mehrerer Seiten, um kognitiven Aufwand der Wegfindung zu reduzieren• Visueller Framework sollte aber trotzdem genügend Flexibilität bieten
• Center Stage Center Stage unterstützt Benutzer bei Erfüllung einer bestimmten (Haupt-)Aufgabe.Beispiel: Powerpoint (Überschrift, Inhaltsboxen)
• Grid of Equals Grid of Equals zeigt Menge von Items, die in Gitter oder Matrix angeordnet sind alle Elemente sollten gleichen Template folgen (Google-Startseiten)
• Titled Sections Titled Sections definieren verschiedene getrennte Abschnitte mit visuell hervorstechenden Überschriften.
• Accordion Accordion stellt Inhalte in kollinearem Stack von Panels dar- Panels lassen sich öffnen und schliessen
• Diagonal Balance Diagonal Balance unterstützt Balance (vonlinks oben nach rechts unten) bei asymmetrischer Anordnung von Objekten Diagonal Balance unterstützt natürlichen (aber kulturkreisabhängigen) Leseverlauf
• Anzeige
• Responsive Disclosure Responsive Disclosure startet mit minimaler Benutzerschnittstelle, die Schritt-für-Schritt weitere Elemente zur Auswahl anbietet
• Responsive Enabling Responsive Enabling startet mit Benutzerschnittstelle, die weitestgehend disabled erscheint und bei der Schritt-für- Schritt mehre Elemente enabled werden
• Liquid Layout Liquid Layout passt Inhalt an sich verändernde Fenstergrößen an, so dass Fenster konstant “gefüllt” sind
• Two-Panel Selector Two-Panel Selector erlaubt Auswahl einzelner Items in einzigen Side-by-Side- Ansicht- Liste neben/unter-/oberhalb selektiertem EintragBeispiel: Emails, Ordnerstruktur
• One-Window Drilldown One-Window Drilldown erlaubt Auswahl eines Items aus Liste, wobei selektierte Item daraufhin bildschirmfüllend zuvor dargestellte Liste ersetzt.One-Window Drilldown wird häufig bei geringem Bildschirmplatz verwendet.Beispiel: Ipod Nano (Musik -> Playlists etc)
• Carousel Carousel ordnet Liste von Items in horizontalen Streifen oder Bögen an, innerhalb dessen Benutzer vor- und zurück navigieren kann z.B. mittels swipen oder scrollen• Carousel benötigt weniger vertikalen Platz als Thumbnail Grid
• Row Striping Row Striping verwendet alternierende Schattierungen des Hintergrundes zur besseren Wahrnehmbarkeit zusammenhängender Items in zeilenweisen Listen
• Pagination Pagination unterteilt lange Liste von Einträgen in einzelne Seiten
• Jump to Item Jump to Item erlaubt es Benutzern beim Eintippen des Item-Namen direkt an entsprechende Stelle in Liste zu springen
• Alphabet Scroller Alphabet Scroller zeigt Buchstaben entlang einer Scrollbar zur Auswahl von alphabetisch geordneten Einträgen
• Cascading Lists Cascading Lists stellen Hierarchie von selektierbaren Listen von Items dar• Selektion eines Items in Cascading Lists führt zu Darstellung der Kinder des Items in nächster Liste, welche meist rechts daneben dargestellt wird
• New-Item Row New-Item Row erlaubt es Benutzer neues Item am Anfang oder Ende einer Liste durch One-Click zu erstellen
• Hover Tools Hover Tools sind Button-/Aktionselemente, deren Aktionsmöglichkeiten dem Benutzer erst sichtbar werden, wenn Mauszeiger Button-/Aktionselemente (teilweise) verdeckt Hover Tools verhindern Überhäufung von Aktionen und helfen UI übersichtlicher zu gestalten
• Action Panel Action Panel zeigen verbundene Aktionen, die im UI ständig sichtbar sind• Action Panel werden anstelle von Menus oder Button Groups verwendet, wegen- Sichtbarkeit- verfügbarer Platz- Freiheit bei Präsentation
• Prominent Done Button ○ Prominent Done Button wird am Ende eines visuellen Flusses zum Abschluss (vgl. Arbeitsgedächtnis) einer Transaktion verwendet○ Prominent Done Button sollte mit aussagekräftigen Text (nicht Icon) gekennzeichnet werden
• Smart Menu Items Smart Menu Items sind Menü-Einträge, die Aussehen in abhängig von tatsächlichen Aktion modifizieren können• Smart Menu Items sollten verwendet werden, wenn Einträge je nach Kontext unterschiedliche Aktionen hervorrufen können, z.B. Undo
• Progress Indicator Progress Indicator informiert Benutzer über Fortschritt bei Aufgabe mit längerer Ausführungszeit• Progress Indicator sollte zeigen: (1) was gerade passiert, (2) wie viel bereits geschafft ist, (3) wie lange es noch dauert,(4) wie Prozess gestoppt werden kann
• Cancelbility • Cancelbility gibt Benutzer Möglichkeit, zeitaufwändigen Prozess ohne Nebeneffekte zu beenden• Achtung: Ziel sollte es immer sein, zeitaufwändige Prozesse zu verkürzen
• Multi-Level Undo • Multi-Level Undo erlaubt Benutzern eine Serie von Aktionen schrittweise (durch Stack) umzukehren• Multi-Level Undo vereinfacht Erkundung und Erlernen eines UIs
• Command History ○ Command History zeigt Benutzer chronologische Liste der durchgeführten Aktionen○ Command History werden i.d.R. mit Multi- Level Undo kombiniert

zurück  |  weiter 3 / 4