Interface Inspiration From Real World Devices

I tend to design a lot of interfaces for both Fireworks and Flash extensions, some can be simple, some are more complex with many different parameters that the user has the ability to control. Most of the Flash command panels that I’ve written for the SitePoint blog have had simple controls (such as dials and sliders) that the user can relate to as they have there feet firmly planted in the real world and have been designed based on controllers (knobs, dials and sliders) from my experience of products that I use on a daily basis

It’s easy to give the user basic input boxes to enter their data when designing an interface that the user will interact with, but I find the experience to be enhanced when ‘touchy-feely’ controls are used. After all, from switching on the TV to using the toaster there are a multitude of devices that we control around the home, so if you are looking for inspiration then there is often no need to step out of the front door, it could be looking you right in the face!

Take the following example, an interface for a free Fireworks MX command which is an overhaul of the existing version that shipped with Fireworks MX / MX 2004 which I wrote nearly 2 years ago; all the controls are laid out in a simple uncluttered manner, with the main sliders at the top, and the effect modulators at the bottom (dials). Everything is to hand and easy to use with feedback given in the preview area based on the user input. Simple but effective

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://www.usableflash.com woodyChicago

    Steve-
    That really is a nice clean interface. The teeny tiny feedback I have is: the one part that sticks out to me is the question marks after each checkbox option. The same message is communicated without them.

    More importantly, perhaps you can talk about what went into your decision of when to apply a dial control, and when to use a slider. Often I see graphic designers making these decisions based almost entirely on what looks best within the layout. As I’m sure you know, the distinctive interactions of various controls are often very subtle but important for overall usability and consistency.

  • http://www.rswarren.com Robert Warren

    I agree – nice interface design. Attractive and very recognizable from a real-world angle.

    The only real problem I’ve ever seen with this kind of interface design is that some users take the analogy too seriously. Example: I once knew a former pilot (in her 60’s), who set out for the first time to learn how to use a desktop computer a few years ago. She had one *heck* of a time understanding that the mouse didn’t work like a pilot’s yoke (i.e., inverted). Controls aren’t automatically intuitive.. designers should always take the clueless vote into account when thinking out interfaces.

    Another point to consider is that most of the time, the original real-world physical interfaces were designed that way because they were easy to manipulate; turning a knob, for example, is the natural motion of rubbing index tip with thumb. Using knoblike controls in an GUI interface only preserves visual resemblance – the physical simplicity of the real-world knob is now gone. It becomes a cute graphic toy rather than a useful technology control.

  • sgrosvenor

    “Using knoblike controls in an GUI interface only preserves visual resemblance – the physical simplicity of the real-world knob is now gone”

    But because it has a visual resemblence and we can link its use from the interface to a real world example, then it fortifies and underlines it’s use…funny story about the former pilot, definitely made me chuckle ;-)

  • http://www.mission36teen.com M36Teen

    Yeah, I know what Robert means, it took me FOREVER to figure out that you only move left and right when using a dial, not around in a circle. :-)

  • sgrosvenor

    “More importantly, perhaps you can talk about what went into your decision of when to apply a dial control, and when to use a slider”

    Quite simple, the sliders next to the preview area take up a majority of the interface and are for the primary controls (steps, spacing, opacity, rotation), the dials were used for the secondary controls (modulators) to provide visual tweaks to the primaries

  • Hal Taylor

    I use some audio software (the Amplituble Pro Tools plugin, among others) which, apparently for aesthetic reasons, has chosen to replicate the knobs found on traditional (physical) audio gear.

    I liked it, at first, as everything looked very familiar and comfortable. However, knobs workwell in the physical world because they exploit an easy movement of the fingers (twisting/rolling). Unfortunately, there is not a corresponding analogy in mouse movement (one can’t twist a mouse), so the “affordance” of a rotating knob doesn’t translate well.

    I think we have not yet discovered all of the interface widgets that we will eventually come to depend on, and looking at controls from the physical world would seem a reasonable way to leverage user’s existing knowledge/familiarity.

    But one should confirm that what makes a control work well in the physical world is translatable to existing computer interfaces.

  • J Taylor

    Personally, I think the only ‘computer translation’ of the knob is the mouse wheel…in a Flash interface, it would be easy to make work. But I am guessing that unless you wrote directions by the control, you’d get a similar amount of stumped users. I too, tend to push my mouse in a circle for knobs, even though I KNOW they respond to horizontal input. hey, maybe Logitech will make a Flash Mouse with a cool retro knob on the side.

  • MikeeSpikee

    I did find a cool toy on geekweb.com that’s basically a programmable USB phat shiny volume style knob… Now to find someone to buy it for me :)