...
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
| Wiki Markup |
|---|
!im1.png|border=1! !Screenshot from 2013-05-14 18:12:50.png|border=1! |
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.
...
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.
...
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
...