M o o d l e U X e v a l U a t i o n PaGe 1

G R E A T U X E X A M P L E S / I n S P I R A T I o n

Medium – online user generated articles: medium.com/p/new-post

Gibbon – online user generated learning playlists: gibbon.co

Build a free HtMl email template in 60 seconds: www.campaignmonitor.com/email-templates/#gallery

Moodle UX EvaluationTara Mann

M o o d l e U X e v a l U a t i o n PaGe 2

C o n T E n T S

introdUction 3

Product information 3

Product description 3

target audience 3

evalUation tecHniQUe 3

Methodology 3

SpecificGoals 3

Heuristics Used 4

SUMMarY oF FindinGS 6

SPeciFic ProBleM areaS 7

1. Global editing button overwhelms the user when turned on 7

2. the default spacing, alignment and hierarchy cause confusion 9

3. icons for activities / resources confuse the user 11

4. Frustration when using / creating books 12

5. Spacing and alignment of forms causes mild confusion 14

overall USaBilitY recoMMendation 16

topics as pages shown on left hand navigation 16

SUMMarY 17

reSoUrceS 17

M o o d l e U X e v a l U a t i o n PaGe 3

I n T R o d U C T I o nthis document contains a basic usability evaluation of the current stable version of Moodle.Itisbasedonthevanilla,nomodifications,versionpreviewedontheMoodlesite: demo.moodle.net. the usability evaluation focuses on the user experience from the perspective of the teacher needing to edit the course and the student working through the course at a basic usability level. visual recommendations are provided for each problem found.

P R o d U C T I n f o R M A T I o n

Product descriptionMoodle is a learning platform designed to provide educators, administrators and learners with a single robust, secure and integrated system to create personalised online learning environments. Moodle is built by the Moodle project which is led and coordinated by MoodleHQ,anAustraliancompanyof30developerswhichisfinanciallysupportedbyanetwork of over 60 Moodle Partner service companies worldwide.

Target audienceMoodle is targeted at schools, colleges and universities that would like to offer their courses online (digitally). it is also targeted at the students who will be using Moodle to learn and the teachers creating their courses for delivery to students. this includes a wide range of ages,nationalitiesandstagesoflife,butspecificallytothehighereducationsector.

E V A L U A T I o n T E C H n I Q U E

Methodologythe evaluation method being used here is the usability heuristic evaluation designed by usabilityexpert,JakobNielsen.Thismethodisdesignedtomeasurespecifictaskswithinauserinterfaceagainstsomespecificprinciplesknowntoimprovetheuserexperience.Itisalso designed to be completed relatively quickly to solve basic issues before any extensive rounds of user testing take place.

Specific Goalsthe goals are to highlight any user experience issues. While some of these issues may work at a functional level and are achievable, repeating a task that feels tedious or unnecessary can cause frustration for the user. in any one instance, these would not result in any major frustration, but as a collective of small usability issues, the user experience is lessened. Judging from the user feedback online, this is causing many people frustration, therefore the main goal would be to make suggestions to solve and make invisible many of the

M o o d l e U X e v a l U a t i o n PaGe 4

processesthatcurrentlycausefrustration,whichwillallowtheusertofullybenefitfromusingthe powerful system being provided.

at the end of this document there is a section titled overall usability recommendations which looks at the possibility of a completely refreshed perspective to working with Moodle andcreatingcourses.ThisaimstogiveMoodlecoursecreatorsevenmoreflexibilityanda“web” feel that is more consistent with modern web services today. this has been placed in a separatesection,asthesearenotnecessarilybasedonspecificdesignheuristicsbutanoverallfeeling of user experience on the web compared to the user experience within Moodle.

Heuristics Usedthe heuristics used are the 10 usability heuristics for user interface design developed by Jakob neilsen. they are general principles for interaction design. they are called “heuristics”becausetheyarebroadrulesofthumbandnotspecificusabilityguidelines:

10 usability heuristics for user interface design

# Heuristic Description

1 Visibility of system status

the system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

2 Match between system and the real world

the system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

3 User control and freedom

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

4 Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

5 Error prevention

even better than good error messages is a careful design which preventsaproblemfromoccurringinthefirstplace.Eithereliminateerror-prone conditions or check for them and present users with a confirmationoptionbeforetheycommittotheaction.

6 Recognition rather than recall

Minimize the user’s memory load by making objects, actions, and options visible. the user should not have to remember information from one part of the dialogue to another. instructions for use of the system should be visible or easily retrievable whenever appropriate.

M o o d l e U X e v a l U a t i o n PaGe 5

7 Flexibility and efficiency of use

accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. allow users to tailor frequent actions.

8 Aesthetic and minimalist design

dialogues should not contain information which is irrelevant or rarely needed. every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

9 Help users recognize, diagnose, and recover from errors

error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

10 Help and documentation

even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

Prioritisation of Problemsrather than identifying each problem individually, the problems have been grouped into fiveareasfocusingongeneraleditingandaccessibility.Theapproachtakenisoneofdecluttering and replacing many tools viewed at the same time with a “tools when you need them”approach.Specificattentionhasbeengiventospacing.Spacewillassisttheusertonavigate the system more easily, and space in the digital world doesn’t cost a thing!

M o o d l e U X e v a l U a t i o n PaGe 6

S U M M A R Y o f f I n d I n G Sthis is a basic summary of the problems encountered when certain tasks within Moodle were carried out with the usability design heuristics in mind. a more detailed explanation for each is provided in the next section.

# ProblemHeuristic number

Broad heuristic neglected

1 Global editing button overwhelms the user when turned on

6

8

Recognition rather than recall

Aesthetic and minimalist design

2 the default spacing, alignment and hierarchy cause confusion

2

8

Match between system and the real world

Aesthetic and minimalist design

3 icons for activities / resources confuse the user

2

6

Match between system and the real world

Recognition rather than recall

4 Frustration when using / creating Moodle books

6

8

Recognition rather than recall

Aesthetic and minimalist design

5 Spacing and alignment of forms causes confusion

2

8

Match between system and the real world

Aesthetic and minimalist design

M o o d l e U X e v a l U a t i o n PaGe 7

S P E C I f I C P R o B L E M A R E A S

1. Global editing button overwhelms the user when turned on

PRoblEM:

When the global editing button is in “on” mode, every editing option for the navigation block, sections, and extra blocks are all visible at the same time. in some instances there is more than one option visible in the same row for a user to choose from. the appearance of all these options at the same time also causes some of the layout to shift down to accommodate these editing options. this causes an interference effect and the user must constantly re-assess the space they are working in, they are left feeling overwhelmed with all of the options on display. in addition, this mode does not provide an accurate representation of the completed edits, causing the user to constantly switch between “editing on” and “editing off” modes to be able to judge how the edits will appear.

Notice how the exact same number of options are available, but the environment feels much more manageable. Note also, that the “settings cog” only appears when the mouse hovers over that area (the entire area).

AFTER

BEFORE

M o o d l e U X e v a l U a t i o n PaGe 8

USability heUriStic/S NeGlected:

Recognition rather than recall: Minimize the user’s memory load by making objects, actions, and options visible. the user should not have to remember information from one part of the dialogue to another. instructions for use of the system should be visible or easily retrievable whenever appropriate.

Aesthetic and minimalist design: dialogues should not contain information which is irrelevant or rarely needed. every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

RECoMMEnDATion:

Asolutiontothisproblemwouldbetofirstconstrainthenumberofoptionsdisplayedatthesame time for a single item. Having all these options displayed at once, actually increases the choices a user is having to make and causes further overload. Secondly, eliminate the need to have editing turned on by having settings cogs (with drop-down menus) that appear at all times on hover, when the user is signed in as administrator (as pictured below). a comforting stop-gap for the user might be to keep the “turn editing on” button, but make it default to “on” with the button displaying the word “preview” to turn it off. this would provide a “the right tool when you need it” feeling for the user and also allow the user to continue editing without getting distracted by the interface.

a further solution to the back and forth feeling a user may experience when editing basic features on this page, would be to allow the user to edit text directly from the main page eliminating the need for a separate editing page (see www.medium.com/p/new-post). additionally, changing the cursor into the move tool icon when placed over topic headings, eliminates the need for this extra icon to appear.

it has also been noticed that when the user wants to edit a chapter while they are in “editing off” mode, they have to return the home screen before returning to the chapter before any editing may occur. the above solution would also solve this issue.

M o o d l e U X e v a l U a t i o n PaGe 9

2. The default spacing, alignment and hierarchy cause confusion

PRoblEM:

the alignment and spacing of the activities and resources, in particular, cause the user confusion especially when there is more than one resource and there is a description for a particular resource. the description sits between the two resources and is the same distance from the resource above as the resource below. the text is lined up with the title of the resource, but still remains ambiguous. this may not seem like a major problem, but for the userwhoistryingtodeciphertheforeigniconsandfigureoutwhattodointheircourse,descriptions that the user has to determine with an extra mental process cause discomfort.

UsAbiliTy HEURisTiC/s:

Match between system and the real world: the system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

BEFORE

AFTER

M o o d l e U X e v a l U a t i o n PaGe 10

Aesthetic and minimalist design: dialogues should not contain information which is irrelevant or rarely needed. every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

RECoMMEnDATion:

aligning elements creates a sense of perceived stability adding to the overall aesthetic. although the current intention is to separate course resources/activities by an indentation, it would be better to separate them vertically with more space. this also goes for the resources themselves. the hierarchy can be improved by increasing the font size of the resource and decreasing the font size of the description. “Hierarchical organisation is the simplest structure for visualising and understanding complexity” - Universal Principles of Design.

M o o d l e U X e v a l U a t i o n PaGe 11

3. icons for activities/resources confuse the user

PRoblEM:

the current layout and use of icons confuse the user. icons used for the activities/resources/fileslookasiftheyareALLdownloads.Someofthemmightbedownloads,butsomeofthem take you to new pages, lessons, books or quizzes. these icons are also similar to many operating system icons for other items, for example, the “page” icon looks similar visually to a Word document. the user might assume that if they click this link, a word document will download and appear on their screen. the the icons may be used to highlight the resource as a result of the lack of spacing, alignment and hierarchy as mentioned previously. Solving the previous issue would allow the icons to either be smaller or less prominent, letting the content and description to be communicated without distraction.

USability heUriStic/S NeGlected:

Match between system and the real world: the system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

Recognition rather than recall: Minimize the user’s memory load by making objects, actions, and options visible. the user should not have to remember information from one part of the dialogue to another. instructions for use of the system should be visible or easily retrievable whenever appropriate.

RECoMMEnDATion:

a couple possible solutions to this issue (used in combination with the previous solution to spacing, alignment and hierarchy) would be to make the icons smaller or to make them less prominent by making the icons one colour. Making the icons much simpler would also help.

BEFORE

AFTER

M o o d l e U X e v a l U a t i o n PaGe 12

4. Frustration when using / creating Moodle books

PRoblEM:

Thefirstproblemalreadyraisedisthatthereisnowheretoturntheeditingonfromthebookmoduleonceyouareinsidethebook.Thiscausestheuserfrustrationastheymustfirstreturn to the main page to switch editing on.

there are also multiple editing options all displayed at once for every chapter. this again causesinterferenceandtheuserdoesn’tknowwhichoptiontoviewfirst.Therearetoomany choices to remember them every time, causing the user to most likely hover over each one just to check.

AFTER

BEFORE

M o o d l e U X e v a l U a t i o n PaGe 13

the “next page” “previous page” icons within the book module are very minimalistic, however, they get lost on a page (and within a book) that can potentially have a limitless amount of content.

USability heUriStic/S NeGlected:

Recognition rather than recall: Minimize the user’s memory load by making objects, actions, and options visible. the user should not have to remember information from one part of the dialogue to another. instructions for use of the system should be visible or easily retrievable whenever appropriate.

Aesthetic and minimalist design: dialogues should not contain information which is irrelevant or rarely needed. every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

RECoMMEnDATion:

the solution to these issues would be to condense all of the settings into one cog with a drop down settings menu. and to create a more explanatory “next page” and “previous page” visual. a subtle line and some space could differentiate between the end of the content and the previous/next buttons.

M o o d l e U X e v a l U a t i o n PaGe 14

5. spacing and alignment of forms causes confusion

BEFORE

AFTER

M o o d l e U X e v a l U a t i o n PaGe 15

PRoblEM:

the current form layout is quite minimalistic, however, the categories are positioned on the far left and the content to the right. the eye has to jump from left to right all the way down the form to decipher all the input required and there is a high possibility of missing the categories altogether.

UsAbiliTy HEURisTiC/s:

Match between system and the real world: the system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

Aesthetic and minimalist design: dialogues should not contain information which is irrelevant or rarely needed. every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

RECoMMEnDATion:

a solution to this would be to left align all form content so that no content can be missed accidentally, and instead use visual hierarchy to differentiate the different categories from each other. it might make the form a little bit longer, but it will feel a lot easier to use.

M o o d l e U X e v a l U a t i o n PaGe 16

oVERALL USABILITY RECoMMEndATIonthis section looks at the possibility of a completely refreshed perspective to working with Moodleandcreatingcourses.ThisaimstogiveMoodlecoursecreatorsevenmoreflexibilityand a “web” feel that is more consistent with modern web services today. this has been placedinaseparatesection,asthesearenotnecessarilybasedonspecificdesignheuristicsbut an overall feeling of user experience on the web compared to the user experience within Moodle.

Topics as pages shown on left hand navigationin this solution, the Moodle topics (weeks) are set up as pages viewed individually as opposed to one above the other on the same page. at current, the topics are visible in the left hand side navigation. this solution looks at hiding some of the extra hierarchy and just using these as links to separate pages. i have also visualised (below) a page editor “in course” solution which eliminates the need to jump from course preview to the editing page and back again.

to solve the issue that this causes, which leaves the teacher nowhere to provide a blog style weekly update to students, i would recommend that the pages are able to have a few basic templates that the teacher can then choose. these page template formats, for example, could be a choice between “blog”, “video lectures”, “plain text” etc.

M o o d l e U X e v a l U a t i o n PaGe 17

S U M M A R YOverall,thefunctionalitywithinMoodleisok.Thespecificproblemareasaddressedarerelatively minor individually. When all of these issues are added together, however, the user findstheexperiencetediouscreatingalowoveralluserexperience.Addressingtheseminorissues could transform the entire user experience to be a pleasure rather than a tedious and time-consuming one, allowing the user to be freed up to make full use of the amazing tools that the system provides.

R E S o U R C E S10 Usability design Heuristics http://www.nngroup.com/articles/ten-usability-heuristics/ (23 February 2015)

Lidwell, W., & Holden, K. (2010). Universal principles of design: 125 ways to enhance usability, influence perception, increase appeal, make better design decisions, and teach through design (2nd ed.). Beverly, Mass.: Rockport.