{"id":34009,"date":"2016-09-29T01:39:22","date_gmt":"2016-09-29T01:39:22","guid":{"rendered":"http:\/\/www.immersive-learning.org\/kennypress\/?p=34009"},"modified":"2016-09-28T15:00:52","modified_gmt":"2016-09-28T15:00:52","slug":"eme6207-recipe","status":"publish","type":"post","link":"https:\/\/emeclasses.org\/?p=34009","title":{"rendered":"EME 6207 &#8211; Design Part 1: Recipe for a Successful Website"},"content":{"rendered":"<p>&nbsp;<\/p>\n<h3>We begin by outlining some basic design principles. Most of what we do in education with regards to media and technology can be based on the basic premises laid down in the <a href=\"http:\/\/itchybon1.tripod.com\/hrd\/id15.html\">ASSURE Model<\/a><\/h3>\n<p>In short, the Assure Model is:<\/p>\n<ul>\n<li>A procedural guide for planning and delivering instruction that integrates technology and media into the teaching process.<\/li>\n<li>A systematic approach to writing lesson plans.<\/li>\n<li>A plan used to help teachers organize instructional procedures.<\/li>\n<li>A plan used to help teachers and instructors perform an authentic assessment of student learning.<\/li>\n<li>A model that can be used for most media development.<\/li>\n<\/ul>\n<p>ASSURE is a acronym:<br \/>\n<span class=\"su-dropcap su-dropcap-style-default\" style=\"font-size:1.5em\">A<\/span><u>nalyze<\/u> your Users\/learners<br \/>\n<span class=\"su-dropcap su-dropcap-style-default\" style=\"font-size:1.5em\">S<\/span><u>tate<\/u> your objectives<br \/>\n<span class=\"su-dropcap su-dropcap-style-default\" style=\"font-size:1.5em\">S<\/span><u>elect<\/u> methods &amp; media<br \/>\n<span class=\"su-dropcap su-dropcap-style-default\" style=\"font-size:1.5em\">U<\/span><u>tilize<\/u> that material<br \/>\n<span class=\"su-dropcap su-dropcap-style-default\" style=\"font-size:1.5em\">R<\/span><u>equire<\/u> participation<br \/>\n<span class=\"su-dropcap su-dropcap-style-default\" style=\"font-size:1.5em\">E<\/span><u>valuate<\/u> and revise as necessary<\/p>\n<h3>So, with the users in mind, let&#8217;s take a look at some quick and easy guidelines:<\/h3>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:3px;border-color:#999999\"><\/div>\n<h2>Design Principle #1: Focus on the users and their tasks, NOT the technology<\/h2>\n<p>The bottom line is that you need to analyze your users. (You should note this common theme among all the principles)<\/p>\n<ul>\n<li>for whom is the product being designed?<\/li>\n<li>what is the product or service for?<\/li>\n<li>what problems do the intended users have now? (what do they like and dislike about the way things work now?)<\/li>\n<li>what are the skills and knowledge of the intended users? what is their motivation?<\/li>\n<li>how do users conceptualize and work with data now?<\/li>\n<li>what are the users&#8217; preferred ways of working?<\/li>\n<\/ul>\n<h3>So, with the users in mind, let&#8217;s take a look at some quick and easy guidelines:<\/h3>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:3px;border-color:#999999\"><\/div>\n<h2>Design Principle #2: Consider function FIRST, presentation later.<\/h2>\n<p>Most of us get hung up in &#8216;cute&#8217; design&#8230; but function over format should be a mantra you follow:<\/p>\n<ul>\n<li>if you were given the task to design a site, what is the first thing you would do?<\/li>\n<li>this does not mean that you should tack user interface on at the end.<\/li>\n<li>if done correctly, functionality is built into GUI.<\/li>\n<li>developers should consider the functionality of the GUI and the overall site.<\/li>\n<li>function does not mean implementation &#8211; not how does it work but what does it do?<\/li>\n<li>develop a conceptual model (this is really what Project #1 is all about). What is different is that we will also pre-produce a scale of the user interface also.<\/li>\n<li>perform an objects\/actions analysis.<\/li>\n<li>write task scenarios.<\/li>\n<\/ul>\n<h3>So, with the users in mind, let&#8217;s take a look at some quick and easy guidelines:<\/h3>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:3px;border-color:#999999\"><a href=\"#\" style=\"color:#999999\">Go to top<\/a><\/div>\n<h2>Design Principle #3: Conform to the USER&#8217;S VIEW of the task.<\/h2>\n<p>Again.. don&#8217;t let the tail (technology) wag the dog (the usefulness):<\/p>\n<ul>\n<li>strive for naturalness. (don&#8217;t require them to perform &#8216;unnatural&#8217; acts (how many alt-tab-delete-insert-shift-buttons can you press at once?))<\/li>\n<li>&#8220;bad&#8221; vs &#8220;good&#8221; menu designs (we will discuss).<\/li>\n<li>utilize your user&#8217;s vocabulary, not yours (avid acronyms\/lingo).<\/li>\n<li>differentiating between &#8220;newbies&#8221; and veterans (give them a choice).<\/li>\n<li>advantages and disadvantages of task-specific design (Adobe Photoshop is great for seasoned artists, but what if you are a newbie?)<\/li>\n<\/ul>\n<h3>So, with the users in mind, let&#8217;s take a look at some quick and easy guidelines:<\/h3>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:3px;border-color:#999999\"><\/div>\n<h2>Design Principle #4: Don&#8217;t complicate the user&#8217;s task.<\/h2>\n<p>Sometimes the viewing experience ruins the value being added by content being made available:<\/p>\n<ul>\n<li>Analogy to the regular coming into his favorite restaurant and ordering the &#8220;usual&#8221;<\/li>\n<li>Support customization<\/li>\n<li>Provide wizards<\/li>\n<li>Minimize the need for problem-solving the computer domain and its issues.<\/li>\n<\/ul>\n<h3>So, with the users in mind, let&#8217;s take a look at some quick and easy guidelines:<\/h3>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:3px;border-color:#999999\"><\/div>\n<h2>Design Principle #5: Promote learning.<\/h2>\n<p>Learning in this sense is learning the navigation of the site.. but it also could apply to learning content<\/p>\n<ul>\n<li>how difficult is the domain to learn?<\/li>\n<li>think outside in not inside out (you are close to it, you KNOW how it works.. will the user?)<\/li>\n<li>avoid ambiguity (textual and graphical (how hard are the icons to figure out?)<\/li>\n<li>Think of three words: consistency, consistency, and consistency<\/li>\n<li>evaluate your environment for risks<\/li>\n<\/ul>\n<h3>So, with the users in mind, let&#8217;s take a look at some quick and easy guidelines:<\/h3>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:3px;border-color:#999999\"><\/div>\n<h2>Design Principle #6: Deliver information, not just data.<\/h2>\n<p>Take a look at <a href=\"http:\/\/glennas.wordpress.com\/2010\/08\/07\/designing-for-meaningful-experience-nathan-shedroff\/\">Shedroff&#8217;s concept of Experience Design<\/a> to dig deeper on this&#8230; he differentiates among data, information, and knowledge. Dig as deep as you care to, this site will keep you thinking deeper and deeper into the concepts of design thinking&#8230;<\/p>\n<ul>\n<li>Successful presentations don&#8217;t simply present, they direct users towards<br \/>\nimportant information.<\/li>\n<li>The screen belongs to the user . (i.e., it ain&#8217;t your site.. it&#8217;s theirs!)<\/li>\n<li>Preserve display inertia.<\/li>\n<\/ul>\n<h3>So, with the users in mind, let&#8217;s take a look at some quick and easy guidelines:<\/h3>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:3px;border-color:#999999\"><\/div>\n<h2>Design Principle #7: Design for Responsiveness<\/h2>\n<ul>\n<li>Actual speed and perceived speed may not be the same thing (you only have 10 seconds to make a first impression&#8230; average time on site before users make decisions about the design\/usefulness of your site).<\/li>\n<li>The easiest way to do this is to scale your images to the size you wish to display them. \u00a0In general, images should not be larger than 1200 pixels wide.<\/li>\n<li>If you are using a theme, look for a theme that works with phones, tablets, and desktops. \u00a0Designers have to think of users working on all of these devices<\/li>\n<\/ul>\n<h3>So, with the users in mind, let&#8217;s take a look at some quick and easy guidelines:<\/h3>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:3px;border-color:#999999\"><\/div>\n<div class=\"su-box su-box-style-default\" id=\"\" style=\"border-color:#0033cc;border-radius:3px;\"><div class=\"su-box-title\" style=\"background-color:#3366ff;color:#FFFFFF;border-top-left-radius:1px;border-top-right-radius:1px\">Do This!<\/div><div class=\"su-box-content su-u-clearfix su-u-trim\" style=\"border-bottom-left-radius:1px;border-bottom-right-radius:1px\"><br \/>\n<a href=\"\/wp-content\/uploads\/2012\/05\/dothis.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-724\" src=\"\/wp-content\/uploads\/2012\/05\/dothis.gif\" alt=\"\" width=\"60\" height=\"48\" \/><\/a><\/p>\n<p>There actually is a small activity we want you to do, but not until you completely review the Website called Web Pages that Suck and Gui Bloopers, which are both introduced on the <a href=\"\/?p=34050\" target=\"_blank\">next set of readings<\/a>. <\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; We begin by outlining some basic design principles. Most of what we do in education with regards to media and technology can be based on the basic premises laid down in the ASSURE Model In short, the Assure Model is: A procedural guide for planning and delivering instruction that integrates technology and media into [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[60],"tags":[],"class_list":["post-34009","post","type-post","status-publish","format-standard","hentry","category-lessons-6207"],"_links":{"self":[{"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/posts\/34009","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/emeclasses.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=34009"}],"version-history":[{"count":3,"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/posts\/34009\/revisions"}],"predecessor-version":[{"id":40286,"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/posts\/34009\/revisions\/40286"}],"wp:attachment":[{"href":"https:\/\/emeclasses.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=34009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/emeclasses.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=34009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/emeclasses.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=34009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}