<\/span><\/h2>\nSince the days of Mozilla and Netscape, browsers have had a “back” button – a paradigm still employed today. \u00a0Clicking the “back” button takes you to the previous web page.<\/p>\n
Especially where Flash is over-employed, some websites take you back to the previous web page – if you’re 10 minutes in to the middle of creating your “masterpiece” pizza on a flash-based pizza delivery website, and you click back, thinking “I need to go to the previous step”, you might be surprised to find that “back” takes you to the login screen! \u00a0Your “masterpiece”? \u00a0It’s gone…<\/p>\n
The only thing MORE annoying is hitting the back button, and landing on a page that says “This page has expired. \u00a0Click here to go to the most recent page.”<\/p>\n
If you design a website, design it so that the back button takes you “back” to the previous screen.<\/p>\n
Javascript can intercept the back button click, and cookies or session persistence can be used to track the session state.<\/p>\n
Rather than presenting your users with an error message, or kicking them back to a login screen, why not include the back button as a valid control within your application?<\/p>\n
In a “wizard”, such as, when you’re building that pizza-for-delivery, have the back button take you “back” to the previous step, not kick you out completely. \u00a0If you clicked “next page”, have the back button take you “back” to the previous page.<\/p>\n
The other thing I see occasionally, is that a website will have an internal redirect.\u00a0 When you hit the back button, it hits the redirect page, then takes you to the next page automatically!\u00a0 A few simple lines of JavaScript can prevent this.<\/p>\n
Conclusion<\/span>: \u00a0Make the BACK button function the way the user expects it to function, in the context of your application.\u00a0 Make sure redirect pages are properly implemented, to allow the user to go “back” properly.
\n<\/strong><\/p>\n <\/p>\n
<\/p>\n
<\/span>The Keyboard Should Work Properly<\/span><\/h2>\nBefore computers had mice, they had keyboards.\u00a0 People have a certain expectation for how an application should behave when using a keyboard.<\/p>\n
<\/p>\n
<\/span>Arrow Keys<\/span><\/h3>\nBased on your application, arrow keys might work in different ways.<\/p>\n
If you have a list, arrow keys might allow you to scroll through the list.<\/p>\n
If your application displays some content, arrow keys might allow you to pan (scroll) around within the content.<\/p>\n
What happens when you have both?\u00a0 An e-mail application has a list of e-mails, and each e-mail is a document with some content.\u00a0 This is a tough one, but the arrow keys must function properly based on context.\u00a0 If you click on an e-mail, the arrow keys should scroll the content<\/em> NOT the e-mail list.\u00a0 When you clicked, you selected a specific e-mail.<\/p>\nUsing visual cues, you can intercept TAB to switch from the content to the list (or vice-versa), or have a second set of keys, such as PGUP \/ PGDN that allow you to scroll through the list.<\/p>\n
HAVE A HELP SCREEN that describes all of the keyboard shortcuts.<\/p>\n
Conclusion<\/span>:\u00a0 Using the keyboard is natural.\u00a0 Make sure your application implements keyboard controls in a natural way.<\/strong><\/p>\n <\/p>\n
<\/span>Enter Key<\/span><\/h3>\nThe Enter key should trigger the default action on the page.\u00a0 For example, on a login screen, “Enter” should click the “Log In” button.\u00a0 Having “Enter” trigger some random function is confusing.<\/p>\n
Make sure “Enter” to select or activate, especially if it’s non-reversible, has some kind of confirmation message, so that the user understands what’s about to happen.<\/p>\n
Conclusion<\/span>:\u00a0 Have “Enter” trigger the default action on the page, not some arbitrary function that seems random to the end user.<\/strong><\/p>\n <\/p>\n
<\/p>\n
<\/span>Cursor Position Defaults to Default Field<\/span><\/h2>\nNOTHING is more annoying than when you go to log in to a website, you type your password, hit enter, and realize that the password went in to some random form field.<\/p>\n
People like SIMPLE things.<\/p>\n
Conclusion<\/span>:\u00a0 KEEP things simple by moving the cursor to the default form field.\u00a0 If the user name was supplied, skip to the password field.\u00a0 A couple lines of JavaScript will save MUCH frustration.<\/strong><\/p>\n <\/p>\n
<\/span>AutoPlay<\/span><\/h2>\nThere is nothing worse than opening a link in the middle of the night, you think the volume is on mute, but BLAAAAAAAA\u00a0 some stupid video or music starts playing.<\/p>\n
<\/p>\n
<\/span>Music<\/span><\/h3>\nWeb sites with music were cool in the early 90’s, when there was no such thing as multimedia.\u00a0 Music added some “ambience”\u00a0 AM bee AAAAANSSS to the website.\u00a0 In 2015, it makes your website look lame and dated.\u00a0 If you want to have some soft background music playing, build it in to your website’s app, and have a MUTE button.\u00a0 Better yet, DON’T AUTOPLAY MUSIC!!<\/p>\n
<\/p>\n
<\/span>Video<\/span><\/h3>\nNews sites are the worst.\u00a0 You want to look up the weather, and you get 120 decibels of some obnoxious weather caster.<\/p>\n
A better option?\u00a0 “Click here to view today’s weathercast!”\u00a0 A LINK or a PLAY button that ACTIVATES the video.\u00a0 What a concept.<\/p>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Most professionally-developed websites are simple, fast, and easy to use. However, there is nothing in the world more frustrating than a website or web application that is poorly-designed or hard to use. Here are some common mistakes that Web Designers might not think about, but make a huge impact to the customer <\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-1599","post","type-post","status-publish","format-standard","hentry","category-analyses-and-responses"],"_links":{"self":[{"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/posts\/1599","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/comments?post=1599"}],"version-history":[{"count":10,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/posts\/1599\/revisions"}],"predecessor-version":[{"id":1631,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/posts\/1599\/revisions\/1631"}],"wp:attachment":[{"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/media?parent=1599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/categories?post=1599"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/justinparrtech.com\/JustinParr-Tech\/wp-json\/wp\/v2\/tags?post=1599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}