c2b_default

User Interfaces - Teil 2

Externes Design: - GUI Control Guildelines nach Galitz - GUI Layout Guildelines nach Galitz

Externes Design: - GUI Control Guildelines nach Galitz - GUI Layout Guildelines nach Galitz

13
0.0 (0)
T. R.
Study
T. R.
Diese Lernkarten behandeln fortgeschrittene Konzepte der Benutzeroberflächen-Gestaltung und sind für Universitätsniveau konzipiert. Sie konzentrieren sich auf GUI-Controls, Layout-Guidelines und die Anwendung von Galitz' Prinzipien, wobei Aspekte wie Gruppierung, Sequenzialität, Platzierung und visuelle Hierarchie im Mittelpunkt stehen. Besonders nützlich sind sie für Studierende und Entwickler, die ihre Fähigkeiten in der Erstellung benutzerfreundlicher und ästhetisch ansprechender Schnittstellen verbessern möchten.
Flashcards
13
Students
2
Language
German
Category
Computer Science
Level
University
Created / Updated
28.01.2014 / 28.02.2014
  • 1  / 13

Flashcards

GUI Control Galitz: Allgemein (1)

Häufig genutzte Knöpfe oben oder links Fenster

GUI Control Galitz: Button (5)

  • Wichtige Buttons oben oder links setzen
  • Beschriftung fängt mit Grossbuchstaben an (möglichst ein Wort) 
  • Möglichst gross (einfach zu treffen)
  • Default Buttons sinnvoll gewählt (z.B. OK)
  • Icons und Hover Text (Tooltip) verwenden

GUI Control Galitz: Toolbars (2)

  • Buttongrösse gleich
  • Text oder Icon zentriert

GUI Control Galitz: TextEntry/Read-Only-Controls (6)

  • “:” Nach dem Titel
  • Titel bei einzelnen Textfeldern vor dem Textfeld oder oben links beim Textfeld 
  • Bei mehreren Textfeldern Oben links beim Textfeld
  • Zahlen rechtsbündig, Text linksbündig
  • Read-only Textboxes haben den gleichen Hintergrund wie window-background 
  • Temporär nicht verfügbare textboxes abgrauen

GUI Control Galitz: SelectionControls (3)

  • RadioButton: Nur eine Auswahl möglich
  • Checkboxes: Mehrere Auswahlmöglichkeiten
  • ListBoxes / DropDown: Einfach- oder Mehrfachauswahl

GUI Control Galitz: Combination Entry/SelectionControls (1)

Spin Boxes

GUI Control für Einzelauswahl

Bestes UI Control: RadioButton Bei wenig Platz: DropDown, ListBox

GUI Control für Mehrfachauswahl

Bestes UI Control: CheckBoxes Bei wenig Platz: Listbox

GUI Control für Offene Einfachwahl

Bestes UI Control: RadioButtons mit „Other“ Bei wenig Platz: DropDown, ComboBox

GUI Control für Wert in einem Bereich setzen

Bestes UI Control: Spin Button Bei wenig Platz: TextBox

Layout Guidelines nach Galitz (6)

  • Balance (Unausgewogen / Ausgewogen (z.B linke Spalte höher als rechte))
  • Symmetrie (Unsymmetrisch / Symmetrisch)
  • Regulität (Unregelmässig / Regelmässig (Durcheinander vs. Geordnet))
  • Vorhersehbarkeit (Unvorhersehbar / Vorsehbar)
  • Sequenzialität = das Auge führen (-> = vor)
  • Gruppierung nach Funktion

Layout Guidelines: Sequenzialität (9)

Oben -> unten

  • Links -> rechts
  • Helle Elemente -> dunkle
  • Einzelnes -> Gruppe
  • Grafik -> Text
  • Farbe -> Schwarz-Weiss
  • Satte Farben -> unsatte
  • Dunkle Flächen -> helle
  • Ungewohnt -> gewohnt

Layout Guidelines: Gruppierung nach Funktion (4 von 9)

  • Visuell unterstützt
  • Nähe
  • Ähnlichkeit
  • Geschlossenheit
  • Gruppen umrandet
  • Hintergrund
  • Gleicher Abstand in der Gruppe
  • Grosser Abstand zwischen Gruppen

Study