Online hosted prototype

                     Click this link : Online hosted prototype

Heuristic Evaluation Report

100% Prototype Implementation - 31/03/2015

Usability Evaluation Report - Technical User

Human Computer Interaction

Usability Evaluation Report

Dated

03/18/2015

 Prepared By

NAME:  Mahanama M.G.G.D.D.P. – IT13124854

                Chiththananda H.K.I.C.L. - IT13121884  

SIGNATURE :     

Brief Description of User

The selected user is currently a 3^rd year student who is reading B.Sc. (Hons) Information Technology degree at SLIIT. He has a good as well as bitter experience about using different news websites. Since the selected prototype is basically a news website the user should have some familiarity about news websites. That is why we selected this user as our participant for usability evaluation.

Process Overview

Methods used to process the usability evaluation are Questionnaires, Videotapes, Think aloud protocols etc. We used SLIIT 7^th floor lecture hall as the location for the usability evaluation. Because it was easier and less noisy.

1. Can you find the top story of this page?
2. There are several top stories in this page, Can you view them?
3. Can you find the last updated time of the page?
4. Can you view the sports news?
5. Can you view a full story of a news?
6. Can you go to the business section?
7. Can you share this in one of your social network?
8. Can you go to the home?
9. What do you think about the advertisements on this page?
10. Can you search a particular news?

Transcript

I- [00.16] Can you find the top story of this page?

U-[00.18] Here it is.This is the top story.

I-[00.23] Ok. Now there are several top stories in this page, Can you view them?

U-[00.30] from here I can click this button

I-[00.33] Ok.Thats fine.

I-[00.43] Now can you find the last updated time of the page?

U-[00.51] Last updated time. (Scroll down the page)

I-[01.05] actually it should be in the top of the page

U-[01.10] Ah! (Scroll up the page) here it is.

I-[01.17] Ok.so did you find any difficulties to find it?

U-[01.22] it’s not much visible

I-[01.26] Now can you view the world news?

U-[01.29] yes. Here it is.

I-[01.36] Now Can you view the sports news?

U-[01.44] (User clicks the sports section in the menu)

I-[01.54] now you can see some news stories here right? So can you view a full story of a news?

U-[02.00]ok.I can click read more button.

I-[02.14] so you got it right?

U-[02.15] yes.

I-[02.22] so can you go to the business section?

U-[02.24] Ok business news is here.

I-[02.42] There also can you view a full story?

U-[02.46] (User clicks read more button)

I-[02.53] so can you share this in one of your social network? I mean find the link

U-[03.00] here is the link. And I can like this new in Facebook also, and in tweeter and there is another link to share this post .

I-[03.15] Ok. Now again. Can you go to the home?

U-[03.20] (User clicks the home button)

I-[03.23] so did you face any difficulties to find the home button?

U-[03.27] No it’s very easy.

I-[03.36] so what do you think about the advertisements on this page?

U-[03.38] all the advertisements are in this right corner I think.

I-[03.47] you can go to another sub section and see.

U-[03.53] I will go to the business section. And there also advertisements are in the right corner.

I-[04.17] Can you search a particular news?

U-[04.21] here it is the search button.

I-[04.27] ok.Thank you.

Feedback & Critical Incidence

Usability Evaluation Feedback Analysis 

#	Prototype Screen	Reference	User’s feedback/ critical incidence/ problem	Reason for negative feedback / breakdown	Scope	Severity (High/ Medium/ Low) and Justification for giving it that rating	Way(s) to rectify and any Tradeoffs (i.e., why the fix might not work)
1	See Picture 1	[01:22]	User had to spend some time to find the last updated time and date of the page	Because its not much visible	This page only.	Medium. Because user want to know about the last updated time and date of the page	Change the Font ,font size and color to highlight

picture 1

Usability Evaluation Report -Non Technical User

Usability Evaluation Report

Dated

03/18/2015

Prepared By

NAME:    Mahanama M.G.G.D.D.P - IT13124854

                 Chiththananda H.K.I.C.L  - IT13121884

SIGNATURE :      

Brief Description of User

The selected user is currently a 1st year student who is reading a degree at SLIIT. She is not that much into technical related activities and she doesn't have much experience with using news web sites. So that’s why We selected her as our non-technical user.

Process Overview

Methods used to process the usability evaluation are Questionnaires, Videotapes, Think aloud protocols etc. We used SLIIT 7^th floor lecture hall as the location for the usability evaluation. Because it was easier and it was less noisy.

1. Can you find the top story of the web page?
2. There are several top stories here. Can you view them?
3. Can you find the last updated time of the web page?
4. So what do you think about it? Do you find any difficulties?
5. Can you view the recent headlines?
6. Can you go to the world news?
7. Next can you go to the business news?
8. Do you know how to view the full story of a news?
9. Can you now go to the homepage?
10. If you want to find a particular news, can you search it?
11. If you want to put a like to this news site here how do you do it?
12. Can you find any advertisements in the site?

Transcript

I - [00:15] Can you find the top story of the web page?

U - [00:20] It’s here.

I – [00:23] There are several top stories here. Can you view them?

U – [00:32] Is it these things?

I – [00:50] No.  It’s not sliding actually. There’s a button for that.

U – [00:58] Ah.. This one.

I – [01:11] Okay. Now can you find the last updated time and date of the web page?

I - [01:41] (She is just scrolling here and there so we had to help her) It’s actually at the top of the page.

U – [01:46]] This is it.

I – [01:49] So what do you think about it?

U – [01:53] That’s very difficult to identify. It’s not that visible.

I – [02:03] Okay. Now can you find the recent headlines in this news site?

U – [02:09] Is this it?

I – [02:12] These are news stories. There’s a separate section for headlines.

U – [02:20] Here it is. But it also should be more visible than this.

I – [02:36] Can you go to the business news?

(She clicks the business tab and goes there easily)

I – [02:51] Can you view a full story of a news?

U – [03:00] (Clicks Read More button) Here it is.

I – [03:07] Now can you go to the home page?

U – [03:19] How can I go ?

I – [03:26] In the menu bar there’s a button for home.

U – [03:41] This one? (finds it after some time)

I – [03:47] If you want to search a particular news, How do you do it?

U – [04:16] Do I Need to scroll down or something ?(She takes some time to find it)

U – [04:35] Ah..This one?

I – [04:37]]Yes. So did u find any difficulty in finding it?

U – [04:42] Yeah. Because it’s along with these social media links. So it’s bit difficult to find.

I – [05:04] Can you put a like to this page using your facebook profile?

U – [05:12] Here. (She finds it easily)

I – [05:18] So can you find any advertisements in the site?

U – [05:23] These are the advertisements.

I – [05:57] You only saw the advertisements in the home page. Go to some other page and see.

U – [06:01] Here there are many advertisements. It’s too much. It’s better to reduce them, So we can easily read the news.

I – [06:29] Okay Thank you.

#	Prototype Screen	Reference	User’s feedback/ critical incidence/ problem	Reason for negative feedback / breakdown	Scope	Severity (High/ Medium/ Low) and Justification for giving it that rating	Way(s) to rectify and any Tradeoffs (i.e., why the fix might not work)
1	See Picture 1	[00:23]	User was uncomfortable in finding several top stories. She tried to swap through the images without clicking on the next button.	Because it was too small.	This page only.	Low. Because it’s only in the home page.	Change the buttons in a way that user can easily identify and also can make those top stories move automatically in a sequence.
2	See Picture 2	[01:11]	User got confused when he was searching for the last updated time of the web page. It took some time for her to find that.	Because it was too small and she couldn’t see it properly.	It’s in the master page. So it appears in everywhere.	Medium. Because it’s not a highly important section in the site.	Change the font size of it and also the color of the fonts.
3	See Picture 3	[02:03]	User had to spend some time to find the recent headlines section.	Because it’s not much visible.	This page only.	Medium. Even though it’s only in the homepage it’s an important section. So it has to be visible to the user.	Change the font size of the headlines.
4	See Picture 4	[05:57]	User finds it uncomfortable to see many advertisements in the news site.	Because User cannot read the news easily. It’s bit messed up.	In few pages.	High. Because reading news is the ultimate goal of the user and these advertisements ruin it for the user.	Reduce the number of advertisements and arrange them in an order.
5	See Picture 5	[03:47]	User was unable to find the search at first place.	Because it’s not much visible.	This page only	Medium. Even though it’s only in the homepage it’s an important section. So it has to be visible to the user.	Search icon should be more visible and if possible it should be named as “Search”.

Picture 1:

                     Picture 2:

                    Picture 3:

                   Picture 4:

                                    

                  Picture 5:

Paper Prototype video Non Technical user

Paper Prototype video Technical user

Homework 3: Paper Prototype of an Interface

     Deliverable for PART A 

 

Differences between the Versions.

1. Menu Bar

Version 1 - Here the menu bar is at the top.

Version 2 - Here the menu bar is at the left and it goes down.

Version 3 - The menu bar goes down in both sides of the page.

2. Recent Headlines

Version 1 - It’s a moving horizontal bar which is located below the menu bar.

Version 2 - It’s a moving horizontal bar which is located below the top story.

Version 3 - It’s a moving horizontal bar which is located in the top of the web page.

3. Top Story

Version 1 - It’s more highlighted and it’s animated. 3 images moves continuously.

Version 2 - It’s in the left top corner.

Version 3 - It’s highlighted than the version 2.

4. Feedback

Version 1 - It’s in the menu bar as a link.

Version 2 - It’s in the menu bar as a button.

Version 3 - It’s in the menu bar and in the left hand side as a button.

5. Last updated date and time

Version 1 - It’s in the top left corner of the page.

Version 2 - It’s in the middle and next to the recent headlines.

Version 3 - It’s in the middle below the top story.

6. Separate news categories

Version 1 - It’s a separate square shaped categories.

Version 2 - Separated categories. But more highlighted than the other two.

Version 3 - Separated categories and it’s spreading all most whole the page.

7. Advertisements

Version 1 - Here advertisements are in the left side of the page and they contain in a vertical                    section.

Version 2 - Advertisements are in the middle and also at bottom.

Version 3 - Advertisements are at the top of the page below the heading.

8. Alignment of the page

Version 1 - The whole page is taken.

Version 2 - Two vertical lines are left in both sides.

Version 3 - It’s pretty much like the version 1

9. Gallery

Version 1 - It’s more like a button and located near top story.

Version 2 - It’s a link and it’s located at the bottom.

Version 3 - It’s a button and it’s in the menu bar.

Best Version out of all three versions in each feature

1. Menu Bar

Here Version 1 is much better than the other two versions. Because it’s more visible to the user and also it doesn't take much space in the page.

2. Recent Headlines

Here also Version 1 is the best. Because it’s more visible to the user. So he can easily read those moving news headlines.

3. Top Story

Version 1 represents the best way of the Top story. It’s more highlighted than the other two versions.

4. Feedback

Feedback is much better as a button in the menu bar. So Version 2 represents the best way of it.

5. Last updated date and time

Again this also better in Version 1 than the other two versions. Because it’s in the left top corner of the page in small letters. So it’s more visible and also it doesn't take any space from the page.

6. Separate news categories

When consider this feature Version 2 represents the best way to do it than the other two versions. Because it’s more attractive and it makes the page less complex.

7. Advertisements

In version 2 all the advertisements are in the later part of the page. So it’s the best way to display advertisements. Because of advertisements usually the page gets messy. But if we changed it to a page like in version 2 then users won’t have difficulties when reading news. Therefore Version 2 is the best.

8. Alignment of the page

It’s also better in Version 2 than the other two versions. Because it leaves some space from the both sides of the page. So it’s more visible and also it can maintain a good shape in the page.

9. Gallery

Here Version 3 is better than the other two versions. Because it’s there in the main menu as a button. So it’s more user friendly.

Contextual Analysis diagrams-Social model

Contextual Analysis diagrams-Flow model

Contextual Analysis diagrams-Artifact model

The deliverables for PART C:

For a better quality you can view the previous video from here :)

The deliverables for PART C:

The deliverables for PART C:

Contextual Inquiry

Description of the user: This user is an elderly person with a little technical experience and she is not at all familiar with using this news site.

(Lines spoken by us/interviewer are denoted with 1 and the user’s lines are denoted with 2. Time codes are mentioned in the beginning of a line.)

[00:02] 1- This is lankapage.com, a famous news site in Sri Lanka. Can you find the recent headlines in this news site?

[00:11] 2 - Okay we’ll see. (Searching in the site)

[00:31] 2- Is this the headlines?

[00:35] 1- Actually it's not what I want. There's a separate section for those headlines. Can't you find it?

[00:44] 2- I will see. (Again starts searching)

[00:53] 2- It's bit difficult to find.

[01:04] 1- Let me know if you need any help

[01:10] 2- Ah.. This is the recent headlines right? (Smiling and feels like finally found it)

[01:14] 1- Yes. That's it.

[01:17] 1- Okay, next can you view the Top story of the day?

[01:22] 2- Yes. We'll see.

[01:27] 2 - Top story should be in the top part right?

[01:29] 1- Yes. May be.

[01:34] 2- Is this it?

[01:37] 1- Actually Top story is in the home page. Now you just went to another page. I think you have to go back to the home page again.

[01:44] 2- Where is the homepage?

[01:46] 1- You have to click that home button. So that you can go to the home page.

[01:51] 2- Ah... This one right?

[01:54] 1- Yes.

(She tries to click it several times)

[02:00] 1- Just click once.

[02:13] 2- This is the top story right? But it's too small. It should be bigger.

[02:28] 1- Now can you view separate news in the homepage?

[02:36] 2- Yes. This is the homepage.

[02:41] 2- I think these are the news that you want.

[02:44] 1- Yes. You got that one easily.

[02:50] 1- Okay now can you view news under separate categories?

(She scrolls down the page and searches)

[03:05] 2- I can't find the separate categories.

[03:08] 1- Separate categories in the sense, there are many news in the home page right? Those news are belongs to separate categories. Like politics, sports, world news, security situation etc. So can't you find the names of those categories?

(She looks for those separate categories in the home page. looks like not happy.)

[03:34] 2- Still I couldn't find. Can you help me?

[03:48] 1- Okay let me help you. These news falls under different categories. You can see those categories here. So this is the category for security situations and this is for politics. Also you can view sports and world news at the bottom.

[04:22] 2- But I think this should be more highlighted than this. Otherwise it's difficult to find out.

(She seems not happy at all about this)

[04:33] 1- Okay let's move on to the next question. Can you view relevant images for a particular news?

[04:51] 2- Yes. For that I should go to the full story.

[04:53] 1- Yes. You should.

[04:55] 2- We'll see that. Here only one image is appearing. No any other images or videos regarding this news.

[05:18] 1- You just checked only one news right. I think you should check another news. So for that you have to go back to the home page.

[05:30] 2- This is the back button right?

[05:32] 1- Yes. That's the back button. But since u selected the full story mode it directed to a new page. So u can't go back like this.

(She seems to be struggling to go back so I had to help her)

[05:45] 1- To go back you have to click on that lankapage tab on the top.

[05:50] 2- This is it right?

[05:52] 1- Yes.

[05:54] 2- May I click it?

[05:55] 1- Yes. Now go to another news and see whether there are any images.

[06:06] 2- Okay I am going to click on the full story. Here also the same scenario. Since this is a news site I think there should be more images and videos for a particular news.

(She seems to be not satisfied with the news)

[06:32] 1- Yes I also think the same. Let's go to the next one.

[06:43] 2- Okay.

[06:44] 1- What do you think about the advertisements in the site?

[06:50] 2- I can see some advertisements. Those are not nice.

[06:55] 1- Why do you think them as not nice?

[06:57] 2- Because we can't find news easily because of these silly advertisements.

[07:07] 1- Ah okay.

[07:12] 1- There’s a brief introduction about Sri Lanka. Can you find it?

[07:23] 2- Okay.

(She scrolls down the page)

[07:38] 2- Is it below the sports category?

[07:41] 1- Yes. It's actually at the bottom of the page.

[07:49] 2- Yes. I can see it. But, is it necessary to be in this news site?

[07:59] 1- I also think it's not necessary.

[08:10] 1- Can you view the disclaimer and about us section?

[08:13] 2- Yes. It is in the top.

[08:18] 2- This is disclaimer.

[08:21] 1- Okay.

[08:22] 2- You can see.

[08:25] 1- What about the about us section?

[08:27] 2- Wait. (Clicking Back Button)

[08:31] 1- So what did you do there..? You went back.

[08:34] 2- Yes. I went back. I couldn’t tell you. (Laughing)

[08:37] 1- okay.

[08:38] 2- This is about us section. (Looks happy)

[08:43] 1- Okay.

[08:45] 1- You did it easily. We will go to the next task.

[08:53] 1- Can find out the last updated date and time of this web site?

[09:01] 2- Yes.

(Scrolling down in the page)

[09:16] 2- I can’t find it (She is in sad mode.)

[09:23] 1- Scroll slower and you can find it in the website somewhere around the top.

(She is scrolling up slowly)

[09:40] 2- I don’t think .I can’t find it out

(Looks like she is in tired of searching last updated date and time)

[09:43] 1- Are you sure you can’t find it?

[09:45] 2- Yes. Sure (in sad mode)

[09:46] 1- Okay let me show you that. (Helping her to find that)

[09:51] 1- See here. This the last updated date and time in small letters.

[09:58] 2- Oh .yes.

[10:02] 2- Yes too small letters. I can’t see it. (Laughing)

[10:05] 1- Okay let’s go to the next one.

[10:10] 1- Can you send a feedback to this site?

[10:15] 2- What do you mean by feedback? (Seems like she don’t know the meaning of that term. So had to help her)

[10:18] 1- Feedback in the sense it’s like a report that you send to the admin of the site saying about compliments, comments of yours to the site admins.

[10:40] 2- Will see. (She has got an idea about that term)(Scrolling down)

[10:44] 2- I can’t find it out.

[10:47] 1- It’s actually on the bottom of the page.

(She is scrolling down)

[11:03] 2- Ah… there. (She found that feedback link but struggling to click that.)

[11:11] 2- This is so small right?

[11:12] 1- Okay. You have find it.

[11:15] 2- Will go inside?

[11:19] 1- You have to click on that link.

[11:27] 2- Is there any error? (Error page occurred)(She is not satisfied with the result)

[11:29] 1- Oh. It’s an internal server error. I think it’s something wrong with the site, it’s okay because you found the way to do the feedback right? It’s something wrong with their site. Okay?

[11:47] 2- Okay. (She is not satisfied with that error page)

[11:52] 1- Can you subscribe to get the breaking news alerts via emails?

[11:58] 2- I didn't get what u said.  (Seems to be confused)

[12:05] 1- I asked can you subscribe to get the breaking news alerts via emails.

[12:11] 2- There's a thing called SL breaking news. We'll click it and see.

[12:18] 1- Okay.

(She seems to be reading carefully what's in the page)

[12:34] 2- That word you said subscribe is here. But I don't know what to do from here onwards.

[12:44] 1- Okay. Do you want me to help you?

[12:49] 2- Yes.

[12:51] 1- Here what you need to do is simply send an email to this email address. So that you can subscribe to get the breaking news.

[13:22] 2- We don't use emails as you all. So I think it's better if we have a way to get these breaking news alerts to our mobile phones.

[13:38] 1- You mean like text messages.

[13:41] 2- Yes.

[13:51] 1- Okay Thank you.

[13:52] 2- You are welcome.