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
Table of Contents
Overuse of Flash
This is the most common mistake!
Adobe Flash changed the way we use the web, bringing interactive games, streaming video, and active content to the browser.
Before Flash, web pages were largely static. Buttons and other controls were static elements, and clicking a button would basically refresh (redraw) the whole page. So although you could page through a long list of items, viewing “x” items at a time, clicking the “Next Page” button would send a new request to the server, which then runs a new database query, and sends the HTML code to draw a brand new page, containing the “next page” of items.
Flash gave us truly dynamic interfaces that could show us different data or change user interface elements based on context. Because Flash is basically its own runtime environment, similar to Java, for the first time, you could play games, watch streaming video, or perform complex operations beyond “clicking a button” within the context of a browser session, giving rise to the “web application”.
That’s the good news.
The bad news is that Flash designers jumped on this technology with both feet, and every website on the planet soon had at least SOME Flash content.
As stated, Flash is like a program that runs inside your browser. Complex programs with lots of graphics require more CPU and RAM, just like newer, more complex software requires more CPU and RAM.
Because Flash is a quick and easy way to make your website look (and possibly sound) cooler, Web Designers used Flash for EVERYTHING, EVERYWHERE. Soon, instead of HTML with embedded Flash, developers were making ENTIRE WEBSITES in Flash.
Now, instead of being able to use a 1990’s-era PC to be able to view 90% of the web, you now needed some serious horsepower, just to read your e-mail!
Flash Done Well
YouTube. Until you click on a video, most of the YouTube website is just HTML. When you click on a video, Flash activates, and plays the video.
Flash Done Poorly
MOST Pizza Delivery websites. There is NOTHING more annoying than to try to “order a pizza real quick”, only to wait 30 seconds or more, staring at “Loading Website…”, like some kind of 90’s retro computer program that has to “load for a while” before you can use it. It’s 2015. There’s NOTHING on the web that should take 30 seconds to load over a broadband connection.
When you DO finally get in, the “all Flash” website has a confusing set of buttons and mouse-overs that you have to figure out, instead of a simple menu at the top. This approach works well for Disney, a child-oriented website, but I’m an adult, and I don’t need a cartoon to guide me through ordering a pizza. What’s worse? (See below for more detail) When you click the browser’s “back” button, most Flash-based websites completely reload! That perfect pizza you just spent 15 minutes designing… just got obliterated.
Competing Standards
There are several other technologies that bring rich content and dynamic controls to a website
- Java. Before there was Flash, there was Java. Java gave you the ability to run a “Java application” within a browser. I think Flash was more popular because it more closely integrated with the browser, rather than run as a simple “you get what you see” window embedded in a web page. Many people don’t realize it, but Java is still an excellent technology for complex applications, where complex graphics, 3D graphics, or serious number crunching is required. Java is also 100% free to develop and use, for personal use, where Flash requires expensive tools even for entry-level development.
- Silverlight. A Microsoft, development-oriented standard, compared to Flash’s user-interface centric approach, Silverlight can be used for the same things as Flash, but based on the Microsoft .NET development environment and stack. Silverlight isn’t terribly popular, but IS currently used as the core for the Netflix streaming viewer.
- JavaScript. A scripting engine that runs in the context of the browser, JavaScript can be used to provide a dynamic “look and feel” with relatively low overhead, and without the need for a 3rd-party plugin such as Flash.
- AJAX. Asynchronous JavaScript And XML, AJAX is a library of tools that automate content delivery and rendering within the browser, providing a rich interface with dynamic content. AJAX is completely free, much faster than Flash or Silverlight, requiring many fewer CPU resources and much less memory.
- Cold Fusion. An older Adobe standard, Cold Fusion was developed as a light-weight approach for providing dynamic content and user interface controls, but has limits to what it can handle and deliver, compared to AJAX.
- HTML5. A newer standard, HTML5 includes most of the components of AJAX, provides a quick, lightweight dynamic interface, and native support for streaming. Due to Apple’s highly-publicized lack of Flash support, many popular services such as YouTube accelerated support for HTML5.
Conclusion: DO NOT overuse Flash! People hate it, because your website loads slowly, and makes their machine run slow. Use AJAX and HTML5 for rich content.
The “Back” Button Should Take You BACK
Since the days of Mozilla and Netscape, browsers have had a “back” button – a paradigm still employed today. Clicking the “back” button takes you to the previous web page.
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! Your “masterpiece”? It’s gone…
The only thing MORE annoying is hitting the back button, and landing on a page that says “This page has expired. Click here to go to the most recent page.”
If you design a website, design it so that the back button takes you “back” to the previous screen.
Javascript can intercept the back button click, and cookies or session persistence can be used to track the session state.
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?
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. If you clicked “next page”, have the back button take you “back” to the previous page.
The other thing I see occasionally, is that a website will have an internal redirect. When you hit the back button, it hits the redirect page, then takes you to the next page automatically! A few simple lines of JavaScript can prevent this.
Conclusion: Make the BACK button function the way the user expects it to function, in the context of your application. Make sure redirect pages are properly implemented, to allow the user to go “back” properly.
The Keyboard Should Work Properly
Before computers had mice, they had keyboards. People have a certain expectation for how an application should behave when using a keyboard.
Arrow Keys
Based on your application, arrow keys might work in different ways.
If you have a list, arrow keys might allow you to scroll through the list.
If your application displays some content, arrow keys might allow you to pan (scroll) around within the content.
What happens when you have both? An e-mail application has a list of e-mails, and each e-mail is a document with some content. This is a tough one, but the arrow keys must function properly based on context. If you click on an e-mail, the arrow keys should scroll the content NOT the e-mail list. When you clicked, you selected a specific e-mail.
Using 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.
HAVE A HELP SCREEN that describes all of the keyboard shortcuts.
Conclusion: Using the keyboard is natural. Make sure your application implements keyboard controls in a natural way.
Enter Key
The Enter key should trigger the default action on the page. For example, on a login screen, “Enter” should click the “Log In” button. Having “Enter” trigger some random function is confusing.
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.
Conclusion: Have “Enter” trigger the default action on the page, not some arbitrary function that seems random to the end user.
Cursor Position Defaults to Default Field
NOTHING 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.
People like SIMPLE things.
Conclusion: KEEP things simple by moving the cursor to the default form field. If the user name was supplied, skip to the password field. A couple lines of JavaScript will save MUCH frustration.
AutoPlay
There is nothing worse than opening a link in the middle of the night, you think the volume is on mute, but BLAAAAAAAA some stupid video or music starts playing.
Music
Web sites with music were cool in the early 90’s, when there was no such thing as multimedia. Music added some “ambience” AM bee AAAAANSSS to the website. In 2015, it makes your website look lame and dated. If you want to have some soft background music playing, build it in to your website’s app, and have a MUTE button. Better yet, DON’T AUTOPLAY MUSIC!!
Video
News sites are the worst. You want to look up the weather, and you get 120 decibels of some obnoxious weather caster.
A better option? “Click here to view today’s weathercast!” A LINK or a PLAY button that ACTIVATES the video. What a concept.