UX Clinic

UX Clinic lander page. Contents in this section cover topics such as principles of good UX, template & module philosophy, and example pages. Sub-page structure for the section has not been created yet as the content needs to be planned in more detail first.

The types and amount of content in a page intro depend on your audience and the purpose of the page, but it should display clear and understandable value so that users are able to identify the purpose of the page. 

  • There should only be one H1 per page.
  • The intro should give users a clear understanding why they should explore further on the page.
  • Product page intros should include a value proposition, i.e. a promise of value to be delivered.
  • Set users on the right path so that when a user lands on a page, the page should ask them to complete a task (e.g. purchase something or subscribe to something) or continue further via a forward path, which should relate to the user’s task and your business goal.
  • Use visual hierarchy to display information hierarchy. The biggest elements on a page get the most attention. Elements on the top of a page get the most attention. What do you want users to see and take action on? Place it first. If actions are optional amongst each other, make them of the same size.
  • Avoid visual clutter to reduce cognitive load on users: redundant links and irrelevant images slow users down. (Note that meaningful links and images are valuable design elements; it is only when overused that these backfire and actually impair usability.)
  • Build on existing mental models: People already have mental models about how websites work, based on their past experiences visiting other sites. When you use labels and layouts that they've encountered on other websites, you reduce the amount of learning they need to do on your site.

Images

  • Place images in such a manner that the user has had time to read enough text-based information first before you ask them to engage with a visual. Eye-tracking studies have found that people prefer to read headlines first before engaging with any imagery.
  • Use value-adding descriptive images since the right images can reinforce benefit statements: visuals of what a product or service can do makes them more desirable and the benefits seem more tangible.
  • Users should be able to tell what the image is about regardless of the device or browser they’re using. The image should be used in a way that the user is able to find value from it. This applies also to video thumbnails.
  • Use only images with enough quality - no pixelated imagery should end up online
  • Avoid ‘decorative’ imagery as it is often completely ignored according to Nielsen Norman Group eye-tracking studies. This means that images with no value or purpose likely decreases sale and lead generation conversion of your business unit(s).

Video

  • Think about video placement with regard to the user journey on the page. For example, place introductory video above the fold on product pages to encourage further engagement into details.
  • When using video to increase sales or sales lead conversion, the shorter the video, the better for conversion. The video should be shorter than the time it takes to reads half of the page content.
  • Most viewers will not watch the video to the end. On average a 2 minute video gets watched half way, so you should plan the key part of the video’s message to be clear within the first minute if you’re insisting a video last longer than that.
  • Research your customers and what kind of language they use.
  • Use your brand’s tone of voice to avoid confusion and conflict. Your tone of voice shows who you are and how you deal with your clients.
  • CTAs should be read and understood in five seconds or less. If it’s not clear, it should be clarified.

The thinking behind our design system is to grant you the freedom and responsibility to choose the modules that work for your content and goals.  

There are 2 main page templates: landers and content pages.

Landers are section or sub-section landing pages that guide users to relevant content pages within the site. 

Content pages are for sharing information and engaging users to complete tasks. These templates are the following:

Article: Use for time-sensitive content like news or press releases.
Basic page: Use for static content, such as an ‘About us’ page.
Blog: Use for a blog post.
Campaign: Use for campaign landing pages.
Product: Use for pages about a product, solution or service.

Apart from a few exceptions on landers, all modules can be used on all page templates.

Pages should always begin with a Page intro module but otherwise modules can be chosen depending on the content structure and purpose of the page.

Modules have been divided into two main types: content blocks for unique on-page content and lift-ups for visual navigation.