User Experience (UX)

Essential basics for building a website
Great image portraying the word "Love" on a beach as the common denominator for great user experience

Connect your users’ expectations and desires with your business goals

Wouldn’t it be great if all your visitors would love your website and long to come back? Unfortunately, that’s not a reality. We can however try to make the stay as pleasant as possible.

Making the visit pleasant means the website should look nice (or appropriate) and interaction with it should be intuitive and as enjoyable as possible.
There are a lot of different layouts and design options, I’m not going to bother trying to dictate you how your website should look and feel.

Instead I’m going to give you some guidelines, do’s and don’ts that will help the User Experience (UX) of your website.

Design tips

Fonts

Use up to 2 different fonts (not including your logo). E.g. one for H1 and H2’s and another for all other content. Too many fonts will distract users... unless your website hosts web fonts.

Colors

Make use of the color theory and use well matching colors with tools like Adobe Color.
Don’t use too many different colors for elements (multi colored images are, usually, fine of course). That will normally distract your visitors from what they came to do and drive them away.

STOP!!!

Always give users the option to stop any music, movies, animated GIFs (use this excellent script to give your users control) or anything animated on repeat.
Don’t use moving elements that won’t stop. Let it stop within 3 seconds after being visible. And ,please, don’t play music, unless you have a dedicated music or movie site.

Position: Rule of Thirds

Keep the Rule of Thirds in mind for your layout.

Development tips

make your website responsive

Worldwide internet usage on mobile devices is greater than desktop and laptop together. Also, user experience research found that users tend to find websites less trustworthy when they are not mobile-friendly. From an user’s point of view: “If the company doesn’t care about its users, then the product is probably not user friendly either”.

Mobile first

Adopt a mobile first approach. It will save you an CSS development headache later on.

Proper HTML

Use proper html tags for markup: don’t ever use <strong> for headers and group your content as needed.

HTML5

Use HTML5: it’s nearly fully supported by all major browsers and helps make your website easier to create and makes it more accessible for screen readers.

Test, test, test

Always test your design and website. Use people from outside your company. Perhaps just go to a coffee shop and ask random people (also great way to meet interesting people). Give them a story (e.g. that they are looking for product-x or solution-y). Also test starting from the main search engine your users would use (Google?). This will give you some extra insights into how your website’s SEO is doing and how well your site is presented by the search engine . . . . . . . Or hire a professional user lab.

Accessibility (WCAG 2.0)

Around 4% of the world’s population has an visual impairment (low or no vision) according to the World Health Organization and 8% of all men and 0.5% of all women suffer from color blindness.

image of a color blindness test

Contrast

Use good contrast in colors to make text and meaningful images readable.

Color

Consider color blindness and make your choices in color accordingly.

Keyboard and Assistive technology

Keep elements on your website accessible by keyboard and Assistive technology.
Don’t use the Title attribute for links and NEVER use “Read more...” for a link (or similar), but rather use the tricks on this website to hide content from sighted visitors, but not from visitors using screenreaders and such. As people using screen readers will otherwise have no clue as to what information your links will lead to.

Try this awesome checklist to keep your website in check.

Content tips

Content is the most important ingredient on your website.

Write with the reader in mind: “What will the reader think when he/she reads this?” Don’t be “we”‑centered, write what the reader will get out of it: use the “What’s in it for me”-principle (from the reader’s perspective).