Creating An Adaptive System To Enhance UX

In computer science, the term “adaptive system” refers to a process in which an interactive system adapts its behavior to individual users based on information acquired about its user(s), the context of use and its environment. Although adaptive systems have been long-discussed in academia and have been an aspiration for computer scientists and researchers, there has never been a better time than today to realize the potential of what future interaction with computer systems will be like.
The abilities of today’s network information technologies to create rich, immersive personalized experiences to track interactions and aggregate and analyze them in real time, together with the data collected by the sensors we carry in our smart devices, provides us an opportunity like never before to design adaptivity in order to ultimately offer a better user experience that is both unobtrusive and transparent.
This article will cover the fundamental concepts for utilizing smart device technologies and sensor data in order to understand context and introduce “adaptive thinking” into the UX professional’s toolset. I will demonstrate the importance of context when designing adaptive experiences, give ideas on how to design adaptive systems, and perhaps inspire designers to consider how smart devices and context aware applications can enhance the user experience with adaptivity.

Examples Of Adaptive Systems

An early example of an adaptive feature can be found in GPS navigational devices. Using one of these devices, a user is able to easily locate and navigate to any location they can drive to. When the sun sets or while driving through a tunnel, the system automatically changes the interface color to a dark “night mode” so as not to blind the driver with a bright light from the device. The system knows the user’s exact location and the position of the sun, and by understanding these two factors, the system maintains a safe driving environment by adapting to the user’s needs.

The day and night interfaces in the GARMIN Zumo 660 adapt the interface color so the user isn’t blinded with a bright light.
Adaptive design is about listening to the environment and learning user patterns. Combining smart device sensor data, network connectivity and analysis of user behavior is the secret sauce behind creating an adaptive experience. By combining these capabilities, we not only understand the context of use, we can also anticipate what the user needs at a particular moment.
Google Now is an interesting example of an adaptive application that gives users answer to questions they’ve thought rather than typed. Through a series of smart cards that appear throughout the day on the user’s mobile phone, Google Now tells you the day’s weather before you start your day, how much traffic to expect before you leave for work, when the next train will arrive as you’re standing on the platform or your favorite team’s score while they’re playing. It does this by recording and analyzing your preferences while you’re using your phone. For example, updates on your favorite sports team are based on your Web browsing and search history. And by analyzing your current location, previous locations and Web history, Google Now presents a card with traffic conditions on route to your next likely destination.
As UX professionals, we understand that some mobile users do not like to use the virtual keyboard and we try to avoid that necessity as much as possible. By utilizing the user’s personal behavior as a sensor together with smart device capabilities and enabling voice commands (similar to iOS’s Siri), Google Now creates an adaptive experience that helps users avoid using the virtual keyboard, thus further adapting to the mobile user’s needs and helping users quickly get the information they require on the go.
Adaptive systems are not only limited to mobile devices. Ubiquitous computing (ubicomp) is the idea of being surrounded by smart devices and networked digital objects that are carefully tuned to offer us unobtrusive assistance as we navigate through our work and personal lives. Similarly, ambient intelligence (AmI) refers to digital environments that are sensitive and responsive to the presence of people.

Nest uses sensors to adapt the temperature to activity in the home.
Nest, The Learning Thermostat, is a great example of an adaptive system integrated to home environments. Using a variety of sensors for temperature, humidity, touch, near-field activity, far-field activity and even ambient light, it can detect whether there are people home and how active the home is at any time. By adjusting the temperature to adapt to this information, it can automatically cut up to 20% off a home’s heating and cooling bills.
When no one is around, Nest learns to turn the heat down. When you come home from work, it knows that the heat should go back up. After the first few weeks, it learns when you come home from work and can turn the heat up before you arrive so that you come home to a warm house.
In 1991 Mark Weiser, widely considered to be the father of ubiquitous computing, wrote:

“The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life until they are indistinguishable from it.”

Nest is a great example of ubicomp and how technology can disappear into our surroundings until only the user interface remains perceivable to users.
These devices create contexts of sensor and user data that provide a superior user experience by anticipating what the user might need before the need is expressed. This is the future of UX design.

Adaptive Thinking

In contrast to traditional desktop systems, mobile devices are normally used in many different situations. However, mobile applications nowadays do not often take advantage of information about the context of their use, and hence are only usable for very specific purposes. For example, an application with city maps for local businesses can be used in different contexts: walking through town or at home, and with or without network connectivity.
Today’s users can customize their device’s system through preferences and settings, and by choosing what applications work best for their needs. Even after the implementation of user-centered design processes that assure a certain degree of user acceptance and yield a richer understanding of the context, it is impossible to anticipate the requirements of all users and map those requirements to a single best or optimal system configuration.
“Adaptive thinking” is a mindset that provides the tools necessary to significantly improve the user experience and enhance the intended purpose of the product by utilizing the technology that is readily available in every pocket. It is about learning the environment and the user and adapting to their current needs and situation. Therefore, designers should first design for the context of use and then design the set of functions that are triggered in relevant situations.
Here is an instructive case where adaptive thinking was used to create a mobile application for a bike sharing program. Bicycle sharing systems, also known as bike rental, are becoming more and more common in major cities around the world. Bicycle sharing helps reduce traffic congestion and air pollution, and encourages local residents to maintain a healthy lifestyle.
A user who wants to rent a bike can use a mobile application to look for the nearest bike rental station that has bikes available to rent. If the user is unfamiliar with the city, they can use the application to get directions to the rental station; this is the core functionality of the application.
An adaptive system will realize when the user has arrived at the bike rental station and automatically offer additional options, i.e., adapt to the current situation. For example, it may offer the user a quick way to rent a bike, a feature that was not available in the application before arriving at the rental station. During the rental period, the system will anticipate the user’s needs and offer nearby bike rental stations with available parking spots where the bike can be returned, and show the user the current balance for the rental time.

A bicycle sharing application can adapt to show the user different options depending on location, and whether the user is currently renting a bike.
By using the assisted GPS device capabilities, using the network connectivity and understanding the user’s story at any given time through the product lifecycle, adaptive design will provide users of the mobile application a reliable extension to the bike rental program.

Adaptive and Responsive Design

An adaptive system is one that adapts automatically to its users according to changing conditions. Responsive design (or adaptive layout) is a subset of adaptive design, an approach to Web design in which a website is crafted to provide an optimal viewing experience across a wide range of devices. In my UX magazine article The Multiscreen Ecosystem, I discuss how responsive websites can also be adaptive by understanding the context of using a mobile device and by designing contextual paths.

Context For Adaptivity

I quote below from the 2007 book The Adaptive Web, which talks about the importance of context for adaptive mobile guides. It explains adaptivity in the scope of mobile systems as context-aware computing, i.e., the ability to use information in the current context to adapt the user interaction and the presentation of information to the current situations of the user.

“Understanding the context is an important prerequisite for the adaption process. Context is not just the location, but encompasses also information like the ambient noise or lighting level, the network connectivity or bandwidth, and even the social circumstances of the user. Furthermore, systems have to anticipate the user’s goals and intentions, which might be inferred from their actions or from physiological sensors and appropriate environmental sensors (e.g. light, pressure and noise sensors).
One prerequisite for adaptive systems is the proper assessment of the user’s situation. For this purpose, systems need to rely on a representation of relevant situations. Depending on the supported task, situations can be characterized by many different attributes. Therefore, designers of suitable adaptation for mobile devices need to look at a variety of spatial, temporal, physical and activity related attributes to provide effective assistance.
For example, a mobile application that assists users in a shop needs to know about the current spatial environment of the users (e.g. which products are nearby), the temporal constraints of the user (e.g. how much time is available for shopping), the general interests of the users and their preferences (e.g. if the user prefers red or white wine with tuna), details about the shopping task itself (e.g. which items are on the shopping list and for which purpose the products are needed) and maybe even about the physiological and the emotional state of users (e.g. whether users are enjoying the shopping or not).”

That said, understanding the locational context and the user story is now easier than ever before. We can take advantage of the fact that we carry our phones wherever we go. A smartphone is packed with technology and with information about the user that designers can use to understand context. The highly sophisticated advanced technology in a user’s pocket not only allows designers to analyze if the user is walking, standing or in a loud or quiet environment, but also can help designers understand the precise location of a person within a department store, such as a specific aisle.

An application can analyze the user’s precise location within a store to provide information that is adapted to the current content.
AislePhone, an Israeli start-up currently in the beta stage, is developing a platform for precise in-store positioning that can determine the exact position of a person down to the specific aisle. With this technology, shopping with your mobile phone in hand will be a common experience, as mobile apps for supermarkets and other large retail stores will use locational and user data to enhance the shopping experience, much like a personal shopping assistant in your pocket.
Google Indoor Maps allows users to view and navigate floor plans of several kinds of commercial locations such as airports, department stores or malls, all within Google Maps.
This technology not only knows your indoor location, but also what floor you’re on in a building. Depending on what data is available, the map shows notable places in the building you’re currently in, such as stores, restrooms or the nearest food court.
With this type of technology, “you are here” directory maps will no longer be needed in malls or department stores. You will be able to determine your location and orient yourself using a smartphone, and this experience will adapt to your specific needs. For example, apps will offer you relevant discounts as you walk through the mall or highlight shops based on your gender and age.

Designing An Adaptive System

Adaptive design integrates both subtle and obvious features. Often, adaptive qualities can be very subtle and unobtrusive: sometimes a seemingly small adaptive feature can greatly improve the overall experience. For example, did you ever notice that Google Search can read your mind? When you start typing, Google Instant, using autocomplete, knows what you’re thinking even when you enter only three letters of a search term. It does this because Google Search considers and records all search queries within a session in order to have a better understanding of the user’s intent.
When a user searches for “The Beatles,” Google understands this as part of a research session and will help you quickly discover Ringo Starr or Paul McCartney as you enter the first three letters of their name; it understands the context of your search and compares it with other similar popular relevant results.

Google Instant understands the context of your search.
Another example of a subtle feature that helps enhance the user experience is a testing system for students that adjusts the difficulty of test questions according to whether prior questions were answered correctly. Or a music discovery application that looks into your current play list and adapts to your taste, helping you discover additional music you may like.
Although the experience should always be unobtrusive, adaptive interfaces need to be obvious so users understand the context for the adaptation and always feel in control. For a better experience, applications should also allow users to manage adaptive features. For example, if at nighttime the interface changes to a darker night mode (like in navigational devices), the user should always be able to change it back manually. Or, if entering a shopping mall triggers a different experience, the user must understand the context for this adaptivity and want to embrace the added functionality.
Charles Darwin wrote:

“It is not the strongest of the species that survives, nor the most intelligent that survives. It is the one that is the most adaptable to change.”

As human beings, we adapt to our surroundings naturally; it is the key to our survival. As designers, we can use this inherent ability and our physical senses and the powers of the brain to analyze and design what we would do in adaptable situations. For example, to communicate in a loud environment, we adapt by raising up our voice up to be heard. Similarly, an adaptive system will raise a device’s volume.
In an even louder environment, we use hand gestures to get attention and focus our eyes on the other person’s mouth to try to read their lips. However, unlike computers that can process multiple layers of data, human beings have limited sensory resources and a limited cognitive workload.
In today’s world, a person carries in one pocket more advanced technologies than ever before possible. An intelligent device like a smartphone is embedded with highly sophisticated sensors. These sensors, together with advanced computing power and network connectivity, can help us analyze and understand the context of use. The smart device’s ability to analyze the context of use in real time, together with understanding the user’s story, allows opportunities to provide an even greater user experience by adapting to the user needs.
I will illustrate some of the key points in using these technologies.

Analyzing User Behavior

Similar to the Google Now example, analyzing user behavior and the user’s interaction with the digital world can yield a great understanding of the user’s context. Analyzing the user’s search patterns or what applications they download can tell us about their preferences and hobbies. Tracking current location and location history can give us the user’s surroundings and the physical boundaries of their life, so we can understand what subway station they take to work or where they like to eat their lunch. Note that when this is done without the knowledge of users, it may be considered a breach of browser security and illegal in many countries.
Here is a practical example of how analyzing the user’s behavior could help in creating an adaptive system. In the now famous Google Glasses video, we follow the user throughout his morning as he eats his breakfast and then leaves his house heading for the subway. Upon arriving at the subway, he receives a message that subway service is suspended and is offered a walking route. As useful as this may be, a true adaptive system will analyze the user behavior as the user gets up and will warn the user ahead of time that the subway service is suspended.

Google Glasses uses information about the user’s location to provide relevant information.
Understanding the user’s behavior (whether he takes a subway or walks to work) and connecting it with available information online allows us to understand and adapt to his needs. Most times, using one data source is not enough; combining the technologies (network connectivity, user behavior and sensor data) is the only way to understand context. For example, we can gauge the outside temperature combining the user’s current location with online weather information, and then use this data to offer phone numbers for nearby cab companies in addition to a walking route, assuming the user may not wish to walk to work in the rain.

Making Use of the User’s Story

Behavioral targeting or personalization refers to a range of technologies used by online website publishers and advertisers that allows them to increase the effectiveness of their campaigns by capturing data generated from website and landing page visitors and then adapting to their needs. Personalization technology enables the dynamic insertion, customization or suggestion of content in any format that is relevant to the individual user, based both on the user’s explicitly provided details and their implicit behavior and preferences.
Another aspect of personalization is the increasing prevalence of open data on the Web. Many companies make their data available on the Web via APIs, Web services and open data standards. For example, Pipl is a search engine designed to locate people’s information across the web. Pipl uses identity resolution algorithms to aggregate information and cross-link various sources before delivering an online profile containing a summary report of everything that’s publicly available for each individual. Pipl offers all that wealth of information to developers via an API. One useful application for this would be running an API request for an email address; one can determine the user’s gender, age, location and interests and provide an adaptive experience based on the individual user.

Pipl Search aggregates information that’s publicly available on any individual.
Understanding the user story is possible with a network connection. However, network connectivity is not only important to understand the user and his online record, it is a vital instrument that connects all other technologies together — cloud computing, understanding local weather, traffic conditions or even the type of connection itself (Wi-Fi or G3) can help us understand context. Ultimately, the possibilities inherent in understanding and designing to the user’s story — their context — are possibilities built upon the collection of sensor data and user data via the network.

Sensor Data

A sensor for adaptive systems is any technology that allows a device to understand and evaluate context. It includes a built-in accelerometer in smart devices, a camera, a clock or even a microphone. We can use the various sensors embedded in smart devices to better understand the user’s environment. For example, the built-in accelerometer can be used to gauge if a user is walking or running.
There are two main scenarios for using sensors: everyday objects transmitting data like temperature or noise level to other devices, for example, iGrill, a cooking thermometer and application that communicates with smart devices via a secure, long-range Bluetooth connection. Or smart device applications, utilizing the built-in sensors to receive, process and output data to the user. By using these sensors and mixing other technologies discussed above, we can often obtain powerful information on the context of use and use it to create adaptive systems.

iGrill Cooking Thermometer.
Sensors can be a powerful design tool of the future. For example, with the aid of sensors, e-commerce checkout will be as easy as logging into a bank account with no password. Here is an example of how using four layers of sensor data to secure the user’s identity with a degree of certainty to create passwordless banking that would present the user a “light” version of his bank account, so he quickly could check his account balance. Imagine a user is at home surfing to his bank account through his tablet computer.
The first layer of security is the username associated with the tablet. Second is the location sensor, which will give us a greater degree of certainty that the user is in his home vicinity, cross-checked with his registered address with the bank. The third layer is the Wi-Fi connection (its MAC address, a unique identifier assigned to a network) the user is surfing on. For the fourth layer, we can check for other nearby Wi-Fi connections (The neighbors are sure to have a unique Wi-Fi MAC address) that can also be used as a security verification. If these bits of data are consistent across several password logins, the system can adapt and allow the user to enter without any password.
To learn more about adaptive design and how to get from sensors to context, I highly recommended you read this paper by Albrecht Schmidt about Context-Aware Computing (Interaction Design Foundation Encyclopedia).

Conclusion

Today, we’re just starting to see the potential of using sensors and technology to connect between devices and people. The term “Internet of things” refers to uniquely identifiable objects that are network-connected. For example, a smart flowerpot that sends a signal when it’s time to water the flowers. There is no doubt that adaptive design will play a key role in making future devices and functional user interfaces that give users an intuitive control over their environments in any situation or context.

The Inconvenient Truth About SEO

Do you own a website? Do you want to be number one on Google? Whatever you do, don’t spend money on aggressive search engine optimization (SEO). I know that sounds like an extreme position to take. However, a lot of website owners see search engine optimization as the answer to their search ranking woes, when things are considerably more complex.
The inconvenient truth is that the best person to improve your ranking is you. Unfortunately, that is going to take time and commitment on your part. The answer doesn’t lie in hiring a SEO company to boost your website ranking for Google. The problem starts with the term “search engine optimization” and the misconceptions surrounding it.

What SEO Isn’t

Most website owners perceive SEO as a dark art, shrouded in mystery. They have heard phrases like “gateway pages” and “keyword density”, or have been bamboozled by technobabble about the way websites should be built. All of this has left them feeling that SEO is the purview of experts. This is a misconception reinforced by certain segments of the SEO community.
The problem is that these kinds of complex techniques do work, to a point. It is possible to improve placement through a manipulation of the system. However, although it can have short term benefits, it will not last without continual investment. This is because the objective is wrong. SEO shouldn’t be about getting to the top of Google for particular phrases. In fact, we shouldn’t be optimizing for search engines at all. We should be optimizing for people. After all, that is what Google is trying to do.

Why You Shouldn’t Be Optimizing For Search Engines

Google’s aim is simple: connect its searchers with the most relevant content. If you are more worried about a good ranking than providing relevant content, then you are going to be fighting a losing battle.
If you hire a SEO company to improve your placement and you measure their worth on the basis of how high they get you in the rankings, then you are out of line with what Google is trying to achieve. Your primary objective should be better content, not higher rankings.

Image credit: Search Engine People Blog.
The SEO company can use every trick in the book to get you better rankings, but over the long term they will lose, because Google is constantly changing how it rates websites so it can provide more accurate results.
Remember, you shouldn’t be optimizing for ranking in search engines, you should be optimizing for users.

A Better Way

Google does not make a secret of how to gain a high ranking. It states clearly in its webmaster guidelines:

“Make pages primarily for users, not for search engines.”

So how do you actually do that? Again Google provides the answer:

“Create a useful, information-rich website, and write pages that clearly and accurately describe your content.”

In short, write useful content. This could include (but is not limited to):

• Publishing white papers,
• Writing a blog,
• Sharing research findings,
• Producing detailed case studies,
• Encouraging user-generated content,
• Creating useful applications or tools,
• Running a Q&A section,
• Posting interviews

The list could go on. The key is to produce content people find useful and want to share.
Yes, there are some technical considerations when it comes to search engines. However, any reasonably well-built website will be accessible to Google. You don’t need an expert SEO company for that (at least not if the Web designer does their job right).
As an aside, it is worth noting that if you take accessibility seriously for users with disabilities (such as those with visual impairments), then you will also make a website accessible to Google.
However, setting those technical issues aside, it all comes down to content. If you create great content, people will link to it, and Google will improve your placement. It really is that simple.
The question then becomes, how do you create great content?

The Inconvenient Truth

This is the point where we come to the inconvenient truth. It is hard for an outside contractor to produce the great content that will keep users coming back and encourage them to share. In my experience, this is much better done internally within the organization. The problem is that this doesn’t sit well with most organizations. Its easier to outsource the problem to a SEO company than to tackle an unfamiliar area internally.
Admittedly, a good SEO company will have copywriters on board who can write content for you. However, their knowledge will be limited, as will their ability to really get to know your business. Yes, they can write a few keyword-heavy blog posts that Google will like the look of. However, this won’t fool users, and so the number of links to that content will be low.
The truth is that if you are serious about improving your placement on search engines, it has to be done internally.
This truth is all the more painful, as most organizations are not configured to do this properly.

Organizational Change Required

The more I work with organizations on their digital strategy, the more I realize how few are structured to do business in a digital world. The issue of SEO is an ideal example of the problem.
Responsibility for the website normally lies with the marketing department. Although marketing is well-experienced in producing and writing marketing copy that outlines the products and services the organization provides, they are not best equipped to write content that will be heavily linked to.
It is not surprising that if you search on a term like “call to action,” the top results are almost exclusively informational articles, rather than companies helping with services in this area.
The problem is that marketeers are experts in the product or service being sold, not necessarily the surrounding subject matter. For example, the marketing department of a company selling healthy meals will know everything about the benefits of their product, but will have a limited knowledge of nutrition. Unfortunately, people are more likely to link to a post on healthy eating tips than they are to link to some marketing copy on a particular health product.
What you really need is the nutritional expert who designed the meal to be posting regularly to a blog, talking about what makes a healthy diet. A blog like this would include lots of linkable content, would be able to build a regular readership and would produce keyword-rich copy.
The problem is that this is not how organizations are set up. It is not the nutritional expert’s job to write blog posts; that responsibility belongs in marketing.

The Long-Term Solution

Ultimately organizations need to change so that online marketing is a more distributed role with everybody taking responsibility for aspects of it. I am not suggesting that the central marketing function has no role in digital, but rather recognizing that they cannot do it alone. Others will need to have some marketing responsibilities as part of their role.
For example a company selling healthy meals should allocate one afternoon each week for their nutritional experts and chefs to share their expertise online. It would become the marketing department’s responsibility to support these bloggers by providing training, editorial support and technical advice.
Unfortunately, these experts are often the most valuable resource within a business, and so their time is incredibly valuable. The idea of “distracting” them from their core role is too much for many companies to swallow.
However, in the short term there is still much that can be done.

A Short-Term Solution

As we wait for companies to wake up and change the way they are organized, there are ways of working within the system.
If you haven’t already, consider hiring an employee dedicated to creating content for your website. You can partially finance it with the money you save by getting rid of your SEO company.
If that is beyond your budget, consider hiring a short-term contractor or a part-time staff member. You could even use an existing member of your staff as long as they have time set aside to prevent the Web being pushed down the priority list. Although this person won’t have the knowledge to write all the content themselves, by being situated inside of the business it will be much easier for them to get access to those within the organization who do.
Arrange meetings with these experts and talk to them about their role. Identify various subjects based on their knowledge and then either record a video interview or write up a blog post based on what they share. Also ask these experts what news sources they read or which people within the industry they follow. Monitor these sources and ask your expert to comment on what is shared. These comments can be turned into posts that add to the wealth of content on your website.
Finally, you may find that the experts within the business are already producing a wealth of content that can act as source material for content that users will find interesting.
For example, our fictional nutritional expert probably already has documentation on the health benefits of certain food types or how certain conditions can be helped through healthy eating. Admittedly this kind of material might be too dry or academic, but with some editing and rewriting it would probably make great online content.
The content you post does not have to be long, it just has to be link-worthy. The key is to share the opinion of your expert and provide content of value to your audience.
As that audience grows, start asking questions. Maybe even get some of your readers to share their experiences or knowledge. Over time you will discover that not only will your readers want to contribute, so will your experts. As they see the value in posting content regularly to the website, they will start blogging themselves. All you will have to do is suggest topics and edit their output.
I know what you are thinking: it just isn’t that simple.

No More Excuses

I realize this is a big cultural shift for many organizations. Marketing teams will feel they are losing control, the person responsible for blogging will feel out of their depth and the experts may resent being asked lots of questions. However, what is the alternative?
For better or worse, Google demands good content in return for high rankings. Pretending that SEO companies can magically find a shortcut that allows you to avoid this tradeoff just isn’t going to cut it.
If you care about how you rank, it is time to take responsibility for your website’s content. Once you overcome the initial hurdle, you will find that producing quality content on an ongoing basis becomes second nature.

Update (17.12.2012)

After a heated discussion in comments to this article, in social channels and via Skype, Paul clarified his position in the article How I See The Role of SEO in his blog. We are republishing the article for the sake of making his arguments clear and unambiguous — of course, with Paul’s permission.—Ed.
There seems to be the perception that I want to see an end to the SEO sector. Although I have issues with the name, I do believe they have a role.

My message can be boiled down to the following points:

• Website owners are unhealthily obsessed with their rankings on Google.
• We should be creating primarily for people and not search engines.
• The best way to improve your ranking is to produce great content that people link to.
• That great content is better produced in-house, rather than being outsourced to an agency.
• A good web designer can take you a long way in making your site accessible to search engines.
• Before you spend money on an SEO company, make sure you have the basics in place first.

An unfortunate response

Unfortunately this caused a massive and aggressive reaction in the SEO community. Smashing Magazine was attacked for publishing the post, I was told I was out-of-date and ill informed (which is of course entirely possible), but worst of all there were a shocking number of attacks on me personally.
To be honest this doesn’t entirely surprise me. I have been working with the web long enough to be all too aware of the over reaction it creates in people. However, it is always hurtful when somebody attacks you as a human being, rather than your opinion.
Of course not everybody was like that.great conversations with Bill Slawski and Joost De Valk, both of who attempted to put straight personally and on their blogs. I very much appreciate them taking the time and they have helped to soften my views.

SEO companies do have a role

I think it is important to stress that I do believe SEO companies have a role. The problem is they are often brought in when there is still much work that could be done internally within the organisation.
To me its about return on investment. Why spend money improving your search engine rankings when you could spend the same money improving rankings and producing more engaging content? Or why not spend money on improving your rankings and building a more accessible website?

That is what I am proposing. I am saying that content and solid design should be first. Once that is in place then, sure, hire an SEO company.

There are two exceptions to that general rule of thumb.

Content strategy

First, the SEO industry is changing. They are increasingly helping clients with content and that is great. However, if that is the role they are going to take then they need to stop saying they are about “search engine optimisation.” Creating great content is not primarily an SEO job. They have a branding issue there.
Also, although I am happy for an SEO company to help educate clients about content they shouldn’t be writing copy for them week and week out for them. Take the approach of a content strategist who trains up the client, provides them a strategy and then encourages them to take on the role themselves. Isn’t that better for the client?

Cleaning up after bad web designers

The second exception is where the web designer has built an inaccessible website. As Joost De Valk said , it falls to the SEO company to clean up the mess.
This is obviously an issue that needs addressing in the web development community and why we need people like Joost speaking at web design conferences.
However, I wouldn’t expect a web developer to provide all of the technical subtleties of an SEO company. That is probably too specialist for most web designers to do.
I don’t doubt that these subtleties are important and do make a difference to rankings. However, once again it is important that we have the basics in place first:

• Great content.
• A solidly built website.

Setting the right priorities

Hopefully that helps clarify my position slightly. I am not for a minute trying to destroy the SEO sector (as I was accused of repeatedly). What I am trying to do is set priorities straight.
I guess in short it is the phase “search engine optimisation” I have a problem with. It implies we should be accommodating the idiosyncrasies of search engines above the needs of users.
That is something I will never compromise over and I am sure something the vast majority of SEO companies would agree with.

CSS Baseline: The Good, The Bad And The Ugly

Vertical rhythm is clearly an important part of Web design, yet on the subject of baseline, our community seems divided and there is no consensus as to how it fits in — if at all — with our growing and evolving toolkit for designing online.
This may be due to a lack of understanding and appreciation of the benefits that follow from a baseline grid, but it is more likely because baseline is notoriously difficult to get right, and no one yet holds the blueprint to its successful implementation.
Some even argue baseline is redundant online, as typographic terminology and behavior on the Web follow different rules than those used in print, the frustrating discrepancy between line-height and leading being the most obvious example.
For now, however, let’s assume baseline is, to some degree at least, a useful tool for Web designers. What exactly is it, what tools do we have at our disposal in order to execute it, and, crucially, is it worth the hassle?

Vertical Rhythm And Pattern Recognition

Before tackling the mathematical, potentially pixel-nudging implementation of baseline alignment, it’s a good idea to get an understanding of its parent principle: vertical rhythm. By understanding the why of the baseline, we’ll be better equipped and more motivated to come to grips with the sometimes tedious and obsessive how.
Vertical rhythm, in simplest terms, concerns the structural height and spacing of vertically stacked elements, perhaps most commonly the padding, margins and line height. Just like a horizontal grid achieves harmony by restricting the layout to a set of predefined unit sizes, the vertical rhythm (or grid, if you like) solidifies the structure by offering consistent, predictable measures as the user scrolls down the content.

Grids are not only helpful on the horizontal axis, but also on the vertical axis.
Why is vertical rhythm important? Well, it has to do with how our mind works and how we use pattern recognition to decipher the world around us. Without going into the subject at length (other people much smarter than me would be more suited to that task), one can say that pattern recognition allows the human brain to store similar or identical impressions (such as primary shapes or colors) in a pattern library and retrieve them for quick analysis of new stimuli. This is the reason why we don’t look at individual letters when reading, but instead recognize whole words at a time (by pulling previous instances of the same pattern from our memory bank). It’s also the reason why we instantly recognize the letters themselves (“A,” “B,” “C,” etc.), even if the font, size and color vary — the basic shapes are stored in our pattern library.
Now it follows that any stimuli that doesn’t match any of your existing pattern records will prompt a new entry in the memory bank, which, in turn, requires more brain processing power — and that’s where the importance of design structure and grids, whether horizontal or vertical, comes in. Imagine a simple layout with a consistent paragraph spacing of X. Having analyzed the first space, your brain will instantly recognize all other identical spaces as part of the same pattern. If, on the other hand, the same layout uses different spacing between each element, the reader’s brain would have to analyze all individual spaces in order to understand their meaning. In other words: the more different shapes there are for the brain to analyze, the longer it’s going to take.

Irregular shapes (left) require more processing power than regular shapes (right).
As any irregularity in a structure will break the automatic flow of pattern recognition (thus wasting brain activity that could otherwise have been used on good content), a regular, consistent and predictable structure will, naturally, aid the legibility and cognitive interpretation of your design. Establishing a solid baseline grid is a great method to achieve just that.
Furthermore, utilizing a consistent system in which every vertical (and horizontal) space or element derives from a predetermined unit size not only eliminates arbitrary inconsistencies, but also makes the designer’s job easier by basing structural decisions on an overarching framework. Establishing a standard where, for example, headers always have two baselines of white space below them, and the padding of every box always equals three baselines, adds logic to our layouts and makes them easier not only to design, but also to build and, most importantly, digest.
Now, if vertical rhythm seem like an abstract concept, the second benefit of baseline — horizontal alignment across multiple columns — should be easier to grasp. Most commonly seen in print design, particularly magazines and newspapers that frequently use multi-column layouts, the baseline alignment of adjacent paragraphs (or headers) is delightfully calm when done right, and annoyingly disruptive when implemented badly or not at all. The quiet order arriving from horizontal alignment exhibits a visual confidence, an invisible scaffolding that holds everything in place and reassures the readers at a subconscious level. A book with every line on a left hand page aligning with their counterparts on the right simply feels trustworthy; a book where the lines don’t match up at all somewhat less so.

Horizontal baseline alignment across multiple columns.

The Trouble With line-height

Traditionally, the baseline is the invisible line upon which most letters “sit,” and the distance between each baseline forms the basis of the baseline grid, which, as we just discussed, aids not only the vertical rhythm but also the horizontal alignment of elements in adjacent columns. Having defined a baseline grid, what follows is the forced alignment of all other elements, ensuring that any line of text, any border, any image or boxed element will always match up and adhere to the same vertical structure.
The trouble is that where tools like InDesign let you do this by clicking a button (literally switching the grid on and off) and allow you to easily resize shapes to fit, when it comes to CSS, there’s no other way to do it than meticulous restriction and monitoring of line height, padding, margin, size — anything that may affect the total height of an object.

The traditional baseline is the line upon which most letters sit and from which the total height of elements should derive.
To make matters worse, the CSS line-height property doesn’t have an inherent concept of baseline, and each line of text is placed roughly in the middle of the element’s total height. This means that perfectly aligning the actual base of your text (which is to say the baseline) across different styles and fonts requires further manual, time-consuming tweaking and pixel nudging.
So how does one go about implementing CSS baseline? Well, due to the lack of a native baseline syntax, snap-in-place or browser functionality to force vertical alignment, we’re left to experiment. But let’s start with the basics.

The Good: Basic CSS Baseline

To date, at least as far as I’m aware, no consensus on a right way to do CSS baseline has formed. Some people are happy as long as the line height and spacing follow a set of guiding rules, others are more obsessed and meticulous — for better or for worse — and are not satisfied until every line of text sits beautifully on the baseline, and images, borders, boxes and other elements perfectly align to the same grid. The good news for all of us, however, is that basic CSS baseline really isn’t that hard at all. By making a few design decisions up front (and sticking to them), all it takes is a bit of elementary math.
To define your baseline, it’s a good idea to start with the smallest text size you’ll be using, in most cases your body text, and work upwards from there. In my examples below, I’m using 14 pixel font-size on a 22 pixel line-height, which means 22 pixels is my baseline. This definition has the consequence that all line-heights and the total height (including borders, padding and margin) of all elements must be a multiple of 22 pixels, like so:

01

h1 {

02	font-size: 40px;

03	line-height: 44px;

04	margin-bottom: 22px;

05

}

06

p {

07	font-size: 14px;

08	line-height: 22px;

09	margin-bottom: 22px;

10

}

Now defining our line-height and font-size in pixels is contentious at best, so in the name of scalability let’s convert them both to ems. Doing so makes the code a little harder to scan, but the math is fairly simple — just remember to recalculate the line-height if you change the font-size!

01

h1 {

02	font-size: 2.5em; /* = 40px/16px */

03	line-height: 1.1em; /* = 44px/40px */

04	margin-bottom: 22px;

05

}

06

p {

07	font-size: 0.875em; /* 16px is the default em size */

08	line-height: 1.5714285714285714em; /* = 22px/14px */

09	margin-bottom: 22px;

10

}

Note that I will invariably be referring to font-size and line-height in pixels throughout this article, as this will indicate more clearly the “physical” sizes and proportions in the examples given. All code, however, will stick to ems.
Utilizing a visible grid (many people use a background PNG or GIF, others use tools like Baseliner), we can put this to the test and monitor the alignment of all our styles as we go along. At this point, we may find that the lines of text don’t “sit” on the baseline, but rather float in between the gridlines. That’s nothing to worry about at this stage — we can simply offset our background image or add some arbitrary padding to the top of our body to fix it.

A visible grid can be very helpful during the design process.
So far so good, but our code is still extremely basic. What happens when we include more pizzazz — for example a top border — to our elements? Naturally, the numbers have to be adjusted to incorporate the height of the border to ensure that the total height of the object adds up to a multiple of the baseline.

1

h1 {

2	border-top: 3px;

3	padding-top: 22px;

4	margin-bottom: 19px; /* 22px-3px */

5

}

Note how the 3 pixel border-top and the 19 pixel margin-bottom adds up to our baseline of 22 pixels.

Using Sass or REM

Although it’s not exactly rocket science, getting the numbers to add up when working on complex websites can be a challenge, especially when using relative units. If you’re in a position to sacrifice the scalability of ems and stick to pixels, however, frameworks like Sass can take a some of the sting out of it. With Sass we can define the baseline as a variable ($baseline, in my example) and use simple equations to define multiples of this, making the whole process a lot simpler and the CSS much easier to scan. Should you want to change your baseline halfway through the process, you only have to do it one place. Although my example below concerns Sass, the same principle would apply when using rems — defining the baseline in one place makes it easier to implement across your code.

01	$baseline: 22px;

02

03

.box {

04	padding-top: 3px;

05	height: $baseline*15;

06

}

07

h1 {

08	font-size: 40px;

09	line-height: $baseline*2;

10	margin-bottom: $baseline;

11

}

12

p {

13	font-size: 16px;

14	line-height: $baseline;

15	margin-bottom: $baseline;

16

}

Using JavaScript for Images and Complex Layouts

Applying a baseline to a simple typographic layout is, well, rather simple. But we must also ensure other elements, including images, align to the grid. For containers, buttons, dividers, etc., this is a matter of restricting, by means of CSS, any unit to a multiple of the baseline. Images, on the other hand, rarely adhere to this restriction and are often served at a range of arbitrary heights, and in such cases a little bit of JavaScript can make our lives easier. I won’t go into the detail here, but both the jQuery plugin Baseline.js and this article on vertical rhythm by Matthew Wilcox are worth looking into. If you work on more complex layouts, you might want to check out FtColumnflow — a polyfill that “fixes the inadequacies of CSS column layouts.” It’s extensively used on the Financial Times Web app and may well be of use if you’re looking for something a bit more robust.
And that’s it for the basics. By making sure our line heights, paddings, margins, heights — everything — always add up to a multiple of our baseline, we can rest assured the integrity of our vertical rhythm remains unscathed. Simple, right?
Of course, you wouldn’t be reading this article if there wasn’t more to it…

The Bad: Improvising For Variety

The bad news is this. As much as designers thrive in restricted environments, sometimes a 22 pixel baseline can feel more like a frustrating barrier than a helpful constraint. For example, following the golden ratio, a paragraph body size of 16 pixels infers a paragraph header at around 26 pixels (though the below may apply to anything above 20 pixels, depending on the font). Keeping our baseline of 22 pixels, you may find that a single baseline is too tight a line height for comfortable reading, yet a double baseline (44 pixels) is too wide. Of course, arguably this only becomes a problem if the h2 runs onto two lines, and in theory one could get away with assuming the column width was big enough for that never to happen. Ahem. In theory.

h2 at an awkwardly small or large line-height.
If there was such a thing as snap-in-place, this wouldn’t be an issue, as we could simply choose not to apply our baseline to our h2 and watch in wonder as the the following paragraphs magically slotted back into place. But alas, no such sorcery is currently available and we’re forced to think pragmatically to come up with a solution.
At the start of this article I recommended defining your baseline from the line-height of your smallest text element, like the body text. As we’ve just seen, however, a fixed, minimum unit of 22 pixels (or whatever your body line-height may be) can make for awkward line heights for certain font sizes. But what if we were to halve our original baseline? Our body text would now technically have a line-height of two baselines, but that’s only semantics. In most cases, the resulting possibilities of variation and typographical freedom are worth it. Using the golden ratio to quickly define a few header sizes (rounded up or down to make our ems neater), we can easily see that a comfortable line-height is available at every increment: 16px/22px, 28px/33px, 40px/44px, etc.

01

h1 {

02	font-size: 2.5em;

03	line-height: 1.1em;

04	margin-bottom: 22px;

05

}

06

h2 {

07	font-size: 1.625em; /* 26px/16px */

08	line-height: 1.2692307692307692em; /* 33px/26px */

09	margin-bottom: 11px;

10

}

h1, h2, and p all aligning to the baseline grid.

The Ugly: Offsetting Type

Before I go any further, let me be the first to acknowledge that the following is completely experimental and some of you may even call it bad practice. If you’re willing to humor me, however, keep reading even as it gets ugly. Well, ugly from a “clean code” point of view. From a design point of view, it might get very pretty indeed.
Between the basics and a bit of pragmatic (but optional) improvisation to increase variety, we now have the knowledge and tools to improve the vertical rhythm of most layouts. But the baseline? Not quite. As mentioned before, the way CSS line-height is calculated means the characters are positioned roughly at the vertical center of the line height, rather than sitting neatly on the baseline of it with descenders protruding (like in InDesign or Quark). Many of you will rightly point out that this is what’s supposed to happen. This is how CSS line-height works, and there’s nothing we can do about it. That’s true. But our eyes don’t know CSS semantics. Our eyes are not trained to follow the x-axis center of characters when scanning lines of text — they’re trained to follow the baseline, the bottom of the characters, and when two adjacent lines are misaligned the readability suffers.
Take a look at the following example:

01

h1 {

02	font-size: 2.5em;

03	line-height: 1.1em;

04	margin-bottom: 22px;

05

}

06

h2 {

07	font-size: 1.625em; /* 26px/16px */

08	line-height: 1.2692307692307692em; /* 33px/26px */

09	margin-bottom: 11px;

10

}

11

p {

12	font-size: 0.875em;

13	line-height: 1.5714285714285714em;

14	margin-bottom: 11px;

15

}

16

p.intro {

17	font-size: 1.125em; /* 18px/16px */

18	line-height: 1.22222222em; /* 22px/16px */

19	margin-bottom: 22px;

20

}

Placed in adjacent columns, even thought the baseline has been applied correctly to the intro paragraph, the base of the letters won’t line up to those of the main paragraph because of the font’s calculated line-height position.

CSS line-height makes alignment across adjacent columns inaccurate.
Now this is where it gets ugly. In order to accurately align the base of all lines of text across all columns (which, of course, is one of the main points of having a baseline grid to start with), we have to offset the type manually. A simple way to do this is to add padding-top until the characters rest on the baseline and adjust the margin-bottom to reflect the offset.

01

h1 {

02	font-size: 2.5em;

03	line-height: 1.1em;

04	padding-top: Xpx; /* This requires trial and error, as X depends on your font and line-height */

05	margin-bottom: 22px-Xpx;

06

}

07

h2 {

08	font-size: 1.625em; /* 26px/16px */

09	line-height: 1.2692307692307692em; /* 33px/26px */

10	padding-top: Xpx;

11	margin-bottom: 11px-Xpx;

12

}

13

p {

14	font-size: 0.875em;

15	line-height: 1.5714285714285714em;

16	padding-top: Xpx;

17	margin-bottom: 11px-Xpx;

18

}

19

p.intro {

20	font-size: 1.125em; /* 18px */

21	line-height: 1.22222222em; /* 22px */

22	padding-top: Xpx;

23	margin-bottom: 11px-Xpx;

24

}

Messy? Perhaps. Tedious? Indeed. But very gratifying and wonderful at the same time. There’s nothing quite like turning on the baseline overlay on a complex layout to reveal the magic that is perfectly aligned typography.

All elements align across multiple columns.
Phew. If you’re still with me you’re probably either a masochist or have an unhealthy obsession with detail — either way I congratulate you, as your baseline is no doubt as solid as a brick outhouse.

Is It Worth It?

So there we have it. Basic CSS baseline is relatively easy and requires no more than a little math and organization to improve your layout. At the other end of the scale, we can manually adjust padding and margins to mimic the more sophisticated baseline of print design, a notion that will no doubt bring scowls to the faces of CSS purists. The real question, of course, is whether the visual benefits from manually offsetting type are worth it. In some cases, for example design-led campaigns and microsites, it could well be.
In others, particularly larger, more complex websites (your project managers will be scratching their heads wondering why it takes you so long to build the initial template) or collaborative projects with several developers working on the same code, well, it probably isn’t. Let’s face it — what we’re talking about in the most extreme examples not only adds manual labor, but also makes the code more intricate and harder to maintain. It will even affect the load time of your website if applied on a large enough project.
But consider this: just a few years ago, less-than-favorable techniques like “sliding doors” were advocated by industry leaders to hack attributes that CSS3 has now made commonplace. Were rounded corners really worth using two divs instead of one? Well, obviously, to some people they were — yet others may have considered them a waste of time, resulting in bad practice and semantically flawed code. But the point to take away is this: if no one experimented with such labor- and code-intensive techniques, we probably wouldn’t have native syntax for this technique today.
Experimentation, bad practice, hacks, ugly code — whatever we call it — has pushed, and continues to push, our syntax forward, reinventing the tools we will use to create and publish the next generation of online content. To echo Mark Boulton, “How cool would it be for CSS to be able to give you pain-free baseline grid?” Whatever your level of obsessiveness — whether your characters sit neatly upon their baselines or float in between them — vertical rhythm is always an important consideration, and following any of the approaches outlined in this article should result in a satisfactory baseline grid.
There will, of course, still be cases where the restrictions feel too impeding, and sometimes elements like captions, navigation or list items don’t seem to sit right in your predefined structure. In those cases, it’s worth remembering that a few compromises are not the end of the world. Some designers, including the eminent Khoi Vinh, argue that baseline is most important in the context of the main body of your content, and peripheral elements may break the baseline without breaking the layout.
Hopefully the understanding that there’s no right or wrong way of approaching baseline will incite further experimentation on your part, and I encourage anyone with a typographical affection to contribute to the ongoing process of making vertical rhythm an equal priority to horizontal grids in the future of Web design.
Good luck!

Resources

• Ordering disorder, Khoi Vinh
• Setting Type on the Web to a Baseline Grid, Wilson Miner
• The relevance of the baseline grid, Elliot Jay Stocks
• Baseline Framework
• More Perfect Typography, Tim Brown

Boost Your Mobile E-Commerce Sales With Mobile Design Patterns

People are increasingly using their smartphones as a replacement for desktop computers, even for activities such as shopping and purchasing. And as more people move away from the desktop and onto mobile-optimized websites to shop for products and services, website creators can use established design patterns to help kickstart a mobile e-commerce project.


Having a good mobile e-commerce experience matters a lot. In fact, recent research has found that people are 67% more likely to make a purchase if a website they’ve reached on their phone is smartphone-friendly.
The power of design patterns is that they show you how other designers have solved similar problems so that you are not always reinventing the wheel. They also enable you to design your website in a way that meets the expectations that people develop from the other websites they’ve used, and they encourage you to consider design approaches that you would not have thought of on your own.
In this article, which focuses on smartphones, not tablets, we’ll look at design patterns and approaches used for mobile e-commerce functionality, including the following:

• Home pages,
• Site-wide navigation,
• Suggested search,
• Search results,
• Search filtering and sorting,
• Product pages,
• Photo galleries,
• Shopping carts,
• Checking out with an account or as a guest,
• Forms.

All the examples in this article are drawn from mobile websites that run in smartphone browsers. Most are taken from large multi-department retailers because they have large product catalogs that require a thoughtful approach to features such as search and filtering and sorting of search results. There are also countless native apps for e-commerce, and many of these patterns can be applied to them as well.

Home Pages

When visited on mobile devices, home pages are often less about content and more about helping users find what they are looking for. Common patterns are simple single-column layouts for promotions and single-column lists of links to featured website areas or product categories. Keyword search is commonly included on home pages, as are links to store locators and registration forms for promotional emails and loyalty programs.

Amazon and Macy’s both use a mix of promotional elements and list menus.

Target’s promotional content takes up more screen space than a simple list but makes a stronger visual impact. Threadless uses a dashboard pattern, which is more common in native apps than on e-commerce websites on mobile.
If shoppers are coming to your website to compare prices quickly, then a simple list pattern and search function are probably more desirable. If they are coming to explore promotions and sales, then the approach taken by Target may be more appropriate. To answer these questions, you’ll need to mine your analytics to get an idea of what consumers are doing on your website.

Site-Wide Navigation

Beyond using the home page as the main navigational hub, many websites also have navigation menus on most of their pages, usually in the header. This enables shoppers to easily get from one part of the website to another without having to return to the home page.

Lowe’s site-wide menu has icons for each option. Best Buy’s menu has a two-column layout for navigation and has buttons instead of list items. Lowe’s menu covers the page when it appears, while Best Buy’s pushes the page’s content down the screen.

Macy’s has a site-wide menu that contains submenu options. CVS has a two-column menu with an icon for each option. In both cases, the menu is displayed at the top of the page.
As you can see from the screenshots above, there are several ways to design a site-wide menu. Lowe’s design is simple, and the icons add a nice bit of visual polish. The fact that the rest of the page fades into the background when the user chooses to use the navigation helps users focus on their current tasks. CVS seems cluttered in comparison, with two columns of options, each item accompanied by an icon. CVS’ menu also places a lot of tap targets close to each other, which can present usability problems on touchscreens.
It’s interesting that large e-commerce websites usually don’t have many navigation options displayed at once. They try to balance the visual design of the navigation with the information architecture of your website, carefully considering the number of items that should be in the global navigation. Use website analytics to see which menu options shoppers click to help you determine what should be in the menu. Conducting A/B testing and usability tests of different designs to see whether one has too many options and overwhelms people is not just recommended but necessary to find the optimal solution — for your business and for your users.

Suggested Search

Suggested search, also known as type-ahead or autocomplete, displays potential results as soon as a shopper has typed in a few characters. For commonly searched terms, this can be a real convenience to shoppers, especially if the search term is long. One limitation of suggested search is that tapping a wrong character on a virtual keyboard is easy, which would change the suggested results. Showing common “correct” results instead might be useful. Also, consider using an improved Auto-Suggest pattern to reduce the amount of typing needed to enter queries, and utilizes slower mobile bandwidth in the most efficient manner.

Typing “d-r-a-f” into the search box on Office Depot’s website brings several possible results. And mistyping “d-r-a-g” instead of “d-r-a-f” leads to unexpected results for someone who is trying to find drafting supplies. Tapping a letter adjacent to the intended one is a common problem on virtual keyboards.
While designers can’t do anything about people mistyping queries, they can ensure there are other ways to get to product pages from mistyped results, such as drill-down lists for product categories or a site-wide menu of top-level categories. Website managers can also fine-tune their search functionality by suggesting results for “draft” from queries typed as “dragt.” Your ability to do this will depend on the search engine technology you are using.

Search Results

Two primary patterns are used for search results on mobile e-commerce websites: table display and grid display. Tables show a thumbnail photo and some basic information such as product name and price in a compact row. Grids show larger images with less descriptive information. Some websites allow shoppers to switch between the two views.

Zappos shows its search results in a grid to allow for larger photos of its products, a sensible choice in a market like shoe sales. Walgreens has a table that includes buttons for finding item in stores and adding items to a shopping cart.

OfficeMax asks shoppers to select a subcategory for broad search terms like “Paper.” Once a subcategory has been selected, results are displayed as a table. Searches for terms like “Scissors,” which have fewer subcategories, takes shoppers directly to the table view of the results.
Having shoppers select a subcategory can be problematic if it’s not clear where a product fits in a complicated hierarchy. In the OfficeMax example above, someone looking for 8.5 × 11-inch paper for their home printer might not know whether to look in “Copy & multipurpose paper” or “Laser paper.” A better approach might be to list subcategories under search filters, where they can be presented in context with other filters, like “color” and “size.” Regular testing (every 4–6 weeks) with representative users and commonly searched-for terms and top-selling products could give you insight into which approach is better. A/B testing could also reveal whether one approach gets more people to a product page and leads to a higher conversion rate.

Visitors to Gap’s website see a table display by default, with the option to see a grid display. Notice that Gap also retains the search term in the keyword field.
Gap lets shoppers choose how to view search results, allowing them to switch from an easy-to-scan list to a view with larger photos. Gap could have retained some product information though — e.g. prices — in its grid display (as Zappo’s does). Details such as price and color make it easier for a shopper to determine which product they want to learn more about.
Retaining the term in the field also reminds shoppers what they searched for and lets them easily narrow the results by adding another word (like “red”) to the search term.
Searching Gap for “men’s tshirts” takes shoppers to a page with no results (not shown), and without linking to search results for “men’s t-shirts.” Gap could improve its search by adding a “Did you mean?”-type question to the results page. Google handles this scenario by listing “mens t shirts” as a suggested query and then presenting results for “men’s t-shirts” if that suggestion is ignored.

Sorting Results

Sorting results helps shoppers organize a large set of results along a continuum of values, usually numerical ones such as price and consumer rating. Common interface patterns for sorting are buttons and <select> menus.

Walmart lets shoppers select one of three buttons to sort results. Sears uses a similar approach, but with a “segmented control”. JavaScript frameworks such as jQuery Mobile are making these app-like interface widgets more readily available to designers.

J.C. Penney allows for sorting through a <select> menu that is slightly customized in style, while Eddie Bauer uses the browser’s default <select> menu. Both trigger the browser’s native control for <select> menus (in these examples, the iPhone picker).
The size and generous spacing between Walmart’s buttons make for better tap targets; although, to be fair, Walmart has only three options, while Sears has four. Sears’ inclusion of an “All” button allows shoppers to get back to the original results page if they don’t find what they want after having sorted. Using a <select> menu is a quite safe choice because it is supported by modern mobile browsers and allows for longer lists of sorting options. However, it also takes a lot of valuable space. These are the types of design trade-offs that can be evaluated with regular testing.

Filtering Results

Filters enable shoppers to narrow their results based on one or more attributes, like color, brand and size. Filters are usually organized by type (called facets), with several values appearing under each facet (for example, color is a facet, and red is a facet value). Common interface patterns for displaying filtering options are <select> menus, drop-down lists and accordion displays. Filtering can be applied when one or more values are selected from within a facet. While allowing a single search to include values from more than one facet is technically possible, it comes with a higher interaction cost and could lead to no results (for example, cross-training athletic shoes that cost less than $75).

CVS uses <select> menus in its “Refine” tab for filtering. Selecting a menu option will immediately filter the results. J.C. Penney offers a drop-down list for selecting filters and indicates the number of products that match a filter value. J.C. Penney also allows multiple values from a single facet to be selected on one screen, the trade-off being that the shopper has to tap the “Apply” button.

Kohl’s uses an accordion to expose a set of checkboxes for each filter type. Threadless exposes the values for all of its search facets as buttons. On both websites, selecting a single filter value will immediately filter the results.
Showing the number of items available under each facet value offers greater transparency into what shoppers will get with each selection. Threadless’ approach of showing all available facet values takes up the entire screen, but it offers consumers an at-a-glance view of all filtering choices available to them. Whether you take this approach or use an accordion like Kohl’s will likely depend on how many facet values are present for a given category of products. If your catalog has a high degree of variability in the number of facet values for each category, then you will need to experiment to find the right design. You could optimize the filtering interface for those product categories for which shoppers use filters the most.

Product Pages

Product pages are where e-commerce websites really showcase their products in detail. They are not a “pattern” in the true sense of the word, but rather a collection of patterns that include elements such as tabs, accordions and photo galleries. Two common approaches to product pages are one long page with all of a product’s information or a page with tabs or accordions to allow for progressive disclosure of information as shoppers need it.

Samsung and Dell progressively disclose content on their product pages, which have a lot of information for shoppers. Samsung uses accordions to expose chunks of information, while Dell uses tabs.

Cabela’s and Office Depot both use a single long page to display product information. This approach requires more swiping up and down to get to information, but it frees shoppers from having to work with small tabs or manipulate accordion headers. Your choice will depend on the amount of information associated with a product and how the information can be broken down into logical sections.
Long product pages require more scrolling than pages broken into manageable chunks with tabs or accordions. They also require shoppers to put more effort into finding the specific information they are seeking. In my own usability testing, I’ve heard people express preferences for both approaches, but they seem to have an easier time working with a page broken into logical chunks. If you take this approach, make sure any content not initially displayed renders quickly when the shopper taps on the tab or accordion.
The obvious way to accomplish this is to load all of the page’s content at once so that the hidden content appears almost instantly. This approach has an advantage for when the user’s network connection drops while they are switching between sections. The big downside is that all product information has to be downloaded, whether it is actually viewed or not; this adds more load to your servers and uses more of the shopper’s data plan, which could be metered.

Photo Galleries

Photo galleries are particularly critical in e-commerce industries such as apparel and consumer electronics. You might not need to see a wrench from three different angles when shopping at Home Depot, but more images are better when looking for clothes, shoes or a high-end smartphone or tablet. A few commonly used patterns are the swipeable gallery, “double-tap to zoom”, and thumbnails for selecting photos.

Payless uses a swipeable gallery to show its products from different angles. Users can also double-tap to zoom in to see details like stitching and eyelets.
Payless wisely keeps its “Tap tap to zoom” call-out on the screen for several seconds, giving the shopper time to understand how to navigate the page and still notice it. The ability to zoom in to a photo to view a product’s details is critical for apparel and shoes.

Dockers (above left) has a swipeable photo gallery, with double-tap to zoom in to details, and shoppers can see a product in different colors. Levi’s (above right) takes a similar approach, with the addition of thumbnails to indicate the photo angles in the gallery. Selecting a new color on Dockers’ website causes a full-page refresh, while Levi’s does not.
Levi’s keeps most of the page from refreshing when the shopper changes colors, which at first seems like a better user experience. But, from a brief review of both websites on the same date and at the same time of day, Dockers’ full-page refreshes appeared to run faster from the time I tapped a color swatch to the moment the page with the new photo appeared. Levi’s slowness could have been caused by the five thumbnails needing to be refreshed, in addition to the main photo, or other unseen factors, such as a heavy traffic load. Each approach has its trade-offs.

Samsung (above left) and Dell (above right) both use swipeable photo galleries for their products. Samsung incorporates the gallery into an accordion on its product page, while Dell uses a separate page.
Samsung’s approach seems more user-friendly because it has fewer pages to navigate. Both Samsung and Dell go with large high-resolution photos, because apparently image quality is critical when looking at expensive products. One advantage to Dell’s approach is that it allows shoppers to focus on the photos themselves without any distracting page content.

Shopping Carts

Shopping carts usually display products using a table pattern. Besides displaying the contents to be purchased, they also offer additional functionality, such as the ability to save an order, to save a product to a favorites or wish list, to remove products or update quantities, to choose shipping or in-store pickup, to apply promotional or coupon codes, and to check out. Once a product has been added, a shopping cart is commonly reached through an icon in the website’s header or an option in the global navigation menu.

Each table row in the Lowe’s shopping cart (above left) lets the user remove the corresponding product from their cart, and it includes options for shipping or in-store pickup. Bed Bath & Beyond (above right) also allows items to be removed; product quantities may be changed for each item in the table, and a single button farther down updates the page.

Crate & Barrel (above left) has table rows that allow users to remove products, save to favorites and update quantities. Each row also includes shipping information such as cost and delivery time. Payless (above right) also allows consumers to update quantities and remove items; its cart also offers a choice of delivery options, including having the product sent to a Payless store (not shown).
Shopping carts should provide maximum utility because shoppers are close to the final point of purchase. Allowing shoppers to change quantities, remove items and apply promotional or coupon codes without having to go to another page is critical to getting them through the purchasing funnel quickly. If you feel this adds too much content to the page, you can use progressive disclosure to hide some content (such as promo code fields) behind accordions until it is needed.

Checkout

Checkout is more of a process than a pattern, although form patterns can be applied to checkout flows. Many e-commerce websites allow customers who use their websites on mobile to check out with an existing account or as a guest. For people who already have an account, the checkout process is greatly streamlined by using existing payment and shipping information.

Crutchfield and Nordstrom both allow customers to check out as guests or by using their existing account. Both allow mobile shoppers who have checked out as guests to create an account after placing their order, and both support password resetting.

Amazon asks for an email address on the first page of the checkout, whether the shopper has an account or is checking out as a guest. The experience is very much the same like for users of the website on desktop. Target offers options on the mobile website to sign in with an account, to check out as a guest or to create an account. Both support password resetting.
Allowing customers to either sign in or check out as a guest and to reset their password is a must for mobile e-commerce websites. Also, consider inviting shoppers to create an account on their phone after placing their order, because they have already given you enough information (except for a password) to do so. This could make guests more likely to create an account because the effort should be minimal at this point.
The “Create a Target.com account” button could lead to some abandoned carts if shoppers go down that path and decide it’s too much effort. Confirming the order first and then inviting registration on the invoice page might be better. Limiting the initial checkout screen to two choices could improve conversions because the shopper will have fewer decisions to make while working on a small screen. Fewer choices in critical tasks such as check out usually works better.

Forms

Forms are most commonly used in mobile e-commerce for searching, checking out, registering, and entering coupon and promotional codes. Be aware of a few good practices when designing forms for the small screen:

• Place form labels above input fields so that they don’t shift off screen when the user zooms into the input.
• Use HTML5 input types to display the appropriate keyboard for the field being used. For email addresses, use type="email". For numeric fields, like ZIP codes, use type="number" or type="tel" (the latter will display a numeric keypad with larger buttons).
• Make fields mandatory only when absolutely necessary. This will reduce friction in getting customers through the checkout process.

The best way to handle forms on a smartphone is to use as few of them as possible. You can use geo-location to suggest the shopper’s ZIP code, and you can allow customers to check out using the account information they entered earlier when using your site. Remember that the best form is the one the shopper never has to complete.

CVS (above left) doesn’t bring up a numeric keyboard when the user taps the ZIP code field on the checkout page. This requires one unnecessary tap from the shopper to get the correct keyboard. CVS also aligns labels to the left of form fields, where they could get pushed off screen if the user zooms into a field. Crate & Barrel (above right) has a much more mobile-friendly form. It brings up the large numeric keypad when someone taps the ZIP code field. It also top-aligns form labels so that they don’t slide off the page.
Remember that forms are how shoppers complete their transactions on websites. Pay special attention to them, and do everything you can to reduce the interaction cost of completing them. Sometimes it might even mean trying out something entirely different. For example, Typeform recently suggested a new kind of experience for more responsive, simple and user-friendly Web forms. The idea is to ask just one question at a time, but display it prominently, allowing users to type the hotkeys when filling in the form. This is not the option that would work in every situation, but for some forms it might be quite helpful.

Conclusion

With the increasing importance of mobile e-commerce as a source of revenue to retailers, mobile-optimized websites are offering many of the features that shoppers want and expect based on their desktop shopping experiences. And as the research by Sterling Brands and SmithGeiger shows, mobile consumers are more willing to purchase when the website is mobile-friendly.
By using existing design patterns, you can begin to explore different options to more quickly get your e-commerce website ready for the small screen. But don’t stop with existing patterns; use them as a jumping-off point to explore a design and to help you consider options you might not have thought of. And as browser capabilities increase, consider bringing interface design and interaction patterns from native apps into your browser-based smartphone shopping experience.

Resources

• “UI Patterns for iOS, Android and More,” Theresa Neil, Mobile Design Pattern Gallery
• Designing Mobile Interfaces: Patterns for Interaction Design, Steven Hoober and Eric Berkman
• “Design Patterns for Mobile Faceted Search: Part 1,” Greg Nudelman, UX Matters
• “Design Patterns for Mobile Faceted Search: Part 2,” Greg Nudelman, UX Matters
• Search Patterns: Design for Discovery, Peter Morville and Jeffery Callender
• “Better Mobile Form Design,” Luke Wroblewski
• “A Form of Madness,” Mark Pilgrim, Dive Into HTML5