Thought for the Day…

If your design isn’t fully baked, don’t give it to end users and expect them to do anything other than spitting it out while making “gak!” sounds.

The only exception to this rule is if you’re making chocolate chip cookies. If your design can be fairly compared to a chocolate chip cookie, go ahead and show it as early as you want, even if it’s just raw dough.

For everything else, the design usually has to be pretty well cooked before anyone who isn’t a cook themselves will be able to give you constructive feedback on it.

Advertisements

Travel UX Fails: Keyless Car Remote Fobs

2018-04-10 11.22.47.jpg

The above picture is the keyless remote for my car rental this trip: A Nissan Maxima. The car itself is superb: sporty, comfortable, and with such an involved set of controls that I actually had to pull over and find the “quick start” guide (about 40 pages of tiny print listing the different controls) in order to get the phone synched up with my Galaxy S8 and get navigating to my hotel.

I’ve noticed that different product classes tend to reward different styles of interface design. Appliance design, for instance, seems to have seen two major design trends in the past ten years:

  1. Remove as many status indicators as possible, while adding exponentially more cycle settings. My dishwasher, for instance, shows only a single LED on its entire stainless steel face, although it does change from a tasteful white to a tasteful blinking white, to an alarming red (I thought, signalling an error–turns out it merely meant it was drying), and finally to a restful blue.
  2. Playing ever-longer long tunes to signal their pleasure at having completed their assigned duties, or alternately a slightly sadder aria if something went wrong somehow. (I first saw this trend on the office printer/fax, which would play an opening tune that was virtually identical to the theme from “The Good, the Bad, and the Ugly”. Every time I turned it on, it would do its “Doodle-ooddle-ooo…” to which my brain would immediately reply “bwa-bwaaaa-bwa!” Talk about ear worms!)Now, ten years later, my new Samsung washer and drier each have multi-stanza theme tunes, as does my Whirlpool washer (of tasteful blue light fame). I figure it’s just a matter of time before LG licenses Inna Gada Da Vida, keyboard solo and all, for its water softener.

On the other hand, car design–once the field where good designers would turn up in once they’d lost all will to live–has seen an absolute explosion of graphical eye candy in this age of tablet-driven Teslas and the proliferation of cheap, bright, touch screens.

My Maxima, for instance, features alternate driving consoles including a red-limned “Sport” design featuring an imposing “Power” gauge, as well as  a perfectly skeumorphic “Standard” console for more “around town” driving, complete with–I kid you not!–wood grain accents behind the gauges.

Beyond that, virtually every car these days interfaces with some version of Apple’s or Android’s car interface, giving access to navigation, a variety of audio sources, as well as phone integration. For the most part, these are decently usable, although there seems to be no end to stability issues for Android audio, no matter what device it’s paired with, which cable I’m connecting with, or which car I’m driving. Clearly there’s a lot of room for improvement on the QA front here.

What the Fob?

The physical part of the car interface, however, is another story. Gone are the days where you could hop into any rental car and instantly know how do to everything from adjusting the seat position, turn down the air conditioning, or to turn on your windshield wipers. The more these functions have become computer controlled, the harder it has become to find and operate the associated physical controls.

And then there’s the issue of that most basic of controls: the key fob. Folks, we gotta talk…

Somewhere along the line, it was apparently decided that it would be really neat if instead of getting out a lowly set of car keys, that you could do everything by keeping a magic key fob on your person. Then, instead of turning the key to start the car, you could simply push the start button on the console.

OK, neat enough, I guess. After almost a week of driving the keyless Maxima, I’m still unsure what problem this solves, but it has given me a new set of counterintuitive juggling motions to make to find the tiny key fob so I can lock the car when I leave. The worst part, however, is the physical design of the fob itself.

Turn back to the picture above, which, at least as close as I can do right now, shows the approximate real size of the remote on my MacBook’s screen. Now picture the same remote with sun glinting off it in the hot Vegas sun. See any problems? For that matter, can you see anything at all?

In addition to some dodgy icon design, the fine folks at Nissan decided that they were going to do the remote for their car in the ever-popular “monochromatic” style, rendering the shiny silver icons all but invisible in anything but perfect lighting.

And, since everyone knows smaller is better, they further decided that the entire remote should be in the form of a tiny, orthogonal lozenge, giving you no way to operate the remote without taking it out, carefully orienting it so that the red button is on the bottom, then remembering that the button right next to the one which activates the shrieking alarm is the one you push and hold to open your trunk, the middle one unlocks the car, and the one above that locks.

And what’s the icon at the top, the one which is identical to the refresh icon on web browsers? In Nissan’s case, it’s the remote start button–a cool feature for those who live in cold climes, but represented with some confused iconography.

Physical Design Matters

Key fobs are like doors: absolutely common objects which should never make you guess about how they operate. If you’ve ever found yourself pushing on a door which needed to be pulled to open, you’re not at fault: the designer of the door is.

In my daydreams, that there’s a special 10th circle of Hell, populated entirely by people constantly smashing their heads into doors which should have opened inward, and setting off car alarms when they tried to open the door via their key fob.

And of course, this special little design hell would be reserved for the sorts of folks who design telephone voice menus… or hardware like the Nissan Maxima key fob.

Guidelines:

  1. Contrast is Good. The silver-on-silver design of the Nissan remote may be trendy, but it’s unusable (and frankly, completely illegible to my 50 year-old eyes unless I put my reading glasses on and get the remote to a place out of the direct sun. Other than style, it’s difficult to think what Nissan was thinking here: they clearly could spare the cost of some red ink for the panic button–how about some black paint to trace the outlines of the other buttons?Bonus Pro Tip: Have any of these engraved mono-chromatic devices in your life? Try taking a suitable Crayola crayon and coloring really hard over the indented portion. Then, wipe down the whole thing with a cloth. The colored wax will remain in the indented area, colorizing the icon and giving you far better visibility.
  2. Key Remotes should be navigable by feel alone. The key fob should have a unique directional shape (like the GM or Ford remote fobs shown below) which allows you to instantly orient the fob properly and use muscle memory to use the two most important functions: locking and unlocking.
    gm-key-fob.jpg2016-ford-mustang-smart-keyless-entry-remote-key-4.jpg
  3. Smaller isn’t always better. Beyond a certain point–probably a couple of inches long by an inch or so wide–making the remote smaller just makes it harder to use and easier to lose. Remember: the key fob is the primary interface for the vehicle when the user is outside of it. Worse, the most common place to store the fob will be at the bottom of a cluttered pants pocket or handbag. You’re not helping when you make it so tiny the user has to waste time searching for the fob.If you do want to watch space, concentrate on thickness, not length or width. It’s also incredibly common to attach these to a set of house or office keys, so your users will appreciate it if you don’t make the key fob overly thick.

 

Postscript: And Then, There’s Tesla…

Here’s their remote:

Tesla-Model-S-Key.jpg

Yup, it’s a toy car.

In case you’re wondering, here’s a helpful diagram which actually explains the thing:

tesla-key-fobs.jpg

Uhh… points for playfulness, definitely. Also, it is descriptive in its own way: you press on the part of the car you want to operate (mostly). Still not sure how to lock the thing, but then again, if you own a Tesla, this sort of mystery may well be part of the charm.

You guys keep doing you.

Travel UX Fails: Hotel Table Lamps (Or “Professor Layton and the Temperamental Table Lamp”)

As I write this, I’m travelling in Las Vegas attending the National Association of Broadcasters show. To pass the inevitable dull moments that creep into any trip, my son was kind enough to loan me his Nintendo DSI along with a copy of the (quite wonderful) puzzle game “Professor Layton and the Curious Village”.

In the game, you wander around a cute little Miyazaki-inspired village solving all manner of logic puzzles. Little did I know after plugging the DSI to charge one night that the kind proprietors of my hotel would be providing me with yet another logic puzzle: The Case of the Temperamental Table Lamp”

Entering my hotel room for the first time, I was delighted to see that the hotel was equipped with easily accessible power connections at the base of the table lamps in both the bedroom and the front sitting room area. So, experienced traveller that I am, I immediately plugged my phone charger into the bedroom table lamp, and the DSI’s charger into the lamp power outlet in the front room. After seeing that they were both charging, I turned off the lamps and went out to see the sights of Vegas.

2018-04-10 11.46.51

(Above: Sitting room lamp power plug; Below: the similar lamp in the bedroom of the suite; Below: the bedroom lamp with phone charger)

phone-lamp.jpg

Waking up early the next day, I was surprised to see although my phone had a full charge, the DSi had completely run down. Turning on the lamp to see better, I was able to confirm that the DSi was indeed charging. “Huh…” I thought, “Maybe in wasn’t plugged in tightly?” and left it at that. I then turned off the lamp and left to go to the show floor for the day.

After a busy day spent oogling all manner of unaffordable audio/video gear at the show, my phone had run down to almost nothing, so I was relieved to be able to get it back to my bedside charger. The charger politely chirped, letting me know it was charging. Then, after a bit of puttering around in the hotel room, I switched off the room’s lights and went to bed.

In the morning, I awoke to discover my phone right where I left it on its charger next to the bed–stone cold dead.

Like the fall guy in a bad noir film, I decided to investigate how this strange turn of events had come about in this increasingly strange hotel room. And then my eyes drifted from the lamp to the room’s light switches, and I realized I’d been had–waylaid by a clueless lamp designer and an overachieving hotel electrician.

The portion of the case involving the sitting room and the dead DSi was the easiest part to solve. Since the sitting room had no overhead lights, the way you got light was to turn on the light switch of the table lamp. Unfortunately, the designers of that lamp had decided that the same switch that controlled the light should also control the power outlets built into it. Turn off the light, and you turn off the switches. Naturally, they omitted to include any sort of indicator light to show whether the outlets were live or not.

It seems it had not occurred to the designer of this particular hotel table lamp to wonder what sorts of things they thought weary travellers would want to plug in next to their couch or bed. To me, things like alarm clocks and phone chargers come most readily to mind, although one could easily add in all manner of assorted other electronic devices to the list. The next obvious question would be, “Is it a common use case to want these types of devices to stay powered on, even when the light is off?”

Granted, I haven’t conducted a detailed user study of the matter, but at a first approximation, I’d venture that the answer to this question is a rather resounding, “Duh!”

The bedroom situation was a bit more complicated. Like many bedside lamps, this one had a three-way bulb, so pressing the silver switch on the lamp would cycle the light between low, medium, and high light levels. A fourth push of the switch would turn the lamp off. This was all fine, as was the fact that the outlets of this lamp were left “hot” no matter what level the light was set to.

Unfortunately, this is where the second culprit, the hotel electrician, came in. He decided (or was told) to wire the outlet the bedside lamp was plugged into to be controlled by the room’s main light switches. This meant that it was basically a coin flip as to whether pushing the light’s switch did anything at all: if the room’s main light switch wasn’t turned on, the whole outlet was dead. Only by checking both the main switches then fiddling around in the dark room to try to find the lamp’s button would you actually wind up with light in the room. And then, if you happened to turn off the lights using the wall switch, you powered off any devices plugged into the lamp.

So in the end, I managed to crack the case. But seriously, this sort of hotel room switch puzzle has got to stop.

Guidelines for Design: Hotel Room Lamps and Outlets

  • Know how the room is to be furnished, and only use wall switches to control devices which will not have their own power switches. Avoid setting up situations where the users of the room must ensure that multiple switches are engaged in order to turn the device on.
  • Table lamps with outlets should always be wired so that the outlets are “hot’ at all times.
  • If for some reason this can’t be done, a visible power indicator (e.g. a small LED) should be added to the switch to indicate whether it’s live.

 

 

Ikea’s BookBook: Pure Genius

The stylish, low-cost furniture folks just one-upped Apple. Along with having some fun, they also make some excellent points about the innate advantages of ink on paper.

It reminds me a lot of a conversation I once had with a designer on the Newton project who was seriously jazzed about the ability to (usually) be able to record a written note, as well as look up old notes later. What advantage this had over a 99 cent notepad was not at all clear.

iOS 7 – Side by Side with iOS 6

Yesterday was the day most of us were informed that our iPhones and iPads are ready to download the latest software release from Apple. Before jumping in and pressing that “Upgrade” button, have a look at Business Insider’s side-by-side comparison of what’s in store:

the-home-screen


My take: I guess I go back to John Dvorak’s old advice that whenever confronted with a “next big thing” proposition, weigh its validity by imagining that the roles of old and new were reversed. I.e., if we were all living in an iOS 7 world you see on the right, how would we greet the “next big thing” announcement of the interface you see on the left?

Image

The Magic of User-Created Ratings

Apparently, a little hard to match with food, but perfect for the hot tub.

Source: Wine.com

Wine.com Ratings

Sharffenberger

For IT Departments, Mobile is a Pain in the App

According to mobile analytics platform Mixpanel, over half the online activity this past Christmas came from mobile devices for the first time. Mobile internet traffic overall has jumped some 84% in the past year alone according to analytics firm Walker Sands, with the last quarter alone showing a 32% jump in mobile traffic. If you’re a retailer or consumer facing company, there’s little doubt where your customers are going: in the words of The Who, they’re Going Mobile.

As users, we dig this stuff (and I’ve certainly forked over a goodly share of my income in recent years to the suspiciously cheerful folks at the Apple Store for my part in the mobile revolution!)  But as we oogle our shiny new iPads, marvel over our ever-slimmer iPhones, sketch on our gigantic Galaxy Note IIs, or geek out over the satisfying “click-thunk” as we deploy the kickstand of our new Surface tablets, let’s spare a thought for the poor IT manager who’s going to have to cope with the endless requests to support all our new toys across the sprawling company infrastructure.

Let’s face it: being an IT manager is no picnic. Every business cycle brings new infrastructure projects, and every budget is about doing more with less. And it’s a rare company indeed whose IT department is awash in the Objective C, C#, and Java programmers that you’d need to support all the different development environments and frameworks required to write apps for all these different devices.

Even if you decide to outsource your mobile development, enterprise apps are hardly a breeze for an outside party to integrate with. Development is long and costly, and you’ll be signing up your team for a non-stop series of software support issues as you try to keep up with all the new devices, form factors, and OS updates. And we haven’t even gotten around to the hassles of creating app stores, deployment strategies, and managing software updates on a zillion different client devices.

Some organizations attempt to cope with this impossible problem my creating separate “mobilized” versions of their sites, and directing users of mobile devices there, instead of the main site. Unfortunately, this now leaves the overworked IT staff supporting two versions of your critical business pages. Even then, your tablet users are usually caught choosing between the old existing site, and the inevitably phone-optimized “mobile” site. This isn’t a long-term strategy that’s likely to satisfy your fast-increasing base of tablet users (and according to The Paragon Report, tablet use had 66% Q2 year-over-year growth in in 2012!). But are your staff expected to support a third, “tablet.mysite.com” site as well? Where does the madness end?

Stopping the Insanity with Responsive Design

CSS — “Cascading Style Sheets” are the web standards technology that allows designers to control the style and placement of elements on web pages. CSS started as a broader replacement for old “B” (bold), “I” (italic), “FONT” and other such HTML tags which allowed pages to have a modicum of formatting in the early days of the web. It’s been through a few revisions since being introduced in the mid-90s, allowing designers more and more control over the look of web pages.

When CSS3 came around a few years back, a lot of us designers were so taken with our newfound ability to give rounded corners to all our rectangles (it was, admittedly, something of an obsession for us in those blocky days of yore) that we didn’t pay much attention to a geeky new feature of CSS3 called “media queries”.  These “media queries” were an updating of the old “media” types in CSS which had previously distinguished themselves by (a) offering some support to things like TVs, printers and screen readers for the blind, and (b) enjoying almost no consistent browser support, rendering them near useless.

But these new media queries, as it turned out, did a lot more than saying, “If you’re viewing this on TV, make the fonts really big”. It turns out, that you could write them to set up entirely different page layouts depending on the screen dimensions that the content  was being displayed on. You could change up your page elements’ size, font, position, color–or even whether whole areas of a web page were displayed or not–based entirely on whether it was being viewed on a phone, tablet, laptop, desktop, or giant 4K monster display.

Recently, a methodology called “Responsive Design” (sometimes “Responsive Web Design” or RWD) has developed to allow a single web page to look and function like a slick iPhone app when viewed on an iPhone, a native tablet app on an iPad, and a conventional web page when viewed on a laptop or desktop. Sites like The Boston Globe, Harvard University, and Time have used this to terrific effect. Viewing these sites on different devices gives a thoroughly native look to each, but a look at the source code would reveal that all these different user experiences are actually the same page.

The Boston Globe's terrific Responsive Design

(Incidentally, if you’re viewing this blog entry on WordPress at uxtalk.wordpress.com, you’ll also see that WordPress is a huge user of responsive design–I’m in love with their iPad implementation in particular, where they use CSS3 transitions to great effect).

Weirder still, that one source page is probably cleaner than before, despite its new ability to support myriad form factors and devices. With responsive design, the site’s stylistic elements are contained it a single style sheet, which browsers normally cache automatically. Meanwhile, the site’s various pages become lighter, faster-loading, and more supportable now that they’re free of all that formatting clutter.

Let there be no mistake: a high degree of UX and visual design skill is needed to pull this miracle off, and to make the site feel the way it should on the different devices. This is true of any competently designed site or mobile app, however, and the UX design bill is a minor consideration compared to the steep development costs and huge support footprint that comes from standing up separate mobile sites or custom enterprise mobile apps.

Responsive: Beyond the Basics

The “pure” responsive approach embraces the idea of a single style sheet that works all the mojo with nothing but CSS–no coding required! Even then, it’s shocking what CSS styles alone can do: from dropping columns from the middle of large tables to simplify the display on smaller devices–to causing navigation panels to slide out from the side on iPhones rather than taking up valuable screen space.

If you’re willing to add in a bit of elementary browser-sniffing, you can take the designs even further, displaying Android-specific icons and colors on Android devices, and iOS icons for the Apple crowd, for instance–or substituting alternate graphics or treatments for devices known to be unable to display Flash, for instance.

One of my favorite tricks is to use a small stub of JavaScript at the bottom of a responsive site to ask mobile users if they want to add an icon to the site to their device’s Home page. This gives your users the ability to launch the site with a single tap — a user experience which can be difficult or impossible to distinguish from that of a native app. (Apple devices can even display a startup screen!). The major difference is that there’s no software for the user to install and update–since the “app icon” is really just a web page link, a company’s IT department automatically updates their entire mobile user base when they update the web site.

Web sites can be added to your phone's home screen where they look--and launch--like apps

The Future is Mobile…and Responsive

Sometimes, like the old song says, you don’t need a weatherman to know which way the wind blows. From the corner coffee shop to mobile sales forces, users and customers are using every possible variety of portable and mobile devices to access information, place orders, and get their jobs done. As we welcome 2013, it’s increasingly likely that IT directors that stand up new systems without taking the mobile component to heart are either doing something unusual, or doing something wrong.

In the past, mobile for the enterprise was a sea of conflicting choice–most of them bad. With responsive design, however, there’s finally a ray of light that allows IT staff a reasonable way to support their users’ increasingly mobile workstyles without busting the budget or turning to drink.

Should all corporate sites be responsively designed? Not necessarily, but all corporate sites should definitely give it serious thought. Similarly, not all apps will be replaced by responsive web sites, but a great many of them can and will be. At the least, I expect that in a few year’s time, we’ll be mostly free of those damnable sites which prompt us to “download our free mobile app!” whenever we try to Google up some answer to a question on our mobile phone and land on their backward excuse for a content site.

Mobile app development isn’t going away by any means, but apps which do nothing more than provide a tiny window to corporate content are definitely on the Endangered Species list. Instead, expect companies to devote their mobile app development dollars to situations where an app’s unique abilities really shine–such as the ability to access the phone’s camera and other hardware. For more and more content access and transaction processing needs, don’t be surprised if your most frequently used “apps” in the future are really responsively designed websites.