Again, following a usability study of our moodle install Study Direct at the University of Sussex the team began to make some improvements to the ‘Your sites’ page which lists the course sites users have access to.
Sites by year
At Sussex a site for each course is created each year, with Students and Tutors for the site pulled in from our central database. Students and Tutors can go back and look at previous years sites and find this very useful. It can however prove confusing in moodle where a user could have many sites with exactly the same name – from different years. Tutors, for example, can teach the same course each year and have sites for every year they have been teaching the course. To help us organise this we keep meta-data about the course year, study level and term (Spring, Autum etc..) in the moodle database and can use it to organise how we show sites to users.
The new ‘Your sites’ page takes full advantage of this – organising sites into :
Current sites – sites from the current academic year & sites which do not have any academic year but run continuously
and individual academic years – in the screen shot below 08-09, 07-08 and 05-06
We presented these initial ideas at a user group meeting for june 2010 – shown in the video below.
So far this seemed to be an approach users like, and after further consultation with users we started to implement it in moodle with some more features the users requested.
Displaying site metadata
In the screen shot below you can see Accuracy in Academic Communications is an Autumn 09-10 Undergraduate course. Colour coding is given to the term data – brown for autumn, green for spring and yellow for summer – as an added differentiator.
Sites which are in ‘draft’ – i.e. not published to Students – are shown to Tutors only with a message, and yellow background.
Site roles & clustering of colleague sites
The role a user has in each site is displayed clearly on the right hand side.
One of the problems some staff face is the sheer number of sites they have access to. Some Staff may have access to all the sites in their department or school. To ‘hide’ these sites they may not be directly responsible for, but need access to, a special list called Colleague sites was created. In the screen shot below you can see a link to the Colleague sites i have access to.
Encouraging interaction
It’s not always easy on moodle sites, without clicking into the individual site, to see if any activity such as forum discussions has occurred since your last visit, so we pull this data out and show it under each site. In the screen shot below Stuart’s site has a Forum Update, with the time since the post shown in a ‘twitter’ style – 4 seconds ago.
Other activities including for a site are accessible directly from this page – e.g in the screen shot below afterSuss : Career Development Course shows Assignments and Quizzes. By clicking on these buttons details of the activity are displayed, including the number submitted, if it has been graded, due date and other relevant date the user is allowed to see.
Reducing ‘noise’
The screen-shot of the older Your Sites pages shows what a pretty typical user would see, and uses an off the shelf moodle style. User feedback suggested blocks on the page – although useful for admin users – were infact never clicked by most users. Information shown by default about each site e.g. user role, activities and updates – was also mostly unread, possible due to the sheer amount of data and lack of differentiation in its display.
The page itself is called Your sites and has one primary task – to display the sites a user has access to. So why do we need all the other functionality of the page? By concentrating on doing the one simple primary task in the best way possible we hope to create a better user experience for all our visitors.
Styling the page
To help bring emphasis to forum posts users picture icons are shown, and as previously mentioned, the date since the update is shown in a ‘twitter’ style of seconds since, hours since and days since – we hope this will encourage user interaction/awareness of site forums.
We use the Sussex brand fonts – Georgia (headings) and Geneva(body) – and colour definition to highlight different types of metadata.
Javascript ‘facebook’ style show / hide buttons are used to allow users to choose which activities and updates they want to see, without overwhelming them with information. A 25% horizontal grid is used to space each ‘update’ in a more readable way.
John Davies made a video of the live implementation on Study Direct which you can watch below.
* Bonus ipod/ipad/iphone gesture fun!
Fun isn’t something generally associated with a VLE, but the ipod touch and ipad try and make all forms of user interaction fun. In the previous month Study Direct had over 2000 visits from users with on ipad/pod/phone. Touch screen users are used to swiping left, and swiping right to move from one page to the next. So on the Your sites page if your using an ipad/ipod touch or iphone you can simply swipe left and right to move through the lists of different academic year sites. You can try this yourself through guest access to study direct if your on an apple touch device, or on a normal computer try using the left and right arrow keys. Simple, and yes – fun!
New 2010 ‘Your sites’ page
Old ‘Your sites’ page
Code improvements
As with the landing page re-design we took the oportunity to have a dig under the hood and try and improve the php, database queries, html, css and Javascript used to display the page.
By reducing the amount of html, eliminating tables and reducing/simplifying code we improved the accessibility of the page, and got some major improvements in page load times too.
Some technical stats :
| Pre 2010 page | 2010 page | |
|---|---|---|
| Number of http requests | 46 | 19 |
| Size of received response | 449.5KB | 162.7KB |
Even with the inclusion of user profile images for forum posts the new Your sites page loads in approx half the time of the previous standard moodle page.
So far the feedback from users has been good, but we are always looking for other ways to improve our users experience as a whole.