Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Hvað einkennir góða vefi 2019?

300 views

Published on

Í þessum fyrirlestri sem ég hélt fyrir Ljósmyndarafélag Íslands 21. febrúar 2019 fjallaði ég um það sem einkennir góða vefi árið 2019. Það var tilvalið að skoða tilnefnda vefi til SVEF verðlauna af þessu tilefni. Auk þess að rýna þá fjallaði ég um grundvallaratriðin í góðri vefhönnun.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Hvað einkennir góða vefi 2019?

  1. 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. 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. 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. 4. Þessi fyrirlestur er EKKI um heimasíður* * Flest dæmin í kynningunni eru þó af heimasíðum vefjanna4
  5. 5. Ég HATA heimasíður! 5
  6. 6. https://wp1.is/heimasida-vefsida-eda-vefur/ 6
  7. 7. https://www.artencounter.com/product/don-quixote-by-pablo-picasso/ 7
  8. 8. Hvað er þá flottur vefur? Smekksatriði? 8
  9. 9. 9
  10. 10. 10
  11. 11. 11
  12. 12. 12
  13. 13. Á endanum snýst þetta um notendaupplifun 13
  14. 14. https://i.pinimg.com/originals/b3/fe/97/b3fe9773018a30fae6ff5118f62f3c65.png http://semanticstudios.com/user_experience_design/ 14
  15. 15. Notendur koma með skýr markmið. Ef þeir ná þeim án mikillar fyrirhafnar þá líður þeim vel. = Góð notendaupplifun. 15
  16. 16. 16
  17. 17. 17
  18. 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. 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. 20
  21. 21. https://medium.com/google-design/10-ux-trends-at-google-6cac31deaea5 21
  22. 22. Hafðu fá og einföld skilaboð. Einhver aðgerð (CTA). 22
  23. 23. https://medium.com/google-design/10-ux-trends-at-google-6cac31deaea5 Hraðinn skiptir miklu máli 23
  24. 24. Myndir spila oft stórt hlutverk í hraða 24
  25. 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. 26. http://www.richmedia.com/richideas/articles/6-ways-to-make-your-projects-accessible 26
  27. 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. 28. Hjálpaðu notandanum að afgreiða sig sjálfur. Það vill enginn (nánast) lengur hringja. 28
  29. 29. 29
  30. 30. Fylgstu með tískunni en ekki elta hana í blindni. Má ég kynna “dark-mode”. 30
  31. 31. 31
  32. 32. 32
  33. 33. http://www.u3a.is/is/events/islensk-glima Hefðum má ekki gleyma 33
  34. 34. Hefðirnar í tölvu 34
  35. 35. 35
  36. 36. LOGO 36
  37. 37. LOGO FLOKKUR 1 | FLOKKUR 2 | FLOKKUR 3 | FLOKKUR 4 37
  38. 38. LOGO FLOKKUR 1 | FLOKKUR 2 | FLOKKUR 3 | FLOKKUR 4 LEIT 38
  39. 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. 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. 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. 42. Það er búið að gera tilraunir með að fara fram hjá hefðunum 42
  43. 43. 43
  44. 44. 44
  45. 45. Tilraunir standa enn yfir 45
  46. 46. 46
  47. 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. 48
  49. 49. 49
  50. 50. Svo hvað einkennir góðan vef 2019? 50
  51. 51. Skoðum þá bestu vefina 15 tilnefndir vefir - SVEF 2019 51
  52. 52. 52
  53. 53. 53
  54. 54. 54
  55. 55. 55
  56. 56. 56
  57. 57. 57
  58. 58. 58
  59. 59. 59
  60. 60. 60
  61. 61. 61
  62. 62. 62
  63. 63. 63
  64. 64. 64
  65. 65. 65
  66. 66. 66
  67. 67. 67
  68. 68. Allir steyptir í sama mót? Skoðum þá aðeins betur 68
  69. 69. http://www.flickr.com/photos/skarpi/2416227373/sizes/o/in/photostream/Jon Gold: Taking the Robots to Design School
  70. 70. 15 tilnefndir vefir - SVEF 2019 í allri sinni lengd 70
  71. 71. 71
  72. 72. 72
  73. 73. 73
  74. 74. Hvernig líður hefðunum í nútíma íslenskri vefhönnun? 74
  75. 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. 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. 77. Gleymum ekki! Umferðin er fyrst og fremst í gegnum síma / snjalltæki (mobile first). 77
  78. 78. 15 tilnefndir vefir - SVEF 2019 í síma 78
  79. 79. 79
  80. 80. 80
  81. 81. Eru hefðir að skapast í hönnun fyrir síma? 81
  82. 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. 83. Hraði og aðgengi tilnefndra vefja 83
  84. 84. 84
  85. 85. 85
  86. 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. 87. Og það sem er ánægjulegast! Vefir mega LOKSINS KOSTA eitthvað!* * Vegna þess að þeir skila augljósum fjárhagslegum ávinningi 87
  88. 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. 89. Takk fyrir mig! Sigurjón Ólafsson Fúnksjón vefráðgjöf funksjon.net sjon@funksjon.net 666-5560 @sigurjono 89

×