fun, confusion, fear and basketball (ux lx 2014)

62
Fun, Confusion, Fear – and Basketball Roland Weigelt Comma Soft AG, Bonn, Germany [email protected] @rweigelt [email protected] @RolandWeigelt (DE)

Upload: rweigelt

Post on 11-Aug-2014

2.024 views

Category:

Design


1 download

DESCRIPTION

In the session I talk about UX stumbling blocks and lessons learned when I developed a software for rear-projection screens and LED perimeter advertising systems for the local Basketball club. Even though I was developer, UX designer and user all in person, there were situations where I had problems using it under the time pressure of a home game, fueled by the fear of messing up in front of an audience of 6000 people.

TRANSCRIPT

Page 1: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Fun, Confusion, Fear– and Basketball

Roland WeigeltComma Soft AG, Bonn, Germany

[email protected]

@[email protected]

@RolandWeigelt (DE)

Page 2: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Roland Weigelt

•Comma Soft AG in Bonn, Germany

•1997 – Software Developer

Product INFONEA® (Business Intelligence)

Frontend Development, interest in UIs in general

•2012 – UX Specialist / Senior Product Designer

Concepts, Mockups, etc. – very little coding

Still writing software as a hobby

Page 3: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Hobby Turned Side Job

•Telekom Baskets Bonn

BEKO BBL (1st German Division)

•Job: Taking care of multimedia in the arena

Content creation, software development

Photo credit: Jörn Wolter, www.wolterfoto.de

Page 4: Fun, Confusion, Fear and Basketball (UX Lx 2014)

…applications I‘ve written for the

rear projection screens

LED advertising system

…(some) of the UI issues I‘ve run into

…and the general lessons learned

Photo credit: Sebastian Derix, www.sebastianderix.de

This Talk is About...

Page 5: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Photo credit: Roland Weigelt

Page 6: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Photo credit: Roland Weigelt

Page 7: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Photo credit: Roland Weigelt

Page 8: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Photo credit: Beatrice Treydel, www.gesichter-bonns.de

Page 9: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Media

•Pre-produced media files

PowerPoint

Images (jpg, png,...)

Videos (mpg, mov, wmv...)

Page 10: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Photo credit: Roland Weigelt

Captionsfor the Live Camera

(aka „Lower Thirds“)

Page 11: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Photo credit: Roland Weigelt

Captionsfor the Live Camera

(aka „Lower Thirds“)

Page 12: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Photo credit: Roland Weigelt

Captionsfor the Live Camera

(aka „Lower Thirds“)

„LiveTexter“ Most captions are prepared

before the arena opens

Some have to be typed

„on the fly“, within seconds

Page 13: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Statistics

Page 14: Fun, Confusion, Fear and Basketball (UX Lx 2014)
Page 15: Fun, Confusion, Fear and Basketball (UX Lx 2014)

LED Modules

Page 16: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Fun

Page 17: Fun, Confusion, Fear and Basketball (UX Lx 2014)

FunConfusion

Fearand Basketball

Page 18: Fun, Confusion, Fear and Basketball (UX Lx 2014)

FunConfusion

Fearand Basketball

Page 19: Fun, Confusion, Fear and Basketball (UX Lx 2014)

...if I am the user?

Page 20: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Context Matters

Page 21: Fun, Confusion, Fear and Basketball (UX Lx 2014)

At Home

Photo credit: Ritchy Ohm

Page 22: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Action!

Photo credit: Sebastian Derix, www.sebastianderix.de

Page 23: Fun, Confusion, Fear and Basketball (UX Lx 2014)

What if I Mess Up?

Page 24: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Stumbling Blocks&

Lessons Learned

Page 25: Fun, Confusion, Fear and Basketball (UX Lx 2014)

•#1Is this On?

Page 26: Fun, Confusion, Fear and Basketball (UX Lx 2014)

“Real World”: Hardware

Ads

Cam

Stats

Info

Rear

projection

screen(s)

Monitor

“Program”

“Preview”

1 2 3 4

Take

Page 27: Fun, Confusion, Fear and Basketball (UX Lx 2014)

“Real World”: Hardware

Ads

Cam

Stats

Info

Rear

projection

screen(s)

Monitor

“Program”

“Preview”

1 2 3 4

Take

Page 28: Fun, Confusion, Fear and Basketball (UX Lx 2014)

“Real World”: Hardware

Ads

Cam

Stats

Info

Rear

projection

screen(s)

Monitor

“Program”

“Preview”

1 2 3 4

Take

Page 29: Fun, Confusion, Fear and Basketball (UX Lx 2014)

“Real World”: Hardware

Ads

Cam

Stats

Info

Rear

projection

screen(s)

Monitor

“Program”

“Preview”

1 2 3 4

Take

Page 30: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Colors on Mixer Console

Program

Preview

Page 31: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Software (live)

Page 32: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Software (not live)

Page 33: Fun, Confusion, Fear and Basketball (UX Lx 2014)

That Didn‘t Work, Right?

Page 34: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Software (live)

Page 35: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Software (not live)

Page 36: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Software (not live)

Page 37: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Conflict: Usability vs. Design

Page 38: Fun, Confusion, Fear and Basketball (UX Lx 2014)

•#2Am I About to Dothe Right Thing?

Page 39: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Best: Preview

Page 40: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Preview

•Rear projection screens

1024 x 768 Pixels

Scale down OK!

Helps a lot

•11 LED modules

11 x 768 = 8448 Pixels

80 Pixels high

No good „at a glance“

solution for all modules

Page 41: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Second Best: Undo/Redo

Page 42: Fun, Confusion, Fear and Basketball (UX Lx 2014)

OK: Clear to Understand

Page 43: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Be Absolutely Clear

•If clicking „something“ triggers a critical action,

make this „something“ trivial to understand

under heavy stress

without even thinking.

Page 44: Fun, Confusion, Fear and Basketball (UX Lx 2014)

•#3Don‘t Make Me Think!*

* If you haven't yet, go read the book by Steve Krug!

Page 45: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Scrolling Messages

•The players of the home team

•The players of the guest team

•The members of the dance team

•The next home games

Page 46: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Home vs. Guest

•The official name of a match: „Home vs. Guest“,

e.g. Telekom Baskets Bonn vs. ALBA BERLIN

•NBA naming:

ALBA BERLIN at Telekom Baskets Bonn

Page 47: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Team Presentation

•8 minutes before tip-off:

Lights out, loud music

„Welcome to today‘s match!“

„Today‘s referees are...“

„Here are the players of ALBA BERLIN“

„Here‘s the Baskets Dance Team!“

„And now, here are your Telekom Baskets Bonn!“

Page 48: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Quick!

•Which one to click for the ALBA BERLIN team?

Home Team

Guest Team

Page 49: Fun, Confusion, Fear and Basketball (UX Lx 2014)

2nd Try

•Which one to click for the ALBA BERLIN team?

Telekom Baskets Bonn

ALBA BERLIN

Page 50: Fun, Confusion, Fear and Basketball (UX Lx 2014)

•#4Fine-grained Control –Yes / No / How Much?

Page 51: Fun, Confusion, Fear and Basketball (UX Lx 2014)

The LED Modulesare bright

Page 52: Fun, Confusion, Fear and Basketball (UX Lx 2014)

The LED Modulesare freakin‘ BRIGHT!

Page 53: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Brightness Control

•For testing: 0 – 100%

•Normal: 50 – 75%

No single „correct“ value

Problem: Apparent LED brightness

•Arena lighting: lamp warmup/cooldown

100%

0%

Page 54: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Behind the Scenes

•Brightness: implemented using Pixel Shaders

•Opacity: just a small change in code

•Position: another small change

Page 55: Fun, Confusion, Fear and Basketball (UX Lx 2014)

The Idea:Smooth Transitions

Page 56: Fun, Confusion, Fear and Basketball (UX Lx 2014)

So The UI Went from This:

Page 57: Fun, Confusion, Fear and Basketball (UX Lx 2014)

…to This:

Page 58: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Let‘s Look Again

•What do I want from a smooth transition?

From content A to content B

Within a certain timespan

Too short not that different from a hard cut

Too long timing not matching announcer‘s voice

•Do I really need to control the speed?

Experiments: 0.7 sec OK in most cases

Page 59: Fun, Confusion, Fear and Basketball (UX Lx 2014)

The UI, v2

Page 60: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Takeaways

•Help users build up confidence

Don‘t be too subtle about state.

If possible, provide a preview.

Avoid internal translations: „Don‘t make me think“.

•Decide if fine-grained control is necessary

Don‘t sacrifice the usability of basic actions

But don‘t take it away if users really need control.

Page 61: Fun, Confusion, Fear and Basketball (UX Lx 2014)

You Don’t Knowif You Don’t Test

Page 62: Fun, Confusion, Fear and Basketball (UX Lx 2014)

Thank You!

Roland WeigeltComma Soft AG, Bonn, Germany

[email protected]

@[email protected]

@RolandWeigelt (DE)