Contents
| Table of Contents | ||
|---|---|---|
|
Why best practice?
The following recommendations are best pratice from a UI/UX perspective, i.e. the focus is on user guidance. In part this includes SEO.
UI refers to the design of the user interface (the website), its visual elements such as colours and fonts as well as the behaviour of the elements to create an appealing and, above all, intuitive user interface.
UX refers to the entire user experience that a user has when interacting with a website. The focus is on a seamless and effective user experience by creating wireframes and prototypes. UX design is a repetitive process to improve usability.
| Panel | ||||||
|---|---|---|---|---|---|---|
| ||||||
…. For each page, please define the conversion for that page….. |
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
The templates have been created for central web pages, but the basic ideas should be taken over for local pages as well. For Landing pages, however, not all recommendations may apply, but the Dos and Don’ts. |
Recommendations for overview pages
Overview pages should have a uniform structure, regardless of the number of linked subpages and the availability of content. Recommendation based on best practices:
Start with the catchphrase teaser.
Optional image in one-third plus text.
Optional anchor links if there are at least 3 sections (defined by H2s).
Internal links (teasers to the subpages). The images will be repeated at the top of the respective subpages.
This is followed by optional content (with total freedom of design).
Product line-up (Hardware and software possible).
The website ends with fixed modules consisting of Competencies and Our Stories.
| Info |
|---|
|
Template:
Recommendations for subpages
Subpages should have a uniform structure, regardless of the amount of content available. Recommendation based on best practices:
Start with an H2.
Intro (Image in one-third plus text) that presents the problem and gets to the heart of the solution. The image should be the same as the teaser image on the overview page
Optional anchor links if there are at least 3 sections (defined by H2s).
H2 is mandatory if optional content follows.
Optional further content showing text, images, diagrams, infographics or videos to illustrate the solution its benefits.
It is important to ensure that the images do not contain any text, as this cannot be translated for other languages via CMS and cannot be read by Google. See also More Dos adn Don’ts
Images should not only serve as a decorative element, but also underpin what is described.
Optional quotes or logos from existing customers to build trust.
Product line-up (Hardware and software possible).
Followed by with fixed modules consisting of Competencies and Our Stories.
Optional CTA section for generating leads (If there is more than one download, use H3s)
| Info |
|---|
Conversion goal: Lead generation redirect to a product or a specific form (e.g. whitpaper download). |
Wireframe
More dos and don`ts
Please observe the different use and purpse of H1 and H2 headlines
The H1 headlines created in the web page and displayed in the main teaser (either overview or subpage) describes the topic in a generic term (no formulated sentence). The URL corresponds to the H1.
For SEO reasons, H2 headlines (created in a content block), should be formulated and describe solutions. They should be more than one to two words.
The first H2 on a web page is part of of the teaser and as such most relevant for the user.
Don`t: The H2 does not describe the solution
Do: The H2 describes an advantage and fulfills SEO criteria (keywords)
Intro texts are always written out in full sentences. Lists/enumerations are reserved for subordinate text sections.
When uploading the image, the image title also the alt tag.
See Care for SEO , and here esp. no. 4 at the end.Links within a text are displayed to the user as blue text. They must never link to an external website.
If the link is to appear more prominently, it is placed at the end of the paragraph as a link preceded by a red arrow icon. External links are given a corresponding icon at the end as defined by guideline. External links or links outside EMEA Factory Automation must always open in a new window.
If possible, texts should not run across the entire width of the website, but should be limited in width by using images/diagrams/videos. This makes it easier to read.
Don`t: The copy runs across the entire width
Do: The copy does not run across the entire width thanks to the two columns
Only the page structures defined in the templates are available in order to ensure a uniform image and consistent quality across all Solutions pages. Within the content elements, however, the editor can freely determine the scope and text formatting.
Please also observe Care for SEO.
Advantages of the recommendations
Increased attention: A clear header or intro image and concise headlines immediately attract the attention of visitors.
Quick information transfer: A short, concise description enables visitors to immediately understand the benefits of the solution.
Increased clarity: Consistent page structures ensure a uniform image and consistent quality across all solutions pages.
Optional content is “tidied up”: A detailed feature list and technical specifications ensure a clear presentation of information by incorporating them into collapsibles.
Encouraging interaction: Well-placed call-to-action (CTA) buttons encourage visitors to make contact or take further action.
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
These measures, based on best practices, lead to a higher overall conversion rate. |