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

  • View
    2.009

  • Download
    1

Embed Size (px)

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.

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

  • Fun, Confusion, Fear and Basketball Roland Weigelt Comma Soft AG, Bonn, Germany Roland.Weigelt@comma-soft.com @rweigelt mail@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: Jrn Wolter, www.wolterfoto.de
  • applications Ive written for the rear projection screens LED advertising system (some) of the UI issues Ive 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 Captions for the Live Camera (aka Lower Thirds)
  • Photo credit: Roland Weigelt Captions for the Live Camera (aka Lower Thirds)
  • 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
  • Statistics
  • LED Modules
  • Fun
  • Fun Confusion Fear and Basketball
  • Fun Confusion Fear and 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
  • #1 Is 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 Didnt Work, Right?
  • Software (live)
  • Software (not live)
  • Software (not live)
  • Conflict: Usability vs. Design
  • #2 Am I About to Do the 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.
  • #3 Dont 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 todays match! Todays referees are... Here are the players of ALBA BERLIN Heres 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
  • #4 Fine-grained Control Yes / No / How Much?
  • The LED Modules are bright
  • The LED Modules are 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:
  • Lets 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 announcers 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 Dont be too subtle about state. If possible, provide a preview. Avoid internal translations: Dont make me think. Decide if fine-grained control is necessary Dont sacrifice the usability of basic actions But dont take it away if users really need control.
  • You Dont Know if You Dont Test
  • Thank You! Roland Weigelt Comma Soft AG, Bonn, Germany Roland.Weigelt@comma-soft.com @rweigelt mail@roland-weigelt.de @RolandWeigelt (DE)