Problem Statement
Many people are computer illiterate, but want to or need to know how to use computers. They are often required for communication, schoolwork, and jobs and present throughout our daily lives, but some people are unaware of the possibilities that computers offer. Resources for new learners are scattered, and other tutorials assume a technical vocabulary that novice users don't have.
Design
Homepage
The TechWizard home page is very simple. As it turns out, simplicity is key, something we learned from heuristics and validated in user testing. We were pleased when some of our test users commented on how refreshing the simplicity of the layout was. At one point, there used to be a search bar at the bottom of the page, but it was removed because it was impractical. The text size on the buttons changed in response to feedback received during studio.
Tutorial Listing
The tutorial listing page has changed little since it's beginning. When doing paper prototyping, it was the clear winner over the alternative of simply displaying everything at once. We sacrificed some of the link affordance of the light blue buttons in exchange for the affordance of buttons, which we thought would be more universal and likely to be clicked on. One of the things that we did was eliminate the indentation on the tutorial buttons that was used to have after receiving several comments about it.
Tutorial
Easily the most complicated page, the tutorial page changed the most. Even after both rounds of paper prototyping, we realized we still weren't sure what it should look like. Still, the slide system had a lot of fans and our user testers really liked them as well. This takes advantage of chunking for a population that needs to absorb new things in small doses. The prereqs/related jumped from the top to the sidebar, because it seemed most people expected (read: consistency) them to appear there.
General Decisions
In general, most buttons on TechWizard are much bigger than normal, in accordance with Fitt's law and visibility assuming a generally older population. Each page is very minimalistic to prevent confusion. We tried to create categories that we thought would appeal to users based off what we gleamed from talking with them.
Implementation
http://web.mit.edu/sarab609/www/techwizard/
TechWizard is a fairly simple site with a simple backend. For the tutorial listing, code pulls category and tutorial information from a simple JSON database. Since we did not produce a full websites worth of content, most of this 'dynamic' data is actually the same data loaded for most requests. Tutorial pages are hardcoded, but they make use of includes to have a common header, footer, and other common elements.
When we made the decision to structure the site into specific categories, each with subcategories, we were unwittingly laying out a database schema that was had to obey during our implementation. Our choice to not use a templating engine due to external factors made it more difficult to develop but ultimately doesn't effect the final appearance or usability of the site.
Evaluation
We presented users with the following Briefing and tasks list, and also had the user explore the site afterwards.
Briefing
You will be using TechWizard, a site designed to help people who aren't good with computers become good with computers.
As TechWizard is still being prototyped, most tutorials aren't yet written. Many buttons on the site will redirect you to a functioning page, don't be alarmed if this happens.
Imagine that you want to learn everything there is to getting an email account and writing emails.
Tasks
Find the first tutorial in the sequence on emails
Read the following tutorials in order
- Choosing a mail client
- Writing a new email
- Using CC and BCC
Pretend you want to learn about the internet and find the category listing.
User 1
User 1 is 50+ and is taking a computer class at a community college. User1 is generally unable to use web browsers and MS Office beyond the basics, but knows what the different applications do. User1 is the type who double clicks everything and is bad at switching between applications.
The user was briefed with the above briefing and then given the first task.
We were pleased that User1 was able to accomplish all the tasks with minimal difficulty and commented that they really enjoyed the simplicity.
One thing we identified from User1 is that there should be some sort of progress bar or progress indicator in the tutorials.
User 2
User 2 is over 50 years of age but is surrounded by her technically literate children and husband. She is familiar with simple web browsing and can use a smartphone with some degree of efficiency. She however is far from an expert user, having had trouble navigating to her email using the new windows 8 (in an attempt to conduct this survey).
She discovered a bug with internet explorer that listed all of the tutorials at once, rather than hiding them until their header is pressed and called the page cluttered. When the error was pointed out, she was much happier with the layout. She also complained about the use of CC / BCC in one of the tutorial titles, claiming that the use of unexplained acronyms was particularly unclear (she also later made various criticisms about technical jargon).
From this, we might want to make a greater effort of simplifying our word choice, expanding acronyms, or at the very list providing annotations or explanations for technical terms that cannot be reduced as such.
(Perhaps we should also fix severe internet explorer issues, if we had a bit more time).
She also complained that the "fun facts" section only had 3 facts, and disputed a bunch of them. Perhaps fun facts are more of a distraction / unnecessary than fun.
In exploring the particular tutorials, she couldn't tell that the inactive and un-clickable previous/next navigation buttons were grayed out and suggested that they might as well not be there at all if they're not clickable - a great suggestion! She also was confused about the beginning slide's previous button and the ending slide's next button taking her to a different tutorial, having said "Next doesn't do anything when I get to the end," which might either be developed into a feature, or simply remove the buttons when they're inactive in accordance with the previous observation.
Also, in watching her explore the website we noticed that while easy to explore from a subject to its pre-requirements, you first have to return to the tutorial listing and then re-find the tutorial you had left to return to it. Instead of having a back to tutorial listing button, or perhaps instead of the back to home button, we should have a back to previous page button (as presumably the browser's own back button isn't super familiar to our website's users). Additionally, it might be useful to have an additional field in the sidebar for the next "level" of tutorials.
User 3
User 3 is an M.D. who works at an administrative level in his Department at the County.
User 3 is reasonably competent with computers, but has issues with things he has never seen before and seemed like a good member of the target population that was much more competent than User 1 and User 2.
User 3 jumped straight to the correct category and tutorial and was able to find the tutorials asked for fairly quickly. They did stumble when trying to find out about internet, instead checking the email tutorial category listing exhaustively before going back to TechWizard home. However, they may have been trying to be extra pedantic given that they were "user testing."
User 3 likes the layout and relative simplicity of each page. However, they disliked the technical terms such as "Mail Client", suggesting "client" should be replaced by "provider" or another more identifiable term, and the technical term be placed in parenthesis near by. The buttons for the tutorials, while big and easy to see, did not immediately suggest to them that one was a heading and one was a link to another location.
Problems
Track State (Tog 15) - Users can't tell when they've reached the last slide on the tutorial (buttons grey out, but too subtle) - Minor - Add a progress bar or x/y text field.
Error Prevention (Nielson 7) - User double clicking on subcategory buttons causes tutorials to slide out and back in - Minor - Put a timer on the buttons
Other Problems? Our testers were not the discerning type.
Reflection
Paper prototyping was a cool technique to learn, and was particularly useful for developing a better idea of an appropriate layout, design, and page hierarchy that made sense without wasting a huge amount of time on unsuccessful iterations. We also found the canned prototype to be incredibly useful once we had a narrower potential design space , as it escaped the issues users had with using their imaginations to explore the paper prototypes and gave us a better idea of the limitations we would face in implementation.
User testing the various prototypes also rapidly revealed design issues that we hadn't though of, in particular many things seemed obvious to users that were not obvious to us.
If we had more time, we would've liked to explore making a site with Rails or another templating engine. Unfortunately, the simplicity of TechWizard and the time commitment we each faced forced us to go the simple route.