Wikipedia describes User Experience Design (UX) as how a person feels about using a product, system or service. User experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership, but it also includes a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system. User experience is subjective in nature, because it is about an individual’s feelings and thoughts about the system. User experience is dynamic, because it changes over time as the circumstances change.

One of the driving principles of good User Experience Design (UX) is to keep a healthy tension between the needs and desires of the three main groups that influence the design of any web site; The managers/content owners, the developers and the users. Each of these groups has their own sets of goals and perameters that influence the design of any product. The people creating the web site are comprised of the first two groups; the people writing the content, the managers who see marketing and budgetary concerns, the web developers, the web server administrators, the network security engineers, the web maintenance people. The people who are often not brought into the design phase of a product are the users. The users are the ones who will be using the product in the end so it is necessary to get their input and to deisgn the product with them in mind. That's where UX Designers come into the picture. We use various methods to understand the users needs and develop products that fit those needs. Building UX into the product design workflow is integral to building, maintaining and improving good web sites and software applications.

Initial Design and Ideation

Card Sorting

Card Sorting is one of the methods we use in the intial design phase of a product to determine category names for various services offered on a web site. Good category names are essential to creating good service-based navigation. Card sorting is a simple technique where a group of users are guided to generate a category tree or folksonomy. It is a useful approach for designing information architecture, workflows, menu structure, or web site navigation paths.

On the web site for the Division of Administration for California State University, Long Beach I devised a low-tech and inexpensive and reusable way to do Closed Card Sorting. Closed Card Sorting is used when we already know the services you offer and have a pretty good idea of what the categories should be.

Procedure
  1. Get a big whiteboard with a metal surface.
  2. Cut magnetic printable sheets into long rectangles about 4" x 1/2".
  3. Create categories using a sharpy and put a number next to each one.
  4. Create individual services using a pencil. Using a pencil allows participants to erase the service name and change it.
  5. Place the categories along the top of the whiteboard.
  6. Place the services where you think they should go in the categories.
  7. Draw a square with a dry erase marker labeled "Recycling" in the bottom right corner of the board.
  8. Bring four or five participants into a room where you have placed the whiteboard such that they can all access it.
  9. Place sharpies, pencils and erasers on a table.
  10. Instruct the participants to edit the board in any way they feel.
  11. They can create new services using the pencils on blank magnetic labels.
  12. They can move existing services into other categories.
  13. They can rename categories.
  14. They can place categories in the recycling.
Chosing Participants

I chose a wide range of participants. One person had never used the web site. One person was not very tech oriented. One person was an advanced web site and technology user. One person had used the web site a lot, but was not really that tech savvy.

Impartiality

Initially they would ask me questions like, "Should I place this here?" "Is this service part of that organization?" "Can i place the same service in multiple categories?"

I was impartial in my responses. I would say things like, "Imagine you are using the web site Would you want to find that service in that category?" "Is that where you would normally look for that?" "Yes, you can place the same service in multiple categories" The whole idea is that users are determining where they would look for things. After a while they didn't ask me anymore questions. They started asking each other questions. "Why did you put that there?" "I think it should go over here." They reached consensus most of the time.

Record Keeping

Once we were all done placing all of the services where we thought they should go, i took a photograph of the whole board with an HD camera so that I would have a record of where we were at the end of that session.

Using the Research

Now I can take that organizational structure, build a wireframe model of the site. The Card Sorting board is still in the state we left it and we can take it to a new set of users and get them to perform the same process all over again. Each time, we test users with the Card Sorting board we get a new set of eyes on it we will get a slightly different perspective on how that group of users thinks the data should be organized.

When we analize the Card Sorting data we take into consideration the needs of the three parties discussed above; the managers/content oweners, the techies, and the users.

Contextual Inquiry

Luckily, the web sites I have worked on have user groups that are readily accessible for me interview in person. The faculty, staff and students are right there on campus. We primarily server staff members. I can schedule an informal meeting with one of them, go to his desk and watch him use the site while I ask him questions. I can see his body language and facial expressions; hear his tone of voice and sighs of exaspiration. He can ask me questions. I always answer impartially and wait until he makes up his own mind or gives up in frustration. I can see his working environment; how much or little space he has, how much privacy he has, how often he is being interupted, how he uses the phone and paper (i.e. post-its stuck to his computer screen). I do this research as if I were an alien from another planet visiting for the first time. The prime directive is in effect. I try not to influence his behavior. I am there for observation puposes only. It is often hard to be impartial in a situation like that, but it gives the design team valuable information about how to improve design.

This informal interview process is done in iterative phases. We design, prototype, test, analize, redesign, prototype, test, analize, redesign, prototype and test until we get a satisfactory user experience.

Creating Personas

Creating personas helps to deturmine who your audience is. By creating stereotypical users we can create standard models for how users use our web sites. For instance, Cheryl is a staff member at California State University, Long Beach. Cheryl is not a real person. It helps content creators and interaction designers to think about Cheryl as an actual human being when designing a given web site. Each persona has these qualities:

  • name
  • location
  • occupation
  • biography

One persona for is obviously not enough. For example, at Cal State Long Beach staff members have many different abilities and living conditions.

  • ethnicity
  • cultural background
  • pay grades
  • English proficiency
  • level of experience with computers
  • level of experience with financial matters
  • method of tranportation
  • physical imparements
  • social comfort level
  • user goals for the website

By creating personas that respresent average users with all of these qualities represented in their appropriate levels we can use those personas to help the design team think about who we are serving and how best to design for each type of individual.

Storyboarding

Storyboarding is helpful for visualizing scenarios that you can ask your users to play out. Let's say a user fills out an order form for stock photography on a regular basis.

Here is a possilble storyboard for this scenario:

  1. Cheryl's supervisor Margret calls and tells Cheryl to fill out the "Budget Risk Assessment" form for a new vendor.
  2. Cheryl logs into the forms page and up come her most frequently used forms.
  3. Cheryl opens the form she wants to fill out.
  4. Cheryl fills out the first field in the form and the form autofills the rest of the form based on the last time she filled out the form.
  5. Cheryl only has to go in and change a few little things on the form.
  6. Cheryl submits the completed form to Margaret for approval.
  7. Margaget approves the form.
  8. Now Cheryl can send the completed and approved form to the client.

Personas help when generating different storyboard scenarios for different tasks.

The storyboard can be shown to the project stakeholders. The web design can then be prototyped and tested on users to deturmine if it is a good design.

Creating Structure