{"id":63,"date":"2017-12-17T00:00:45","date_gmt":"2017-12-17T05:00:45","guid":{"rendered":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/chapter\/lists\/"},"modified":"2023-06-08T12:34:42","modified_gmt":"2023-06-08T16:34:42","slug":"webpatterns","status":"publish","type":"chapter","link":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/chapter\/webpatterns\/","title":{"raw":"3.3 Website Design Interface and Patterns","rendered":"3.3 Website Design Interface and Patterns"},"content":{"raw":"<h2>Smart Interface Design<\/h2>\r\nWebsites should be unique, content-driven and show a clear business purpose. Coming up with a new solution for design issues can be very time consuming. Smart design patterns allow us to ask the right questions of our website layout to ensure maximum cross-cultural usability.\r\n<p class=\"note\">The guidelines below have been curated through usability sessions, design iterations and A\/B testing. Before we dive into patterns, we want our website to be usable by all and that starts with adhering to website accessibility standards.<\/p>\r\n\r\n<h2>Website Accessibility Standards<\/h2>\r\nAn <a href=\"https:\/\/www.w3.org\/WAI\/fundamentals\/accessibility-intro\/#context\" target=\"_blank\" rel=\"noopener\">Introduction to Web Accessibility<\/a>[footnote]W3C. (n.d.). Introduction to Web Accessibility. https:\/\/www.w3.org\/WAI\/fundamentals\/accessibility-intro[\/footnote] outlines patterns you must implement when designing a website to make sure the site works for everyone.\r\n\r\nReview the <a href=\"https:\/\/www.w3.org\/WAI\/tips\/designing\/\" target=\"_blank\" rel=\"noopener\">Tips for Getting Started<\/a>[footnote]W3C. (n.d.). Designing for Web Accessibility. https:\/\/www.w3.org\/WAI\/tips\/designing\/[\/footnote]\u00a0 and pay close attention to the requirement for alternative text on media, as it is a requirement for all images that are non-decorative. A decorative image does not add value to the content and is seen more as a placeholder on the site to ensure consistent flow of the page layout.\r\n<h2>Layout patterns<\/h2>\r\n<h3>Navigation<\/h3>\r\nBesides being consistently stylized across all pages on your website, your navigation should also have the following features:\r\n<ul>\r\n \t<li><span class=\"sidebar_consid_noteR\">Customizing the style of your navigation can dramatically make your website more user-friendly. <\/span><strong>Add a \"home\" button\/link and set the logo as a link which returns home<\/strong>. On the left-most side of your menu, people will usually look for a way to get back to your homepage. This link is often called \"home\", is the businesses logo or the name of the business.<\/li>\r\n \t<li><strong>Navigation items look like a button\/link<\/strong>. All links in your navigation should look like a link rather than plain text. WordPress.com will stylize your navigation to stand-out, however, using a specific colour pallet will ensure that your navigation links\/buttons have sufficient contrast and \"pop\" when compared to the content on the rest of the page, is a must.<\/li>\r\n \t<li><strong>Add a hover effect.<\/strong> People often read the web by moving their cursor over the content. When they go to click on a navigation link with their cursor, as opposed to tapping with a finger\/thumb, the link is expected to change to indicate that you will be taken to another page.<\/li>\r\n<\/ul>\r\n<h3>Active White Space<\/h3>\r\nAre there any glaringly large empty spaces on your pages? Are any of the images touching directly next to text? If so you need to think about \"white\" space on your page. For example, images should usually have some margin around them to prevent text from touching the side.\r\n<p class=\"dotted_box\">Active white space is used to create eye-catching space between components on your web page to make them easy to read and aesthetically appealing.<\/p>\r\nToo much white space leaves the layout looking plain and empty. Placing a decorative image in that space may enhance the layout and a non-decorative image may add value to the content.\r\n<h2>Form layout<\/h2>\r\n<p class=\"consid_note\">Every business website should have a contact form to make it easy for individuals to contact the business.<\/p>\r\nForms are tricky but there are a few key patterns to follow:\r\n<ul>\r\n \t<li>For complex forms, not typically of contact forms, break down the form into <em>tasks <\/em>(i.e. name and personal details, then order of relevant information)<\/li>\r\n \t<li>Put the tasks in a sensible order and use verbs to describe them (i.e. Shipping information)<\/li>\r\n \t<li>Tell users what they need before they start (i.e. documents, time)<\/li>\r\n \t<li>Make the submit button large enough and close enough to the form that it is easy to find.<\/li>\r\n<\/ul>\r\n<h2>Strategy, Usability and Style<\/h2>\r\nIn the article <a href=\"https:\/\/www.rivmedia.co.uk\/how-to-evaluate-a-websites-design\/8486\" target=\"_blank\" rel=\"noopener\">How To Evaluate A Websites Design?<\/a>[footnote]Hardingham, A. (2020 August 31). How to evaluate a websites design?. https:\/\/www.rivmedia.co.uk\/how-to-evaluate-a-websites-design\/8486[\/footnote], Hardingham pays particular attention to the Strategy, Usability and Style, which are relevant to knowing if your website is effective, or not.\r\n<h2>Past Student Examples<\/h2>\r\nThese two websites were built by previous students in the course ABT 270 - Maintaining an Online Presence. They graciously agreed to share their exemplary work:\r\n<ul>\r\n \t<li><a href=\"https:\/\/katieconacherphotography.wordpress.com\" target=\"_blank\" rel=\"noopener\">https:\/\/katieconacherphotography.wordpress.com<\/a><\/li>\r\n \t<li><a href=\"https:\/\/ciaerialstudios.wordpress.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/ciaerialstudios.wordpress.com\/<\/a><\/li>\r\n<\/ul>\r\n<div class=\"textbox textbox--exercises\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\">EXERCISE 3.4 Which of the following two items in the list below are NOT accessibility issues?<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n<ol>\r\n \t<li>Text is yellow on white.<\/li>\r\n \t<li>Specific HTML elements are used to semantically define content.<\/li>\r\n \t<li>Text is set to 12pt.<\/li>\r\n \t<li>Images contain header text.<\/li>\r\n \t<li>A decorative image does not have alternative text.<\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>","rendered":"<h2>Smart Interface Design<\/h2>\n<p>Websites should be unique, content-driven and show a clear business purpose. Coming up with a new solution for design issues can be very time consuming. Smart design patterns allow us to ask the right questions of our website layout to ensure maximum cross-cultural usability.<\/p>\n<p class=\"note\">The guidelines below have been curated through usability sessions, design iterations and A\/B testing. Before we dive into patterns, we want our website to be usable by all and that starts with adhering to website accessibility standards.<\/p>\n<h2>Website Accessibility Standards<\/h2>\n<p>An <a href=\"https:\/\/www.w3.org\/WAI\/fundamentals\/accessibility-intro\/#context\" target=\"_blank\" rel=\"noopener\">Introduction to Web Accessibility<\/a><a class=\"footnote\" title=\"W3C. (n.d.). Introduction to Web Accessibility. https:\/\/www.w3.org\/WAI\/fundamentals\/accessibility-intro\" id=\"return-footnote-63-1\" href=\"#footnote-63-1\" aria-label=\"Footnote 1\"><sup class=\"footnote\">[1]<\/sup><\/a> outlines patterns you must implement when designing a website to make sure the site works for everyone.<\/p>\n<p>Review the <a href=\"https:\/\/www.w3.org\/WAI\/tips\/designing\/\" target=\"_blank\" rel=\"noopener\">Tips for Getting Started<\/a><a class=\"footnote\" title=\"W3C. (n.d.). Designing for Web Accessibility. https:\/\/www.w3.org\/WAI\/tips\/designing\/\" id=\"return-footnote-63-2\" href=\"#footnote-63-2\" aria-label=\"Footnote 2\"><sup class=\"footnote\">[2]<\/sup><\/a>\u00a0 and pay close attention to the requirement for alternative text on media, as it is a requirement for all images that are non-decorative. A decorative image does not add value to the content and is seen more as a placeholder on the site to ensure consistent flow of the page layout.<\/p>\n<h2>Layout patterns<\/h2>\n<h3>Navigation<\/h3>\n<p>Besides being consistently stylized across all pages on your website, your navigation should also have the following features:<\/p>\n<ul>\n<li><span class=\"sidebar_consid_noteR\">Customizing the style of your navigation can dramatically make your website more user-friendly. <\/span><strong>Add a &#8220;home&#8221; button\/link and set the logo as a link which returns home<\/strong>. On the left-most side of your menu, people will usually look for a way to get back to your homepage. This link is often called &#8220;home&#8221;, is the businesses logo or the name of the business.<\/li>\n<li><strong>Navigation items look like a button\/link<\/strong>. All links in your navigation should look like a link rather than plain text. WordPress.com will stylize your navigation to stand-out, however, using a specific colour pallet will ensure that your navigation links\/buttons have sufficient contrast and &#8220;pop&#8221; when compared to the content on the rest of the page, is a must.<\/li>\n<li><strong>Add a hover effect.<\/strong> People often read the web by moving their cursor over the content. When they go to click on a navigation link with their cursor, as opposed to tapping with a finger\/thumb, the link is expected to change to indicate that you will be taken to another page.<\/li>\n<\/ul>\n<h3>Active White Space<\/h3>\n<p>Are there any glaringly large empty spaces on your pages? Are any of the images touching directly next to text? If so you need to think about &#8220;white&#8221; space on your page. For example, images should usually have some margin around them to prevent text from touching the side.<\/p>\n<p class=\"dotted_box\">Active white space is used to create eye-catching space between components on your web page to make them easy to read and aesthetically appealing.<\/p>\n<p>Too much white space leaves the layout looking plain and empty. Placing a decorative image in that space may enhance the layout and a non-decorative image may add value to the content.<\/p>\n<h2>Form layout<\/h2>\n<p class=\"consid_note\">Every business website should have a contact form to make it easy for individuals to contact the business.<\/p>\n<p>Forms are tricky but there are a few key patterns to follow:<\/p>\n<ul>\n<li>For complex forms, not typically of contact forms, break down the form into <em>tasks <\/em>(i.e. name and personal details, then order of relevant information)<\/li>\n<li>Put the tasks in a sensible order and use verbs to describe them (i.e. Shipping information)<\/li>\n<li>Tell users what they need before they start (i.e. documents, time)<\/li>\n<li>Make the submit button large enough and close enough to the form that it is easy to find.<\/li>\n<\/ul>\n<h2>Strategy, Usability and Style<\/h2>\n<p>In the article <a href=\"https:\/\/www.rivmedia.co.uk\/how-to-evaluate-a-websites-design\/8486\" target=\"_blank\" rel=\"noopener\">How To Evaluate A Websites Design?<\/a><a class=\"footnote\" title=\"Hardingham, A. (2020 August 31). How to evaluate a websites design?. https:\/\/www.rivmedia.co.uk\/how-to-evaluate-a-websites-design\/8486\" id=\"return-footnote-63-3\" href=\"#footnote-63-3\" aria-label=\"Footnote 3\"><sup class=\"footnote\">[3]<\/sup><\/a>, Hardingham pays particular attention to the Strategy, Usability and Style, which are relevant to knowing if your website is effective, or not.<\/p>\n<h2>Past Student Examples<\/h2>\n<p>These two websites were built by previous students in the course ABT 270 &#8211; Maintaining an Online Presence. They graciously agreed to share their exemplary work:<\/p>\n<ul>\n<li><a href=\"https:\/\/katieconacherphotography.wordpress.com\" target=\"_blank\" rel=\"noopener\">https:\/\/katieconacherphotography.wordpress.com<\/a><\/li>\n<li><a href=\"https:\/\/ciaerialstudios.wordpress.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/ciaerialstudios.wordpress.com\/<\/a><\/li>\n<\/ul>\n<div class=\"textbox textbox--exercises\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\">EXERCISE 3.4 Which of the following two items in the list below are NOT accessibility issues?<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<ol>\n<li>Text is yellow on white.<\/li>\n<li>Specific HTML elements are used to semantically define content.<\/li>\n<li>Text is set to 12pt.<\/li>\n<li>Images contain header text.<\/li>\n<li>A decorative image does not have alternative text.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<hr class=\"before-footnotes clear\" \/><div class=\"footnotes\"><ol><li id=\"footnote-63-1\">W3C. (n.d.). Introduction to Web Accessibility. https:\/\/www.w3.org\/WAI\/fundamentals\/accessibility-intro <a href=\"#return-footnote-63-1\" class=\"return-footnote\" aria-label=\"Return to footnote 1\">&crarr;<\/a><\/li><li id=\"footnote-63-2\">W3C. (n.d.). Designing for Web Accessibility. https:\/\/www.w3.org\/WAI\/tips\/designing\/ <a href=\"#return-footnote-63-2\" class=\"return-footnote\" aria-label=\"Return to footnote 2\">&crarr;<\/a><\/li><li id=\"footnote-63-3\">Hardingham, A. (2020 August 31). How to evaluate a websites design?. https:\/\/www.rivmedia.co.uk\/how-to-evaluate-a-websites-design\/8486 <a href=\"#return-footnote-63-3\" class=\"return-footnote\" aria-label=\"Return to footnote 3\">&crarr;<\/a><\/li><\/ol><\/div>","protected":false},"author":1518,"menu_order":2,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[48],"contributor":[],"license":[],"class_list":["post-63","chapter","type-chapter","status-publish","hentry","chapter-type-standard"],"part":54,"_links":{"self":[{"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/pressbooks\/v2\/chapters\/63","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/wp\/v2\/users\/1518"}],"version-history":[{"count":9,"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/pressbooks\/v2\/chapters\/63\/revisions"}],"predecessor-version":[{"id":482,"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/pressbooks\/v2\/chapters\/63\/revisions\/482"}],"part":[{"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/pressbooks\/v2\/parts\/54"}],"metadata":[{"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/pressbooks\/v2\/chapters\/63\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/wp\/v2\/media?parent=63"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/pressbooks\/v2\/chapter-type?post=63"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/wp\/v2\/contributor?post=63"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/onlinepresence\/wp-json\/wp\/v2\/license?post=63"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}