Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch...

56
Spaß, Verwirrung, Furcht – und Basketball @RolandWeigelt [email protected] UX unter Stress: Stolpersteine und Lessons Learned

Transcript of Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch...

Page 1: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Spaß, Verwirrung, Furcht– und Basketball

@RolandWeigelt [email protected]

UX unter Stress: Stolpersteine

und Lessons Learned

Page 2: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Roland Weigelt

•Comma Soft AG in Bonn

•1997 – Software-Entwickler

Produkt INFONEA® (Bereich Business Intelligence)

Frontend-Entwicklung, Interesse an GUIs

•2012 – User Experience Specialist

Konzepte, Mockups, etc. – wenig Coden

Weiterhin Software-Entwicklung als Hobby

@RolandWeigelt

Page 3: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Hobby / Nebenjob

•Telekom Baskets Bonn

Basketball Bundesliga (BBL)

Kein Top-Budget Viel Do-it-Yourself

•Aufgabe: Multimedia in der Halle

PowerPoint, Video, Software-Entwicklung

Foto: Jörn Wolter, www.wolterfoto.de

Page 4: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Foto: Roland Weigelt

Page 5: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Foto: Roland Weigelt

Page 6: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Foto: Roland Weigelt

Page 7: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Foto: Beatrice Treydel, www.gesichter-bonns.de

Page 8: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Foto: Ritchy Ohm

Page 9: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Inhalte

•Vorproduzierte Dateien

PowerPoint

Bilder (jpg, png,...)

Videos (mpg, mov, wmv...)

Page 10: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Foto: Roland Weigelt

Texte„Bauchbinden“

für Live-Bilder

Page 11: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Foto: Roland Weigelt

Texte„Bauchbinden“

für Live-Bilder

Page 12: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Foto: Roland Weigelt

Texte

„LiveTexter“

Vorbereitete Texte

Spontane Eingaben

unter Zeitdruck

„Bauchbinden“

für Live-Bilder

Page 13: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Statistiken

Page 14: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Statistiken

Page 15: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

LED Module

Page 16: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

SpaßVerwirrung

Furchtund Basketball

Page 17: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Ich bin der Anwender

Page 18: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Kontext

Page 19: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Zu Hause

Foto: Ritchy Ohm

Page 20: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

In der Halle

•Arbeitsplatz

Rund ein halbes Dutzend Computer

Mäuse, Tastaturen, …

•Event

Ablauf nicht 100%ig planbar

Jede Menge (wichtiger) Funkverkehr

Page 21: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Action!

Foto: Sebastian Derix, www.sebastianderix.de

Page 22: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Was ist, wenn ich versage?

Page 23: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Stolpersteine,Lessons Learned

Page 24: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

•#1„Ist das jetzt live?“

Page 25: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Vorbild: Hardware

Werbung

Cam

Statistik

Infos

Videoleinwände

Monitor

“Program”

“Preview”

1 2 3 4

Take

Page 26: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Vorbild: Hardware

Rear

projection

screen(s)

Monitor

“Program”

“Preview”

1 2 3 4

Take

Werbung

Cam

Statistik

Infos

Page 27: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Vorbild: Hardware

Program

Preview

Page 28: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Zustand: an

Page 29: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Zustand: aus

Page 30: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Viel zu unauffällig!

Page 31: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Zustand: an

Page 32: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Zustand: aus

Page 33: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Konflikt:Deutlich vs. Schön

Page 34: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

•#2„Passiert gleichdas Richtige?“

Page 35: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Optimal: Vorschau

Page 36: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Vorschau

•Videoleinwände

1024 x 768 Pixel (4:3)

Skalieren OK!

Sehr große Hilfe

•LED Module

8448 x 80 Pixel

Bei Skalierung z.B. auf

844 x 8 keine Details

Werbung: Ausschnitte OK

Page 37: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Undo/Redo

Page 38: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

•#3„Was ist damit gemeint?“

Page 39: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

UI-Texte

•Ziel: Kurz, Prägnant, Präzise

•Tipp für Dialogtexte (1-3 Sätze):

Text in Notepad o.ä. schreiben

Kopieren, Bearbeiten, Kopieren

Gnadenlos kürzen

Viele Versionen, alte Versionen zunächst behalten

Page 40: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Vorsicht vor verstecktenÜbersetzungen!

Page 41: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Beispiel

•Offizieller Name der Begegnung (BBL)

z.B. Telekom Baskets Bonn vs. ALBA BERLIN

Zum Vergleich die NBA-Bezeichnung:

ALBA BERLIN at Telekom Baskets Bonn

Page 42: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Team Presentation

•8 Minuten vor Spielbeginn

Licht aus, laute Musik

„Willkommen zum heutigen Spiel“

„Die Schiedsrichter der Partie sind...“

„Hier die Spieler von ALBA BERLIN“

„Für Sie, das Baskets Dance Team!“

„Und nun, für Bonn, die Telekom Baskets Bonn!“

Page 43: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Aufgabe

•Zwei Knöpfe...

Option 1

Option 2

Page 44: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Schnell!

•Welcher Knopf für das Team von ALBA BERLIN?

Heim

Gast

Siehe: Steve Krug – Don‘t Make me Think

Page 45: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

2. Versuch

•Welcher Knopf für das Team von ALBA BERLIN?

Telekom Baskets Bonn

ALBA BERLIN

Page 46: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Implizit vs. explizit

•Möchten Sie das Dokument löschen?

•vs

•Möchten Sie “Kannwech.docx” löschen?

Page 47: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

•#4Wieviel Feineinstellung?

Page 48: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Tatsache:Die LED-Module

sind verdammt HELL!

Page 49: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Helligkeitseinstellung

•Für Tests: 0 – 100%

•Normal: 40 – 60%

Es gibt nicht „den einen“ richtigen Wert

Problem: Scheinbare Helligkeit

•Hallenbeleuchtung: Warmup/Cooldown

•Daher: Feineinstellung gut und wichtig

100%

0%

Page 50: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Hinter den Kulissen

•Helligkeit: implementiert über Pixel Shader

•Opazität: nur eine kleine Änderung im Code

•Y-Position: nur eine andere kleine Änderung

Page 51: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Idee:Weiche Übergänge

Page 52: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Aus dieser UI...

Page 53: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

…wird diese UI:

Page 54: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Ein Schritt zurück

•Was ist der Kern der Sache?

Übergang von Inhalt A nach B

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

Page 55: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Neue UI

Page 56: Spaß, Verwirrung, Furcht und Basketball · Siehe: Steve Krug –Don‘tMake me Think. 2. Versuch • Welcher Knopf für das Team von ALBA BERLIN? Telekom Baskets Bonn ALBA BERLIN.

Fazit

•Ohne (Selbst)vertrauen kein Spaß

Zustände auch unter Stress erkennbar

Wenn möglich: Preview

Implizit vs. Explizit, „Don‘t make me think“

•Denkbarer vs. tatsächlicher Nutzen

Grundlegendes einfach, Nötiges möglich

Gewissheit erst durch Testen in der Praxis

@[email protected]