View
2.027
Download
1
Category
Tags:
Preview:
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.
Citation preview
Fun, Confusion, Fear– and Basketball
Roland WeigeltComma Soft AG, Bonn, Germany
Roland.Weigelt@comma-soft.com
@rweigeltmail@roland-weigelt.de
@RolandWeigelt (DE)
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
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
…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...
Photo credit: Roland Weigelt
Photo credit: Roland Weigelt
Photo credit: Roland Weigelt
Photo credit: Beatrice Treydel, www.gesichter-bonns.de
Media
•Pre-produced media files
PowerPoint
Images (jpg, png,...)
Videos (mpg, mov, wmv...)
Photo credit: Roland Weigelt
Captionsfor the Live Camera
(aka „Lower Thirds“)
Photo credit: Roland Weigelt
Captionsfor the Live Camera
(aka „Lower Thirds“)
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
Statistics
LED Modules
Fun
FunConfusion
Fearand Basketball
FunConfusion
Fearand Basketball
...if I am the user?
Context Matters
At Home
Photo credit: Ritchy Ohm
Action!
Photo credit: Sebastian Derix, www.sebastianderix.de
What if I Mess Up?
Stumbling Blocks&
Lessons Learned
•#1Is this On?
“Real World”: Hardware
Ads
Cam
Stats
Info
Rear
projection
screen(s)
Monitor
“Program”
“Preview”
1 2 3 4
Take
“Real World”: Hardware
Ads
Cam
Stats
Info
Rear
projection
screen(s)
Monitor
“Program”
“Preview”
1 2 3 4
Take
“Real World”: Hardware
Ads
Cam
Stats
Info
Rear
projection
screen(s)
Monitor
“Program”
“Preview”
1 2 3 4
Take
“Real World”: Hardware
Ads
Cam
Stats
Info
Rear
projection
screen(s)
Monitor
“Program”
“Preview”
1 2 3 4
Take
Colors on Mixer Console
Program
Preview
Software (live)
Software (not live)
That Didn‘t Work, Right?
Software (live)
Software (not live)
Software (not live)
Conflict: Usability vs. Design
•#2Am I About to Dothe Right Thing?
Best: Preview
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
Second Best: Undo/Redo
OK: Clear to Understand
Be Absolutely Clear
•If clicking „something“ triggers a critical action,
make this „something“ trivial to understand
under heavy stress
without even thinking.
•#3Don‘t Make Me Think!*
* If you haven't yet, go read the book by Steve Krug!
Scrolling Messages
•The players of the home team
•The players of the guest team
•The members of the dance team
•The next home games
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
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!“
Quick!
•Which one to click for the ALBA BERLIN team?
Home Team
Guest Team
2nd Try
•Which one to click for the ALBA BERLIN team?
Telekom Baskets Bonn
ALBA BERLIN
•#4Fine-grained Control –Yes / No / How Much?
The LED Modulesare bright
The LED Modulesare freakin‘ BRIGHT!
Brightness Control
•For testing: 0 – 100%
•Normal: 50 – 75%
No single „correct“ value
Problem: Apparent LED brightness
•Arena lighting: lamp warmup/cooldown
100%
0%
Behind the Scenes
•Brightness: implemented using Pixel Shaders
•Opacity: just a small change in code
•Position: another small change
The Idea:Smooth Transitions
So The UI Went from This:
…to This:
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
The UI, v2
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.
You Don’t Knowif You Don’t Test
Thank You!
Roland WeigeltComma Soft AG, Bonn, Germany
Roland.Weigelt@comma-soft.com
@rweigeltmail@roland-weigelt.de
@RolandWeigelt (DE)
Recommended