Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Usability/Improve Moodle User Experience Consistency

From MoodleDocs

Up to Usability

Proposition for Google Summer of Code 2009 (based on prior discussion with Tim Hunt and Helen Foster)

Olli Savolainen / University of Tampere, Finland

Executive Summary: Review Moodle's overall user interface. As an intermediary step, create a lightweight Human Interface Guidelines style documentation for Moodle. After having gathered the principle interaction styles and elements, discuss them with the community and fix the most obvious inconsistencies found.

See discussion: Introducing the project / Also: In the usability forum

Motivation

In Summer 2008, I worked to enhance the usability of the Moodle Quiz module, based on reported needs of teachers. During this project the lack of usability documentation became obvious. On one hand, there is an implicit Moodle way of doing user interfaces, but then it is not very well documented.

When I started working on the Quiz UI I was not deeply knowledgeable about Moodle as a whole. Though consistency was discussed in that project, the fact shows in the outcome. It was difficult to keep a complex UI design consistent with the whole of Moodle where the spectrum of UI elements used is quite limited. Moodle is just starting to introduce the fluidity of AJAX-style UIs.

Although I have been developing for Moodle since Summer 2006, I also consider this an important learning experience about the whole of Moodle for myself, to gain deeper understanding about the different possiblities provided by Moodle, and about how they correspond to actual user needs.

Summer 2009: In practice

Moodle is a web application. Web applications do not, in general, have strict consistency rules or UI guidelines. However, Moodle is also starting to be a big application.

Different parts of it share similar interactions, and they should work similarly across different components, or modules. To this end, developers should be capable of searching the documentation for topics such as “selecting a group of users” or “opening a file” and find a concise explanation describing what the user experience should look like and possibly how to implement it.

Based on the usage scenarios and use cases of each component, a limited amount of usability testing will be carried out. Necessary improvements will then be suggested on the user interface level to enhance the interoperability between different parts of the whole.

I will implement changes, the need for which rises from the research phase that can be sufficiently usability tested, agreed about in the community, and are reasonable easy to implement in terms of software development. Larger-scale guidelines for improving consistency will be discussed in the community and documented.

UIs to examine

My current impression is that at least the following are an integral part of the core Moodle experience, and need to be evaluated as a part of this project. This list is not definitive, but serves as an initial perspective of the scope of the project:

  • Course management: Front page, category page, Main course page (including different formats)
  • My Moodle, User profiles, course participants list
  • Assignments, Database activities, File management, Feedback, Forums, Glossaries, Quizzes, Resources, (Wikis, Lessons, Hot Potatoes)
  • Gradebook, Outcomes, Backup& Restore, Question bank, various Settings screens (forms).
  • More modules listed in using moodle forums listing (could not find it from moodle.org menus now)

Interaction styles/elements to examine

  • consistency of feedback; normal and error situations; recovery
  • data listings and their operations, such as quiz editing and moodle course front page
    • gradebook: clicking on column titles to highlight the column
  • editing modes: inline editing (course frontpage) vs. editor (quiz)
    • related: most CMSs have separate control panels and inline editing is extra, in Moodle there is no clear distinction between control panels and content pages
  • Blocks
  • Themes
  • Filters

Outcomes

  1. As a result of having discovered consistency issues, fixes to Moodle 2.0 UI code to enhance the overall user experience (UX)
  2. Index of the current screen types, interaction styles and elements, with their intended uses. Should also be searchable by intended use, to find out what UI elements to use in a given situation.
  3. Secondary outcome: find and gather typical use cases of core UIs/modules -> useful for usability testing and further UI design

The format in which to present the guidelines is still unclear. The main objectives are

  • Lightness, quickness: rather links to examples and screenshots than lengthy explanations
  • Interlinked elements (UI's, issues, guidelines, etc.) to facilitate keeping documentation in context and easing maintenance.

What is ahead: challenges

We need to do this together. Although I am promoting building at least some sort of a skeleton of a documentation on the User Experience (UX) level, the point is to create something that the community can embrace and use, as a part of the developer documentation used in everyday development discussions. Moodle already has a lot of documentation for technical considerations and it has usually been easy to get help for technical issues. Usability needs to have an equally important role, as discussed many times before.

The challenge in trying to standardize something such as UI designs, is that the whole point about developing applications for humans is often about creating new styles of interactions. Thus, it is key to create a strong convention to keep this documentation up-to-date. That is, whenever developers decide that something is missing in the catalog, it will be added. The most standard i.e. common and mundane tasks need to be the most easy-to-find, keeping at least them standard across Moodle.

Also, usability testing the suggested solutions sufficiently for actually changing the implementation is quite a challenge during just one Summer.

Background: The Ultimate Goals

Goals

Give power to the developers to create good, Moodle-style UI's

The main goal is to gather lightweight HIG-style documentation to help evaluate the consistency of the current UIs and to facilitate the design of future UIs. For this to be useful, using the HIG needs to be incorporated in the developer guidelines (and in the moodle developer course) of Moodle. All UIs should be validated against the HIG and if an UI deviates from the HIG, the fact and the reasons for it should be documented with in the documentation for the code.

The intended use of the main core modules will be studied and preliminary documentation will be gathered so that anyone building on an existing UI will know what user needs they are designing for. This will also facilitate usability testing since it will be transparent to what the main tasks to test against are, even to people who do not already know the UI (this seems to avoid the bias of defending the familiar, during usability tests).

As opposed to the Quiz UI work of last summer, the approach is top-down. The point is to examine the goals each of the main components of the user interface, in the context of Moodle, as a whole.

The goal is to create a framework for developers to think about and document the user experience (UX) of Moodle. The knowledge of what has been verified – typically with usability testing – to work for users, needs to be available. A Human Interface Guideline (HIG) is one way of thinking about it. However, there is rigidity and vastness to a typical HIG that we want to avoid: it is paramount that what is documented is both easily accessible and maintainable.

Later: Documented user descriptions and scenarios

The basic requirement of usability work is to "Know Your Users". However, at this point we do not deal with the actual profiles of users: the assumption in this project is that the community-based development style with a strong focus on feedback helps developers approximate user needs.

This knowledge about users is often expressed in terms of Personas, scenarios and use cases.

In a separate effort, Moodle should take a more robust approach to base its design on really knowing that we know our users, instead of the gut feeling of developers (no matter how close they might feel to teachers, students, or other users).

Also other aspects of HIGs, such as keeping vocabularies consistent and accessibility issues should be considered, but they are not the focus of this project.

My competences

In Summer 2008 I redesigned and implemented the Quiz editing UI: did interviews for scenarios, usability testing testing and community discussions. The result of this work is now included in Moodle 2.0 HEAD.

Before this, I worked in the University of Tampere on a Moodle integration project. I am also an Interactive Technology major in that university. I am currently writing my thesis about Usability processes in open source projects, with last summer's Quiz work as the principal case that is examined.

Current state of research (in constant state of change)

Advice to possibly include in the final documentation

  • do not relay UI design decisions to moodle admins (unless you really have different use cases where different UIs would be suitable for different sorts of users AND the UI can't take them into account "by UI design otherwise" (explain further).
  • A hig includes an index of interaction styles that are part of standard Moodle: "if your proposition for a new UI contains new interactions, please link to it under the 'suggested interaction styles' in the HIG, and it will be checked out and discussed."

Issues, to be researched further

These are not tested and proven, but some things I have discovered while working on Moodle

  • If users are not logged in, they sometimes get a login screen (forum) and sometimes just an error message (moodle.org blogs) when accessing content.
    • It is questionable whether content that is accessible via "login as guest" button by anyone should require passing through a login screen in the first place, since most web apps do not require such - it is a hassle to remember to mention "press the login as guest button to get to the actual target of this link I am posting"
      • there were references in the tracker to "guest autologin" feature but I don't know if this is it or what are the reasons for this being a setting
  • if moodle.org wants to present usage of moodle, it should be consistent with moodle's ux itself. an example: where is the listing to all the forums from the breadcrumb?
  • Feedback: sometimes Moodle gives non-localized, entirely technical and unhelpful feedback even to normal users.
    • "Olli - Under "Some potential things that require change, to be researched further" you mention Feedback being too technical and unhelpful feedback to normal users - could you cite an example or two to show what you mean? Thanks - Anthony "
  • Quiz:
    • new interaction styles introduced by usability work of summer 2008
      • icons in tabs: is this a problem to someone? preview icon should in my opinion be used in all preview tabs? the reasoning is to familiarize users to the meaning of the icon by associating it with the label
      • using overflow:none in listings where the content does not fit screen
    • integration with question bank
  • New UI work recently done on gradebook
  • Moodle messaging:
    • Might be required: unobtrusive notifications for new private / forum messages, external notifications consistently regardless of whether user is logged in
  • Facilities for consistent undoing across Moodle, see for example Talk:Projects_for_new_developers#XML_templates_for_admin_settings
  • Moodle messaging: mail/whatever notifications should come regardless of being logged in (is this true in the new notification framework?), unobtrusive web notifications (moodle is the only thing to use unrequested popups; see facebook and basically any web app on the planet for less distractive interaction styles)
  • new gradebook: visual report disabled states
  • dialog title bars visuals: file selector vs. quiz dialogs
  • show/hide controls (eye icon/button): should it reflect the current status or the status after pushing? one idea is to have a button-style control with pressed/non-pressed visual status (thanks to Hans de Zwart)
  • file selector visual hierarchy: icons/list selection is positioned in the dialog to communicate it is related to both the panes below it when it is related only to the right-side pane

Other considerations

  • Guiding teachers to better gain from Moodle's wide array of pedagogical features has been discussed quite a bit recently. This may require novel interaction styles: guides/wizards/assisted functionality
  • In Moodle Moot UK '09 Martin Dougiamas mentioned setting up functional testing in the tracker.
    • -> This is not very far from the goals of usability testing:
        • -> some of the base work is similar since to do functional testing the core functionality has to be defined and perhaps even prioritized.
    • -> And usability testing core functionality is the basis of this project.
    • TODO: Where is this discussed and documented? http://moodle.org/mod/forum/view.php?id=56 Not here?

Further reading

HIGs

Resources to include in the guidelines

Forum discussions