Themen heute
- Gestaltgesetze
- Interface Laws
- Touch Gesten
- Das Programm „Sketch“
- Zwischenpräsentation am 24.5.18
Gestaltgesetze
Gestaltgesetze basieren auf Grundlagen der Gestaltpsychologie. Die Gestaltgesetze begründen sich dabei auf dem Wahrnehmungserleben von Bildern. Wie nimmt man Raum, Vordergrund, Hintergrund und Hauptmotiv im Verhältnis zu seiner Umgebung wahr. Versuchsreihen ergaben dabei, dass bestimmte Anordnungen, Strukturen und Formen ähnliche, wenn nicht sogar gleiche Interpretationen des Gesehenen in uns auslösen.
Das Gesetz der Nähe
Elemente, die näher beieinander stehen, werden als eine Einheit wahrgenommen
praktischer Einsatz
Interface-Elemente, die zusammengehören, können so einfach gruppiert werden
Das Gesetz der einheitlichen Verbundenheit (1)
Senkrechte Gruppierung der Kreise und Quadrate
Das Gesetz der einheitlichen Verbundenheit (2)
Senkrechte Gruppierung der verbundenen Elemente
Das Gesetz der Geschlossenheit (1)
Unser Gehirn kann nicht anders: Es fängt sofort an, aus den einzelnen Punkten/Sternen ein größeres Ganzes zu sehen …
Das Gesetz der Geschlossenheit (2)
Wir nehmen geschlossene Formen als eigenständige Objekte war – auch wenn diese unterbrochen werden. Dabei wirken die unterbrochenen Formen meist interessanter als die reinen Grundformen.
Das Gesetz der Prägnanz
Wenn wir Elemente ansehen, die unterschiedlich interpretiert werden können, versuchen wir, die möglichst einfachsten Formen zu sehen – hier also Quadrate und einen Kreis.
Das Gesetz der Ähnlichkeit
Beachtet, wie stark die Farbe dafür sorgt, dass die blauen Elemente als Gruppe wahrgenommen werden!
Das Gesetz der guten Fortsetzung
Elemente, die sich auf einer durchgehenden Linie oder Kurve befinden, werden als Einheit wahrgenommen oder als zusammengehörig aufgefasst.
Das Gesetz der guten Fortsetzung (2)
Da kann man manchmal ganz schön daneben liegen …
Das Gesetz der guten Fortsetzung in der Natur
Eine Theorie besagt, dass Räuber wegen der Streifen auf dem Fell des Zebras Schwierigkeiten haben, ein Individuum in der Herde zu identifizieren.
Das Gesetz der Symetrie
Wenn Objekte eine symmetrische Form bilden, werden diese vom Betrachter besser wahrgenommen
Das Gesetz der Figur-Grund-Beziehung
Wenn das Verhältnis zwischen Figur und (Hinter-)Grund nicht eindeutig ist, kann das zu Irritationen beim Betrachter führen.
Dies kann man bewusst einsetzen, um z.B. die Neugier eines Betrachters zu erhöhen.
Das Gesetz der Figur-Grund-Beziehung (2)
Schrift: Gill Sans
Für eine gut lesbare, interessannte Schrift ist nicht nur die Form der Buchstaben wichtig, sondern auch die bewusste Gestaltung der Zwischenräume. Figur & Grund müssen gestaltet sein.
Das Gesetz des gemeinsamen Schicksals
Durch die Bewegung werden Elemente, die sich in die gleiche Richtung bewegen, als Gruppen wahrgenommen – sogar, wenn sie ganz unterschiedliche Formen haben!
Klickt mal auf die Kreise und Rechtecke – und haltet dabei die Mousetaste gedrückt…
Das Gesetz der Erfahrung
Wahrnehmen ist Wiedererkennen. Bekannte Formen werden auch bei Abstraktion erkannt. Wahrnehmung hat also mit Erfahrung und Lernprozessen zu tun und dient somit auch wieder zum Sparen von Energie.
Beleuchtung von Oben
Eine Beleuchtung von Oben wirkt natürlich, sachlich.
Ungewöhnliche Beleuchtungsrichtungen sollten nur eingesetzt werden, wenn diese inhaltlich Sinn machen.
Wichtige Interface Gesetze
Fitt's Law
Die Menüleiste am Mac hat eine unendliche Höhe und ist deswegen so bequem zu erreichen.
Fitt's Law: The Time required to move to a target is a function of the target size and distance to the target
Universal Principles of Design, S. 82
Vorsicht bei kleinen Bildschirm-Elementen!
Leute, die Schwierigkeiten haben, die Mouse zu bedienen, können kleine Elemente häufig nicht auswählen – Alternativen wie z.B Ansteuerung via Tastatur (Pfeiltasten und/oder TAB-Taste) ermöglichen.
Fitt's Law (2)
Popup-Menüs sind u.a. so beliebt, weil sie direkt bei der aktuellen Mouse-Position erscheinen – und damit der „Cursor-Weg“ schön kurz ist …
Fitt's Law (3)
Macht die Buttons, die Euch besonders wichtig sind, so groß, dass diese einfach zu bedienen sind!
Hick's Law
The time it takes to make a decision increases as the number of alternatives increases.
Universal Principles of Design, S. 102
Umso mehr Tiere zu sehen sind, umso länger braucht ein Jäger, sich zu entscheiden …
Umso mehr Buttons ein Interface hat…
Hick's Law (Interface)
When designing for time-critical tasks, minimize the number of options involved in a decision to reduce times and minimize errors.
Universal Principles of Design, S. 120
Flexibility-Usability Tradeoff
iPhone Calculator, Portrait & Landscape
As the flexibility of a system increases, its usability decreases.
Universal Principles of Design, S. 86
Interfaces für Anfänger sollten eine hohe Nutzbarkeit (Usability) haben und dafür nicht so viele Auswahlpunkte anbieten.
Das iPhone unterscheidet sehr elegant zwischen dem „Normal-Modus“ und „Experten-Modus“.
Murphy’s law
„Distracted Walking“ – dafür muss man mittlerweile in den USA Strafe zahlen!
Whatever can go wrong, will go wrong.
Deswegen:
- damit rechnen, dass Menschen Fehler machen;
- sinnvolle Grundeinstellungen verwenden;
- schwerwiegende Benutzerfehler schwer oder ganz unmöglich machen;
Gestaltgesetze am Schneewittchensarg
Überlegt mal, welche Gestaltgesetze bei diesem berühmten Gerät von Braun zum Einsatz kommen…
Touch Gesten
The Touch Gesture Reference Guide is a unique set of resources for software designers and developers working on touch-based user interfaces.
Ihr könnt Euch das PDF hier herunterladen!
Sketch – the digital design toolkit
Sketch is a design toolkit built to help you create your best work — from your earliest ideas, through to final artwork
Sketch entwickelt sich gerade zum wichtigsten Tool für alle UI- und UX-DesignerInnen! Wer gerne in diesem Bereich arbeiten möchte, sollte das Programm kennen…
Sketch ist auf allen iMacs im Raum M014 und M403 installiert – und es gibt eine kostenlose Testversion, die 30 Tage lang funktioniert.
Leider gibt es Sketch nicht für Windows-Rechner!
Sketch Tutorials
Bitte beschäftigt Euch mit diesem tollen Programm – wenn Ihr die Grundlagen verstanden habt, könnt Ihr Eure App-Layouts damit ziemlich schnell erstellen!
Wireframes
Alternativ zum Ausdruck „Mock-up“ wird der Begriff benutzt, um einen sehr frühen konzeptuellen Prototypen einer Website oder eines Software-Frontends darzustellen. Bezogen auf eine Website sollten Elemente wie Navigation und Inhaltsbereiche Teil dieses Skeletts sein.
Dynamische Wireframes
Diese bestehen aus mehreren Seiten, die als funktioneller Prototyp interaktiv miteinander verknüpft sind. So ist eine Navigation von einer zur anderen Seite möglich.
Wireframes in Sketch
Wireframes sind die „digitale Fortsetzung“ der Papier-Prototypen.
Hierbei liegen schon – mehr oder weniger – die Positionierung der einzelnen Bildschirmelemente, die zu verwendenden Symbole sowie die Schriftgröße fest
Download
Ihr könnt Euch gerne meine Sketch-Datei herunterladen…
Bis zum nächsten Treffen (Sketch Tutorials)
Bitte schaut Euch folgende Filme an:
Sketch Grundkurs bei Lynda.com
Bis zum nächsten Treffen (Wireframe in Sketch)
- Baut Euren Druckdialog als Wireframe in Sketch auf (jede(r) einzeln)
- Bitte bringt die Datei zum nächsten Mal ausgedruckt oder als PDF mit!
Download
Ihr könnt Euch gerne meine Sketch-Datei herunterladen…
Zwischenpräsentation beim nächsten Treffen (24.5.18)
Pro Team maximal 10 Minuten!
Präsentation am Beamer
- pro Team ein Dokument (Powerpoint, Keynote, Acrobat…)
- auf USB-Stick mitbringen
- bitte im Anschluss an die Präsentation per Mail an mich
Kurze Vorstellung von
- Personas & Szenarios
- Konzept
- Paper-Prototypen (abfotografiert)
- User-Tests (erste Ergebnisse & Erkenntnisse)