User Interface


We want to ensure our customers have a consistent experience when interacting with our products across all digital platforms. To facilitate better understanding for our customers we have created guidelines that follow industry standard best practices.


Accessibility

In General

For the smart.com rollout in 2022, all websites, tools and technologies are design to follow WCAG 2.1 Level A regulations.By providing an accessible website, smart ensures that all users, including people with disabilities, have a good user experience and can easily access information. This should always be considered in the design.  The following links and recommendations are intended to provide guidance. Web accessibility includes all disabilities that affect access to the web, including:

  • auditory
  • cognitive
  • neurological
  • physical
  • speech
  • visual
  • age-related impairments

Testing Tools

The following tools can help with the design and programming of accessible content:

  • NVDA Screen Reader Software
  • NVDA Focus tool
  • Structured Contents Bookmarklet
  • Web Developer Toolbar
  • WAVE Chrome Extension
  • Color Contrast Analyser (CCA)
  • headingsMap (Chrome)
  • headingsMap (Firefox)
  • WCAG Contrast checker (Chrome)
  • WCAG Contrast checker (Firefox)

Grid & Spacing

Our grid significantly determines the design of our digital touchpoints. Our grid must be strictly adhered to, as the spacing is defined via the grid. 


Breakpoints and sizes

There is a matching grid for every viewport. Our grid is based on rem values (1rem = 4px) and is divided into seven breakpoints.


1rem = 4pxXSSMLXLXXLOversize
 <576px≥576px ≥768px ≥992px ≥1200px≥1440px≥1680px
Container332px 488px720px920px1180px1320px1552px
Columns441212121212
Gutter3rem6rem3rem4rem5rem6rem8rem
Margin5,25rem11rem6rem9rem11,5rem15rem16rem

Examples mobile and desktop grid

To understand our grid, you will find two examples (one for desktop and one for mobile). 


Buttons

Buttons are graphical control elements that provide users a triggered event. They must contain a clear actionable text and additionally may contain icons. Buttons are more visually dominant than text links. They either guide user through the content as a visual highlight and/or act as a “call to action“.


Primary Buttons

Primary buttons are used when a direct purchase impulse should be triggered with a direct reference to the car. The version with icons is used when an item is added to the shopping basket or a purchase is completed.

Primary buttons always use the primary black or white color, always fully colored - considering the requirements for sufficient contrast. 

Secondary Buttons

Secondary buttons are used when no direct purchase impulse is desired. These buttons lead through the digital application and mark normal command and control elements.

Secondary buttons only use black or white, only as an outline  - considering the requirements for sufficient contrast. 


Buttons – Structure

Buttons on image backgrounds

Primary Buttons black

Primary Buttons white

Secondary Button black

Secondary Button white