Posts Tagged 'interactivity'

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

Respect the Hand Cursor.

In the early days of UI development, the mouse cursor transformed from a full gray ASCII block to the more easily recognizable arrow we know and love today. Soon after, designers came up with a few added icons to give users hints as to what was going on in that beige box of theirs: an hourglass to suggest the computer was busy thinking, an I-bar to show where text could be entered, and double-ended arrows telling us how we could stretch and resize our windows.

Then HyperCard technology gave us a different kind of navigation, and pretty much changed everything. One important visual cue it offered was the obvious and incredibly effective hand cursor, which we now use to inform users of navigation options within a website. Simply put, when you see the pointing hand, you know you can click.

The hand cursor’s been around a long time, and has become an established visual metaphor for interactivity all over the world. It’s been used in Myst, a game initially created in HyperCard, and in a later sequel rendered in 3D, still maintaining its general behavior of pointing to indicate where a user can click.

Many applications, Adobe’s among them, use an open hand cursor that shows a document can be clicked and dragged to change the user’s view. This draws on the same design metaphor, and I’d guess they even found the same guy to model it for them.

The pointing hand cursor works the same way in Flash sites and presentations. However, there exist simple lines of ActionScript that allow developers to override the cursor’s behaviors: disabling the hand cursor when a user rolls over a button, for example, involves a single line of code applied to the button itself.

Without going into too much detail about Flash and its language, this can come in handy when a developer decides to use a rollover action to trigger an event, but doesn’t want to mislead the user into thinking the button should be clicked on. While there are better ways of going about it, this is a great example of understanding the user’s expectations regarding cursor cues and developing accordingly.

The problem arises when a button that is meant to be clicked on doesn’t display the hand cursor, and doesn’t give sufficient clues that it’s meant to be clicked on. The hand cursor is the easiest, fastest way to offer navigation cues to a user.

On the other hand, there are sites that improperly use buttons solely for their rollover behaviors without disabling the hand cursor feature, thereby telling users they should be clicking on elements that do absolutely nothing. Some sites even employ the hand cursor for the duration of the experience across the entire stage of the presentation, nullifying the purpose of its existence. It’s difficult to determine where we are to click when we aren’t told where we are not to click.

One area where it gets tricky is when form buttons are used. Form buttons are those capsule-shaped, gray buttons that seem to pup up out of the screen, and push down into the screen when you click on them. These are used in technical sites used by banks, auto dealers, and sites involving numbers and money. Offline, the shape and behavior of these buttons are used to confirm and close dialog boxes, minimize and maximize windows, and navigate through installation wizards. Online, users know that clicking on them gets something done, like calculating a chart or submitting personal information. But they don’t necessarily inform us as to whether or not they’ll be navigating us away from the current page, resulting in hesitation when dealing with large forms full of numbers that may or may not disappear once the button is pressed. On a good note, websites such as Amazon.com and Washington Mutual’s site have done away with form buttons in exchange for standard image buttons, complete with the hand cursor that instills that much more confidence in every user click.

As more and more developers understand the reasoning behind the cursor’s visual cues and utilize them appropriately, they will gain more users’ trust and acceptance, subconscious as it may be.