{"id":5559,"date":"2017-08-17T19:21:37","date_gmt":"2017-08-17T09:21:37","guid":{"rendered":"http:\/\/sydney.edu.au\/education-portfolio\/ei\/teaching@sydney\/?p=5559"},"modified":"2017-08-17T22:34:32","modified_gmt":"2017-08-17T12:34:32","slug":"dont-make-think","status":"publish","type":"post","link":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/dont-make-think\/","title":{"rendered":"(Don&#8217;t) Make Me Think"},"content":{"rendered":"<figure id=\"attachment_5572\" aria-describedby=\"caption-attachment-5572\" style=\"width: 281px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-5572\" src=\"http:\/\/sydney.edu.au\/education-portfolio\/ei\/teaching@sydney\/wp-content\/uploads\/2017\/08\/Dont_make_me_think.jpeg\" alt=\"Front cover of book: Don't Make Me Think\" width=\"281\" height=\"378\" srcset=\"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/Dont_make_me_think.jpeg 500w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/Dont_make_me_think-223x300.jpeg 223w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/Dont_make_me_think-370x497.jpeg 370w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/Dont_make_me_think-432x580.jpeg 432w\" sizes=\"auto, (max-width: 281px) 100vw, 281px\" \/><figcaption id=\"caption-attachment-5572\" class=\"wp-caption-text\">Don&#8217;t Make Me Think (Krug 2000)<\/figcaption><\/figure>\n<p>During the year\u00a02000, in the height of the dot-com bubble, Steve Krug&#8217;s\u00a0slim and conversational\u00a0book\u00a0<em>Don&#8217;t Make Me Think\u00a0<\/em>burst onto the scene.\u00a0Neither the first nor the most comprehensive book on web usability,\u00a0<em>Don&#8217;t Make Me Think\u00a0<\/em>succeeded where others did not,\u00a0in that it helped many people (designers, developers, managers and otherwise)\u00a0<em>think\u00a0<\/em>about how real people use websites. Since its publication\u00a0industries such as User Experience (UX)\u00a0and the like have flourished in a web and app marketplace that is both saturated and highly competitive.<\/p>\n<p>So how is this relevant\u00a0for teaching and learning in higher ed? Surely &#8216;Don&#8217;t make me think&#8217; is the antithesis of what higher education is all about. Yes, and no. When Krug says &#8216;Don&#8217;t make me think&#8217;, it is less a call to render users unconscious as it is a plea to get users to\u00a0<em>stop<\/em>\u00a0thinking about usage so that they are free to place their attention where it really matters. To rephrase Krug&#8217;s pithy title\u00a0into something\u00a0infinitely less catchy, we might say: &#8220;Don&#8217;t make me think about how to use your technology, let me think about the subject instead&#8221;.\u00a0As learning management systems like Canvas allow\u00a0lecturers to create\u00a0online sites for learning that look, feel and act like a website, here are our\u00a0top ten\u00a0<em>DMMT inspired<\/em> tips for making sites that are more learner friendly.<\/p>\n<h2>1. Think of the student<\/h2>\n<p>Generally, when you\u00a0teach a subject, you usually know more about it than\u00a0those\u00a0coming to learn or study it. As lecturers and educators this means that we can have something of an &#8216;expert blindspot&#8217; when it comes to our own discipline. Added to this, design and computing have long known that when we\u00a0<em>build\u00a0<\/em>or\u00a0<em>design\u00a0<\/em>something we\u00a0can easily fall into the trap of building something that we like on the\u00a0assumption that everyone feels the same way.\u00a0Usability, as its name suggests, means\u00a0thinking of the user. For higher ed, this user is the student. While you don&#8217;t have time to do full-scale user research it is worth knowing who your student is and how they think about your subject, which leads us to point 2&#8230;<\/p>\n<h2>2. What students know about your\u00a0subject should shape the site&#8217;s\u00a0<span style=\"text-decoration: underline;\">architecture<\/span><\/h2>\n<p>Website\u00a0<em>architecture\u00a0<\/em>is a fancy way of referring to how all the pages of your site are labelled and organised. For example, you may wish to have a separate place for assessments, another for readings, another for weekly lecture content (e.g. Week 1, 2 etc.).\u00a0Though common, this will not necessarily suit\u00a0all subjects. Advanced students may find it easier to navigate by the names of theories, tools, computer languages or learning activities (as just a few examples). The decision on how you categorise your content should be based on what your students know about the\u00a0subject and how they will need use your site during the semester.\u00a0Some content and activities will be chronological and occur at one point in the semester, other content and activities will not. Reflect on what students grasp (or fail to grasp)\u00a0in your subject, think about their level of knowledge, abilities, interests. Check out your current analytics to find out which parts of your site and barely visited.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5573 alignnone alignright\" src=\"http:\/\/sydney.edu.au\/education-portfolio\/ei\/teaching@sydney\/wp-content\/uploads\/2017\/08\/8160841849_ce575d28b8_b.jpg\" alt=\"Photo of a forrest with many trees\" width=\"363\" height=\"241\" srcset=\"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/8160841849_ce575d28b8_b.jpg 750w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/8160841849_ce575d28b8_b-300x199.jpg 300w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/8160841849_ce575d28b8_b-370x246.jpg 370w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/8160841849_ce575d28b8_b-270x180.jpg 270w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/8160841849_ce575d28b8_b-570x378.jpg 570w\" sizes=\"auto, (max-width: 363px) 100vw, 363px\" \/><\/p>\n<h2>3. Make stuff visible\u00a0&#8211; don&#8217;t let your students get lost in the forest<\/h2>\n<p>The web, and life in general, is a <a href=\"http:\/\/sydney.edu.au\/education-portfolio\/ei\/teaching@sydney\/keeping-students-attention-online\/\">distracting place<\/a> &#8211; make sure things are visible.\u00a0Visibility does not mean displaying everything in one place; this can make the user feel lost in a forrest.\u00a0Equally it does not mean squirrelling everything away in sub-pages; this can bury or hide content and make needlessly complicated pathways for a user to find anything.\u00a0Make sure that your main navigation is reserved for important and distinct categories of content.<\/p>\n<h2>4. <em>First <\/em>we\u00a0scan, <em>then<\/em>\u00a0we read<\/h2>\n<p>We don&#8217;t read a website in the same way that we would sit and read a novel &#8211; starting at the beginning and proceeding to the end and pausing to reflect along the way. Web interaction happens quickly and in an environment that <a href=\"http:\/\/sydney.edu.au\/education-portfolio\/ei\/teaching@sydney\/keeping-students-attention-online\/\">competes for our attention<\/a>. When we get to a web-page we skim it, trying to work out what parts are useful and relevant. Instead of working through things in a methodological and repeated manner, we&#8217;re more likely to muddle through, skimming and clicking as we go.\u00a0Once we have found what we are looking for, then we read.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5581 alignleft\" src=\"http:\/\/sydney.edu.au\/education-portfolio\/ei\/teaching@sydney\/wp-content\/uploads\/2017\/08\/Screenshot-2017-08-17-15.41.20.png\" alt=\"\" width=\"513\" height=\"279\" srcset=\"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/Screenshot-2017-08-17-15.41.20.png 2338w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/Screenshot-2017-08-17-15.41.20-300x163.png 300w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/Screenshot-2017-08-17-15.41.20-768x418.png 768w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/Screenshot-2017-08-17-15.41.20-1024x558.png 1024w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/Screenshot-2017-08-17-15.41.20-370x201.png 370w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/Screenshot-2017-08-17-15.41.20-570x310.png 570w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/Screenshot-2017-08-17-15.41.20-770x419.png 770w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/Screenshot-2017-08-17-15.41.20-1170x637.png 1170w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/Screenshot-2017-08-17-15.41.20-1065x580.png 1065w\" sizes=\"auto, (max-width: 513px) 100vw, 513px\" \/><\/p>\n<p>To make it easier for students to scan your site for the content they need at the time they need it (readings, quizzes, revision etc.): create a visual hierarchy using headings and icons that allow the student to quickly discern the point of that page. Icons and buttons, when used consistently, can also help with this.<\/p>\n<h2>5.\u00a0Tell me where I am and show me where to go<\/h2>\n<p>It is easy to get lost. Navigation not only helps us find what we are looking for but gives us something to hold on to and tells us what is there. While\u00a0clicking back is the default browser option for navigating back to where you came from, good navigation should show a student where they are on your site and where they can go.\u00a0Canvas already has left-hand navigation. However, for better signage, headings, icons, hyperlinks and buttons should be combined with written content so that there is never a dead end. What this means is that students looking at Week 3&#8217;s page can easily click somewhere to get to Week 2 or Week 4 (for example). You may even use hyperlinks to create your own home-made tabs or breadcrumbs.<\/p>\n<h2>6. &#8220;There&#8217;s no place like home&#8221;<\/h2>\n<p>Your homepage is the first place students will land upon whenever they go online for your subject. Think about that. Every time they need to do anything on Canvas for your unit that will be the first place they go and the first thing they see. Your homepage is not only the virtual welcome mat for online parts of your course but premium\u00a0real estate through which you can talk to students. You can use your homepage to engage and connect students through to the most relevant content.\u00a0In terms of web usability, users at any point in your website should be able to get back to the home in a single click. Fortunately, in Canvas, you don&#8217;t have to worry about this because Home is located right at the top of the left hand course menu &#8211; letting students return to your home page whenever they wish.<\/p>\n<figure id=\"attachment_5585\" aria-describedby=\"caption-attachment-5585\" style=\"width: 484px\" class=\"wp-caption alignright\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-5585\" src=\"http:\/\/sydney.edu.au\/education-portfolio\/ei\/teaching@sydney\/wp-content\/uploads\/2017\/08\/26468700303_f64c6fd705_o.jpg\" alt=\"Woman standing in front of a doormat reading \u201cIt\u2019s so good to be home\u201d.\" width=\"484\" height=\"242\" srcset=\"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/26468700303_f64c6fd705_o.jpg 484w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/26468700303_f64c6fd705_o-300x150.jpg 300w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/26468700303_f64c6fd705_o-370x185.jpg 370w\" sizes=\"auto, (max-width: 484px) 100vw, 484px\" \/><figcaption id=\"caption-attachment-5585\" class=\"wp-caption-text\">Welcome Home by State Farm flic.kr\/p\/GjX1rM CC BY 2.0<\/figcaption><\/figure>\n<h2>7. &#8220;Can I click it?&#8221; &#8211;\u00a0<em>yes you can\u00a0<\/em><\/h2>\n<p>Communicate functionality of your site so that students know what they can click on. This point goes back to visibility and letting students know what they can and cannot do. Traditionally\u00a0hyperlinks (such as this <a href=\"http:\/\/www.google.com\">link to google<\/a>) were <span style=\"text-decoration: underline;\"><span style=\"color: #0000ff; text-decoration: underline;\">blue and underlined<\/span><\/span><span style=\"color: #000000;\">\u00a0when available to click and\u00a0<span style=\"text-decoration: underline; color: #800080;\">purple and underlined<\/span><span style=\"color: #993366;\"><span style=\"color: #000000;\">\u00a0after having <em>been<\/em> clicked. Today an assortment of colours are used. Canvas automatically formats links for you. While this is not something you need to worry about, it is worth checking that your own formatting doesn&#8217;t inadvertently resemble an already\u00a0established custom of web formatting. Secondly, for better visibility of\u00a0<em>important links\u00a0<\/em>use some of <a href=\"https:\/\/community.canvaslms.com\/thread\/2336\">Canvas&#8217; buttons<\/a> &#8211; which are larger and more clickable than in-text links, whose invitation to click is often perceived to be more\u00a0optional. \u00a0<\/span><\/span><\/span><\/p>\n<h2>8.\u00a0Be consistent&#8230;<\/h2>\n<p>We don&#8217;t surf the web quickly if we have to re-learn how each web-page works each time. Consistency and convention are useful tools. Having the navigation remain in the same place stops us from getting lost. Having submit buttons in green, and delete buttons in red uses convention to prevent us making mistakes. Within Canvas\u00a0most things like fonts and\u00a0formatting are already taken care of. However, as you customise your pages it is worth considering how you can use the principle of consistency to aid your learners. Maybe\u00a0on each weekly page\u00a0readings are always at the top, alternatively\u00a0maybe content is\u00a0<em>always\u00a0<\/em>organised in sequential 1-2-3 steps.<\/p>\n<figure id=\"attachment_5589\" aria-describedby=\"caption-attachment-5589\" style=\"width: 500px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-5589\" src=\"http:\/\/sydney.edu.au\/education-portfolio\/ei\/teaching@sydney\/wp-content\/uploads\/2017\/08\/48825808_6498a869fc_z.jpg\" alt=\"Picture of a blue robot\" width=\"500\" height=\"375\" srcset=\"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/48825808_6498a869fc_z.jpg 500w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/48825808_6498a869fc_z-300x225.jpg 300w, https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-content\/uploads\/2017\/08\/48825808_6498a869fc_z-370x278.jpg 370w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><figcaption id=\"caption-attachment-5589\" class=\"wp-caption-text\">Blue Robot flic.kr\/p\/5jfdh CC BY-ND 2.0<\/figcaption><\/figure>\n<h2>9.\u00a0&#8230;but allow for the personal and idiosyncratic<\/h2>\n<p>Consistency does not mean robotic or slavish conformity. One of the joys of education is that it remains a\u00a0human conversation between teachers and students. A good eLearning site should extend\u00a0that conversation and\u00a0reflect the uniqueness and humanity of both\u00a0teachers and\u00a0students. You may wish to have photos of the teaching team, images or colours that reflect your\u00a0subject, editable wikis and activities that students can be part of. Web 2.0 and user-generated content has\u00a0thrived from its ability to personalise. We are not automatons and our online spaces should reflect this.<\/p>\n<h2>10. Keep the noise down<\/h2>\n<p>In personalising your site watch out for visual noise. Steve Krug identifies two kinds of noise: 1) &#8216;Busy-ness&#8217; and 2) Background noise. The first (Busy-ness) is when everything on the page clamours for attention at once. Think of lots of bright colours, exclamation marks, CAPS, changes in fonts and emoji. This visual noise can resemble shouting. You (hopefully) don&#8217;t shout at your students offline, so don&#8217;t do it online. The second, background noise, is less overt:&#8221;no one source of noise is loud enough to be distracting by itself, but there are a lot of tiny bits of visual noise that wear us down&#8221;. If in doubt: Keep it simple.<\/p>\n<h2>11. Usability test on the fly<\/h2>\n<p>A bonus tip. &#8220;If you want a great site, you&#8217;ve got to test: after you&#8217;ve worked on a site for even a few weeks you can&#8217;t see it fresh anymore&#8221; (Krug). Today, usability testing is big money and involves everything from eye tracking software through to large sample A\/B tests. Educators don&#8217;t have time, money or perhaps the ethics clearance to do any of these. Fortunately there are several easy methods you can use to check your own site. First, Canvas allows you to embed things like JotForm at the bottom of each page so that your students can rate and provide feedback. Second, resort to the (computer) age old approach of &#8216;corridor testing&#8217;. Defined as &#8220;informal or ad hoc test or solicitation to gain quick user feedback or data&#8221;, open your office door and\u00a0ask a colleague to have a look and tell you what they think.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>During the year\u00a02000, in the height of the dot-com bubble, Steve Krug&#8217;s\u00a0slim and conversational\u00a0book\u00a0Don&#8217;t Make Me Think\u00a0burst onto the scene.\u00a0Neither the first nor the&#8230;<\/p>\n","protected":false},"author":16,"featured_media":5570,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[117,57],"tags":[200,66,194,251],"coauthors":[464],"class_list":["post-5559","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lms-transformation","category-teaching-tips","tag-canvas","tag-elearning","tag-online-learning","tag-usability","post-item","post-even"],"_links":{"self":[{"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/posts\/5559","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/comments?post=5559"}],"version-history":[{"count":19,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/posts\/5559\/revisions"}],"predecessor-version":[{"id":5604,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/posts\/5559\/revisions\/5604"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/media\/5570"}],"wp:attachment":[{"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/media?parent=5559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/categories?post=5559"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/tags?post=5559"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/coauthors?post=5559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}