Digital service experience trends

Digital Service Experience

TrendsJimmy Salermo 17 October 2014

Naviga&on & structure User journey Tone of voice

Digital service experience

+ +

Naviga&on & structure User journey Tone of voice

Digital service experience

+ +

Navigation & Structure

Direction of current trends and best practices in digital service & website navigation structures

The general trend in online service websites is the breaking down of the old Fered navigaFon structures in favour of a more fluid and transparent whole.

The new dynamic way of approaching site structures allows for smoother, more varied and easily personalised user flows.

Fade-‐out

Simple and intui&ve

Ac&on-‐oriented Modular and flexible

Contextual and integrated


Action-‐orientedStreamlining navigaFon flows using progressive disclosure to present the user with very simple opFons for quick decision making. An efficient way to do this is to focus on the user’s goal instead of hierarchical categorisaFon of available content.

Ac&on-‐oriented naviga&on Condensed to three choices, each asking and answering a single quesFon about the user’s needs. This cuts down on cluPer on the website and goes straight to the point -‐ what do you want to achieve on this visit?

Different scales of choice This approach is useful for bringing together parFes with mutual interests. In this example, your first choice is to select if you have a workspace for hire or if you are looking for one, bridging the gap between a service provider and its user and presenFng both sides of the coin equally and effecFvely.


Modular and flexibleOrganising site content in a modular way allows for flexible user flows and allows for a high level of customisaFon and personalisaFon. Modules can be displayed according to user behaviour, user selecFon or both.

Modular content pods Brings the ability to display large amounts of varying content in a scannable, graphical way that easily scales between screen sizes.

Filters A quick and easy way to sort through content by category, tags or other variables. Enhances the user’s ability to create their own user journey with minimal navigaFonal steps.


Simple and intuitiveUsing a linear narraFve, whether in a transparent or progressively disclosed navigaFon flow, grounds content or service process in a visual and raFonal way. Making navigaFon elements a part of the flow brings added guidance and cohesion to the user journey.

Visual indica&on Using linear navigaFon within a site module provides a visual cue for the user to know where they are and how much more is available to them.

Passive into ac&ve Displaying even staFc content in the context of a narraFve helps create a more dynamic experience and clarify user needs and service offerings by breaking it down into manageable chunks.

Fully immersive user flow Here, opFons to conFnue are integrated into the journey and presented at the appropriate Fmes, giving the user a level of control over their experience but allowing the steps to be taken in the intended order. To enhance the simplicity of the navigaFon, all constant controls are integrated into the video progress bar which is invoked on mouseover.


Contextual and integratedBreaking out of a tradiFonal menu and link structure allows for more free-‐form and intuiFve ways to navigate, enhancing the user’s experience of both the service and the process.

Context based naviga&on CreaFve uses of contextual informaFon can make a navigaFon menu more interesFng and relevant. Eg. finding a watch based on what depth or alFtude it needs to work in.

Direct access through content instead of mere links HighlighFng areas and linking through to further content directly from where you are simplifies and fades out the navigaFon process, so a user journey doesn’t get interrupted by the need to move your mouse to find a link. Translates well to touch screens.


Fade-‐outA major development with the increased use of handheld screens has been the drasFc removal of elements from view when not necessary, pu\ng the content at the forefront. As a welcome side effect, users are learning to expect dynamic quality content.

Space for what counts Using slide out menus frees up visual real estate while sFll allowing the user instant access to navigaFon elements.

Full menu capabili&es On click or mouseover, full navigaFon tools become available without interrupFng any acFve media currently on screen.

Quick access to important controls Maintaining low threshold calls to acFon with persistently available login forms, booking details and other important controls.

Easy access Without clogging up the layout, menus can be hidden unFl called.


Yeah but no but… what about really content-‐heavy websites?

Behold the Megamenu Large amounts of subpages are no longer hidden under several steps of navigaFon. One click on a top level category can reveal all subcategories and their child pages in one view. This single view roadmap can then be integrated into many of the methods just covered.

Visual cues welcome To further enhance scannability of page lisFngs, icons, graphics and different font colours and sizes are oaen used.

User Journey

Direction of current trends and best practices in digital service & website user journeys

As with navigaFon and site structure, digital user journeys are breaking free of rigid, predetermined flows and allow for a quicker, effortless goal-‐focused experience, stripping away anything unnecessary for the end user for enhanced immediacy of service.

Low threshold

Fast

Personalised

Simplified and transparent

Goal-‐oriented

User Journeys

Low thresholdIndicaFng a clear and effortless first step into the purchase or sign up process lowers the threshold for users to input their informaFon and eventually become customers.

Keep it simple Only asking for what is essenFal to get started makes the process approachable and users more likely to enter the flow.

Keep them with you Once the user is in, keeping the journey simple and well structured and le\ng the user know where they are within it, and what opFons are available to them, helps avoid dropping out mid-‐process.

User Journeys

PersonifiedUser flow gateways, IP tracking, usage staFsFcs and direct user selecFon can help tailor both content and methods of delivery to a specific user.

Selectors, forms and calculators Le\ng a user input variable data to receive a calculated recommendaFon for content is especially useful in financial maPers.

First name basis Even something as simple as personalising content with the user’s first name creates rapport and a sense of belonging.

User accounts For long term, in depth personificaFon, user accounts are a strong tool. Make signing up and logging in quick, simple and worth their while.

User Journeys

Goal-‐orientedUsing tasks and goals as your starFng point allows for clearer user journeys, reducing the need for the user to know or find out what category their visit falls under and providing them an effortless first step into dialogue with the service.

Crystallised user journey gateways Everything the user may want or need from the site can be assigned into one of three or four categories. As with progressive disclosure, the user needs only make a single flash judgment on how to proceed with their visit.

User Journeys

FastRegardless of connecFon speed, users have grown to expect speed and efficiency from their online services. This includes Fme needed to decipher site architecture, steps required to reach desired state and the ability to quickly scan content.

Overlays Pinterest uses overlays instead of page transiFons, allowing you to quickly view and interact with mulFple items without leaving your Pinterest feed.

Tabs and accordions Tabbed and collapsible content is quicker and easier to browse than separate pages, and allow for efficient grouping of related content without affecFng page length or scannability.

Flip card modules A variaFon on an overlay, modules can be flipped over to reveal more informaFon.

User Journeys

Simplified and transparentA user flow stripped down to the essenFal elements and uFlising progressive disclosure and inline controls makes for a simple, understandable and low effort process that almost fades into the background.

In situ With current technology, there is no need to move between pages to perform tasks. In this example, clicking ‘add to cart’ automaFcally expands the shopping cart from the top nav, revealing opFons to change quanFty, remove item or checkout.

No interroga&on Asking only what’s essenFal keeps user effort level minimal, encouraging more completed tasks. In this example, this is further simplified by asking if the user already has an account, then only revealing the opFon relevant to them (in this case, a sign up form). Note that at account creaFon stage, only a few pieces of informaFon are required. If the user is comfortable, they will conFnue or return to add more.

User Journeys

But what about services and products with much more variables?

Same rules, different terms These services especially need clarity. SelecFng which variables to bring up and which to knock back is key.

Less AND more Less non-‐vital informaFon upfront. More ways to search, filter and interact with the vast array of products effecFvely.

Tone of Voice

Direction of current trends and best practices in digital service & website tone of voice

The current trend in both wriPen and visual language is using a direct, dynamic and personal tone, eliciFng an emoFonal response and creaFng the feeling of receiving personal service within a self-‐service flow. Copy and microcopy can also clarify the goals and sales process to allow for quick yet informed decisions.

Personal and user-‐focused

Understandable

Visual

Clear and direct

Consistent

Tone of voice

Personal and user-‐focusedThe days of online brochures are over. The user doesn’t care what you do, they care what you can do for them.

Make it a dialogue Asking direct quesFons invites and encourages user response.

It’s all about the user Speaking directly to the user is efficient in selling services, creaFng a sense that you are offering them something that is relevant to their needs and desires.

Users listen to other users Many online stores and services rely on user reviews to prove the value of their product. TesFmonials and client stories are a great way to bring the human element in.

Tone of voice

Clear and directUsing language that is direct, brief and answers user quesFons about the essence of the service and how to start using it creates strong, low threshold calls to acFon.

What does it do? CommunicaFng clearly and briefly the value that a service can offer is the new ‘elevator speech’ -‐ but with less Fme to grab aPenFon and make an impact. A single sentence with a potenFal strap line is becoming the norm.

How do I get it? The choice of copy down to the microcopy on buPons and form labels are used to invite acFon. DescripFve, goal-‐oriented terms like “start now” are becoming more popular than generic calls to acFon such as “sign up”.

Why should I get it? Explaining in more detail but remaining clear and concise, le\ng the user know what’s in it for them. This is especially important with more abstract services where the value will not be realised for some Fme to come (such as pensions).

Tone of voice

UnderstandableConFnuing from clarity, industry jargon is sinking (as it should). Using down to earth language to explain the purpose of a service as opposed to the provider has become prevalent pracFce.

Say it simply. Then say it simpler. ‘LocaFons’ is good. ‘Where we work’ is bePer, because it makes the topic an acFve one (we work, and here is where) instead of a passive one (lisFng locaFons).

Short and sweet Keeping introductory and explanatory paragraphs short helps their readability, leading to an easier to digest user experience.

What does the service ACTUALLY do? ‘Providing soluFons’ is abstract, ‘Building businesses’ is more tangible. The focus is not on what the service does, it’s on what the user can get out of it -‐ a subtle but weighty difference.

Tone of voice

VisualVisual communicaFon decisions form a large part of a service’s tone of voice, from colour and font choices to level of simplicity -‐ or complexity -‐ in displaying informaFon and changeable data.

Graphical representa&on of data Numbers and abstract data can be parFcularly difficult to absorb, so creaFng graphs and visuals is used as a succinct way to explain.

Not just for complex data For visual interest and approachability, simpler and more staFc content is oaen conveyed visually. This also allows for a wider range of prioriFsaFon between content and opFons displayed on the screen at the same Fme.

Tone of voice

ConsistentBoth wriPen and visual communicaFon should be consistent across the enFre user journey. CreaFng a set of guidelines and sFcking to them removes the need for the user to re-‐learn how to read and interact at each stage.

Subdomains and campaign microsites Subdomains and microsites that are an addiFon or enhancement to the user journey, or an enFrely separate user journey, should be visually disFnguishable from the core journey. However, certain graphical and tonal rules should remain to reassure the user that they have not got lost.

Consistent choice of elements Colour, font and sentence paPerns should form a cohesive whole. Using a limited colour palePe or a specific way of speaking helps keep everything together.

Tone of voice

But this is serious business!

That’s why! !Many important topics, such as insurance, pensions and workplace performance can have a negaFve or even uncomfortable air to them, with no clue where to start. !Same goes for sick kids and lack of clean water. This is why the chariFes aiming to raise awareness and collect donaFons use fun, interesFng and easily digesFble ways to do their thing.

Mobile Experience

Mobile Experience The amount of smartphone and tablet users has increased dramaFcally, and most service providers are switching to responsive, fluid layouts, or alternaFvely creaFng a standalone app for more control over the desired user journey.

Bespoke mobile app

Responsive/adap&ve websites

Kiitos! Thanks!

Services

Digital service experience trends