Kochrezepte für pragmatisches GUI-Design · 2019. 5. 11. · Interpreter Iterator Null object Observer Publish/Subscribe Strategy Template method Visitor Lock Monitor object Scheduler

Kochrezepte für pragmatisches GUI-DesignRoland Weigelt

Mail: [email protected]

Twitter: @RolandWeigelt

Köln, 10. Mai 2019 Blog: weblogs.asp.net/rweigelt

Roland Weigelt

▪ Software-Entwickler (1997-2011)• Comma Soft AG

▪ Senior Product Designer / UX Specialist (seit 2012)• Comma Soft AG

▪ Developer/Designer Digital Signage (seit 2006)• Telekom Baskets Bonn

▪ Sonstiges• Vorträge/Workshops

• bis 2017: Bonn-to-Code.Net, dotnet Cologne

Mein Alltag:

„Roland, wir haben damal eine UI-Frage...“

Welche Farbe soll der Button

haben?


haben?

Dialog oder Popup?


haben?

Dialog oder Popup?

WelcheTabellen-spalten?


haben?

Dialog oder Popup?

WelcheTabellen-spalten?

Wie bilde ich die fachlichen Abläufe ab?

Welche Farbe soll der Button haben? Dialog oder Popup?Welche

Tabellen-spalten?

Wie bilde ich die fachlichen Abläufe ab?

Fragen, Fragen, Fragen

„Kommt darauf an“

Kochrezepte

Rezept: Wo kein Feature, da keine UI

Kein Feature ist kostenlos!

Entwicklung, Tests

Dokumentation

„Cognitive Load“ beim Nutzer

Pflege in zukünftigen Versionen

Change Management

Die ultimative „Feature Filter“-Frage

In welchem realen Szenario...

...kann welcher echte Benutzer...

...welche konkrete Aufgabe erfüllen.

a

And Now for Something

Completely Different...

Raumschiff

Enterprise

Er ist tot,Jim!

„Red Shirt Disease“

„Star Trek TOS“: 430 Besatzungsmitglieder

davon 59 getötet

davon 43 „Rothemden“ ca. 73%

* http://www.sitelogicmarketing.com/analytics-according-to-captain-kirk/

*

http://www.sitelogicmarketing.com/analytics-according-to-captain-kirk/

Grundmuster in Erzählungen

Tod einer Person => Gefahr für alle spürbar

Hauptpersonen werden noch gebraucht

Dann trifft es halt eine austauschbare Person („Red Shirt“)

Weiteres Muster: Hero‘s Journey

z.B. Luke Skywalker in Star Wars (1977)

Factory Dependency InjectionLazy Initialization Object Pool Prototype

Singleton Adapter Composite Decorator Facade Module Proxy

Chain of Responsibility CommandInterpreter Iterator Null object Observer

Publish/Subscribe Strategy Template method Visitor Lock Monitor object Scheduler

Software Design Patterns

User Interface Patterns

Master - Detail

Master - Detail

Master - Detail

Master - Detail

Große PatternsKleine Patterns

Beispiel: Checkbox

Beispiel: Checkbox

Auswahl zwischen zwei klar gegensätzlichen Alternativen

▪ So klar, dass die zweite nicht erwähnt werden braucht

Richtig: Ich stimme den AGBs zu

Falsch: Querformat

Hochformat

Querformat

Wer ist Fan desRibbon Controls in Microsoft Office?

Ribbon

Ribbon

Ribbon

- Gruppierung nach NutzungskontextenErste Ebene

Ribbon

- Gruppierung nach FunktionenZweite Ebene

Ribbon

Viele Funktionen gleichzeitig

hohe Entdeckbarkeit („Discoverability“)

Die richtigen Funktionen für den aktuellen Kontext

„cognitive load“ reduziert

Kriterien für Einsatz

▪ Tatsächlich sehr große Anzahl von Funktionen

▪ Nutzungskontexte mit nicht zu häufigen Wechseln

„Reicht nicht einfach eineHandvoll guter Patterns aus?“

„Warum nicht einfach diebesten Patterns verwenden?“

KompromisseViele

Funktionendirekt

erreichbar

VerständlichWenig Platzverbraucht

?

KompromisseViele

Funktionendirekt

erreichbar


?

KompromisseViele

Funktionendirekt

erreichbar


?

KompromisseViele

Funktionendirekt

erreichbar


?

„Viel hilft viel“

Bedienidee geeignet?

Auswahl-Prozess

UI Patterns

Auswahl-Prozess


UI Patterns

Auswahl-Prozess


Technik/Budget

UI Patterns

Auswahl-Prozess


Technik/Budget

Politik/Mode

UI Patterns

Pattern Libraries

ui-patterns.com

http://ui-patterns.com/


www.welie.com

http://www.welie.com/

http://www.welie.com/

patterntap.com/patterntap

https://patterntap.com/patterntap

https://patterntap.com/patterntap

Rezept: Pattern Libraries nutzen

Beispiel: ui-patterns.com

Was?

Warum?

Wie?

...


Rezept: Waches Auge für UIs

User Interfaces bewusst betrachten

▪ Gelungene Darstellungen

▪ Gut geschriebene Texte

▪ Angenehme Interaktionen

Screenshots speichern

Was sind die grundlegenden Muster?

Vor- und Nachteile herausarbeiten

Umgang mit Komplexität

Elemente...

Entfernen

▪ Features weglassen oder automatisieren.

Organisieren / Gruppieren

▪ Darstellung übersichtlicher gestalten

Verbergen

▪ Funktionen nur bei Bedarf einblenden

Verlagern

▪ Funktionen an anderer Stelle anbieten

Pattern für „Verbergen“: Progressive Disclosure

„Schrittweise Offenlegung“

Verbergen von Elementen, die nicht immer notwendig sind

Einblenden nur bei Bedarf

(UI-)technisch: „+“-Button, „mehr...“-Link, etc.

Fachlich: Wenn bestimmte Auswahl getroffen, dann...

Progressive Disclosure

Spezialfall: Responsive Disclosure

„Reagierende Offenlegung“

Trigger: Eingabe, die ohnehin erfolgen würde

Idee: Weniger Mikromanagement

Responsive Disclosure

Responsive Disclosure

Verwandt: Responsive Enabling

Responsive Enabling

Responsive Enabling

Responsive Disclosure Responsive Enabling

Ersteindruck Ich sehe nur Relevantes Optionen sind klar

Vorteile • Komplexität zunächst verborgen

• Dynamik möglich

• Wiedererkennungseffekt

• Keine Überraschungen

Nachteile Aufklappen u.U. überraschend • Evtl. nicht offensichtlich, wasdie Elemente aktiviert

• Viele deaktivierte Bereicheverwirrend

Layout • Entweder: Änderung der Größe ggf. „Springen“

• Oder: Leere Bereiche

Gesamt-Layout bleibt gleich

Darstellung von Daten

Beispiel: Buch

Eigenschaften

Identifizierend?

▪ Falls ja: Gut sichtbar darstellen

Selbstbeschreibend?

▪ Falls ja: ggf. Beschriftung weglassen

Zusammenhang mit anderen Eigenschaften?

▪ Gruppierung, Nähe → Zusammenhang deutlich machen

Eigenschaften

Endliche Anzahl von Werten?

Ggf. Transformation möglich: Text → Bilder, Farben

Status

Gut

Mittel

Schlecht

Eigenschaften

Endliche Anzahl von Werten?

Ggf. Transformation möglich: Text → Bilder, Farben

Status

Gut

Mittel

Schlecht

-!

Donaudampfschifffahrtskapitänsmützenschnur

Eigenschaften: Texte

Länge bekannt?

▪ Minimal? Typisch? Maximal?

Entwurf vs. Realität

Lorem Ipsum

Donaudampfschifffahrts


Beispiel: Länge von Farbnamen

Elektrische Widerstände: Farbkodierung

▪ z.B. Schwarz, Braun, Rot, Orange, Gelb, Grün, Blau, ...

Autofarben

▪ z.B. Chroma-Blau Metallic, Iridium-Schwarz Mica, ...

7 vs. 2 Farbnamen!


Was ist wichtig?

▪ Anfang / Ende / Mitte / Alles?

Evtl. gekürzte Anzeige sinnvoll?

Das Geheimnis erfolgreicher GUI-Designer [...]

D:\Talks\ ... \2019-05-10 - User Interface Patterns.pptx

Seriennummer: 2010-...-A

Eigenschaften: Zahlen

Groß/Klein (1 Million vs. 1 Dutzend)

Nur groß/klein oder gemischt? (Ausreisser)

Negative Werte?

▪ unmöglich / normal / ungewöhnlich / alarmierend?

usw. usw.

Weiß jemand, was ein Telsiri ist?

Telsiri

Fiktive Lebensform als Beispiel für fremde Fachdomäne

Auftrag: Detailansicht für Telsiri-Datenbank

Annahmen

▪ Sehr spezifisches Fachvokabular

▪ Unerwartete Zusammenhänge

▪ Keine Zeit für echte Einarbeitung

▪ Telsiri-Experte steht für grundlegende Fragen bereit

Eigenschaften eines Telsiri

Name

Trilaten : char

Tsibutsi : string[10]

Famsupel : string[100]

Schlubiz-Faktor : integer

Splurby, Noobah, Pizquat : string[5]

: string[1024]

Keine gute Idee:

Name: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Trilaten: XTsibutsi: XXXXXXXXXXFamsupel: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXSchlubiz: 1234567890Splurby: XXXXXNoobah: XXXXXPizquat: XXXXX

“Lipstick on a pig”

Name

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Trilaten: X

Tsibutsi

XXXXXXXXXX

FamsupelXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Schlubiz1234567890

Splurby: XXXXX Noobah: XXXXX Pizquat: XXXXX

Schritt 1: Priorisieren

Name : string[1024]

Trilaten : char

Tsibutsi : string[10]

Famsupel : string[100]

Schlubiz : integer

Splurby, Noobah, Pizquat : string[5]

Schritt 1: Priorisieren

1. Splurby : string[5] , Trilaten : char

2. Tsibutsi : string[10]

3. Famsupel : string[100]

4. Name : string[1024]

5. Schlubiz : integer

6. Noobah, Pizquat : string[5]

Schritt 2: Was ist als Titel geeignet?

1. Splurby : string[5] , Trilaten : char

2. Tsibutsi : string[10]

3. Famsupel : string[100]

4. Name : string[1024]

5. Schlubiz : integer

6. Noobah, Pizquat : string[5]

Nachgefragt...

Splurby

➢ Immer 5 Zeichen? Buchstaben, Zahlen? Sonderzeichen?

❖ 1. Zeichen Buchstabe, sonst Zahlen/Buchstaben gemischt, Großbuchstaben, keine 0, kein O => z.B. AB1D3

Trilaten

a, m oder z.

Nachgefragt...

➢ Kunde sagt: Name unhandlich – Kompromiss möglich?

➢ Evtl. nur die ersten N Zeichen anzeigen?

➢ Oder in der Mitte kürzen (...)?

❖ Schlechte Nachricht: Freitext

❖ “Stammt ab von”, “ist verwandt mit”, “ähnlich zu”

❖ Dazwischen Gattungs/Familien/Gruppen/...-Bezeichner

➢ Idee: Bezeichner möglichst darstellen, Rest kürzen

Nächster Versuch

Lorem ipsum dolor sit amet ... consectetur adipiscing elit ... sed do eiusmod tempor ... incididunt ut labore et dolore magna aliqua ... Ut enimad minim veniam, quis nostrud exercitation ... ullamco laboris nisi utaliquip ex ea commodo consequat... Duis aute irure dolor ... in reprehenderit in voluptate velit esse ... cillum dolore eu fugiat nullapariatur... Excepteur sint occaecat ... cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum [mehr...]

AB1D3 aSplurby Trilaten Name

Tsibutsi

XXXXXXXXXX


Schlubiz1234567890

Noobah: XXXXX Pizquat: XXXXX

Offensichtliches weglassen


AB1D3 a

Tsibutsi

XXXXXXXXXX


Schlubiz1234567890


Nachgefragt: Tsibutsi?


❖ “10 Zeichen” technisch/historisch begründet

❖ Feste Werte: Floz, Kalmat, Kalmut, Numut, Vamat

➢ Zusammenhang? Reihenfolge?

Fachlich: Kalmut, Numut, Floz, Vamat, Kalmat

Nachgefragt: Tsibutsi?


❖ “10 Zeichen” technisch/historisch begründet

❖ Feste Werte: Floz, Kalmat, Kalmut, Numut, Vamat

➢ Zusammenhang? Reihenfolge?

Fachlich: Kalmut, Numut, Floz, Vamat, Kalmat

Mit Tsibutsi...


AB1D3 a


Schlubiz1234567890


Kalmut

...und Famsupel


AB1D3 a

Famsupel

GHTRWSGFAX XAGXXXXXXX YYYYYYYYY YYYYYY YYY YYYYYYYYYYYYX--X--X--YYY---Y YYHZ 1234567890ABCDEFGHKLMNQ 1234567

Schlubiz1234567890


Kalmut

...und Schlubiz, Noobah, Pizquat


AB1D3 a

Famsupel

GHTRWSGFAX XAGXXXXXXX YYYYYYYYY YYYYYY YYY YYYYYYYYYYYYX--X--X--YYY---Y YYHZ 1234567890ABCDEFGHKLMNQ 1234567

Schlubiz Noobah Pizquat

Kalmut

12.345 axxpq 0-00-xy

Rezept: Details rauskitzeln!

Idealfall: Echtes Wissen in der Fachdomäne.

Minimal: Details erfragen.

▪ Über Boolean, Integer, Double, String hinaus!

▪ Kleine Details -> große Auswirkungen auf die Darstellung

Darüber freuen sich auch externe Designer.

Performance

Performance

Berechnungen: CPU-Leistung vs. Algorithmen

Datenbankabfragen: Server-Leistung vs. Komplexität

Netzwerkzugriffe: Latenz, Durchsatz vs. Datenmenge

Gefühlte Performance

Wie nehmen Anwender die reale Geschwindigkeit wahr?

Gelegenheitsanwender vs. Power-User

Warten auf Ergebnisse vs. Langsame Reaktion

Jakob Nielsen: Powers of 10

0,1 Sekunden

▪ Illusion der direkten Manipulation

▪ Eye Tracking Studien: Fixierung selten länger

1 Sekunde

▪ Gefühl der Kontrolle

▪ Anwender bleiben fokussiert auf die Aufgabe

10 Sekunden

▪ “Flow” gebrochen

▪ Aufmerksamkeitsspanne überschritten

2 Sekunden

Klick mich!

Lorem ipsum dolor sit amet, consecteturadipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua.

• Ut enim ad minim veniam, quis nostrudexercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

• Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiatnulla pariatur.

Klick mich!Klick mich!




Klick mich!




0,25 Sekunden





Klick mich!




Mit Anfangs-Delay





2 sec





0,25 sec

Rezept: Geeignete Reaktion der UI

„Habe ich geklickt?“ : UI sollte sofort „irgendwie“ reagieren

„Passiert da etwas?“ : Animation suggeriert Aktivität

Unbekannte Dauer: Animation nicht sofort

Bei sehr lange Dauer „was habe ich davon“ beantworten

▪ „Wir berechnen die günstigsten Flüge für Sie“

Warten auf ein Ergebnis

Zeigen



Roland WeigeltSenior Product Designer / UX Specialist

Comma Soft AG

Teilergebnisse liefern

Zeigen



Comma Soft AG



Comma Soft AG


Zeigen



Comma Soft AG



Comma Soft AG


Rezept: Teilergebnisse/Platzhalter

Optimal: Platzbedarf vorher bekannt

Vermeiden: „Springen“ vs. klickbare Buttons

Mittel vs. Zweck

Foto: Roland Weigelt

Beispiel: LED-Werbebanden

Foto: Roland Weigelt



Scheinbare Helligkeit abhängig vom Hallenlicht

Deshalb: Helligkeitsregelung in der Abspiel-Software

Technik

Helligkeit: implementiert über Pixel Shader

Opazität: nur eine kleine Änderung im Code

Y-Position: nur eine andere kleine Änderung

Idee: „DJ-mäßig“ weichzwischen Inhalten wechseln

Aus dieser UI...

…wird diese UI:

Ein Schritt zurück: Was ist der Zweck?

Weicher Übergang von A ...

Innerhalb einer gewissen Zeitspanne

▪ Zu kurz → erscheint als harter Schnitt

▪ Zu lang → Timing passt nicht (z.B. zum Hallensprecher)

Wie wichtig ist hier Feinkontrolle?

▪ Erfahrung: 0,7 sek in den meisten Fällen OK

Farben Meier – 4 x in Bonn! Telekom Baskets Bonn

... nach B

Neue UI

Weiter >

Rezept: Zweck im Blick behalten

Bedienelement (Control) : Mittel

Zu erfüllende Aufgabe : Zweck

Vorsicht, wenn das Mittel „naheliegend ist“

▪ Entwickler 1: „Ich habe da schon ein fertiges Control“

▪ Entwickler 2: „Die API steht schon“

▪ Kunde: „Wir wollen ein Karussel/Dashboard/...“

Fazit

Wo kein Feature, da keine UI

Denken in Patterns

▪ Pattern Libraries nutzen, waches Auge für UIs

Details rauskitzeln

Gefühlte Performance beachten

▪ Reaktion der UI auf Eingaben, Platzhalter

Mittel nicht mit Zweck verwechseln!

Kochrezepte für pragmatisches GUI-Design

VIELEN DANK!

Folien auf der DNCGN-Website (oder Mail an [email protected])

Documents

Kochrezepte für pragmatisches GUI-Design · 2019. 5. 11. · Interpreter Iterator Null object Observer Publish/Subscribe Strategy Template method Visitor Lock Monitor object Scheduler