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.
…. For each page, please define the conversion for that page…..
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:
Basically visual hierarchy through uniform headline formatting
Clear title and introduction with uniform teaser image and text.
Categorized sections (anchor links) if there are at least 3 sections.
Internal links (teasers to the subpages). These should be deliberately placed high up (i.e. above optional additional content). The images will be repeated at the top of the respective subpages.
This is followed by optional content, which is shown without an collapsible if it is little, and compressed in an collapsible if it is a lot.
The website ends with fixed modules consisting of Competencies and Our Stories as well as the appropriate software and/or product line-up
Option (recommend): Conversion
There are various options (coudbe combined under one headlien, if there are more than one)WP Downlaod
Click on Video
Specific Contact form
Conversion goal:
Redirect to a subpage within the category or directly to a product
Template:
Recommendations for subpages
Subpages should have a uniform structure, regardless of the amount of content available. Recommendation based on best practices:
Basically visual hierarchy through uniform headline formatting
Intro 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
Categorized sections (anchor links) if there are at least 3 sections
Further content showing 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 technical specifications (depending on the target group) technical details, certifications or standards should be clearly visible and easily accessible.
Optional quotes or logos from existing customers to build trust.
Optional CTA section for generating leads
Optional internal links (teaser elements to the other subpages of the solution subtopic, if available)
The website ends with fixed modules consisting of Competencies and Our stories as well as the appropriate software and/or product line-up
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.
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.
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.
These measures, based on best practices, lead to a higher overall conversion rate.