Revised Interfaces Based on HE

After analyzing the hueristic evaluation report we've been received by our associate group, we've realized that still there are certain areas to be concerned with. Eventually we created our final implemented web portal by fixing those issues.

#	Prototype Screen	Name of Heuristic	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)	Action taken and Justification (to by filled in later by the person who created the system being evaluated)
1	See Picture 1	Consistency and standards	The user misunderstands the icon as a link redirecting to another page.	In the Home page	Medium	The icon can be removed or can be change to another icon	We removed the symbol like stated here and now it doesn’t exist anymore.
2	See Picture 2	Visibility of system status	The user can’t clearly identify the Home page of the web site because of the small welcome message.	In the Home page	Medium	Make the welcome message highlighted by changing the font sizes and colors	As mentioned we changed the welcome message in to a more visible font size using two color combinations.
3	See Picture 3	Consistency	Inconsistent placement of “Search Icon” It is not efficient to have the search icon on the left side of the search bar.	Every page of the web site	Medium	Change the search icon position to the right side of the search bar	Instead of having the search icon at the right hand side, we added a go symbol at the right hand of the search bar.
4	See Picture 4	Flexibility and efficiency of use	Text colors are not clearly visible to the user	In Contact us page	Medium	Make text colors different than the background colors	We added a color which is not similar to the background color in the contact page
5	See Picture 5	Flexibility and efficiency of use	Color combination is not good enough. It disturbs the user interaction with the web site.	In the Home Page	Medium	Use simple, attractive and matching colors	Instead of having different colors in the home page, we just limited that in to ocean blue and white colors.

Heuristic Evaluation of Each Other's Implementations

As we were instructed before, we had to evaluate our batch's selected group. They have chosen a social network mobile application called "Nimbuzz" and what we had to do was to examine their implemented application and find out what are the possible breakdowns of the system.

We have identified 5 breakdowns after analyzing the system. The hueristic evaluation of Nimbuzz mobile application is shown below.

Picture 01

Picture 02

Picture 03

Picture 04

Picture 05

Feedback & Critical Incidence

#	Prototype Screen	Name of Heuristic	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)	Action taken and Justification (to by filled in later by the person who created the system being evaluated)
1	See Picture 1	Visibility of system status	The user is unable to find out the time of the last received messages.	In the chat menu	Medium	The time can be displayed just below the date.
2	See Picture 2	Match between system and the real world	Both “Customize profile” and “Edit profile” buttons imply the same meaning.	In profile customization	Medium	Set the “Customize Profile” button as “Edit Privacy”
3	See Picture 3	Consistency and standards	Having the “search icon” at the beginning of the search bar, in a mobile application is not conventional	Every page of the web site	Low	Place the search icon at the end of the search bar so that the user will not have to move his fingers back to the beginning of the search bar.
4	See Picture 4	Match between system and the real world	A “Hi” message is automatically sent when starting a conversation.	In the chat menu	Medium	The messages should be sent after the user finishes typing and clicking on ‘send’ button.
5	See Picture 5	Help and documentation	Novices who are not familiar with the mobile application are not guided well enough.	In the More menu	Medium	A help button at the “more” menu can be applied where it navigates to basic instructions.

Implemented Web Portal

Using the experience we gained during the lab sessions and lectures eventually we created the final implementation of our e-learning web portal. The implemented web portal for our HCI project is published under the link below.

Implemented web portal - CLICK HERE! 

Usability Evaluation - Technical User

Technical User

The technical user we have chosen for the paper prototype evaluation is a 3rd year student at Sri Lanka Institute of Information Technology. The user has a very sound background at handling websites and services since he is currently maintaining his own web portals and he is a web developer too.
Video link ---> CLICK HERE!!

1)      I asked from technical user to download php introduction course materials

2)      Then he clicked the course category from the main menu bar

3)      After that he clicked the information technology category from dropdown list

4)      Then he clicked the php for beginners sub category from dropdown list

5)      After that he select PHP intro from right side menu list

6)      Then he clicked the download link to download php course materials

7)      Website show error message that you must be logged in first

8)      Then user click the registration button and create a new account. He did it successfully

9)      After registration PHP download link is disappeared. So user have to find download link again. He said “I lost my part so I have to go from beginning”

10)   Then I said “What are you going to do now”

11)   User said “Now I am going to search”

12)   Then he use search function to get PHP introduction course content. (He didn’t use the previous main menu to get download link instead of going through navigation he use the search function )

13)   After that he click search result to get download link and press the download button

14)   I asked him to become a student of this web site

15)   Then he clicked Student & Teachers Corners widget from the top three widgets.

16)   After that he fill the form and press the sing up button. He did this without any doubt

17)   I asked him to find out most recent posts

18)   Then he clicked Top Posts widget from the top three widgets

19)   I asked him to contact administrator of the website.

20)   He fill out the correctly

21)   I asked him to add some feedback

22)    He did take a little bit of time to find the feedback button. But he did it any way

23)   I asked him to find details of this website

24)   He clicked the About Us link located in the bellow

25)   I asked user to find online users

26)   He found the online users list without any problem

27)   I asked him to find upcoming events

28)   He did that without any hesitation

29)   I asked user to find News Feeds

30)   He did it without any hesitation

Picture 01

Picture 02

Picture 03

Picture 04

Picture 05

Picture 06

Usability Evaluation

#	Prototype Screen	Name of Heuristic	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 See Picture 2 See Picture 3	Consistency and standards	After registering as a new member the download path is lost and the user had to start downloading the content from the beginning.	Three pages	High Because the user has to find the downloadable contents again by following the previous lengthy path.  It’s a waste of time.	The activity session should be stored on the page and the user should not be redirected to the main page after the registration. The user should be remained in the downloadable contents session.
2	See Picture 1	Recognition rather than recall Match between system and the real world	User couldn’t identify the feedback button on the main page.	This specific page	Medium The user should have the facility to complain or share thoughts with the administrators	Feedback button should be specifically larger than the current button and should be quite visible.
3	See Picture 4 See Picture 5 See Picture 6	User control and freedom Consistency and standards	Had to  press back several times in order to go back to the home page.	Throughout the website	High User has to go back over and over again to go to the home page	A consistent ‘Home’ button should be provided throughout the website so that the user can go back to home page easily
4	See Picture 1	Visibility of system status	User could not find the past news feed but only the latest news feed on the main page	This specific page	Medium User should be able to know what happened when he was not online by looking at the past news feed. Not only the latest news feed	There should be a scroll down and additional ‘more news feed’ link.

Usability Evaluation - Non Technical User

The non-technical user

The non-technical user we have chosen for the paper prototype evaluation is a grade 12 student of Ashoka College, Colombo. He is currently sitting for the G.C.E A/L examination this year. The user we selected is not having a technical background but has average skills in using a computer and a website.

Video Link ---> CLICK HERE!!

Non-Technical User - Keerthi

1)      I asked from non-technical user to download php course materials

2)      Then he clicked the course category from the main menu bar

3)      After that he clicked the information technology category from dropdown list

4)      Then he clicked the php for beginners sub category from dropdown list

5)      I asked him to select Directory Functions from result

6)      Then he press the Directory Functions link  from result

7)      Then he clicked the download link to download php course materials

8)      Then user click the registration button and create a new account. He did it successfully

9)      After registration PHP download link is disappeared. So user have to find download link again. He said “I don’t have my php download link. So I want to user course category”

 (Technical user use the search function to get download link but Non-technical user use the same previous steps to get download link)

10)   After that he did the download successfully

11)   I asked him to become a student of this web site

12)   Then he clicked Registration button and look confused

13)   I said that “you are already use the registration function previously and in the registration it’s not given “

14)   Then I showed the link to become a student

15)   He clicked the link and filled the form then finished the function correctly

16)   I asked him to contact administrator of the website.

17)   He filled out the form correctly

18)   I asked him to add some feedback

19)   He click the About Us and looked for feedback but feedback isn’t in that page.

Then after taking little bit of time he found the feedback button

20)   I asked him to find latest events

21)   He did it successfully without any doubt

22)   Then I told that you can find latest events from calendar 

23)   I asked user to find online users

24)   He found the online users list without any problem

25)   I asked him to find upcoming events

26)   He did that without any hesitation

27)   I asked user to find News Feeds

28)   He did it without any hesitation

Picture 01

Picture 02

Picture 03

Picture 04

Picture 05

Picture 06

Usability Evaluation

#	Prototype Screen	Name of Heuristic	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 See Picture 2 See Picture 3	Consistency and standards	After registering as a new member the download path is lost and the user had to start downloading the content from the beginning.	Three pages	High Because the user has to find the downloadable contents again by following the previous lengthy path.  It’s a waste of time.	The activity session should be stored on the page and the user should not be redirected to the main page after the registration. The user should be remained in the downloadable contents session.
2	See Picture 1	Recognition rather than recall	User couldn’t identify the students and teachers corner at once in order to proceed either as a student or a teacher.	This specific pages	Low Not quite necessary to become a student or a teacher to follow the courses.	Adding teachers and student categories to the registration form so that the user will not be confused.
3	See Picture 1	Recognition rather than recall Match between system and the real world	User couldn’t identify the feedback button on the main page.	This specific page	Medium The user should have the facility to complain or share thoughts with the administrators.	Feedback button should be specifically larger than the current button and should be quite visible.
4	See Picture 1	Flexibility and efficiency of usage	Upcoming events are displayed more than once at the front page .	This specific page	Low Not necessarily need to remove them because the tasks can be completed even they exists	Remove unnecessary  elements from the front page
5	See Picture 4 See Picture 5 See Picture 6	User control and freedom Consistency and standards	Had to press back several times in order to go back to the home page.	Throughout the website	High User has to go back over and over again to go to the home page	A consistent ‘Home’ button should be provided throughout the website so that the user can go back to home page easily.