Please enable JavaScript.
Coggle requires JavaScript to display documents.
Gestaltungselemente von UIs - Coggle Diagram
Gestaltungselemente von UIs
Navigationselemente
Globale Navigation
Themenbereiche aus Makro-IA
gleiche Form innerhalb Website
Off-Canvas-Navigation f. mobile Geräte
auch im Footer möglich
Breadcrumbs-Navigation
"Wo bin ich?"
Lokale Navigation
optional
seitenspezifisch
"Was befindet sich in der Nähe?"
Content-Navigation
"Was steht in Verbindung zum auf der Seite gezeigten Inhalt?"
direkt in Website Content eingebettet
möglich: personalisierte Content-Nav.
Hyperlinks in Text, Kachel-, Bildelemente
zu angrenzenden/weiterführenden Inhalten weiterleiten
Wegweisersystem
-> IA zugänglich machen
2 wesentl. Funktionen:
durch gesamte Website bewegen
Orientierung auf Website
Suchfunktion
optionale Zusatzfunktion
Besuchern mit spezif. Suchziel schnellen Zugang zu gewünschten Inhalten geben
Alternative zum Nav.system
Frontend: einfach, übersichtlich
Backend: komplexer
Usability: direkt, unmittelbar Suchziel erreichen
Seitengestaltung
Header + Footer
Header
Aushängeschild, Großteil Gesamteindruck
globale Nav.elemente, Kontaktmöglkeiten
Login
Warenkorb
Merklisten
Logo
Key Visual
Footer
früher: Abschluss d. Website, Copyright
heute: Website-Erlebnis fortführen
passende weitere Inhalte
Kontaktmöglichkeiten
teilen über Social Media
4 zentrale Komm.funktionen:
Kontaktfunktion
Navigationsfunktion
Service-/Legal-Funktion
Main-Asset-Funktion
! Verhältnis
Footer : Info Inhaltsbereich
Kopfbereich
Inhaltsbereich
Fußbereich
(früher: Sidebar)
Labels, Icons, Buttons
Icons
schnelles+einfaches Wiedererkennen wichtiger Interaktionselemente
Suchfunktion
Warenkorb
Kundenkonto
Kontaktmögl.keiten
auf zentrale Features/zentralen Mehrwehrt v. Produkten aufmerksam machen (visuelle Untermalung)
Buttons + Labels
Interaktionsgestaltung
soll: auf ersten Blick als klickbarer Button erkennbar (Affordance)
vertrautes Design, Akzentfarben (Call-to-Action)
eckig/rund
Farbe+Größe: sollen Aktion unterstützen
Größe:
Touch UI
-> Bedienbarkeit (Fingergröße), Erreichbarkeit (Position)
Farben + Typografie
Farben
Eindruck
Image
zielger. Emotion
Zusammengehörigk. Elemente
einzelne Elemente hervorheben
menschl. Farbwahrnehmung
Farben -> Emotion (kult. Unters.)
Farbhierarchien
zielgruppenspezf. Farbwirkung
Zusammenspiel Text+Hintergrund
Lesbarkeit, Kontrast
extreme Kontraste
Rot-Grün-Schwäche
Typografie
Auflösung Displays -> mehr Fonts mögl.
Serifen-Schriften
Formulare und Medienobjekte
Gestaltung v. Formularen
Reg.-/Login -> Kundenbereich
Kontaktseite
klare Bez. Eingabefelder
Usability: Pflicht/optional
nur nötigste Infos als Pflichtfeld
Größe Nachrichtenfeld
Längere Formulare auf mehr. Seiten
Fortschritt visualisieren
Rückwärtsnavigation
Key Visuals, Hero Images, Videos
Key Visuals
schneller Eindruck, Image, Emotionen
erster Eindruck auf Website
repräsentieren Charakter Webangebot
Hero Images
großformatig
emotionales Bild+inform. Text
Bilder > Text (Emotion, schnell, einprägsam)
Header-Bereich, zunehmend Inhaltsbereich
Videos
zunehmende Bandbreite
Videos > Bilder (Lebendigkeit)
max. 90 Sek.
Animationen
unterstützend, nicht auffallend
Microinteractions
Skeuomorphismus
Flat Design
Material Design
Microinteractions
Barrierefreiheit
Blinde (Screenreader)
Sehbehinderung (Lesehilfen: vergrößern)
Farbenfehlichtigkeit (kontrastr., farbfreie Texte)
motor. Einschr. (angepasste I.elemente, andere I.modalität)
geistige Fähigk. (einfache Sprache)
Oberfläche + IA
BITV 2002
14 Richtlinien
Vorlage v. W3C (WCAG)
WCAG
4 Designprinzipien
-> Wahrnehmbarkeit
-> Bedienbarkeit
-> Verständlichkeit
-> Robustheit (Kompatibilität)
3 Kritikalitätsstufen
m. versch. Nutzergruppen testen
Screenreader
Adobe Photoshop (Farbfehlsichtigkeit -> Ishihara-Farbtafeln)
Pro Retina
Netzwerk leichte Sprache