A/B Testing

AB Testing Image

User Experience consultant Paul Bryan made a guest appearance and gave an informative lecture this past week in our Web Design course. He touched on topics that ranged from metrics, analytics, personas, usability testing and how they can all be used to refine the experience of a website from the end-user perspective.

Paul also covered a topic that intersected with some of the material found in theWed Design for ROI book used in our course. I think we can all agree that as more people from around the world gain access to the internet, what may work now may not work in the months or years to come. Not only do we have a broader audience in terms of geographical location, but also in terms of the age demographic. Older generations are becoming adept at web surfing and it seems that children who are jumping on the interwebs are getting younger by the day. So what happens when there is this paradigm shift audience expectations?

One solution is to utilizeA/B testing. Usually tested on landing pages, we can compare the performance of one web page solution versus another. By varying the copy text, colors, images, and layout, we can determine which altered elements elicits a higher conversion rate.
AB Testing Diagram

In order for the test results to offer any conclusive definition, certain conditions have to be met for the data collected to be considered valid. Each page should receive an equal amount of visitors in a large enough to be considered statistically significant. The testing should be done during the same timeframe during the same days of the week so that you’re essentially selecting from the same demographic pool. And finally, both pages should be identical in content.

Running one A/B test isn’t going to make your site infinitely better. It would be wise to refine elements in the winner of the first round and continue to conduct A/B tests through iterations. Through each round, you’ll be able to identify certain elements, descriptions, colors, placements, and images that work better in certain combinations. This is not only important to capture the target demographic at the time, but it’s also important to be able to change and adapt to the market as taste changes.


Modernizr: A Modern Solution for Modern Times

Modernizr Logo

HTML5 and CSS3 are constantly touted as the greatest thing since sliced bread. I’ve had sliced bread and it’s pretty great. It’s also hard to compare sliced bread to something that hasn’t really materialized yet. HTML5 has been a work in progress for years and will continue to be so for the next couple of years. Because various features of HTML5 have been adopted by various browsers in various parts(link), web developers continue to have a difficult time creating a one-size-fits-all website.

What Modernizr aims to do is assist you in detecting emerging web technologies (HTML5 & CSS3) so that you can take advantage of them while supporting alternatives in cases where they don’t. Modernizr accomplishes this by running a features detection test in the browser. The values returned are contained within a Modernizr object that indicates if a certain feature is supported or not. You can then target specific functionalities by editing the HTML elements in the style sheet.

Click the link for a list of features that Modernizr tests for.

While Modernizr doesn’t solve the one-size-fits-all website conundrum, it does alleviate some of the work in determining which browsers support what features of HTML5 and CSS3. Any tool that can make a web developer’s life any easier is greatly appreciated. Until HTML5 reaches its final specification and all browsers have implemented its features, we can all go to bed knowing there’s still much work to be done.

Web Usability

Web Usability Image
Web usability can sometimes get confused with web accessibility. What is web usability? How is it different than web accessibility? They both cover much of the same material. What distinguishes one from the other is that accessibility focuses on the impact of disabled users whereas usability focuses on the impact of every user.

The focus of web usability is making the website as simple to use as possible. Simple may be an understatement. When you have content that can fill 1000 pages, how do you display all that information simply, to the user? Lets take a bird’s-eye view from the user perspective. After all, it’s the user you’re trying to please, and if you don’t please them, they’ve already moved onto the next site.

These lessons come from Steve Krug’s Don’t Make Me Think! A Common Sense Approach to Web Usability and provide an insightful high level view of what users are looking for. Because we all surf the interwebs, none of these should come as any surprise to anyone of us.

Web surfers are a different type of beast. Don’t make them think. Provide clear labels and useful navigation links. Unless they are just out cruising, they are looking specifically for something. Don’t waste their time. They want to get in and get out as fast as possible. The information should be provided in an uncluttered format that is skimmable and searchable. Provide a search function. They want to be able to find what they’re looking for without having to give up their right arm to do it. Provide a Home button. They will eventually get lost or they may want to start from the beginning again. Providing a home button gives them a clean slate in case they wanted to try another route.

We may take all these things for granted because they have become ubiquitous with most sites but it can be just as easy to forget about them as we are designing our own sites. Among all the standards and technology that create the backbone of our websites, it’s just as important to put on a good show for our guests. They don’t need to know or necessarily care what makes our sites run, they only care that our site provides a pleasurable experience during the time they spend visiting.

Wroblewski’s Web Wanderings

Yahoo Google Banner
There are crazy ideas every day. It’s the crazy people who actually put their money where their mouth is that change the world forever. Remember Google Instant that was released onto the world in September of 2010? Yahoo had already toyed with the idea since 2005! Luke Wroblewski recently did an interview and was able to provide some insight on the project. Though the interview covers a variety of topics, I wanted to focus on one particular subject.

Think back to 2005…when the world was a safer place. There was no Twitter and Facebook was but a newborn. When you wanted to search, you typed in your search query and hit the ‘submit’ or ‘search’ button. The search algorithm worked furiously in the background and then spit the results back at you. It was a procedural function, you did your part and waited for the internet to do its part. The cycle continued until you were satisfied with the answers or just gave up completely because you weren’t getting the results you were looking for.

In 2005, Luke was part of Yahoo’s search team and although he wasn’t directly working on that project, he was there first hand when it was being tested. Imagine the amazement on people’s faces when they started typing their search query and getting real-time matches even before they finished typing. It was like the search engine knew what you were looking for before you did. Sadly, this project was never released on Yahoo’s site because of the load that was put on the servers. It was relegated to the corners of www.alltheweb.com.

But how useful is this predictive search feature? Go ahead and give it a shot. Try something out of the ordinary and cryptic. Bet you Instant won’t be able to guess your question. You could probably surmise that Google, with its extensive collection of search queries, would try and populate the most popular searches with the most key words matching your own. It really doesn’t get it right (if ever) until the very end of your sentence, by that time, you’ve pretty much typed out what you would have normally typed anyway. And to add on top of that, there is no context to the search. I may ask, “where can I buy a white telephone?” The results won’t display a list of retail shops with white telephones, it will a give me a list of links containing the keywords, “buy, white, telephone.” This may be in the general vicinity, but it’s really not what I’m looking for and therefore, makes it useless to me. Until the interwebs has a semantic search engine, all we’ll ever get are keyword searches.

Designing for Web Accessibility

Wheelchair Computer Monitor

The web should be accessible to everyone. This was one of the founding principles envisioned by Tim Berners-Lee, father of the World Wide Web. Being accessible means providing as much accessibility to as many people as possible. There are 4 key areas of concerns:

I. Visual Impairment
Colorblind Example
Visual impairments can range from color blindness to reduced vision. Your website and its myriad of colors could be reduced to a greyscale composite to a colorblind person. Others may only see a blurred vision of the site or maybe just parts of a site at a time. Various conditions that can lead to reduced vision include cataracts, glaucoma, retinitis pigmentosa, age-related macular degeneration, and diabetic retinopathy.

By choosing color schemes that have a high contrast between the background and foreground, we can increase the odds of readability. Allowing adjustments to the text size can also guarantee the text is easy to read. It should also be taken into consideration the various types and probabilities of the various degrees of color blindness so that we make the most optimal choices.

II. Mobility or Dexterity Impairment
Mobility and dexterity impairment includes any physical incapabilities that prevents someone from using a computer. These can include someone who may only have use of one hand, who has limited range of movements in their arms, or who may have trouble with their fine motor skills. All of which can make controlling a computer through various input devices (mouse’s, switch, pen) an arduous task.

One approach is to provide full functionality through the keyboard. That is to say any peripheral input device must have a corresponding input method through the keyboard. And because of these impairments, it may take a user more time to read and react to the content so it is advisable to use well-structured pages. Pages that provide a visual cues of where it sits in relation to other content on the site. Easily read links and navigation buttons also aid in visual direction.

III. Auditory Impairment
Auditory impairments affect those who are deaf or have limited hearing capabilities. We see closed captioning offered on television programming, can we say we see the same for all the rich media that’s found on the interwebs these days?

One measure in assisting the auditory impaired is by enhancing audio/video sounds to higher levels than that of the background sounds so that they can be easily heard. Other methods include providing text alternatives for any non-text content. This can include closed captioning for videos or transcripts for podcasts.

IV. Cognitive Impairment
Cognitive impairment refers to anything that impacts the brain’s normal functionality. Examples include autism, down syndrome, and dyslexia. Rather than trying to create a solution for each diagnosis, it is better if we direct our attention to the specific abilities that are affected instead.

One of the most important aspect of web design is making sure what the user sees is readable and understandable. Also making sure that the website operates in predictable ways and prevents the user from creating errors whenever possible. Setting expectations for the user and keeping design elements simple is the best way to avoid clutter while also keeping the focus on the task at hand.

Because we cannot anticipate every possible disability, we should strive for an approach that would minimize the opportunities and impact for accessibility issues. The Web Content Accessibility Guidelines set forth by the World Wide Web Consortium (W3C) is a set of principles designed specifically with accessibility in mind. By following these guidelines and adopting their practices, we can be confident in creating accessible web solutions.

Weave a Web of Colors

Image of Various Website Colors
The use of color on a website can be just as important as the content itself. For the artistically challenged, choosing a pleasing palette of colors can be a nightmare. Selecting an aesthetic combination of colors is only one of many factors involved when deciding on the color palette of the website.

Some questions to think about before deciding on a color schema:

  • Does the site represent a brand?
  • Who is the intended audience?
  • What is the message or product?
  • If the website represents a company that has an established brand, the color choice becomes easier at this point. Companies pour money into marketing research to create their brands and logos. A company like Best Buy with its signature “Best Buy” tag would be more apt to use blue and yellow incorporated into its website to further re-emphasize its brand of colors.
    Best Buy Logo

    Colors can mean different things to different people. White, for instance, may portray purity here in the states, but in China, it symbolizes death. The intended age demographic can also play a part in color choices. Younger audiences tend to gravitate towards more vibrant and saturated colors where the older generation may find those colors to be bold, garish, and sometimes offensive. A great amount of care must be given to the color choices if the website is to reach a generation-less and borderless audience. Below is an example of a gender and age specific site.
    Image of Gurl.com website

    You must also be cognizant of what you’re trying to sell or portray. Certain color palettes have certain associations. Warm colors like red and orange are associated with warmth, the sun, and spice that would work well for resorts, vacation hotspots or Indian restaurants. Cool colors like blue and green and run the gamut of sustainability, outdoor products, and green technologies. If you were a chocolatier, then you would likely choose brown, white and cream as the primary colors of your site.
    Variety of chocolate

    Keep in mind that there must be a color balance. Too many colors will make the website appear too busy but too few colors and the website will be seen as boring and plain. The use of saturation, tint and shade and add dimension to the website without adding more colors to the palette. The use of color mixed with the content of the site should work in unison, to communicate the vision of the product or company. If it doesn’t, then the site has failed its primary goal.

    What Web Standards

    Web Browser
    Some say we are entering into the golden age of the interwebs. Others say we are in a world of constant flux with the interwebs. Those two statements do not necessarily have to be two opposing viewpoints. The interwebs are an ever evolving world of technology, and as such, we may be forever entering into the golden age because the interwebs keeps getting better and better. The next iteration of HTML, HTML5, will usher in a new era of web standards…hopefully.

    The interwebs are currently in a hybrid phase of sorts. On the one hand, HTML4 & CSS are implemented and supported by modern browsers. On the other hand, HTML5 & CSS3 are currently being fine tuned and are being semi-supported in browsers today. With each browser supporting differently functionalities of various HTML5 components, trying to stay atop the most current adoptions can be a daunting task for any web developer.

    Why are web standards important? By adopting uniform standards, we can dissolve the minute nuances each browser currently carriers. This would eliminate the need to develop browser specific code and save countless man hours. HTML5 aims to bring this vision to the masses. With the addition of new elements, attributes, and form controls, HTML5 hopes to bring more uniform functionality without the need of 3rd party proprietary plugins. Wouldn’t it be a joy to be able to consume all types of media without having the need to “update to the latest plug-in”?

    There is an implementation for a canvas that allows scriptable and dynamic 2d image rendering. The ability to drag and drop objects within the browser and having better web storage capabilities are other advancements in HTML5. In a world with so much connectivity, our smartphones are now one step ahead of our computers with geolocation. Why is it when I search for a destination on my smartphone, it knows where I am and gives me directions on where I want to go immediately. What happens if I am on a PC in a coffee shop and need directions? I then need to supply a starting location, which if I’m unfamiliar with the area, would require me to search for my current location as well. That’s twice the work. With the new geolocation API, our browsers would be able to determine our location.

    By developing a universal web standard, we can do away with the incongruencies inherent in the current crop of web browsers. Eliminating the need for 3rd party plug-ins and increasing the functionality of web browsers will empower web developers to generate more creative and dynamic content with the ability to behave more like desktop applications. HTML5 coupled with CSS3, which includes transitions, animations, and image effects, can provide a much more rich environment in a more simplified and standard approach.