web and mobile - skodainf.skoda.ee/brandbook/brand/ci/skoda_ci-cd-guideline_h.pdf · mented and...

H000

DIGITAL APPLICATIONS

HH 01

Version January 2019

H100

This “Digital Cookbook” is a set of guidelines for designers which has to be followed in ŠKODA digital product designs as a single, common digital language.

It will help you reproduce the ŠKODA identity with care, precision and consistency and create a digital product that fits seamlessly into ŠKODA’s digital world.

To maintain a high-quality and consistent style for ŠKODA digital projects, the digital cookbook is mandatory and has to be used in every digital project.

If you wish to opt for an alternative, you will need to discuss this with SKODA’s headquarters.

Introduction H 02

H200

DESIGN LANGUAGE ŠKODA digital designs use the

“Kaleidoscope“ layout elements.

H 03

H210

“Kaleidoscope” Layout

Within digital product design, the “Kaleido-scope” design approach is represented by facet elements, faceted backgrounds and angular shapes.

H 04

H220

Due to the requirements of digital products such as apps or mobile apps in terms of space and readability, the landscape brand mark is the preferred application of the ŠKODA brand mark.

The standard brand mark is used only on splash screens, e.g. on mobile devices.

For further information about the use of the ŠKODA brand mark, proportions, clear space and brand mark documents:

Brand ElementsBrand Mark

Preferred Application: Landscape Brand Mark

Additional Applications

Negative landscape brand mark

Positive and negative standard brand mark

H 05

H222

In digital communication, such as online and onsite display advertising, the “Kaleidoscope” is applied as transparent facet elements overlaying images in the upper right-hand corner, replacing the Arrow Flag used in print communication. The facet must not intersect the image of the car.

For further information about the facet elements:

Facet Elements

Brand Elements

Laur

in &

Kle

men

t42

LAURIN &KLEMENT

The Epitome of Style.

Laur

in &

Kle

men

t42

LAURIN &KLEMENT


Laur

in &

Kle

men

t42

LAURIN &KLEMENT


H 06

H223

In web and mobile applications, SKODA Next Bold is used for headlines and display text, whilst Light is used for paragraphs. The SKODA Next Regular can be used in specific cases, e. g. labels when a light font weight is not strong enough.

Capitals are used for model titles, for naviga-tion items and main headlines.

For further information about typography:

Typography

Brand Elements

SKODA Next Light

SKODA Next Regular

SKODA Next Bold

SKODA Next Black

H 07

H223a

Typography styles are used in different variations and sizes depending on purpose and device. Headlines and body type should remain in reasonable contrast to ensure clear distinction of text.

Headlines use Skoda Next Bold and their size varies from 18 pt to 60 pt depending on device and usage. A headline is always short and accurate, avoiding accumulation of huge amounts of large text.

Body type uses Skoda Next Light and its size varies from 12 pt to 18 pt depending on device and usage. The general rule of thumb suggests using 16 pt size for smaller devices and 18 pt for larger screens such as desktop monitors.

Smaller fonts should only be used for descrip-tive, unimportant text or in rare cases where the usage of optimal size is not possible or limited. Size should always be used to facilitate readability on a particular device. When cascading type size on the same device, hierarchy of importance must be assured.

TypographyType Scale

Brand Elements

H1 / SKODA Next Bold





Body / SKODA Next Light



H 08

H223b

The width of one column text should be limited to ensure a comfortable reading experience. Long lines without breaks are tiresome and compromise readability.

The line height in both headline and body type depends on the usage and device but it should always scale proportionally to the size of cascading type. Keeping the same constant (C) is recommended.

Example Line height = type size x CC = 1.5

TypographyType Proportions

Brand Elements

SKODA Next Bold

SKODA Next BoldLorem ipsum dolor sit amet, consect etuer adipiscing elit. Aene lorem ipsum dolor sit amet, consect etuer adipisef elit.

SKODA Next BoldLorem ipsum dolor sit amet, consect etuer adipiscing elit. Aene lorem ipsum dolor sit amet, consect etuer.

H 09

H224

All digital branding will rely on the ŠKODA primary colour scheme for main CTAs (call to actions) and environment colours. Secondary colours will be used for visual indicators in the interface (badges and notifications).

For further information about corporate colours and colour definition:

Colours

Brand Elements

ŠKODA Green Blue Colour Scheme

Primary Colours Secondary Colours

Black Yellow Colour Scheme

ŠKODA Chrome Grey Turquoise Colour Scheme

White Red Colour Scheme

H 10

H224a

For web backgrounds we use various shades of grey from the primary set.

A coloured background pattern which dynamically adapts to the colour of the displayed car is only used on car tiles or modules to highlight a certain model or specific car for promotional or personalisation purposes.

ColoursBackgrounds

Brand Elements

K2NG / M67 – Derivative Intro

H 11

H224b

C3PO Trimline Connect App Trimline

ColoursSample Background Applications

Brand Elements H 12

H225

Main icons only consist of bold outlines with pointed corners. Only additional elements used for differen tiation are full-surfaced or use thinner outlines to display details. The thickness of the bold outlines ensures that the information is communicated effectively in negative icons and in small applications.

Only colours from the primary colour set can be used. Contrast to background ensures readability.

If letters or numbers are used within an icon, SKODA Next Bold is used.

All standard outline icons can be supplemented with a symbol to help distinguish or define the icon. This qualifying symbol is placed as a solid overlay on the standard outline icon and separated from the icon by a white outline.

Never use complex shapes. The symbols should always be simple and clear.

General Usage

Icons

Icons with bold outlines and thinner outlines for details

Icons with bold outlines and additional solid symbols

Never use outlines for overlaid qualifying symbols or overlay a symbol without a separation outline

H 13

H225a

FUNCTIONAL ICONSFunctional icons are used within functional site organisms like navigation or tool elements. They have a light line weight, the size is 1.2 of the used font size. For touch devices the minimum size must ensure tapability. Lines should predominantly be straight and corners sharp. A balanced look is ensured by harmonious combination with rounded parts but the icons should retain a box-like and angular appearance. Line thickness (stroke/outline) is the same width throughout the icon. Icons should be minima- listic and functional throughout and should be free of superfluous or decorative features. Filled shapes are never combined with outline without separation using negative space.

ILLUSTRATIVE ICONSIllustrative icons are used to illustrate content and separate content. They have bold line weight and may be no smaller than four times larger than the font size used. The visual style of icons is more complex to add more depth and grab attention. The overall feeling of the icon should be more playful, also using decora-tive lines and rounded shapes. Shading is used sparingly – it must never be a dominant feature of the icon. Its colour is the same as the outline colour with 30% opacity. Line thickness (stroke/outline) should be the same throughout the icon.

Functional Icons and Illustrative Icons

Icons

Complex

Functional Icons

Illustrative IconsSimple

H 14

H229

In order to create more dynamism and under- line the content hierarchy, in the design of digital products, the “Kaleidoscope” approach is applied using a multi-layered system. The multi-layered UI is used in web and mobile applications and, to a lesser extent, on wearable devices.

The bottom layer is reserved for imagery. The middle layer masks the underlying layers with playful angles and faceted shapes. The top layer, which is also the closest layer to the user, is reserved for content and interactive elements.

Faceted backgrounds and angular shapes are applied to the middle and top layers to visually convey the inventiveness of the ŠKODA “Kaleidoscope” layout.

The multi-layered system can be comple-mented and enhanced by parallax animation when scrolling.

Layout PrinciplesMulti-Layered System

Web Tools Apps Wearables

H 15

H229a

In UI design, the “Kaleidoscope” principle is applied to the layout by faceted backgrounds. Background layouts can contain one or multiple facets depending on the content structure of the page. The background visually supports the page content without distorting it.

Colour schemes from the secondary colour palette can be used in faceted backgrounds to visually support the “dynamic engagement” design principle.

Multi-Layered SystemFacet Elements

Layout Principles

B2CSSO User Profile K2NG Home Page


H 16

H229b

Besides faceted backgrounds, angular shapes apply the Kaleidoscope principle to UI design molecules and organisms.

Designs become more dynamic and engaging, and visually reaffirm the sense of depth created by the multi-layered structure. Angular shapes are used in web and mobile applications, but not on wearable devices.

Multi-Layered SystemAngular Shapes

Layout Principles

K2NG Derivative Page


H 17

H229ba

Multi-Layered SystemSample Angular Shape Applications

Layout Principles

C3PO Extras Detail Connect App Dashboard Menu

H 18

H229c

Logical units that segregate content are arranged in tiles. The tiles float above the background or an intermediate layer and invite the user to take action and indicate a selection. Tiles are used for web and mobile applications but not on wearable devices.

Multi-Layered SystemTiles

Layout Principles


H 19

H229d

On pages which have a communicative approach such as presentation pages, landing pages or editorials, stronger visual impact and user engagement can be desirable.

Scrolling of elements at various speed (parallax scrolling) underpins the perception of dimen-sion and immersion. It invites the user to scroll, strengthens the content hierarchy and reflects the principle of “dynamic engagement”.

Parallax is used on home, family and model pages of HQ and importer or dealer pages, but never in tools or on mobile devices.

Multi-Layered SystemParallax

Layout Principles

Stage 1 Stage 2 Stage 3


K2NG

H 20

H230

ŠKODA digital web pages and applications must be compatible not only within the SKODA digital ecosystem, but also within the external digital ecosystem. This creates a seamless customer journey.

To enable this compatibility, web pages and applications use an industry-standard grid that is the up-to-date version of the 12-column Bootstrap Grid.

However, the grid can be slightly customised for specific uses. It is crucial therefore that the customised grid is tested with other ŠKODA web pages and applications and does not create distortions of the customer journey.

Layout PrinciplesGrid

H 21

H300

ATOMIC DESIGN SYSTEM

Updated images and sample applications in this chapter

H 22

H310

The atomic design methodology is an approach to create interface design systems in a more deliberate and hierarchical manner.It is a methodology composed of five distinct stages which use the metaphor of atomic elements.

ATOMSAtoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.

The UI elements are organised based on this metpahor. Each page also contains an index stating the availability of the element for the different use cases/viewports: all web pages like HQ, importer or dealer-web, portals, microsites, etc., tool pages like car configurator, stock cars, dealer locator, finance calculator, etc., native apps like ŠKODA Connect, etc., apps for wearables like smart watches.

MOLECULESMolecules are groups of atoms bonded together and are the smallest fundamental units of a compound.

ORGANISMSOrganisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.

TEMPLATESAt the template stage, we break our chemistry analogy to use a language that makes more sense to our clients and end users. Templates mostly consist of groups of organisms stitched together to form pages.

PAGESPages are specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see.

Atomic Design PrinciplesTerminology

H 23

H311

Atomic Design PrinciplesMethodology Example

PageAtoms

Molecules

Organism

H 24

H321

Atomic Design ElementsAtomsControl Elements

Control elements are atomic elements which serve as reference points for a user’s basic navigation on a page. They are used to close a display, come back to the previous view, navigate the different views within a carousel or scroll the items on a list.

Two visual treatments have been developed to make sure control elements are readable on both light and dark backgrounds.


H 25

H321a

Atomic Design ElementsAtomsSample Control Element Applications

K2NG Derivative Page C3PO Gallery

H 26

H322

Atomic Design ElementsMoleculesButtons

FEATURESButtons must be noticeable and self-explanatory, with a clear and limited amount of text. Their rounded corners balance the sharp-cornered DNA Crystal and differentiate the main actions from secondary options represented through text links and icons.

In order for the user to be able to detect the key points throughout the journey, the buttons are internally differentiated: the primary actions use the more eye-catching SKODA green, whereas the secondary actions display a more subtle outlined visual effect. The primary actions are also underlined by the use of a green shadow around their buttons.

Visual treatments for hover and disabled states, and for placement of buttons over dark backgrounds are also provided in the graph.

SIZINGIn the case of complex screens on mobile and tablet devices, as long as proper spacing is given to maintain usability, the height of the buttons can be slightly reduced from 45 px to 40 px.


Primary

Primary

Secondary

Secondary

Floating

Floating

H 27

H322a

Atomic Design ElementsMoleculesSpecific Buttons

In order to differentiate certain complementary actions from those structuring the user flow, a special treatment has been introduced for the so-called “specific buttons”. These buttons are characterised by the use of a different colour fill, a descriptive icon and a distinctive hover effect. They are generally proposed for supporting functions such as items' comparison, configura-tion loading, etc.

POSITIONINGIn accordance with the positioning of labels and description texts, buttons should generally be left-aligned. A right-alignment is also possible if the layout needs this and when it facilitates the interaction.


C3PO Trimline – snapshot view

H 28

H322b

Atomic Design ElementsMoleculesSample Button Applications

C3PO Wheels C3PO Safety & Driving Experience Connect App Service – Vehicle Health Report Connect Watch Autonomous Heater

H 29

H324

TEST DRIVEDEALER LOCATOR FINANCING OPTIONS

FINANCING OPTIONSTEST DRIVEDEALER LOCATOR

MORE INFOFINANCING OPTIONS RESET ALL GALLERY

GALLERYRESET ALLFINANCING OPTIONS MORE INFO

Urxova 166 / 90, Karlín 154 88, Praha 7 www.fschultz.com.cz [email protected]

Atomic Design ElementsMoleculesText Links

Text links can be used in combination with buttons, within text paragraphs or as stand- alone elements. In combination with buttons, they represent complementary options which support the main actions available to the user.

To better clarify their behaviour, they may be accompanied by icons (e.g. “i” icon for text links which open up a details overlay or an arrow for links bringing the user to a different step within the same journey).

A leading icon in combination with text can be used in menus or short linklist patterns to support better scanability.


Without Icon

With Icon

Without Icon

With Icon

H 30

H324a

Atomic Design ElementsMoleculesSample Text Link Applications

K2NG Dealer Page

H 31

H324b

Toggles can be used in web and mobile applications where a disctinct action or choice between two options is indicated.

They are designed with strong contrast and the illusion of depth as they represent a match between the physical and digital world.

Atomic Design ElementsMoleculesToggles


C3PO Priority Tools Connect App Service Settings

H 32

H325

Atomic Design ElementsMoleculesTooltips

Tooltips can be either informative or interactive. According to the touchpoint, they appear when hovering over or clicking on a selectable item or icon.

Informative tooltips contain data about a selectable item: when the item is selected, they remain active until another selection is performed.

Interactive tooltips are used to display second-ary actions grouped within an icon: they can contain links, checkboxes, buttons and other interactive elements. These tooltips can also present a second level when secondary actions need further selections to be performed.


H 33

H325a

Atomic Design ElementsMoleculesSample Tooltip Applications

C3PO Garage B2CSSO Login – Registration

H 34

H326

< Menu Items > Login

LoginMenu

Fixed

Fixed

Fixed

Fixed

Fixed

Fixed

Variable

Variable

Variable

Atomic Design ElementsOrganismsGlobal Navigation

The illustration shows how the header should behave across different screen sizes. The brand stage and right section stay fixed while the navigation scales to fit the screen size.

The global header has five sections, which can be customised by touchpoint. • ŠKODA logo• Application menu• Search• Tools’ menu• Account menu


Desktop

Tablet

Mobile

H 35

H327

< Menu Items > Login

GalleryWhy Fabia Engines Trim Levels Dimensions Prices & Downloads

Class of itʼs own

OCTAVIA

CO2 10 - 90 g/km 3.2 - 6.8 l/100 km

emisson of CO Average consumption

Practical solutions, plenty of

space and best value for

money in a fresh packaging.

Great versality

Build your Own Request a Test Drive

From £11,430 Price list1

Vehicle tools

Build & Price

Book a test drive

Download a catalog

Contact

MyŠKODA

Find a dealer

Offers & finance

Discover our offers

Receive an offer

Models Finance Services Your ŠKODA About us Find a dealerFind a dealerBuild & Price Tools

LoginMenu

Gallery Why Fabia Engines Trim Levels Dimensions Prices & Downloads

Class of itʼs own

OCTAVIA

CO2 10 - 90 g/km

3.2 - 6.8 l/100 km

emisson of CO Average consumption

Build your Own Request a Test Drive

Practical solutions, plenty of

space and best value for

money in a fresh packaging.

Great versality

From £11,430 Price list1

Vehicle tools

Build & Price

Book a test drive

Download a catalog

Offers & finance

Discover our offers

Receive an offer

Contact

MyŠKODA

Find a local dealer

Build & Price Find a dealerMenuModels ToolsModels

Finance

Services

Your ŠKODA

About us

Vehicle tools

Book a test drive

Download a catalog

Build & Price

Offers & finance

Discover our offers

Receive an offer

Contact

MyŠKODA

Find a local dealer

Search EN NL FR

Atomic Design ElementsOrganismsGlobal Navigation Dropdown

Unlike the header, which is fluid and adapts to the available viewport, the dropdown panel fits on the grid and stays centred on the page.

On tablet and mobile applications, the dropdown menu stacks into an accordion menu, which then collapses into a hamburger icon.

App and wearables UIs maintain the native behaviour and feel of an app, so the global header is not used there.


K2NG

H 36

H328

Atomic Design ElementsOrganismsNavigation Dropdowns

Dropdowns can be used as navigational elements or can be integrated into these elements. These dropdowns display a different visual effect from that used in contact or subscription forms, and can present different levels of complexity according to their function.

K2NG websites feature a series of dropdown navigation menus which contain titles, links, buttons and car thumbnails. The extras section in the car configurator features a simple dropdown menu to let the user choose the category to be explored.

C3PO Extras – scenic view


H 37

H329

Atomic Design ElementsOrganismsItem Selection

Items are selectable through different dynamics depending on whether the selection is exclusive or multiple.

For exclusive selections, the item is marked with a tick and the selected state for buttons is used. In this case, the selection is maintained unless another item is selected by the user. For non-exclusive selections, the user needs to click on an “add” button and the selected state of the button is displayed without any tick. Multiple selections can be performed at the same time. In order to deselect a specific item, the user needs to click again on the “remove” button.


C3PO Trimline – snapshot view

C3PO Extras – scenic view

H 38

H330

Atomic Design ElementsOrganismsTab Navigation

Tabs are used both as navigational elements for sibling views and anchor points within the same list of items. In this second case, they support certain UX dynamics such as swiping or scrolling, providing quick links to specific parts within a long list of elements.

Tabs can present a subtler visual effect with smaller navigational points and a thinner outline: this version is to be used when there are many tabs, when tabs are used as anchor points or when it better fits the general hierarchy of the page.


C3PO Wheels

C3PO Registration C3PO Engine

H 39

H330a

In viewports with limited screen real estate like apps or web views which require optimised space usage like maps, for example, drawers hold secondary functionalities or information available without interfering with the main actions on a specific screen.

When slided out they can show a KPI or action for this context or just a handle element. In apps or mobile viewports they are controlled either by tap or gesture.

Also menus in apps can use a drawer logic but stay hidden in inactive state.

Atomic Design ElementsOrganismsDrawers

Connect App Service – Parking Position

Connect App Trip Planner


K2NG Dealer Locator

H 40

H330b

Pop-ups overlay the content on full screen size and act as modals that require user action like confirmation or selection. Therefore they don’t contain a global closing button.

In web, tools and apps, the background colour contrasts with the layout of the use case from which they were invoked to indicate the breakout from the initial user flow.

Atomic Design ElementsOrganismsPop-Ups

Connect App Legal Note

Connect Watch Parking Timer

Connect App Speed Notifications


C3PO Upgrade full screen pop-up overlay

H 41

H333

Atomic Design ElementsOrganismsFull-Screen Overlay

Full-screen overlays are shared by both scenic and snapshot views in the car configurator.

Full-screen overlays are used for detail views branched out from a master view, which interrupt the main flow without redirecting it.

Detail views can be browsed by using the side arrows in order to prevent the user from going back and forth from the main visualisation. It is always possible for The user can always go back to the main visualisation by clicking on the back arrow.


K2NG M91 – Specification layer

H 42

H325a

Atomic Design ElementsOrganismsForms

To best balance the card-inspired display of the content sections, forms are presented by an outlined treatment including active, confirmation and error states.

The forms are dynamically conceived, so that the suggestion provided in the inactive state becomes a label as the user types in their content.

The error state also includes a short explanatory text underneath the main line.

Default Input field

Active Input field

Validation error Input field

Validation correct Input field

Default Dropdown

Active Dropdown

Selected Dropdown

Disable Input field

Title *

Title *

Miss

Ms.

Mr.

Mrs.

Dr.

Dr.

Title *

Name *

Michal

Name *

Name *

This field must be filled

Surname *

M&T4tNGp0

Great

Password *


H 43

H325b

Atomic Design ElementsOrganismsSample Form Applications

We Connect Personal Information form C3PO Garage – Edit

H 44

H325c

Checkboxes and radio buttons can be laid out using two different style patterns to ensure a clear visual hierarchy. In layouts where the form elements have high priority, a visual treatment with filled elements in dark on light background or white on dark background is used.

For layouts where the priority of checkboxes or radio buttons equals other selection elements, an outlined treatment is available.

Atomic Design ElementsOrganismsDropdowns, Checkboxes, Radio Buttons in Forms

Connect App Notifications – Main filter

Connect App Settings

C3PO Priority Tools


K2NG Stock Cars

H 45

H325d

Date and time pickers on app use native components to provide best UX.

Atomic Design ElementsOrganismsTime and Date Pickers


Connect App Service – Speed notifications

H 46

H331

Atomic Design ElementsOrganismsSlider

Sliders are used in modules where a list of items within a category is to be browsed without distinct need of pagination. Usually sliders are appropriate to navigate through a larger list of elements with stronger browsing focus, like in video showreels.

In the car configurator example, they help the user navigate a list of items when manually swiping is not possible (e.g. desktop touch-points for scenic view). By doing so, they prove to be an alternative to the control arrows which are used in carousels.

Sliders present a light/dark version to be used according to the background they are placed on and derive their rounded corners from ŠKODA buttons.


Car Configurator Garage Car Configurator Model selector

H 47

H332

Atomic Design ElementsOrganismsCarousel

Carousels are appropriate when navigating by serial focussing on a distinct content module, such as when a data tile with engine data or a service tile in a connected app is required. It’s a flip-through pattern that clearly presents the content of one specific tile and has controls and indicators which help to understand that there is more content to see. A pagination helps to navigate and an optional prio one CTA invites the user to take action.

On mobile devices, a carousel heps to prevent the user from scrolling long pages and focuses on frequently used content like a service tile in the ŠKODA connect app.

On wearables the page-based navigation uses paginated carousel logic to drill deeper down into a specific use case such as vehicle statistics in the ŠKODA connect app for watches.

Connect Watch Vehicle Status Connect App Vehicle Page


K2NG M74 – Technology slideshow

H 48

H340

Accordions help to present larger amounts of content in a structured way without distributing it over several pages. The sections can contain paragraphs of text, images and CTAs.

The controls always show the action (fold in/out), not the status (folded in/out).

Atomic Design ElementsOrganismsAccordions


C3PO Extras – Snapshot detail

H 49

H341

Filters are organised in tiles or panels which can be placed in a marginal column, float over a full-screen content layer (i.e. map) or on a full-screen overlay, i.e. on mobile devices. If the filter tile/panel floats over other content, it can be hidden by using a drawer logic.

Atomic Design ElementsOrganismsFilter

K2NG Stock Cars


K2NG Dealer Locator

H 50

H350

Web pages are HQ, importers or dealer pages, portals, microsites or landing pages. They are always responsive and contain brand signature elements like Kaleidoscope patterns or angular shapes.

They always contain the ŠKODA global navigation header and ŠKODA footer. A reduced footer can be used for landing pages.

Atomic Design ElementsPagesWeb


K2NG Home Page

H 51

H351

Atomic Design ElementsPagesSample Web Applications

K2NG Derivative Page K2NG Derivative Page

H 52

H352

Tools are car configurator, stock cars, dealer locator or finance calculator. They often present more detailed information and offer various possible actions. To provide best usability, innovative concepts might be used such as the double view on the car configurator which allows the user to switch between a more visually oriented and a data-oriented view.

Tools pages are always responsive and contain the ŠKODA global navigation header and brand signature elements which don’t jeopardise usability like Kaleidoscope background patterns or angular shapes.

Atomic Design ElementsPagesTools


C3PO Wheels – Scenic view

H 53

H353

Atomic Design ElementsPagesSample Tool Applications

C3PO Colour – Scenic view and snapshot view C3PO Extras – Scenic view and snapshot view

H 54

H354

ŠKODA app designs are “platform-agnostic” to ensure unique brand experience, but follow common mobile UX principles. The look and feel reflect the requirements as well as the possibilities of mobile designs.

They contain core elements of the design language like multilayer UI, tiles and Kaleidoscope patterns. System components like controls have ŠKODA UI colour scheming.

Atomic Design ElementsPagesApps


App Connect Garage App Connect Service – Doors and Lights

H 55

H355

Atomic Design ElementsPagesSample App Applications

App Connect Vehicle – Area Notification App Connect Service – Vehicle Health App Connect Service – RAH App Connect Service – Speed Notifications

H 56

H356

Apps for wearable devices extend the mobile experience. The UI design reflects the design of the corresponding app. It follows UX experi-ences for common wearables. The branding is applied by colour, iconography and typography to be appropriate to the use case and still conveys the ŠKODA brand experience.

Atomic Design ElementsPagesWearables


Connect Watch Vehicle Health

Connect Watch Notification Centre


Connect Watch Doors and Lights


Connect Watch Speed Notification

Connect Watch Doors and Lights

Connect Watch Vehicle Status

H 57

H400

DESIGN PRINCIPLES

H 58

H410

Core Design Principles

Think of design principles as simple overarching ideas (the how) to guide your solution (the what). Design principles are tools for creating better, more consistent experiences. They are intended to guide design decisions during product and service creation. Design principles help you to establish and maintain good design practice, unify touch-points and ensure coherenence across the digital ecosystem.

It’s important with any new design project to tailor these principles for an individual design exercise, e.g. reflecting a given market, strategic direction and/or service environment.

COMMUNICATE CONSISTENTLYUse a consistent content and design language to build a story for the customer, and ensure everything is familiar and understandable.

BE RELEVANT TO THE INDIVIDUALUnderstand the customer, the information provided so far and the context of use and serve meaningul and relevant content.

PROVIDE EXPERT GUIDANCEEnsure that ŠKODA expertise, recommen-dations, help and support are always on hand throughout the expereince. Technology solutions should enable not replace human interaction and expertise.

BE DYNAMIC AND ENGAGINGProvide different ways of interacting to support different mindsets and needs, and provide multiple interactions towards an engaging customer journey.

Our Core Design Principles

H 59

H411


CREATE A COHERENT LOGICAny touchpoint or feature needs to share the same underlying logic and feeling in order to give a consistent, coherent and familiar experience.

FIRST EMOTIONAL THEN RATIONALPresent emotionally engaging content to guide decision making at the beginning, e.g. “What I desire at a high level”, and more rational content to guide decision making at the end e.g. “How I can save money“.

USE A CONSISTENT VISUAL LANGUAGEUse a consistent visual design system, content structure, typographic hierarchy, link/interaction hierarchy, use of colour, etc.

VISUALISE COMPLEXITYUse photogrpahy or information graphics to help the customer understand complex technical content.

USE THE SAME LANGUAGE THROUGHOUTBe consistent in the way you describe ŠKODA products and services, avoid jargon and always have an explanation why it is relevant for the customer, e.g. “What is this car about/for?”

KEEP A SINGLE TONE OF VOICEThe same tone of voice should be seamlesslyapplied across content, visuals, message basedinterfaces, interaction, gestures and beyond.

Communicate Consistently Use a consistent content and design language to build a story for the customer, and ensure everything is familiar and understandable.

How to make it happen:

Consistent Storytelling

H 60

H412


REMEMBER THE ENTRY POINTTransfer the context of the customer’s entry point into the experience. Don’t ask the customer to provide information again and again.

BE TARGETED WITH COMMUNICATIONEnsure the customer receives targeted content, offers campaigns and promotions based on their profile, their vehicle model, their history and their location.

UP-SELL IN CONTEXTUp-sell the customer in context based on their choices, and search criteria. Do not propose products or services that aren’t relevant to the needs of the customer.

BUILD A STORYDescribe choices such as extras in the context of the customer’s journey, remembering previous choices in order to describe the use and benefits to the customer.

MAKE LOGICAL COMPARISONSProvide the ability to compare products not by comparing everything, but only comparing relative items.

GIVE CONTROL TO THE CUSTOMERGive the customer a place to view and manage all their interactions throughout their life- cycle, and make personalisation logic easy to understand and manage.

Be Relevant to the Individual Understand the customer, the information provided so far and the context of use and serve meaningul and relevant content.


Individual and Relevant

H 61

H413


BE PRESENT AND VISIBLEHelp the customer to explore with expert guidance along the way. Provide expert content to support complex topics or decision points.

DRIVE REAL WORLD INTERACTIONSPromote contact with the dealer or customer support as a final step.

PROVIDE CONSTANT SUPPORTProvide multiple levels of guidance in context such as affirmation, hints, benefits and sugges-tions.

HAVE AN OPINIONProvide expert recommendations (we recom-mend this extra) as well as community recommendations (most popular) and social feedback (friends or family comments or suggestions).

Provide Expert Guidance Ensure that ŠKODA expertise, help and support is always on hand throughout the expereince. Technology solutions should enable, not replace, essential human interaction.


Expert Guidance

H 62

H414


INVITE ACTIONProvide multiple interactions towards an engaging customer journey, e.g. “save, share, connect with dealer, find stock, compare”.

BE FLEXIBLEProvide multiple entry and exit points to support different customer needs, i.e. non-rigid structure. Make it possible to change path, save data and easily switch between applications and touch-points.

MAKE IT SOCIALThe customer should be able to get feedback from friends or family at any point in the journey.

CRAFTED INTERACTIONS Animations and transitions can be incorporated to provide a dynamic and responsive interactive experience for the customer. Animations and transitions should always be used sparingly and with a clear purpose or benefit to the end user.

Be Dynamic and Engaging Provide different ways to interact to support different mindsets and needs, and provide multiple interactions towards an engaging customer journey.


Dynamic Engagement

H 63

H500

BASIC UX PRINCIPLES

New definitions for wearables in this chapter

H 64

H510

Structuring content in a way that appeals to the basic needs of the customer is key to providing a good user experience.

EMOTIONAL TO RATIONAL First impressions are everything, so, as a rule thumb we like to start with rich visual content at the top of the page. We want people to fall in love with our products so we lead with beauty shots of the car, we put people in the picture to build empathy, we use immersive video or interactive content, all contribute to creating a strong emotional connection to the product.

As the user moves through the page we can start to introduce more and more detailed or factual content about technical specifications and pricing etc., thus appealing to the more rational side of the customer.

Scrolling

Emotional to Rational

Emotional/Rational Guidance

Emotional first

Appeal to the heart Emotional engaging content like beautiful imagery, videos and interactive elements

Rational right after that

Appeal to the head The fine detail, technical specifications, pricing and data

H 65

H511

The same principle can be adopted not just by the structure of a page, but by the logic of the content as the user navigates through multiple pages or layers.

PROGRESSIVE REVEAL People have a short attention span, so think about the way the user moves through the experience. Keep the content lighter and visually engaging at first, and allow the user to reveal more detailed content when they want to see it.

Progressive Reveal

Emotional to Rational

Emotional first

Keep it light Images, video content, limited text and interactive elements

Rational right after that

Drill down for more detail More text, numbers, data and tables

H 66

H520

The user should always be aware of the following content and the structure of the page.

We differentiate between two types of content:

• Typical ŠKODA web content (e.g. importer pages)

• More editorial content with engagement stories

For typical ŠKODA web content (images, texts) make sure the module does not fill the whole screen and that other modules are visible. This guides the user to follow the flow of the page and understand that there is more content.

Editorial content with engagement stories can be displayed over the whole screen, but in this case, it is necessary to apply navigation principles (arrows for tap or swipe – along with texts) which guide user to the next module. If the content is light and direct top-down structure and flow of the page is used. If the content is more heavy, other navigation prin ciples needs to be introduced – e.g. swipe to right/left to explore more content.

Modular System

1

4

2

3

1

2

1 (A)

A2 C2

B C D

C3

Typical Content

or

Editorial Content, Engagement Stories

H 67

H521

Make sure that each module always displays the essential elements that allow the user to navigate the content.

Don’t expect the user to guess how to use the interface, but make it obvious which actions are available and make the way the interaction should work clear.

Modular System

Slideshow

UI Elements

H 68

H530

A clear and usable navigation system is essential to guarantee a good user experience. Make sure you create a navigation system which is appropriate for each device and is obvious and intuitive.

Use conventional elements (e.g. burger menu on mobile devices).

NavigationOverview

H 69

H531

Reduce the navigation to its essentials. This will help the user to focus on the content. Don’t design a navigation that needs too much space and hides main content.

Content first – navigation second.

In case you need more navigation elements, you have to hide them under the CTA. Elements are then showed after the customer activates the CTA.

NavigationMinimum Amount of Navigation

Navigation reduced to the minimum Don’t design a navigation that needs too much space

Models Navigation

Content

Navigation

Content

About

Highlights

Technology

Features

Prices

Build Your Own

Request a Test Drive

Models

H 70

H532

It is essential that the navigation is accessible anytime and everywhere.

To guarantee focus on the content the navigation elements can be temporary hidden from the screen, as described below.

The navigation can come back in the screen through gestures and placed in the content.There is no stick-to-top state for the main navigation, but it is available for the secondary navigation instead. Secondary navigations works as a drop down and it can be used as an anchor link system.

In mobile web the navigation is a layer and hidden (scrolls together with the page) when the user starts scrolling down the page.

NavigationAccessible Anytime and Everywhere

Navigation with back-to-top button Navigation stick-to-top state No access to navigation makes browsing impossible

H 71

H533

Provide two access points to important CTAs. Especially on long pages on which it is impor-tant to guide the user smartly.

Consider locked CTA when the content is long (e.g. in tools, comparisons).

CTA should always be linked to the displayed content and be relevant in the context. CTA should have a defined hierarchy and should guide the user to perform actions.

NavigationTwo Access Points to Important CTA

Two CTAs on long page Don’t place only one important CTA on a long page

H 72

H534

Within the watch app the navigation principle shares the same logic amongst all the devices. Slight changes that may occur are only dependent on physical differences of the device itself.

• Navigation between service tiles is done by swiping up and down.

• Enter a desired service by tapping its tile.

• Navigate between service pages by swiping left and right.

Please note: Navigation between service tiles in watch OS can also be done by rotating the digital crown.

NavigationWearablesWatch OS

Watch OS Navigation

H 73

H535

Please note: Tizen OS navigation only differs from Android’s when behaving with the bezel. The bezel can be used to navigate between services instead of swiping.

NavigationWearablesAndroid Wear and Tizen OS

Android Wear and Tizen OS Navigation

H 74

H540

Animations can help the user experience. They are a useful way to describe movement through page hierarchy, exposing functions and to attract attention to a state change or alert.

All animations must have a clear function. Animations serve to reassure the user that whatever they do, they do it correctly and with the correct outcome. Such behaviour creates excellent user experience.

AnimationsOverview

H 75

H541

Animation can help the user to focus on the main content. Use animation to provide subtle hints, guiding the user through the web page. Avoid distractive content like long explanatory text or arrows or unnecessary fixed elements.

Adding too many interactive elements can make the user unable to decide what to do or how to find what he needs.

Use animation with caution. Only one per surface. In this way you highlight special actions and guide an user easily.

AnimationsGuiding and Highlighting

One animation per surface to create a clear focus Don’t confuse the user with too much animations

H 76

H542

GIVE INSTANT FEEDBACKIf the user touches an element and nothing happens immediately, he will wonder whether the page is broken or whether he has done something wrong.

Display a simple loading graphic to assure the user that something is happening and that his action will be completed shortly.

This way, the user also does not get bored during longer waiting periods.

REACTION TIMESAs a standard, please take into account the following guide values:Direct reaction: < 100 msDelayed response: 200 – 500 msSlow reaction: > 1 s

Try to set the loading animation time to about 500 ms. This way the interface will remain static while the system is running quickly, but if the system is slow a status will appear.

Fast response is always a system requirement.

AnimationsReassurance and Entertainment

Loading animation to show something happens Don’t confuse the user by not showing system status

Discover More

Loading animation

Pressed button

Discover More

H 77

H550

Give feedback on user action. Users always need to know the display status. This means they need to know if their action has been successfully completed. Small guiding messages can help a lot to guide the user smoothly.

Design the wording appropriately for each action. When it is possible, be specific and avoid general sentence, e.g. “action done”.

• Guide the user

• Use guiding messages that are helpfully arranged and worded

User DialoguesInstant Feedback User Action

User Action Instant Message

H 78

H551

Give feedback on system processes. Many processes are running in background and the user can continue using your app. They require a notification when complete. Small guiding messages can help a lot to guide the user smoothly.

For these reasons the tone of voice of the message is important. It’s small things that make a difference.

• Guide the user

• Use guiding messages that are helpfully arranged and worded

User DialoguesInstant Feedback System Processes

System Running in background System Process complete

H 79

H560

Gestures allow users to interact with your application or mobile website. Gestures used in ŠKODA follow industry standards. They do not create unnecessary confusion for users.

Gestures should be used in order to achieve:

• Less clutter – if we use gestures we do not need buttons, this helps to keep the design clean.

• Ease of Use – users are aware of industry standard gestures, thus the use of gestures will make the ŠKODA ecosystem friendlier.

• Seamless Interaction – gestures have great potential to make interaction with content more intuitive and seamless.

Make sure the content and navigation elements are clearly inviting the user to interact.

Gestures

Gestures Examples

H 80

H565

Hidden functions are present in some devices where limited screen space is a given.

In Android and Tizen SmartWatches the circular screen limits the space to add CTAs (unlike in iOS Smartwatch ).

A standard behaviour in these devices is to allow functions to appear in overlay, just by tapping on it anywhere.

Hidden Functions

Wearables

User Action Overlay

H 81

H570

While surfing with one hand, the user must be able to reach all elements for primary actions with his thumb. Place these elements and buttons where they are easily reachable.

Place primary actions so they are easily reachable one handed.

Don’t place the secondary action more prominently than the primary.

There are logical physical reachability con-straints on the lower and upper corners of the device – with areas slightly different for right-handed and left-handed users (mainly in the center part), however, the main high intensity area for primary action, when overlayed, shows us where is best to put important CTAs.

However, as both right-handed and left- handed users tend to switch their mobile from left to right hand depending on situation they are in – we should focus on the conjoined area of either “easy” and “okay” area.

When creating content think about logic for overall single-handed reachability.

Mobiles

Easy Okay

Area for secondary action

Area for primary action

One Hand Surfing

H 82

web and mobile - skodainf.skoda.ee/brandbook/brand/ci/skoda_ci-cd-guideline_h.pdf · mented and...

Documents