Posts Tagged 'buttons'

28 Things Everybody Should Know, Part XXIV

Some conventions just aren’t worth messing with.

More often than not, it would seem that analyzing and redesigning a piece of hardware or software to increase productivity would be a good idea, especially if such changes include faster, safer, cheaper or simpler operation. A good example is Leo Beltracchi’s implementation of a graphical display system for nuclear power plants in the late 1980s, eliminating the need to frequently compare numbers to ensure the temperature of a reactor core is within a safe margin. This replaced confusing numerical data with a simple curved line portraying the temperature at which liquid inside the core begins to evaporate, and a dot representing the core’s current temperature. This system, still in use today, is no doubt responsible for a drastic improvement in modern power plant supervision, if not the prevention of fatal accidents that would have happened due to a couple easily missed equations.

Consumer products, such as cars, electronics and appliances, often receive updates when laws or demand calls for them. Airbags, scroll wheels, touchscreens, a fourth razor blade–these are all added features meant to improve some aspect of an existing product. Without improvements like these, consumers would have less reason to replace their products with new ones.

There are, of course, improvements to products that don’t necessarily boost their efficiency. For instance, the Dvorak keyboard, an alternative to the much more common QWERTY layout, shows a decided increase in performance with users who are familiar with its key placement. However, the QWERTY layout has been around for over 130 years, and most computer users have never seen a Dvorak keyboard. The QWERTY layout has become an established standard in computing, and to replace it with the Dvorak layout would not only mean somehow convincing the entire world to give up what they’ve grown to know and learn a completely new system, but the cost of replacing every keyboard with the updated layout would hardly be worth what little increase in typing speed would result in the change.

Similar attempts to update the keyboard have been made with keys other than the numbers and letters. Supposedly, these changes are meant to better the intuitive nature of the keyboard, but to a user who has spent a lifetime working with a specific layout, the outcome is just the opposite.


These six keys–Insert, Delete, Home, End, Page Up and Page Down–are grouped in this order on most modern keyboards. Because of their location relative to the arrow keys, they can easily be found without the user looking down from the screen. In fact, I use the Delete key more than I use Backspace, due solely to its location, and have become used to moving my cursor to the left of a character rather than the right before deleting it. As a user from the days of DOS, I still use the Insert key from time to time, as Copy, Cut and Paste all used the Insert key years ago, and many applications still have that option. The rest of the keys in that cluster are frequently used in navigating many types of documents and browser windows, and the wonderful thing is that I never have to look down to use them.


Here is a keyboard which breaks that established six-button group, eliminating the Insert key and rearranging the rest. Home and End are now left and right of each other, which makes sense when considering the direction a cursor moves along lines of text in a word processor, but not so much in a web browser. The Delete key, for some reason, has doubled in size, and the orientation of the group is now vertically arranged. Even if this layout might prove useful for certain users in certain applications, changing the layout of a conventional, time-tested setup only confuses the majority of users and breaks consistency with other keyboards on the market.


Function keys, used a bit like wildcards in computing, can serve a number of uses. Most of us know that F1 will bring up help files to assist us when we’re stuck, and we know just where to find the key. Packed together in groups of four, the function keys are easy to discern from one another without having to read their labels. As it turns out, four keys grouped together are easy to count internally, so users can quickly find, say, F8 without much hassle–it’s the last one on the second group of function keys.


Here’s how the other keyboard groups the function keys, in sections of three keys each. Even if this turns out to be slightly easier for users to use, the vast majority of keyboards group the keys in fours, and keyboards that break this rule are only confusing users who have grown accustomed to the norm. Even worse, users who switch keyboards often will find more difficulty using either layout smoothly. It’s hard to develop a productive subconscious pattern when you’re forced to break the pattern half the time.

On top of the different layout, the function keys on this keyboard don’t recognize commands that others do. F2 doesn’t rename files, F3 doesn’t search, Alt-F4 doesn’t close applications and F5 doesn’t refresh pages. They don’t even do what their labels say they’re supposed to, unless they’re used in Microsoft Office applications. What good is a new layout when it must be relearned and fights every convention we’ve established in the past?

Fortunately, changes like this aren’t as common as changes that actually improve on the user experience. Users are often reluctant to accept change, which is probably a good thing. Without sticking to a few consistent, global standards, we’d be reinventing the wheel with each new product we develop.

Advertisements

28 Things Everybody Should Know, Part XXIII

Options, hints and buttons should be unique and easy to tell apart.

Some of the most successful computer applications–Microsoft Office, iTunes, Firefox, Adobe Creative Suite–are popular not only because of their abilities, but also because users can employ those abilities in a variety of ways, making functions easier to find for first-time users, and at the same time faster for seasoned users to operate without disrupting their workflow. For example, those wanting to italicize a word or phrase in a word processor might find the appropriate option after a few seconds of poking around on the taskbar, while those more used to graphical interfaces, ribbons and panels may search for the more intuitive slanted I button that indicates italic text. Finally, users with a little more experience know that pressing Ctrl + I will italicize selected text within a document. These three options reach the same conclusion in separate ways, allowing users of any background to find the option they’re looking for as painlessly as possible.

There are downsides to this desire to reach users of every possible skill level, however. One that can be fairly obvious in some programs is the clutter of repeated options in both the graphical interface and dropdown menus, which prolong the time it takes to sift through buttons and lines of text to find the right option.

A well planned application will offer hints to let the user know how to more effectively access more common options, such as saving documents and exiting the program. For example, this dropdown menu offers alternate key commands for creating a new document, opening an existing one, saving, printing and exiting the program.

Another problem occurs when dealing with complex tasks, such as configuring a document to be printed. Using a desktop printer is rarely as simple as pushing the Print button, and with page configurations, different types of papers, inks, and hardware properties, the process often includes numerous settings over multiple dialog boxes. It is important for developers to make sure these commands are unique from each other, or they might cause even more confusion for the user.

The Print dialog box in Adobe InDesign has two separate buttons labeled Setup, leading to two different places. This is especially troublesome when trying to help a user over the phone.

Even more frustrating is this secondary dialog box displaying available printers. The box itself is simply titled Print, the same as the main dialog box, but the bigger problem here is the confirmation button, also labeled Print. Clicking this button won’t start the printer, but many users, not wanting to waste a sheet of paper by prematurely starting the process, will be apprehensive about selecting this poorly labeled button. A better choice would have been OK, setting this button apart from the final Print button, and consistent with other buttons that confirm settings but aren’t known to initiate printing. This will instill confidence in users who want to know exactly when they will be telling the printer to begin.

Planning an application as in depth and useful as InDesign, with multiple levels of interaction accessible to everyone from beginners to power users, is an extraordinary feat. I don’t have many suggestions for Adobe regarding the new incarnation of InDesign, but my main gripe is this oversight with the similarly labeled buttons. With a little more testing, I feel they would have found this redundancy to be resulting in user error and frustration, and could easily fix the problem by changing a few words around, distinguishing each button from the others and improving user confidence and understanding.

28 Things Everybody Should Know, Part XXII

Dangerous products should be harder to engage and easier to stop.

Earlier this month, a four-year-old girl died after being trapped inside a front-loading washing machine which was turned on by her 15-month-old brother. The event stirred up a good deal of discussion involving the design and usability of certain washing machines in households with children.

Childproofing a home is never easy, and often quite expensive. Entire aisles of safety mechanisms are often available at retail stores in an attempt to guard children against numerous potential dangers: electrical outlets, drawers containing unsafe products, closet doors, sharp edges, hard surfaces and choking hazards, to name a few. As soon as a family expects its first child, it quickly becomes apparent just what a death trap some homes can be.

It’s impossible to remove every hazardous element from a child’s life, and attempting to do so only prolongs the encounter for a later time. When dealing with products and environments that can pose a threat to a child’s safety, it’s good to take advantage of the one safety mechanism built into all children: their size. Kids unable to figure out dangerous equipment start out with a very limited reach, and this should be utilized when designing products that can’t be simply kept away from children, such as washing machines.

According to news reports, the controls to the washing machine in question (a Kenmore 417 front load washer) are a mere twenty inches off the floor–well within the reach of a small child–and can be engaged easily. In top loading washers, the controls are usually set behind the door, and require a taller operator with an extended arm to start. With the advent of front loading machines, perhaps because clothes can now be folded or piled on top of the machine, keeping the controls where they were would have seemed like a bad idea, as access to the buttons might be blocked with no need to keep the top of the machine clear.

Years ago, a few medicine companies began advertising bottles that were easier to open, responding to elderly users having difficulties opening their medicine containers. Most childproof bottles feature caps which must be squeezed and forced open, or arrows which have to line up with one another before the cap will pop off. Both took considerable strength, and the arrows were small and hard to notice, making them harder for children to figure out. Obviously, these safety features cause problems for older users, who often have problems with both the strength and eyesight needed to open the bottles. To solve this problem, the new bottles have a long tab sticking up from their cap, making them easier to grasp, but still take a bit of strength to twist off. On these bottles, instead of the standard “Keep out of reach of children” warning, the label clearly states not to allow the bottle in any household with children–which is wonderful for older users, who are typically beyond the stage of having to worry about kids running around their homes.

The problem with this new style of washing machine isn’t only where the controls are placed, but the type of controls they use. As a user, I never really liked the push-twist-pull dial used to select the type of fabric and duration of the wash. Because the dial can only spin clockwise (a limitation I’ve never understood but have found on every dial I’ve ever tried), passing the desired setting means having to turn the thing around another rotation, and it isn’t always easy to know if the arrow is right on the correct setting or one click behind it. I’m always a bit uneasy about advancing an extra click when trying to select my setting, and because I’ve always used the exact same setting with all of my clothes, the fact that I have to turn the dial with every load does seem a bit pointless.

So the dial isn’t necessary, but eliminating it also gets rid of a helpful safety feature. How can a button-driven menu incorporate an equally effective feature? One idea could be to require two buttons, placed far enough apart to require two hands, to be pressed simultaneously. This will make it almost impossible to activate the machine accidentally, and still offer a simple way to get the machine started. Because the contents of the machine move around during the cycle, a release lever or button inside the machine isn’t possible, but in the interest of preventing another accident, unlikely as this sort may be, it would be possible to install a small microphone that halts the cycle if a loud noise, such as a scream, is detected when the tub begins filling with water.

Cases like these make us realize how important it is to analyze every possibility regarding household objects, products and situations, and at least try to prevent accidents before they occur. I wouldn’t say a recall is necessary on washing machines like this, but users need to understand the ease with which they can be engaged, and make the controls harder to reach by keeping the machines elevated or their rooms locked if there are children about. Like with the medicine bottles, manufacturers of these machines should make sure customers are warned of their inherent shortcomings as equipment easily accessible to children, by including printed warnings on boxes and in manuals that come with the products. When accidents like this happen, there is often no one branch of the user experience process the place the blame, as all parties–design, development, sales and even the user–may all have contributed to the unsafe conditions which led to the accident. That’s why it’s important to consider every step of the process when working to prevent future incidents.

28 Things Everybody Should Know, Part XXI

Try to break your system before someone else does.

Product testing is often overlooked by developers whose products aren’t a threat to anyone’s safety, or for which laws don’t exist to mandate testing. But the majority of all products and services are designed for a market not comprised of like-minded developers, and users will inevitably end up making mistakes not accounted for during the development process.

Another problem with experience design is that developers often test their own products in the way they’re meant to be used, without exploring different approaches that might inadvertently–or even purposefully–cause the system to fail.

Corner cases are situations beyond those normally anticipated by developers, where a user might push the abilities of a product further than it was constructed to support. In certain scenarios, such as with load-bearing pulleys and cables, corner cases must account for wide margins (a pulley I have states its limit at 500lbs, but I suppose it will probably sustain twice that without breaking–the company probably severely understated its abilities to prevent accidents and ensuing lawsuits), whereas electronics like computers don’t need such a large safety net (many people safely overclock their systems, threatening little more than the longevity of the computer itself).

Borrowing from Murphy’s Law, wherever there is the possibility to break a system exists, someone will find it sooner or later, and it’s best to catch it and fix it (or create an acceptable workaround) before it hits the shelves and starts causing problems.

By way of example, most keyboards today only recognize four keys pressed at one time. Honestly, the keyboards themselves probably recognize many more than that, but probably refuse to relay the extra signals to the computer. I don’t know exactly why they do this, but seldom are more than three keys ever used simultaneously, and it’s possible that too many signals at once could cause some applications to go a little crazy. (In fact, it may be a Windows problem–I don’t recall experimenting on a Mac.) But with all the various programs out there, most only really dealing with one or two keystrokes at a time, limiting the operating system’s recognition of more than a handful of keys undoubtedly has solved some problems. And it’s still more than you could ever press at the same time on a typewriter.

This is a screenshot of LEOGEO, a website I discussed earlier. Under normal circumstances, the gray letters expand to display a link when the user rolls over each one, and reverts to its single-letter state when the cursor rolls away. Essentially, only one link is in its full state at any given time.

In Flash, the commands used to trigger events with the cursor rolls on and off buttons are on(rollOver) and on(rollOut). However, there are a few more states designers often fail to account for, and one in particular can result in multiple rollover states the designer hadn’t planned for: on(releaseOutside). This tells the computer how to act if a user clicks the mouse button down, drags the cursor away from the button on the screen, and then releases the mouse button. Without declaring a releaseOutside event, the button stays in its rollOver position until the cursor rolls back on and off the button a second time.

LEOGEO’s buttons weren’t scripted to handle this unexpected behavior, which can occur when a user is moving the mouse and clicking multiple buttons rapidly–or whenever I decide to test buttons to see what will happen. Once a website goes live, there’s no telling who will use it, and if every unlikely problem isn’t anticipated, it will very likely turn up at the most inopportune time.

The best way to make sure a system won’t break is by doing everything possible to break it. Automotive companies crash test their own cars extensively, using their findings to improve on future models and features. Unfortunately, many developers don’t have the mindset of a product tester, and certainly don’t think the way typical users do, so without knowing what it takes to break a system, they can’t possibly know how to prevent such a breakdown.

28 Things Everybody Should Know, Part XX

Interaction should enhance the user experience, not hinder it.

Technically, all websites can be categorized as interactive, no matter how basic and seemingly passive to a user’s behaviors. With the exception of parked domains and single-page sites with no buttons or links to any other page, there is some degree of interactivity between the human and the machine.

When the elements of a site are developed to react in a new, unexpected, experimental or engaging fashion, it becomes a subject of interactive design, with all the connotations and philosophies that go along with the practice. There are many reasons to choose to make the switch from static HTML to a more dynamic presentation such as Flash: added functionality, a more human look and feel, or just a desire to stand out from the drab expanse of drab unmoving, sites on the web.

When planning the style and degree of a site’s interaction, it’s important to consider the reasoning behind it and whether it will enhance the overall user experience. Quite often, websites will feature full Flash menus that, once looked into, are little more than simple menu lists with moving elements, often slowing user navigation and resulting in unnecessary disorientation. In fact, a large number of artistic portfolio sites made in Flash are simple menus made more frustrating than helpful by making users chase moving buttons, explore confusing landscapes with no visible hints as to what leads where, and perform feats well beyond simply clicking on a concise list of available options, which would have worked just as well.

The Amsterdam Film Experience website starts off with a number of thumbnails randomly tossed about the screen–some overlapping others at times–which lead to a featured film or information about the event. The menu is more engaging than a simple list of pages and videos, but makes it difficult to find what the user is looking for, especially since buttons don’t tell where they’ll lead until the cursor rolls over them (a phenomenon knows as Mystery Meat Navigation, which, aside from exploration-centered experiences, is a very bad idea, as it makes users do more work than should be necessary to discover where clicking will take them; after all, moving the eye is far simpler and takes less effort than moving the mouse and accurately stopping over the button’s hit area.)

When the user chooses a thumbnail–by either double-clicking or dragging the image into the box in the lower right corner, again muddling the experience–the remaining thumbnails fall to the floor, where they remain for the rest of the visit, unless the user drags them around to see what’s hiding behind them (having dropped to the same Y axis, thumbnails are even more likely to overlapped, leaving at least a couple completely hidden, as well as some important text and the email input field). The sudden exposure to gravity gives these thumbnails a tangible quality, which might make the user feel more connected to the site, but with all the overlapping and trouble caused by vague button descriptions, it’s a shame to give the appearance of a row of physical objects and yet not provide something to hit when things get too confusing.

Of course, while the interactive element of this site isn’t necessary, the experience can still be quite enjoyable. But forcing users to play along with less than conventional site navigation, when many of them might want to quickly find what they’re looking for and move on, isn’t a good way to reach the broadest audience. A successful interactive site will be designed with the understanding that some users aren’t looking for an immersive experience, and supply a secondary, static navigation style to allow those users a less complicated experience.

Interactivity can greatly enhance the user experience, but there is a time and a place for it, and it’s impossible to tell whether a user will be receptive to interactive immersion at any given time. Instead of expecting users to fully appreciate the artistic vision of a website, designers should try to make sure the experience will benefit from the addition of interactive elements, and even then, try to give an alternative for what might end up frustrating a percentage of their visitors.

28 Things Everybody Should Know, Part XIX

Users expect navigation either above or to the left of the content.

More often than not, when a user visits a website, the purpose for visiting–a certain bit of information, for example–isn’t on the first page of the site. Users generally have to click around before reaching the functional, meaty part of the experience, and the faster users can find the desired links and get started, the less chance a site has of chasing them away prematurely.

Because the English language reads from left to right and top to bottom, users are naturally inclined to scan for useful navigation starting in the upper left hand corner and moving either right along the top, or down along the left. (That’s once the user’s decided to move on to another page, of course. Large splash images and other content usually grab the user’s initial attention, but when it’s time to move on, our instincts tell us to head for that upper left corner.) The layout of the page, in much the way a painting directs the viewer’s eye around its canvas, has a large impact on where the eye moves from that starting point in the corner: a prominent horizontal row of buttons along the top will imply that the most utilized navigation will be included in that row, while a column of buttons down the left side will tell users to scan downward first.

LiveJournal uses a horizontal navigation along the top of the page, where rolling over a menu item will bring up a submenu underneath. Placing the site’s logo in the upper left corner assures users that this corner is a good starting point in searching for common navigation and functionality.

YouTube’s navigation is spread around the site a bit more, with video-specific functions to the right of a video’s playback area. This helps keep videos within the browser window, for user like me whose windows aren’t big enough to include the video and the options and links all at the same time. But still, the most commonly used buttons–or at least the most helpful buttons for novice users who don’t know their way around yet–are in the upper left, with user account options in the upper right.

A good example of a site with navigation on the left of the page is Hoogerbrugge, a site full of experimental presentations and animations. Anticipating most users’ ability to scroll or, at the very least, hit the Page Down button if necessary, Hoogerbrugge has large menu buttons with accompanying illustrations, clearly stating that the most important part of the site is waiting just on the other side of these buttons.

There are many reasons to break this pattern of navigation, especially when the architecture of a site’s content interacts with the menu–good examples are LEOGEO and Semillero, both sites that feature the navigation as an experience in itself. Other sites, especially those that rely on advertising revenue, need users to stick around a while before heading for the menu, and have a reason to be sneaky with their button placement (but not too sneaky, or users might give up and never return). But aside from this and artistic experimentation–which isn’t necessary as often as many designers want to believe–users want their browsing experiences to be as fast and painless as possible, and managing the navigation of a site with the understanding of where the human eye is conditioned to look will make everything run a little smoother.

28 Things Everybody Should Know, Part XVI

Screen edges and corners can drastically improve functionality.

Whenever I seem to lose track of my cursor–something that happens fairly often when using Photoshop, despite how much work Adobe has put into making the cursor stand out from the image behind it–I know I can swipe the mouse into a corner of the screen, where it will stay (unless I’ve got a dual-screen setup), and I’ll have my bearings once again. The corners of the screen give a little solace to those who lose sight of their cursors now and then, and provide a welcome alternative to shaking the mouse back and forth. If a parked cursor is hard to locate, a cursor wildly dashing left and right isn’t much more helpful.

Many elements of human-computer interaction also involve the edges and corners of a display. OSX’s application dock, the Windows Start button, and program-specific toolbars are often located along the edges of the display and nestled in the corners, making them easier to locate, and supposedly, easier to use.

The great thing about these locations is they demand very little attention from a user’s eyes, minimizing the delay in workflow and giving the user less to think about. In a typical setup, moving a mouse more than a couple inches in any direction will bring the cursor to the limit of the screen, no matter where it starts from.

There are cases, however, when a button is placed near an edge or corner, but doesn’t recognize a click unless it occurs a few pixels away from the outside of the screen. This still makes them easy enough to find, but miss out on a critical possibility to truly speed up the user’s actions.

This is the lower left corner of my screen. The Start button won’t activate unless my cursor is at least four pixels up from the bottom of the screen, or two pixels right from the left. Because of this, I can’t simply sweep my mouse down and left, and expect the Start menu to open when I click. I have to move away from the corner, but not so much as to pass the entire button. This takes a lot more of my attention than placing the hit area in the very corner.

Along the edge of the screen are my quick launch icons and buttons to recall all of my opened applications. As with the Start button, none of them are actually along the lower edge, but four pixels above it, taking considerably more effort to click on them.

Thankfully, Windows XP fixed this oversight, but being a fan of the original Start menu and organization, I always use Classic View, which doesn’t include that extra functionality. I have used systems with which Classic View does a better job or recognizing edge and corner clicks, but with all the different versions of Windows out there, and accounting for upgrades and service pack installations, I can’t recollect which versions behave in which way.

Many applications, such as Photoshop, override Windows blue title bar feature (something I’m not too happy about, but I’ll discuss that next) and place their toolbars and other interface components along the top edge of the screen. Again, these items aren’t actually placed against the very edge, but rather seven pixels lower.

This image shows all four corners of the screen using Adobe Lightroom with Windows XP’s standard Start menu. As with Photoshop’s toolbars, none of these are accessible from the very edge, nor are the program menu in the upper left or resize buttons in the upper right. It should be noted that Windows XP’s standard resize buttons, generally applied to all programs, do react to the very edge and corners.

Here, the Start menu and program bar buttons all accept edge and corner clicks, but in the lower right corner, the icons in the system tray and the clock all require the mouse to move away from the edges to work.

Mac OSX takes the idea of screen corners to a fuller extent, launching applications, organizational tools and screen savers when the user stows the cursor in a corner for a second. Many laptop touchpads and PDA screens utilize corners for user-defined applications and options. These make launching common programs much faster and require less interruption to a user’s thought process, adding to the experience, while those just a few pixels off slowly chip away at it.

Until everyone has a touch-enabled screen on their desk, the edges and corners of the screen are the closet thing to tactile response a monitor can provide, as users can safely assume the limitations of the screen will catch the cursor and hold it there for them. Placing buttons along the edges and in corners, rather than just short of each, will make this understanding work in the users’ favor.