Sometimes as programmers, we forget that 99.9% of the population doesn’t care how a piece of text, a button, an image or a video ends up onscreen. Most people just care that it’s fast, easy to use and gives them the content they want. Otherwise, they get upset -- and rightfully so. Here are three common mistakes we programmers make, and what we can do to fix them.
1. Forgetting About Conventions
Ever since they started using the Internet, users have been trained how to interact with a website. Therefore, they often get frustrated when websites don’t meet their expectations. Here are some examples.
They hover over an object they think is clickable, but become confused when they see an arrow instead of a hand pointer.
They click on blue, underlined text, but find it’s not a link.
They click on the logo in the top left, believing it will return them to the homepage, only to find it takes them nowhere.
Web design doesn’t always meet our expectations. However, developers and designers should always maintain certain rules to avoid user confusion. Here are three.
Clickable Elements Should Have the Pointer on Rollover
Everything clickable should switch to the hand pointer when a user hovers over it. You can accomplish this using simple CSS. The code would look like this
div:hover { cursor: pointer; }
Style Links Appropriately
Links should look different than regular text, and should be underlined within a page’s main content. If you really want to stick with convention, make them blue -- research found users engage most with blue links.
Make Logos Clickable
The logo in the header of your website should be clickable, and should take the user to the homepage. This is pretty simple: Just wrap your logo in a tag.
2. Creating Slowly-Loading Websites
Users hate slow websites. Studies have shown that 40% of users will abandon a website that takes more than three seconds to load. Here’s how to avoid common speed mistakes by new programmers.
Resize Images Outside the Browser
New programmers will sometimes use a very large image, let’s say 600 pixels wide by 600 pixels tall, but will set the height and width so the image shrinks to the desired size. They use the following code.
There are two problems with this method: First, the full image still needs to load. Typically, bigger image files mean longer load times.
Second, shrinking an image using the height and width attributes can render a photo awkwardly, causing the browser to display a photo not nearly as clear as it would be were the image sized 200 x 200 pixels.
To fix these issues, resize and compress images in an editor like Photoshop or Gimp. Then code the image like we did above. Try to use a tool like Photoshop’s Save for Web & Devices to further shrink the file size.
Load JavaScript in the Footer
Many programmers unnecessarily load all the page’s JavaScript files in the head tag. This stalls the rest of the page load. In almost all cases, except for JavaScript critical to user interface navigation, it’s okay to load script in the footer. Then the rest of the page can load beforehand. Try this code.
Rest of the page...