finnováció 2012 - multiscreen experience

49
Multiscreen experience Tresó Károly

Upload: isobar-budapest

Post on 15-Jan-2015

690 views

Category:

Economy & Finance


2 download

DESCRIPTION

Tresó Károly UX designer előadása a Finnováció 2012 konferencián a számtalan új digitális eszköz megjelenése kapcsán kihívást jelentő felülettervezési feladatokról.

TRANSCRIPT

Page 1: Finnováció 2012 - Multiscreen experience

Multiscreen experienceTresó Károly

Page 2: Finnováció 2012 - Multiscreen experience

Hello

Page 3: Finnováció 2012 - Multiscreen experience

Tresó KárolyUser experience designer

Page 4: Finnováció 2012 - Multiscreen experience
Page 5: Finnováció 2012 - Multiscreen experience

Multiscreen

experienceés hatásai a weboldalak

kialakítására

Page 6: Finnováció 2012 - Multiscreen experience

Rengeteg eszközön netezhetünk, fogyaszthatunk

tartalmat

Page 7: Finnováció 2012 - Multiscreen experience

„Hagyományos” telefonokon

Page 8: Finnováció 2012 - Multiscreen experience

Okostelefonokon

Page 9: Finnováció 2012 - Multiscreen experience

Hordozható médialejátszókon, játékkonzolokon

Page 10: Finnováció 2012 - Multiscreen experience

Könyvolvasókon

Page 11: Finnováció 2012 - Multiscreen experience

Táblagépeken

Page 12: Finnováció 2012 - Multiscreen experience

Számítógépeken

Page 13: Finnováció 2012 - Multiscreen experience

Egyéb képernyőkön

Page 14: Finnováció 2012 - Multiscreen experience

Ráadásul több kijelzőt is használunk egy cél

érdekében

, Ipsos, Sterling Brands

Page 15: Finnováció 2012 - Multiscreen experience

És ki tudja mit hoz a jövő…

Page 16: Finnováció 2012 - Multiscreen experience

Szabadon állítható kijelző méret?

Page 17: Finnováció 2012 - Multiscreen experience

Minden felület kijelző is lesz?

Page 18: Finnováció 2012 - Multiscreen experience

Vagy másfajta „kijelzők” lesznek?

Page 19: Finnováció 2012 - Multiscreen experience

„Google CEO Larry Page Puts Focus On

Multiscreen Experiences With

Chrome, Google+ And Advertising”

Techcrunch

Page 20: Finnováció 2012 - Multiscreen experience

Hol tartunk mi,itt Magyarországon?

Page 21: Finnováció 2012 - Multiscreen experience

Egy ügyfelünk honlapjánoktóberben…

Page 22: Finnováció 2012 - Multiscreen experience

2128 különböző kijelző

felbontással látogatták meg a honlapot

Page 23: Finnováció 2012 - Multiscreen experience

62%-a

a látogatásoknakaz 5 legnépszerűbb kijelző

felbontással történt

Page 24: Finnováció 2012 - Multiscreen experience

És ez csak a képernyő maximális felbontása.

És akik kisebb böngésző ablakban nézték a

honlapot?

Page 25: Finnováció 2012 - Multiscreen experience

571 különböző kijelző

felbontás volt mobil készülékhez köthető

Page 26: Finnováció 2012 - Multiscreen experience

Igaz, a felbontás nem a legpontosabb mérce…

Page 27: Finnováció 2012 - Multiscreen experience

Néhány pixel eltérés nem mindig jelent nagyon más

valódi méretet

Nexus Phone

1280 x 768

Sasmung Galaxy S III1280 x 720

Page 28: Finnováció 2012 - Multiscreen experience

De azonos felbontás több valódi méretet is takarhat

Nexus Phone

1280 x 768

T-Mobile G-Slate

1280 x 768

Samsung LCD monitor1280 x 768

Page 29: Finnováció 2012 - Multiscreen experience

Ezekkel együtt is, több száz különféle kijelzőről

beszélünk.

Page 30: Finnováció 2012 - Multiscreen experience

Nem hiszed?Járj utána a saját honlapod látogatói statisztikáiban!

Page 31: Finnováció 2012 - Multiscreen experience

Hogyan jelenjünk meg ilyen sokféle kijelzőn?

Page 32: Finnováció 2012 - Multiscreen experience

One Web„means making, as far as is reasonable, the same information and services

available to users irrespective of the device

they are using.”The W3C Mobile Web best practices, 2008

Page 33: Finnováció 2012 - Multiscreen experience

Sokan a kis kijelzőn kezdik

, Ipsos, Sterling Brands

Page 34: Finnováció 2012 - Multiscreen experience

Ezért nem elég a csökkentett

tartalmú „mobil oldal”

Page 35: Finnováció 2012 - Multiscreen experience

Egy minden felületet átható, rugalmas design szemléletre

van szükség

Page 36: Finnováció 2012 - Multiscreen experience

Ez lehet aResponsive Web

Design

Page 37: Finnováció 2012 - Multiscreen experience

Az RWD lényege:Az egyes tartalmak vezérlik az oldal szerkezetét, működését

Page 38: Finnováció 2012 - Multiscreen experience

Meghatározzuk az egyes tartalmak főbb megjelenéseit

Minimális megjelenés Bővebb megjelenés

Page 39: Finnováció 2012 - Multiscreen experience

A tartalmak egymáshoz való viszonyát szabályokkal

kezeljük le

http://www.kiwibank.co.nz/

Page 40: Finnováció 2012 - Multiscreen experience

A technológia viszont nem feltétlenül tisztán

responsive(1 HTML, több CSS, Media Query)

Page 41: Finnováció 2012 - Multiscreen experience

Akkor dobjuk ki a meglévő portált és kezdjük elölről?

Page 42: Finnováció 2012 - Multiscreen experience

Nem feltétlenül.Inkább több lépésben

haladjunk.

Page 43: Finnováció 2012 - Multiscreen experience

Először legyen

érintőkijelző- barát a

honlapunk

Page 44: Finnováció 2012 - Multiscreen experience

Ezután a honlap jellegétől függően két irányba indulhatunk tovább

Page 45: Finnováció 2012 - Multiscreen experience

Vagy egyes oldalakat alakítunk át RWD

szemléletben

http://www.kiwibank.co.nz/

Page 46: Finnováció 2012 - Multiscreen experience

Vagy csak néhány kijelzőre koncentrálunk pl. kis

kijelzők

Page 47: Finnováció 2012 - Multiscreen experience

Bármelyik irányt választjuk, legjobb ha több lépcsőben, folyamatosan

építkezünk

Page 48: Finnováció 2012 - Multiscreen experience

Köszönöm a figyelmet!

Tresó Károly

[email protected]

Page 49: Finnováció 2012 - Multiscreen experience