User Testing 2 -- Digital Prototype Demonstration

Main Page: contains the logo image and its enter button 

Issue Wall Page: contains the top navigation bar and issues wall

This page contains the top 10 main issues happening in the daily base.

Each issue corresponds with a category logo, title and the issue image.

 Specific Issue Page: contains the issue title page, title and its news organisations summary.

Each news organisation contains the voting buttons -- symbolised by the thumbs up and thumbs down.

Each News Organisations Summary Card 

News Article Page: contains the title image, organisation's image logo, article title, article content, the live comments, toggle button of the live comments and input bar of the comment.

Live Comment Section: contains the input bar, toggle button and a submission button.

The live comment will be recorded to the database. All the users will see your live comments based on the paragraph they see.

Voting section inside each article: the vote will affect the ranking about the news organisation's ranking from the specific issue page.

The team conducted a digital prototype demonstration in the workshop on Friday. In the session, we also required our tutors and colleagues to join the user testing session.

During the testing we briefly explained the general idea of the In The Know, and introduced the basic interaction of the website prototype. In the testing section, we expected the users to complete the following instructions:

• Enter the issue wall page
• Read an article and make a comment
• Vote the news organisation

We invited 7 participants to join the testing session, and we expected they can smoothly go through each of the steps. For each participants we recorded their responses when using In The Know, taking notes on their frustrations and confusions so we can have the direct feedback from our users.

In the user testing session, we received a lot of position feedback about the quality, design and content of the digital prototype. Our testers said that the issue wall page is an interesting design for displaying and arranging different news issues into single platform. Moreover, they satisfy with the functioning live comments that In The Know presented to the users. 

Direct feedback from the participants:

• Some participants can not see the button from the main page due to their screen resolutions.
• All of our users could notice the live comments. Some users did not notice the input bar provided at the bottom, and they are not sure how to use the input bar and comment toggle button when they play with the live comments.
• Some users expected the news organisation's name in the text form will be displayed on each of the article page.
• Some of the users thought that each article should be presented with the writer's name.
• Some of the users said the "like" and "dislike" buttons should not use the same colour.

Summarising all the users feedback, we obtained the following suggestions on improving the quality of the website and enhancing the design:

• For the main page, make the "In The Know" image clickable so it can be an alternative way to start exploring the news
• Introduce the live comment to users when you firstly entered the game -- design a tutorial for users
• Added the name or news organisation and the author's name to the article or somewhere else -- make sure users can understand which news organisation is this
• Change the colour of voting buttons -- make them different
• Added a section for users to write and view in-deep comments -- set up a discussion board at the bottom of the page

According to the user's feedback, we found out these minor problems of the prototype and decide to improve the prototype based on the suggestions they gave on the testing session. However, due to the time limitation, we are not able to follow all the recommendations from our users, and the team decided to accepts the approachable changes -- the button colours and a clickable logo image.

Mockup 2 ---- Digital Prototype

This is the index.html page which contains a high quality video background, and a button to allow user to enter and explore the news. Users will be directed to this page when they enter the website. 

This is the main issue page which contains the top 10 best issues from the globe. Each block contains the issue image, logo of the issue category and the title of that issue. For the navigation bar, the "In The Know" logo is placed on the left hand side for directing users back to the main page. On the right hand side there are the supportive linkage of our team blog, video and the login/sign up (which is not functioning).

We designed the timeline-view and the ranking view of articles. The time-line view is designed for sorting news articles based on its publishing time. The ranking view is designed for sorting news articles based on its ranking (the number of likes minus the number of dislikes). In order to switch between these pages, users can use the toggle button to change the view they wanted.

The article page contains the header image, a title with the news organisation logo, the article content, live comments and the input field of the comments. These comments will be appeared on the screen based on the time when users post their texts.

Design Prototype -- In The Know

http://deco3500-mapsofnews.uqcloud.net/

In The Know --- Promotional Video

Second lot of issues

ASSAD VISITS PUTIN

BBC: http://www.bbc.com/news/world-europe-34590561

CNN: http://edition.cnn.com/2015/10/21/middleeast/syria-civil-war/index.html

ABC: http://www.abc.net.au/news/2015-10-21/syrias-assad-makes-surprise-visit-to-moscow-for-talks-with-putin/6874838

The Guardian:

The New York Times: http://www.nytimes.com/2015/10/22/world/middleeast/assad-putin-syria-russia.html

The Australian: http://www.theaustralian.com.au/news/world/bashar-assad-in-lightning-visit-to-meet-vladimir-putin-in-moscow/story-e6frg6so-1227577506225

China Daily: http://www.chinadaily.com.cn/cndy/2015-10/22/content_22249850.htm

Times of India: http://timesofindia.indiatimes.com/world/europe/Syrian-president-Bashar-al-Assad-thanks-Putin-for-Russias-support-Kremlin-says/articleshow/49478599.cms

BIDEN NOT RUNNING FOR PRESIDENT

BBC: http://www.bbc.com/news/world-us-canada-34594675

CCN: http://edition.cnn.com/2015/10/21/politics/joe-biden-not-running-2016-election/index.html

ABC: http://www.abc.net.au/news/2015-10-22/us-vice-president-joe-biden-will-not-run-for-president/6875008

The Guardian: http://www.theguardian.com/us-news/2015/oct/21/joe-biden-not-running-president-2016-election

The New York Times: http://www.nytimes.com/2015/10/22/us/joe-biden-concludes-theres-no-time-for-a-2016-run.html

The Australian: http://www.theaustralian.com.au/news/joe-biden-will-not-run-for-us-president-in-the-2016-elections/story-e6frg6n6-1227577834765

China Daily: http://europe.chinadaily.com.cn/world/2015-10/22/content_22252224.htm

Times of India: http://timesofindia.indiatimes.com/world/us/US-vice-president-Joe-Biden-says-he-will-not-run-for-president-in-2016/articleshow/49486439.cms

GERMANY REAFFIRM RESPONSIBILITY OF HOLOCAUST

BBC: http://www.bbc.com/news/world-middle-east-34599706

CNN: http://edition.cnn.com/2015/10/21/middleeast/netanyahu-hitler-grand-mufti-holocaust/index.html

ABC:

The Guardian: http://www.theguardian.com/world/2015/oct/21/germany-refuses-accept-binjamin-netanyahu-claim-adolf-hitler-holocaust

The New York Times: http://www.nytimes.com/2015/10/22/world/middleeast/netanyahu-saying-palestinian-mufti-inspired-holocaust-draws-broad-criticism.html

The Australian:

China Daily:

Times of India:

First lot of issues

LAMAR ODOM FOUND UNCONSCIOUS

BBC: http://www.bbc.com/news/world-us-canada-34524083

CNN: http://edition.cnn.com/2015/10/13/us/lamar-odom-hospitalized/index.html

ABC: http://www.abc.net.au/news/2015-10-15/lamar-odom-unconscious-brothel-nba-hospital/6855804

The Guardian: http://www.theguardian.com/sport/2015/oct/14/former-laker-lamar-odom-in-critical-condition-after-being-found-unconscious

NYT: http://www.nytimes.com/2015/10/15/sports/lamar-odom-ex-nba-star-is-found-unconscious-in-nevada-brothel.html?_r=0

The Australian:

http://www.theaustralian.com.au/news/latest-news/lamar-odom-fighting-for-life/story-fn3dxix6-1227568771084

China Daily: http://europe.chinadaily.com.cn/sports/2015-10/15/content_22191646.htm

Times of India:  http://timesofindia.indiatimes.com/sports/nba/off-the-court/Ex-NBA-champ-Lamar-Odom-found-unconscious-in-Nevada-brothel/articleshow/49347485.cms

AUSTRALIA BEAT SCOTLAND IN RUGBY WORLD CUP

BBC: http://www.bbc.com/sport/0/rugby-union/34550876

CNN: http://bleacherreport.com/articles/2580274-australia-vs-scotland-score-reaction-from-rugby-world-cup-2015-quarter-final

ABC: http://www.abc.net.au/news/2015-10-19/wallabies-scrape-past-scotland-35-34-in-world-cup-classic/6864516

 The Guardian: http://www.theguardian.com/sport/2015/oct/18/australia-scotland-rugby-world-cup-match-report

The New York Times: http://www.nytimes.com/reuters/2015/10/19/sports/rugby/19reuters-rugby-union-world-australia.html

The Australian: http://www.foxsports.com.au/rugby/rugby-world-cup-wallabies-survive-epic-encounter-against-scotland-to-book-semi-final-spot/story-e6frf4pu-1227573634705

China Daily:

Times of India:

  

LIBERAL PARTY WINS CANADIAN ELECTION

BBC: http://www.bbc.com/news/world-us-canada-34578213

CNN: http://edition.cnn.com/2015/10/19/world/canadian-election/index.html

ABC: http://www.abc.net.au/news/2015-10-20/justin-trudeau-elected-as-canadas-next-prime-minister/6869310

The Gaurdian: http://www.theguardian.com/world/2015/oct/20/justin-trudeau-set-to-become-pm-as-liberals-sweep-board-in-canada-election

The New York Times: http://www.nytimes.com/2015/10/20/world/americas/canada-election-stephen-harper-justin-trudeau.html?action=click&contentCollection=Americas&module=MostPopularFB&version=Full&region=Marginalia&src=me&pgtype=article

The Australian: http://www.theaustralian.com.au/business/latest/liberals-win-canadian-election-cbc/story-e6frg90f-1227575637450

China Daily: http://www.chinadaily.com.cn/world/2015-10/20/content_22230296.htm

Times of India: http://timesofindia.indiatimes.com/world/us/Liberals-unseat-Conservatives-in-Canada-election/articleshow/49463508.cms

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.