The visited state on links is one of the biggest opportunities in web design – it’s basically personalized history for each of your visitors, enabled by default! Yet, many web designers remove this feature from their website because “it looks ugly”.
Every single link on a webpage is given a “visited” state if you’ve already been on the page it’s leading to. It’s a way to visually distinguish links to pages you’ve already visited from links to new pages you have yet to read.
This is a big opportunity as it gives your visitors information about what page’s they have (and haven’t) visited so far. In fact, this feature adds an entire dimension to your website – history. The visited state represents personalized history for each of your visitors.
This token of history can help your visitors identify where they’ve been, making it easier for them to figure out where they are now and – perhaps more importantly – where to go next. It gives them a stronger sense of control over your website, increasing their confidence in your and their own abilities.
On the contrary, removing this history will cause your visitors to get lost more frequently, revisiting the same pages over and over again (until they leave your site in frustration). So why do so many web designers still remove this state? Because “it looks ugly”. Cut the vanity, my friends!
Removing an entire dimension from your website is unacceptable unless you have very good reasons for doing so (it do make sense for some web application for example). Keeping the history dimension is a core usability guideline which should always be prioritized above style.
You should take advantage of this feature and help your visitors find their way around your website with greater ease and more confidence.
When we stumbled upon Netflix’s home page the other day we immediately thought that this would be a good showcase for how not to do your CAPTCHA. Which is exactly what we do in this video:
Make your CAPTCHA ask for real words or sentences instead of using random characters.
Tell your visitors you’ve implemented the CAPTCHA to prevent spam instead of forcing them to fill out meaningless form fields.
Reload just the CAPTCHA if your visitor gets it wrong instead of having him retype all the form fields once more.
Furthermore Netflix ask their visitors to confirm both their email and their password, which is just unnecessary friction: if the email is confirmed, just send the user a new in case he misspelled it.
Do you know any good or bad examples of CAPTCHAs? Then share in a comment.
When you ask some web “designers” why they added a certain element to their site they’ll answer “because it looks good”. These people are of course artists, not designers.
You should never add something just because it looks good – aesthetics are never the end goal but rather a tool web designers may use to achieve a specific goal (and only when it actually helps them achieve that goal).
Real web designers will never:
Treat text as a graphic element that have to fit into their layout. The site’s design should be tailored to the site’s content, not the other way around. If you see “Lorem ipsum” you know you’re dealing with an artist, not a designer.
Add an image to their design if it doesn’t serve a very well thought out purpose. Irrelevant stock photos with the sole purpose of “living up the design” come from clueless CEOs.
Use a graphical element that doesn’t add meaning to its surroundings. Borders, backgrounds, dividers and white-space that doesn’t provide new meaning or clarify relationships are the trademark of misguided designers.
Finally, and most importantly: real web designers will never decorate.
You see, decoration is something you add to make an object prettier. You’re adding beauty but not meaning. This is fundamentally flawed as you introduce new things in your product without adding any meaning – you’re actually diluting the meaning of your work.
Graphic elements which are only there for the sake of the graphic element itself – decoration – will only achieve one thing: distract your customers from your business goals. This is why a good designer will never decorate. Making something “pretty” is not a reason in and by itself. This kind of meaningless beauty will only server as a distraction to your customers.
Now, a good designer can certainly make something more aesthetically pleasing if it causes the product to sell better (this isn’t always the case though), and the important thing to notice is that while the good designer may use aesthetics as a tool to achieve an end goal, like selling more, beauty was never (and should never) be the end goal itself.
Note: I’m not having a go at people who create beautiful web designs. However, we should call things what they are, so call the guy who create beautiful web designs with aesthetics in the front seat an artist, and call the gal who create effective web designs with performance in the front seat a web designer.
A recent study by Forrester and Akamai showed that 47% of your website visitors expects your page to load in less than 2 seconds, and 40% will abandon if it takes 3+ seconds. So how does a site like amazon.com survive when it can easily take up to 6 seconds to load? By focusing on perceived load time instead of actual load time.
Perceived load time
Perceived load time is the time a visitor has to wait before being able to interact with your webpage. The actual load time is how long it takes before the entire page has finished loading. So if you have a complex page which can take a while to load you need to focus on improving the perceived load time so your visitor feels like the page has finished loading even when it hasn’t.
High-priority elements are key
The key to lowering your perceived load time is understanding the priority of you webpage’s elements. When it comes to perceived load time the priority is determined by two factors: 1) how high on the page the element is (everything above the fold is high-priority) and 2) the page’s core feature e.g. the video on a youtube page. All other elements are low priority and can load slower without hurting the visitor’s experience.
Your typical high-priority elements are the main navigation links, text and graphic elements above the fold, since this is the bare minimum a visitor need in order to interact with your page.
Example: Amazon.com
Going back to the amazon.com example, try taking a look at one of their product pages: zero heavy graphics or animation in the main navigation and generally just simple text and images above the fold.
Slow-loading javascript-based features are placed in the lower half of the product page: “Tag This Product”, “Buy This Product and Related Accessories”, “Customers Who Bought This Item Also Bought”, “Customer Discussions” and “Continue shopping: Customers Who Bought Items in Your Recent History Also Bought”.
This is a good example of how to improve the perceived load time while still having lots of graphics and complex functionality on your site. Is the perceived load time of your website optimized? Let us know if (and even better how) by posting a comment (1 so far).
To finish off the “Designing a new Website” series, we’ve put together a video for you where we walk through this site, explaining our thoughts and principles behind some of its features.
In this video we talk about some of the concepts behind this site and how we used the methodologies described in our series to build it.
Finally, we start talking about the importance of proximity and the importance of getting the distance between related and unrelated elements just right.
Do you have any tips and tricks on how to design something from scratch without any data to guide your design decisions? Then please tell us in a comment.
