Scenario

Odysseus has taken pictures with his digital camera and (barely) managed to put them onto his computer.  Now he wants to show his friends, but doesn't know how to go about doing it.  He uses TechWizard to find the information he needs to accomplish his task.

Jesse's Sketches

Sketch 1

This first design features much more of a "guided intro" style to the front page than the others.  In general, there's a lot of emphasis on finding the right tutorial by skill level.  This design features large buttons, and links will be very prominent (no image links that aren't obviously buttons, for instance).  This is to make the site more elderly friendly, since they don't know the cues that younger users are used to from growing up navigating the internet.  A dictionary is also put front and center and extra dictionary functionality is included to make them more at home with the "technical" terms they will be reading.

Sketch 2

More or less a standard website design, it features large category selectors on the front page to (hopefully) funnel users to the tutorials they are looking for.  The content surrounding these selectors would probably be frame content that would show up on every page.

Sketch 3

This design is centered around the idea of tasks.  A task is a set of tutorials that link together to accomplish something.  Tasks not featured on the front page would be listed on a page with functionality to narrow down the results.  There'd also be a way to view individual tutorials, but they would not be the focus.

Marco's Sketches

Sketch 1

This design tries to simplify finding the correct tutorial by starting at broad categories and narrowing down to smaller ones, making it easier to find the tutorial they need in a few steps. It also offers help and search functionality. The tutorials page is presented as a step by step list, with pictures or other additional materials.

Sketch 2

This design seeks to be efficient by offering a search bar and an array of the most common topics / tutorials used. The search results screen tries to bring up all related issues, simplifying the task of finding the necessary tutorial. The tutorial page features a table of contents that highlights the major steps in a tutorial, and also shows other related tutorials.

Sketch 3

This design initially presents the most common topics, but also allows the user to expand advanced topics or search for what they need. The subcategory page is expanded to give an overview of the topic, and lists the associated tutorials. Tutorials here show one step at a time, listing related materials at each step, potentially clarifying the process.

Sara's Sketches

Sketch 1

This design tries to accommodate all types of users as easily as possible.  It begins with a pop-up asking how well the user knows how to use computers, and changes some features of the display (e.g. shows hints) based on the response.  The tutorial format is similar to a movie or slideshow, in that a user can skip to the parts of the tutorial that they need using the progress bar on the bottom, or simply watch the entire thing.

Sketch 2

This design caters to less advanced users, and accommodates the elderly by immediately offering a "large font" option.  Tutorials are presented step-by-step, making sure that users have all the prerequisites, such as having an email address in order to share photos using email.  Technical terms are avoided.  Hints on how to use the website are provided in a sidebar.

Sketch 3

The design is simple enough for beginners to use, but tries to have the features of most other websites to ensure that more advanced users are not turned off by the simplicity, thinking that there is nothing new for them to learn.  For example, users can make an account to track their progress.  Tasks are separated, so that users can only view relevant portions, or view the tutorial as a whole.

Storyboards & Designs

S&D 1

S&D 2

S&D 3

Analysis

S&D 1

This design is (we feel) fairly learnable at the cost of efficiency.  It uses prompts to help the user navigate the site and find the tutorial they need, reducing the task of finding out how the website works to simple point and click operations.  As a result, however, it is more difficult to speed to a specific tutorial and requires a lot of user interaction.  User interaction is almost always a cause of slowdown and there are lots of tasks here.  It should be offset by the fact that the target audience may not be able to accomplish their task with a more efficient interface.  We imagine that the UI would have navigation elements to make it easy to backtrack in the event that the user clicks the wrong button.  It is also fairly safe to use because there aren't many elements which, if the user performed the wrong action with, would put them in an irrecoverable state or make some change that they couldn't undo.

S&D 2

This design's homepage is centered around a large searchbar which suggests tutorials as key words are typed in, making it extremely efficient.  A selection of commonly viewed tutorials is also available below the search bar for even quicker access.  The tutorial view itself is structured so you can see at a glance how much more there is to the tutorial and skip around very easily.  While a moderately skilled user could learn this interface easily, it probably suffers from usability issues with the unskilled user class because of the computer-intuition required.  Anyone who can use a search bar will have an easy time using the home page, at least, but the slide interface of the tutorials, while easy to use, might be offputting to some.  The slide model has the property that despite looking daunting at first, it is actually fairly easy to go forwards and backwards.  As a result, any misplaced clicks or confused actions are safe and easily recovered from.

S&D 3

Design 3 borrows a bit of appearance from w3schools, which hopefully means that it's usable.  It organizes tasks by difficulty, which hopefully makes it efficient and easy to learn.  There is also a help feature built into the site to aid new users learn faster.  The prereqs listed above each tutorial make it efficient to find other relevant tutorials and figure out if the user knows everything to attempt the current tutorial.  There is also a tutorial listing that lets users filter by key factors such as difficulty to find a tutorial even if they can't describe it.  We anticipate that this page might present initial difficulties to novices, but that it is actually fairly learnable and will quickly start helping them find tutorials.  There is, however, a lot more content on some of the pages here, making it easier for some users to get lost or accidentally click into another section.  There is potential for lapses and slips here due the filtering page.  For this website, the best safety net is probably the user's browser's back button.