Fun, Confusion, Fear and Basketball (UX Lx 2014)

4,756 views

Published on

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.

Published in: Design, Technology

Fun, Confusion, Fear and Basketball (UX Lx 2014)

  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
  14. LED Modules
  15. Fun
  16. Fun Confusion Fear and Basketball
  17. Fun Confusion Fear and Basketball
  18. ...if I am the user?
  19. Context Matters
  20. At Home Photo credit: Ritchy Ohm
  21. Action! Photo credit: Sebastian Derix, www.sebastianderix.de
  22. What if I Mess Up?
  23. Stumbling Blocks & Lessons Learned
  24. •#1 Is this On?
  25. “Real World”: Hardware Ads Cam Stats Info Rear projection screen(s) Monitor “Program” “Preview” 1 2 3 4 Take
  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. Colors on Mixer Console Program Preview
  30. Software (live)
  31. Software (not live)
  32. That Didn‘t Work, Right?
  33. Software (live)
  34. Software (not live)
  35. Software (not live)
  36. Conflict: Usability vs. Design
  37. •#2 Am I About to Do the Right Thing?
  38. Best: Preview
  39. 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
  40. Second Best: Undo/Redo
  41. OK: Clear to Understand
  42. Be Absolutely Clear •If clicking „something“ triggers a critical action,  make this „something“ trivial to understand  under heavy stress  without even thinking.
  43. •#3 Don‘t Make Me Think!* * If you haven't yet, go read the book by Steve Krug!
  44. Scrolling Messages •The players of the home team •The players of the guest team •The members of the dance team •The next home games
  45. 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
  46. 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!“
  47. Quick! •Which one to click for the ALBA BERLIN team? Home Team Guest Team
  48. 2nd Try •Which one to click for the ALBA BERLIN team? Telekom Baskets Bonn ALBA BERLIN
  49. •#4 Fine-grained Control – Yes / No / How Much?
  50. The LED Modules are bright
  51. The LED Modules are freakin‘ BRIGHT!
  52. Brightness Control •For testing: 0 – 100% •Normal: 50 – 75%  No single „correct“ value  Problem: Apparent LED brightness •Arena lighting: lamp warmup/cooldown 100% 0%
  53. Behind the Scenes •Brightness: implemented using Pixel Shaders •Opacity: just a small change in code •Position: another small change
  54. The Idea: Smooth Transitions
  55. So The UI Went from This:
  56. …to This:
  57. 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
  58. The UI, v2
  59. 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.
  60. You Don’t Know if You Don’t Test
  61. Thank You! Roland Weigelt Comma Soft AG, Bonn, Germany Roland.Weigelt@comma-soft.com @rweigelt mail@roland-weigelt.de @RolandWeigelt (DE)

×