Archive for the 'Usability' Tag

Read on:

The very way that we present content on the web is being reshaped by tablets and ye olde linear newsprint that they seek to mimic.  Just look at how Safari’s new Reader feature “removes annoying ads and other visual distractions” (ie. all the things the web’s good at, the very things publishers have placed on their page deliberately), paring articles down to their intrinsic text core. It’s like printing off the web as a PDF.

I’ve been doing a fair amount of work around screen resolutions lately. There’s always the “users don’t scroll” issue (they do), but have you thought about the device they may be using: laptop or desktop? Probably not. And did you realize that it may affect the user experience, because they might not be using a mouse, but may be using a trackpad? Absolutely not.

Laptop vs. Desktop:

• Screen sizes of 1280 by 800, 1440 by 900, and 1366 by 768 are indications the end user is most likely using a laptop.
• The 1200 by 800 is very popular among MacBooks, and the Sony laptop I’m on right now is 1366 by 768.

And something you probably haven’t thought of: laptops have outsold desktops for years.

For some sites, the majority of users may be using a laptop.

Forget screen resolutions for laying out the page, think about the indications of device type. Over 34 percent of my blog’s audience is the middle of target laptop screen resolutions. A few other sites I work with have percentages that fall in the 40 to 45 percent range. These percentages alone may be a more important number than browser audience. Seriously, who cares about the box model and CSS issues, when the user can’t figure out how to use the scroll bar?

The Bottom Line
Figure out who your audience is. A website that is aimed at developers (a desktop audience) should be designed differently than a website aimed at sales people (a laptop audience). Consider who they are, and what their environment is. For example consumers are now mostly laptop users and expert users at work use desktops, you want to design for whichever of these two fits your audience.

A lot of laptops are on old technology.

A friend of mine has this laptop that’s four years old.

That might not seem that long, but…

(pause)

(pause)

(pause)

It takes ten minutes to boot-up.

Watching that laptop trying to crank through a Flash movie or a website that’s shipping 800k down the pipe for the homepage is a painful experience. There are millions of laptops and underpowered netbooks out there in the real world, many of them held by consumers that don’t want to migrate their files to a new computer, even if they can afford it.

So they stick with their old, trusty laptop until it dies.

Some of the web analysis reports I’ve seen have shown that 75 percent of the user base is still using Windows XP, which was discontinued two years ago.

That alone shows two points:

• There are a lot of people unwilling to upgrade.
• There are a lot of people on slow computers.

The Bottom Line
Bells and whistles might not be a good thing, when considering your audience. A website that works on a web designer’s souped up MacBook Pro might not be working on an end user’s laptop with 1GB of RAM.

Using a laptop means a different user experience.

That doesn’t mean that they are always using the laptop screen, but what it does mean is they are definately using the laptop as a web surfing device. This dramatically changes their user experience. Instead of sitting up in their chair, they are looking down at their laptop, typing and using a trackpad.

I had a long conversation with a game developer about the iPad, how people use it as a window because they are looking down. Laptops are much the same way. They have to be judged within their environment, whether it is a Starbucks, an airport, or a cubicle when the user is on the run.

Home users might be watching a television show or chatting with friends on Skype, but whatever they are doing, they could be performing multiple actions in an environment that’s not sitting at a desk. Four to seven different application windows may be open, and the browser window will not be expanded.

The margin of 700 pixels becomes 600 pixels. That email you are sending for marketing purposes might only be 300 pixels wide by 600 pixels high.

Another consideration: many popup windows and dialog boxes are designed to be 700 pixels high, which are unusable on netbooks that are 1024 pixels wide by 600 pixels high.

The Bottom Line
Designing for the top left corner of a page is more important than ever before. We might have to rethink always having that branding logo there.

Certain actions are difficult on a laptop.

Get on a laptop. Then try using it without a mouse.

Certain actions are assumed to work, like using the arrow keys to scroll through a web page. This is because browser designers have built their applications to work this way. But, there are other actions that are difficult at best and impossible at worst, most of them require holding a button on a mouse — re-size a window, scroll through an editing text area, and perform a multi-select action. These actions require two hands: using the trackpad to scroll while pressing the left trackpad button. Some laptops are missing things. A lot of laptops don’t have page up, page down keys, so the users have to use two keys to scroll down.

In fact, a study performed in 2002 found that not only was scrolling 23 percent faster using a mouse versus a trackpad, the error rate for hitting the target was three times higher with the trackpad.

Trackpads change user behavior. Many laptop users, like myself, are experts at hotkeys — so much so that when I’m using a laptop, I use the keyboard more than the mouse. Actions, such as tabbing through a web form, have to work well or it’s useless. Like most gestural interfaces, if you are depending on mouseovers to indicate status, laptop users are going to be missing out on a lot of feedback, because they are trying to perform an action as quickly as possible.

The Bottom Line
Ironically, many of the same concepts around Section 508 compliance also work well for designing for laptop users. Design it so it’s closer to a keyboard-driven application versus mouse-driven application.

Consider Fitts’ law when designing for interactions.

The size of the target, when using a trackpad, makes navigation on certain sites and, more importantly, performing precise actions, hard. To drag-and-drop in a precise manner is impossible using a trackpad. Try navigating Photoshop using one. I guarantee you’ll be be tearing your hair out in five minutes.

Scroll twice, and hit a target the size of a postage stamp to sign in for personalization — that’s the challenge on CNN.com.

Targets have to be sizable, and dragging the pointer long distances is worse using a trackpad than a mouse. For example, when using a trackpad to go from one end of my screen to another, I have to scroll two separate times from the top left to bottom right corner of my screen. The same works for any direction on the screen for my laptop.

The Bottom Line
Consider distance to take an action and what that action is (for example, a social sign in, which drives a lot of traffic), when designing the page.

I just recently purchased an iPad. I chalked it up to, “Well, I do user experience. I should have one.” I didn’t need one, but after hours of watching people use one in that Apple Store over on Stockton Street in the heart of Apple-dom, San Francisco…

I had to have one.

Sure, it’s over priced (well, not compared to the Kindle).

Sure, it looks like a toy.

But I’m telling you, Apple and the developers that are building applications for this device are going to change the world in a way that we can’t even dream of. I can’t even dream of all the possibilities, and I do software design for a living.

Here are my thoughts.

What the iPad is great at

Surfing the Web

Flash aside, if you want something to read web pages, the iPad is wonderful. Pages load fast, clean, and re-size to the direction you reading. The display is crisp and clear and totally makes users rethink the limitations of resolution. As much as Adobe likes to tell everyone how much content is Flash-based, I didn’t miss Flash at all.

A lot of sites now have HTML5 videos (YouTube, for one), and once site owners see how many of their users are using iPads to access their content, Flash will become less and less the only game in town.

Watching videos and listening to music

The iPod is a great portable device, but if you spend a lot of time on planes, buses or any other mode of transport where you can access the Web, this is a wonderful time waster. Netflix and MLB.tv play at such a high quality, you forget that you’re watching it over WiFi.

I bought it pretty much for time spent on airplanes. In about one week, I’m going to find a new home for my netbook, because my iPad is replacing it.

Frankly, this is the device I would have bought first before the iPod, because it’s the perfect home entertainment device. Some enterprising young engineer, or company, is going to figure out how to make this the hub of your home entertainment system, and that person will make obscene amounts of money.

Reading anything in “print.”

The NYTimes application is similar to the application they built for Silverlight with Microsoft a few years ago. Depending on the direction you’re reading the article, the page repaginates in the new direction. “Print” publishers should look at this as a completely new channel that’s not only going to extend the life of their content, but allow them to do interesting new things with that content, like include multimedia — something they would have never thought of with a strictly paper product.

I’ll make this prediction: this is the device print publishing companies so desperately needed for a subscription/advertising model, and yet they’re going to miss the opportunity because they’re more focused on losing classified ad share to Craigslist.

What it’s not so great at

Actual work

Sure, it’s a great device to take to meetings and conferences. You can take notes without a lot of effort, and the battery life fits in perfectly with an all-day conference. But it definitely lacks many things, like a mouse. The inability to make precise movements, needed for applications like Omnigraffle and Adobe Photoshop, make this a poor device for repetitive tasks required by most jobs. However, this is a great second device to take if you have a primary device like a laptop. Leave the computer at home, and show the broad strokes at meetings.

Think shiny demos, not boring presentations. For some sales professionals, this will replace the projector.

Replying to emails or any other action that requires a lot of typing

This isn’t necessarily a bad thing.

Many iPhone users that were frequent texters developed carpal tunnel symptoms using Blackberry’s and other smart phones, mainly because the phones were keyboard-driven devices. Once the users moved over to the iPhone, the limited feedback of the “keyboard” forced users to be more economical with their typing because it took much longer. Their symptoms disappeared. The same should happen with the iPad; users will adapt and type less because the device wasn’t designed for that.

How the iPad is going to change the Web

A lot of interactions that work best with a mouse and/or keyboard are pointless in a gestural environment

Mouseovers?

Gone.

Interfaces that require a lot of typing.

Gone.

Interfaces that utilize drag and drop (think Microsoft Surface) become wonderful ways of navigating sites using the iPad, much more so than point and click methods. How many sites really use drag and drop geared toward mouses? Many applications will have to be re-thought in a way that’s going to be a harder transition than moving from command line to point and click.

Cutting out all necessary steps to sign in and personalize content will be important

A lot of websites still have long registration processes that require several steps and lots of keystrokes to maximize site content. Services like Facebook Connect, Messenger Connect, Twitter login or another other social way of registration without full registration will be very important in significant user adoption by iPad users.

If I were running a social site (Hey, MySpace, you listening?), I would figure out a way of designing an interface optimized for the iPad. That includes drag and drop, gestural interfaces that allow users to be creative in a space that’s totally different than the web. Sure, it’s a lot of work, but this is the Wild Wild West! The first website to do this is going to make a huge splash.

Saving content locally will become necessary for iPad users

I’m not the lucky few that owns an iPad that has 3G (read: Ambrose Little), and I couldn’t stomach the thought of yet another Internet service on my already expensive AT&T bill. Applications that download and cache content is something myself and millions of iPad users will be very interested in.

Applications that store a lot of content locally so users can read offline will be all the rage as the iTunes store carries more and more applications. Follow the lead of the NYTimes, for instance.

I’ve met Dana Oshiro, and she’s a great writer. I’m glad to see she’s written something about UX, especially in an area we give so little attention to.

Over the weekend we had a chance to highlight Graphic.ly – a company that opted to release early (and imperfectly) in exchange for valuable user feedback. As companies look to their peers and audiences to help define product features, there’s a greater need for scalable testing platforms. Here’s a summary of 8 useful services that will help put you on the path to product greatness.

Read on…

This became an inside joke I at the Online Marketing Summit, one of my clients. I was doing the drinking thang (networking, talking with attendees), and I always have one gimmick that I go with at an event as an icebreaker.

The joke was, “so how do you increase conversion?”

“Red Buttons.”

I’m sure Red Buttons the comedian didn’t know he was going to be the punchline for a user experience jokes. “I’m here on Tuesdays, tip your waitress, next up They Might Be Giants…”

But…

That’s not always the case, as stated in this great tool that’s been around for a year, Which Test Won.

Which Test Won is a great little site that does what we all want: publish the results of A/B tests for ideas of better site conversion.

In the red button/grey button test, Verizon tried two versions of a home page, one with red buttons everywhere, and one with a single red button. The main call to action was a gray button.

Can you guess which one won? Go to the site to see.

Google guesses who your friends are, including your mistress that your wife doesn’t know about – and then shows everyone.

This is such an inexact science, because anyone can figure out your email address. We receive so much spam and other garbage through email accounts (is a shopping site really my friend?) and there are conversations you want private. Those connections are now public by default, as Gizmodo points out:

• A girl you slept with in college sends you a message on Gchat, to tell you she has five beautiful children now, and she doesn’t ever think about you, ever. Ok!
• You exchange some messages and a couple of emails to be polite. You defuse the situation. You don’t mention it to your current girlfriend, because that would be weird.
• Coincidentally, you enable Google Buzz, which adds both your current girlfriend and this lady who you politely deflected.
• Your girlfriend checks out your Google profile, sees your friends list and asks you who that lady is.
• You clumsily try to explain, “Oh, it just adds people you talk to automatically,” which only makes things worse.
• Fight!
• You break up, which was probably a good thing anyway, because your relationship sounded really unhealthy. But you get the point, right?

The situation is so bad, some sites, like Lifehacker, are showing ways to turn off the contact list. Think about it, do you want every telemarketer to be your friend? Facebook has one important filter: you can deny friend requests.

It’s never, ever a good idea to create a social graph the way Google did. That’s why most of the IM clients do the double opt-in approach. The follower model is killing Twitter.

Google Buzz reinforces the power law online, which means you’ll get to see 100 photos of Jason Calacanis’s dog or promoting how he pays more than some services, but less than About.com for content

The people you want to talk to automatically become long-tail, yet the people who are endlessly self promoting always bubble to the top because they have 11,000 followers. Someone’s always going to make a comment.

Social Customer points out Buzz does two things that will simply make it unusable.

1. It shows threaded conversations and strongly highlights the initiator of those conversations and makes the comments subservient to the initial post.
2. It takes posts that have “new” comments and immediately bumps those posts to the topmost position of the viewing window.

This interface will greatly reinforce the existing power law relationships online and have the effect of greatly reducing the serendipity and interest in things like the current Twitter and Facebook interfaces.

Not that many people use Gmail and most who do are the digerati.

From twittercism:

This is also the first time I’ve noticed how few of my friends actually use Gmail. I love Gmail and recommend it to everybody, but people are often quite set in their ways and prefer to stay with Hotmail or Yahoo, irrespective of the lack of features. Looking at my address book, I’m guessing probably less than 20% of my friends have a Gmail address or even a Google account, for that matter.

Yeah, it’s mad, but it also means Buzz is already limiting my network.

Social networking is an all or nothing game; and if you only have 20 percent of your friends, do you really think the other 50 percent or so are going to create a Gmail account to see Google Buzz?

I think not.

What’s the take away? Not ready for primetime.

I agree with twittercism:

My gut feeling? Unless they make some major changes and improvements to Buzz soon, and that includes addressing those privacy issues, it’s never going to be a threat to Twitter or Facebook. It’s just another aggregator, and a bad one at that.

Everyone sees Facebook as the center of their social graph. They also see Google as the place that wants your information, which is why people won’t trust them with their social graph.

What do you think?

Sometimes we forget about this, but white space is a very important component in design and user experience. Inspired Magazine has a great post about the usage of white space in design, even if it is print.

I was on a mailing list today and this came across:

“Use red asterisks — they’re the standard for showing required fields.”

Standards are wonderful; but if I asked my mom what is the international symbol for a required field, she would look at me like I was on drugs (not much different than today, but still).

This was something even the great Jared Spool mentioned as gospel at an event and showed an example in his PowerPoint, which I still haven’t received – but that’s another blog post. He was explaining how another client had used asterisks to show optional fields.

Here’s a few truths about form design that I’ve discovered in my time by testing actual users.

Most forms are hard to read.

Does anyone find it interesting the note for required fields is after the fields?

There have been a few books and web posts, but for the most part, web form design hasn’t changed that much since 1996. Form fields are left on a white background with a grey line around them. Some sites, like this WordPress blog software I’m using, have a lighter grey line around the form fields for design purposes.

On other sites, form fields are in columns so that they’re next to each other, making the user to really have to work at it.

Given eight form fields, users will fill out all eight.

I’ve run countless of tests and the result in most of them is that users will try to fill out every single form field. This includes the second address field we all know so well even if they don’t have a second address.

Form fields are one of those things that users expect to fill out every single field, because they don’t want to have to figure out error messages when they are wrong. They have been trained that most web forms are ineffective, they do as much work as possible (bad solution number 1) or walk away (worse solution number 2), leaving either a frustrated user, a lost sale or both.

The red asterisk and even the explanation text that reads “Required Fields” are marked as (*). No one’s going to read it.

It’s usually at the top of the form, in line, and all users skip it to dig right in. Users rarely read instruction text, and because most form design is so poorly thought out, users rush through it to make it as painless as possible. Users need visual cues next to the field or at the field they are working on, not 300 pixels, at least, away.

Additionally, the “Required Field” line is usually small and hard to read (read: Designers License), so in the grand scheme of watching users browse the site, they skip right over it.

Solutions to the required field paradox

Disney Shopping

This was a solution we used at Disney Shopping: the word Optional was placed to the right of the field and required fields were colored yellow so users could spot them.

I’m using this particular design pattern on other sites, because at Disney Shopping and a few other sites I’ve worked on, this is the design pattern I’ve enforced. It’s doesn’t interfere with the form because the error messages are usually below the form field, and it’s easy to scan for it.

Why am I enforcing it?

Because, changing Required Fields from the asterisk to this example increases form completions across the board. We’ve tested it, and it works.

Any questions?

One of the way cool, nifty things that you get by working for an online marketing education company is access to great tools that are just a bit beta. That’s just the sort of thing we needed over at Online Marketing Summit as we do usability testing and other analysis work.

Enter Attention Wizard. Attention Wizard is a tool that shows possible eye tracking without the human part. The smart folks over at Site Tuners (Thanks Tim, for the invite) have written an algorithm that produces an “attention heatmap”, a way of saying here’s some possible areas that the users are paying attention to based on color and Gestalt theory. All you have to do is upload a screen shot, and in five minutes, it gives you results of what it could look like.

I did it with Online Marketing Summit (click on the thumbnail) to show you what one of their results are.

Their sales points

• Can be used with actual screenshots or page design mock-ups
• Instant results – no eye-movement or mouse-tracking data collection needed
• Tells you what people are paying attention to, and what they ignore
• Easily identify landing page problems & increase your conversion rates

Our take aways

• People’s eyes go right to the schedule tab, which is a good thing.
• We have this photo image in the first paragraph of text that does nothing. It’s providing no value to the user while attracting a lot of attention.
• The testimonials are getting a lot of attention.
• I think Attention Wizard is giving too much weight to the photo.
• Overall, the eye is scanning the page well.

We’re going to make more changes, but the goal is to get results quickly and increase conversion rate on the site, and that’s what we got with Attention Wizard.

My honest opinion about Attention Wizard?

I wouldn’t take this as gospel science (is eye tracking that now, anyways?), but it’s a good first cut at “well, let’s see what we have.” They claim a 75 percent rate of matching eye and mouse tracking, and that’s good enough for me. It’s much better to do several tests with this tool (which would be great as a subscription model site) than spending $5,000 for an eye tracking system that no one’s going use because, well, it’s hard to use.

It’s a great tool that’s only going to get better once they work out the kinks.

One of my favorite topics is typography and even though there’s a somewhat limited set of options in CSS, typography can still vary tremendously using pure CSS syntax.

Smashing Magazine conducted a detailed survey of 50 popular websites to see answer questions like Serif or sans-serif? Large or small font? Light or dark background? and more.

Though the findings aren’t scientific, the study shows a clear set of common practices and guidelines for setting type in Web design. Granted, these points should serve only as rough guidelines (not hard and fast rules):

1. Either serif or sans-serif fonts are fine for body copy and headings, but sans-serif fonts are still more popular for both.
2. Common choices for headlines are Georgia, Arial and Helvetica.
3. Common choices for body copy are Georgia, Arial, Verdana and Lucida Grande.
4. The most popular font size for headings is a range between 18 and 29 pixels.
5. The most popular font size for body copy is a range between 12 and 14 pixels.
6. Header font size ÷ Body copy font size = 1.96.
7. Line height (pixels) ÷ body copy font size (pixels) = 1.48.
8. Line length (pixels) ÷ line height (pixels) = 27.8.
9. Space between paragraphs (pixels) ÷ line height (pixels) = 0.754.
10. The optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular,
11. Body text is left-aligned, image replacement is rarely used and links are either underlined or highlighted with bold or color.

Of course, every website is unique, and few people want their sites to look like everyone else’s sites. But it’s always great to keep in mind that following these guidelines could make your website feel more familiar to your readers. (If you are a data and spreadsheet nerd like I am, check out the spreadsheet of the study and export its data for further analysis.)