VHF, UHF … WTF??? An example of confusing UI design.

Today I was reading about how television works, because I am now in the television industry. (Yes, I still work on software, but software for TV)

I like to think about how the user interface of stuff is designed. Why did the designer(s) think something was a good idea? What about the thing makes it so a certain design was chosen? Did the designer(s) understand their audience?

Another thing I think is very interesting is to watch how people use stuff. People use tools in ways that were never intended by the tool’s designers, and people do some pretty imaginative things to get around a tool’s design flaws.

Very rarely, have I found a software tool that just does what I need it to do without me having to spend extra time tweaking it. When developing software, is there a perspective that can help you create an intuitive tool that just works in an obvious way without the user having to invest extra time to get the tool to work?

Today, while reading about how television works, I was struck by a very simple analogy that helped me generate a quick list of things to think about as I design my next ‘get-rich quick’ widget. (OK…not my next…actually my first, but next makes me sound more credible.)
Until today, I never knew what UHF and VHF stand for even though I spent many years twisting little UHF and VHF dials on my Grandpa Vern’s TV. Grandpa Vern’s TV was pretty ‘bare bones.’ There was a dial with big letters “VHF” above it and a another dial with big letters “UHF” above it. Both dials had tiny numbers and hash-marks actually on the dial itself. The UHF dial had a lot more numbers and hash marks (which were too tiny to read) than the VHF dial. The TV also had power and volume buttons on the front. On the back, it had an antenna with a switch box connected to it and that whole switch box/antenna thing had little wires connected to the back of the TV.

At 10 years old, I’d say I was representative of a large portion of the the television viewing audience. I went to Grandpa Vern’s after school every day and stayed there until my parents got off work. Every afternoon I would race to the TV and frantically try to tune to Bewitched in time to see the beginning and find out of it would be an episode with Tabitha. If it wasn’t an episode with Tabitha, I’d frantically try to tune to Gilligan’s Island to see if it was an episode that featured Ginger. Then, I’d have to make a decision about which one I wanted to watch or whether I should go outside instead (in the case that neither Tabitha nor Ginger were going to make an appearance).
The problem was, I didn’t know how the TV worked. How the TV worked wasn’t intuitive from the interface. The only way to get help was to ask Grandpa Vern and, much like the Tech Support of today, asking Grandpa Vern usually resulted in a thump on the head and the brusk comment, “Quit monkeying around with those dials.”

My eye was immediately drawn to the text “UHF” and “VHF” because it was the biggest text on the set. I didn’t know what UHF and VHF meant. First I’d twist one dial. If I didn’t get what I wanted I’d twist the other dial. If I didn’t get what I wanted I’d twist both dials at the same times in different patterns. The whole switch component of the TV was completely unknown to me. Therefore, I came to believe that tuning this television required a somewhat superstitious twisting of both the UHF and VHF knobs in a pattern that may be related to the cycles of the moon, and if persistent enough, it would either tune to the desired channel or half and hour would pass and I’d miss the show anyway. Occasionally, I’d throw in an adjustment of the antenna, but this usually really ticked off Grandpa Vern, when he tried to watch M.A.S.H. later that night.

When designing a user interface for something, think of a 10 year old trying to tune Grandpa Vern’s TV.

  • Where is the eye initially drawn? Is it drawn to the somewhat obscure information “UHF” and “VHF” or is it drawn to the more helpful information – the tiny numbers on the dials that represent channels. If the eye isn’t drawn first to the most obvious information, then redesign the interface so that information stands out more.
  • Does the user have to go to different areas of the product to set up something in order to use a basic feature? For example, do I need to first go to the back of the television and flip the UHF/VHF switch before I can use the dials on the front of the television to tune to the channel I want? The user has an easier time getting something to work if everything they need is located in one place.
  • Can messing around with an obvious UI element (like the antenna) get me into big trouble and make things worse? If so, rethink the design and behavior of the antenna.
  • Does the interface have all the information the user needs to use the basic features of the TV? If I don’t understand what UHF and VHF mean, how do I even know I need to go looking for the switch? With this design, I already have to know how a TV works before I can use the TV. Your user is 10 years old and really only cares about Tabitha and Ginger. Don’t design an interface under the assumption that the average user already knows something integral to making the product function at a basic level.
  • Does the help system equate to admonishment and a thump on the head? If so, make the product’s help system a little more approachable (especially if the user has to pay extra for tech support).

Earlier this week, I was using M.S. Word to write a 5 page report. My boss wanted the report to include a cover page, a Table of Contents, and page numbers. I wanted to set up the page numbers so the cover page had no number, the Table of Contents had this kind of numbering, i, ii, …, and the rest of the document was numbered 1, 2, 3, and so on. I’ve done this a bazillion times over the years, but I can never remember how to do it. If you had walked by my cube, you would have seen me superstitiously ‘twisting the dials’ on the software. I eventually figured it out. It took half an hour longer than it should have. I had to use a floating toolbar and a menu option (that was collapsed, so I had to expand each menu before I could find that option) and I had to search the help documentation a few times (trying different key words before I found the right info) before I finally remembered what I needed to do.

I’m sure the folks at Microsoft have some nifty template or switch or something that would have done this really fast, but it wasn’t obvious to me. To be fair, it’s hard to make an option stand out in a product that has a complex set of options available. It is also hard to make a product that is generic enough to be useful to both the 10 year old girl and Grandpa Vern. I think this is why the more widely useful a tool is intended to be, the more complex it becomes. Perhaps that is the problem, though. The more complex a tool is, the harder it is to use. There are too many “channels” in most of the software I use today. Most users just want to watch Bewitched or Gilligan’s Island. Make it easy for them.

Leave a Reply

You must be logged in to post a comment.