Posts Tagged 'user experience'

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 XXV

Users can play their own music on their own time.

When the internet was a little younger, its destinations more foreign and its designers less aware of what they were getting into, websites were full of splash pages and blink tags and animated gifs of spinning mailboxes that linked to webmasters’ email addresses. One annoyance in particular, which still rears its head from time to time, was the embedding of audio into web pages.

A decade or so ago, before broadband overcame dialup and bandwidth was a precious commodity, websites would embed MIDI files which saved load times, but sounded a lot like a Casio keyboard playing elevator-style renditions of radio hits. As technology improved, audio files could be compressed and included on sites, loading slower, sounding flatter and skipping if the connection couldn’t keep up. It wasn’t perfect, but we finally had auditory accompaniment to our blink tags and spinning mailboxes.

Around the turn of the century, music groups began sprouting up all over cyberspace. Most bands on the radio had some sort of web presence, from an offshoot of a label’s site to their very own domain. I used to type band names into my address bar, followed by .com, and see where I ended up. A majority of the sites welcomed me by sending the band’s most recent single through my speakers, at whatever volume they had been set to. Hardly a warm welcome, especially considering some of the stuff I listened to back then. And in many cases, there was no audio navigation to be found–no Stop, no Pause, no volume control– so I was forced to either sit through the entire song, leave the site, or turn off my speakers, and my own music along with them.

The very reason I thought to visit many of these sites was because I was already a rather loyal fan, and in most cases, I already owned the music. In fact, there was a good chance I was listening to the very band whose site I was visiting, so forcing the same music through the same speakers at the same time was a bit unnecessary.

There are several ways to embed an audio clip into a block of HTML, and while today the options have been whittled down to a handful of refined, browser-friendly choices, a few years ago this wasn’t the case: designers had to choose from QuickTime, Real Audio, Windows Media Player, a bunch of third-party plugins, and even dropping entire audio files into an HTML editor and hoping visitors’ browsers understood how to handle them. We also had CD players and radios that played what we chose to hear, especially during leisure time which we spent browsing the internet. So forcing a user to listen to a song–even by a band they would probably enjoy, given their decision to visit the site in the first place–isn’t the friendliest way to welcome new visitors.

Today we have sites like PureVolume and Myspace, both aimed (at least in part) at helping bands reach a larger audience. Myspace uses Flash Player to play songs on a band’s profile page, but also lets users play music on their own pages. By default, the music starts on its own, unless a user logs in and changes the audio settings. Essentially, browsing a dozen user profiles could lead to a dozen songs playing automatically. We also have iPods, Pandora and XM radio, offering a much larger selection of music we can play at any time, and the choice to listen to music while browsing is becoming cheaper and easier. Why disturb users with something they may not want to hear at the time?

People browse websites at various times of the day, in various moods, and in various settings. Computers are used in libraries, on airplanes, and near sleeping babies. As it’s so far impossible for a computer to determine whether or not it’s a good idea to put some music on, it’s best to leave it up to the user to press Play. And a Pause button is never a bad idea either.

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

Embrace tactile feedback as much as possible.

My favorite cell phone design was a monochrome clamshell with little in the way of frilly add-ons. Besides the nigh indestructible casing and small real estate it occupied in my pocket, I loved the distinction I could feel between each button without having to look at the keypad. If I knew a contact’s place in my address book, I could flip the phone open, push two buttons, and the phone dialed the appropriate number without the assistance of my eyes at any time. Even taking voice-triggered dialing into consideration, this remains the fastest I’ve ever seen a mobile phone dial a number.

The shrinking and slimming of phones has taken quite a toll on keypad designs, cutting back on the noticeable differentiation between individual keys, and the most extreme example of this, the full touchscreen phone, has been in high demand since the launch of the iPhone. Large touchscreens have a wide variety of uses, but one thing they fall short of providing is a keypad, which generally isn’t a problem since most of the time users select contacts from a list instead of using conventional dialing.

I’ve found that phone keypads manufactured after around 2002 have been ignoring the spacing between keys, and often, the tactile clicking that comes with pressing those keys, to accommodate smaller overall phone bodies. Some companies find creative ways around this lack of sensory feedback by adding a little of their own.

This phone features raised beads, almost like rhinestones, on each key, giving the user a sign as to the approximation of each button. Not only do the number keys have beads, but the navigation and phone option keys as well.

Most computer mice, have scroll wheels that provide a soft click for each time the mouse sends a signal to the computer. That way, users will have an understanding of how much they are telling the computer to scroll up and down. Many Microsoft mice don’t include this feature, and I have a friend who appreciates the lack of a clicking scroll, while the absence makes me somehow feel uneasy. My mouse, the Logitech MX Revolution, can switch between clicking and smooth scrolling for gliding through long documents and web pages, and after two years with the MX, I can’t imagine using anything else.

I used to play a lot of computer games in the days of DOS, and most of those games used the Ctrl and Alt keys due to their location on the keyboard. I love those keys, and have found that one reason is the gap between the two. (There are several important gaps in between certain keys that make navigation much easier for users, which I will discuss in a later post.) But with Windows 95 came a new key, one that fit neatly between Ctrl and Alt : the Start key.

So this is my keyboard today. I no longer play DOS games, but the modifier keys–Ctrl, Alt and Shift–are an absolute necessity when dealing with applications like Photoshop. (Furthermore, accidentally hitting the Start key activate the operating system’s Start menu and forces the focus off the current program.) So that gap I grew up with means a lot to me. The same goes for the other side of the Space bar, where I’ve removed the Start key and the Context Menu key.

Most users appreciate a level of feeling to their actions, something beyond simply seeing and sometimes hearing what they’re doing. The more senses an activity offers response to, the more viscerally connected a user will feel to the activity, and possibly, every factor involved in the process: equipment, network, manufacturer and service provider, all of which should show an interest in how an activity responds to the user.