Category: User Experience

Exponential increases in computer storage, processing power, graphics, networks, the web and now, the cloud, are stimulating changes at the interface level, too. The future of UI design is becoming less and less machine dependent, and more aligned with the body and the mind.

Minority Report science adviser and inventor John Underkoffler calls the future of UI design “the spatial operating environment.” Your hand replaces the mouse. The display is the room. Navigation in 3D, and so on.

Underkoffler demonstrates the future of the computer interface. Is this how tomorrow’s computers will be controlled? Take a look.

These advances in technology reflect design integrated with people and peoples’ needs. And this goes way beyond ergonomics, and fitting humans; rather, these advances help make the machine disappear.

We, as marketers, intent on selling goods and services on behalf of our clients, must consider this future. Will the OS as envisioned by Underkoffler be delivered with computers in just 5 years, and into consumers’ hands? Imagine the product demonstrations, interactions of whatever ‘social media’ will be called in this space, and other experiential marketing techniques to come. The biggest casualty may be the physical store. The biggest opportunity may be where the intersection of consumer behavioral data, and digital and direct marketing converge. Think about it.

Often as web developers and designers we forget that we are not a typical web browsing laymen. Even though we’ve created the handy, stunningly good looking help section on a site, a user shouldn’t have to use it. By simply observing a few users in the beginning of a project we can find countless ways to improve a site’s functionality and ease of use.

Recently one of our clients asked us to conduct usability studies to ensure that our wireframe and creative directions would be enticing and functional for their website’s users. Below is a brief summary of the two processes we conducted: focus groups and user testing.

Focus Groups

Website focus groups are critical in understanding how a site is used by a target audience and how a site’s conversion rate can be improved. By conducting focus groups on various design directions we were able to determine what our users would think and feel when they visit our redesigned site. We were able to compile feedback that can then be used to enhance the site’s user experience, increasing the site’s overall appeal and functionality and ultimately drawing in new users.

A website focus group study begins by outlining specific goals. For example, one of the goals of the focus groups may be to determine what appeals more to the target audience: images of people using a given product or just the product itself. Another goal may be to determine the response to a given page structure: Are users able to easily locate the site’s main navigation? Does the primary promo space engage the user or is another portion of the page grabbing their attention?

One of the most crucial aspects of a focus group is the selection of the participants. At this point the client has revealed the site’s target audience: age spread, demographics, etc. The number of participants for each session is intentionally kept relatively small to encourage open discussion and to promote a comfortable environment.

To ensure the conversations remain on topic a moderator is present during the entire process. Using a Moderator’s Guide, we balance the encouragement of free discussion with the underlying focus of the meeting – the outlined goals. Balancing the use of the script and free-form discussions the moderator guarantees the information received is kept relevant. Others involved in the focus group process observe the study, including note-taking and digital video and audio recording of the session.

Depending on the goal of the focus group, we are able to gather opinions about the site, including information on the site’s usage or what the participants need in order to use the site more efficiently. This information adds to the understanding of the site’s target audience, helps plan the site’s strategy, and helps to identify any areas for improvement.

User Testing

In addition to our focus groups our team conducted usability testing on key areas of functionality using a protoype. Our userbility testing involved interviewing individuals who were representative of the target audience and leading them through a series of predefined scenarios. By asking them to accomplish specific, representative tasks to determine ease of use and recommend improvements, we gathered first-hand information about how users would behave and their opinions towards each workflow.

The advantage of user testing is you learn what the target audience can and can’t accomplish, understand why users are having trouble, how to correct it, and receive direct feedback. The disadvantages are obvious: it can be more expensive to test individuals, especially when you’re dealing with multiple user types and a large number of test participants. In addition to a testing facility and moderator costs, there are also costs to recruit and compensate test participants.

Determining whether a website is compelling is the ultimate goal in user testing. During our most recent user testing session we used a variation of MultivariateTesting. This allowed us to use several variations of product pages to test the users understanding and usage of each variant.

The beauty of Multivariate Testing is that it offers the ability to isolate and assess the performance of virtually every element of a web site, landing page, or application. From page layout, to headline text, to complete color palette variations, Multivariate Testing can be highly effective in identifying what works and what doesn’t from a user’s perspective.

With our focus groups and user testing complete, we created a consolidated feedback document to pass on to the client. With recommendations in hand we allowed to client to form their own opinion of what may need to be changed and we go from there. Though the process can be extensive and tedious the results are worth it. Within one week we were able to make our site that much more user friendly and attractive to new customers.

The best way to develop an excellent customer experience is to use input from actual customers.  Conducting usability research will allow you to explore and/or validate design options and focus on knowledge that enables you to meet the needs of users/customers.

So, let’s say that you would like SolutionSet to perform usability research on your behalf, but how does it work and how can you get the most out of observing each session?

Typical usability research methodology

Unlike focus groups, usability research is typically a one-on-one sessions, set up to gather users’ natural reactions, without outside influence. A trained moderator will spend the duration of the session in the room with the participant and observers watch the study from a separate area. There are many logistical options for observation rooms and recording technologies. It really depends on your research objectives and budget. Learn more about budget usability options from a previous blog post.

Participants will be asked to complete tasks with the website or prototype that we would like all users in the real world to be able to accomplish without difficulty. The participants will be assured that the website is the center of attention and that they themselves are not being tested in any way. They will also be encouraged to think out aloud to facilitate the recording of their thoughts, expectations, and reactions to the pages.

Getting the most out of observation

Users often express opinions that do not coincide with our expectations. Study participants sometimes are confused about your company’s offerings, have difficulty completing tasks, or they criticize the appearance of a page. These reactions can be the most important data we collect! It is better to gather an unscathed and fully honest assessment of our work now than to release products into the public where the same confusion may occur.

Observing can be a mentally taxing exercise, especially for those who attend all the day’s sessions. Please maintain focus, keep conversations to a minimum, and take notes you would like to share with the group during the debriefing.

What to observe

Every signal the participant gives counts! Hand gestures, body language, facial expressions, and pauses in speech all count in addition to what the participant explicitly says and does. These tacit signals sometimes signify areas of improvement we will be able to act on.

Make note of similarities in participants’ feedback, for example when multiple participants are experiencing the same pitfalls or expressing similar criticisms. These commonalities typically identify the most obvious areas for optimization.

Record questions – both for the participant and to the group – that arise in your mind during the session. Near the end of a session, time permitting, the moderator will enter the observation room to gather questions for the participant during the wrap-up portion.

Debriefing

The purpose of the debriefing is to come to a mutual understanding of what occurred during the session. We would like to discuss and identify what you found to be really impactful and help us prioritize findings from a business perspective. This is a rewarding but sometimes arduous process, as there often may be multiple interpretations of the participant’s reactions.

Thanks for observing, a successful usability research project depends on it!

So you’ve built yourself an email. Or banner ad. Or just about anything that mentions your URL. Interested parties have been lured to your website and they’re looking for instant gratification. Is the red carpet laid out or is the page business as usual?

Scott Brinker wrote a superb article for searchengineland about post-click marketing best practices. Brinker created a graphic that shows the eight dimensions of excellent landing pages:

You’ve got about one second to reassure your landing page visitors that their clicks weren’t a mistake, so figuring out how to make your message big, quick, and clear is of the utmost importance. Take in the full article here.

Google conducted a study on how our eyes process their search results (something they clearly have a stake in figuring out). From the source:

Our User Experience Research team has found that people evaluate the search results page so quickly that they make most of their decisions unconsciously. To help us get some insight into this split-second decision-making process, we use eye-tracking equipment in our usability labs. This lets us see how our study participants scan the search results page, and is the next best thing to actually being able to read their minds.

This video shows how one participant scanned results to the query “how to tie a tie” in real time. It helps to illustrate a fairly obvious point—you’re either on the first page, or you’re toast.

Check out the full story here.

The relationship between designers and developers is too often overlooked on projects. Commonly the two teams are removed from each other and designers are asked to simply throw their work over the fence to the HTML monkeys who faithfully turn the designs into a webpage using 10,000 typewriters. At SolutionSet, the “front-end” of a website is a combined effort of three different teams; The IA/UE team does the sitemap and the wireframes, the design team creates the designs, and the HTML/CSS team takes the designs and turns them into a web page. It is all too easy to fall into a pattern of non-communication between the departments where we start to lose focus on the real people that live on the other side of the proverbial fence.

In the web industry, there is a long standing battle between the design team and the development team. One source of the conflict comes from the varying backgrounds of the designers who may have a stronger background in advertising or print rather than web. In reality, it is the designer’s job is to push the envelope and make something inspirational, drawing from a diversity of sources, not just the web. HTML/CSS developers usually make poor designers because the more experience they have with HTML, the more practical their designs become. This is another source of the conflict: the developers can feel like the designers are punishing them by building designs that have drop-shadows over gradients, multiple different homepages load at random, as well as many other interesting and creative ideas that become difficult to translate into a syntax.

The conflict can get even more heated with a looming deadline. With a few pen strokes on a Wacom tablet, huge swaths of functionality can be added to a project. Suddenly there are light boxes everywhere, stylized tooltips, special buttons, a different width for the left column on every page, and the list goes on. Digesting a PSD is a daunting task and the natural process of design approvals ensures that each page will be *slightly* inconsistent. And of course, the design needs to be ready by next week so that the back-end team can take over.

It is extremely difficult (and not always desirable) for the designer to fully consider the development implications of a specific design. The developer is also faced with the fact that they are going to need to get elbow deep in the design, inspect it with a fine tooth comb—often zoomed to 1600%—and do it fast. This can get vicious for both sides.

Designers can develop too!
First, any designer that knows the most basic of the HTML/CSS rules will already bring something special to the table. Web designers should familiarize themselves with the basic rules of HTML/CSS and interactive elements in Javascript. What bugs exist in IE6 and IE7? What are the difficulties that come with lightbox that covers a flash element? Will my developer be able to implement an ajax image gallery if he has 6 HTML pages to build in a week? With basic HTML skills, the designer can not only create beautiful designs for the web but also determine the best way to create web beauty and developer friendly designs.

Developers can be designers too!
This one is huge. Get a front-end developer into the project life cycle earlier. Get them in on the design reviews, interactive design reviews, introduce them to the project timeline, the client, and the designer. This will allow the designer and developer to communicate with each other and gain a better sense of the difficulties of both sides. Letting developers become part of the design process allows them to gain respect from the designers for knowing what visual hierarchy is just as the developers are impressed by the designer for knowing about the double-margin bug in IE. It’s important to remember that most front-end developers went to school for web design not a degree in HTML/CSS.

Module design/development
In college a web designer friend of mine introduced me to a design methodology that he practiced that completely inspired me and has since become my primary way of development. When designing, he first determines the layout of the site (Right sash, left sash, 3 col, etc), the color scheme, and builds a logo. From here he designs all of the sites standard elements. This includes h1 - h4, paragraph text, links, link hovers, ordered and unordered lists, blockquotes, tables, numbers, drop caps, forms, buttons, any elements that the site will need. Then he designs by element in a modular way. He will take the header box and start designing only the header. He will add his login form, his logo, anything he wants to go in the header. He will not touch the navigation, the body, the footer, nothing else on the page until his header is complete. Then he moves to another element, and one after another he puts together a page. This is now how I develop. Build a navigation (or whichever element is ready to develop) in HTML/CSS/Javascript, test in all browsers, then copy/paste into the main site layout. This allows me to complete element by element and keep them all separate not only in my html but on my stylesheet. Everything remains completely organized, consistently cross browser compatible, and easily replicable.

A strong bond between the designer and the developer can create an extremely efficient development cycle using this type of methodology. There is always an offset between what the designer is designing and what the developer is developing. We obviously can’t be developing the footer until the designs are complete. The idea of modular development reduces the offset. If both the designer and developer can move from element to element, both teams can nearly work in unison.

At SolutionSet—time permitting—we produce style guides after we’ve had the initial designs approved by the client. Style guides essentially distills the Photoshop document into its base elements. There will be a page describing the grid, a page listing out all of the header styles, and so on. This is also a positive step in the direction towards modular design. Style guides help catch funny situations like having 25 different header styles on a site. In general, the style guide records the intent of the designer much better than the raw PSD’s. A designer under a time crunch can make minuscule mistakes (most frustratingly page to page) that aren’t noticeable to the naked eye but make a big difference in the CSS.

There’s always ways to improve a process. The biggest challenge is trying to make common practice out of something that is constantly changing. Every project is unique, every design will be completely original, new browsers will launch. It’s a tough world to keep up with. We shall see if some of these new ides bring anything to light. If you have other ideas, please contribute.

In my last post I mentioned that we were planning on using Silverback combined with screen sharing software for our next round of usability research. Well, to follow-up, the testing went really well. We set up one conference room for the moderator, which included a MacBook pro with an additional external webcam and Silverback, Skype, and GoToMeeting software installed. Then in a second ‘observation’ conference room we set up a PC and large screen monitor with Skype and GoToMeeting. With this set up the observers could see the participant’s facial expressions via video from the external webcam on Skype and their screen interactions via GoToMeeting. In fact the setup could allow clients to real-time remotely view the sessions. In addition, Silverback installed on the moderator laptop captures picture-in-picture video and screen interactions. Of course, you could use Morae by TechSmith, which allows for remote viewing and robust video editing, but that comes at a price and the whole idea was to provide our client with the best bang for their buck!

Postal addresses are one of the most basic form elements we encounter on the web and not much has been done to change the way they appear on a form since their inception. For most cases this format is functional, but it leaves much to be desired in the way of usability. Their layout is one of the remnants of the offline world that was not fully thought out when ported into the web.

Let’s look at how addresses are formatted in the United States:

Address line 1
Address line 2
City:
State:
Zip/Postal Code

When thinking web, a more usable layout would be to ask for the ZIP code before the state and pre-populate the state based on the ZIP code entered by the user. Ideally it  would have been nice to ask for the ZIP before the city, and then populate both the city and state fields for the user based on the ZIP, but there are some rare instances where a ZIP code can span multiple counties and therefore this does not work.

E.G.:

Source: http://www.zipinfo.com/products/cz/cz.htm

So we face a very common argument. Familiarity with what you are used to versus making the user’s online life easier. Is it worth changing this layout (i.e.: bringing the zip up above the state) to make this form more usable vs. keeping it in this format that everyone is already familiar with and therefore is usable due to familiarity? It is my opinion that the confusion caused by introducing a few approach here outweighs the improvement to the forms usability, so I would keep the traditional format.

It is when you start to make your address form compatible with international addresses that we start to encounter a real need to re-think how the form is presented to the user.

Some countries have addresses that need three address lines versus the two fields that is commonly used in the United States. The United States is one of the few countries that uses state and ZIP. Most others use province and postal code. While it is possible to list the states within the United States in a drop-down, is not possible to do the same for all the countries in the world.

Some sites overcome this problem by having just one input field labeled “State/Province.” While this works, it is not the most user-friendly.

One variation of satisfying both US and International addresses

An input field for the state causes quite a bit of confusion for the user. What does the site expect them to enter? Should they spell the entire state out? Should they enter the two character abbreviation? Will the system accept their entry if they make a spelling mistake or don’t enter it exactly as it’s programmed to accept?

In a traditional address format, the country comes last. This is the root of all our address formatting woes. The country tells us how the rest of the address fields should be formatted and therefore it makes sense to gather this information early on.

I’ve started advocating the collecting of the country early on for addresses in my wireframes and I find that once clients overcome their initial surprise of being asked for the country first they really like how it simplifies their interaction with the rest of the form.

The default selection will be the country of primary focus or where your primary user base is located with the form containing fields for that country. If the user changes the country selection to something else, the rest of the address fields can very easily be changed by either using AJAX or if needed a page refresh, to match the requirements of the selected country. One thing to keep in mind when doing a page refresh is that you should never lose information that a user might have already entered into the form. This is a golden usability rule that when ignored leaves you with some very unhappy users.

In most cases you will not need to have more than two variations to the address field, one that satisfies an international address format and one that satisfies US and Canadian address formats.
Eg:

Proposed US address format

How the form would look when an international address is selected

Typically, in software and web site development, when budgets or timelines get cut, the first activity to fall off the project plan is usability research. Project teams know it is important, however the perceived cost, is seen to outweigh the benefits of testing and validating, especially when the launch date is looming. The problem is when your projects deal with innovative or unconventional interfaces, involving users in the design process is often the best method (and cheapest in the long run) for ensuring a successful outcome.

Therefore removing steps and streamlining the usability research has become a priority.  Guerilla or discounted usability testing is nothing new, in fact Jacob Nielson wrote about it in 1994 (http://www.useit.com/papers/guerrilla_hci.html). Although, at SolutionSet we are taking the principles of down and dirty testing and marrying them with new technologies to offer solutions that reduce budgets and provide quicker turnaround. For example, on a recent project the goal was to test new interaction models that had been depicted in a set of wireframes. The best way to test interaction is through a clickable prototype, but we did not have the time to create an html prototype from scratch. So we used Visio’s built-in hyperlink functionality to connect up the storyboarded wireframes and saved the file as HTML. We look forward to using Adobe’s Flash Catalyst ,in a similar manner, to transform creative comps into interactive prototypes.

Renting a Usability Lab and video equipment can be another expense that puts project teams off doing research. However, there are some exciting new budget-friendly screen capture and remote usability testing alternatives available. Recently SolutionSet used Clearleft’s Silverback software installed on a laptop to capture participant’s facial expressions and screen interactions. Silverback then allows you to export the recordings into professional looking picture-in-picture QuickTime videos to share with the team.  Using Silverback does not provide the opportunity for project stakeholders to observe the testing real-time behind one-way glass. However, it does alow you to conduct the research in remote or more informal environments. Also, in our next round of research we plan on using a screen sharing application to allow others to observe the sessions remotely. Will let you know how it works out.

The history of the Web has seen many milestones:  Netscape. Amazon. Craigslist. Blogs. Wikis. People finding love.  People inventing new technologies, services, and modes of commerce. The inauguration of the next President of the United States in now within one week. It is time to reflect on another major milestone in the short life of the Web: The advent of Change.gov  - - [All images in this post are clickable]

Launched on November 5, 2008, just one day after the nationwide Presidential Election, Change.gov instantly became a major vehicle to promote the transition plans and communication strategy for the office of the President-elect Barack Obama. For those who live much of their day-to-day lives using the web and digesting content via the web, it may come as no surprise to see articles and news posting online. Yet, it is important to realize that this is the Presidency of the United States. This is not a shop selling handmade Yak-wool scarves. Or a site promoting the AORBS (Amalgamated Order of Real Bearded Santas). Or even another major site from General Electric, Wal-Mart, Yahoo! or Google. This is a site representing the focal point of the future of the government, and thus of the people, of the United States of America.On launch day, a post on Change.gov’s official blog included:

Change.gov provides resources to better understand the transition process and the decisions being made as part of it. It also offers an opportunity to be heard about the challenges our country faces and your ideas for tackling them. 

This is a great example of fulfilling the social and communication promise of the Web. It is great to see online community being used at the national level.To some extent the promise of the Web and social media, and the long-tail-ization of news production and consumption, is that anyone can publish information. And that all information should hold equal weight. As Howard Rheingold wrote in Smart Mobs in 2003 “Everyone can be a publisher or broadcaster now.” Nonetheless, there is clearly a different level of gravity and impact when the publisher is the office of the President-elect. An office soon to be in charge of directing trillions of dollars in funds, commanding the largest workforce in the nation, the ability to wage war, guide Climate Change laws, and the ability to direct major programs affecting everyone living in America.

Transparency

The transparency shown on Change.gov is a breath of fresh air coming from government. For some of us who lived through periods of secrecy, or lack of communication, such as Watergate, or the Iran-Contra cover-ups, or even your local City Council’s inability to post garbage pickup days, or School Board policy decisions, it is truly remarkable to see the official items expressed on Change.gov.  Just a few examples include:  PDF files spelling out the Presidential transition plan details; agenda papers declaring the official position on topics from Health Care to National Security; job applications; dozens of videos with key cabinet level personnel telling you their opinions and visions directly; lists of all the people responsible for decisions in the various departments and committees; and daily blogs and news posting and videos from Obama himself and the Obama team.

Dissent and Community

More than just a boosterish campaign site, Change.gov has also become a platform for dissent and criticism. Foes of the in-coming Obama administration are allowed to post comments and be heard. As Clinton veteran Peter Daou puts it:

It speaks well that they aren’t using a heavy hand to moderate the outrage on the site. It’s also encouraging that across the web, activists see Change.gov as a place to express their views. Bloggers have been sending readers there to tell the transition team how they feel about Warren’s selection.

For me, this is the raw power of the medium, the ability to communicate and aggregate at will, massively and instantaneously. It’s not the YouTube addresses and the capacity to ask questions and receive boilerplate policy answers that will mark Obama’s as the first truly wired presidency, it’s the freedom to speak out on a global scale, both in support of — and in opposition to — the incoming administration. Kudos to Obama’s team for providing an official platform for that to happen.

 On the constructive side, on day one Change.gov started soliciting user input and comments to be sent directly to Obama’s team using the “Tell us your vision for America” online form.

Team

There are some great stories online about the genesis of the Change.gov site, including that of the domain name itself: http://michellemalkin.com/2008/12/20/document-drop-the-story-behind-changegov/

The folks behind Obama’s internet strategy and transition to Change.gov are no slouches. Facebook co-founder Chris Hughes became a key player in the Summer of 2008 (http://www.nytimes.com/2008/07/07/technology/07hughes.html), and former IAC executive Julius Genachowski acted as Obama’s Chairman of the Technology, Media and Telecommunications during the campaign and transition. With Hughes involvement Change.gov reaches a higher level of polish, gloss, focus, clarity of purpose and approachability than your standard government Website. The branding, user experience, and content are professional and on par with good corporate Websites, and better than most global news portals.

Tools and Copyrights

Surprisingly, and to the delight of most of us in the Web profession, Change.gov has opted to use inexpensive low friction off the shelf tools, instead of building some wacky roll-your-own proprietary solutions. Multimedia web technologies are integral to Change.gov, including the use of YouTube and Flickr. Imagine the backroom discussion to approve this “Hey Smitty, is it okay if we create an Obama account on Flickr?” pause “Yea, dude sure. Cool.  Do it.”

Additionally, Change.gov is not averse to using best of breed commercial solutions for particular parts of the site.  On January 14, the “Citizen’s Briefing Book” an online forum where you can share your ideas, and rate or offer comments on the ideas of others, was launched using Salesforce.com CRM tools.

Community based rating is one thing for restaurants and dog grooming, yet it is interesting to think about the implications for national public policy, or determining funding priorities.

Dispelling the white-knuckle control focus of some administrations, Change.gov has also adopted open Web-generation practices such as the use of Creative Commons for copyright policy and fair use of content. Sharing and dissemination of information seem to the order of the day.

Future

It is hard to tell how the postings, tools, lessons, and open forums of Change.gov will be used once Obama becomes the President. There are many rumors regarding the potential interplay between the two existing sites Whitehouse.gov and Change.gov.  It is not clear how open and rapid the President will be able to be once in office, officially representing the county. As we have seen in recent weeks Obama will not be allowed to use his BlackBerry device going forward. There are privacy and security issues linked to the person of the President. The transition team says that the open forum, and citizen input, and transparency will remain. And that the use of the Web will continue with the posting of detailed Administration budgets, decisions, and positions.  This all sounds promising. One thing that is for certain: The Web is here to stay. Yet tides change. Attitudes come and go with Administrations. In the future there may be a lockdown on information and a new rise of paranoia. For now, let us relish this brush with collective action, openness, and community.

-Peter Montgomery