Intro: Best practices are a good rule of thumb, but there is still plenty of room to create new ways to present information on a web page.
The usability culture that has pervaded and defined the last few years needs to go. This is not a criticism of those skills or people. In fact, the reason the Web is healthy in so many ways today is thanks to the gains we've made during this time. But the pendulum has swung too far in that direction.
The only way to bring things back into balance is to wrest the focus from that extreme and create a culture that is holistic, balanced and every bit as daring and creative as it is thoughtful and analytical. Only through a balanced approach to the Web will the media enjoy its full potential. This is a trend that will happen on its own, and sweep us along with it whether we want it or not. But we have a chance to take control.
Find new heroes. Who are the great digital designers practicing today? There are some, but they remain relatively unknown. They need to step forward, take the initiative, assert their skills and abilities, and take center stage from the researchers, analysts, and academics. And the design community needs to support these people, extolling their virtues with the same vigor we show buying the books and pushing content from our current sacred cows.
Think bigger. With very little innovative work out there, we must push the boundaries of our own minds. Sure, we only have so much screen real estate and resolution to work with. Yes, we are limited by programming and hardware boundaries. We will be awkwardly zagging while most of our peers happily zig in lockstep. That's how many of the great movements in history got started.
Be courageous. The easiest thing in the world is to line up statistics and best practices and use those "objective" guides as a war hammer to bludgeon away any attempts of creativity, innovation and experiential design. These are the tools of a usability culture and, while they still have a role in the process, they cannot overshadow that vital spark of originality. Flying in the face of these "proofs" is not easy. But, at certain times and in certain ways, we absolutely must.
Learn from the past. Not allowing a usability culture to rule does not mean abandoning it altogether. Good architecture is vital. Having usable pages is critical. Adhering to standards and following conventions is important to a degree. We need to pull, push, stretch and sometimes tear those boundaries, balancing the best of where we are now with the inevitability of the change we will lead next.
Intro: Case Studies: Learn How the Experts Are Managing Customer Experience
It’s 2012, and the world is literally at our fingertips thanks to PCs, smartphones and tablets. This opens up a rapidly increasing number of opportunities for companies to connect with users.
For the content manager, this means pressure to specialize in all aspects of content creation, management, security and more in order to meet today’s user demands.
Here are the seven hats we find that today’s content manager must wear in order to develop and deliver the unique context-based experiences that users have come to expect:
Intro: Creating a great landing page is a critical step in the conversion funnel.
By viewing the page as a speed bump in the conversion process rather than an information dump, you’ll find users will be inclined to move onto the next step, and they’ll do so because there is less friction.
In addition, you’ll be able to attach ROI measurements to your various marketing campaigns. As you test and refine your campaigns, this insight into their net values will enable you to become more efficient and effective at driving down costs per acquired customer.
Intro: Over the years, I’ve done a lot of work with form optimization. In this article, I’ll cover some tried and true form optimization tips.
I’ve done most of my testing on the PPC side, but obviously, the information can also be used effectively to improve overall form conversions on websites.
Intro: Excellent article on the need to address the experience of the end user at every step of development.
That's where the overall user experience comes in. As computing and digital devices move more and more into the consumer space, features and functionalities will increasingly take the back-seat as motivators for technology adoption: as the iPod abundantly shows, user experience (along with a strong brand, and clever marketing) is much more important for the success of a device then technical specifications. Web designers have grasped the importance of good user experience a long time ago; now it is time the big technology providers to understand where the industry is headed.
10 fundamental rules for the age of user experience technology:
1) More features isn't better, it's worse.
Feature overload is becoming a real issue. The last thing a customer wants is confusion—and what's more confusing than comparing technical specifications, unless you are en expert? Only nerds get a kick out of reading feature lists. (I know - I'm one of them.)
2) You can't make things easier by adding to them.
Simplicity means getting something done in a minimum number of simple steps. Practically anything could be simpler - but you don't get there by adding features.
3) Confusion is the ultimate deal-breaker.
Confuse a customer, and you lose him. And nothing confuses more easily than complex features and unintuitive functionalities.
4) Style matters
Despite what nerds may think, style isn't fluff. On the grand scale of things, style is as important as features—if not more so. Style and elegance can contribute significantly to a good user experience. But style isn't just looks, it's a global approach. Fancy packaging isn't enough.
5) Only features that provide a good user experience will be used.
Why did the iPod catch on? Because it was so self-explanatory, and it remains the market leader in terms user experience. Sure, it may be excruciatingly difficult to make devices like digital media players or computers easy to use; but if a product is complex, intimidating or confusing, its chances for success are minimal.
6) Any feature that requires learning will only be adopted by a small fraction of users.
Learning new features, even the ones that a user might find interesting or intriguing, is a real issue: nobody has time. Getting consumers to upgrade and adopt new features is one of the biggest problems software publishers face these days.
7) Unused features are not only useless, they can slow you down and diminish ease of use.
Over time products become convoluted and increasingly complex to use. The frustration of not finding the one feature you need among a flurry of stuff you don't need, want or even understand, can be considerable. (Ever heard of program called Word?)
8) Users do not want to think about technology: what really counts is what it does for them.
The best tool is the one you don't notice. Why do you think pen and paper remain vastly popular for brainstorming? Because you don't have to think about them. Pencils don't crash.
9) Forget about the killer feature. Welcome to the age of the killer user-experience.
When technology achieves something desirable without being in your face, when it know how to integrate itself into you wishes and desires without distracting from them, that's when technology lives up to its potential. Unfortunately it's not that simple to get there.
10) Less is difficult, that's why less is more
Let's face it: it's usually harder to do simple things exceedingly well, than to just pile up features. The 80/20 rule applies here too: do well what 80 percent of your users do all the time, and you create a good user experience.
Intro: Overview of CSS capabilities to enhance typography
Creating Scannable Text
While the more subtle effects we've examined so far are great, there's more to consider when writing online. People tend to scan rather than read, and that means judicious use of headings, bold, italics, bulleted lists and highlighting can greatly help the readability of your content as well as make it easier for users to scan quickly. The key word here, though, is "judicious." If you bold, italicize, or highlight almost every word, you're actually making it harder to read.
Additionally, with online typography you can't guarantee your visitors will be viewing things at your intended font size. They could easily increase or decrease their desired font size at will and drastically change the composition of your design. This can be both a blessing and a curse depending on your perspective, but it's best to embrace this flexibility and make the most of it. You'll be offering your visitors improved accessibility and taking full advantage of the flexible nature of the Web.
Intro: An overview of levels of graceful browser degradation in order to make pages more readable more broadly.
Graded Browser Support offers two fundamental ideas:
* A broader and more reasonable definition of "support."
* The notion of "grades" of support.
Graceful degradation prioritizes presentation, and permits less widely-used browsers to receive less (and give less to the user). Progressive enhancement puts content at the center, and allows most browsers to receive more (and show more to the user). While close in meaning, progressive enhancement is a healthier and more forward-looking approach. Progressive enhancement is a core concept of Graded Browser Support.
C-grade is the base level of support, providing core content and functionality. It is sometimes called core support. Delivered via nothing more than semantic HTML, the content and experience is highly accessible, unenhanced by decoration or advanced functionality, and forward and backward compatible. Layers of style and behavior are omitted.
C-grade browsers are identified on a blacklist. Approximately 3% of our audience receives a C-grade experience.
A-grade support is the highest support level. By taking full advantage of the powerful capabilities of modern web standards, the A-grade experience provides advanced functionality and visual fidelity.
A-grade browsers are identified on a whitelist. Approximately 96% of our audience enjoys an A-grade experience.
Tim Berners-Lee, inventor of the World Wide Web and director of the W3C, has said it best:
"Anyone who slaps a 'this page is best viewed with Browser X' label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network."
Intro: A good guide for user interactivity
Contests are a core way to drive participation on your Ning Network and keep members coming back.
Make sure the topic or theme of the promotion is relevant and interesting to your members. This will help shape your promotion and ultimately drive participation. Provide creative goalposts to encourage the submission of compelling creative.
2. Keep it simple
Design the promotion to make it accessible to as many members as possible. Create clear and transparent rules to inform and aid in the vetting of submissions.
3. Spread the word
Send a broadcast message to alert your members to the promotion and provide timely updates.
4. Compelling prizes
Attention and recognition prizes are often as valuable as cash prizes. People love getting recognition
5. Measure your success
Predetermine a set of metrics prior to launching your promotion that will help you measure success
Intro: Excellent summary of good site building principles
Therefore, we need to better understand their needs and desires and incorporate them into our Web design processes. By doing so, we'll be able to bridge the gap between setting the right SEM promise and delivering with the expected Web site experience.
Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
Efficiency: Once users have learned the design, how quickly can they perform tasks?
Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
Satisfaction: How pleasant is it to use the design?
Many clients have asked about the technical aspects of SEO and how to achieve high rankings and Web site visibility without any regard to their Web site and how it functions. Many people think they will automatically get the rankings they desire just by applying certain techniques to their site. They don't understand how closely tied a highly usable site is to SEO.
Consider a highly "usable" Web site that is well thought out and includes clearly defined rich content, relevant headers and tags, and has an easy to follow button and linking structure. Is that not parallel to SEO best practices?
Then, if your site has the content people are looking for, you will likely find people will want to link to that content. This is link building at its finest.
Designing with the User in Mind
Are you in the process of building a new Web site? Or maybe you're redesigning a site? Let's look at a simple process I've used for more than 10 years with tremendous success that will help you generate a compelling user experience:
Initial user interviews
Wireframes or sitemaps based on user interviews
Follow-up user interviews
Visual design treatments
Combine HTML and programming with visual treatments for the finished site
It's more important that a visitor has a great user experience than to have a pretty Web site with gorgeous graphics or lots of Flash. Though many people like to let this drive the site design, many sites that are less than attractive in their design make information easy to find.
Intro: The role of user experience defined beyond fluff "professional" terms.
Have you ever heard a search engine optimization (SEO) professional use the term user experience during a presentation, in an article or as part of a sales pitch? On the web, user experience (commonly abbreviated as UX or UE) is a term used to describe the overall perception, experience, and satisfaction that users have as a result of their interactions with a website.
On the surface, an SEO professional’s presumed knowledge of user experience might sound impressive. However, if you do a little digging, you might discover that search professionals have their own preconceived notions as to what constitutes a positive user experience, notions that have little or nothing to do with users at all.
The user experience does not come from a brand manager’s perspective, a marketing manager’s perspective, or even a search engine’s perspective. The user experience comes from the users’ perspective. Search marketers would do well to keep this point in mind when doing SEO.
One of my favorite usability best practices quotations came from Susan Weinschenk from Human Factors International:
“You can apply all usability guidelines to a website and have a completely unusable interface.”
Intro: Discusses the importance of understanding user behavior and needs in site development.
It was clear to me that dragging readers on a merry-go-round of content, with on and off page links and moving images might not be a great user experience. And without good user experience no amount of optimization is going to help a site’s rankings.
Understanding how people search online helps in developing your site’s information architecture. We like things offered in small chunks first. We want our online content delivered fast and simply. We like to stay on task
The issue with putting so much scattered or loosely related information on one page is that the core message is lost. Users want instant gratification. You lured someone to a page. What if they arrive and are met with a crowded noisy room of strangers rather than a calm host who knows why they came and what they want to do next?
Understanding user behavior
One of the clearest mistakes we make in web site development is not understanding the people who use them. Despite the help of personas, user testing, scenarios and marketing data in advance, even the big brand sites struggle to be user friendly. Why is this? One reason is the context in which pages and links are delivered. For findability to work properly, we need to know the words people use to communicate with their surroundings. This may be different online, especially in situations where we can “be anyone” and change who we are.
If Google does incorporate page load times as part of the search algorithm in 2010, this sends a clear message to site owners. If the site on “Peace Sign Painted VW Buses” with Flash, funky cool images and video takes too long to load, another content based site on the same topic may rank higher.
Intro: An excellent list of user preferences when browsing your site.
1. Reading onscreen is hard, for everyone
2. They like short paragraphs.
3. They like short lines
4. They like wide line spacing and nice margins
5. They like dark text on a light background
6. They don't mind scrolling up-and-down
7. Lists make their lives easier
8. They browse in an F-shape
9. They can't remember your web address
10. They don't want to log in
11. They don't even want to think they have to log in
12. They don't even want a tiny hint or implication that at some point in the future they might have to log in
13. They don't want an 'experience'
14. They do want your newsletter
15. They don't care how clever you are
16. They aren't enticed by mystery
17. They get lost a lot
18. They aren't using cell phones. Yet.
19. They don't search for your name
20. They still use Internet Explorer
21. They're buying nice monitors (and computers)
22. They need to want
Intro: Study on whitespace and readibility, Margins with optimal leading showed highest comprehension and slowest reading speed.
Summary: In this study, reading performance with four
white space layouts was compared. Margins surrounding the text and leading
(space between lines) were manipulated to generate the four white space
conditions. Results show that the use of margins affected both reading speed
and comprehension in that participants read the Margin text slower, but
comprehended more than the No Margin text.
Participants were also generally more satisfied with the text with margins.
Leading was not shown to impact reading performance but did influence
overall user preference.
To examine the effects of white space on reading performance, this study compared four white space layouts that manipulated margins and leading. A margin was defined as the white space surrounding the text passage on the left, right, top, and bottom.
Reading time was averaged across passages for each condition and converted to words per minute. Comprehension scores were computed as a sum score out of a total eight possible. A two-way within subjects ANOVA revealed a marginally significant main effect of margins for reading speed (F(1,17) = 3.61, p =.07), with passages in the No Margins condition read faster than those with Margins. There was no main effect for leading or interaction between margins and leading.
Examination of the comprehension scores also revealed a main effect of margins (F(1,17) = 8.34, p = .01). Comprehension of the Margins was higher than that of the No Margins. This indicates that while the participants read the Margin passages slower, they comprehended more than when reading the No Margin passages. There was no main effect for leading or interaction between margins and leading.
Results revealed a significant main effect of Margins on satisfaction. Users favored the Margin condition, reporting lower levels of physical fatigue during reading and greater satisfaction with the layout for the presentation of textbook, leisure, and news material. Results also showed a significant Margin x Leading interaction for questions related to satisfaction with the overall layout and perceived eyestrain. Post-hoc analysis showed that in both cases, the No Margins, Sub-Optimal Leading condition was significantly less satisfying and more strenuous.
Intro: Attempts to apply print typography to web. But fails to addresses the fact that a web page is not the same as a printed page and a web reader is not the same as a page reader.
Robert Bringhurst's book The Elements of Typographic Style is on many a designer's bookshelf and is considered to be a classic in the field. Indeed the renowned typographer Hermann Zapf proclaims the book to be a must for everybody in the graphic arts, and especially for our new friends entering the field.
In order to allay some of the myths surrounding typography on the web, I have structured this website to step through Bringhurst's working principles, explaining how to accomplish each using techniques available in HTML and CSS. The future is considered with coverage of CSS3, and practicality is ever present with workarounds, alternatives and compromises for less able browsers.
Intro: part 2: http://www.wpdfd.com/editorial/wpd0904news.htm#feature2
TheCounter.com gives monthly figures based upon their server logs which show that about half of their readers use a screen resolution of 1024 x 768, nominally a 17" screen. Another 35-40% use 800 x 600 - which suggests a 15" screen. That means that something like 10-15% are using larger or smaller screens , the larger being more dominant. Usage of the old 640 x 480 (12") screen has dropped to around 1% but now there are new devices like PDAs and Web-enabled cellphones with screen resolution of only half of that. That's a huge variation!
We all know that full colour printing is done at 300 dots per inch, or thereabouts, and that line resolution can be one or two thousand dots per inch. Unless you are printing on plastic or using silkscreen, printing resolution is rarely of any concern to the designer and only affects the quality, not the size of the finished product.
On a computer screen, resolution affects both quality and reproduction size.
Screen resolution on desktop machines doesn't vary drastically. The pixel density is usually somewhere between 90 and 100 pixels per inch.
Intro: Yale university's web style guide
Although the basic rules of typography are much the same for both Web pages and conventional print documents, type on-screen and type printed on paper are different in crucial ways. The computer screen renders typefaces at a much lower resolution than is found in books, magazines, and even pages output from inexpensive printers. Most magazine and book typography is rendered at 1200 dots per inch (dpi) or greater, whereas computer screens rarely show more than about 85 dpi. Also, the useable area of typical computer screens is smaller than most magazine and book pages, limiting the information you can deliver on a Web page without scrolling.
But perhaps the most distinctive characteristic of Web typography is its variability. Web pages are built on the fly each time they are loaded into a Web browser. Each line of text, each headline, each unique font and type style is re-created by a complex interaction of the Web browser, the Web server, and the operating system of the reader's computer. The process is fraught with possibilities for the unexpected: a missing font, an out-of-date browser, or a peculiar set of font preferences designated by the reader. You should regard your Web page layouts and typography as suggestions of how your pages should be rendered %u2014 you'll never know exactly how they will look on the reader's screen.
Good typography depends on the visual contrast between one font and another and between text blocks, headlines, and the surrounding white space. Nothing attracts the eye and brain of the reader like strong contrast and distinctive patterns, and you can achieve those attributes only by carefully designing them into your pages. If you cram every page with dense text, readers see a wall of gray and will instinctively reject the lack of visual contrast. Just making things uniformly bigger doesn't help. Even boldface fonts quickly become monotonous, because if everything is bold then nothing stands out "boldly."
Margins and space can be used to delineate the main text from the other page elements. And when used consistently, margins provide unity throughout a site by creating a consistent structure and look to the site pages. They also add visual interest by contrasting the positive space of the screen (text, graphics) from the negative (white) space.
Designed for the screen
Typefaces such as Georgia and Verdana were designed specifically for legibility on the computer screen; they have exaggerated x-heights and are very large compared to more traditional typefaces in the same point size. These fonts offer excellent legibility for Web pages designed to be read directly from the screen. However, the exaggerated x-heights and heavy letterforms of these fonts look massive and clumsy when transferred to the high-resolution medium of paper.
Intro: Stop Designing Pages And Start Designing Flows
For designers, it’s easy to jump right into the design phase of a website before giving the user experience the consideration it deserves.
Design flows that are tied to clear objectives allow us to create a positive user experience and a valuable one for the business we’re working for.
The next time you’re asked to create a new design, step back and ask yourself and your team what user flows you are trying to create through the website, and let that insight drive the design process.
Intro: In other words, slow-loading flash sites suck
E-commerce sites have two seconds to load a Web page or consumers will click away. And after three seconds nearly all customers will split, according to research by Forrester and Akamai.
Some tidbits from the 1,048 online shoppers surveyed:
- 47 percent of consumers expect a Web page to load in 2 seconds or less and 40 percent won’t wait more than 3 seconds.
- 52 percent say quick page loading is important to their loyalty. In 2006, that tally was 12 percent.
- 23 percent will stop shopping with slow page loads.
- 79 percent of shoppers that get slow page loads say they are less likely to buy from that site again. Meanwhile, 64 percent just buy goods from another store.
- 16 percent of consumers have shopped via a mobile phone.
Before getting started with landing page testing, it’s important to ensure the following:
Identify testing goals. Are you trying to increase sales? Leads? Identify them.
Test variables that have a direct impact on your goals. For example, if you are selling a product, test call to actions, headlines, etc. Testing the look and feel of your landing page may increase conversions but not as much as variables more directly related to your goals.
Ensure when it’s time to make a decision on what element to keep (or chuck for that matter) that the data you are using is statistically significant. In PPC, this means the metric is responsible for at least 100 conversion events (not clicks).
1. Test Different Calls To Action
2. Test Different Headlines
3. Features & Benefits
4. Try Testing Long Landing Pages vs. Short Pages
5. Test Price
Intro: The flexibility of Ask
To some extent, we see ourselves as having permission and a responsibility to really innovate on the user experience. It's definitely a good time for us because we have such great support from IAC and they're very much invested in us improving the user experience and getting more traffic and getting frequency and taking market share and they're ready to very much invest in that. So we don't need to cram the page with sponsored links and things like that.
For example, just like with AskX, you search for U2, it's going to bring up news, and product results, and video results and images, and a Smart Answer at the top of the page. It's also going to know that there's U2 as the entity, the music band and therefore search the blogosphere but just search within music blogs. So what it's doing, over time, is trying to give a personalized experience that's informed by lots of behavior and trying to capture the structure of the web, basically. So that's where we are there.
We'd definitely have significantly more than 10% market share. My point of view, from dealing with the user experience, is that I've been proud of the work that we've done and I really think that we've been very focused and innovative with a very talented team here and we're really hoping that as we look at the rest of the year and we put out Edison and the AskX experience, that we become recognized for taking chances and presenting the user experience in a differentiated way that people have to respond to us in the market and start adopting some of the things that we're doing.
Intro: Interview with Peter Merholz
Now, when you start asking about "design practice," we're entering shark-infested semantic waters. If I look at the internal wiki I've created to capture our methodology, we break our work down into these categories: Discovery, Research, Strategy, Content Analysis, Design, and Implementation.
So Discovery entails the up-front work that we do to understand the business-stakeholder interviews, documentation reviews, secondary research, business value analysis. Research is about how we understand the user - methods such as surveys, interviews, observation, and card-sorting, and then the analysis and models that come from that. Strategy is a potential outcome of the discovery and research work, addressing implications for brand development, content strategy, organizational development, and the like. Content Analysis deals with understanding the nature of the content and functionality we are dealing with. It's here that metadata and feature inventories are produced. Design focuses on the creative aspects that synthesize all that has come before - information architecture, interaction design, visual design. And implementation for us means client-side development (which we've been doing more of in order to get Ajax interfaces out into the world).
We start the workshop with a deep dive into Discovery, wherein we talk about ways to better understand the business, to understand the financial issues involved, to understand the politics at play. Prior to starting Adaptive Path, the founders had all experienced the immense frustration of having our design work not see the light of day. And the most common reason for this was internal politics or operations. So we made sure that in our practice and in our workshops we spend significant time addressing these business issues, because we know designs cannot succeed without accommodating them.
I've spent much of my career fighting small-minded design thought, particularly in the world of graphic design where the cool, novel, and stylish is lauded over the useful, usable, and truly deeply engaging. I have to point no further than the "interactive" design annuals published by the likes of Communication Arts or Print, which celebrate pretty screenshots instead of tools that solve real problems.
Yet many designers will fault things that are successful if they don't measure up to some arbitrary criteria they've set out, usually one of aesthetics. And every time a designer publicly discredits successful products and services, it allows non-designers to dismiss them as foggy-headed aesthetes.
Intro: On how people read web pages
People rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences. In a recent study John Morkes and I found that 79 percent of our test users always scanned any new page they came across; only 16 percent read word-by-word.
As a result, Web pages have to employ scannable text, using
highlighted keywords (hypertext links serve as one form of highlighting; typeface variations and color are others)
meaningful sub-headings (not "clever" ones)
one idea per paragraph (users will skip over any additional ideas if they are not caught by the first few words in the paragraph)
the inverted pyramid style, starting with the conclusion
half the word count (or less) than conventional writing
Intro: Online experiments to test readability based on fonts and alignment. Questionable test though as placement of the word seems to be the real factor.
This page presents a series of studies designed to let you experience for yourself what text design features work best, and then combine your own results with those of others to give you some idea of the parameters that work for most people.
Intro: web text-design needs to be "just right" to be legible and readable
Printed materials have margins. Text on the web should have margins too. Text is like a good wine, it needs to breathe. Providing a margin makes it easier to read.
People read differently and more slowly on the computer, than with printed text. So, break it up – anyway you can with: "white" space, numbering, bullets, tables, or horizontal lines.