{"id":512,"date":"2015-09-18T16:07:21","date_gmt":"2015-09-18T23:07:21","guid":{"rendered":"https:\/\/blogs.ubc.ca\/etec565a66b\/?page_id=512"},"modified":"2015-09-19T18:33:52","modified_gmt":"2015-09-20T01:33:52","slug":"cato-aou","status":"publish","type":"page","link":"https:\/\/blogs.ubc.ca\/etec565a66b\/unit-1\/cato-aou\/","title":{"rendered":"User-Centered Web Design"},"content":{"rendered":"<h3><span style=\"color: #820022;\">Adapted\u00a0from:\u00a0&#8220;Analysis of Usability&#8221;<\/span><\/h3>\n<p>Cato J., (2001), User-Centered Web Design. Pearson Education.<\/p>\n<p>Designing is not just about fonts, colors, pretty pictures, animated\u00a0gifts, it is much more about a thorough analysis and structuring of the\u00a0action needs and the information needs of the user.<\/p>\n<p>What users do?<\/p>\n<ul>\n<li>Arrive<\/li>\n<li>Engage<\/li>\n<li>Immerse<\/li>\n<li>Feel emotions and<\/li>\n<li>Leave with both cognitive\u00a0and emotional outcomes<\/li>\n<\/ul>\n<p>The question is, how do we design\u00a0the user experience, the way the user will move through the site, what\u00a0happens and when, the things they can see and use, the presentation,\u00a0interaction, emotion, satisfaction of use?<\/p>\n<p>What\u00a0kind of experience do we want them to have, that will meet their needs,\u00a0expectations and enjoyment? What mood and feel do we want to create\u00a0that will work for them? Understanding the mood and feel will help us\u00a0design the structure, and the dynamics.\u00a0(Cato, pp. 68-76).<\/p>\n<h3><span style=\"color: #820022;\">Space (layout)<\/span><\/h3>\n<p>Space is a precious commodity on a web page, so it makes good\u00a0sense to use every bit of it. But this does not mean you have to fill it all\u00a0up with visual and functional paraphernalia. You could also take a\u00a0minimalist approach.<\/p>\n<p>Consider how much space you will use for information, how much\u00a0for action and interaction, and how much for navigation.\u00a0You know what the actions and interactions need to be and what\u00a0information is needed to support the user\u2019s needs. So, you can decide\u00a0how to lay out the space for each of these components.<\/p>\n<h3><span style=\"color: #820022;\">Areas<\/span><\/h3>\n<p>Should not be clattered , visually overloaded. Areas help to give the user a sense of location. It keeps them\u00a0comfortable and well oriented with what they are doing. Just as when\u00a0you walk around a city or town, you know what kind of area you are in\u00a0by the visual image and other senses, and those clues give you\u00a0reassurance and support, so also on a website.<\/p>\n<h3><span style=\"color: #820022;\">Navigation<\/span><\/h3>\n<p>Navigation is about maps in the head, conceptual models in the\u00a0user\u2019s mind. It is about visual signposts that are easily understandable\u00a0to the user. It is about language, the user\u2019s language. Navigation must\u00a0therefore support the user\u2019s action processes in a language the user\u00a0understands, make it clear where the user is, and how they can do\u00a0what they want to achieve.<\/p>\n<h3><span style=\"color: #820022;\">Information clarity<\/span><\/h3>\n<p>Think about how you can present information clearly. There are a\u00a0number of important points to bear in mind.<\/p>\n<ul>\n<li><em>use color judiciously<\/em>; don\u2019t use more than are necessary. When using\u00a0color, think about the symbology of the color, the obvious ones\u00a0being red (negative, anger, vibrancy) and green (positive, country\u00a0values, ethical), black (dark character, sexy) and so on.<\/li>\n<li><em>ensure that everything is clearly identified <\/em>and of appropriate sizes and\u00a0layout for the information and the user.<\/li>\n<li><em>make headings clear<\/em>, put headings at the top of what they head,\u00a0make them related to the content, and use a language which is the\u00a0user\u2019s language\u2026<\/li>\n<li><em>cluster information in an appropriate manner<\/em>, making sure that similar\u00a0concepts are presented together both visually and in the user\u2019s action process. Don\u2019t create discord in\u00a0their thinking, unless you are consciously trying to do that.<\/li>\n<li><em>make graphs easy to read <\/em>and understand.\u00a0(Cato, pp. 115-148).<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #820022;\">Usability<\/span><\/h3>\n<p>is a combination of the site\u2019s usefulness, effectiveness,\u00a0efficiency, satisfaction, respect for the user, presentation and\u00a0learnability.<\/p>\n<h3><span style=\"color: #820022;\">User control and freedom<\/span><\/h3>\n<p>Users often choose functions\u00a0by mistake and will need a clearly marked \u201cexit\u201d. Support undo and redo.<\/p>\n<h3><span style=\"color: #820022;\">Consistency and standards<\/span><\/h3>\n<p>Users should not have to wonder\u00a0whether different words, situations, or actions mean the same\u00a0thing. Follow conventions; be consistent.<\/p>\n<h3><span style=\"color: #820022;\">Recognition rather than recall<\/span><\/h3>\n<p>Make objects, actions, and options\u00a0visible. The user should not have to remember information from\u00a0one part of the dialog to another. Instructions for use of the system\u00a0should be visible or easily retrievable whenever appropriate.<\/p>\n<h3><span style=\"color: #820022;\">Flexibility and efficiency of use<\/span><\/h3>\n<h3><span style=\"color: #820022;\">Aesthetic and minimalist design<\/span><\/h3>\n<p>Do not include\u00a0information which is irrelevant or rarely needed. Every extra unit\u00a0of information on a\u00a0page\u00a0competes with the relevant units of\u00a0information and diminishes their relative visibility.<\/p>\n<h3><span style=\"color: #820022;\">Privacy<\/span><\/h3>\n<p>Help the user to protect personal or private\u00a0information .<\/p>\n<h3><span style=\"color: #820022;\">Design Impact<\/span><\/h3>\n<p>Consider how design\u00a0impact the user performance: the efficiency, correctness,\u00a0and recover from error.\u00a0(Cato, pp.193-222)<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #820022;\">Hints:<\/span><\/h3>\n<p>Headings should be headings \u2013 they are intended to clarify,\u00a0not confuse.<\/p>\n<p>Make it obvious what comes next.<\/p>\n<p>Save the user time\u00a0scrolling or clicking when maybe they don\u2019t have to.<\/p>\n<p>Use screen space wisely.\u00a0Don\u2019t waste the screen space unnecessarily.<\/p>\n<p>Make rational use of colors.<\/p>\n<p>&nbsp;<\/p>\n<p>Make actions close to the information to which they relate.<\/p>\n<p>If you are going to provide help, make it obvious how to get it\u00a0rather than hiding it away.<\/p>\n<p>Make good and consistent use of colors.<\/p>\n<p>&nbsp;<\/p>\n<p>Always bring forward information\u00a0providing the opportunity for recall rather than memory.<\/p>\n<p>&nbsp;<\/p>\n<p>Don\u2019t provide two ways of doing the same thing \u2013 one will\u00a0usually do.<\/p>\n<p>&nbsp;<\/p>\n<p>Don\u2019t rely on the user guessing how the information is\u00a0structured, provide clear structure.<\/p>\n<p>Understand the use scenario.<\/p>\n<p>Use a common \u201cuser-centered\u201d language of communication.<\/p>\n<p>&nbsp;<\/p>\n<p>Don\u2019t provide two buttons on the same screen which do\u00a0exactly the same thing.<\/p>\n<p>Don\u2019t make the user confused and unsure.<\/p>\n<p>Keeping it simple saves money on development and maintenance.<\/p>\n<p>&nbsp;<\/p>\n<p>If there is no obvious and immediate value for the user in\u00a0their activity, they will ignore it.<\/p>\n<p>Don\u2019t use two screens when one will do.<\/p>\n<p>&nbsp;<\/p>\n<p>Meet the user\u2019s needs (from the use scenario).<\/p>\n<p>What you provide first is often what the user does, especially\u00a0if they are uncertain.<\/p>\n<p>&nbsp;<\/p>\n<p>If one thing is wrong, other things will be doubted.<\/p>\n<p>Don\u2019t lose the user in hyperspace.<\/p>\n<p>Don\u2019t force unnecessary\u00a0user actions.<\/p>\n<p>&nbsp;<\/p>\n<p>Make every action easy \u2013 at the right place and the right time.<\/p>\n<p>Don\u2019t repeat information.<\/p>\n<p>&nbsp;<\/p>\n<p>Don\u2019t give the user options they don\u2019t need at that time.<\/p>\n<p>&nbsp;<\/p>\n<p>Reduce user actions.<\/p>\n<p>&nbsp;<\/p>\n<p>Keep like activities and like information together in\u00a0the process.<\/p>\n<p>Keep things in a logical order. (Cato, pp. 225-252).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Adapted\u00a0from:\u00a0&#8220;Analysis of Usability&#8221; Cato J., (2001), User-Centered Web Design. Pearson Education. Designing is not just about fonts, colors, pretty pictures, animated\u00a0gifts, it is much more about a thorough analysis and structuring of the\u00a0action needs and the information needs of the user. What users do? Arrive Engage Immerse Feel emotions and Leave with both cognitive\u00a0and emotional [&hellip;]<\/p>\n","protected":false},"author":31402,"featured_media":0,"parent":92,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-512","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blogs.ubc.ca\/etec565a66b\/wp-json\/wp\/v2\/pages\/512","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ubc.ca\/etec565a66b\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.ubc.ca\/etec565a66b\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/etec565a66b\/wp-json\/wp\/v2\/users\/31402"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/etec565a66b\/wp-json\/wp\/v2\/comments?post=512"}],"version-history":[{"count":5,"href":"https:\/\/blogs.ubc.ca\/etec565a66b\/wp-json\/wp\/v2\/pages\/512\/revisions"}],"predecessor-version":[{"id":517,"href":"https:\/\/blogs.ubc.ca\/etec565a66b\/wp-json\/wp\/v2\/pages\/512\/revisions\/517"}],"up":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/etec565a66b\/wp-json\/wp\/v2\/pages\/92"}],"wp:attachment":[{"href":"https:\/\/blogs.ubc.ca\/etec565a66b\/wp-json\/wp\/v2\/media?parent=512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}