{"id":43,"date":"2010-08-09T15:09:52","date_gmt":"2010-08-09T15:09:52","guid":{"rendered":"http:\/\/blogs.sussex.ac.uk\/elearningteam\/?p=43"},"modified":"2011-02-02T16:36:36","modified_gmt":"2011-02-02T16:36:36","slug":"new-study-direct-landing-page","status":"publish","type":"post","link":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/2010\/08\/09\/new-study-direct-landing-page\/","title":{"rendered":"2010 Study Direct landing page"},"content":{"rendered":"<p>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 &#8216;Your sites&#8217; page which lists the course sites users have access to.<\/p>\n<h3><span style=\"font-weight: normal\"><em>Sites by year<\/em><\/span><\/h3>\n<p style=\"padding-left: 30px\">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 &#8211; 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.<\/p>\n<p style=\"padding-left: 30px\">The new &#8216;Your sites&#8217; page takes full advantage of this &#8211; organising sites into :<\/p>\n<p style=\"padding-left: 30px\">Current sites <em>&#8211; sites from the current academic year &amp; sites which do not have any academic year but run continuously<\/em><\/p>\n<p style=\"padding-left: 30px\">and individual academic years <em>&#8211; in the screen shot below 08-09, 07-08 and 05-06<\/em><\/p>\n<p style=\"padding-left: 30px\">\n<p>We presented these initial ideas at a user group meeting for june 2010 &#8211; shown in the video below.<\/p>\n<p><iframe loading=\"lazy\" src=\"\/\/player.vimeo.com\/video\/13646194\" width=\"500\" height=\"281\" frameborder=\"0\" title=\"New Study Direct home page\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe><\/p>\n<p>So far this seemed to be an approach users like, and after further consultation with users we started to\u00a0implement\u00a0it in moodle with some more features the users requested.<\/p>\n<h3><span style=\"font-weight: normal\"><em>Displaying site metadata<\/em><\/span><\/h3>\n<p style=\"padding-left: 30px\">In the screen shot below you can see Accuracy in Academic Communications is an\u00a0Autumn\u00a009-10\u00a0Undergraduate\u00a0course. Colour coding is given to the term data &#8211;\u00a0brown for autumn, green for spring and yellow for summer &#8211; as an added\u00a0differentiator.<\/p>\n<p style=\"padding-left: 30px\">Sites which are in &#8216;draft&#8217; &#8211; i.e. not published to Students &#8211; are shown to Tutors only with a message, and yellow background.<\/p>\n<h3><span style=\"font-weight: normal\"><em>Site roles &amp; clustering of colleague sites<\/em><\/span><\/h3>\n<p style=\"padding-left: 30px\">The role a user has in each site is displayed clearly on the right hand side.<\/p>\n<p style=\"padding-left: 30px\">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 &#8216;hide&#8217; 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.<\/p>\n<h3><span style=\"font-weight: normal\"><em>Encouraging\u00a0interaction<\/em><\/span><\/h3>\n<p style=\"padding-left: 30px\">It&#8217;s not always easy on moodle sites, without clicking into the individual site, to see if any activity such as forum discussions has\u00a0occurred\u00a0since your last visit, so we pull this data out and show it under each site. In the screen shot below Stuart&#8217;s site has a Forum Update, with the time since the post shown in a &#8216;twitter&#8217; style &#8211; 4 seconds ago.<\/p>\n<p style=\"padding-left: 30px\">Other\u00a0activities\u00a0including\u00a0for a site are\u00a0accessible\u00a0directly from \u00a0this page &#8211; e.g in the screen shot below afterSuss : Career\u00a0Development\u00a0Course shows\u00a0Assignments\u00a0and 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\u00a0allowed\u00a0to see.<\/p>\n<h2><span style=\"font-weight: normal\">Reducing &#8216;noise&#8217;<\/span><\/h2>\n<p>The\u00a0screen-shot\u00a0of the older Your Sites pages shows what a pretty typical user would see, and uses an off the shelf moodle style. User feedback\u00a0suggested\u00a0blocks on the page &#8211; although useful for admin users &#8211; were infact never clicked by most users. Information shown by default about each site e.g. user role, activities and updates &#8211; \u00a0was also mostly unread, possible due to the sheer amount of data and lack of\u00a0differentiation\u00a0in its display.<\/p>\n<p>The page itself is called Your sites and has one primary task &#8211; to display the sites a user has access to. So why do we need all the other\u00a0functionality\u00a0of the page? By concentrating on doing the one simple primary task in the best way\u00a0possible\u00a0we hope to create a better user experience for all our visitors.<\/p>\n<h2><span style=\"font-weight: normal\">Styling the page<\/span><\/h2>\n<p>To help bring\u00a0emphasis\u00a0to forum posts users picture icons are shown, and as previously mentioned, the date since the update is shown in a &#8216;twitter&#8217; style of seconds since, hours since and days since &#8211; we hope this will\u00a0encourage\u00a0user interaction\/awareness\u00a0of site forums.<\/p>\n<p>We use the Sussex brand fonts &#8211; Georgia (headings) and Geneva(body) &#8211; and colour\u00a0definition\u00a0to highlight different\u00a0types of metadata.<\/p>\n<p>Javascript &#8216;facebook&#8217; style show \/ hide buttons are used to allow users to choose which activities and updates they want to see, without overwhelming them with information.\u00a0A 25% horizontal grid is used to space each &#8216;update&#8217; in a more readable way.<\/p>\n<p>John Davies made a video of the live\u00a0implementation on Study Direct\u00a0which you can watch below.<\/p>\n<p><iframe loading=\"lazy\" src=\"\/\/player.vimeo.com\/video\/14179847\" width=\"500\" height=\"313\" frameborder=\"0\" title=\"Study Direct: &#039;Your sites&#039;\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe><\/p>\n<h3><span style=\"font-weight: normal\"><em>* Bonus ipod\/ipad\/iphone gesture fun!<\/em><\/span><\/h3>\n<p style=\"padding-left: 30px\">Fun isn&#8217;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\u00a0screen 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 &#8211; fun!<\/p>\n<h2><span style=\"font-weight: normal\">New 2010 &#8216;Your sites&#8217; page<\/span><\/h2>\n<p><strong><a href=\"http:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2010\/08\/your_sites.jpg\"><img loading=\"lazy\" class=\"alignnone size-large wp-image-44\" title=\"Your sites page\" src=\"http:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2010\/08\/your_sites-600x943.jpg\" alt=\"\" width=\"600\" height=\"943\" srcset=\"https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2010\/08\/your_sites-600x943.jpg 600w, https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2010\/08\/your_sites-300x471.jpg 300w, https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2010\/08\/your_sites.jpg 999w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/strong><\/p>\n<h2><span style=\"font-weight: normal\">Old &#8216;Your sites&#8217; page<\/span><\/h2>\n<p><strong><img loading=\"lazy\" class=\"alignnone size-large wp-image-42\" title=\"My page\" src=\"http:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2010\/08\/my_page-600x1400.jpg\" alt=\"\" width=\"600\" height=\"1400\" srcset=\"https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2010\/08\/my_page-600x1400.jpg 600w, https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2010\/08\/my_page-300x700.jpg 300w, https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2010\/08\/my_page.jpg 1030w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/strong><\/p>\n<h2><span style=\"font-weight: normal\">Code improvements<\/span><\/h2>\n<p>As with the <a title=\"blog post about the moodle login page\" href=\"http:\/\/blogs.sussex.ac.uk\/elearningteam\/2010\/08\/06\/2010-study-direct-login-page\/\">landing page re-design<\/a> 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.<\/p>\n<p>By reducing the amount of html, eliminating tables and\u00a0reducing\/simplifying\u00a0code we improved the\u00a0accessibility\u00a0of the page, and got some\u00a0major\u00a0improvements in page load times too.<\/p>\n<p style=\"padding-left: 30px\">Some technical stats :<\/p>\n<table style=\"padding-left: 30px\">\n<tbody>\n<tr>\n<th><\/th>\n<th>Pre 2010 page<\/th>\n<th>2010 page<\/th>\n<\/tr>\n<tr>\n<th>Number of http requests<\/th>\n<td>46<\/td>\n<td>19<\/td>\n<\/tr>\n<tr>\n<th>Size of received response<\/th>\n<td>449.5KB<\/td>\n<td>162.7KB<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p style=\"padding-left: 30px\">\n<p style=\"padding-left: 30px\">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.<\/p>\n<p>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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8216;Your sites&#8217; 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 [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[35,64],"tags":[37,38,87,88,92],"_links":{"self":[{"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/posts\/43"}],"collection":[{"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/comments?post=43"}],"version-history":[{"count":55,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/posts\/43\/revisions"}],"predecessor-version":[{"id":409,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/posts\/43\/revisions\/409"}],"wp:attachment":[{"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/media?parent=43"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/categories?post=43"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/tags?post=43"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}