{"id":95,"date":"2020-06-21T21:54:26","date_gmt":"2020-06-21T21:54:26","guid":{"rendered":"http:\/\/anneemberline.com\/usability\/?page_id=95"},"modified":"2020-07-22T03:50:27","modified_gmt":"2020-07-22T03:50:27","slug":"examples-of-usability-issues","status":"publish","type":"page","link":"http:\/\/anneemberline.com\/usability\/examples-of-usability-issues\/","title":{"rendered":"3. Examples of Usability Issues"},"content":{"rendered":"\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\">To help you spot usability issues a little easier, we&#8217;ve put together these examples for you to experience on your own.<\/h4>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\">You can watch the demo videos and click through to use the actual interface yourself.<\/h4>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignwide has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#ffffff\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><strong>Demo #1: Navigation + Search<\/strong><\/h4>\n\n\n\n<p>Navigation and search are critical ways for users to find content on a website. On mobile devices, \u2018less is more\u2019 on a small screen. Menus should be self-evident, have a clear hierarchy and require minimal effort on the user. In this demo, we look at both a good and poor example for comparison.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Usability Demo: Navigation + Search\" width=\"580\" height=\"326\" src=\"https:\/\/www.youtube.com\/embed\/23O3FGizCtQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><strong>Text transcript:<\/strong><\/h4>\n\n\n\n<p>Here is an example of poor navigation. There\u2019s no search bar at the top and neither at the bottom if you want to go to the menu, you hit the menu button and you encounter over two dozen options to you. There\u2019s no hierarchy or sense of direction. It takes up over a third of your phone space, which means you can\u2019t see anything else, but the menu.<\/p>\n\n\n\n<p>Here\u2019s an example of good navigation. You\u2019ve got a menu bar that opens up and is easily viewable within the small screen. You can also do a search right from the header. So let\u2019s recap, do make navigation self-evident. Remember less is more on a small screen, ensure minimal effort and scrolling to get to the information you want and include a search function.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/www.ryerson.ca\/\" target=\"_blank\" rel=\"noreferrer noopener\">try good example<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/www.uat.edu\/\" target=\"_blank\" rel=\"noreferrer noopener\">try poor example<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div class=\"wp-block-columns alignwide has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#ffffff\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><strong>Demo #2: Accessibility + Contrast<\/strong><\/h4>\n\n\n\n<p>An accessible user experience means everyone can access the information presented on your website. Create a comfortable reading experience, by ensuring adequate contrast between elements, avoiding grey tones and using larger font sizes on mobile. In this demo, we look at the impact of contrast.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Usability Demo: Accessibility + Contrast\" width=\"580\" height=\"326\" src=\"https:\/\/www.youtube.com\/embed\/7N-YzmoIXp8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><strong>Text transcript:<\/strong><\/h4>\n\n\n\n<p>Here\u2019s an example for colour contrast. The crayon gray colour tones make it hard to see the menu content and elements on the page. You can tell the difference when you increase the contrast. <\/p>\n\n\n\n<p>So let\u2019s recap, when looking at accessibility and contrast, do ensure adequate contrast between elements, avoid grey on grey, and use larger font sizes on mobile, and reduce content overall.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/etc.usf.edu\" target=\"_blank\" rel=\"noreferrer noopener\">try example<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div class=\"wp-block-columns alignwide has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#ffffff\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><strong>Demo #3: Layout + Feedback<\/strong><\/h4>\n\n\n\n<p>Think mobile first, when designing for a small screen. Content should be organized logically, with clear hierarchy. Providing feedback to users is important. Let your users know if they\u2019ll be leaving your site to view resources and videos.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Usability Demo: Layout + Feedback\" width=\"580\" height=\"326\" src=\"https:\/\/www.youtube.com\/embed\/2ZXGzRoHNz8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><strong>Text transcript:<\/strong><\/h4>\n\n\n\n<p>Here\u2019s an example of a website that has not been optimized for mobile devices. The text is very small and requires the user to pinch and zoom to see the menu items. Users should be warned if they will be asked to leave the current website to view content. For example, if I wanted to view the first testing and evaluating video and I click on the thumbnail, it opens a new window asking me to log in. <\/p>\n\n\n\n<p>To review, use a responsive mobile friendly layout, let your users know if they\u2019re going to be leaving your website to view videos or resources that are hosted elsewhere or require you to sign in, and don\u2019t forget to use less text.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/rover.edonline.sk.ca\/en\" target=\"_blank\" rel=\"noreferrer noopener\">try example<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignwide has-primary-background-color has-background\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"has-text-align-center wp-block-heading\">Time to Apply What You&#8217;ve Learned<\/h2>\n\n\n\n<p class=\"has-text-align-center\">\u2192 <a href=\"http:\/\/anneemberline.com\/usability\/practice\/\">See Practice Exercises<\/a><\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>To help you spot usability issues a little easier, we&#8217;ve put together these examples for you to experience on your own. You can watch the demo videos and click through to use the actual interface yourself. Demo #1: Navigation + Search Navigation and search are critical ways for users to find content on a website. [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-95","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/anneemberline.com\/usability\/wp-json\/wp\/v2\/pages\/95","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/anneemberline.com\/usability\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/anneemberline.com\/usability\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/anneemberline.com\/usability\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"http:\/\/anneemberline.com\/usability\/wp-json\/wp\/v2\/comments?post=95"}],"version-history":[{"count":25,"href":"http:\/\/anneemberline.com\/usability\/wp-json\/wp\/v2\/pages\/95\/revisions"}],"predecessor-version":[{"id":259,"href":"http:\/\/anneemberline.com\/usability\/wp-json\/wp\/v2\/pages\/95\/revisions\/259"}],"wp:attachment":[{"href":"http:\/\/anneemberline.com\/usability\/wp-json\/wp\/v2\/media?parent=95"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}