1. Fun, Confusion, Fear
– and Basketball
Roland Weigelt
Comma Soft AG, Bonn, Germany
Roland.Weigelt@comma-soft.com
@rweigelt
mail@roland-weigelt.de
@RolandWeigelt (DE)

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

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

4. …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...

5. Photo credit: Roland Weigelt

6. Photo credit: Roland Weigelt

7. Photo credit: Roland Weigelt

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

9. Media
•Pre-produced media files
 PowerPoint
 Images (jpg, png,...)
 Videos (mpg, mov, wmv...)

10. Photo credit: Roland Weigelt
Captions
for the Live Camera
(aka „Lower Thirds“)

11. Photo credit: Roland Weigelt
Captions
for the Live Camera
(aka „Lower Thirds“)

12. Photo credit: Roland Weigelt
Captions
for 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

13. Statistics

15. LED Modules

16. Fun

17. Fun
Confusion
Fear
and Basketball

18. Fun
Confusion
Fear
and Basketball

19. ...if I am the user?

20. Context Matters

21. At Home
Photo credit: Ritchy Ohm

22. Action!
Photo credit: Sebastian Derix, www.sebastianderix.de

23. What if I Mess Up?

24. Stumbling Blocks
&
Lessons Learned

25. •#1
Is this On?

26. “Real World”: Hardware
Ads
Cam
Stats
Info
Rear
projection
screen(s)
Monitor
“Program”
“Preview”
1 2 3 4
Take

27. “Real World”: Hardware
Ads
Cam
Stats
Info
Rear
projection
screen(s)
Monitor
“Program”
“Preview”
1 2 3 4
Take

28. “Real World”: Hardware
Ads
Cam
Stats
Info
Rear
projection
screen(s)
Monitor
“Program”
“Preview”
1 2 3 4
Take

29. “Real World”: Hardware
Ads
Cam
Stats
Info
Rear
projection
screen(s)
Monitor
“Program”
“Preview”
1 2 3 4
Take

30. Colors on Mixer Console
Program
Preview

31. Software (live)

32. Software (not live)

33. That Didn‘t Work, Right?

34. Software (live)

35. Software (not live)

36. Software (not live)

37. Conflict: Usability vs. Design

38. •#2
Am I About to Do
the Right Thing?

39. Best: Preview

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

41. Second Best: Undo/Redo

42. OK: Clear to Understand

43. Be Absolutely Clear
•If clicking „something“ triggers a critical action,
 make this „something“ trivial to understand
 under heavy stress
 without even thinking.

44. •#3
Don‘t Make Me Think!*
* If you haven't yet, go read the book by Steve Krug!

45. Scrolling Messages
•The players of the home team
•The players of the guest team
•The members of the dance team
•The next home games

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

47. 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!“

48. Quick!
•Which one to click for the ALBA BERLIN team?
Home Team
Guest Team

49. 2nd Try
•Which one to click for the ALBA BERLIN team?
Telekom Baskets Bonn
ALBA BERLIN

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

51. The LED Modules
are bright

52. The LED Modules
are freakin‘ BRIGHT!

53. Brightness Control
•For testing: 0 – 100%
•Normal: 50 – 75%
 No single „correct“ value
 Problem: Apparent LED brightness
•Arena lighting: lamp warmup/cooldown
100%
0%

54. Behind the Scenes
•Brightness: implemented using Pixel Shaders
•Opacity: just a small change in code
•Position: another small change

55. The Idea:
Smooth Transitions

56. So The UI Went from This:

57. …to This:

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

59. The UI, v2

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

61. You Don’t Know
if You Don’t Test

62. Thank You!
Roland Weigelt
Comma Soft AG, Bonn, Germany
Roland.Weigelt@comma-soft.com
@rweigelt
mail@roland-weigelt.de
@RolandWeigelt (DE)