CS 318: Project Site Test and Sitemap – due on March 5
Your next task in the semester project comes in two pieces:
- Conduct user studies on several existing websites similar to the one you will design.
- Compose a sitemap to describe the overall architecture of your site.
We describe each of these in turn.
Task 1: Comparable Site Test
Identify and familiarize yourself with three existing websites that are similar in goals, style, organization, and features to the site that you plan to build for your client.
User Test
Enlist at least two people that are members of your target audience to test the comparable sites while you observe them. Conduct the tests independently so the users do not influence each other others’ responses.
Follow this procedure during each observation:
- Watch each person freely navigate each site for 5-7 minutes while you do the following:
- Say, “Try to think out loud as much as possible as you explore the site.”
- Say, “Look around this page and tell me what you think everything is. Also, tell me on what you would be likely to click.”
- Ask about what each user likes and doesn’t like about each site—and why.
- Take notes on their behaviors and thought stream.
- Ask each user to complete three tasks of your choosing that users of sites like these might need to perform. Depending on the nature of the sites, these might include: Watch carefully as each user performs each task. Ask each user the following questions:
- Contacting the organization.
- Identifying the people on the staff of the organization.
- Finding the date and time of a particular show.
- What worked as expected in accomplishing the tasks?
- What didn’t work as expected?
- What features would you want to be sure were part of a site like this?
- What features do you think should be included that were not?
- What information on the site should be kept? What discarded?
- What information do you think should have been included that was not?
- What do you like best about the site?
Client Test
Repeat the above steps with your client, with an additional emphasis on gaining insight about the information and features that your client wants for the website.
Task 2: Sitemap
Based on the results of your comparable site tests, design the overall structure of your site and identify the titles of your site’s pages. You will provide this information in two forms: a table and a hierarchical graph.
Page Table
Create a 2-column table with a row for the main content topics of your site, each corresponding to a single page. In the first column, list the page’s title. In the second, provide a description of that page’s purpose and content. For example, here are a couple of entries for the fictitious business Shingle Men:
| title | description |
|---|---|
| Shingle Men – Home | The main page of the site, with a carousel of pictures of Biff and Franco looking industrious but friendly, with at least half of the photos of them on rooftops. Navigation links branch off to the other pages. |
| Shingle Men – About Us | A page describing the beginnings of the company, in which high school friends Biff and Franco started shingling houses around town to support their single-parent families. |
| … | … |
Page Graph
Develop a digital view of the your site’s hierarchical structure. Use a tool of your choice. Your instructor used draw.io to create this example:
Nota Bene
Bear in mind the following:
- Make sure that the site’s information satisfies the site’s goals that you stated in your project proposal.
- If you find that too much content appears on one page, decompose the big topic into several small pages branching off from an overall page.
- Page titles should make sense out of context. When the user bookmarks a page, the bookmark’s label defaults to the page’s title. Make sure this default label can be used to identify the page. For example, don’t use “Contact”—which is ambigious—but rather “Contact Shingle Men”.
- At the same time, titles should be as brief as possible so they can appear in full in the browser’s title bar and tab bar.
- Your site must have a minimum of five pages.
Think carefully about the design of the site. Once the site map and details are submitted and accepted, this becomes a contract between you and your “employer.” Your instructor acts as a proxy for your employer and will uphold your employer’s interests. Therefore, your grade will be based on how well you meet the stated contract. If you dream of a more extensive site, indicate those pages as optional.
User Study and Sitemap Deliverables
Create a document with the following content:
- Title page.
- Site title.
- Business overview, revised from the project proposal as necessary.
- Site goals, revised from the project proposal as necessary.
- Site’s intended audience, revised from the project proposal as necessary.
- Paragraph describing the comparable site test, listing the URLs of the websites, the names and short descriptions of testers, and the list of site-specific tasks.
- One paragraph per user describing the results of your comparable site test. Include the feedback from the site-specific tasks, as well as the answers to the general questions.
- Paragraph describing the results of your Comparable Site test from your client.
- Paragraph summarizing what you learned from your comparable Site tests. Give one or more specific examples of design decisions that the test influenced. Avoid vague statements like, “I learned a lot!”
- The page table.
- The page graph.
Present this content in a professional manner. You may use design software of your choice.
Turn in a paper copy of your document at the beginning of class on March 5.
Proposals must be on time to receive credit. Proposals received after the posted due date will not receive any credit, but must be completed regardless. Project deliverables build upon each other, so you must complete this step in order to complete the next project design deliverable.