The right configuration

Structure, structure, structure – running consistently like a common thread through your website, it’s essential for an optimal configuration. You can find helpful tips for a good website structure here.

© Fotolia/NicoElNino

The "Mobile First" concept

In the "Mobile First” concept the usual mode of operation in web design is turned around and goes a bit further, however. Here, the usual method of operation in web design is simply reversed and you work from the smallest layout version to the largest. The concept takes account of the following points:

Less is more – not only for small screens

As there is little room available on a small smartphone screen, you should concentrate on what is essential in the design and consider what website elements are really important for the user. Ideally, this approach results in a transparent structure that’s easy to use, which can then also easily be adopted straightaway for larger screens.

For why shouldn’t a website visitor get a similar minimised piece of information, concentrated on the essentials. Just because there is more room on a large desktop for the design it doesn’t mean that in the end this has to be filled in to the last pixel with distracting information.

The "Mobile First" concept therefore suggests turning the reputed flaw (e.g. the lack of room on a small screen) into an advantage, and by only having essential information and elements, finding a user-friendly, transparent and visually attractive minimised structure for all screen sizes.

 

Homepage

The welcome page of a website – the "homepage" – is the entrance gate for 90 per cent of users. Most users therefore access contents via this page. It’s therefore the most important page in your whole online communication and always acts as the central point of orientation on the website.

From the user’s point of view the homepage must answer the following questions:

  • Can I find the information here that I’m looking for? If yes, where?
  • Who is the sender? Is the information professional/credible/authentic?
  • Is there new information here that I still don’t know?
  • Does the homepage show me a range of what AHK has to offer?

Web usability is the keyword, as the visitor only lingers on user-friendly websites and clicks through the contents. Within a few seconds the user takes the decision whether to leave the website or not. Therefore, text and image elements are taken as indications whether a website "fits" and promises to be of use. In this respect, the total impression consisting of menu terms, headings, introtexts, images, possibly even illustrations and graphics, must enable the visitor to quickly register what contents the page conceals.

A small self-test helps you to assess that: cover up your logo on the screen with one hand and then try to estimate, using the other elements, whether a user could guess the purpose and content of your website.

 

Distributor page (2nd level)

The 2nd level gives an initial outline of an area limited to a topic. The most important function of these so-called distributor pages is the initial information using striking images and short introtexts that are represented by the mouseover effect. The effect helps user-friendliness and is gaining approval with more and more users.

Distributor pages are, for example, an outline of the topic of services or publications.

 

Rules and trends for a user-friendly configuration

The main elements of a user-friendly website are design, navigation and content. They influence whether a user achieves his objective. Here are a few important rules:

Content & Design

  • Each page should have a distinct title.
  • An introtext enables the visitor to quickly access the contents of the respective page
  • Use informative subheadings in longer texts. Many internet users just browse a website and look at the headings or links to find relevant contents.
  • When using coloured background boxes a suitable contrast between text, foreground and background must be considered.
  • Images and graphics should be suitable for the topic of the respective website.

Navigation and Links

  • The navigation should be simple and comprehensible.
  • The main ideas of what your AHK offers should be in the in main navigation. Please be aware that the navigation bar only has room for five (if the words are short, six) terms. Find concise and meaningful catchwords to present your offer of information.
  • At all times, a link path (English: breadcrumb navigation) at the top left-hand edge on the subpages informs the visitor what area of the website he is in and makes the navigation easier for him. The general rule is: the website should not exceed a maximum depth of four levels.
  • Summarise all information about your AHK in a particular area, ideally in the metanavigation, for example, in "About us" or "The AHK". In this area, visitors expect a description of the organisation, the network, contact persons with contact information, job offers, press information, etc.
  • Work with sub-menus, which are only revealed if the desired main area is accessed. Links should be clearly recognisable. Internet users immediately recognise underlined words as a link.
  • Use a descriptive phrase, consisting of a term or a few words, as a link.
  • Regularly test whether all links are working.
  • Indicate links to external pages as well as download links.
  • Establish in which cases a new browser window is opened.
  • Links, which lead to a website within your website, should always be opened in the same browser window.
  • Links, which lead away from your website, should always be opened in a new browser window.

Dialogue options

  • It should be possible to find your contact information (telephone number, email address, address) in the footer area on the website.
  • Create a contact page in the metanavigation and don’t hide contact information in the site notice.
  • Put the relevant AHK contact persons on the respective subpages. Provided that the contact partners are not responsible for different locations, only one contact person should be listed and that should be the one who is also to accept enquiries from the website.
  • Publish your working hours so that interested parties do not have to speak to your answer phone.
  • Encourage visitors to make an enquiry via a contact form by emphasising the benefit and the non-binding nature to the interested party.
  • If interested parties or customers come to you personally, offer them a location map and directions.
  • The fewer fields you use in online forms, the more likely are interested parties to complete the form.
  • Make sure that the first input field is easy to find. The visitor should immediately be able to start filling in the form.
  • Make sure that users can fill in a form in the correct and logical order using the tab key.

Trend I: Scroll instead of click

Clicking is out, scrolling is in – this can easily be seen not least in Onepagers and the more extensive Responsive Designs. Scrolling is more intuitive, prevents a lot of clicking around on different subpages and also saves loading times. Even when the user is visiting the homepage of a website he should find all relevant information at a glance. Anyone who wants to delve deeper into the material, should in turn have the option to learn more at a click.

Trend II: Storytelling

«Storytelling» is a development that likewise is connected to the development of a Onepager – the user scrolls through the homepage and reads an exciting story about the organisation and its services. The laborious trawling of information on many different subpages is replaced by a story in a nutshell. This storytelling is supported by the trend for scrolling (scrollytelling), so that the Internet user is taken into a pleasant reading flow.