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.

of

Hvað einkennir góða vefi 2019? Slide 1 Hvað einkennir góða vefi 2019? Slide 2 Hvað einkennir góða vefi 2019? Slide 3 Hvað einkennir góða vefi 2019? Slide 4 Hvað einkennir góða vefi 2019? Slide 5 Hvað einkennir góða vefi 2019? Slide 6 Hvað einkennir góða vefi 2019? Slide 7 Hvað einkennir góða vefi 2019? Slide 8 Hvað einkennir góða vefi 2019? Slide 9 Hvað einkennir góða vefi 2019? Slide 10 Hvað einkennir góða vefi 2019? Slide 11 Hvað einkennir góða vefi 2019? Slide 12 Hvað einkennir góða vefi 2019? Slide 13 Hvað einkennir góða vefi 2019? Slide 14 Hvað einkennir góða vefi 2019? Slide 15 Hvað einkennir góða vefi 2019? Slide 16 Hvað einkennir góða vefi 2019? Slide 17 Hvað einkennir góða vefi 2019? Slide 18 Hvað einkennir góða vefi 2019? Slide 19 Hvað einkennir góða vefi 2019? Slide 20 Hvað einkennir góða vefi 2019? Slide 21 Hvað einkennir góða vefi 2019? Slide 22 Hvað einkennir góða vefi 2019? Slide 23 Hvað einkennir góða vefi 2019? Slide 24 Hvað einkennir góða vefi 2019? Slide 25 Hvað einkennir góða vefi 2019? Slide 26 Hvað einkennir góða vefi 2019? Slide 27 Hvað einkennir góða vefi 2019? Slide 28 Hvað einkennir góða vefi 2019? Slide 29 Hvað einkennir góða vefi 2019? Slide 30 Hvað einkennir góða vefi 2019? Slide 31 Hvað einkennir góða vefi 2019? Slide 32 Hvað einkennir góða vefi 2019? Slide 33 Hvað einkennir góða vefi 2019? Slide 34 Hvað einkennir góða vefi 2019? Slide 35 Hvað einkennir góða vefi 2019? Slide 36 Hvað einkennir góða vefi 2019? Slide 37 Hvað einkennir góða vefi 2019? Slide 38 Hvað einkennir góða vefi 2019? Slide 39 Hvað einkennir góða vefi 2019? Slide 40 Hvað einkennir góða vefi 2019? Slide 41 Hvað einkennir góða vefi 2019? Slide 42 Hvað einkennir góða vefi 2019? Slide 43 Hvað einkennir góða vefi 2019? Slide 44 Hvað einkennir góða vefi 2019? Slide 45 Hvað einkennir góða vefi 2019? Slide 46 Hvað einkennir góða vefi 2019? Slide 47 Hvað einkennir góða vefi 2019? Slide 48 Hvað einkennir góða vefi 2019? Slide 49 Hvað einkennir góða vefi 2019? Slide 50 Hvað einkennir góða vefi 2019? Slide 51 Hvað einkennir góða vefi 2019? Slide 52 Hvað einkennir góða vefi 2019? Slide 53 Hvað einkennir góða vefi 2019? Slide 54 Hvað einkennir góða vefi 2019? Slide 55 Hvað einkennir góða vefi 2019? Slide 56 Hvað einkennir góða vefi 2019? Slide 57 Hvað einkennir góða vefi 2019? Slide 58 Hvað einkennir góða vefi 2019? Slide 59 Hvað einkennir góða vefi 2019? Slide 60 Hvað einkennir góða vefi 2019? Slide 61 Hvað einkennir góða vefi 2019? Slide 62 Hvað einkennir góða vefi 2019? Slide 63 Hvað einkennir góða vefi 2019? Slide 64 Hvað einkennir góða vefi 2019? Slide 65 Hvað einkennir góða vefi 2019? Slide 66 Hvað einkennir góða vefi 2019? Slide 67 Hvað einkennir góða vefi 2019? Slide 68 Hvað einkennir góða vefi 2019? Slide 69 Hvað einkennir góða vefi 2019? Slide 70 Hvað einkennir góða vefi 2019? Slide 71 Hvað einkennir góða vefi 2019? Slide 72 Hvað einkennir góða vefi 2019? Slide 73 Hvað einkennir góða vefi 2019? Slide 74 Hvað einkennir góða vefi 2019? Slide 75 Hvað einkennir góða vefi 2019? Slide 76 Hvað einkennir góða vefi 2019? Slide 77 Hvað einkennir góða vefi 2019? Slide 78 Hvað einkennir góða vefi 2019? Slide 79 Hvað einkennir góða vefi 2019? Slide 80 Hvað einkennir góða vefi 2019? Slide 81 Hvað einkennir góða vefi 2019? Slide 82 Hvað einkennir góða vefi 2019? Slide 83 Hvað einkennir góða vefi 2019? Slide 84 Hvað einkennir góða vefi 2019? Slide 85 Hvað einkennir góða vefi 2019? Slide 86 Hvað einkennir góða vefi 2019? Slide 87 Hvað einkennir góða vefi 2019? Slide 88 Hvað einkennir góða vefi 2019? Slide 89
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

Hvað einkennir góða vefi 2019?

Download to read offline

Í þ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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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

Í þ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.

Views

Total views

829

On Slideshare

0

From embeds

0

Number of embeds

31

Actions

Downloads

1

Shares

0

Comments

0

Likes

0

×