Contents
| Table of Contents | ||
|---|---|---|
|
Why best practice?
The following recommendations are best practice 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 colors and fonts as well as the behavior 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 | ||||||
|---|---|---|---|---|---|---|
| ||||||
Before you start creating any web page, please ensure to define the conversion for each page. For overview pages this may be pure information, for others you can specify it by page. Possible conversions are
Ideally this conversion should be tracked in Matomo. |
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
The templates have been created for central web pages, but the basic ideas can be taken over for local pages as well. For Landing pages, however, not all recommendations may apply, but please have a look at the 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:
In the web page, you will choose Main teaser - second tier and add an appropriate foreground image to the grey background.
In the Content block, start with the Catchphrase teaser.
Optional H2 headline, followed by a Text/Image/Link module. Image in one-third.
Optional Anchor link list if there are at least 3 sections (defined by H2s). to better structure a long overview page.
H2 headline followed by Teasers to the subpages.
Take care to repeat the images the top of the respective subpages!This is followed by optional content (with total freedom of design).
If there is a lot, please don’t forget to add an Anchor link list (see no. 2.). Product line-up which is created using pre-defined Product (category) teasers.
It can be positioned at the end of the optional content or in between.
You can have one line-up or separate Hardware and Software line-ups, depending on the number of Products.
Take care to focus on the core product categories.
The website ends with fixed modules consisting of Competencies and Our Stories as defined by FA Global website guidelines.
Template:
Recommendations for subpages
Subpages should have a uniform structure, regardless of the amount of content available. For Subpages you normally define the conversions.
Recommendation based on best practices:
In the web page, you will choose Main teaser - third tier.
In the Content Block, start with an H2 headline.
Introduction (Image in one-third plus text) that presents the problem and gets to the heart of the solution. The image should be the same .
Use the Test/Image/Link module (with Image inone-third). Take the same image as the teaser image on the overview page.Optional anchor links if there are at least 3 sections (defined by H2s).
H2 healdine is mandatory if optional content follows.
Optional further content showing text, images, diagrams, infographics or videos to illustrate the solution its benefits.
See
* 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 Do's and Don’ts)
* Images should not only serve as a decorative element, but also underpin what is described.
* Use Graphics to visualise your text
* Optional quotes or logos from existing customers to build trust.
Although it is marked “optional” in the template, this is the main part to add your specific conversion(s) such as
Contact form with specific questions to generate specific leads by topic
Click on a video
Download a White paper etc.
Others…
Product line-up
Take care to focus on the core product categories for the dedicated subpage.
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)
Conversion goal:
Lead generation redirect to a product or a specific form (e.g.
Wireframe
More dos and don'ts
Please observe the different use and purpose 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 is 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 preceeded 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 /or 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 structure 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. |