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:
And something you probably haven’t thought of: laptops have outsold desktops for years.
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 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:
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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
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.
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.
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.
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.
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.
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.)
Patrick Neeman is Director of User Experience at Jobvite, a social recruiting platform and runs both the UX Drinking Game and Startup Drinking Game | More | Contact
If you're a UX Designer in San Francisco, ping me at Twitter. I want to add you to a list I have there.
