BlogmyQuery – BMQ

In your pocket right now is the most powerful “remote control� (as Drew Diskin put it) that has ever existed. It is no ordinary remote control. It can harness everything that all of the previous mass media (television, radio, Internet, etc.) can do. People aren’t using them just for simple entertainment or for phone calls. They have become the hub of our personal lives.

Smartphones are what younger generations know as just phones. The iPad (aka the tablet) is giving your grandma’s PC a run for its money. You certainly are holding some amazing futuristic technology in your hands. It will be even better tomorrow, though, so why does it matter to us or to users? Moore’s Law tells us, in effect, that these things will continue to become capable of more than anything our minds can think up.

(Image: Denis Dervisevic)

It’s no longer just about the evolving power and capabilities of these devices. It’s about us and how we, too, are changing. The user’s expectation of a great experience is the new standard. It falls to us as UX professionals to apply our skills to make this happen on the vast array of devices out there. It’s not always easy, though. The mobile realm has some unique constraints and offers some interesting opportunities. While covering all of the nuances of mobile UX in one article would be impossible, we’ll cover some fundamentals and concepts that should move you in the right direction with your projects.

Mobile Constraints

The mobile realm has many constraints. Here are several of them, along with thoughts on what to keep in mind as you come upon them.

Form Factor

The most obvious constraint going from desktop to mobile is screen size. Mobile screens are smaller. A lot smaller. You need to seriously consider this when designing and developing your application. Antony Ribot makes a good point in his presentation, “Mobile UX: The Intricacies of Designing For Mobile Devices,� when he says, “Mobile is not about making things smaller.� It’s much more than that. We need to consolidate what’s on the screen. Boil the application down to the most critical functions and content, and then lay them out strategically in the available screen space. For example, action buttons should go in the lower third of the screen, where they are most easily tappable.

Input Methods

Another obvious constraint is the absence of or difference in certain input mechanisms, and the addition of others. First, there’s no mouse. No mouse means no hover states. It also means that there must be some other means of clicking and navigating content. In most cases, this other means is the user’s finger. This difference in input method can be quite exciting because it opens the door to new possibilities with various gestures. Many standards are forming around these new gesture capabilities: pinch to zoom, swipe to scroll, etc. Take the time to include support for these gestures in your application. In addition, think of new gestures that you could add to enhance interactivity.

Discovering new gestures can be a powerful experience for users. It adds a sense of excitement, mystery and achievement — “Hey, I just figured out something new!� Take care, though, not to change the function of standard gestures unless you have a very good reason to do so, or else you will cause unnecessary confusion and frustration in users.

(Touch Gesture Cards (PDF): Luke Wroblewski)

One other caveat: consider the type of application you’re developing before getting too fancy with gestures. If it will be highly utilitarian in nature, then keeping things simple and straightforward would be best. If the application is for a specific task, then users will want to complete it as quickly and easily as possible. They don’t have the time or desire to discover new interactions.

Technical Constraints

While the capabilities of these devices improve with each new release it, keep in mind their limitations. Things like battery life and processing power are important to consider. Draining the battery or bringing the device to its knees with memory leaks or processor-intensive operations is a surefire way to destroy the user experience. This is why testing on the device early and often is imperative. Simulators cannot be trusted.

Data Transfer and Pricing

This will not be an issue for users who have unlimited data plans or who work on Wi-Fi networks. Unfortunately, unlimited plans are becoming increasingly rare. So, be sensitive to the amount of data you are transferring to and from your application. Keep the sizes of assets to a minimum, while maintaining quality. Don’t transfer data unnecessarily. For example, implement delta updates whenever possible (i.e. update only the data that has changed since the last transfer).

(Images: Mediaqueri.es and Food Sense)

Much has been said recently about Responsive Web Design. This approach does create some challenges with minimizing data transfer. Jason Grigsby has a very good write-up on the specifics. To summarize, CSS media queries — part of the magic sauce of responsive design — do almost nothing to lessen the overhead of data transfer to mobile devices. Resizing or hiding unwanted images still requires the full images to be downloaded to the browser. In addition, resources such as JavaScript libraries might be downloaded to mobile devices without even being enabled for users.

Good General Practices

What follows are some good general principles to keep in mind when designing and developing mobile applications.

Mobile First

Luke Wroblewski has a great post on the “Mobile First� methodology. In a nutshell, focusing on mobile first puts your mind in the right place. It forces you to focus on and prioritize the most important features and content in your application. It also extends your abilities by offering new tools and services that are not available in a traditional desktop environment. By approaching your project with the mobile-first mentality, you will start off on the right foot.

Behaviors and Archetypes

Build on the behaviors and archetypes that your users are already accustomed to. This will go a long way to reducing the learning curve of your application. If your application responds predictably to a user’s interaction, then the user will immediately become more comfortable.

This applies to more than general behaviors and archetypes. You will want to use design patterns that are specific to your target devices. This means building multiple interfaces for various devices and platforms, which is extra work; but it will pay off in the long run because users will appreciate that your application behaves in the manner they’ve come to expect from their device. For example, iOS design patterns dictate that tabbed navigation be located at the bottom of the screen, whereas Android devices have it along the top.

As with most good UX principles, if done properly, the user won’t even notice, while their increased comfort level will encourage them to continue exploring the application. Which brings us to our next practice.

Encourage Exploration

The more that users feel comfortable with and enjoy your application, the more likely they will explore it. You may want to lead them down certain paths or provide a few cues or coach marks on how certain things work, but still allow your users to “discover.� I’m not suggesting that you make the application complicated or ambiguous; rather, for example, if there are multiple ways to perform an action, one more obvious and traditional and the other a quick and easy gesture, then the user might come to prefer the second option once they discover it. Such solutions improve the overall experience if they prove to be quicker and more efficient than traditional interactions.

Provide Immediate Feedback

We’ve all witnessed our less computer-savvy peers clicking violently and repeatedly on a button trying to force it to do whatever they so desperately want to achieve. Touchscreens only add to this anxiety because they don’t provide that tactile response that we’ve been conditioned to expect from tapping on a keyboard or clicking with a mouse. Providing some indication that the application has registered the user’s interaction is critical, whether it’s a small bounce at the end of a scrollable region or a subtle color change at the tap of a button. This not only compensates for the lack of tactile response, but assures users that something is happening even if the screen isn’t updating immediately due to slow network traffic or some processor-intensive operation.

Context

(Image: S. Diddy)

Another glaring difference between mobile and desktop applications is context. With a desktop application, you can be relatively certain that it is being used in a particular environment. With mobile, all bets are off. This gives us some exciting opportunities: location-based services, on-the-spot social networking, the opportunities are vast.

It also raises some unique problems. Do your research to determine the context in which the majority of people will be using your application.

If you’re targeting on-the-go users, then you’ll want to build the application for speed: bold, obvious, stripped-down selectors and a streamlined workflow. If your application is more akin to a breakfast-table browser, then content will probably be more important to the user, but they may have only one hand free to navigate, while the other cradles their morning coffee. These are just two examples; the point is that your mobile application could be used in any number of contexts, and you will need to take the time to figure out how to provide the best experience to the user in their context.

One other thing to consider is the device(s) that you are targeting. Research suggests that a majority of tablet owners use their device mostly at home. Only 21% take their device with them on the go, compared to 59% of smartphone users who consult their device while out and about.

Ideate in the Wild

(Image: Niall Kennedy)

I’m borrowing this one directly from Rachel Hinman because she is spot on. The best way to determine context and to conduct research is to immerse yourself in the environments in which your application will be used.

Hang out where your target audience hangs out. If possible, do the things they do, go where they go. This will serve a couple purposes. First, it could give you ideas for great applications to build. Maybe you’ll observe common pain points and come up with a solution to alleviate them. Or, if you already have an idea for an application, you could gain valuable insight into how the application might be (or is being) used in the wild. We’d be surprised quite often by the difference between how we intend for our application to be used and how it is actually being used. This information can help us iterate our ideas and continually improve the application.

Conclusion

The way mobile devices are being used is changing all the time, and users are increasingly expecting exceptional experiences from the applications they use. While the mobile world has many constraints, its many more opportunities make building mobile applications a worthwhile venture. Keep in mind the constraints, and focus on mobile first when beginning your project.

Remember that innovative features and cutting-edge design aren’t as valuable to users as we may think. Users are concerned with getting the information they need through a sometimes limited connection, or perhaps getting accustomed to typing on a screen without any tactile feedback. Not everyone has an iPad… yet.

Talk to real people, follow common archetypes, and keep the context of your target users in mind. These guidelines should help you create a great experience in your mobile application.

Additional Resources

Design patterns:

• Apple iOS Patterns
• Mobile Patterns
• Android Patterns

Design guidelines:

• iOS UX Guidelines
• Android User Interface Guidelines

Mobile statistics:

• “A ‘Comprehensive’ Guide to Mobile Statisticsâ€�

Article sources:

• “Mobile UX: The Intricacies of Designing for Mobile Devices,â€� Anthony Ribot
• “Mobile UX Essentials,â€� Luke Wroblewski
• “Getting Started With Mobile UX Design,â€� Springbox

(al)

© Tim R. Todish for Smashing Magazine, 2011.

The web plays such a large role in our modern lives, even for those of us not working in one of the many industries which are based there. Be we users, web workers or both, internet browsers are a major part of how that experience all goes down. For designers and developers, browsers help steer the directions that our industries tend to make strides in.

So when it comes to the numerous inconsistencies and daily browser related battles that we face, we begin to long for some ultimate browsing experience that we have yet to find. That pieced together Frankenstein monster of compatibility and user-focused features that would make the most of everyone’s internet experience across the board. Knowing that these common fantasies find those in the design and development field almost daily, we turned to that reliable Smashing network that is our online friends and followers for help.

We asked if they were to build this proverbial dream browser what would be their ultimate, most innovative and/or anticipated browser features that they would include? The must-haves! Where would they focus their efforts? And below is the result. Their answers explored and dissected for a look at what kind of browser the design and development community would put together.

From the User’s Perspective

Whenever you start looking at building the ultimate browsing experience, you have to consider multiple perspectives. With this breakdown, we have a few different viewpoints that we have divided the responses into. This first section looks at those features that would most impact the users of this wonder browser. The Usability and UX side of the coin.

Performance

Naturally, one of the first areas that answers began to focus was on the performance of the browser. When it comes to the end users, bells and whistles are nice so long as they do not interfere with this important area. User’s want performance that doesn’t come with a heavy tax on the system running it.

Process Handling

One popular feature that we see in some of the major browsers that our followers would like across the board is in terms of process handling. This aspect of the browser performance is the root cause of many a user headache indeed. With Firefox’s latest versions, they have joined Chrome, Safari and IE in taking on this challenge efficiently by having each open tab run as a separate process. However, users who are for now stuck with the older versions still face these headaches.

Users want a browser that can juggle whatever processes they throw at it. Without any dropped balls. Photo by Simon Law.

For now if they are running older Firefox and IE browsers, then until the updates and patches they still receive for legacy versions pump this new process handling performance tweak into their frameworks, frustration awaits. In the interest of always moving forwards, it is unlikely those patches will be passed on to legacy browsers, but that does not stop our followers from wishing that they would.

Energy Efficiency: Wishlist

One area which does impact performance and remains something of a wishlist item from the community, is a much more energy effecient browser. Perhaps with the growing number of demands that we continue placing on browsers and their performance, this is a dream that may never fully actualize. With all of the customization options that browsers provide us through add-ons and plugins, having a browser that is light on our battery does not seem to be much of a focus for all users. But mobile is changing that.

As the mobile market grows, so does the demand for a more compact, light-weight browser for those users who wish to surf the web as they have grown accustomed to it on their other devices (such as their PC’s and laptops). So much of the mobile web browsing that takes place these days is handled via apps and not a full browser. And until browser supplies can meet this demand (and others), the energy equation is going to drive them farther from the mobile market.

Browsing Ease

The answers we were getting also made one thing abundantly clear right off the bat, users want an easy browsing experience. And as we see many plugins and services coming to the aid of users across the web catering to this desire for ease, it seems that this message is being heard on some level. But there are still browser features that could be improved or created to make browsing the web even better.

Synchronization

Being able to sync your browsers across devices (especially to mobile devices) is a feature that many users long to have. Since Firefox 4 two-way syncing of browser settings, passwords and even open tabs from computers to mobile devices has been possible, but others have yet to fully catch up. Chrome lets the user access sync data using a Google account, provided the same browser is used on the mobile device, but this is still somewhat lacking.

Bottom line, there are so many aspects of our online / digital lives that we feel requires more synchronization. Image by Andrew Currie

While some kind of full scale implementation of browser synchronization (even across platforms) may be a little more than a pipe-dream, it seems that the online community would still like more steps in that direction. As close as the developers can carry us to this dream will be fine, as the ground we have already covered is promising and growing more user-friendly with each step. And with Chrome’s widening syncing capabilities of the Omnibox across device platforms, things are looking up more and more.

Better Bookmarking: Wishlist

Bookmarks, tabs, and bookmark tags have made browsing a lot more user-friendly through the years, and that experience seems to continue to evolve. Bookmarklets, jump lists and site pinning are steps in that evolution that have all been well received. But from the responses that we got from our followers, there are some places they would like to see this evolution end up as it continues.

Users would like to see some sort of one button bookmarking with a built-in ratings systems for the sites that they are adding in the future. Allowing for bookmarks to be arranged in order of the ratings we give them without having to rearrange them or organize them into groups. They would also like to see this rating system allow for image captures of the sites, so as we scroll through our bookmarks the images would pop-up for easier recognition. Much like some browsers already do with tabs.

Readability: Wishlist

One of the areas where users tend to always be looking for assistance from outside sources, is readability. In fact, there are numerous readability add-ons being used such as Readability or Notforest, which are offered for multiple platforms today. This had some of our followers asking, why not just integrate a native readability function into browsers? Go ahead and cut out the proverbial middle man.

As the add-ons’ functionality and customization options grow, giving the users more and more power to control the visual presentations of any site they visit, the more it seems at home as a native function of any browser that focuses on the user.

Social Browsing

One important feature that many users are looking for these days from their browser is connectivity. The web is a social environment, and as such, its inhabitants are extremely social creatures. Users would like to see more catering to this need and their networking built right into their browsers. With the demise of Flock, users who were hoping this sort of social media integration into the browsing experience would become more standard were left thinking perhaps this would not be the case. Especially when new versions from the main vendors had none.

However, now with RockMelt on the landscape, hopes are once more reviving that more social media integration will take root with other vendors. By allowing users’ various social media outlets to be easily accessed, and alerted when new activity in their feeds occurs built right into the browser, a much more complete and connected experience takes shape.

From the Designer’s Perspective

Designer’s look at the web a little bit differently than most. Like developers, our work shapes the way we browse, and so when the designer’s perpsective began taking shape from the responses we received, it was clear that their ultimate browsing experience was built largely on the potential we see from where we are at currently; and our imaginations of what could be. So it was more of wishlist that we gained from this perspective.

SPeeDY: Wishlist

One of the areas that was touched on by several of our followers, was the adoption of the SPDY protocol to replace the much slower HTTP. If you are not familiar with Google’s SPeeDY new protocol, that may be because it has not gotten that wide a reach so far, but that is changing. Not sure if it will catch on the way it seems the design community would like (or Google for that matter), but given Mozilla’s recent integration of Google’s SPDY protocol things are looking up. Or should we say, speeding up? No, probably, not. Sorry, ineffective pun attempt.

To get a little more specific into exactly what this protocol is all about, check out this info sheet.

Given that the HTTP protocol has been criticized for its inability to properly handle the complex content that we are creating in an efficient, fast way, many designers have been looking for a better way forward. Since the beginning of 2011, Google has seemingly been leading the way. Designers have seen that this new protocol can process and load more than one resource at a time, unlike HTTP, and they want it.

However, given that this protocol requires more than just browser acceptance, it also requires the server’s that sites are hosted on to be compliant and integrate SPDY as well, look for a slower adoption of this wishlist item than perhaps some of the others. But with Firefox now turning this direction also, folks in the community are hopeful that the domino’s are lining up to fall in SDPY’s favor. If more browsers support the protocol then it is thought more sites and servers will begin falling in suite as well. Opening the doors for a speedier future.

From the Developer’s Perspective

As mentioned, developers also browse the web through a different lens than the average user, and when the answers from the dev side of the community started coming in, it was clear where their sites were set. They all tended to focus on efficient cross-browser development. Which is pretty much where you would expect the largest percentage of answers to fall, as the lack of this is responsible for the largest percentage of headaches that developers face when coding a site.

Standardization: Wishlist

Can you imagine what a wonderful world it would be if the standards were adopted so much quicker and with less picking and choosing? The developers that we heard from can imagine such a place, and they wish it would get here now! From the current processes in place for new standards to be decided on to the ways that the specific vendors go about ‘choosing’ which ones to integrate, so much needs to be revamped that this item had to be wishlisted.

Excerpt from The Web Standards Project Mission Statement:

Though leading browser makers have been involved in the creation of web standards since W3C was formed, for many years compliance was observed in the breach. By releasing browsers that failed to uniformly support standards, manufacturers needlessly fragmented the Web, injuring designers, developers, users, and businesses alike.

Perhaps we will get there one day, but for now, the day of complete cross-browser standards compliance and integration is something of a distant dream.

Cross-Browser Checking

Until this magic day arrives and we no longer have to perform the achingly repetitive and frustrating cross-browser checks on our websites, users would like the ability to run this check via their single browser of choice. So they are looking to the creators to work on developing this sort of option as a native function of the browser itself.

Firefox has attempted to provide such a feature with the IE-Tab. Developing it further to support different browser families and at least cover the past three versions of IE is a capability many would appreciate. So this is perhaps not that far from being seen in variations from multiple vendors as is often the case with these new developments.

HTML5

Since it burst onto the scene, HTML5 has been converting developers and designers over to its simple and concise framework, but that has not sped up the integration and adoption like many would have hoped. In fact, many are resistant to the push to use this new standard as using HTML5 may still cause problems in certain browsers. To check how your site or app works in a browser or which extension might be missing, apply The HTML5 Test and check your browser score.

HTML5 is a major game changer, but still has miles to go before it’s fully implemented. Til then, we have to roll with the punches. Image by Justin Watt

Editing and Debugging

The Firefox add-on Firebug includes a powerful coding, debugging and monitoring feature readily at your fingertips while browsing. Decent cross-browser DOM inspection tools as well as script debugging with easy CSS editing capabilities are greatly missed in many browsers. While others have some level of these capabilities, Firebug has already set the bar so high that, according to our replies, many are longing for comparable functionality where sadly it is lacking.

Not only do they want all browsers to offer developers real-time editing possibilities as well as quick statistical analysis tools, but they want them to be offered natively. Having that functionality right out of the box for a browser may be something that most would have wishlisted, but given where we are already at with regards to this (look at Chrome for example), it may not be that much of a stretch. But then again, maybe we’re just dreamers.

Ultimate Dream Features

Speaking of dreamers, we come to their section of the post. Here we have a shortlist of features that we couldn’t ignore. Features that many of our followers believed were long overdue.

Built-In Browser Sound Controls

Take over those controls. Image by Alex McCabe

With so many online apps and sites that unexpectedly take over your devices sound functions, to the aggravation of many a user, there are lots of people that we heard from who would like this addressed. With some sort of built-in browser sound controls, users could prevent these oft surprising system hijackings from ever taking place again. Or at least, that seems to be the instigation behind this dreamer’s addition to our list.

Native FTPs

Another area that our followers felt had been lacking, is a native FTP program along the lines of FireFTP across the vast spectrum of browsers. Several of our users singled out Chrome specifically here as it ranks so high in other areas with regards to both developers and users, but this one desired element has left something of a gaping void in many’s eyes that vendors should all seek to correct.

Native Multiple-Language IDEs

With more and more users actively looking to further design and develop from right there in their browsers versus separate applications, having native IDEs built into every browser would be a total dream come true. Integrated Development Environments (also known as Integrated Design Environments, Integrated Debugging Environments or even Interactive Development Environments) as built-in browser functions would effectively take designers and developers one step closer to a state of nirvana.

Effectively turning our browsers into one of our most powerful tools defining our trades. Though they tend to come with a steep learning curve, once we were passed that, we would have a streamlined workflow that put nearly all of the necessary development features in one place. Now as mentioned in the header, for this to work, they could not be dedicated to a single programming language as some IDEs are. With the prevalence of multiple-language IDEs available today, perhaps this dream could be reached one day soon.

Built-in Browser Based Text Editor

Though IDEs tend to come with a source code editor, there are still users who have called for a built-in text editor to come standard in their browsers. This would come in handy for a number of users, not just those necessarily in the design and development community. Once again, this is a matter of improved workflow, wherein users get more out of their browser and are having to switch back and forth between programs less while working on a project. Therefore, this small addition to all browsers would still be a dream come true.

Browser Auto-Save

Having extra backups in place to safeguard against any sort of information loss is always dreamed of by users. And while the process handling has improved on newer browsers, there is still an issue with any tab instability that can cause us to lose whatever information we are typing into any areas of that crashing tab. This is part of the frustration that helps to fuel calls for browsers to have an auto-save function that will protect whatever information we are entering from being lost. Whatever the cause. Even a power disruption would not cause total loss of our data, as long as the browser was watching our backs and automatically saving our entries every so often.

More Macros

The final dream feature mentioned by our followers has to do with the lack of macro support across the browser board. Wishing to significantly improve workflow, productivity and reduce frustration, users are calling for more native macro functioning to automate those more repetitive tasks we ask of our browsers daily. iMacros for Firefox is a great example of what they are looking for. However, they would like to see more vendors climbing on board, and this functionality going native.

A Mention of Mobile Microbrowsers

We thought it wouldn’t be right to leave the post without a quick mention of mobile browsers as we had a couple of mentions of those. The largest crux with current mobile browsing technology is undoubtedly its platform dependency. Something our followers would certainly like to see change. The Mobile Market Overview shows that mobile versions of today’s top market share web browsers are tied to specific brands or models.

Internet Explorer Mobile is constrained to the Windows 7 operating system, Firefox for mobile has only been released for Nokia Maemo and Android, Safari is exclusive to Mac mobile products, and so on. Not only do users want that to change, but they would also like better performance from the mobile browsers virtually all around. A factsheet featuring the prevalent browsers yields some interesting insights. Only two major mobile browsers currently pass the Acid3-Performance-Test , whereas the rather fameless surf engines Iris and Skyfire score 100/100.

In Conclusion

We know that with the levels of customization offered via plugins and add-ons, browsers can reach so many of these heights already. However, the with the vendors working them into the initial browser, hopes are that these often costly (with regards to system resources and more) features would find more light-weight integrations. Not to mention the amount of time and searching it could potentially save in the end.

As always we appreciate all of the wonderful responses that we received from our friends and followers, which provided the insights for putting this post together. And while we were not able to shine a light on all of the answers we got in, we are now turning the post over to you. Leave us a comment and let us know what you think of the must-have features mentioned, or what features you would include in your browser.

By Stephan Poppe:
Stephan has been part of the Smashing Team for some time now. Every once in a while he takes his time to put a useful piece together himself. He loves digging into the newest developments around the web and hopes you enjoy his discoveries.

(rb)

Here’s a common scenario: you’re coding up a form with lots of buttons or need to add some elements that trigger JavaScript functions, and in the design comp some of these elements look like links. You intuitively reach for the a element, put some in the markup, add event handlers to them, and style them to match the design.

But wait a bit. Leaving the issue of putting elements that may rely on JavaScript to work in the markup for another time, should those elements really be links? What does the text on them say? What happens when you click them? If they trigger some kind of action that doesn’t match the normal link behaviour of going to another URL, it’s quite likely that you should really be using buttons.

Yes, I know. The designer says these elements need to look like links, period. And there was a time when making HTML buttons look like links wasn’t really possible in a cross-browser way. But these days you can get very, very close. It’s a bit tricky, but possible.

Read full post

Posted in CSS.

Copyright © Roger Johansson

You spend hours laboring over text, creating the perfect blog post. If you read TutorialBlog, then you also know the importance of including photos on your blog, too. But, how much time did you spend making sure that your images are SEO-optimized for the best performance? Photos can be more than eye-candy for readers, images are a great opportunity to improve your on-page search engine optimization.

Savvy bloggers know to take every opportunity to increase their appeal to search engines. Why should you care? Because every time your blog or blog post comes up in the search engine results, you have the opportunity to drive additional traffic to your blog — and that means more readers and, if you are selling something, more customers! 

continue reading 4 Simple Steps to Optimize Your Photos for Search Engines

© Barbara Holbrook for Tutorial Blog | 13 comments | Add to del.icio.us

4 Simple Steps to Optimize Your Photos for Search Engines is a post from: Tutorial Blog

It’s easy to see your top-visited pages, navigation patterns and conversion metrics using visitor-tracking tools like Google Analytics. However, this data doesn’t show the roadblocks that users typically run into on your website. Tracking and optimizing error messages will help you measurably improve your website’s user experience. We’ll walk through how to add error tracking using Google Analytics, with some code snippets. Then, we’ll assemble the data and analyze it to figure out how to improve your error message drop rates.

What To Track

The most helpful errors to track are form-field errors and 404 pages. Form-field errors can be captured after the form’s validation has run; this can be client-side or server-side, as long as you can trigger a Google Analytics event when an error message appears to a user. (We’ll be using Google Analytics in this article, but you can apply these concepts to many visitor-tracking tools, such as Omniture and Performable.)

Form-Field Errors

Forms that allow users to create an account, log in or check out are the places where most visitors will hit stumbling blocks that you are not aware of. Pick pages with forms that have high exit rates or that have high total page views but low unique page views. This could indicate that users are repeatedly trying to submit the form but are encountering problems.

The easiest way to track form-field errors with Google Analytics is to track an event each time a user sees an error message. The specification for _trackEvent is:

_trackEvent(category, action, opt_label, opt_value)

If the form is for signing in and the user submits an incorrect password, I might use the following code:

<script type='text/javascript'>
  _gaq.push(['_trackEvent', 'Error', 'Sign In', 'Incorrect Password']);
</script>

If possible, store the error message’s text as a variable, and call this variable within Google Analytics’ event tracker. This way, as you change the text of the error message over time, you can measure the differences between the versions. For example, in PHP, I might write:

<?php
  $message = 'Incorrect password';
  if ($message) { ?>
  <script type='text/javascript'>
    _gaq.push(['_trackEvent', 'Error', 'Sign In', '<?php echo $message ?>']);
  </script>
<?php } ?>

If it’s possible for the user to receive more than one error message on the page at a time (for example, if they’ve missed more than one field in a form), then you might want to store all of the messages in the same event tracker. Use an array, or concatenate them into the variable that you call in your event tracker. You might see that a user has attempted to skip all of the fields in a form; this could indicate that they are testing the form to see which fields are required and which are optional. You’ll notice this if you have tracked an event that includes all missing fields in the same event. However, storing all of the messages in the same event might prevent you from tracking the effects of individual error messages over time, so begin by tracking each error message separately.

404 Pages

You might already know how many times your 404 page is being viewed, but do you know which URLs the users were trying to reach, or what websites are referring to those URLs? By adding a tracking code to your 404 pages, you can see both. The following snippet will include the URL that generated the 404 error and the URL that linked to that page:

<script type="text/javascript">
  _gaq.push(['_trackEvent', 'Error', '404', 'page: ' + document.location.pathname + document.location.search + ' ref: ' + document.referrer ]);
</script>

Google Analytics Reports

As you track errors as events using Google Analytics, you will find a list of them in your reports under “Event Tracking,� under the “Content� menu. Choose “Categories,� and then start drilling down through your error types.

You can save any of these graphs to your dashboard with the “Add to Dashboard� button at the top of each screen. I find it useful to list the top 404 errors on my dashboard, so that I can see whether anything new has popped up when I log in.

Google Analytics also lets you know of spikes in error messages. The “Intelligence� section allows you to set an alert for when a certain metric reaches a specified threshold. In my case, I want to know when the number of unique 404 errors has increased by more than 20% over the previous day.

In your custom alert, set the alert’s conditions to include “Event Action,� matching your error’s name exactly. In this case, the error name is “404.� Set it to alert you when the “Unique Events� percentage increases by more than 20% over the previous day. Be sure to check the box for the option to receive an email when this alert triggers!

Once you have captured enough data to analyze, start creating these dashboard widgets and alerts in Google Analytics, so that you can make informed decisions on how to improve your website.

How To Analyze Errors

Error messages will help you see in aggregate the most common stumbling blocks for users. Are a lot of users encountering errors with a particular text field? Perhaps the field for the expiration date of their credit card? Or for their email address? You might be surprised by what your users encounter.

Segmenting Data

If your website gets a lot of traffic, consider segmenting the user base to analyze the error messages. Look for groups of users who make up the majority of a certain kind of error event, because there may be something unique about that segment.

“New Visitors� are first-time visitors to your website. They are likely unfamiliar with the typical flow of your navigation and are brand new to your forms and so don’t know what fields are required. “Returning Visitors� will likely be familiar with your website, so they may not have a large impact on error rates (unless you’ve changed something that catches them by surprise).

To change the user segment that you’re looking at, go to your list of error events and click the drop-down menu next to “Advanced Segments.� By selecting “New Visitors� and then hitting “Apply,� the data will update to show only the errors that “New Visitors� have encountered.

Break down your data on error messages according to user segment in order to analyze the data more deeply.

Segmenting users by country can also give more context. I once wrestled with why so many users were triggering error messages for ZIP and postal codes in a form. After organizing the data by country, I saw a high number of errors from one country whose postal-code syntax I hadn’t accounted for in my form’s validation. I fixed the error and saw the error rate for ZIP and postal codes drop.

Check errors by country to see whether any patterns emerge in your error messages.

Referring sources for 404 pages is another way to examine the data. Use the “Filter Event Label� search bar to show errors whose referring source is a particular domain. Searching your own domain first is useful to see which incorrect URLs you can quickly fix on your own website.

Prioritize Issues

After segmenting the data, prioritize the errors that you want to fix. The top priority will be errors that affect a large group of people (i.e. ones that have a high number of unique events). Next, work on the errors that you know you can easily fix. You likely already know the cause of some errors (poor validation, unhelpful error message, etc.), so clean those up. For 404 errors, check which referring links come from your website, and fix those.

Examine 404 errors to see whether any particular referring links can be easily fixed.

Once you’ve cleaned up the errors that are easy to fix, track the new data for at least a week before doing another round of prioritization. Examine what has changed in the top errors and where they come from, and then research the cause of those errors.

Often, forms will need to be made more intuitive to help users avoid error messages. For example, if a lot of users are making mistakes when entering a date, then play with that field. Does your user base prefer drop-down menus for days, months and years? Do they make fewer errors if given a date picker? Are you giving them helpful examples of the syntax they need to follow? Track your changes and measure the rate of error events after each change to see what decreases user error.

Improve Your Error Messages

Improving the text, design and layout of your error messages could decrease the number of repeated errors by users. An error message might not be clear or might be hidden on the page; improve the user experience by testing changes to your error messages.

I prefer A/B testing to compare the effectiveness of error messages and their designs. On one form, I noticed that a number of users were skipping the phone-number field altogether, even though I’d indicated that it was required.

Some of the indicators of a required field that we tested.

After A/B testing different ways to indicate that the field was required and why it was required, we found that the combination of a link and a tooltip helped users recognize the need to fill in their phone number. This solution drastically decreased the rate of errors for this field.

On 404 pages, test out different content on users: link to your most popular pages; present a search form; try humorous content or Easter eggs to lighten the users’ spirits.

As you test different textual and design changes to your error messages, be sure to measure their effectiveness. Examine the following:

• Total error events, and total events per error message;
• Unique events per error message;
• Exit rates on pages with forms and 404 pages.

All of these rates should drop. Ideally, your users should find the website so intuitive that your error event data will represent only those who try to “beat the system.�

Conclusion

To sum up, track error messages and 404 pages as events in Google Analytics, and analyze the top error patterns. Prioritize the causes of errors, and continue to improve your forms and 404 pages to avoid errors altogether. Lastly, test changes in the content and design of error messages to see whether they decrease repeated errors. Improving your forms, 404 pages and error messages will improve your website’s overall user experience.

Additional Resources

• “Event Tracking Guide,â€� Google Analytics
• “A Primer on A/B Testing,â€� A List Apart
• “Optimizing Error Pages: Creating Opportunities Out of Mistakes,â€� Smashing Magazine
• “Web Form Validation: Best Practices and Examples,â€� Smashing Magazine

(al)

© Lara Swanson for Smashing Magazine, 2011.