{"id":391,"date":"2015-03-30T12:30:12","date_gmt":"2015-03-30T11:30:12","guid":{"rendered":"https:\/\/blogs.ncl.ac.uk\/web\/?p=391"},"modified":"2015-03-24T12:39:23","modified_gmt":"2015-03-24T12:39:23","slug":"testing-our-responsive-design-with-real-people","status":"publish","type":"post","link":"https:\/\/blogs.ncl.ac.uk\/web\/2015\/03\/30\/testing-our-responsive-design-with-real-people\/","title":{"rendered":"Testing our Responsive Design with Real People"},"content":{"rendered":"<p>The Corporate Web Development Team recently carried out some user research on the new mobile responsive <a href=\"http:\/\/www.ncl.ac.uk\/postgraduate\/\">postgraduate website<\/a>. Our aims were to:<\/p>\n<ul>\n<li><strong>test<\/strong> the <strong>new design features<\/strong><\/li>\n<li>find out <strong>how easy<\/strong> it was for people <strong>to use the site<\/strong> on both <strong>mobile and desktop<\/strong><\/li>\n<li>identify developments for the postgraduate site and our Go Mobile Programme<\/li>\n<\/ul>\n<h2>User testing sessions<\/h2>\n<p>Six members of staff from the University participated.<\/p>\n<p>We observed each participant complete a series of tasks on the website using a desktop, mobile or a combination of both devices. They were asked to \u2018think aloud\u2019 so that we could record their thought processes.<\/p>\n<h2>User testing results<\/h2>\n<p>The testing revealed many things about the design of the site \u2013 features that are <strong>working well<\/strong> and areas that need <strong>further development<\/strong>.<\/p>\n<p>For this post I\u2019ve pulled out some interesting outcomes.<\/p>\n<h3>Search<\/h3>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/03\/search-results.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-408 alignright\" alt=\"Screenshot of the search results on a mobile screen \" src=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/03\/search-results-188x300.jpg\" width=\"188\" height=\"300\" \/><\/a><\/p>\n<p>The testing revealed that the new course search was well used and provided good results.<\/p>\n<p>However, since the advanced search filters appear above the results, the <strong>search results<\/strong> are <strong>hidden on both desktop and mobile<\/strong>.<\/p>\n<p>This was a particular <strong>problem for mobile<\/strong> <strong>users<\/strong> as it looks like the search hasn&#8217;t worked. One of our users kept filling in the fields even though they didn&#8217;t need to.<\/p>\n<p>It shows that the <strong>course search<\/strong> needs <strong>further development<\/strong> to improve its usability.<\/p>\n<h3>Navigation<\/h3>\n<p>On mobile people easily found the blue link buttons on the <a href=\"http:\/\/www.ncl.ac.uk\/postgraduate\/\">homepage <\/a>(eg Student Life) but desktop users did not spot these as quickly.<\/p>\n<p>The buttons appear <strong>under the content on mobile<\/strong>, on desktop they<strong> appear to the right hand side<\/strong>.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/03\/blue-lozenge.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-406 aligncenter\" alt=\"Example blue call to action button from the responsive design\" src=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/03\/blue-lozenge.jpg\" width=\"225\" height=\"104\" \/><\/a>This supports research into <a href=\"http:\/\/www.nngroup.com\/articles\/f-shaped-pattern-reading-web-content\/\">online reading<\/a> which shows that content to the right is often ignored.<\/p>\n<p>Desktop users tried clicking headings in the main content before clicking the button. One person didn\u2019t notice them and struggled to complete certain tasks.<\/p>\n<p>The red call to action buttons were <strong>well used<\/strong> <strong>on both desktop and mobile<\/strong>. They were spotted quickly and people commented that they made tasks easier.<\/p>\n<p><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/03\/red-button.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-412 aligncenter\" alt=\"Example red call to action button from the responsive design\" src=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/03\/red-button-e1426523571258.jpg\" width=\"267\" height=\"93\" \/><\/a>The <strong>inconsistency of hyperlink styling<\/strong> made it <strong>unclear<\/strong> what was and wasn\u2019t a link. The majority of users didn\u2019t find the student profile information as they weren\u2019t aware that the heading linked through to additional content.<\/p>\n<p>The user research showed that we need to <strong>review the links <\/strong>on the homepage. In contrast, participants quickly spotted navigation on course and supplementary pages.<\/p>\n<h3>Content<\/h3>\n<p>One of our new content types is known as mobile collapse. On desktop, the content displays as a heading and paragraph. On mobile, the content is &#8216;collapsed&#8217;:<\/p>\n<p style=\"text-align: left\"><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/03\/collapse.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-416 aligncenter\" alt=\"Screengrab of the mobile collapse function.\" src=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2015\/03\/collapse.jpg\" width=\"297\" height=\"163\" \/><\/a> The user research revealed that the <strong>mobile collapse<\/strong> <strong>content did not stand out<\/strong>. Mobile users scrolled past the information without realising it could be expanded.<\/p>\n<p>If our potential students can\u2019t find accreditation information they may assume that the course is not accredited. It\u2019s crucial that we make this content <strong>more prominent on mobile<\/strong>.<\/p>\n<h3>Design<\/h3>\n<p>There were lots of <strong>positive comments<\/strong> about the <strong>look and feel of the site<\/strong>. People spotted the pull quotes quickly and users liked the use of videos, images and dual tone headings.<\/p>\n<p>One user described the site as \u201cvibrant and exciting\u201d.<\/p>\n<h2>Testing is vital to improve the usability of a site<\/h2>\n<p>This research has highlighted to me the importance of user testing \u2013 it shows us <strong>what is working <\/strong>and<strong> what needs improving<\/strong>.<\/p>\n<p>If <strong>prospective students<\/strong> <strong>can\u2019t find information<\/strong> easily it may <strong>influence their decision<\/strong> to apply here so it\u2019s vital that we identify and solve usability issues.<\/p>\n<p>We\u2019re currently working on <strong>solutions for the issues identified from this testing<\/strong>.<\/p>\n<p>Improvements to content, design and layout will also inform developments for the next batch of sites in our <a href=\"https:\/\/blogs.ncl.ac.uk\/web\/category\/go-mobile\/\">Go Mobile Programme<\/a>.<\/p>\n<h2>Find out more<\/h2>\n<p>We base our user testing on training provided by the Nielsen Norman Group. Find out more about user testing by visiting the <a href=\"http:\/\/www.nngroup.com\/topic\/user-testing\/\">Nielsen Norman Group\u2019s website<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Corporate Web Development Team recently carried out some user research on the new mobile responsive postgraduate website. Our aims were to: test the new design features find out how easy it was for people to use the site on &hellip; <a href=\"https:\/\/blogs.ncl.ac.uk\/web\/2015\/03\/30\/testing-our-responsive-design-with-real-people\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1268,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15,20],"tags":[24,38,39,37],"class_list":["post-391","post","type-post","status-publish","format-standard","hentry","category-go-mobile","category-user-research","tag-case-study","tag-market-research","tag-usability","tag-user-testing"],"_links":{"self":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts\/391","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/users\/1268"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/comments?post=391"}],"version-history":[{"count":19,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts\/391\/revisions"}],"predecessor-version":[{"id":454,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts\/391\/revisions\/454"}],"wp:attachment":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/media?parent=391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/categories?post=391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/tags?post=391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}