One Weird Search Box

When I recently followed a link from a tweet, I ended up on the Display Blog, a weblog dedicated to the display technology business.

The site’s super-simple appearance immediately appealed to me. There is nothing on the page that can distract you from actually concentrating on reading the blog’s articles.

DisplayblogMainPage

Page navigation is simple, too: there’s a title banner linking back to the site’s entry page, and the standard pair of Previous Entries/Next Entries links. That’s it. No chronological archive, no tags, no keywords, no blog roll, …

Wonderful!

There is an unusual one-line “instruction” right beneath the title banner, though, according to which you can also search the site. The way to do so sounds almost magical:

To search, type and hit enter

To see if that would actually work, I followed these instructions in the most literal way: I just started typing a few letters, and hit the Enter key.

Nothing happened.

That’s, of course, because you first have to click on that very line of text to activate a search box which is hiding in the same location.

DisplayblogSearchField

Now, when you type, you can also see what you type, and hitting enter does bring up a page with search results.

Analog or digital: simple things should not require instructions

Within the realm of websites, a search box is a “simple thing.”

Average users have a basic understanding of how to perform a search on a website. At least, as long as the search field is easy to find, provides sufficient visual cues that say “I’m a search field!,” and operate in a standard manner.

The only reason why “instructions” are required on the Display Blog page is simply this: it’s because the search field does not look like a search field.

It’s just a small box drawn in a line that is so thin and light, you can hardly see it at all in the top-most screenshot above. It does not have a “Search:” label, it does not display a loupe icon, it lacks the inset shadow that has become fairly common for text entry fields, there is no button labeled “Search” — nothing about the search box itself says “I’m a search box!”

Even worse, the instructions that are provided, are incorrect since they omit the very first step in the process, namely “click here.”

If it ain’t broken…

The easiest way to fix this search box is to simply use a standard design. And that design does not even have to look dull or lack more extensive features. Just have a look at this search box on Lukas Mathis’ blog, Ignore the Code.

IgnoreTheCodeSearch

It looks like a standard OS X Aqua-style search box, has a cancel button, and a menu with search history. And yet it is easy to find even for non-Mac users, because its label explicitly states what it is: “Search.”

There is an equivalent to “if it ain’t broken, don’t try to fix it” in user interface design, and its essence is:

If users are familiar with a de facto standard way to use a certain feature, stick with that standard in your own designs.

If you break this rule, you will most likely create unnecessary usability problems like the ones I ran into with this search box on the Display Blog.

A Radio Alarm Clock Designed Specifically for Hotel Rooms

Hotels in large cities make for excellent UI observations, because these places serve as temporary homes for international visitors with diverse cultural backgrounds. It is a challenge for any designer to ensure that all of these guests will be able to easily understand and properly use the hotel’s facilities, like door handles, make-up mirrors, and elevator control panels.

Another category of devices regularly found in hotels are radio alarm clocks. This article is about one such clock that was specifically designed for use in guest rooms.

Hilton radio alarm clock on a hotel room nightstand

When I saw this alarm clock during a recent stay at a hotel, I vaguely remembered that it had been announced to much fanfare a few years ago. A quick online search revealed that the device was custom-designed for Hilton hotels group, and when it was introduced in 2005, the press release hailed it as the radio with the “World’s Easiest-to-Set Alarm Features:”

The new Hilton Family clock houses a sleek design and simple digital alarm interface for buzzer, radio wake-up and snooze. The simple-to-set alarm feature requires just three easy steps (also printed on the front of the clock): 1. Press Alarm Set; 2. Indicate Alarm Time preferred by using increase or decrease buttons; 3. Press Enter.

Kudos to Hilton for leveraging user-friendliness as a customer benefit, and also for creating public awareness for this aspect of the user experience!

What is so special about this clock?

The most obvious difference between this radio alarm clock and other similar devices are the explicit instructions on how to set the alarm time, which are printed right onto the front panel. All related buttons on the front panel have numbers printed on them to link them to the respective steps in the instructions.

The front panel of the clock with display, control buttons, and printed-on instructions

To set the alarm you press the ALARM SET button; adjust the time via the ALARM TIME forward and backward buttons; optionally choose a radio station via the picture buttons on top of the device; and finally press the ENTER button.

Radio station presets and snooze button on top of the clock

Pressing ENTER activates the alarm and sets the alarm type to “Radio Alm” or “Buzzer Alm,” depending on whether you pressed a radio station button, or not.

The combination of a simplified adjustment process; the explicit, “non-lose-able” instructions right on the device; and the numbers on the buttons to help find the required controls for each step, not only make the actual adjustment much easier than on other clocks. They also make it much easier to discover how that adjustment is performed.

A suggestion for making an easy-to-use device even easier-to-use

When I played around with the clock, I found the layout of the controls a bit impractical, what with the buttons being scattered all over the front panel.

Additionally, due to the buttons’ shapes and positions, some of them are visually grouped even though they are not related, e.g., the two ALARM TIME and the two RADIO TUNE buttons at the front panel’s center.

I also noticed a real design flaw: despite its label, the ALARM OFF button does not always switch off the alarm. Rather, it cycles through the three alarm types, radio, buzzer, and off. If you press the button with the intent to deactivate the alarm, you may just change it from radio to buzzer, instead.

In other words, in some situations, the result of pressing the ALARM OFF button is neither what you would expect, nor what you intend it to be. A simple fix would be to change the label to “ALARM MODE.” An even more user-friendly and more reliable design approach is to provide three distinct buttons, one for each alarm mode.

Don’t make me go modal

Speaking of modes, setting the alarm on this clock is, in fact, modal: pressing the ALARM SET button enters the mode, pressing ENTER leaves it. I doubt that there is an actual need for this mode.

If there were three separate buttons in place for selecting the desired alarm mode, it would suffice to let the user set the alarm time by pressing the backward or forward buttons.

Even more so since this clock always displays both current and alarm time, so that both are always visible to the user; there is no need to enter any mode to check the currently set alarm time.

The two keys change the alarm time by a minute per keypress, unless you hold them down, in which case the time is advanced automatically. Still, the risk of accidentally modifying the alarm time by more than just a few minutes is reasonably small.

Small enough, I would say, that the benefits of the quicker access to modifying the alarm time outweighs the risks of inadvertently changing the time by a non-trivial amount.

After swapping out the ALARM OFF button for three distinct mode buttons, and removing the mode for setting the alarm time, the next step would be to change the layout of the front panel so that both controls and instructions are grouped more closely. Consequently, the need to link instructions and buttons via numbers no longer applies.

Rough sketch with a redesign of the clock's front panel

The alarm type selection is displayed right above the respective mode button in plain text. An additional LED above each of these buttons could provide even better feedback, but such bright status lights may be bothersome to guests who are such light sleepers that they require a totally dark room in order to find good sleep. Hence, the status indicator for the alarm type remains on the clock’s LCD.

The alarm time buttons are shaped as minus and plus signs. Besides the prominent visual cue this also provides tactile feedback. As for the buttons’ position, even though they are not directly adjacent to the display anymore, they do align vertically with the alarm time on the display.

As a welcome side effect, this modified layout opens up some space below the alarm controls, adding a clear distinction between alarm and radio controls. The shapes of the radio sections on/off, volume, and tune buttons all differ, adding yet more visual as well as tactile differentiation.

What Donald Norman thinks of this device

When, halfway into writing this article, I did some further online research on this device, I saw that Donald Norman had also commented on this clock.

In response to his initial unabashed enthusiasm about the clock, readers of his site wrote in to point out several flaws in the device.1

Among these flaws is the erratic behavior of the ALARM OFF button, for which Norman suggests the same fix that I have outlined above: use three separate buttons for each of the three alarm modes.

A problem I had not encountered, because I played around with the clock during the day, is that you cannot read the control’s labels in the dark. I would assume that this could be addressed by using fluorescent paint for the button labels or a back-lit front panel.

Finally, another reader complained that setting the alarm time with just two buttons would be “terribly awkward,” to which Norman replies:

Holding either button down increments the time at the rate of two minutes per second. If the button is held down for 5 seconds, the setting time then increments at the rate of 10 minutes per second: it this[sic!] increments an hour in six seconds. This is slow enough to stop close to the desired setting, yet fast enough not to be a burden.

While I had not measured the clock’s hold-down time-outs and advance speeds this meticulously, I did not feel that setting the clock was tedious. The handling was swift enough to set the clock fairly easily, while still making it sufficiently precise to stop its advance when approaching the target time.

As for changing the alarm time inadvertently, Norman considers the corresponding mode a good thing:

Many clocks have this failing [of making it too easy to change the alarm setting], allowing a single button press to change the time or alarm setting. As a result, a single button error changes the setting, and in a device meant to be used by sleepy people, in the dark, errors of this sort are guaranteed. Better clocks require simultaneous depressing of an “Alarm Set” button to change the alarm time, thereby eliminating accidents. (The Hilton clock requires the clock to be in “Alarm Set Mode” which solves the problem.)

On the risk of sounding conceited, I disagree with Norman on this point. As I have outlined already, quickly brushing against either of the alarm set buttons will change the time by only a handful of minutes, which should not have too much of an impact on a guest’s risk of missing their flight, business meeting, or dinner date.

Having to press another button in addition to the actual time set buttons, however, is awkward, and it also potentially creates accessibility problems.

Notwithstanding the room for improvement in the current design, it is a great move for a major corporation like Hilton hotels group to even address usability on such a scale, with such public awareness, and with a product that does deliver on its promise of easier-than-usual user-friendliness.

A virtually silent postscript

Unfortunately, the radio section of the clock in our room did not work. Pressing “Radio On/Off” or any of the genre buttons did not do anything, so I could not test that functionality.

Interestingly, though, when I followed the process for setting the “radio alarm” for testing, the device would fall back to buzzer alarm. Interesting.

Update 2011-03-17: Via email, Lars Feyerabend chimed in to share his opinions about this clock.

Agreeing that the “Set Alarm” mode is not necessary, he goes on to say:

[T]hey should rather make those “Radio alarm buttons” on the top of a device mechanical toggle buttons like they had back in the days. They stay “pressed” to signal their state, but when you press another button, every other button gets de-pressed.

Lars points out an important aspect that I hadn’t addressed: the radio genre buttons on top of the device do not indicate the current selection.

Since, as I had mentioned in the postscript, the radio in our alarm clock did not work, I could not check whether the selected genre is displayed on the clock’s LCD screen. If not, the buttons could be equipped with LEDs or lighted rings, or implemented as mechanized buttons as per Lars’ suggestion.

And the Alarm Off cycle confusion and “alm” display could be taken care of with a simple hardware slider. Three positions: Off, Buzzer, Radio.

Compared to positioning your finger over a button and pressing it, “targeting” the center position of a hardware slider requires more motor precision. This potentially makes it awkward to use, especially for older users.

What’s more, with a three-position slider, you will always activate — however briefly — the center setting when moving between the two outer positions. Assume the positions from left to right are “Off,” “Buzzer,” and “Radio”. If you selected radio alarm, and the radio just started playing to wake you up, you probably don’t want to make the obnoxiously-sounding alarm buzzer go off when moving the slider to the “off” position to silence the radio.

There is a consensus, however, that three distinct physical controls — or three physically different positions on a single control — for selecting the alarm mode will work better than the current single button that cycles through the modes.

When selecting the radio [alarm type], the buttons on top might even light up briefly to signal the additional choice. In “Off” position the alarm time would be hidden from the display.

While I am not sure whether users would find it confusing if the alarm time vanished from the display, or not, I really like the idea of the genre buttons lighting up on top of the clock to guide the user to these additional controls.

And last, but not least, I’d replace those pesky +/- buttons with rotary controls. Endless and “push-to-change” for time adjustment and regular, bounded ones for radio tune and volume.

I could see the use of rotary dials for setting the volume, and maybe for radio tuning. For setting the clock, though, I’m skeptical whether this would be a good choice.

I’ve used a few clocks that had a single rotary dial for adjusting the time. Rotating them would adjust the minutes, and the hours would roll over as if you were setting an analog clock.

The problem with this approach is that the dials either work too slowly, so that many turns are required, or they are overly sensitive and operate so fast that setting the time with precision becomes a major challenge.

If dials were used for this control purpose, the clock would probably require two separate ones for hours and minutes.

In an amusing coincidence, Donald Norman has also written about the Hilton radio alarm clock again recently. Stating that the clocks often fail to display the correct time, and that it is virtually impossible for hotel guests to adjust them properly, he makes this suggestion:

Meanwhile, if you want a good alarm clock, carry your own. I highly recommend the clocks on modern smart phones which take advantage of their numerical keypads and large, attractive displays.

For setting highly structured data fields like the time, numerical keypads create their own set of usability problems. If you have seen someone struggle with typing in the time via a keypad, and never being really sure which digit is currently being set, you will know what I mean.

In the end, Norman tells Hilton to “Try again. This one was a nice try. Time for a new, improved version.”

I agree: Hilton’s efforts are commendable, even though the end result still leaves room for improvement. I do hope they will come up with a version 2 of this clock. And I can’t wait to see whether it will feature up/down buttons, radial dials, or a keypad for adjusting the alarm time, and whether that process will still be modal.


  1. I will skip the point about not being able to adjust the clock’s regular time due to it being radio controlled. I simply don’t find that aspect particularly interesting. Apologies. 

Cleaning up Some Article Meta-Data

Before I launched this website in January of last year, it took me quite a while to decide how to leverage categories and tags towards making it easier for you, valued reader, to find articles that interest you.

Applied Information Architecture

Eventually, I settled on using categories for indicating the general category of the product I was writing about, and applying tags to list the user interface elements I was focusing on.

Every article was assigned exactly one product category and one or more UI detail tags, e.g., “Press for Coffee (W)here?,” that covers a coffee pump pot, was categorized as “household items” and tagged “buttons” and “labels,” and “The Bubble Cursor in Action” zoomed in on “cursors” and “target acquisition” while observing “usability basics.”

What’s with the wacky language in the second example, you ask?

Originally, I thought it was kind of funny in a geeky way to “zoom in on” the UI details while “observing” a product category. Maybe you noticed that the custom URLs reflected this, too: for tags, I used a construct like:

https://uiobservatory.com/zooming_in_on/cursors/

Similarly, categories were linked to via:

https://uiobservatory.com/observing/household-items/

Just too much stuff

Over the last few months, that system has turned out to be way too complicated.

With every article I published, I was tempted to add new tags and categories to reflect new UI elements and product categories that I “zoomed in on” or “observed,” respectively.

This becomes obvious when you have a look at the tag cloud:

UIOTags

You will most likely not have seen this tag cloud before, because its contents were not exposed on the site — unlike the list of categories, which appears to be almost as uselessly messy as the tag cloud:

UIOCategoriesOld

It was time to fix this, and I hope that the new approach will do just that.

Simplify, simplify, simplify

In the first step, I have completely removed all tags, and not just from being displayed in the articles’ by-lines, but also from the article database.

Secondly, for categories, I have been musing on how, exactly, I want to group the articles on the site. Most UI-related websites and blogs I follow focus almost exclusively on digital devices and software user interfaces. As soon as I fully realized that, I knew that it would make the most sense to categorize my articles based on the complexity and very general category of the devices covered.

Hence, this is the simplified categories structure that I came up with:

  • Usability Basics: Fundamentals of the science of human machine interaction and the art of user interface design.

  • Simple Things: Everyday things with a limited, yet often intriguing user interface, like door handles, coffee pots, and make-up mirrors. According to Donald Norman, users should be able to use these kinds of devices without having to read a manual.

  • Appliances: Stand-alone devices with more complex user interfaces, e.g., ticket vending machines, home theater components, and car dashboards.

  • Computer Software: Any software that runs on personal computers, “smart phones,” tablet computers, etc. This covers applications and operating systems as well as websites.

  • Documents: User manuals, questionnaire forms, etc. This category might as well have been labeled “content usability.”

  • Services: Processes or workflows which are based on interactions between individuals and organizations.

It’s these six categories that you will see in the side bar from now on, and I hope you find them easy to grasp and convenient to navigate.

As for the tags, searching for UI elements like buttons or cursors via the site’s search field should bring up more relevant results than the tags I had applied manually. They will not be missed, I’m sure.

Whaddayasay? Lemme know!

Let me know what you think about this change: pop me an email and share your likes and dislikes about the new setup with me.

Update 2013-02-26: Added the Services category.