W8 -- User Testing Stage 1

In week 8 we conducted a paper prototype user testing for our participants.

In the testing session, the testing instruction is set below:

• Select one issue from the economic category
• Change to the ranking view
• Read one article and make your comment
• Rate that article

We asked 6 participants to join the testing session. During the testing we recorded their interaction steps, responses to every elements of the page, and their direct feedback when interacting with the prototype.

1st tester:

• Processes:
• He completed the first task with no problems.
• For the second task, he spent 1 minute on finding the switch view button from the page. He thought hiding the switch button from the page is not a good way as users can't find it or hard to notice it.
• He was quite confused of what's going on on the article page. He wished to turn the flying comments off but he spent more that 1 minute to hide all the user comments.
• He completed the forth task with no problems.
• Feedback:
• Move the switch view button on the page
• Think about the location that all the comments will appear: inside the text or outside the text? should it be displayed on the whole page or just s small part of the article (for example, comments will appear on the paragraph where is placed at the center of screen)
• He would like to use "thumbs up" and "thumbs down" to indicate the like and dislike function.

Our first tester said that he could not understand the meaning of the vote symbols (they are the up and down arrows). Therefore, for the user testing feedback question, we will add an additional question about asking their opinions for the vote buttons.

2nd tester:

• Process:
• She completed the first task with no problems.
• She completed the second task with no problems.
• For the their task, the user thought that the flying comments are too hard to see if each comment contains too many characters. Beside, she was wondering how many comments will be displayed in one time, and how many history comments can be saved in the server.
• She completed the forth task with no problems.
• She could understand the arrow means on the page.
• Feedback:
• Consider the storage limitation of history comments: users should be able to see all the value comments --- if there is some good comments made in the past, but has been erased by the comment manager.
• How to make sure all the comments are readable on the article page?
• Character limitations on each comments?

3rd tester:

• Process:
• He completed the first task with no problem.
• He spent more than 30 seconds on finding the switch button, and he was wondering how each article is sorted on the ranking view -- is that sorted by the "likes"? -- if yes, what about articles that contains high "likes" and high "dislikes".
• He completed the commenting with no problem.
• He completed the forth task with no problems.
• He could understand the arrow means on the page
• Feedback:
• Make the switch view button easy to recognise
• Think about the position to display all the flying comments

4th tester:

• Process:
• She completed the first task with no problems.
• She completed the second task with no problems.
• She completed the third task with no problems.
• She completed the forth task with no problems.
• She thought the like and dislike is easy to understand, but she would like to use something else to make it looks better -- an information card to contain these two buttons
• Feedback:
• The whole web application still looks like a website -- they need some fancier feature in the web application
• The tool button is hard to recognise -- it's more like a configuration button
• Looking for interesting intersections -- the like and dislike is easy to understand, but she would like to use something else to make it looks better -- an information card to contain these two buttons

5th and 6th tester:

• Process
• They completed the first task with no problems.
• They completed the second task with no problems. 
• They completed the third task with no problems. However, they have a lot of questions on the article itself as they are not really sure how to define a "quality news". Besides, for the flying comments, they would worry about the number of comments appearing on the screen. They also asked a question about the way that these comments appear on the screen -- fade in fade out or slide in slide out?
• They completed the forth task with no problems. However, they raised a question: does the vote increase news bias? Are these news sorted by the "likes"? Then what the "dislikes" stands for?
• Feedback
• UI design: make it more interactive, and try to get rid of the traditional way of designing a website --- an interactive webpage will be great
• The live comments: change the way the website display all these comments -- use fade-in fade-out
• The quality of news: define quality news and think about the importance of quality in your application
• Button for rank view is not clear on the interface. Check on other popular interfaces for buttons/list view to adopt.
• Check other websites how they show these issues to make it more user-friendly and improve it.
• Relate it back to a newspaper more than a website. Old style design - make it more trendy
  Looks more like an NGO
• • Like/dislike source OR story?
  • What are they ranking it (like/dislike) on? eg. Compared to the other stories? or What are they comparing it to? What are the social aspects? What does the ranking mean?
  
  
• Make the back button more obvious / “Back to ranking view”

Summarising all the user feedbacks, we should think about the following problems:

• UI design: think about the way to make a website interactive, engaging and interesting
• Live comment design: some users think the pop-up comments are too annoying --- how to control the number of comments displaying on the page
• The change view button: instead of hiding it from the menu, think about place it on the page as a toggle or a switch button
• Article contents: pick the right article for your application
• Ranking system: What are they ranking it (like/dislike) on? eg. Compared to the other stories? or What are they comparing it to? What are the social aspects? What does the ranking mean?

The team leader took these questions and feedback into consideration, so the web application design can design an application which the features are enhanced based on these feedback.

Therefore, the team decided to split up into two: the journalism students will search for biased stories from different sources and package them into one issue. The deco students will search for interactive ways to innovate the web app, and find the user preferences on the interaction types, colours, layouts and expected application interface.