Testing Methods

It's finally time to begin doing testing! There are several different methods of testing, each with their own positives and negatives. I'll be listing some of them here, along with situations in which each might be most successful.

Think Aloud Testing
Think Aloud testing is a fairly simple type of test that requires both a lab and recruited participants. During a Think Aloud session, participants should be instructed to speak their every thought as they navigate through your design.

Positives:

• May unveil new usability issues
• Lets you know why users act the way they do

Negatives:

• Unnatural; Most users don't talk to themselves constantly while they navigate websites
• Users may not always know how to express what they are thinking in words

Surveys
Chances are, if you live in the United States, you've taken a survey before. Surveys are a nice way of gathering information on known usability issues and how they affect a user's experience, and there are several standard surveys that one can use, including the System Usability Scale (SUS).

Positives:

• Easy to create and send out
• Requires little burden on our participants; participants can even be in different geological locations

Negatives:

• Less insight into a participant's experience
• Low likelihood of response

A/B Testing
A/B testing is a way to test revisions to designs that are already up and running. In A/B Testing, users are either directed to the redesigned page or the old page, and the rate at which they performed "desired actions" (for instance, purchasing an item) are monitored. In this way, you will be able to discover which design is more effective.

Positives:

• No need to actually consult with your users before testing
• Gives clear results on which is the better design

Negatives:

• No clear evidence given on why each design is better or worse
• Creating the test requires more effort

Study Participants and their Treatment

Hello again, everyone! Now that you've made a wireframe and set up your own usability lab, it's about time to actually sit down and test your design. In order to test your design, however, you'll need victims study participants! This all might sound like a big deal, but surprisingly enough...

You only need five participants in order to discover 85% of your usability problems (Neilsen 2000) (it's a bit of a contended point (Spool 2001), but five participants is a generally accepted standard in the industry).

Of course, the more users you have, the better (Neilsen 1993), but at the very least you should have at least one person review your design before you do anything with it.

All right, so you know you have to have a certain number of participants now. But who should they be? If you can, try and ask people from your website's potential target demographic to help you out. If that doesn't work, friends and family will do, too. But when you're recruiting participants, you need to make sure they're being honest with their feedback.

Your research participants will probably be eager to please, and will look for ways to praise your design rather than critique it. The critique, however, is what you really want out of this- praise is nice, but it doesn't help you improve your design at all. In order to avoid this problem, make sure to let your participant know that you want to know what they do and do not like about your design.

There are certain other things that you, as a moderator, need to do when you are conducting usability tests as well, mostly so that you can get your participants to give you high quality feedback.
A few of the more important ones are:

•  Don't ask leading questions. If you're asking questions that are biased in one way or another, your participants will be more likely to answer the way you want them to, even if it's not how they truly feel. 
• Don't try and direct your participants. Beyond giving the participants a task to accomplish, try not to force them to traverse the design in a certain way. If it's usable, they will easily be able to find out how the design is intended to work; if not, then you've just discovered something you need to work on when you revise the design.
• Don't be biased with your praise. Praising your participant is good- but make sure to praise "failures", as well. Repeated failure is frustrating, but if your participant understands that their mistakes are actually a good thing, they will hopefully feel better about the times when they aren't sure what they're doing.

Sources:
Spool, J. and Schroeder, W. Testing Websites: Five Users is
Nowhere Near Enough. In CHI 2001 Extended Abstracts,
ACM, 2001.

Nielsen, Jakob and Landauer, Thomas K. A
Mathematical Model of the Finding of Usability
Problems. INTER CHI "93 206-213.

Nielsen, Jakob Why You Only Need To Test With Five
Users, Jakob Nielsen's Alertbox, March 19, 2000,
http://www.useit.com/alertbox/20000319.html

Podcast: Setting up your Usability Lab

It's finally time! You've got your personas, scenarios, and wireframes... but before you get too far into the design, you'll need to test that wireframe. But how can you test your wireframe if you don't have a usability lab? In this podcast, I'll be explaining some of the various tools in a typical usability lab.




The screen recording software I mentioned, CamStudio, can be downloaded here.

Wireframes: Prototyping your Design

Now, back to our regular schedule! Today I'll be writing a little about wireframes, an important tool for any usability designer.

What's a Wireframe? Well, the best definition I have for a wireframe is that it is a working blueprint of a website or app. It's not all decked out in colors and information, but you can still click through to see how the interactions on your site will work without having to put in all of the effort of picking colors and manipulating things in Photoshop.

As for reasons why we use wireframes...

•  It's a quick method for getting usability tests out of the way. Going through the entire process of designing a website only to find that your design isn't usable is not good- it means you're probably spending a lot more time fixing something that you could have discovered in the middle.

• Once you've made one, you can reuse it over and over again. If you need to recreate your design or want to create a different website with a similar feel, you can always reuse a tested wireframe- and will still look and feel like a completely different website, based on the color and stylistic choices you make during the design process.

•  It's a simple way of conveying a layout concept. If you're working with a client and need to know exactly how they want the layout to look, make a wireframe and send it to your client- or even get the client to make their own! Wireframes are simple enough that they can be created in Microsoft Paint, and as such they are a quick and painless method of exchanging ideas without too deeply into details.

If you'd like to see some examples of wireframes, www.usability.gov  provides some examples of what a wireframe should look like on its Templates page.

Guest Blog: Text, Links, and Fonts

Surprise! I've actually got another post for you guys ready today. Ben French (efficientlanguage.blogspot.com) was kind enough to write about information usability for me today. (And I'll be writing for him soon, so you should go take a look at his blog later!)

If you're exclusively a website designer, this might not be as important for you to know, but for those of you who design and create content for websites, this is the post for you.

                When most people visit a website for the first time, they tend to be critical in some way. Firstly they will tend to notice how readable the site is set up. Everyone should be able to read the content. If everything appears as a wall of text, it is a huge problem. Walls of text sometimes can make you feel as if you are reading an info dump, or rather, an endless flow of dull information (Spooner). This defeats the purpose of scannability. Readers want to be able to skim through and find the most essential points; otherwise the readers will be bored, frustrated, and are more likely to leave that site. The easiest way to avoid this is via the use of headers, paragraphs, and visuals (Spooner).

                Linking is another useful tool that people tend to get use inefficiently. There are some that tend to think that underlining is a great way to catch your eye [which it is] and use it for emphasis uses only. This may work in a printed publication, but this is the web. When a user sees underlined text, they tend to click on it thinking it is a website (Spooner). When a new page doesn’t open, the user feels tricked.  This frustration is not needed. If you are trying to make a point, bold, or italicize your text. Underlining is reserved for links only.

To add to linking, when referring to an external source, never, ever use the phrase “CLICK HERE.” It is useless and does not add any knowledge to the reader. It is more reading for the reader and a waste of space (Spooner). If you want to effectively link, do so in a short, descriptive manner (Webb). Saying “see pictures of…” is a better option, but integrating the link into a part of the text is best.

The most important factor in a web based document is readability. Fonts are what make this happen. A serif font, which what you will typically see in a printed document, is very hard on the eyes when displayed on a computer monitor (Kyrnin). Those hooks and stylized edges that you see on each and every letter tend to blur together (Kyrnin). This is why serif fonts are not used on the web whereas sans-serif is what is used instead. These are the easiest fonts to read. They are clear and very easy to read when it comes to scannability (Kyrnin).

                So when someone visits your page, the most important factors to utilize properly are:

·         Text

o   Spacing

o   Paragraphs

o   Headers

o   Visual aids

·         Linking

·         Fonts

Works Cited

Spooner, Chris. "10 Usability crimes you really shouldn’t commit." Line25. N.p., 20 2009. Web. 3 Dec         2012. <http://line25.com/articles/10-usability-crimes-you-really-shouldnt-commit>

Webb, Philip. "Content & usability: writing for the web." Webcredible. N.p., 1 2012. Web. 3 Dec 2012.                 <http://www.webcredible.co.uk/user-friendly-resources/web-usability/web-content.shtml>

Kyrnin, Jennifer. "Font families - serif, sans-serif, monospace, script, fantasy." Web Design: About.com. N.p.. Web. 3 Dec 2012. <http://webdesign.about.com/od/fonts/a/aa080204.htm>

Interview: Erika

So this actually isn't the big post I was promising yet, sorry, and neither will the next one- but hey, interview time! Erika is one of the esteemed staff at my college, and I was lucky enough to get her to agree to answer a few questions for me. Here are the questions, and her answers:

What kind of design failures do you see most often? 

Poor use of colors and fonts, to the point that something is painful to look at.
Inconsistent location of buttons, menus, shortcuts, etc. Inconsistency, especially, can cause some really insidious errors because people see what they expect to see, not what is actually there. It makes it hard for them to figure out the problem.

What kind of usability tools do you find yourself using most often? 

Funnily enough, I use Excel as one of my major tools. Lots of planning, execution, and results live in Excel for me. PowerPoint and WebEx also very big since we do a lot of remote collaboration. As to "traditional" tools: Adobe Photoshop for graphics, Axure for prototyping, Morae for usability testing, and Mindjet (mind mapping tool) as a brainstorming tool for remote collaboration (in place of stickies on a wall).

 Could you tell me about your favorite usability research?

I am a total human error geek. I really like breaking down if use failures are the result of slips (skill-based error caused by the correct intention being performed incorrectly), lapses (skill-based error caused by one or more steps in the correct execution being missed), or mistakes (knowledge-based error caused by the incorrect intention being performed). I find it interesting on a purely academic level from the perspective of the cognitive and perceptual psychology involved. I like it on a practical level because I think understanding the root cause of an error leads to a better redesign with less guessing.
I am also getting more and more into human factors in regulated industries, for obvious reasons.

 What kinds of developments would you like to see in usability (or technology) in the future?

I would like to continue to see evolution in the software tools available to make it easier to perform usability activities within increasingly agile software development. I think this will help my overall "wish" of continued acceptance of usability/user experience/human factors being accepted as a science-based element of the overall software development process, as opposed to a more art/opinion-based nice to have.

Interview: Yukiko

Hello again, everyone! While I make preparations for my next big post, I thought I'd share an interview I did with Yuki. Not only is Yuki a fantastic designer with many years of experience, she is also the head of a local UX Book Club and a fellow member of the local Usability Professional's Association (if you have a branch of this association in your area, I strongly encourage you to join!)

1. What are the first things you think of when first seeing a website?

When I see a website... I like simple and clean designs. That's probably the first thing I see. I don't always check websites' creativity, or efficiency. I just want to feel what kind of website it is. And then.. It depends on what there is. If it's a shopping site, like Amazon, of course I'm going to start seeing the functionality, if it's easy to search things. I have a tendency of finding faults, you know.

2. Can you talk about those [faults]? Can you remember any specific instances of them?

Amazon. The search function is terrible. If I'm looking for, say... Women's outdoor jackets. On the list, they start listing some of the men's stuff because it's related to it, or because someone who bought this product
bought the men's product. But I'm not looking for a man's jacket. So it's very weird... Another thing is, if they have options for the different colors- every color probably has different prices, but when I move the cursor over the color, it changes the price sometimes.. You have to click it to see the prices. The problem is, it's not consistent.

3. What kind of design failures do you see most often?

 Usually consistency, or not knowing how to get to where I want to go in a website.

4. What kinds of developments would you like to see in usability (or technology) in the future?

I guess like, more easy mockup tools? Because there are more interactions, whatever design we're working on... It's always about the interactions, be it websites, iPhone apps, whatever. So instead of just making a visual layer in Photoshop, you could have more advanced... or even, Photoshop could have the function. It should be easier.

5. How would you say your experiences in Japan have influenced how you look at design today?

 To me, it's been changing, but in Japan, we are a bit more... efficient, visual people. So we always have some kind of pictures, or even... Let's say, a cooking book. When you go to find a cooking book, it's all text. Not even a picture of it. With Japanese cookbooks, every step is pictured. Not always, but usually. When trying to cook things [with American cookbooks], I found so many books that don't have pictures for every step, and sometimes even the final product.. They don't have pictures. Only text. How can I use it? I'm probably more used to visual objects- like website buttons, or charts, or even cartoons. [The Japanese] always have visual things. I feel like we feel the need for visual representations more.

Color: An Infographic

 I hope all of my United States readers had a Happy Thanksgiving! I certainly did, but without internet I was unable to post what I wanted to. Which is a shame, because I had intended to make this post last Wednesday... I guess even the best laid plans do go astray sometimes.

Color is an incredibly important factor when creating any design, but it's hard to decide on which colors are truly "usable" without knowing some background information. I've put a lot of work into this infographic over the past week and a half or so in hopes that I will be able to explain some of the more important aspects to think about when choosing colors for your design. So without any further ado, here it is! (sorry it's kind of huge)

Reviewing Personas and Scenarios

Sorry for the delay, I've been quite overwhelmed with life lately! Last time I posted, I received some feedback that I had perhaps not been clear enough with my wording, so I'll try to clarify exactly what I meant as well as add some new information I've found.

User Profiles are sets of user data, gathered through polling your users directly. This is the data you will be using in order to create your personas.

Personas are, shall we say, your "average" user- taking the ages, genders, and other relevant information about your users from your set of user profiles, your persona's attributes are decided through averaging. For instance, if your users are predominantly male, your persona should be, too. And if your users are typically middle aged, the age of your persona should be a number that reflects that fact. (If you don't have any research on your users, try and guess who your biggest userbase is going to be.)

Scenarios, or what engineering students might recognize more easily as use cases, are lists of steps your persona must do when trying to reach a particular goal. Writing out these steps might seem tedious, but

There are two reasons for which personas are created:

- In order to empathize with your users; by creating a persona with a name and face, you can put yourself in their shoes much more easily than by simply addressing a user. Naming personas is mostly only necessary when you anticipate a need for several personae, but it also makes them seem more human- and the more human they are, the more easily you will be able to empathize with them.

-To be used in Scenarios. This is important because you need to be able to imagine yourself as someone else as they explore your design.

Here are some examples that I've created for the website I'm creating for myself-

Jessica Daly is a 28 year old recruiter who spends her time looking at the portfolios of recent college graduates and tries to place them in jobs that suit them. She is an experienced web designer as well, and navigates the internet with ease.

Scenario: Looking at Portfolios
Jessica has been directed to Elle's personal website through a business card, and is interested in looking at the most recent work in her portfolio.
1. Jessica loads up Elle's website and sees simple navigation on the side as well as a navigation bar at the top. She clicks on the link that says "Portfolio".
2. A new page, similar to the first but with images for content, appears. There are several thumbnails arranged clearly by year, and the most recent images are placed at the top. Jessica clicks the first thumbnail from the left.
3. The thumbnail expands to show a larger resolution image of the thumbnail. Now intending to exit, Jessica clicks the X at the top right hand corner of the image's border and closes the expanded image.

Simple, right? But I've gotten a lot of the rough facts laid down by working through it this way. By working it out like this, I now know how I want to have my portfolio page laid out, without even drawing it- and I also know that since my target audience is mostly recruiters, I should probably have my portfolio as one of the first links on my page.

Personas and Scenarios: From Hypothetical Situations to Reality

Before you begin designing your website, it is important to have some method of anticipating your user's needs. But who are your users? How will they interact with your website? Asking yourself these questions helps, but in order to ask more concrete questions, creating personas becomes a necessity.

A persona is a character that has all of the traits of an actual person, except these traits are chosen in order to reflect the website they have been designed for.

Essential traits include:

• Name
•  Age
• Gender

Don't forget to find a picture to represent your persona! Personas should be as representative of real life as possible, and having a photograph to tie to each persona's details helps make the persona seem more like a real person.

Personas can also be used as the main characters in scenario writing, a commonly employed usability tool. Scenarios are written examples of your persona's attempts to fulfill their goals through your website, and are created in order to lay out each interaction. Doing so allows you to plan out your website in great detail, and also allows you to immerse yourself more deeply into your persona's character.

To summarize:

• Personas should be detailed fictional characters who share traits with your users.
• Scenarios should be created around each persona's interaction with your website (whether you have created a design for it yet or not)

In my next post, I will detail some of the features your users have that are important to address in persona creation.

Introduction to Usability

Are you an amateur (or professional) web designer looking for ways to improve your web designing? Well, you've come to the right blog. Usable Design Made Easy is a blog created with the intent of educating web designers in techniques that will make your websites... well, usable.

But what is usability, exactly? According to the International Organization for Standardization, usability is:

"The extent to which a product (in our case, a website) can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use."

Effectiveness, efficiency, and satisfaction. These three attributes are key factors of any great design, and to know how to implement them properly requires research. Luckily, there is an abundance of usability research, to the point where there are blogs with hundreds of posts about usability; unluckily, the information out there is not organized well. This blog will attempt to organize information that can be readily applied to web design in a linear manner.

Things to know:

• This blog will be written in a tutorial format. Posts are meant to be read in chronological order, but will also be titled in such a way that readers can easily access the steps at their own pace.
• This blog will not explain web design tools such as HTML, CSS, or image manipulation software. Readers should already have a basic knowledge of the tools necessary to create a website. If you are new to web design and would like some more information on these, please refer to these resources:
• W3Schools : A website containing comprehensive information on HTML, CSS, and other web coding languages. 
• GIMP : A free image manipulation site. Tutorials for use can be found through the GIMP website, as well as through sites such as GIMP-Tutorials.

 Further reading for usability and web accessible design can be found readily here:

•  Usability.gov : An educational website containing well organized resources on usability.
• Jakob Nielsen's AlertBox : The blog of one of the most well respected usability professionals. 
• User Interface Engineering : A diverse website with its own usability blog, podcast, seminar database, and events.