{"id":31,"date":"2010-08-06T13:32:15","date_gmt":"2010-08-06T13:32:15","guid":{"rendered":"http:\/\/blogs.sussex.ac.uk\/elearningteam\/?p=31"},"modified":"2011-01-28T13:01:35","modified_gmt":"2011-01-28T13:01:35","slug":"2010-study-direct-login-page","status":"publish","type":"post","link":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/2010\/08\/06\/2010-study-direct-login-page\/","title":{"rendered":"2010 Study Direct login page"},"content":{"rendered":"<p>For Autumn 2010 the Study Direct team have been making\u00a0 changes to the way Study Direct looks and works to start to improve some the usability problems users have with the website.<\/p>\n<h3>2009 login page<\/h3>\n<p><img loading=\"lazy\" class=\"alignnone size-large wp-image-33\" title=\"Study Direct - 2009 loggin\" src=\"http:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2010\/08\/Picture-42-600x454.png\" alt=\"\" width=\"600\" height=\"454\" srcset=\"https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2010\/08\/Picture-42-600x454.png 600w, https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2010\/08\/Picture-42-300x227.png 300w, https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2010\/08\/Picture-42.png 1005w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>The 2009 login page contained a lot of information and  images, which pushed the actual login box down quite far down the  screen. We found for users with smaller screens they often had to scroll  to enter their login details. For users with screen readers this was a particular problem, as the login box was the very last thing on the page. Although the page has very clear and detailed text everywhere &#8211; generally users found it rather over-busy with no clear focus on what the page was, or what they could do here.<\/p>\n<h3>2010 login page<\/h3>\n<p><img loading=\"lazy\" class=\"alignnone size-large wp-image-38\" title=\"2010 Login page\" src=\"http:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2010\/08\/Picture-45-600x377.png\" alt=\"2010 Login page\" width=\"600\" height=\"377\" srcset=\"https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2010\/08\/Picture-45-600x377.png 600w, https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2010\/08\/Picture-45-300x188.png 300w, https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2010\/08\/Picture-45.png 981w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>The page now &#8211; hopefully &#8211; tells you where you are, and what you can do here &#8211; sign in.<\/p>\n<p>We also took the time to add a &#8216;Forgot your username or password&#8217; link and some <a title=\"W3schools page on html forms\" href=\"http:\/\/www.w3schools.com\/html5\/html5_form_attributes.asp\" target=\"_blank\">nice HTML5 form features<\/a> including :<\/p>\n<ul>\n<li>placeholder text &#8211; letting the user know what they should enter into a form field<\/li>\n<li>autofocus &#8211; so the primary form field gets automatic focus when a page is loaded.<\/li>\n<\/ul>\n<p>Combining the new HTML5 attributes with cleaner CSS and HTML also  allowed us to make improvements to the usability, which has a knock-on  effect for the accessibility of the page. The sections below the US  header now render much clearer with CSS disabled, the TABLES previously  used for the form layout have been removed making tabbing faster for  screen readers.<\/p>\n<p>The page is also loading much quicker.<\/p>\n<p>Behind the scenes the page doesn&#8217;t load all the CSS and JAVASCRIPT\u00a0 libraries usually loaded on every Moodle page, as it does not need them. It just includes what&#8217;s actually necessary for the user to log in.<\/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>35<\/td>\n<td>10<\/td>\n<\/tr>\n<tr>\n<th>Size of received response<\/th>\n<td>522.7KB<\/td>\n<td>88.9KB<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p style=\"padding-left: 30px\">\n<p>By reducing the number of http requests to load files we did not need, and reducing the size of the\u00a0responses by only sending back data we needed we managed to more than\u00a0half the average page load time.<\/p>\n<p>So far user feedback on the new layout has been very positive, and we hope to be making further improvements to the accessibility as soon.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>For Autumn 2010 the Study Direct team have been making\u00a0 changes to the way Study Direct looks and works to start to improve some the usability problems users have with the website. 2009 login page The 2009 login page contained a lot of information and images, which pushed the actual login box down quite far [&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":[36,81,37,22,80],"_links":{"self":[{"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/posts\/31"}],"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=31"}],"version-history":[{"count":41,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/posts\/31\/revisions"}],"predecessor-version":[{"id":41,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/posts\/31\/revisions\/41"}],"wp:attachment":[{"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/media?parent=31"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/categories?post=31"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/tags?post=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}