A couple of idea gathered from various readings about Web design, in brief.
- Usability is more important than visual design.
- Quality and credibility are essential.
- Simplicity: KIS principle.
- Consistency: yes, con-si-sten-cy!!!
- 80/20 rule (Pareto principle): 80% of result comes from 20% of the users. Identify these 20% and optimise the site for them.
- Stick on conventions: reduce the learning curve by building on existing user’s knowledge.
- Innovate only when you know you have a better idea.
- Baby-Duck-syndrome: users tend to stick with the first design they learn.
- Visible language: organise - economise (simplicity + clarity + distinctiveness + emphasis).
- Law of proximity: group elements spatially for a better perception of their relationship.
- Split large pages: web pages are not books. Split large content into several pages and make navigation between them obvious, simple and handy.
- Feature exposure: 1-2-3-done step, large buttons with visual effects = modern web design, … but modern web designs are also criticised for that!
- Adjust the layout for different sizes (think smartphone -> tablet -> PC)
- Fonts: limit their number. Max three fonts in max three point sizes.
- Page width: max 18 words/50-80 characters per lines. Constrain max page width to match it.
- White space: reduce cognitive load, help users to scan the page effectively with large white spaces.
- Images: pictures are eye-catching, use them wisely to convey the message and/or focus attention.
- Icons should be used where they can easily be recognised (e.g., RSS-feed, Home, Search button, …). Fonts Awesome or equivalent are very useful here.
- Rapid information: the first page must be quickly informative about the site content and about recent changes. Here is an example of a site pushing this concept very (too?) far.
- Inverted pyramid: place summary and major points or conclusions at the top of an article.
- Go directly to the point, e.g., “Free service, sign up here”. Even better if “Free” stands out. Use short and concise phrases.
- Effective writing: do not write web pages like textbooks. Avoid promotional writing, avoid long paragraphs without images, or words in bold (arghh! But I like this), italic or with links.
- Videos. Use (and abuse) of very short video presentations as complimentary material, but only to convey the message (no funny cats videos, just to amuse -and distract- your readers!). Think also at animated gifs.
- Scan-click-behaviour: users don’t read but scan pages and click in the first link that looks more or less to what they are looking for. Keep this in mind 110% of the time when designing/writing a web page.
- Banner-blindness: users are used to advertisements and thus, tend to ignore large and colourful banners that look like advertisements.
- Focus attention: use eye-catching elements (pictures, bold text, …) wisely to gently direct the reader. Avoid flashing elements or animations that catch too much attention and are distracting, on the contrary.
- Immediate intuition. Any product that needs a manual to work is broken, this is certainly the case for web sites: web page should be obvious and self-explanatory.
- Features exposition: let the user see clearly what functions are available.
- Give control: users want to have control all the time.
- Impatience: web users are impatient and want instant return.
- 2-second-rule. Regarding reactivity, avoid anything that would take more than two seconds to load.
Test your design
- Test early, test often TETO-principle
- Test is an iterative process: change - test - change - test, etc.
- Test with naive/new users (and don’t trust your own feeling: you, as the designer, are not a naive/new user)
- Copyright: think about license for your site, your data, your images. Don’t enfringe others rights. Give due credits, in particular for pictures you use.
- Printing style for HTML pages: look how your page look like when printed, if it is pertinent, and design special CSS code for printed material.
- Inspiration: scan web sites with a critical eye. Get inspired by good ideas.
- Images and binary resource should be kept outside version control repositories as much as possible, but it complexifies the whole system.
- URL shortener: good for short-term use, but to be prohibited for web sites, unless you have full control on them, including the URL they point to, in order to adapt them (e.g., Rebrandly).
- Static pages: you can go very far with static pages generated with Jekyll or Hugo, and you get also full reproducible production including data analysis using Bookdown or Blogdown.