Posts Tagged 'human-computer interaction'

28 Things Everybody Should Know, Part XXVII

No one system will make every user happy.

Judging by the sheer number of mobile phones, third-party plugins, variations of Linux and alternatives to Internet Explorer available, it’s clear that no one system can please every user. Reading through previous entries here, I assume I’m much harder to satisfy than most others (or at least louder about it), but I’m not completely alone. Everyone has a different philosophy on the ideal user experience, and while it’s impossible to cater to the needs and desires of every last user, it is possible to allow for customization and flexible interfaces.

I use Windows XP at home, but I’ve never liked the default XP theme, with its large buttons and rounded window corners. Yes, it’s more aesthetically pleasing, but takes up a bit more real estate on the screen and demands a bit more attention that the comparatively flat look and feel of previous Windows versions. (I think of the operating system as a launcher rather than a playground–I want it to support the programs I use, but I don’t need it to blow me away with its own graphics.) Luckily for people like me, Microsoft offers a reversion to the Classic theme, which also takes less of a toll on the CPU. I’m also not a fan of animated operating systems, such as the scrolling or fading Start menu, or the moving, fading, zooming functions in Mac OSX and Windows Vista. Again, these features can be disabled for users like me, who prefer a more efficient workflow over an aesthetically impressive one.

With user diversity in mind, Apple developed their App Store to make it easy for users to customize their iPhone experience. While the operating system itself is like nothing previously on the market, they knew the full potential of their product wouldn’t be reached without allowing downloadable applications and add-ons that take advantage of the multitouch screen, accelerometer and connectivity.

Adobe applications, like Photoshop and Illustrator, start with a default, consistent shortcut scheme for their functions–Ctrl + Z will undo an action, Ctrl + W closes a document–and users may set their own shortcuts in the Preferences menu. Adobe understands that some computers, especially in studios and offices, will often have multiple users, so declaring a shortcut key doesn’t override the default setup. This way, in typical Adobe fashion, there can be several ways to achieve the same result, improving the overall experience for those who are used to a specific setup without infringing on those who prefer the default settings.

While it’s not possible to predict the demands and preferences of every user, there are a few broad categories developers can anticipate most users falling into: those who will happily use the product the way it’s intended and expect nothing more, those who will be generally happy but want a little extra in terms of personalization, and those who stubbornly stick with a product–or give up on it–because of the product’s (and the user’s) inflexibility. Unfortunately, the first camp is rarely an overwhelming majority, and the latter is largely comprised of power users who are hardly ever happy with default settings and features.

With those in the middle group, users who would like something extra to enhance their experience, who may just be waiting for the next, slightly improved model to come along, customization is the key to ensuring a more loyal user base. Even after years of constant product testing, there’s no telling what might be the next social networking phenomenon or popular time-wasting puzzle game after a product is released, so allowing future updates and downloadable content should help keep a good chunk of customers from switching to a different product or service. In the short amount of time since the iPhone was released, websites like Pandora and Twitter have become increasingly popular among users; imagine how unfashionable it would be for Apple to have included a permanent Myspace button on the bottom of the iPhone.

It’s not bad that some people are stubborn, unyielding users who have definite expectations for human-computer interaction. What’s not so good is when those people become stubborn developers and let their compulsions get in the way of the interest of the user. The best way to reach a wide audience is to understand that no one system will make everyone happy, and allow enough customization to make users feel comfortable with the experience.

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 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 XVII

Don’t fight the operating system.

While they continue to offer more than just a starting point for our applications, such as customizable applets and desktop widgets, operating systems like Windows and Mac OS have developed fairly steady, systematic guidelines by which most programs happily abide. These systems include color-coded, iconic navigation tools and affordance-specific hints that, when used appropriately, allow for easier usability and less confusion.

For example, programs in the Windows environment generally follow a consistent color scheme. In Windows XP, for example, title bars are by default given a blue gradient (which I’ve replaced with solid blue), and inactive title bars are grayed out to show the user that the focus is on another application. As only one program may be in focus at any given time, this is the most obvious hint as to which application will respond to a user’s input.

Adobe Photoshop used to adhere to these standards. Here we see blue title bars showing that Photoshop is the current active application, and which of the three open documents is active within Photoshop. Also, the toolbar to the left shows where a user can click to move the toolbar, or double-click to hide it.

Here is Photoshop’s newest incarnation. Notice there are no blue bars to be found, and the difference between the active and inactive documents is much more difficult to notice at first glance. And switching to another application changes nothing in Photoshop’s title bar, which can lead to confusion for the user.

This new Adobe color scheme, found in most CS4 applications, seems to echo Windows Vista’s default settings, rounding corners around documents and losing the blue headers for a less saturated color scheme. And it could be argued that more neutral surroundings will allow images to be seen with less distraction, but going so far as to eliminate even the option to replace the familiar, ever helpful blue bars that help discern active from inactive elements only takes control away from the user.

Overriding the established scheme also takes an unnecessary toll on the processor. Moving documents around in Photoshop 7 is much smoother and faster than in CS4, and the new layout scheme–really just a Vista/Mac-inspired skin–doesn’t always do its job:

The top part of this image shows Windows XP’s default scheme, and in the middle is Photoshop CS4’s own layout. Quite often, especially after minimizing and restoring the application, Photoshop will forget to refresh its skin properly, allowing a bit of the original format to show through, resulting in a choppy overlapping mess, as shown in the bottom of the image. Because the two don’t have identical buttons size or placement, the user might not know exactly where to click. Fixing this will likely take a couple minutes of coding, and will probably be improved in the near future with an update, but if Adobe had stuck to the rules, they wouldn’t need to come up with workarounds for problems like this.

Another example of ignoring common operating system guidelines is when a program doesn’t place a corresponding button in the Windows taskbar–that horizontal strip along the bottom of the screen. I understand the desire to free up space on the taskbar, but some applications–such as Trillian, my chat program–will often get buried underneath others, or minimized when I want to see my desktop. Without offering a button along the taskbar, it makes locating the application a lot more difficult than if it had just stuck to the rules.

Operating systems don’t always make things easy, but one thing that human-computer interaction benefits greatly from is conformity. With certain exceptions–full-screen games, for one–developers and designers should work together to create experiences that work within these limitations, or at least give users the choice to set their own. For the most part, computer applications like Photoshop are tools we use to achieve a specific end; they aren’t expected to be an experience in themselves.

28 Things Everybody Should Know, Part XIV

Navigation layout should reflect the movement it represents.

When the blueprints for information architecture are laid out, developers have a clear understanding of the relationship between each option and its ensuing result. This is because the elementary structure of an experience, such as a website or presentation, is a visual series of options branching out to other options, like the outline to a Choose Your Own Adventure book.

In the later stages of development, navigation is added to give the project functionality, usually in the form of buttons that serve as design metaphors.

In terms of human-computer interaction, a metaphor draws a parallel to something we know in the real world. We refer to directories as folders because we’re used to a folder holding papers full of information, or files. When first opening a web browser, a user starts off at a default page, specified by an icon of a little house. This home page is supposedly a more familiar place than the rest of the internet, and can be returned to at any time when things get out of hand. And when was the last time you used a cassette tape to take messages? Chances are your cell phone still uses the images of a cassette to represent the voicemail feature. Chances are probably just as great that we’ll see the same obsolete icon as long as voicemail exists, despite the fact that, thankfully, you’ll never have to wait for your machine to rewind your messages ever again.

This is an image of the minimal but essential navigation I have on my browser. I don’t use these buttons a lot–I prefer holding Alt and using my arrow keys to navigate, and F5 to refresh–but the metaphor is abundantly clear: pressing left will move back and right will move forward. This hinges on the assumption that our brains perceive progression from left to right, and being raised on the English language, that works out perfectly for me.

Another simple and effective example is audio and video controls, with applications like WaveLab, Audition and Media Player Classic, which emulate the buttons on a stereo. Here, the back and forward buttons represent not only the direction, but the relative scope of the movement: the button just left of the center will move back a little each second, while the one further to the left will jump all the way to the beginning of a song, or, when multiple tracks are used, skip to the previous track, which is visualized as being positioned to the left of the current track.

Interactive presentations, such as PowerPoint and HyperCard, utilize buttons to move forward and back along a series of pages (also called slides, frames, cards and so on, depending on the application). These buttons can be placed anywhere by the designer, so instead of progressing to the right, a presentation can move down, up or left–but it’s important to stick to a scheme and be consistent with it.

And then there’s Microsoft.

Thankfully I seldom have to resort to using Windows Help, but when I do, this button layout gets me every time. The Next button, used to move to the next step in the process, is on the left, then the Back button, followed by Start Over, the button that shares its behavior with the Skip Back button on a stereo. Why is this button on the very right when it brings the user back to the beginning? The layout of this menu is not only a little off, it’s exactly backwards.

Not only would I suggest reversing the order of the buttons, but because two of them move back and the other moves forward, I’d put a little distance between the Next button and the other two, giving a bit more indication that the Next button navigates to the right, while the other two, grouped closer together, will both take the user back, just with varying distance. Even better, icons to accompany the text would give a more easily recognizable hint as to what these buttons do. People only come here when something goes wrong with Windows. The last thing they need is another headache on top of what they’re already trying to deal with.

Users are accustomed to common interaction metaphors such as this, and there’s likely nothing you can do to break the presumptions they’ve built up over years of subconscious use. As long as a system is built with these established presumptions in mind, users will find it more intuitive and easy to navigate with no extra training–years of real-life experience will provide the training no tutorial ever can.

28 Things Everybody Should Know, Part XI

Avoid forcing users to click more than they really have to.

Mouse clicks demand very little strength. Children can learn to use a mouse at a very young age, and rarely does the pressing of the button cause much of a problem. More often, it’s securing the location of the cursor while the click takes place.

Despite what little effort a user must put into each click, it’s the more fine-tuned practice of positioning the cursor to prepare for the click that causes a bit more frustration. With many interfaces, users must center the cursor over a tiny cluster of pixels–and keep it there until the click is complete–to achieve the desired result. In some cases, shifting even one pixel in any direction between the downward and upward clicks will nullify the action, often with no visual indication that the click didn’t register, resulting in a user waiting for something to happen, until it’s realized that something went wrong. And many users, afflicted by memories of slowed and frozen computers due to multiple instances of a single program, will wait until they’re absolutely certain the computer didn’t catch a click before they try it a again.

There are a couple different shutdown menus used in different versions of Windows. An earlier dialog box, also used in Windows 98 and 2000 if I recall correctly, uses a dropdown box to give the user a list of shutdown and logoff options:

With a dropdown menu such as this, only the selected option is visible, so a user would have to click on the narrow box just to get a glimpse of the other possibilities. (There are dropdown menus which use rollovers to invoke the drop, but this isn’t one of them.)

After the first click, the user may then find and select the desired action, again zeroing in on a rather small area–13 pixels high–to make the appropriate selection. Keep in mind that nothing is happening with the rest of the screen–in fact, the rest of the screen fades to gray as this dialog box is open. At no other time in the entire Windows environment does this happen. All that space to offer a handful of options, and each one is limited to a hit area 13 pixels in height.

Later on, Microsoft divided the shutdown and logoff features into two different boxes, and revamped the design of each.

The newer option box features all three choices clearly visible at all times, and offers larger buttons with both English and iconographic hints for each option. It may have eliminated the need for only one extra click, but each click scratched from a procedure also removes the need to center the cursor over a small portion of the screen.

When Adobe first introduced Creative Suite, a more integrated approach to their design applications, I couldn’t get over a trivial but annoying new element to Photoshop’s Layers panel.

I the previous version, Photoshop 7, clicking once on the arrow next to the Opacity or Fill percentage dropped down a slider which, on the same click, could be adjusted until the user released the button. The two-click method–one to drop the slider down and one to position the arrow–worked just as well.

In the next three revisions of Photoshop, one click no longer did the job. The user had to click once to show the slider, then click again to move the arrow left and right. I don’t know of any other people this bothered, but somebody at Adobe had to program that functionality into the program, and must have consciously chosen not to allow a one-click opacity change. (There actually is another way to do it, by clicking and holding the word Opacity or Fill, not the numbers or arrow, which adjusts the percentage without a visible slider, but that’s not intuitive in the least–in fact, I hadn’t heard of the trick until somebody stumbled upon it on accident and passed the word onto me.)

Finally, with the release of Creative Suite 4, my gripe has been answered. Again, I don’t know if this bothered anyone other than myself, but until CS4, Adobe had chosen to diminish the functionality out of their Layers panel, which only slows the editing process. I’m glad they eventually decided to add that functionality back into their product.

Withholding a list of options from a user can serve many purposes: it clears up space on the screen, it avoids confusion by clearly displaying selected options, and it adds a dynamic element to a series of choices, something much more difficult to do on a conventional paper form. There are several ways to display these hidden objects when the need arises, and there isn’t one right way to go about it in every scenario.

It should be noted that the double controlled click explained above–where both clicks must click on a different point to perform a task–is different than the double click, which only requires one placement of the mouse. Double-clicking is no more taxing on the user than single click, which is why so many users click twice on accident when only one is needed.

Eliminating redundant mouse clicks is a small but important step in increasing user productivity, especially when operations that would require multiple clicks are performed over and over. Most users likely won’t consciously notice when a click is unnecessary, but many will notice the increase in performance when the problem is recognized and addressed. And hopefully a few will even thank you for it, or at least mention it in a blog post.

28 Things Everybody Should Know, Part VIII

Users should never wonder if the system is broken, unless it actually is.

As the typical user’s connection speed increases, so too does tolerance for large downloads and streaming content on sites such as YouTube and applications like DropBox. Whereas even five years ago, the term optimization would be largely comprised of checking for bandwidth usage and browser compatibility, these days the practice seems to ignore the former, while the latter has branched out to include mobile platforms and newer server technologies. File size has taken a back seat in terms of priority, which is wonderful. Who doesn’t want their streaming video in the highest possible quality?

Because of this, Flash websites, in all their bandwidth-hogging glory, are running rampant and nearly unchecked in every corner of the internet, resulting in longer loading times for everyone, but especially those who don’t have access to broadband, such as mobile browsers, users who live beyond the reaches of cable access and families who don’t want to¬† (or can’t) spring for the faster service.

The preloader has been a great addition to the arsenal of developers working with technologies such as Flash, AJAX and Javascript. A preloader is a progress bar that informs the user of how much content has been loaded versus how much is still expected. Graphical preloaders show a visual diagram of how much progress has been made, often in artistic and entertaining ways: the Nintendo Wii’s downloadable content shows an animation of the original Super Mario collecting coins, and the coins themselves represent how much content is left to download. Han Hoogerbrugge’s site displays a silhouette of the first frame of each project, which fills with color from the bottom up as it loads.

There are many sites with preloaders that don’t inform as to how much progress, if any, is being made: YouTube’s cluster of dots, shifting shades of gray in a circular motion, make it seem like the selected video’s on its way, but anyone who’s a regular to the site knows that in the event playback doesn’t begin with a handful of seconds–something that occurs quite often–it likely won’t begin unless the user refreshes the page. This sort of preloader is merely an animation that gives the illusion of progress–which is fine, if no problems get in the way of the implied progress. Unfortunately, that isn’t always the case, so problems need to be anticipated and accounted for to decrease frustration. In fairness, Vimeo’s preloader, while more aesthetically appealing, works (or doesn’t) in the exact same way.

Operating systems have various ways of telling the user something’s going on behind the scenes, such as the hourglass cursor and Mac’s spinning rainbow icon. But like the preloaders used by YouTube and Vimeo, these don’t actually say whether the machine is making any progress–many times a computer will essentially freeze except for the animated cursor, and the user is led to believe something’s giong on in the box, while in reality, the computer may be responsive to nothing less than the Reset switch.

Users generally don’t need to want to know everything that’s happening inside their computers, the same way drivers don’t need to know about every little interaction between the parts inside their cars. But if we’re going to trust the companies that make our operating systems, applications and websites, they need to provide sufficient information concerning the status of the systems we use.

A mindless loading animation doesn’t do its job if nothing is loading, and leads to angry users when it’s learned they’ve been misled. A much more responsible loading animation will communicate with the system and wait for confirmation that progress is being made before relaying that information to the user. And if it can do so with a little class, artistic quality or even interaction, it will make the waiting process that much easier to sit through.