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.

1. Multiscreen experience
Tresó Károly

2. Hello

3. Tresó Károly
User experience designer

5. Multiscreen experience
és hatásai a weboldalak kialakítására

6. Rengeteg eszközön netezhetünk,
fogyaszthatunk tartalmat

7. „Hagyományos” telefonokon

8. Okostelefonokon

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

10. Könyvolvasókon

11. Táblagépeken

12. Számítógépeken

13. Egyéb képernyőkön

14. Ráadásul több kijelzőt is
használunk egy cél érdekében
, Ipsos, Sterling Brands

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

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

17. Minden felület kijelző is lesz?

18. Vagy másfajta „kijelzők” lesznek?

19. „Google CEO Larry Page
Puts Focus On Multiscreen
Experiences With Chrome,
Google+ And Advertising”
Techcrunch

20. Hol tartunk mi,
itt Magyarországon?

21. Egy ügyfelünk honlapján
októberben…

22. 2128
különböző kijelző felbontással
látogatták meg a honlapot

23. 62% -a
a látogatásoknak
az 5 legnépszerűbb kijelző
felbontással történt

24. És ez csak a képernyő
maximális felbontása.
És akik kisebb böngésző
ablakban nézték a honlapot?

25. 571
különböző kijelző felbontás
volt mobil készülékhez köthető

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

27. Néhány pixel eltérés nem mindig
jelent nagyon más valódi méretet
Nexus Phone Sasmung Galaxy S III
1280 x 768 1280 x 720

28. De azonos felbontás több valódi
méretet is takarhat
Nexus Phone T-Mobile G-Slate Samsung LCD monitor
1280 x 768 1280 x 768 1280 x 768

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

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

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

32. 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

33. Sokan a kis kijelzőn kezdik
, Ipsos, Sterling Brands

34. Ezért nem elég a
csökkentett tartalmú
„mobil oldal”

35. Egy minden felületet átható,
rugalmas design szemléletre van
szükség

36. Ez lehet a
Responsive Web Design

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

38. Meghatározzuk az egyes
tartalmak főbb megjelenéseit
Minimális megjelenés Bővebb megjelenés

39. A tartalmak egymáshoz való
viszonyát szabályokkal kezeljük le
http://www.kiwibank.co.nz/

40. A technológia viszont nem
feltétlenül tisztán responsive
(1 HTML, több CSS, Media Query)

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

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

43. Először legyen
érintőkijelző-
barát a
honlapunk

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

45. Vagy egyes oldalakat alakítunk
át RWD szemléletben
http://www.kiwibank.co.nz/

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

47. Bármelyik irányt választjuk,
legjobb ha több lépcsőben,
folyamatosan építkezünk

48. Köszönöm a figyelmet!
Tresó Károly
treso.karoly@kirowskiisobar.com