1. Hvað einkennir
góða vefi 2019?
Sigurjón Ólafsson
Fúnksjón vefráðgjöf
Ljósmyndarafélag Íslands - 21. febrúar 2019

2. Hver er
maðurinn?
Nú
Fúnksjón vefráðgjöf 2013-
Aðjúnkt við HÍ 2011-
Áður
Íslandsbanki 2011-2013
Háskóli Íslands 2008-2011
Kaupþing 2001-2008
PwC 2000-2001
Siglingastofnun 1997-2000
2

3. Við erum öll alltaf að spá í heimasíðum og vitum
oft að við gætum gert betur. En tíminn er lítill.
Hvaða atriði ættum við að setja í forgang?
Hvað er það sem helst einkennir góða
og nútímalega vefsíðu?
3

4. Þessi fyrirlestur er
EKKI um heimasíður*
* Flest dæmin í kynningunni eru þó af heimasíðum vefjanna4

5. Ég HATA heimasíður!
5

6. https://wp1.is/heimasida-vefsida-eda-vefur/
6

7. https://www.artencounter.com/product/don-quixote-by-pablo-picasso/
7

8. Hvað er þá flottur vefur?
Smekksatriði?
8

9. 9

10. 10

11. 11

12. 12

13. Á endanum snýst þetta
um notendaupplifun
13

14. https://i.pinimg.com/originals/b3/fe/97/b3fe9773018a30fae6ff5118f62f3c65.png http://semanticstudios.com/user_experience_design/
14

15. Notendur koma með skýr markmið.
Ef þeir ná þeim án mikillar
fyrirhafnar þá líður þeim vel.
= Góð notendaupplifun.
15

16. 16

17. 17

18. Þarfagreining er lykilatriði.
Kannaðu þarfir
viðskiptavina.
Talaðu við þá!
Fylgstu með umferðinni.
Skoðaðu sambærilega vefi.
Skilgreindu þín markmið.
https://xkcd.com/773/
18

19. Fyrsta upplifun skiptir miklu máli.
Vefurinn verður að vera
skýr í skilaboðum.
Hvar er ég?
Og hvað er hægt að gera á þessum vef?
19

20. 20

21. https://medium.com/google-design/10-ux-trends-at-google-6cac31deaea5
21

22. Hafðu fá og einföld skilaboð.
Einhver aðgerð (CTA).
22

23. https://medium.com/google-design/10-ux-trends-at-google-6cac31deaea5
Hraðinn skiptir miklu máli
23

24. Myndir spila oft stórt hlutverk í hraða
24

25. Ekki fara fram úr þér í tækninni. Leyfðu
notendum sem eru ekki með nýjasta símann eða
tölvuna að njóta vefsins líka.
Tæknin breytist hratt en mannlegt eðli ekki.
Og ekki gleyma þeim sem...
25

26. http://www.richmedia.com/richideas/articles/6-ways-to-make-your-projects-accessible
26

27. Fjárfestu í efni. Það er nú einu sinni
ástæðan fyrir því að fólk notar vefi.
Gerðu ráð fyrir kostnaði við myndefni.
Fáðu fagfólk, sem skilur vefinn,
að textanum.
27

28. Hjálpaðu notandanum að
afgreiða sig sjálfur.
Það vill enginn (nánast) lengur hringja.
28

29. 29

30. Fylgstu með tískunni en
ekki elta hana í blindni.
Má ég kynna “dark-mode”.
30

31. 31

32. 32

33. http://www.u3a.is/is/events/islensk-glima
Hefðum
má ekki
gleyma
33

34. Hefðirnar í tölvu
34

35. 35

36. LOGO
36

37. LOGO
FLOKKUR 1 | FLOKKUR 2 | FLOKKUR 3 | FLOKKUR 4
37

38. LOGO
FLOKKUR 1 | FLOKKUR 2 | FLOKKUR 3 | FLOKKUR 4
LEIT
38

39. LOGO
FLOKKUR 1 | FLOKKUR 2 | FLOKKUR 3 | FLOKKUR 4
LEIT
SÍMI / NETFANG / HEIMILISFANG / KENNITALA / SAMFÉLAGSMIÐLAR
(GJARNAN STÓR FÓTUR MEÐ TENGLUM)
39

40. LOGO
FLOKKUR 1 | FLOKKUR 2 | FLOKKUR 3 | FLOKKUR 4
LEIT
SÍMI / NETFANG / HEIMILISFANG / KENNITALA / SAMFÉLAGSMIÐLAR
(GJARNAN STÓR FÓTUR MEÐ TENGLUM)
FORGANGSRÖÐUN, FORGANGSRÖÐUN, FORGANGSRÖÐUN
40

41. LOGO
FLOKKUR 1 | FLOKKUR 2 | FLOKKUR 3 | FLOKKUR 4
LEIT
SÍMI / NETFANG / HEIMILISFANG / KENNITALA / SAMFÉLAGSMIÐLAR
(GJARNAN STÓR FÓTUR MEÐ TENGLUM)
FORGANGSRÖÐUN, FORGANGSRÖÐUN, FORGANGSRÖÐUN
(eða kannski bara risastór mynd)
IS / EN - KARFA
41

42. Það er búið að gera tilraunir með
að fara fram hjá hefðunum
42

43. 43

44. 44

45. Tilraunir standa enn yfir
45

46. 46

47. Tilrauninirnar í fortíð voru skammlífar -
hefðirnar unnu sigur*
* en ekkert varir að eilífu, það myndast jú nýjar hefðir…47

48. 48

49. 49

50. Svo hvað einkennir góðan vef 2019?
50

51. Skoðum þá bestu vefina
15 tilnefndir vefir - SVEF 2019
51

52. 52

53. 53

54. 54

55. 55

56. 56

57. 57

58. 58

59. 59

60. 60

61. 61

62. 62

63. 63

64. 64

65. 65

66. 66

67. 67

68. Allir steyptir í sama mót?
Skoðum þá aðeins betur
68

69. http://www.flickr.com/photos/skarpi/2416227373/sizes/o/in/photostream/Jon Gold: Taking the Robots to Design School

70. 15 tilnefndir vefir - SVEF 2019
í allri sinni lengd
70

71. 71

72. 72

73. 73

74. Hvernig líður hefðunum í nútíma
íslenskri vefhönnun?
74

75. LOGO
FLOKKUR 1 | FLOKKUR 2 | FLOKKUR 3 | FLOKKUR 4
LEIT
SÍMI / NETFANG / HEIMILISFANG / KENNITALA / SAMFÉLAGSMIÐLAR
(GJARNAN STÓR FÓTUR MEÐ TENGLUM)
FORGANGSRÖÐUN, FORGANGSRÖÐUN, FORGANGSRÖÐUN
(eða kannski bara risastór mynd)
IS / EN - KARFA
14 / 15
1 fyrir miðju
Hefðbundin 12 / 15 (3 / 15 með hamborgara) Leit hægra megin = 6
Engin leit sýnileg = 8
Leit fyrir miðju = 1
Stórt myndasvæði (50% af svæði fyrir ofan fold) = 13 / 15
Myndasvæði innan við 50% = 2 / 15
Stórfótur (yfir 50% af
skjáfylli) = 13 75

76. Hefðir - samantekið fyrir tölvu (desktop)
● Merki (logo) vinstra megin = 14 / 15
● Merki (logo) fyrir miðju = 1 / 15*
● Hefðbundin valmynd = 12 / 15
● Hamborgari eingöngu = 3 / 15
● Leit hægra megin = 6
● Engin leit sýnileg = 8
● Leit fyrir miðju = 1
● Stórt myndasvæði (50% af svæði
fyrir ofan fold) = 13 / 15
● Myndasvæði innan við 50% = 2 / 15
● Video í bakgrunni = 3 / 15
● Stórfótur (yfir 50% af skjáfylli) = 13 /
15
● Valmynd sem fylgir þér (sticky menu)
= 9 / 15
76

77. Gleymum ekki!
Umferðin er fyrst og fremst
í gegnum síma / snjalltæki
(mobile first).
77

78. 15 tilnefndir vefir - SVEF 2019
í síma
78

79. 79

80. 80

81. Eru hefðir að skapast
í hönnun fyrir síma?
81

82. LOGO
SÍMI / NETFANG / HEIMILISFANG
/ KENNITALA / SAMFÉLAGSMIÐLAR
Stór mynd með
texta ofan á (og
stundum CTA)
….
mjööög laaangir
Logo / merki
Vinstra megin = 14 / 15
Fyrir miðju = 1 / 15
“Hamborgari”
Hægra megin = 12 / 15
Vinstra megin = 1 / 15
Fyrir miðju neðarlega
= 1 / 15
Enginn = 1 / 15
Leit eða leitaríkon
sjáanlegt = 3 / 15
82

83. Hraði og aðgengi tilnefndra vefja
83

84. 84

85. 85

86. Niðurstaða? Helstu einkenni*
➔ Betri þarfagreining og skilningur á UX (notendaupplifun)
➔ Hefðir virtar að langmestu leyti í tölvu og hefðir að skapast í síma
➔ Mikið lagt í myndefni og videomiðlun að aukast
➔ Stórt og læsilegt letur
➔ Fáguð vefhönnun
➔ Virðing fyrir efni, ekki síst texta, er að aukast
➔ Hraði er almennt góður en stórt myndefni og stórar skrár gera það erfitt
➔ Aðgengismálin tekin alvarlegar en áður
➔ Hreyfing (animation) þykir svöl
➔ Mikið skrun / laaaangir vefir
➔ Valmynd sem fylgir þér (e. sticky menu)
➔ Sjálfsafgreiðsla eykst (dæmi bankar, tryggingafélög, flugfélög)
➔ Netspjall og spjallmenni (chat bots)
➔ Leitarvirkni tekur hröðum breytingum til batnaðar
* byggð á örrannsókn og tilfinningu vefráðgjafa
86

87. Og það sem er ánægjulegast!
Vefir mega LOKSINS KOSTA eitthvað!*
* Vegna þess að þeir skila augljósum fjárhagslegum ávinningi
87

88. AÐ LOKUM!
Í þessari kynningu höfum við aðeins snert yfirborðið og í
reynd hefur þessi fyrirlestur verið um blessaða heimasíðuna!
En munum! Heimasíðan (forsíðan) skiptir
ekki öllu máli (lengur)
Fyrst og fremst eru það leitarvélar og samfélagsmiðlar sem
skila notendum á vefinn (og gjarnan á undirsíður)
88

89. Takk fyrir mig!
Sigurjón Ólafsson
Fúnksjón vefráðgjöf
funksjon.net
sjon@funksjon.net
666-5560
@sigurjono
89