introduction to human-computer interactionrjh/courses/introductiontohci/2016-17/...introduction to...

Introduction to Human-Computer Interaction

Group 24

A project to create a new deadline

management system on a virtual learning

environment.

Group Members:

Ryan Bland (1718695)

Elliott Davies (1246447)

Kamrun Singh Samra (1337422)

1

Contents

Contents 2

Group Participation 5

Definition of Problem 6

Review of Related Work 7

BlackBoard 7

Home Page 7

Submission 9

Canvas 10

Home Page (Dashboard) 10

Submission 11

Calendar 14

Moodle 15

Overall Features of Current VLEs 19

Literature Reviews 20

Personas 23

Student 1 - Harry Baggins 23

Student 2 - Henry Charles Ingham 25

Student 3 - Hal Clarke 27

First Generation Prototypes 29

Prototype 1 30

Rationale 30

Presentation of Prototype 30

Screen 1: Login Page 30

Screen 2: Home Page 31

Screen 3: Deadline Calendar 32

Screen 4: Submission Page 33

Evaluation 33

Nielsen’s Heuristics 34

Against Scenarios 38

Conclusions 39

Prototype 2 40

Rationale 40


2

Screen 1: Dashboard (Home Page) 40

Screen 2: Dashboard > Deadlines 41

Screen 3: Dashboard > Deadlines > Assignment 41

Information Tab 41

Submission Tab 42

Grades & Feedback Tab 42

Screen 4: Dashboard > Grades 43

Evaluation 43



Conclusions 47

Prototype 3 49

Rationale 49


Screen 1: Agenda Style 49

Screen 2: Week Style 50

Screen 3: Setting Scheduled Date 51

Screen 4: Assignment Submission 52

Evaluation 53

Nielsen's Heuristics 53


Conclusions 57

Second Generation Prototype 58

Design Tool 58


Screen 1: Log In 59

Screen 2: Home 60

Screen 3: Personalise Home Page 61

Screen 4: Personalise 62

Screen 5: Calendar View 63

Screen 6: Help Page 64

Screen 7: Submission Pages 65

Screen 8: Submit Work 66

Screen 9: Upload File 67

Screen 10: Upload Notification Successful/ Unsuccessful 68

Screen 11: Module Page 69

Screen 12: Assignment Deadlines for a Specific Module 70

Screen 13: Grades 71

3

Evaluation 72



User Testing Evaluation 77

Results of Evaluation 80

Summary and Recommendations 81

References 83

4

Group Participation

Grammar editing (Kamrun, Elliott)

Contents (Elliott)

Definition of Problem (equal)

Review of Related Work

Ideas of content (equal)

BlackBoard (Ryan)

Canvas (Ryan)

Moodle (Elliott)

Literature Review (Ryan)

User Requirements

Student 1 (Ryan)

Student 2 (Kamrun)

Student 3 (Elliott)

First Generation Prototypes

Introduction (Ryan)

1 (Ryan)

2 (Kamrun)

3 (Elliott)

Second Generation Prototype

Introduction (Ryan)

Slides (equal)

evaluation (Ryan)

Annotation / Descriptions (equal)

Summary and Recommendations

(equal)

Participation agreed by all.

5

Definition of Problem

The problem we have decided to address is the unfriendly design of virtual learning environments

(VLEs), with respect to deadlines and submission. The main problem with this feature of VLEs is the

confusing layout; this is a result of multiple factors, which we will look into later. This is a problem that

we feel only affects students, as other users of the VLEs are not using the deadlines and submission

features, and the organisation that has chosen the system may not have thought about the needs of

the students.

One example of a VLE that we feel suffers from this problem is Canvas. The design of Canvas is very

cluttered and confusing, for example there are a lot of features in the sidebar which are rarely used.

Overall, this makes Canvas hard to use, increasing the time and number of ‘clicks’ required to

accomplish your goals, such as viewing weekly slides or assignment information. To reduce the

amount of time it takes for students to find relevant information, Canvas could have a unified

deadline feature as currently these are separated by module. This would allow students to see all

deadlines efficiently.

Canvas has a mobile application available for students, with the aim of having personal university

information available on the go. This can also be problematic to use as the information you wish to

find is not always obvious, making this task more difficult for the user and as whoever is using the

application is likely to be mobile, they will most likely have to attend to external cues such as other

people, and thus will not be able to dedicate the amount of attention required by said task.

If these problems within Canvas were addressed, it would make Canvas less confusing for students

and much more user friendly in general.

6

Review of Related Work

To gain a clear understanding of how deadlines are monitored using virtual learning environments

and how work is submitted, we focused our attention on a number of existing systems: Black Board,

Moodle and Canvas.

BlackBoard

Firstly, we looked into the pros and cons of blackboard, with special attention given to how the

system displayed upcoming deadlines and how a user could submit work.

Blackboard uses a system where the user has to go through each module separately to get to the

assignments page. This was deemed to be a good system, as it is clear which module the user is

currently looking at.

Home Page

Strengths:

● Has a clear module list.

● As shown on the picture below, there is a “My Grades” button at the top.

● Buttons for navigation are clear.

● Able to personalise the screen, which makes certain features clearer for individual users.

Weaknesses:

● Doesn’t have a deadline feature to show upcoming deadlines or a submission tool, from the

home page. Users would have to navigate through modules and assignments to reach this

page.

● Some users may find the home page cluttered as it contains a lot of writing.

7

BlackBoard home page

Bbhelp, (2013). http://bbhelp.hyms.org.uk/how-to-access-blackboard/

BlackBoard Submission

Edgehill (2016). https://blogs.edgehill.ac.uk/learningedge/tag/blackboard-9-1/

8

Submission

Strengths:

● Clear to the user what module they are currently looking at, in this case, Swimming 1001.

● Gives a brief description of the assignment. In this case, the user can see that an Essay on The

Art of Chlorination is due.

● Has a clear home button on the top left of the screen, using the metaphor of a house.

Weaknesses:

● It doesn't show what date and time this assignment is due.

● It doesn’t indicate whether this assignment has been submitted already. The user will have to

interact with this link to view the assignment.

9

Canvas

Secondly, we looked into the pros and cons of Canvas, with special attention given to how the system

displayed upcoming deadlines and how a user could submit work.

Canvas also uses a system where the user has to go through each module separately to get to the

assignments page.

Home Page (Dashboard)

Strengths:

● Easy to see module list.

● Colour coded clear modules.

● Shows announcements and comments on module tabs.

● Has a help feature on the tabs.

● Can personalise each module box with the edit feature present on every box.

Weaknesses:

● Doesn't have a deadline feature on the dashboard.

● User has to navigate through each module separately to find the information for each module.

10

https:// canvas.bham.ac.uk

(Login required to reach page)

Submission

Strengths:

● Clear to the user what module they are currently within.

● User can see the upcoming assignments with their due dates and deadlines.

● User can see past assignments with their marks.

● Each assignment contains FAQs and their answers.

● Clear submit button in the top right.

Weaknesses:

● Cluttered system makes it hard to find the information the user desires.

● Shows past assignment marks in points not percentages, could have more information.

● User would have to navigate to each assignment to submit work.

● Submission must be in a certain format.

11



12



The above image shows that the user must go through each module and assignment tab to find out

what work is due, along with the relevant marks and weight.

This takes up a lot of time and requires a large number of ‘clicks’ to get through the whole syllabus.

However, this system is easy to understand, as it clearly states the exercise number, for example, in

the picture above it shows exercise 1 and 2. It also states the due date, deadline time and marks for

each exercise, underneath their titles.

As this is the system we use at the University of Birmingham, we know that notifications are not given

when work is due imminently, for example, users do not receive emails or reminders from Canvas.

13

Calendar

Strengths:

● Can be used to see upcoming deadlines.

● Clear to see what dates have important information.

● Clear how to change view.

● Clear how to change months.

Weaknesses:

● Deadlines do not have a submission link.

● Deadlines do not have time constraints.

● Unclear what the deadlines are for.

● Cluttered design is unclear for the users.

● Too much information.



Canvas allows the user to see a calendar view of the course, however, from this it is unclear what the

deadlines are for and when they are due. Although, it does give users an efficient way to see all their

deadlines for the whole course.

14

Moodle

Moodle is open source system and highly customisable, this results in differences in how it is

implemented between different institutions and difficulty in making a definitive judgment about the

system, here we look at two examples from different sources.

In the picture shown below, the user must go through each module to find due work, along with

marks, weight and submitted work.

Similarly to Canvas, this will take up more time than a simple and clear personal assignment tab.

Also, Moodle can be seen as more confusing, as the module is labeled by module number instead of

name, also shown in the picture above.

However, Moodle sets out a clear due date, with a clear time users must submit work by.

Moodle also contains an upcoming events tab, which clearly states the date and time work is due to

be submitted and gives a counter, counting down the days or weeks until it is due. This feature gives

users an efficient way to see upcoming tasks, however, as seen in the picture, it is hard to

differentiate between modules, as there isn’t a different picture or clearly identified module name.

In this second example the following screens show how a student would interact with Moodle, the

first screen is the home page shown after the student logs in from which they can go to a module list,

from here they can go to the module page. On the assignment to be submitted there is information

about the marking of the work with relation to deadlines and late submission and a link to the next

step where the deadline is actually listed, this then leads to the page where the user can upload the

file to be submitted.

This it quite a long process to get to the submission, and the deadline cannot be seen until you are

about to submit the work, after you have gone through the information about late submission which a

student would not want to do if they just wanted to check a deadline.

15

Moodle homepage.

( http://moodle.bcu.ac.uk, Login required)

Moodle module list.


16

Moodle module page.


Submission information 1.


17

Submission information 2.


File upload page.


18

Overall Features of Current VLEs

These systems all have features that allow the user to submit work through the website. However,

they only have a deadline feature specific to each module, and not a course-wide personal deadline

list. (Like a calendar of deadlines).

The overall weaknesses of the VLEs considered are that they don’t have a personal deadline tab which

would give the user access to assignments and deadlines for the entire course, all under one tab,

where they can: see deadlines, grades and hand in work.

19

Literature Reviews

The usability definition: “Usability: the extent to which a product can be used by specified users to

achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use”

(Nigel Bevan 2001). This standard of usability was set by the International Organisation for

Standardisation in 1998.

This shows that the usability of systems is an important aspect in ensuring users can reach a desired

outcome and are thus happy using the system.

The first aspect of usability we will look at is the Three-Click Rule, which identifies an issue within a

system if it takes a user more than three clicks to reach a desired destination. It goes on to argue that

if it takes a user longer than three clicks, they are more likely to give up. Jeffrey Zeldman (2001)

supports this theory, indicating that it is based upon a user’s behaviour and how they want a system

to work.

The application of this rule has lead to systems incorporating tools to allow the user to quickly get to

the desired destination, for example home buttons.

This is also known as a hierarchy, which is an order of the needs or goals of the user. However, all

users may have different needs within our project, and so we will define three personas with different

scenarios (goals).

Another area of interest for web based systems is the placement of information within the screen.

This is an important aspect as the users must be able to quickly and efficiently find the information

they are looking for. A study by Nielsen (2010) found that more than half of the time the users spent

looking at the screen, was spent looking at the left side, for 69% of the time, compared to the right

side that was only looked at 30% of the time. Nielsen (2010) goes on to evaluate this study by

applying conventional layouts, such as reading left to right, giving a higher priority to the left of the

page naturally.

However, some conventions defy this, for example the exit for a web page is commonly at the top

right of a page, but this has become the interface norm.

This graph shows the percentage of viewing time

compared to pixel location, showing that the

majority of time spent looking at the screen is

shifted towards the left (Nielsen, J 2010).

Another study by Nielsen(2006) found a correlation

between visual search patterns on over a thousand

web pages, amongst more than 230 users. Nielsen

20

concluded that the dominant visual pattern amongst the majority of users was an ‘F’ shape. Users first

looked with a horizontal movement, starting in the top left moving towards the top right, then moving

vertically down the left side of the page and searching horizontally again. Finally, users search the left

side of the page vertically.

These findings further support the evidence that the left of the page is the most predominantly

searched section of the web page.

Although this study was predominantly used for search engines, it can be generalised to virtual

learning environments, as the users will be searching for a goal within the web page.

This is a heat graph showing the ‘F’ shape visual search on web pages found by Nielsen, J (2006).

Another important aspect within web pages is the passing of information to users. A study by Nelsen

(2008) found that, on average, users only read around 20% of the information the site provides.

This graph shows that users confronted with a web

site containing more than just over 100

words will read less than 50% of the total

information the site contains.

21

Applying this research to our project, we will aim to keep the information provided under a limit of

100 words to increase the number of words the user will read rather than overlook.

One way that has been reviewed to decrease the number of words within a site, is to use metaphors

(Carroll, J. Mack, R. Kellogg W 1991). Within a web site, metaphors can be used for the submission of

a file, for example the ‘drag and drop’ function, as this is something we would naturally do if we

wanted to move something in a real life scenario, that the computer understands. Metaphors can also

be used to navigate around the site, for example instead of having a button that says “Home” the

button can be the shape of a house, this will decrease the amount of words on the web page and will

make it clear to the users that the button will send them to the ‘home’ page.

Finally, research has been conducted on the size of options on a web page by Fitts. His research

suggests that a target's size and distance can affect spatial relative error (MacKenzie,I.S. Buxton,W)

therefore, to reduce the amount of errors made by the users, the options should be large and spaced

apart.

In conclusion, after reviewing literature based around the usability and methodology of web pages, it

is clear what successful web pages must contain or must not contain to increase user friendliness and

the efficiency of a system. In our project we will aim to keep the amount of written information to a

minimum to increase the amount of information the users read, one way to do this is using

metaphors to submit files and navigate through the site. We will design the system in a way such that

the important information will be based towards the left of the screen, as this is where the users

predominantly look.

22

Personas

Student 1 - Harry Baggins

Harry Baggins - Student 1

“I just want the VLE to be simple and efficient as I'm very busy”

Background

● Name: Harry Baggins (23 years old) ● Occupation: Full Time student (Arts) ● Occupation: Part time work (Weekend) ● Technical Knowledge: Comfortable

navigating websites, first time VLE user. ● Travel: Travels to University by car.

Main Points

● Harry has very little spare time around University and part-time work, so the more efficient the VLE is the better.

● Uses his University's VLE mainly at home on his laptop but does use the mobile version occasionally.

● Likes to download lecture slides, so he can go through them again in his own time.

Description Goals

● Harry is 23 years old and studies at The University Of Birmingham. He studies Art and travels to University by car. He is studying a full-time course but during the weekend has a part-time bar job, therefore, he has very little spare time.

● Harry likes to download the lecture slides so he can go through the weekly work to ensure he understands all the work.

● Harry has at least five modules per term all with independent deadlines; to make sure he hands work in on time he has put all his deadlines on a personal calendar.

● To quickly use the virtual learning environment.

● To see deadlines for assignments. ● Easily submit work online. ● Check work handed in is correct. ● To complete work around a schedule

according to deadlines. ● Uses the VLE mainly on a laptop at home.

Frustrations Scenarios

23

● Deadlines are not easy to find, must navigate through each module to find the deadline for that module. This takes a long time and could be made much simpler.

● Assignments may be requested in another format, however, because Harry has computer knowledge it doesn’t take too long, but it is an inconvenience.

● Has created his own calendar for deadlines, as he was tired of searching for individual deadlines time after time.

● Harry wants to check all his grades so far to assess how the term is going.

● Harry forgot if he submitted the work due and he would like to check if it’s submitted.

● Harry is running late for his weekend job but before he goes, he wants to quickly check he has no imminent deadlines.

24

Student 2 - Henry Charles Ingham

Henry Charles Ingham - Student 2

“I just want to be able to go through lecture

slides on my phone, during my bus journey to

and from Uni.”

Background

● 18 years old. ● Undergraduate student. ● Studies Psychology. ● Competent at using most forms of

technology. ● Travels to University by bus.

Main Points

● Prefers to use the VLE whilst commuting. ● Likes to read (or sometimes watch

recordings) of lecture slides on phone during commute, preferably after having downloaded them to save mobile data.

● Too impatient and lazy to learn/navigate complicated cluttered systems, preferring clear and concise layouts with a minimal number of steps.

Description Goals

● H.C.I studies Psychology at the University of Birmingham, commuting by bus.

● H.C.I does very little in his spare time other than watching TV, constantly using his phone and going out at night, and is also very lazy, preferring to have fast food delivered, rather than make any food himself.

● H.C.I’s course is mainly coursework assessed and as such has many coursework deadlines throughout each term, however, H.C.I is very disorganised.

● H.C.I wakes up as late as possible before lectures, allowing just enough time to shower and for the 40 minute bus journey. On his journey to University, H.C.I checks

● To maximise sleeping and spare time. ● To effortlessly check grades and deadlines,

anytime and anywhere. ● To organise work with priority based on

upcoming deadlines, without the need to consciously keep track of deadlines and dates.

● To be able to go through previous lectures during commute, without needing to have notes on hand.

25

any upcoming deadlines in the next couple of days and refreshes his memory of previous lectures for the upcoming modules on that day. On the journey home, H.C.I checks any impending deadlines for the next day and refreshes his memory of relevant lectures for those assignments.


● Long commute. ● All course relevant notifications are sent by

email. ● Course notification emails get lost amidst a

sea of other emails in inbox and notification bar.

● Large volume of regular weekly deadlines throughout each term.

● Completely disorganised.

● H.C.I needs to check whether he has submitted the correct file before he goes out.

● H.C.I needs to submit his latest piece of coursework within the next 2 minutes before the deadline expires.

● H.C.I is about to go to the cinema to watch a movie with friends, after just barely finishing an assignment he had and wants to check whether his current grade is high enough for him to hand in such poor work, without it significantly affecting his chances of getting a 2:i for his degree.

26

Student 3 - Hal Clarke

Hal Clarke - Student 3 (Mature Student)

“I wish I was more proficient with computers”

Background

● Age: 43 ● Occupation: Mature student ● University: Birmingham ● Course: MBA Executive ● Technology Level: Moderate comfortability

with PCs, uses PCs at a basic level at work. Less comfortable with mobile technology.

Main Points

● Likes to see all deadlines in one place. ● Likes clear layout. ● Wants easy to use system.

Description Goals

● Hal is a 43 year old employee at a company that makes specialist hinges. He has been at the company for 19 years and is very important to them. His company is interested in promoting him, because of this they have offered to help pay for him to take an MBA to improve his functioning within any new position he may attain.

● While studying at the University of Birmingham he will be commuting in from nearby Balsall Common by train.

● For any digital interaction with his course he plans to use his PC from the comfort of his home or perhaps at university but is not planning on using any mobile interfaces.

● Is studying full-time but still has to find some time to check in with work to maintain certain projects for which he can’t be replaced.

● To graduate with a good mark to appease sponsors.

● Learn skills that will help when back in career.

● Stay ahead of work deadlines to stay organised, he has other things to occupy his time.


27

● Web pages that obfuscate information. ● Not noticing a deadline soon enough. ● Unclear or ambiguous instructions. ● File requirements for hand-ins. ● Not knowing if hand-in was successful.

● Hal needs to check for all upcoming assignments so he can decide when to do them and when he will have time for himself. If he could set reminders on the work for when to start it then it would allow him to just plan once rather than have check his deadlines for this.

● Hal needs to hand in a piece of work, the lecturer has asked for it in PDF format but Hal only has it as a Word document and can’t open it to change it himself due to compatibility issues, if Hal could upload the Word document to be converted he would be very happy.

● Hal has mislaid the plan he made for his work and can’t remember what has been handed in as he has several similar exercises to do, if he could check which of his assignments are still outstanding and which are submitted this would solve his problem nicely.

28

First Generation Prototypes

Creating prototypes is an efficient way to continuously improve ideas and evaluate which of these ideas are detrimental and which ideas are strong, using this evaluation we can implement and test changes before making the final product. Using the personas, we will assess the three first generation prototypes using the scenarios and goals that each persona contains, using them to evaluate each prototype will remove any bias that we may hold towards the prototypes created.

In this section we shall create and evaluate the first generation prototypes, as it is important to quickly and cheaply test the design before committing time and money into a design containing simple flaws that could have been eliminated using this method.

We will examine three prototypes, which will each be annotated. They will then be evaluated through Nielsen’s heuristics and the scenarios outlined in the personas.

Each persona contains scenarios that each persona will want to achieve using the prototypes. Therefore, this evaluation will illuminate problematic areas among some or all of the prototypes. Similarly, this evaluation will highlight areas that benefit all personas, which will be taken into the next prototyping phase.

To evaluate each prototype Nielsen’s ten usability heuristics will be used, in addition a five point severity rating will also be used to assess usability issues of the system as follows:

“ 0 = I don’t agree that this is a usability problem at all”

“1 = Cosmetic problem only - need not be fixed unless extra time is available on project”

“2 = Minor usability problem - fixing this should be given low priority”

“3 = Major usability problem - important to fix, so should be given high priority”

“4 = Usability catastrophe - imperative to fix this before product is released” (Nielsen, J. 1994).

This evaluation method is good at finding minor and major problems, although it is more effective at finding major problems, as shown by the following probabilities. Over six case studies, major problems were found 42% of the time compared to 32% of the time for minor problems (Nielsen, J. 1992). Nielsen argues that first prototypes are most suitable for heuristics evaluation due to efficiency and ease ( Nielsen, J. 1994).

29

Prototype 1

Rationale

In this first prototype, the design will be evaluated by the scenarios of all three personas. This low-fidelity prototype will be a pencil and paper prototype, as it is a first generation prototype meaning that it is far from complete. Therefore, it will most likely hold a lot of mistakes that we will aim to find in the evaluation stage and improve on or exclude in the second generation prototype. As we expect a lot of mistakes to be present in the first generation prototype, it seems only logical to commit a small amount of resources to it, as the second generation prototype could potentially be very different.

The student Harry Baggins requires a virtual learning environment that is easy to navigate as he has time constraints. Currently, Harry needs to access a number of modules to find specific deadlines, which he will need to note down personally, as there is no deadline tool. This prototype will provide an idea of a simple and efficient way for Harry and other students to see their deadlines.

Presentation of Prototype

Screen 1: Login Page

As access will be limited to students, a login page will be required where students will have to provide a username and password before they can access the site. As this is a crucial part to accessing the system, it must be clear and easy for students to login.

30

Screen 2: Home Page

Shows the homepage of the virtual learning environment, where a personal module list is provided after login. Each module can be arranged in an order that the user desires; also the colours for each module box can be changed from the default vivid colours according to personal preference so the user knows which coloured box relates to which module.

On interacting with the module box Deadlines: the user will be taken to their personal deadline calendar.

31

Screen 3: Deadline Calendar

This prototype will substitute Harry’s need to go through each modules assignments page and note down when each piece of work is due accordingly. The prototype will contain many features that Harry could use to speed up his use of this system, for example:

● The current date and time – from this the calendar will show the student how long until the next deadline due date and what module the assignment is for.

● Calendar view – can be selected in weekly, monthly or annually according to personal preference.

● A date that has a deadline will be highlighted and filled in with the colour of the module selected from the homepage (if the colour was not edited it will stay as the default colour for that module).

● Interaction with a specific deadline will take the user to the submit screen, where a user can hand in work quickly without going through each module specifically.

32

Screen 4: Submission Page

This screen will allow the user to submit work easily and quickly. In the center of the page, the screen will show the user the work they are about to submit, for example in this case the user is on the hand in page for a HCI assignment, this is in the middle of the screen to be clear so that the user is less likely to submit a file for another assignment. The deadline button will allow the user to take a step back to the calendar view.

Evaluation

This prototype can be extremely advantageous as it allows the users to see all their personal deadlines in a calendar view. They can then also navigate to the hand in page easily and efficiently from the deadline view. However, a lot of work will need to be undertaken to ensure that the deadline view is simple to read quickly, but at the same time holds enough detail for the users to distinguish between other deadlines.

33

This prototype will be evaluated using Nielsen’s ten usability heuristics, Nielsens rating system them against all of the personas scenarios.

Nielsen’s Heuristics

Nielsen’s Heuristic Rating Description

Visibility of system status (1):

System status

- Not modelled in this prototype. However, student knows

whether logged in through welcome in step 2.


Internet dependent

4 Handing in work and the internet drops is a very serious problem with this design. Rating of 4 must be added to

ensure usability and reliability.


Overall evaluation

3

Important problems within heuristics of visibility of system status. Needs to be clear to the user that they are

connected to the internet or whether the system is working, this is not modelled with this prototype.

Match between system and the real world (2):

Calendar system

3 Moves away from the norm of other virtual learning

environments where deadlines are in module assignments. First time using could be difficult to understand.


logical order for ease

1

Find deadline using the calendar design. Interaction with a specific deadline moves to submission page as shown in the design. Natural order to submitting work, user finds deadline then submits work for that specific deadline.


Overall evaluation

2

As the calendar view is moving away from the norm of other virtual learning environments which we have seen before can be initially confusing must make the design

clear and simple.

User control and freedom (3):

3 Can return to the previous page on every screen but

cannot jump more than one step backwards. Also users cannot log out on every screen.

34

Can return to the page before on every screen


Overall evaluation

3

The users need the freedom to be able to move around the system quickly in this prototype users can only take one step at a time making it slow, also users cannot exit

quickly.

Consistency and standards (4):

Similar to other systems

2

All virtual learning environments have clear modules. Users of these systems will be familiar with this design,

however, calender (Step 3) will need to be clear as it is not similar to other designs.


Overall evaluation

2 Design similar to other virtual learning environments apart

from calendar view however, it is similar to other calendars.

Error prevention(5):

Clear display 1

Clear display easy to see whether a user has accessed the wrong page through module name appearing on calendar

view and submission page.


Overall evaluation 1

Clear to see whether user is on the wrong page. Also using colours to differentiate between modules shown in the

design should reduce errors.

Recognition rather than recall (6):

Help section

4 Help section for the design not modelled for example can't

recognise calendar usage.


Once a file has been submitted cant see in

detail

3

Does not give the user opportunity to check submitted work is correct.


1 Users do not have to recall a date, deadlines and dates are

given in the calendar view.

35

Users won't need to recall deadlines.


Overall evaluation

3

Need to give the users help sections plus a frequently asked section. Also users will need to be able to check

submitted work is correct rather than recalling whether it is the correct one.

Flexibility and efficiency of use(7):

Some customisations available

2 Users can change the colours assigned to each module for

preference. However, users cannot change the order of the modules due to preference.


View calendar

0 Mouse driven design so the user doesn't need to type

commands.


Does not allow change of deadline or show handed

in submissions.

4 Not in design - handed in work or completed deadline not shown to user reducing efficiency as the user will need to

access each submission page to check.


Overall evaluation

3 Need to add more flexibility to design and add features to

show completed work.

Aesthetic and minimalist design (8):

Clear background

0 Clear background makes the coloured module boxes and

deadlines easier to see.


Font too small

3 Hard to see dates on the calendar deadline view.


1 Limited information per screen reduces confusion.

36

Limited information per page makes it clear


Overall evaluation

2 Font in particular dates on the calendar too small, can be

challenging for the user to see.

Help users recognize, diagnose, and recover

from errors (9):

Errors in handing in work

4 Not in design - if the internet drops, error in submission,

users need to be notified that the submission failed in plain english e.g. “Submission failed please retry”.


from errors (9):

Overall evaluation

4 Must implement into design to help users recognise errors.

Help and documentation(10):

Doesn't have a help bar or search bar

4 Not in design - no information given on how to operate the

system. Evaluate system see if it's easy to use or too complex if so need to implement.


Overall evaluation

4 Help and documentation section not implemented within

design.

37

Against Scenarios

Score out of 10 (0-poor/ 10-excellent) scenario satisfaction.

Harry H.C.I Hal Clarke

Scenario 1 Harry - Check grades

for term.

H.C.I - Check he has submitted the correct

file before he goes out.

Hal Clarke - Check for

all upcoming

assignments so he can

decide when to do

them.

This prototype won't allow Harry to check

his grades. (0)

H.C.I will be able to check he has

submitted the correct work but he will have to go through all the

steps and interact with the file submitted

icon. (5)

Hal will be able to quickly and efficiently

see all upcoming deadlines on the

calendar. (7)

Scenario 2 Harry - Check if it’s

submitted.

H.C.I - Submit his latest piece of

coursework within the next 2 minutes before the deadline expires.

Harry can use this prototype to check

whether he has submitted the

assignment through the file submitted

indicator. However, this could be made

clearer or Harry could receive a notification

when handed in. (4)

H.C.I can quickly use the calendar to find

the deadline and submit the work.

(8)

Hal will not be able to submit his work if

there is compatibility issues as this design

uses files on his computer. it doesn't give a format option.

(0)

38

Hal Clarke -

Compatibility issues.

Scenario 3 Harry - Check he has

no imminent deadline

H.C.I - Check whether his current grade is

high enough for him to hand in such poor

work.

Hal Clarke - Check

which of his

assignments are still

outstanding.

Harry can use the calendar to see when

his next deadline is and in what module.

(8)

H.C.I will not be able to see his grades for

the module using this design as it does not give previous grades.

(0)

Hal will be able to see from the calendar what deadlines are

approaching however, it does not offer a

feature to ‘grey out’ submitted deadlines

on the calendar. (4)

Conclusions

In conclusion, after evaluating the prototype with: Nielsen’s ten heuristics, Nielsen’s five point severity rating and against the user's scenarios it is clear to see that this low-fidelity prototype holds a lot of weaknesses that will be improved in the second generation prototype or removed, for example the system status is unclear when submitting work, this is an issue as users will not be able to see if the work has been successfully submitted or whether it is in the process of being submitted. This can then also cause errors handing in work as users won’t know whether work has been submitted. However, within this prototype certain features can be taken forwards with improvements shown by both evaluations of the scenarios and heuristics.

1) Option to change colours of modules - Beneficial as users can recognise customised modules easier do to personal preference also lowers the impact of text making it easier and less confusing for users.

2) Deadline module box on the dashboard(home screen) - Users can quickly and efficiently see all deadlines, could add a list on the side showing nearest deadlines to allow the user to go straight to submission page.

3) Calendar format - Users can see how long until next deadline and in what module it is clearly, some improvements need to be made, for example have a brief description of assignment, show grades from previously handed in work and indicate whether work has been submitted without having to interact with each deadline.

4) Ease of use - Need buttons to navigate around the whole system easily not page from page like it currently is, have buttons back to home page.

39

Prototype 2

Rationale

This prototype has been made using Microsoft Office, as it is quick, easy to use and readily available.

This prototype is designed to be simple and intuitive, with as few options and steps required as

possible to access necessary information, and have a style of interface which could be used equally

effectively on either desktop or mobile website versions of the VLE.


Screen 1: Dashboard (Home Page)

There is no login page, as the user must access the site through their associated organisation, which

will use their own login system and then bring them to the above home page.

The menu button opens up a directory of pages with links to the four main pages shown above, but

also showing the current path of pages to whichever page is being currently viewed by the user.

The settings allow users to change the colour coding of Home page tiles (giving their page title the

same colour) and modules, and change the background colour to white/black.

A download option in settings would show all files available to download, sorted by module (also

colour coded by module), allowing desired file(s) to be marked and downloaded together.

A notifications option in settings would allow the user to customise notifications received by email (or

built-in browser notifications), such as module announcements/updates and new/upcoming

assignments (choosing from weekly and daily notifications per each assignment or set for all).

A logout option in settings would allow the user to log out at any point.

40

Screen 2: Dashboard > Deadlines

Chronological ordering of assignments in Deadlines tab is exclusive of past assignments/deadlines.

Centre box shrinks to above size when modules bar is open, otherwise it uses the entire width of the

window. Due Date and Time column heading is replaced by Lecture/Release Date and Time on

Lectures and Notifications pages, respectively.

Screen 3: Dashboard > Deadlines > Assignment

Information Tab

Assignment information and details would appear in the space above (below the grey line).

41

Submission Tab

Submissions when clicked, open the related file.

Grades & Feedback Tab

42

Screen 4: Dashboard > Grades

Assignments are chronologically ordered.

Evaluation




Login status

1

After logging in once, the user remains logged in until they log out, however, there is no bar showing the progress of the login (Although most user’s current internet speeds

make this almost instantaneous).


Internet dependent

3

It would be a serious issue if the internet connection is lost whilst a piece of work is being submitted, as there is no feature to save the upload progress nor notify the user of a failed submission.


Overall evaluation

2 As the system requires an internet connection, it should give the user a clear notification when internet is lost, and again when it is reconnected.

43


Language, naming and

phrases

2

All items are named as they are in real-life, however, some Universities may use slightly different naming conventions, and in other countries would require support for multiple

languages (although English is very widely known).


Natural and logical order

for ease

0 All items are listed chronologically, except for submissions, which are listed in a chronologically reversed order for the

user’s convenience.


Overall evaluation

2 There is a good match between the system and the real

world, however, whilst not so much in this case, the lack of support for multiple languages could be a serious issue.


Overall evaluation

0 The menu button allows the user to move between pages

easily, including previously visited pages and the user can log out at any time.


Overall evaluation

1

Naming conventions are very similar to most VLEs. The page layout is largely consistent throughout the prototype,

however, the page layout and options, although they are very similar to mobile websites and apps, are quite different

to those for a desktop.

Error prevention (5):

Overall evaluation

2

Clear display with large options, which are all nicely spaced to avoid misclicking. Uses colour coding and a page header so user immediately knows whether they are on the right page. However, users are not prompted to check whether they wish to submit a file, which could be useful if they are about to submit a file of the wrong file type, nor are they asked for confirmation of whether they wish to log out.

44


Tutorial

3 Doesn’t have a tutorial to help the user during their initial

visits.


Clear labelling

4 Clickable options are not clearly labelled/differentiated.


Overall evaluation

4

Doesn’t show the user how to use the system and there is no design implementation to show where the user can click

(it is assumed they would recognise).


Overall evaluation

1 The user does not have the option to change the ordering of displayed items (although they are already arranged for user

convenience).


Overall evaluation

1

The minimum number of items are on the screen, with important items being colour coded to the user’s

preference, and certain page options are put in a hideable sidebar, to maximise the area of the screen available to the

information the user desires, however, another sidebar could be added for the time range options and the

aesthetics of the page could be improved (e.g. the tiles are too big and the design of the prototype is very simple).


from errors (9):

3 There is no error notification if there is a failure to complete

the upload of a file that is being submitted.

45

Overall evaluation


Overall evaluation

2 There is no help section and documentation available to the

user.

Against Scenarios

Score out of 10 (0-poor/ 10-excellent) scenario satisfaction.



for term.




all upcoming


decide when to do

them.

Harry can easily check his grades for

assignments, and the total grades for each

module thus far. However, he cannot

only check the grades he has received this term, as it is not a

given option for time periods.

(7)

H.C.I can check he submitted the correct

file by opening the latest submission for that assignment, or if he just needs to check

it was the right file type, it would also

show the relevant file extension.

(10)

Hal can check all his upcoming assignments and their due dates on the deadlines page, as

it only shows upcoming assignments

and not those for which the deadline has

passed. (10)

Scenario 2 Harry - Check if his

work has been submitted.

H.C.I - Submit his

latest piece of coursework within the

Harry can check whether his work has

been submitted by going to the relevant

assignment page, through the deadlines page, and clicking on the submission tab.

(9)

H.C.I can submit his work through 4

actions, by going to the deadlines pages,

then the relevant assignment, clicking on

the submission tab and then clicking

submit.

Hal would be told what file type he must

submit, on the submissions page for

the relevant assignment, however, he must still submit a file of the correct type

for his work to be

46

next 2 minutes before the deadline expires.

Hal Clarke -


(8) marked, as the system will not convert the

file for him. (0)

Scenario 3 Harry - Check he has

no imminent deadline.



work.

Hal Clarke - Check

which of his


outstanding.

Harry can check imminent deadlines by going to the deadlines page, and as they are listed chronologically by due date, the first item on the list would be his next deadline

with its due date stated by its side.

(8)

H.C.I can check his current total mark for a module by opening

the sidebar on the grades page, however, he must calculate how

his grades would be affected himself.

(3)

Hal can check all assignments for which the deadline has not

passed on the deadlines page, and

then check under the submissions tab for

each assignment page, whether he has

submitted work, but can’t immediately

check whether work has been submitted

for upcoming assignments on the

deadlines page. (6)

Conclusions

Through our evaluation of this low fidelity first generation prototype we have found several

weaknesses which could be removed, the identification of which will help to improve the design of

our higher fidelity second generation prototype, such as there being no prompt for confirmation of

the user’s wish to upload a submission nor a visual indicator to the user of a submissions progress and

it’s outcome. There are also no tutorials/ visual prompts for the user to follow when they are using

the prototype for the first few times nor is there a help section for the user to consult should they be

confused about how to use features.

However, there are also many strengths to this prototype, which could be utilised in the design of our

higher fidelity prototype, such as submissions being ordered in a chronologically reversed order, so

the user can easily open up their latest submission, without having to search through the entire list of

previous submissions. The user can also instantly move between pages, without having to click on

multiple pages and also remember the path they took to find a certain option, but also the pages are

efficiently laid out, so that the user is only required to perform a minimal number of actions to reach

their desired page. The design of the pages is also very simplistic and objects are very large, so it is

47

easy for the user to recognise information and avoid misclicking, and key objects are given the most

space on a page, as well as being colour coded to the user’s preference.

48

Prototype 3

Rationale

This prototype was developed to show the student their deadlines within one module and allow them to organise them in the way they wanted to, this was to allow the student access to the information they want so they could plan when to do each assignment and also facilitate when they were undertaking the assignment. To this end features that have been included are the ability to add scheduling dates to assignments and the option to go to a set of notes relevant to the assignment.

The scheduling dates are dates selected by the student to record when they plan to start a particular piece of work, this allows the student to look at a list of assignments once and decide when to do them all, as opposed to finishing one piece and having to decide which piece would be best to do next which would have to be done every time you finish an assignment. When the scheduling date is reached a student can be give notification though some method.

This prototype was developed in Microsoft Word using simple tools such as text, text boxes and lines. Word was used use to its availability, its ease of use as well as the fact that objects could be grouped together to allow parts of the display to be moved around. Another reason was that use to the intricacy of some parts of the design it was felt that a paper prototype would be unwise and would result in a lack of clarity.


Screen 1: Agenda S tyle

This screen shows the assignments tab for a module with the “Agenda” style selected, this is shown by

the “Agenda” radio button being selected in the “STYLE” pane, radio buttons were chosen for this as

they allow the user to select only one and here you must make a choice between either “Week” or

“Agenda” style. In the “Agenda” style the assignments are all listed together in the order they have

been sorted by, the options for sorting are either by the deadline or by the date they have been

scheduled for, here they are sorted by deadline as shown by the “By deadline” radio button in the

“SORT” pane being selected, again radio buttons are used as only one must be chosen. The other

option, “By scheduling” would sort all assignments by the date they have been scheduled for.

The view offered to the student is customisable in the “VIEW” pane where they can choose what

columns they want to be shown in the assignments pane, in the screen shown all columns are

selected as shown by the tick boxes, the final option in this pane is greyed out as this does not apply

to the “Agenda” style. Further the student can use the “FILTER” pane to narrow down assignments

based on the due date and the date at which they are due in, in the example shown both past and

future assignments are shown and both submitted and outstanding assignments are shown.

All the panes have a minimise button that the student can use if they feel that they are a distraction

to their view.

49

In the listing of the assignments features of note are the clock symbol in the “Scheduled” column, this

is a button that the student can use to control the scheduled date, this can use to set it initially,

change it or remove it.

The notes column provides links to the relevant lecture materials which is to help the student when

they are attempting the assignments

In the status column the submission status is recorded along with the option to either “Submit” or

“Re-submit” pieces of work.

Screen 2: Week S tyle

This screen shows the “Week” style of the assignments tab, in terms of its function it is much the same as the “Agenda” style with the main differences being in the organisation of the information, these are the differences that will be focused on here.

In “Week” style the assignments are broken up into weeks, this is opposed to the “Agenda” style where they are presented together, this may be helpful to the students if they prefer to see the information presented in this more natural way as the layout on screen is perhaps more consistent with time as space on the screen will roughly correlate to time between deadlines.

The fact that “Week” has been selected is reflected in the fact that the “Week” option is now selected in the “STYLE” pane. In the “SORT” pane the option to sort by scheduling is now greyed out, this is due to the fact that the scheduling column has been removed by the student using the “VIEW” pane, the

50

student has also removed the notes column. These two changes show the options available to the student in terms of customizability. Also in the “VIEW” pane is the availability of the “Show empty weeks” option, recall that this was earlier disabled due to the selection of the “Agenda” style.

The utilisation of the “FILTERS” pane has been shown by the fact that the student has chosen to show only past and submitted assignments, the other options are unticked and the “All” option has a partial mark in the tickbox to show that some features are being used.

Screen 3: Setting S cheduled D ate

This screen show how the student can change the scheduled date for an assignment, clicking on the clock button opens a dialogue box. This box can be used to either set an initial date, change an existing date or to remove a date from an assignment.

For the first setting or changing the dates are entered into the system by the student typing them into the boxes. If the student is happy with the date or changes they can select “OK”. If the student wants to exit the dialog box, either because they have entered the wrong date or did not intend to open this dialogue box they can press “Cancel” to exit back to the assignments tab.

To remove a already set date the student can press “Clear date” which will remove any set date from the assignment.

51

Screen 4: Assignment S ubmission

This screen shows how the student can submit an assignment from clicking the “Submit” or “Re-submit” buttons, pressing either of these brings up this dialogue box, the student can then use the “Browse” button to open the standard system dialog box and select the file they wish to upload, when they have completed this they are returned to the web application, here they will be able to see the file they have chosen in the box to confirm they have selected correctly before pressing “Submit”, if the file was incorrect they could simply press “Browse” again.

If the student has entered into this dialogue box incorrectly they can choose the “Cancel” button to exit back to the assignments tab.

52

Evaluation

Nielsen's Heuristics



Processing changes 2

This prototype gives no indication as to if it is processing changes or not, i.e. if the student changes something there is no loading information as the system processes this change.

These changes require nothing too complex on the part of the system so this should only be a small time in which it unlikely the student will wonder what the system is doing and this is

therefore a minor issue.


Uploading documents 3

No indication is given that the documents submitted by the student are being uploaded, this is an issue as these may,

depending on their nature, take some time to upload and it would be better if the student was informed that they are indeed being uploaded, also they should be told when the

document upload is complete, as these things are currently not done these are a major issue.

Visibility of system status (1): 3

Overall the visibility of the system status needs improving as some issues have been identified, overall system visibility is

rated a 3.

53

Overall evaluation


Language, naming and phrases

2

Use of multiple terms with similar meanings such as “Style” and “View” for subtly different functions could lead to some

confusion from the student, also usage of due dates and scheduled dates. Use of the clock icon for scheduling dates is

questionable as a calendar icon may be more appropriate. Rated as minor issues.


Natural and logical order for ease

0 Assignments are always sorted and can be sorted according

to how the student wants them to be. No issues here.



Some issues identified with matching to real world, overall match between system and real world is rated a 2.



In the two dialogue boxes in this prototype the option to cancel are provided for the student, other functions are tick

boxes where correcting options is easy for the student as they simply need to reverse the operation. No issues.



Panes are largely the same across screens, small changes where options are greyed out when unavailable; this is

considered preferable to removing this option as this creates a greater level of inconsistency. No issues.

Error prevention (5):


There are a few areas where this could be improved: in the scheduling dialogue box no prompt is provided before

removing or changing a scheduled date, this is an unwise omission as the student may accidently clear a date or make a change incorrectly, initially setting a date accidently is not an

54

issue as it is easily corrected. As the submission dialogue box is quite an important feature it should be harder to make

errors here, at present no user prompts are provided, these would be useful before uploading to ensure the student has the right file and also when the user presses cancel as they may have pressed “Cancel” when they intended to press

“Submit”. Overall error prevention rated a 3.



The only opportunities provided to the student to forget things are when they are interacting with dialogue boxes

where they may forget which assignment the dialogue box relates too, as the box does not indicate this. Recognition

rather than recall rated a 2.

Overall Flexibility and efficiency of use(7):


This prototype provides a range of options for the user to customise the layout of the page, while some of these may

not be used by some students this relates more to their work needs then to their proficiency with computers so these

would not be considered “accelerator” functions. This could be considered a minor issue so flexibility and efficiency of use

is rated a 2.

Overall Aesthetic and minimalist design (8):


This prototype has some issues with the panes on the right being somewhat cluttered, these can be minimised but may

still confuse people. Design of dialogue boxes is minimal. Aesthetic and minimalist design is rated a 2 as despite these being arguably only cosmetic issues (rated 1) they may cause

some minor usability problems.


from errors (9):

Overall evaluation

0

There are no errors defined in this prototype so there are no issues with how understandable these are to the student. While the lack of defined errors is a problem it is not what

this heuristic evaluates so this is rated a 0.

55



There is no help or documentation provided. Due to the slightly complicated layout of the system this may be an

unwise decision and some help should probably be provided to the student. Overall help and documentation is rated as a

2.

Against Scenarios


Scenario 1

Harry - Check grades for term.




all upcoming


decide when to do

them.

This prototype models

no way to check

grades so Harry will be

unable to do this.

(0)

This prototype shows

the submission status

of an assignment but

does not model any

way of viewing the

submitted file.

(0)

This prototype does

provide a way to view

all upcoming

assignments within

one module but not

across all modules,

also included are the

ability to add

scheduling dates to

help with planning.

(6)

Scenario 2

Harry - Check if his work has been

submitted.

H.C.I - Submit his latest piece of

coursework within the next 2 minutes before the deadline expires.

Hal Clarke -


This prototype shows


of an assignment so

Harry can check if a

piece has been

submitted.

(10)

This prototype should

facilitate this however

in a real world

scenario there is the

potential for the

website to crash

which may stop this;

this is not part of the

interface design so the

prototype cannot be

judged relative to this.

(10)

This prototype does

not explicitly say

anything about file

formats, there are no

restrictions stated on

the submission page

but it also does not

say that any file is

allowed, it would be

unwise to assume that

this means that any

file format is

acceptable, this

should have been

explicitly stated.

(0)

56

Scenario 3

Harry - Check he has no imminent deadline.



work.

Hal Clarke - Check which of his

assignments are still outstanding.

This prototype allows

the student to view all

their deadlines, filter

it to outstanding ones

only and sort by due

date, the student

could then look to see

what the date listed

by the first

assignment is,

however this would

have to be done on

every module

separately.

(6)

This prototype models

no way to check

grades so the student

will be unable to do

this.

(0)

This prototype show


of the assignments so

Hal can look down this

column to find

submitted and

outstanding

assignments, he can

also filter the

assignments to show

only one set. This can

only be done within a

module which may be

a problem if the

assignments Hal is

interested in are in

different modules.

(7)

Conclusions

Overall this prototype has helped to bring up some important points which will inform our choices

going into the second generation prototype.

● The lack of support for a user who wants to view their grades was probably the most

significant deficiency of this prototype as this was something that was needed to meet

multiple scenarios. Grades are a feature that we will be adding.

● In attempting to provide so much customisation of the view to the user we have made a

layout that is cluttered and somewhat intimidating to the user through a deluge of functions,

whilst some users may in fact appreciate these we feel that most will not. As a result we have

decided to scale back some of the customisation available to make the user experience

simpler.

● There is no support for users who wish to view information from multiple modules as the view

is from within one module, this has caused some user scenarios to be unmet.

57

Second Generation Prototype

Design Tool

We decided to use Microsoft Powerpoint as it is an easy tool to use and very effective. It allows us to

link screens together, showing users what would happen if they interacted with certain features

(Office-365). We also made some use of Microsoft Publisher to annotate prototypes produced in

Powerpoint. It also gave us the tools to colour in aspects of the prototypes to evaluate the effect on

usability and efficiency. With the majority of the simpler errors being addressed by the first

generation prototypes, we can focus more on the design aspect of the second generation prototype,

spending more time and resources on a prototype that is closer to the finished product.

There are other resources that we could have chosen for our second generation prototype, for

example, Balsamiq. However, as a group we have had previous experience with Powerpoint, which

gave us an understanding of its capabilities. This meant that we could save time and resources by

using a system that would fit our functional needs and that we already understand, rather than

learning how to use a new system such as Balsamiq.

Description

In this section we will create a second phase prototype, that implements the strong features of the

first stage prototypes in an attempt to create a stronger prototype. We will also commit more

resources to this prototype as most of the error have been resolved by the first prototypes.

58


Screen 1: Log In

As access will be limited to students, a login page will be required. Students will have to provide a username and password before they can access the site. As this is a crucial part to accessing the system, it must be clear and easy for students to login.

To ensure no confusion is caused there is very little text on the website and the background is clear, emphasizing the username and password boxes to be filled in. The boxes that are greyed out indicate to the user that no action is needed within that specific box. However, the white boxes indicate that the user needs to input their own personal username and password. Finally, once the user has filled in the boxes, the login button is clear to see, utilising a blue background and white writing.

59

Screen 2: Home

This screen shows the homepage of the virtual learning environment LIFE, where the user can personalise the homepage through the personalise tool on the top right. The user can select: modules, notifications, grades and calendar deadlines. An improved feature allows the user to see the near deadlines from the homepage. Upon interaction, this will lead the user straight to the submission page for that deadline.

60

Screen 3: Personalise Home Page

This screen allows the user to personalise the colours of the homepage to their own personal preference. This will improve the recall of the web page, as the user can recall the associated colours for each section.

61

Screen 4: Personalise

This section shows how the personalise system will work, a pop-up will appear over the main box

from the general personalise page (Screen 3) for the selected section, in this case Deadlines. The user

will be able to choose a colour from the selection given, then click save and return to the general

personalise page.

62

Screen 5: Calendar View

The design of the calendar view will allow the user to cycle through the months to see deadlines. Each deadline will be in its personalised colour, in this case HCI is red because the HCI module box is red, this will allow the user to easily recall which modules the deadlines are from by their colour. If an assignment has been submitted, the date will turn green and will show submitted in the brief description. If the user changes the months and wants to quickly return to today's date, they can click on the Today button to return to the current month. Users can interact with the help button at the top right, this will show a pop-up showing information on colours and deadlines (See screen 6).

The user will be able to submit work through interaction with certain dates (see screen 7).

To ensure easy navigation, the user still has the option to instantly log out or return to the home

page.

63

Screen 6: Help Page

This screen will bring up a pop up providing help for users. It will display the colours of the modules in

case the user cannot recall the module specific colours and it will also provide contact information for

the technical issues team.

64

Screen 7: Submission Pages

This screen is where the user will be able to submit assignments, this will be presented after the user

has interacted with a specific date from the Calendar (see screen 5). In this case, interacting with the

8th where there is a HCI deadline, takes the student to this screen where they can view the

assignment for that day, but also below that, the other assignments for that module. Information is

also presented to the student about the assignment, such as which submission attempt this is, the file

name submitted, the due date and time. Also on the screen are the submission options which will

take them to the next screen, where they can start the submission process. This is also the screen

where the user can view information about the grade received, once the work has been marked.

65

Screen 8: Submit Work

On this screen the user can select the file they wish to upload from their computer, this is done by

presenting a view of the users file directory, from which they can browse and select the file they wish

to upload. The user can then still see what file they have selected as they press upload and are not

required to remember their choice or go back to check it. Feedback will be given about the file upload

in the following two screens.

66

Screen 9: Upload File

This shows the pop-up that the user will see whilst the file is being uploaded, this contains a progress

indicator to show the system status and to ensure that the user knows that the system is doing

something and has not frozen or waiting for further input. A standard progress bar is used, as this is

familiar to users and requires no explanation.

67

Screen 10: Upload Notification Successful/ Unsuccessful

These screens show the result of a successful and unsuccessful submission, this is important as it

provides feedback and certainty to the user about their actions. It would be insufficient to have only

the unsuccessful upload screen, as this would not provide confirmation of success which lets the user

know they are done and provides the user with peace of mind to leave the application.

68

Screen 11: Module Page

This screen shows the user their modules so they can navigate to each one, each module button can

also show imminent upcoming assignments.

The user can also personalise colours, similar to the home page. They can all interact directly with the

assignment button for each module taking them to the assignments for that module.

69

Screen 12: Assignment Deadlines for a Specific Module

This screen shows all the assignments due for a module, showing both past and future assignments.

For past assignments, a grade is shown, and for future assignments, the option to submit a piece of

work is given. All assignments are labelled with the name, weighting and due date of the assignment.

On the right is a pane that allows the user to filter the assignments by submission status.

70

Screen 13: Grades

This screen shows grades received across all modules, there are two panes: the one on the left shows

all individual assignments by name, date and mark received, along with colour coding by module and

the right pane shows overall marks in different modules, again with colour coding. The modules

shown on this screen can be filtered, using the option on the left, to only show specific modules.

71

Evaluation This prototype is an ‘improved’ version of the low-fidelity prototypes, by this we imply that it is a version that should take the effective areas of the designs and apply them removing or improving any areas that were highlighted as issues, using the heuristic evaluation and scenario based ratings.

To evaluate this high-fidelity prototype, we will use Nielsen’s ten usability heuristics, as we did for the low-fidelity prototypes, to see the results of the usability evaluation, which we can then compare against the low-fidelity prototypes. Similarly, we will evaluate the high-fidelity prototype using the scenarios from the personas, to ensure the system is satisfying the user's needs. We will also evaluate user testing to get a deeper understanding of usability and observer how the system is used.

The results found by these evaluation methods will be clearly shown in the conclusion, summarising the findings.




System status

1 Modelled within submission feature, so users know

the system is uploading work.


Internet dependent

2 Less of an issue with the submission status.


Overall evaluation

2

System shows the user whether it is trying to upload a file. However, if the internet is lost it won't be able to

progress to a successful submission.

72


Calendar

1

Calendar normal view showing the day at the top with only the date in the boxes, giving more space for deadline information. Also the use of colours on

specific dates is similar to the real world, where we would highlight important dates.


Logical order for ease

0

Multiple ways to submit work through the calendar or near deadlines. Makes the system more user friendly

as not all the users will use it the same way.


Overall evaluation

1 Clearer calendar view with less writing.


Navigation

0 The user can navigate freely from page to page or

from a page to home or logout.


Overall evaluation

0 The users have the freedom to be able to move

around the system quickly.


Some page have return

some don't

2 User may attempt to return from a page but wont

have the option. They only have an option to go to the home page, for example, from the module page.


2 Design consistent steps so the user doesn't get

confused. However, because it is a web based system can use the back button on the browser.

73

Overall evaluation


Clear display 0

Large displays make it harder for users to accidentally navigate incorrectly.


Incorrect submission 0 Module name given clearly with colour scheme.



Clear to see whether user is on the wrong page. Also using colours to differentiate between modules

shown in the design to reduce errors.


Help section

2 Help section for calendar only, only basic help, no

solutions available.


Labelling

0

Clear labels or pictures for each interaction.


Users can see submitted work

0 Users can see if work has been submitted.


Overall evaluation

1

Improve help section, needs perhaps in future work, a tutorial.


Customisations available

1 Most options to customise, home page and modules.


1 Calendar only in monthly view to increase space by

removing view options.

74

View calendar


Overall evaluation

1 Customisations available to improve users recognition


Clear background

0 Clear background makes the coloured module boxes

and deadlines easier to see.


Limited information per page makes it clear

1 Limited information per screen reduces confusion.


Overall evaluation

1 Limited information on screen makes key information

that is displayed more visible.


from errors (9):

Errors in handing in work

2 If unable to hand in work system will display message “failed to submit work”, does not provide information

as to why.


from errors (9):

Overall evaluation

2 Does not describe why the system isn't working.


Help

2 Only on calendar screen, also doesn't give the user help using the site, only colour references and site

help email.


2 Help needs to be more general, implement tutorials

on usage.

75

Overall evaluation

Against Scenarios Score out of 10 (0-poor/ 10-excellent) scenario satisfaction.



for term.

H.C.I - check he has submitted the correct


Hal Clarke - check for

all upcoming


decide when to do

them.

This prototype will allow Harry to check his grades from the

home page using the grades box.

(10)

H.C.I will be able to check he has

submitted the correct work. H.C.I can use the

calendar to see previous submitted

pieces of work he will then be able to see the

file submitted. (9)

Hal will be able to see all deadlines on the

calendar.

However, he won't be able to set up a work

schedule on this system.

(7)

Scenario 2 Harry -check if it’s

submitted.

H.C.I - submit his latest piece of coursework

within the next 2 minutes before the

deadline expires.

Hal Clarke -

compatibility issues.

Harry can use this prototype to check he has submitted work.

(10)

H.C.I can quickly use the calendar or use

the near deadlines tab on the homepage and

module page to quickly reach the

submit page. (10)

Hal will be able to submit work in any

format. (10)

Scenario 3 Harry -check he has no

imminent deadline

Harry can use the calendar or near

deadlines tab to see

H.C.I will be able to see his grades using

the grades tool it will

Hal will be able to see from the calendar what deadlines are

76

H.C.I - check whether his current grade is


work.

Hal Clarke - check

which of his


outstanding.

close deadlines. (10)

also show him his average score so far. However, it does not inform him what he needs to get on his next assignment to

reach a certain grade, he needs to work that

out. (8)

approaching and which deadlines have

already been submitted.

(9)

User Testing Evaluation

Nielsen (2012) researched the correlation between problems found and the number of evaluators, in

a study he concluded that the most efficient amount of participants to use is 5, after taking into

account the number of problems addressed and cost.

Three types of evaluators defined by Nielsen (2012) can be used: double specialists, regular specialists

and novice users. Both the double and regular specialists have interface experience, however, in this

project we will use novice users to evaluate the prototype, due to financial benefits.

As this prototype was created using Powerpoint, the prototype isn't fully functional, so the

participants wouldn't be able to search the system freely to find errors, otherwise known as self

guided approach, therefore, we would need to use a task directed approach to evaluate the

prototype. Also as the project is based on deadlines and submission, we want the participants to focus

upon that specific area of the VLE, made possible through guided tasks.

To ensure that the results were not affected by any extraneous variables, we conducted the sessions

with the users individually, giving a scripted explanation of the study to each user, so they were not

influenced in anyway by the observer.

Each user was given a task to complete using the Powerpoint prototype, the observer watched to see

any unusual behaviour or errors that may occur during the experiment.

After the experiment, they were given a questionnaire consisting of open and closed questions about

their experience of using the system, the observer would note down the task that participant was

given compared to the questionnaire results.

77

Tick relevant box:

Statement Unlikely 1 2 3 4 5 6 7 Likely

I would find it easy to get the VLE to do what I want it to do

I would find the VLE easy to use

Learning to operate the VLE would be easy for me

Do you have any comments on usability?

(Davis, F. D. 1989)

Participant 1 - submit a file for a deadline that is tomorrow.

Observations:

Participant was able to use near deadlines tab to navigate to submission page.

Participant found the submit button easily.

Participant waited after they had clicked okay to submit file as the loading icon appeared.

After the “submission successful” pop-up was displayed the participant logged out, with no clear

delay in finding the button.

Questionnaire Feedback:

The participants mean score was 7 and commented on how easy the system was to use for the

specific task given.

Participant 2 - find all deadlines for a certain month.

Observations:

Participant navigated to the calendar deadlines.

Once they had reached this page they scanned the page looking for a date input.

After they couldn't find one they cycled through the months manually until reaching the desired

month.

Once they had seen all the deadlines for that month they logged out of the system, showing no clear

signs of struggle.


The participants mean score was 4 and commented that the calendar did not allow for search of a

specific date.

78

Participant 3 - Locate current grades.

Observations:

The participant quickly found the grades box on the home screen.

The participant was then able to see the overall module grades so far.

After reaching this page the participant returned to the home page before logging out.


The participants mean score was 6 and commented that the VLE was user friendly and clear.

Participant 4 - personalise homepage.

Observations:

The participant struggled to find the personalise button on the home page taking longer than

expected to interact with it.

The participant then changed the colour of each box available on the home screen.

This was a slower process than expected as each time the participant had to choose a box to

personalise then change the colour, save and return.

The participant returned to the homepage to see the changes before logging out without an obvious

struggle.


The participants mean score was 5 and commented that the VLE didn't allow them to quickly

personalise the homepage due to constant saving and returning.

Participant 5 - Look at all deadlines and grades for a specific module.

Observations:

The participant first went into grades where they found the overall grade for the module.

The participant then navigated back home then to the modules.

The participant then navigated to the assignments for that modules using the tab available.

Once on this page the user could see all the deadlines in chronological order. Deadlines that had been

submitted and marked had grades next to them.

The participant then logged out using the button at the top left of the screen.


The participants mean score was 5 and commented that the VLE displayed clear grades and deadlines,

however, unclear on the home screen that modules contains grades also.

Mean score of 5.4

79

Results of Evaluation

All of the evaluation tools used for the second prototype: heuristic, scenario based and user testing

show a greater number of positive features compared to the first prototypes. Only a small number of

minor errors would need to be changed before the final product.

The average score from the user testing was 5.4 on the usability questionnaire provided. This shows

that the users are most likely to be pleased with the performance of the system, however,

improvements to the usability can still be made.

Some errors that were found were due to the unfriendliness of the personalisation tool, as the user

had to change each colour separately rather than having a drop down menu of the colours available,

to reduce the amount of time it would take for users to personalise the home page or modules page.

The evaluation also shows that the system is still internet dependent, a way that we tried to address

this was through the personal welcome feature and loading icons for submitting work. However, a

feature that we could have implemented would have been a small icon showing the user whether

they are logged in or if internet problems have logged them out.

From the high-fidelity scenario evaluation compared to the low-fidelity scenario evaluation, we have

seen an improvement in the number of scenarios achieved. However, possible improvements could

be implemented in future systems, for example, allowing the user to set up work schedules so they

can see what work they should be focusing on. This could be implemented within this system using

the calendar page, having one calendar for deadlines and one for the schedule of work.

In conclusion, the evaluation shows us that the second prototype is more usable compared to the

first prototypes. However, some issues are still present within the system, that would need to be fixed

before a final product release to the real world.

80

Summary and Recommendations

In this project we examined existing VLEs to define a problem. We then looked into literature based

on web design and usability to guide our ideas to solve this problem. We then created personas to

ensure that the prototypes we were creating were based around the user's needs and not what we

want in the system as designers.

Based on the literature and scenarios, we built three low-fidelity prototypes in an attempt to create a

system that achieved all of the scenarios in a user friendly way.

We then took all the good elements of each prototype and applied them into one final prototype.

The final prototype was evaluated using the usability heuristics, scenarios of the users and user

testing. The results showed that the final prototype was very close to completion, with only a few

minor usability problems still existing.

However, we defined the problem as a lack of deadline features among current VLEs, which we aimed

to create, and to that end, we have succeeded in creating a system that can show the user deadlines

for the whole course in one place and allow them to hand in work and see grades.

Therefore, we can claim the project has been a partial success, as we have managed to create a

system that solves our problem with only a few minor issues outstanding, which in a real life situation

could be solved by dedicating more time and resources to these remaining issues.

In an attempt to create successful first prototypes, we aimed to apply the knowledge obtained from

the literature. And some aspects of the literature were used within our first prototypes, for example,

the emphasis on putting the most useful features on the top row, for the user to see quicker.

However, not all of the findings from the literature were incorporated, for example, some prototypes

had a lot of words and were cluttered.

On the other hand, this was noticed within the evaluation stage and was improved upon in our final

prototype.

The project was based around deadlines and management, in that sense we have stuck to the desired

approach by implementing a system that allows the user to see deadlines, submit work and find out

grades. However, in an attempt to also make the system user friendly, we deviated from the goals by

adding personalisation tools.

Although we did find some relevant literature for certain aspects of web browsing, some aspects we

took from existing systems, for example, the use of colours in our system was inspired from the

design of Canvas. However, no literature was directly examined for this aspect and we decided that

trading using less words for colour would be beneficial. On the other hand, this means that no

literature regarding the use of colours was directly examined, and thus we don't know what the most

beneficial colours would be for certain features, such as a logout button, or how users with

disabilities, such as colour blindness or hardness of sight, would use this system.

81

Within our final prototype we have implemented features that we have no understanding of

regarding their feasibility, for example, being able to hand in files using any document format to save

the user converting a file themselves before submission. As we don't know how feasible this feature

is, we cannot just assume it is possible in the real world. As it is used in Moodle we believe that it

would be feasible but we cannot simply assume this, as lecturers may accepted submission in any

format.

If we were to do this project again in the future as a group, we would need to work more as one,

rather than sharing ideas and thoughts then working individually. This created problems, as we didn't

know what each member of the group was doing what in the prototype phase, and we didn't want to

overlap certain features, so we could get a more diverse range of results to aid in the creation of the

second generation prototype. Towards the end of the project, however, we had more sessions to

discuss goals.

In the future, if we did group work again, it would be beneficial if we set clearer goals for each

member to complete, to reduce confusion and increase the productivity of the group, as towards the

end, members didn't know what work to do. This could have been solved by spending more time

together and completing work earlier.

Overall, this project has reached our set goal of creating a virtual learning environment that has

deadline management features. However, due to small underlying errors and assumptions made, it is

not ready for real world usage, but with more testing and evaluation, this could be made possible.

82

References

Bbhelp, (2013). How to access Blackboard. Available at

http://bbhelp.hyms.org.uk/how-to-access-blackboard/ [Accessed 20, November, 2016].

Bevan, N (2001). International Standards for HCI and Usability. International Journal of Human

Computer Studies, 55(4), 533-552.

https://canvas.bham.ac.uk [Accessed 20, November, 2016].

Carroll, John M. Mack, Robert L. Kellogg, Wendy A. (1991). Interface Metaphors and User

Interface Design, in: M. Helander (ed.): Handbook of Human-Computer Interaction, 2nd. Ed.

Davis, F. D. (1989), Perceived usefulness, perceived ease of use, and user acceptance of

information technology, MIS Quarterly 13(3).

Edgehill. (2016). Technology Supported Learning – Submission Possible with SafeAssign . Available at:

https://blogs.edgehill.ac.uk/learningedge/tag/blackboard-9-1/ [Accessed 20, November, 2016].

MacKenzie,I.S, Buxton,W. (1992). Extending Fitts' law to two dimensional tasks. Proceedings of

the CHI '92 Conference on Human Factors in Computing Systems . New York:ACM.

http://moodle.bcu.ac.uk [Accessed 20, November, 2016].

Nielsen, J (1992). Finding usability problems through heuristic evaluation. Proceedings ACM CHI'92 Conference (Monterey, CA, May 3-7): 373-380.

Nielsen, J. (1994). Heuristic evaluation. Usability inspection methods , 17 (1), 25-62.

83

Nielsen , J (2006). F-Shaped Pattern For Reading Web Content. Available at:

https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/ [Accessed 20,

November, 2016].

Nielsen , J (2008). How Little Do Users Read?. Available at:

https://www.nngroup.com/articles/how-little-do-users-read/ [Accessed 20, November, 2016].

Nielsen , J (2010).Horizontal Attention Leans Left. Available at:

h ttps://www.nngroup.com/articles/horizontal-attention-leans-left/ [Accessed 20, November,

2016].

(Office-365). http://office.microsoft.com/en-gb/home-premium/ [Accessed 20, November,

2016].

Zeldman , J (2001). Taking Your Talent to the Web: A Guide for the Transitioning Designer. New

Riders.

84

introduction to human-computer interactionrjh/courses/introductiontohci/2016-17/...introduction to...

Documents