Tues, 2/25

"Usability Testing" of your Paper Wireframes, Introducing CSS Zen Garden

"It takes only five users to uncover 80 percent of high-level usability problems" - Jakob Nielsen

• We will start with a group activity involving "usability testing" with your printed wireframes
• First, fill out your wireframes with a description in your blank boxes - roughly describe the content that goes in each box.
• Then formulate a Usability Testing Script using the Quick Guide in the blog post below these instructions.
• Once you have created a script to test out your web site, you will delegate one person for each of these roles:
  
  
  1. One person in your group will be the "Conductor" meaning they will conduct the test and asking the questions without revealing too much. They will pretend the paper wireframes are actual web pages, and have the user point to the links/pages they will navigate to. They act as a computer browser, presenting each wireframe as if the user were navigating through a real web site.
  2. One person will be the "Recorder" and will either record the conversation using a microphone app from your smartphone (this is ideal), or typing rapidly lots of notes and transcribing them to full sentence observation later. This person CANNOT chime in when the conductor is performing the test - must stay quiet.
  3. One person will be switched over to the group next to them to be the "Target User". He or she should be conducting the test using "free association" which is just a fancy way of saying "brain vomit" - run through the tasks and questions you are given and narrate your thoughts the whole time. Do NOT ask the conductor or the recorder any questions about how to use the site or what things mean until the very end. Just try to run through the tasks as best you can and give your honest thoughts about the site and how it functions.
  4. The 2 [now] groups of 2 will become a group of four. You will have two dual conductors/recorders, one from each team - they can take turns performing the test - perhaps halfway, the second conductor can switch wireframes and test with the questions for their site.
  
  
• Record the script and the user's answers on your blog
• Then, write a short paragraph that summarizes your findings using "If, Then" statements. If the user was confused about _____ and ____ , then we should change_____ about our site because _____. I expect you'll have a lot to say here, but keep it to a maximum of 500 words.
• This blog post will help you later when we conduct more usability testing with functioning versions of your prototypes - your User Testing Script will be more in-depth later on, and you will have solved some usability issues even before the wireframe or prototype is made "clickable" - so it will have evolved by then.




---





Usability Testing Quick Guide:

Usability Testing Quick Guide - Conducting a Usability Test





PART I - DO NOT SHOW THEM THE SITE, YET



1. Make them feel comfortable:
   Thank them for taking time out of their day Ask about their trip, stay, weather etc.


2. Tell them who you are what you are doing, without telling them who you are and what you are doing. Meaning, you don’t want to tell them too much about the project or your intentions, but you want them to know you have good intentions.
   ”I work for _____, and today we will be looking at a web site to find out how well it performs."


3. Say the “HOLY TRINITY” of Pre-test Statements:
   • NOT BEING TESTED
     “Although this is called a Usability test, you are not being tested. We are testing how well a web site performs, so you can not be wrong today”
   • NOT THE DESIGNER
     “I am not the designer, so feel free to speak freely” – ok perhaps a little white lie, but this helps open people up as they are looking at your web site. (Would you rather tell the chef or the person sitting next to you if the food was not prepared very well?)
     
   • THINK OUT LOUD
     “I encourage you to think out loud. This helps me understand your thought process” – The beauty of usability tests is you can actually learn something if they didn’t talk at all (by watching them), however, expressing internal dialog is good at helping understand why a decision was made.




PART II - SHOW THE HOME PAGE



4. Have them look at the Home page site and…
   • Find out if they get the purpose of the site, the purpose of the business.
   • Ask if they know what the main sections of the site are
   • Ask where they would start




PART III - TASK-BASED TESTING



5. Ok, the real testing begins. At this point you should have specific questions ready, geared at what the site must do well to be successful. The questions should be in the form of a scenario, especially if the user falls outside your immediate audience.
   ”If you were a business owner and looking for new cheeses to sell, where might you go?”
   ”You want to start a new bank account, how might you do this?”


• TIPS:
  • Be patient, let them muddle their own way
  • Avoid leading questions, such as: “Looking at the buttons on the right, where would you go?” or “When you see this box here, what do you do now?”
  • Do not direct them in any way, remember they are right (no pointing, don’t grab the mouse)
  • Don’t feel confined to your initial questions. Feel free to make up questions based on their actions. “From here, how would you go home?”
  • You can comment on any action they did and that THEY completed first, such as “I saw that you went to About Us, when you were there, how would you contact the business?”




PART IV - THE FOLLOWUP



6. Ok, now that you have watched them perform, you can now loosen up a bit. You can ask them why they did certain things. You can tell them what the intentions of the site are and ask why they thought differently. It’s a good time to also ask about design or branding things. Think of this as the “Focus Group” part of a usability test.




---





CSS Zen Garden - 2nd Individual Assignment

• Go to CSSZenGarden.com.
• Download the example HTML file. You will need this. You may also download the CSS file for your use as an example from this page or from the featured designs on the right, or the archive.
• You may participate in this demonstration of CSS design by creating your OWN CSS design, using their HTML template and changing this HTML file as LITTLE as possible. Create a stylesheet for this page and build the page using a design of your choice.
• You may use your creative/artistic abilities or you can look at minimalist examples and see how their solutions use little illustration and rely instead on carefully placed and styled fonts and page elements created with CSS.
• Begin by looking at the name of all the divs in the html page that are referred to in your nonexistent stylesheet. These are what you will call your CSS rules, and the html content for your divs are already existing! Add background images, padding, placement, text styles, h1, h2, h3 tags, etc.
• My example can be seen here and you can look at its CSS as well but my design was created by ME. Do not use my design, meaning my layout choice, fonts, and illustrations. The changes I have made in my HTML file are minor - I added Javascript and a link to an external stylesheet to host Google fonts, changed the author, and that's about it. The "extra" div tags at the bottom are for div tags that you may add to the design that are extra and might include visual content or whatever else is needed for your design apart from the pre-existing divs that you MUST create rules for.
• For more guidelines look at the FAQ Page. You may use CSS3 if you want to.
• The cool thing about this is that if you are finished with your design you can submit it as well for them to use as an example... if yours is chosen, people all over the web can then see your design and learn from it!



• This is due March 20th - Approximately one month, at least 30 min before class on that day.

  
  I did the assignment last weekend, but it took me a while. I do not expect you to be able to complete a well-thought out and executed design the day before it is due. Learn from last time and begin your individual projects ahead of time, as we will complete our group projects MOSTLY in class. I think this assignment will help you understand better as you will have many many examples to look at and dissect and you already have the framework and set of rules for your own creation.
• And finally, test in browsers WHILE you are creating your CSS - NOT DREAMWEAVER. You may edit with Dreamweaver, but do NOT use the split view to go by how your site looks unless your html file is opened in a browser window. Have your browser windows open and constantly refresh to see how your code is rendered while you make it.
  
  • Minimum test in these 4 browsers:
  • Internet Explorer
  • Chrome
  • Firefox
  • Safari
  • Stretch the windows around to see how the site behaves with different screen sizes.