Gestaltgesetze, Interface-Laws, Touch-Gesten / 2019-05-02 / Matthias Edler-Golla, CC BY-SA 4.0


|



 



Themen heute

  1. Gestaltgesetze
  2. Interface Laws
  3. Touch Gesten
  4. Das Programm „Sketch“
  5. Zwischenpräsentation am 9.5.19

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

triplet von catlovers

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

Flock of Birds von Martin Fisch

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

Braun SK4 von tomislav medak

Ü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.


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 großen Computer-Labor installiert – und es gibt eine kostenlose Testversion, die 30 Tage lang funktioniert.

Leider gibt es Sketch nicht für Windows-Rechner! Dafür gibt es aber sehr gute Alternativen – siehe nächste Slides!


Figma

Design, prototype, and collaborate all in the browser—with Figma.

Bei Figma arbeitet man direkt im Browser, braucht also keine Software installieren – und kann gemeinsam mit anderen Leuten online zusammenarbeiten!

Figma funktioniert somit auf jedem Betriebssystem (Mac, Windows, Linux), das einen aktuellen Browser installiert hat…


Adobe XD

https://www.adobe.com/de/products/xd.html

Das Programm lässt sich nach dem Registrieren bei Adobe kostenlos herunterladen…


Tutorials in Sketch, Figma und XD

Bitte beschäftigt Euch mit einem dieser tollen Programme, die alle speziell für die Gestaltung von User Interfaces entwickelt wurden. Wenn Ihr die Grundlagen verstanden habt, könnt Ihr Eure App-Layouts damit ziemlich schnell erstellen!

Tutorials bei Youtube


Wireframes

Wireframe-3-4ths by Nick Royer

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.

Wikipedia


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 bzw. XD Tutorials)

Sketch Grundkurs bei Lynda.com


Bis zum nächsten Treffen (Wireframe in Sketch, Figma oder XD)

  • 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 (9.5.19)

Pro Team maximal 8 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)

Danke!

Weitere Vorträge: