2014-04-14 | 1

25TH GATHERING, ZURICH 8 APRIL 2014

BEYOND THE BUZZWORDS:

MAKING SENSE OF TRENDS IN DIGITAL

&

LESSON LEARNED FROM

KWD WEBRANKING SWITZERLAND 2013 Zurich, 8 April 2014

DO DIGITAL TRENDS MATCH THE HYPE?

CRISTIANO POIAN

#DIGITALBITES

@LIGHTMAN

2014-04-14 | 2 2014-04-14 | 2

2014-04-14 | 3 2014-04-14 | 3

14/04/2014 4

14/04/2014 5

14/04/2014 6

14/04/2014 7

14/04/2014 8

14/04/2014 9

14/04/2014 10

14/04/2014 11

“Every day, 3 times per second, we

produce the equivalent amount of

data that the Library of Congress has

in its entire print collection.

But most of it is like cat videos on

YouTube or 13-year-olds exchanging

text messages about the next Twilight

movie.”

Nate Silver, statistician and author of the

book, The Signal and the Noise

• Data sets with sizes beyond the ability of commonly used software tools to capture, organize, manage and process the data within a tolerable elapsed time.

• Big data includes non-structured data (qualitative data, videos, social contents, navigation patterns). These sets require specific analytical skills to be interpreted.

• Automation is key to manipulate them in real time. Big data uses inductive statistics and concepts from non-linear system identification to infer laws from large data sets to perform prediction of outcomes.

14/04/2014 12

14/04/2014 13

14/04/2014 14

14/04/2014 15

14/04/2014 16

Smart Data is actionable data that automatically

generates informed, personalized communication

with consumers across all channels. It allows a

company to understand, predict and engage each

consumer at an individual level

Neil Capel, Wired

NEXT: MOBILE

• Social media are storing massive amounts of never-before-analysed data that will reveal crucial information about consumers (90% of them is still unstructured)

• Online advertising is getting more and more customised and targeted (RTB)

• Medicine: data coming from smart pills and stored to monitor the therapy

• Open data: public data that lets users create new aggregations and to build new applications

• Internet of things: data used to monitor and improve the use of remote devices (e.g. solar panels or other energetic devices connected to a network)

14/04/2014 17

NEXT: I MITI DA SFATARE

2014-04-14 | 18

14/04/2014 19 CRISTIANO POIAN @lightman

14/04/2014 20 CRISTIANO POIAN @lightman

14/04/2014 21

14/04/2014 22 CRISTIANO POIAN @lightman

14/04/2014 23 CRISTIANO POIAN @lightman

2014-04-14 | 24 2014-04-14 | 24

Mobile first More and more websites are designed for the mobile version first and then adapted to fit the

high-resolution screens.

The responsive design approach lets the designer create flowing websites made of flexible

images, proportion-based grids and optimised content that adapt the layout to the viewing

environment.

START HERE

PROGRESSIVE ENHANCEMENT

GRACEFUL DEGRADATION

2014-04-14 | 25 2014-04-14 | 25

Mobile first

OK KO

• A single batch of HTML and CSS

code to deploy and manage

• «Full experience» from mobile

• Often the high-resolution screen

experience is not well designed

• The mobile first approach does

not match all companies’ needs

• Responsive web design is not the

only possible answer: consider

adaptive design

2014-04-14 | 26 2014-04-14 | 26

HTML 5 pushed beyond limits

ANIMATED CHARTS AND GRAPHS

VECTOR IMAGES HTML5 VIDEO PLAYER

DYNAMIC ELEMENTS

BROWSER GAMES

HTML 5 combined with CSS3 stylesheets and Javascript libraries enable dynamic behaviours that

previously were only possible through proprietary technologies like Adobe Flash.

The website’s page moves on from the traditional textual form and becomes an interactive

motion graphics with multimedia storytelling elements.

2014-04-14 | 27 2014-04-14 | 27

HTML 5 pushed beyond limits

OK KO

• Storytelling goodness and

«sexyness»

• No more plug-in: HTML is natively

supported by all the recent

browsers

• The return of Flash-era crimes

against the user experience

• Bad habits that were outdated

emerge again: preloading screen,

heavy elements, transition

effects...

LOADING SCREEN

PARALLAX EFFECT MERCEDES STORYTELLING, NUOVA GLA

2014-04-14 | 28 2014-04-14 | 28

Scroll, scroll and more scroll...

Designers create websites

keeping in mind the mobile

and tablet user experience,

where scrolling is more

common than on computer

screens.

Long pages are increasingly

common even in corporate

websites, along with

«infinite scrolling» pages

and progressive loading of

contents.

CORRIERE.IT

REPUBBLICA.IT

BG-GROUP.COM

2014-04-14 | 29 2014-04-14 | 29

Scroll, scroll and more scroll...

OK KO

• All-in-one-page experience

• Progressive download of content

to optimise the weight of pages

• Mobile-friendly

• Some bad design habits: often

the relevant content (call to

action, key message) is not above

the «browser fold»

• Infinite pages make the user

scroll away from relevant

content: it is hard to save pieces

of interesting content for later

reading (e.g. Facebook and

Pinterest’s timelines)

2014-04-14 | 30 2014-04-14 | 30

Typography

FONTE: SMASHINGMAGAZINE.COM (50 popular blogs and websites)

Pages with less text and more graphical elements. Web typography is more and more refined and

functional to the brand experience, thanks to the recent possibility of using any font.

2014-04-14 | 31 2014-04-14 | 31

Typography

OK KO

• We got rid of Arial, Verdana and

Comic Sans, finally

• Form is substance

• Sometimes typography does not

deliver a message but becomes

the message in itself,

representing mere graphic frills

2014-04-14 | 32 2014-04-14 | 32

The return of icons The discipline of usability prescribes the joint use of textual labels and pictograms to facilitate

the navigation. Nevertheless, the latest trends in web design show an emerging use of icons with

no textual explaination in navigation interfaces.

The user is challenged to learn and memorize the meaning of the icons in order to use the

functionality.

HAMBURGER MENU DRAWER ICON

2014-04-14 | 33 2014-04-14 | 33

The return of icons

OK KO

• Mobile-friendly: space is

optimised to give relevance to

content

• Good for frequently used apps

and websites

• Icons require a significant effort

from first-time users and

individuals who are not

computer-savvies

2014-04-14 | 34 2014-04-14 | 34

Flat design In 2013, designers declared war to any realistic representation (skeumorfism) in web interfaces.

The so-called «flat» design is the dominant paradigm in online visual communications and it

seems that it is here to stay.

2014-04-14 | 35 2014-04-14 | 35

Flat design

OK KO

• Content rules

• Simplification, what really counts

is immediatly recognizable

• Usability

• Style uniformity

• IOs 7 everywhere

2014-04-14 | 36 2014-04-14 | 36

So what...? Simply, content as element of

distinction Content will make the difference in user experience, both in websites and in mobile interfaces, in

the next generation of digital products. All digital trends show a need for simplicity and clarity,

highlighting the centrality of key messages

The New York Times website: simple

and neat design with few

«contextual» elements

The product takes all the so-called

«hero area» in the Nest website, a

perfect example of clarity

CONTENT &

MESSAGES

50%

TECHNOLOGY

35%

DESIGN

15%

2014-04-14 | 37 2014-04-14 | 37

LUNDQUIST SRL

Via San Maurilio, 23

Milan 20123

Italy

t. (+39) 02 – 3675 4126

f. (+39) 02 – 9287 8792 www.lundquist.it

Lundquist company page

@Lundquist

Lundquist page

Lundquist channel

Slideshare account

Lundquist page