...
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.
| Wiki Markup |
|---|
Tutorial !Screenshot from 2013-05-14 18:13:29.png|border=1! |
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.ezproxyberklee.flo.org/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
...
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.