{"id":34050,"date":"2016-09-29T01:55:38","date_gmt":"2016-09-29T01:55:38","guid":{"rendered":"http:\/\/www.immersive-learning.org\/kennypress\/?p=34050"},"modified":"2016-09-28T15:05:08","modified_gmt":"2016-09-28T15:05:08","slug":"eme6207-gui-bloopers","status":"publish","type":"post","link":"https:\/\/emeclasses.org\/?p=34050","title":{"rendered":"EME 6207 &#8211; Design Part 2: GUI Bloopers"},"content":{"rendered":"<div class=\"su-box su-box-style-default\" id=\"\" style=\"border-color:#004d4d;border-radius:3px;\"><div class=\"su-box-title\" style=\"background-color:#008080;color:#FFFFFF;border-top-left-radius:1px;border-top-right-radius:1px\">Textbook Reference(s):<\/div><div class=\"su-box-content su-u-clearfix su-u-trim\" style=\"border-bottom-left-radius:1px;border-bottom-right-radius:1px\"><\/p>\n<p><span style=\"color: #800000;\"><strong>GUI Bloopers: (2000) Morgan Kauffman and GUI Bloopers 2.0 (2007) by Jeff Johnson. <a href=\"http:\/\/www.gui-bloopers.com\/\">http:\/\/www.gui-bloopers.com\/<\/a><\/strong><\/span><\/div><\/div>\n<p><script type=\"text\/javascript\" src=\"https:\/\/emeclasses.org\/wp-content\/plugins\/jellybox\/js\/jellybox.js\"><\/script><link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/emeclasses.org\/wp-content\/plugins\/jellybox\/template\/jellybox.css\"><\/link><link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/emeclasses.org\/wp-content\/plugins\/jellybox\/css\/jellybox.css\"><\/link><div id=\"ID69d6354adbef0Container\" class=\"jellyboxLightBlueContainer\" style=\"height:110px; width:300px; z-index: 99998;\"><div id=\"ID69d6354adbef0\" class=\"jellyboxLightBlue\" style=\"height:110px; width:300px; position: relative; z-index: 99999; overflow: hidden;\"> <div id=\"ID69d6354adbf37Container\" class=\"CLASS69d6354adbf38Container\" style=\"height:120px; width:120px; z-index: 99998;\"><div id=\"ID69d6354adbf37\" class=\"CLASS69d6354adbf38\" style=\"height:120px; width:120px; position: relative; z-index: 99999; overflow: hidden;\"> <img decoding=\"async\" id=\"trigger1\" style=\"float: left;\" src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2015\/08\/circle1.png\" alt=\"circle1\" \/><\/div><\/div><script type=\"text\/javascript\">document.getElementById(\"ID69d6354adbf37\").jellydata = {\"elementid\":\"ID69d6354adbf37\",\"control\":\"onclick\",\"gocontrol\":\"\",\"returncontrol\":\"\",\"ontoggle\":\"\",\"target\":\"trigger1\",\"height\":120,\"width\":120,\"angle\":0,\"gospeed\":750,\"returnspeed\":750,\"deltatop\":0,\"deltaleft\":0,\"deltaheight\":0,\"deltawidth\":0,\"deltaangle\":-90,\"autostartdelay\":0,\"gotimeout\":0,\"returntimeout\":0,\"interval\":0};document.getElementById(\"ID69d6354adbf37\").jellyboxcontroller = new JellyBoxController().init(document.getElementById(\"ID69d6354adbf37\"));<\/script><\/p>\n<p style=\"margin-top: -110px; margin-left: 150px;\">Before you begin, click the big circle to the left.<\/p>\n<div style=\"margin-top: 80px;\"><\/div>\n<hr \/>\n<p>This lesson is a great segue to our lesson on content management systems. See note at bottom of page.<br \/>\n<\/div><\/div><script type=\"text\/javascript\">document.getElementById(\"ID69d6354adbef0\").jellydata = {\"elementid\":\"ID69d6354adbef0\",\"control\":\"onclick\",\"gocontrol\":\"\",\"returncontrol\":\"\",\"ontoggle\":\"\",\"target\":\"trigger1\",\"height\":110,\"width\":300,\"angle\":0,\"gospeed\":750,\"returnspeed\":750,\"deltatop\":-130,\"deltaleft\":0,\"deltaheight\":130,\"deltawidth\":0,\"deltaangle\":0,\"autostartdelay\":0,\"gotimeout\":0,\"returntimeout\":3000,\"interval\":0};document.getElementById(\"ID69d6354adbef0\").jellyboxcontroller = new JellyBoxController().init(document.getElementById(\"ID69d6354adbef0\"));<\/script><br \/>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:3px;border-color:#999999\"><\/div><\/p>\n<h3>So, with the users in mind, let&#8217;s take a look at some quick and easy guidelines:<\/h3>\n<p>When building websites, it is common to get so excited about &#8216;being published&#8221; that one fails to look at the final design through the eyes of a new user\/visitor. This is a case where we must &#8216;get outside of one&#8217;s self&#8217; and not view things from o=your own eyes but that of others. This is harder to do than one might think. For example, when you enter a store, do you tend to go to the left or the right (or straight ahead)? Did you know the product placement on store shelves is an art (and one that product producers pay extra for)? Did you know that companies pay a grocers premium to have their products at &#8216;eye level&#8217; or for &#8216;end cap&#8217; space?<\/p>\n<p>All of this is a part of visual arts and design. Retailers know this.. and good Web designers also pay a lot of attention. The rule of thumb is:<\/p>\n<blockquote><p><strong>YOU ONLY HAVE 10 SECONDS TO MAKE A FIRST IMPRESSION<\/strong>.<\/p><\/blockquote>\n<p>Meaning that if you do not grab a visitor&#8217;s attention in this time frame, they tend to move on&#8230;<\/p>\n<p>So with this in mind, let&#8217;s take a look at some very common bloopers.. these come from The book called<\/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>Some Common Bloopers<\/h2>\n<p>Some of the images shown here are a bit dated. But the concepts are universal and they are very representative of common mistakes still being made.<\/p>\n<h3><strong><span style=\"color: #800000;\">Click the images to increase their size to make easier viewing<\/span><\/strong><\/h3>\n<h4>Mixing Radio Buttons and Check Boxes<\/h4>\n<p><a href=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/check-and-radio.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-34127\" title=\"check and radio\" src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/check-and-radio-232x300.jpg\" alt=\"\" width=\"232\" height=\"300\" srcset=\"https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/check-and-radio-232x300.jpg 232w, https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/check-and-radio.jpg 420w\" sizes=\"auto, (max-width: 232px) 100vw, 232px\" \/><\/a><\/p>\n<p>Folks tend to try to be efficient by co-mingling check boxes (inferring that more than one choice can be made at a time) and radio buttons (only one at a time can be selected)..<\/p>\n<p>Here&#8217;s another example:<\/p>\n<p><a href=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/checkandradio1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-34130\" title=\"checkandradio1\" src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/checkandradio1-300x207.jpg\" alt=\"\" width=\"300\" height=\"207\" srcset=\"https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/checkandradio1-300x207.jpg 300w, https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/checkandradio1.jpg 434w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>In this case a check box was offer for what the designer really intended a radio button.<\/p>\n<p>This one is silly as it is, often shows up<\/p>\n<p><a href=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/lackofchoice.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-34125\" title=\"lackofchoice\" src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/lackofchoice-300x108.jpg\" alt=\"\" width=\"300\" height=\"108\" srcset=\"https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/lackofchoice-300x108.jpg 300w, https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/lackofchoice.jpg 422w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/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\"><a href=\"#\" style=\"color:#999999\">Go to top<\/a><\/div>\n<h3>Diabolical dialog boxes<\/h3>\n<p>Can you figure this one out????<\/p>\n<p><a href=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/comingleddropdwn.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-34124\" title=\"comingleddropdwn\" src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/comingleddropdwn-300x79.jpg\" alt=\"\" width=\"300\" height=\"79\" srcset=\"https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/comingleddropdwn-300x79.jpg 300w, https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/comingleddropdwn.jpg 518w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>(a hint&#8230;. how do you know what choices to make and how???)<\/p>\n<p>So I am not accused of simply bashing&#8230; here is an example of a pretty good set of choices:<\/p>\n<p><a href=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/goodchecks.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-34123\" title=\"goodchecks\" src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/goodchecks-300x237.jpg\" alt=\"\" width=\"300\" height=\"237\" srcset=\"https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/goodchecks-300x237.jpg 300w, https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/goodchecks.jpg 412w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\nHere&#8217;s another one:<br \/>\n<a href=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/goodradio.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-34121\" title=\"goodradio\" src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/goodradio-251x300.jpg\" alt=\"\" width=\"251\" height=\"300\" srcset=\"https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/goodradio-251x300.jpg 251w, https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/goodradio.jpg 340w\" sizes=\"auto, (max-width: 251px) 100vw, 251px\" \/><\/a><br \/>\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><\/p>\n<h3>Misuse of Text Fields<\/h3>\n<p>Text fields are often necessary .. but in order to manage efficiency AND consistency of data use drop downs when possible (note that is what we are doing with the easy Uploader function):<\/p>\n<p><a href=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/better2usedropdowns.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-34119\" title=\"better2usedropdowns\" src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/better2usedropdowns-286x300.jpg\" alt=\"\" width=\"286\" height=\"300\" srcset=\"https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/better2usedropdowns-286x300.jpg 286w, https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/better2usedropdowns.jpg 422w\" sizes=\"auto, (max-width: 286px) 100vw, 286px\" \/><\/a><\/p>\n<p>Seems like phone numbers and birth dates would be a &#8216;no brainer&#8217;, but how many times have you seen this?:<\/p>\n<p><a href=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/better2usedrops.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-34118\" title=\"better2usedrops\" src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/better2usedrops-300x149.jpg\" alt=\"\" width=\"300\" height=\"149\" srcset=\"https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/better2usedrops-300x149.jpg 300w, https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/better2usedrops.jpg 434w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>What about times and standard entries (like states)?:<\/p>\n<p><a href=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/another-badfield.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-34117\" title=\"another badfield\" src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/another-badfield-300x176.jpg\" alt=\"\" width=\"300\" height=\"176\" srcset=\"https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/another-badfield-300x176.jpg 300w, https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/another-badfield.jpg 356w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Wouldn&#8217;t this be a better way to handle?:<\/p>\n<p><a href=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/betterfillin.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-34116\" title=\"betterfillin\" src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/betterfillin-300x267.jpg\" alt=\"\" width=\"300\" height=\"267\" srcset=\"https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/betterfillin-300x267.jpg 300w, https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/betterfillin.jpg 320w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<h2>Quirky Controls: A Review<\/h2>\n<blockquote>\n<ul>\n<li>Check boxes that work like radio buttons<\/li>\n<li>Command buttons that function as check boxes<\/li>\n<li>Cancel buttons that do not cancel<\/li>\n<\/ul>\n<p>&nbsp;<\/p><\/blockquote>\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<h3>Incorrect order of entries (Presenting Information Poorly)<\/h3>\n<p>Even when you do use text fields be sure to provide commonality on entry fields and their layouts:<\/p>\n<p><a href=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/badlayout.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-34115\" title=\"badlayout\" src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/badlayout-300x155.jpg\" alt=\"\" width=\"300\" height=\"155\" srcset=\"https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/badlayout-300x155.jpg 300w, https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/badlayout.jpg 650w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>This one isn&#8217;t much better:<\/p>\n<p><a href=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/badlayout2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-34114\" title=\"badlayout2\" src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/badlayout2-300x157.jpg\" alt=\"\" width=\"300\" height=\"157\" srcset=\"https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/badlayout2-300x157.jpg 300w, https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/badlayout2.jpg 680w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\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><\/p>\n<h2>So, let&#8217;s review:<\/h2>\n<blockquote>\n<ul>\n<li>Text fields should only be used for data that is really unstructured.<\/li>\n<li>Use alternatives (like drop downs) for specifying highly structured data values (for consistency.. recall that you may eventually want to make queries against this data)<\/li>\n<\/ul>\n<\/blockquote>\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<h3>So, maybe this one is better:<\/h3>\n<p><a href=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/goodeconomicdesign.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-34111\" title=\"goodeconomicdesign\" src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/goodeconomicdesign-300x164.jpg\" alt=\"\" width=\"300\" height=\"164\" srcset=\"https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/goodeconomicdesign-300x164.jpg 300w, https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/goodeconomicdesign.jpg 722w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\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><\/p>\n<h2>Design Rules for Layout Order<\/h2>\n<blockquote>\n<ul>\n<li>Dominant Reading Order<\/li>\n<li>Frequency of Use<\/li>\n<li>Relationship to other Controls<\/li>\n<li>User Expectations<\/li>\n<\/ul>\n<\/blockquote>\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<h3>What about Error Messages?<\/h3>\n<p>I wonder if you can easily figure what the message is here:<\/p>\n<p><a href=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/baderrormsge.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-34113\" title=\"baderrormsge\" src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/baderrormsge-300x147.jpg\" alt=\"\" width=\"300\" height=\"147\" srcset=\"https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/baderrormsge-300x147.jpg 300w, https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/baderrormsge.jpg 650w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Or this:<\/p>\n<p><a href=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/wordyerrormsge.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-34112\" title=\"wordyerrormsge\" src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/wordyerrormsge-300x166.jpg\" alt=\"\" width=\"300\" height=\"166\" srcset=\"https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/wordyerrormsge-300x166.jpg 300w, https:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/wordyerrormsge.jpg 722w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\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><\/p>\n<h3>Miscellaneous Common Errors<\/h3>\n<ul>\n<li>Sites that are slow downloading.<\/li>\n<li>Sites that are distracting by their use of gratuitous animations.<\/li>\n<li>Sites that can only be viewed with the most recent browsers and\/or esoteric plug-ins (recall lesson on Web Standards).<\/li>\n<li>Sites that require users to scroll down or across to see important content (most important information needs to shown on opening screen).<\/li>\n<li>Sites that format text in fixed-width or proportional width block rather than letting the width of user&#8217;s browser windows determine the width of the text.<\/li>\n<li>Text that is too tiny.<\/li>\n<li>Back button abuse (I mean yahoo mail is the worst!!!.. you hit the back button and it takes you completely out of mail).<\/li>\n<\/ul>\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<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=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/dothis.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-34091\" title=\"dothis\" src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2012\/05\/dothis.gif\" alt=\"\" width=\"60\" height=\"48\" \/><\/a><\/p>\n<p>Now that we have gotten through design issues and learned a bit about poor design, let&#8217;s see if you are now ready to tell the difference. On the<a href=\"http:\/\/www.webpagesthatsuck.com\/\" target=\"_blank\"> Web Pages that Suck site<\/a>, pick out five and describe in your own words why you think they are examples of bad design.<\/p>\n<p>In the Open Drop Box (i.e., others can see your entries) on Canvas and describe in a few sentences your impressions of the sites and how you would rate each one: 1-5 (1 being poorly designed 5 = top quality). yes, a bit subjective but it will be interesting to compare notes.. Once you are done go ahead an take peek at your classmate&#8217;s selections (no cheating). You are on your honor here.<\/p>\n<p><\/div><\/div>\n<h2>FINAL NOTE<\/h2>\n<p><span style=\"color: #800000;\"><strong>Content management systems generally do a great job in helping you make better design decisions. In some cases you can&#8217;t make a bad decision. Things like polls and voting booths for example, allow you to co-mingle check boxes and radio buttons but it can be difficult to do this, even on an open-ended plug-in like these. You still can choose wrong types of boxes. We have gone through several steps to get you to this point with the hope that you have a better appreciation as to why we use CMS systems (for both design and content), and how you need to have some knowledge about html, php, css, scripting, etc. You need to have a basic knowledge at least as to what role they all play so you can become a better site manager.<\/strong><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>So, with the users in mind, let&#8217;s take a look at some quick and easy guidelines: When building websites, it is common to get so excited about &#8216;being published&#8221; that one fails to look at the final design through the eyes of a new user\/visitor. This is a case where we must &#8216;get outside of [&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-34050","post","type-post","status-publish","format-standard","hentry","category-lessons-6207"],"_links":{"self":[{"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/posts\/34050","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=34050"}],"version-history":[{"count":9,"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/posts\/34050\/revisions"}],"predecessor-version":[{"id":41346,"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/posts\/34050\/revisions\/41346"}],"wp:attachment":[{"href":"https:\/\/emeclasses.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=34050"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/emeclasses.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=34050"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/emeclasses.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=34050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}