Week 7 of Interaction Design for Web is complete. In week seven we focussed on prototype evaluation through usability testing of our prototype website and completing activities to problem solve coding problems.

Prototype Evaluation: User Testing

To begin the process of user testing I first looked at how to approach user testing in a way that could provide valuable results. I read the article A Guide To Heuristic Website Reviews and examined Using the 5Es to understand users as well as the User Experience Honeycomb. These provided a great insight into the information that should be collected to gain a significant insight into how users interact with the site and ways that problems can be resolved (from results).

Key Requirements

1. Target Audience Groups
2. Two Screen sizes (minimum), Mobile, tablet or desktop
3. Assign Simple Tasks
4. Document progress, task flow
5. Survey for feedback

Prototype Testing: Tasks

To begin the creation of the prototype tasks, I considered what the most important aspects of the website are. The website focusses on providing posts about stationery and therefore they are the main focal point. The steps involved in getting to posts (along with general interaction and opinion of the site) are the main priority.

1. Task 1: View the latest post
   Instructions: Visit the website http://paperdear.com/development/pdprototype/ and view the latest post.
   Purpose: Tracks the visibility of the featured post section and how are user interacts with it.
2. Task 2: View posts in a category
   Instructions: Visit the website http://paperdear.com/development/pdprototype/ and view a post within a category.
   Purpose: Tracks how well a user interacts with the navigation and submenus as well as the visibility of post structure within category pages.
3. Task 3: View older posts
   Instructions: Visit the website http://paperdear.com/development/pdprototype/ and view older posts.
   Purpose: Tracks how well a user can identify the ‘archives’ page.
4. Task 4: Visit a post and navigate to another post
   Instructions: Visit the website http://paperdear.com/development/pdprototype/ and view a post. Then navigate to another post.
   Purpose: Tracks how a user interacts with the website to find another post. For example, if the sidebar, home page or menu options (categories, styles or archives) are used
5. Task 5: View the Terms of Service Page
   Instructions: Visit the website http://paperdear.com/development/pdprototype/ and view the Terms of Service Page.
   Purpose: Tracks the visibility of the footer menu and if the user is familiar with this placement.

Note: Because the website is in a prototype stage I have not included testing of forms (such as contact or search) or asked the user to find a specific post or page. This will be implemented in further testing.

Prototype Testing: Survey Questions

To receive feedback on the user testing a survey is created and shared with the user to complete. The survey needs to be able to capture all the thoughts that the user has, in a way that is easy for them to understand. It needs to provide as much information as possible while also ensuring the user is not overwhelmed. Therefore I have decided to break the survey into specific sections. Task and website specific questions will be based on a three point option, that varies for each.

To further my understanding of user research and the creation of surveys I looked at several online articles, which included; Better User Research Through Surveys, 15 useful user feedback questions for online surveys, Useful Survey Questions for User Feedback Surveys.

Survey Questions

General

1. Which group best describes you?
   – University Student (aged 20-25)
   – Mother (35-44))
2. What device did you use to visit the website?
   – Phone
   – Tablet
   – Laptop
   – Desktop
   – Other
3. Which task did you complete?
   – Task 1 – view the latest post
   – Task 2 – view posts in a category
   – Task 3 – view older posts
   – Task 4 – visit a post and navigate to another post
   – Task 5 – view the Terms of Service page

Tasks

1. Were you able to complete the task?
   – No (0)
   – Unsure (1)
   – Yes (2)
2. How would you rate the complexity of the task?
   – Hard (0)
   – Unsure (1)
   – Easy (2)
3. How long did it take to complete the task?
   – Didn’t Complete (0)
   – 3 to 5 minutes (1)
   – 1 to 2 minutes (2)
4. How did you complete the task?
   Please provide the steps taken. For example; loaded the home page, tapped/clicked on a page..
5. What changes could be made to make the task easier to complete?
   Please provide any suggestions you have.

General Website Feedback

1. How would you rate the website overall?
   – Bad (0)
   – Okay (1)
   – Good (2)
2. What did you like about the website?
   Please list any features you liked.
3. What did you dislike about the website?
   Please list any features you dislike or could be improved.
4. What would you change to make the website better?
   Please provide any suggestions you have.

Website: Information architecture

1. Is the layout clear and easy to follow?
   – No (0)
   – Somewhat (1)
   – Yes (2)

Website: Visual design

1. Does the style of the website suit a stationery inspiration site?
   – No (0)
   – Somewhat (1)
   – Yes (2)
2. Is the text easy to read?
   – No (0)
   – Somewhat (1)
   – Yes (3)
3.  Do headings stand out?
   – No (o)
   – Somewhat (1)
   – Yes (2)

Website: Interaction design

1. Are buttons clear and easy to use?
   – No (0)
   – Somewhat (1)
   – Yes (2)
2. Is the menu easy to navigate?
   – No (0)
   – Somewhat (1)
   – Yes (2)

Website: Interface design

1. Is the menu easy to find?
   – No (0)
   – Somewhat (1)
   – Yes (2)
2. Can you find the website name and logo?
   – No (0)
   – Unsure (1)
   – Yes (2)
3. Can you find the header, content and footer?
   – No (0)
   – Unsure (1)
   – Yes (2)
4. Can you find the search form?
   – No (0)
   – Unsure (1)
   – Yes (2)

Question Order

1. Which group best describes you?
2. What device did you use to visit the website?
3. Which task did you complete?
4. Were you able to complete the task?
5. How would you rate the complexity of the task?
6. How long did it take to complete the task?
7. How did you complete the task?
8. What changes could be made to make the task easier to complete?
9. How would you rate the website overall?
10. What did you like about the website?
11. What did you dislike about the website?
12. What would you change to make the website better?
13. Does the style of the website suit a stationery inspiration blog?
14. Is the layout clear and easy to follow?
15. Is the text easy to read?
16. Do headings stand out?
17. Are buttons clear and easy to use?
18. Is the menu easy to find?
19. Is the menu easy to navigate?
20. Can you find the website name and logo?
21. Can you find the header, content and footer?
22. Can you find the search form?

Prototype Testing: Creating Survey

I created a form on Google Forms which was broken into sections which covered general information, task specific questions and feedback on the website. I tried to make the form as clear as possible and make the questions easy to read and answer.

Once the survey was created I reached out to people via social media who fit the target markets/s. I provided them with an overview of the project, task to complete and the survey link.

I ran out of time this week to compile the survey results, but I will do this heading into next week. 😁

Activities

The weekly activities provide several code examples that are ‘broken’ and require some editing to fix. I have forked each original example via Codepen. I have hidden old elements before they were changed.

Grid System Problem 1
Grid System Problem 2
Grid System Problem 3

Navigation Problem 1
Navigation Problem 2
Navigation Problem 3