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.

Verkkosivujen suunnittelu

131 views

Published on

Verkkosivujen suunnittelu lähtee asiakasymmärryksestä.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Verkkosivujen suunnittelu

  1. 1. verkkosivut 1.internet2016 2.asiakasymmärrys 3.suunnittelu
  2. 2. verkkosivut DigitalSeniorArtDirector KATYTUUPANEN katynen@gmail.com +358 50 599 3356 https://www.linkedin.com/in/katy-tuupanen
  3. 3. verkkosivut 1.internet2016
  4. 4. verkkosivut INTERNETINKÄYTTÄJIÄ2016 www.internetlivestats.com 5,107,402 92,5% 416,502 (Ruotsi 93,1 %, Somalia 1,7 %, Libya 21,1 %, Kiina 52,2 %)
  5. 5. verkkosivut 2.asiakasymmärrys Suomalainenkuluttaja2016
  6. 6. verkkosivut Googlen kuluttajabarometrin mukaan suomalaiset ovat: vertailijoita alehaukkoja rationaalisia eletäänniukemmin asiakasymmärrys https://www.consumerbarometer.com/
  7. 7. verkkosivut Mitä laitteita käytät? Kännykkä Älypuhelin Tietokone Tabletti TV INTERNETTV MP3 EREADER DIGITAALISETTALLENTAJAT 99% 73% 86% 43% 92% 30% 36% asiakasymmärrys https://www.consumerbarometer.com/ Googlen kuluttajabarometri
  8. 8. verkkosivut Älypuhelimen käyttö 27% kartat uutiset sää musiikinkuuntelu kalenteri OSTOSLISTATJNE. pelit KIRJAT/LEHDET herätys kuvat puhelut 44% 47% 26% 41% 18% 19% 70% 53% 67% asiakasymmärrys https://www.consumerbarometer.com/ Googlen kuluttajabarometri
  9. 9. verkkosivut Mitä tietoa haet? 29% 13% 6% 40% 55% 17% 13% 29% 26% 8% 23% Yrityksensijaintia ajo-ohjeita LIIKENNETIETOJA aukioloaikoja hintoja suositteluita KUVIA SIJAINTIINPERUSTUVIAPALVELUITA yhteystieToja maksutapoja aleT,KUPONGIT... asiakasymmärrys https://www.consumerbarometer.com/ Googlen kuluttajabarometri
  10. 10. verkkosivut Missä näit tuotetta mainostettavan? 20% 20% 15% 25% Online tv RADIO JULISTE lehti SÄHKÖPOSTI suorakirjE MAINOS MUU asiakasymmärrys https://www.consumerbarometer.com/ Googlen kuluttajabarometri
  11. 11. verkkosivut Mistä lähdit etsimään lisätietoa? 34% VERKKOSIVU LIIKE SOITTO,TEKSTAUS MUU asiakasymmärrys Googlen kuluttajabarometri https://www.consumerbarometer.com/ 59%
  12. 12. verkkosivut ostopolku Asiakkaan ostoprosessi voidaan jaotella: - tiedonkeruu - harkinta - päätöksenteko Ostoprosessit muuttuvat nykyään nopeammin google ratkaisujavaltavamäärä some suositukset blogit arvostelutkuvatjavideot
  13. 13. verkkosivut Google on julkaissut (2011) ajatuksen Zero Moment of Truthista (Totuuden nollapiste). Se on siis hetki milloin tarve syntyy ja siihen pitää saada välittömästi vastaus/ ratkaisu verkosta. Tarve/kysymykset voivat olla mitä tahansa: “Mikä vaippa auttaa lastani nukkumaan läpi yön?” “Mikä hammastahna tekee hymystäni kirkkaamman?” “Mikä auto on turvallisin perheelleni?” Brändi/yritys, joka vastaa näihin kysymyksiin juuri oikeaan aikaan voittaa! www.thinkwithgoogle.com/collections/zero-moment-truth.html ZeroMomentofTruth=ZMOT mitenhelpotatkuluttajanelämää!
  14. 14. verkkosivut ZMOT on muuttunut sitten vuoden 2011. Puhumme jo tuhansista “lyhyistä hetkistä” (micro-moments), jotka muokkaavat meitä kuluttajina. 5minuutissa 7,5miljoonaahakua älypuhelimet 1/3googlenhauista Micro-moments Micro-moments are critical touch points within today’s consumer journey, and when added together, they ultimately determine how that journey ends. https://www.thinkwithgoogle.com/micromoments/intro.html
  15. 15. verkkosivut Micro-moments https://www.thinkwithgoogle.com/micromoments/intro.html Ennakoi + ole paikalla Ennakoi kuluttajien mikro-hetket (micro-moments) ja ole silloin paikalla valmiina auttamaan. Tarjoa hyötyä Tarjoa hyödyllistä tietoa juuri oikealla hetkellä. Ole nopea Mobiilikäyttäjät haluavat tietää, mennä ja ostaa nopeasti. Sinun vastineesi heille pitää olla myös nopea ja kitkaton.
  16. 16. verkkosivut kuluttajaSIIStänään - kiireellinen - älypuhelimen käyttäjä - vertailija - alehaukka - rationaalinen - keskittymiskyvytön - vaativa - useita micro-moments/vrk - haluaa laadukkaan ratkaisun ongelmaansa - jne. jne. laadukas data
  17. 17. verkkosivut 3.verkkosivujensuunnittelu
  18. 18. verkkosivut tiktak,kellokäy 0,05s 2,6s Hylkäys (40 %)Silmäily 3,0s Asiakkaan hurmaaminen pitää tehdä alle kymmenessä sekunnissa tai kävijä on menetetty.10s Mielipide Kuluttajan saapuessa verkkosivulle...
  19. 19. verkkosivut Pitää huonoa verkkosivun visuaalisuutta syynä siihen, etteivät luota kyseisen yrityksen palveluihin tai tuotteisiin. 75% Kävijöistä perustaa ensivaikutelmansa yrityksestä pelkästää sivuston visuaalisen ulkonäön perusteella. 94% muutamialukuja Huom! Luvut ovat suuntaa antavia.
  20. 20. verkkosivut verkkosivuntavoitteet - saada myyntiä lisää - vahvistaa brändiä - löytyä verkosta paremmin (hakukonelöydettävyys) - parantaa asiakaspalvelua - tehostaa automaattisia toimintoja - tavoitella uusia asiakkaita/kohderyhmiä - tunnistaa kävijät tehokkaammin - päivittää vanhentunut visuaalinen ilme tähän päivään - osallistaa asiakkaita paremmin - jne. jne. Mitkä ikinä tavoitteet onkaan, aina määritellään se tärkein tavoite!
  21. 21. verkkosivut suunnittelunaloitus 1. Briiffaus: - verkkosivun tavoitteet - tieto yrittäjän tuotteista/palveluista, positiostaan markkinoilla, kilpailueduista jne. - tieto asiakkaista (käyttäytyminen verkossa) 2. Verkkosivujen käyttöliittymäsuunnittelu ja rautalankamalli (sketching) - palvelun käyttöliittymästä rautalankamalli - suunnitella sivuston hierarkia ja priorisoidaan sisältöä. - ei oteta kantaa esim. sivuston visuaalisiin element- teihin, kuten väreihin ja kuviin.
  22. 22. 3. Verkkosivujen visuaalinen suunnittelu - silta käyttäjän ja sisällön välillä. - designtyötä ohjaavat asiakkaan tavoitteet. - strategista työtä käyttäjän katseen ohjaamiseksi ja huomion kiinnittämiseksi oikeisiin toiminnal- lisuuksiin. - symbolista viestintää käyttäjälle (sommittelut, värit, typografia, muodot...) joiden avulla kerrotaan käyttäjälle, miten toiminnallisuuksia käytetään, mitkä osat kuuluvat yhteen, mikä on tärkeää jne. Visuaalisuus on käytettävyyden viimeistelevä taso, joka voi pelastaa tai tuhota käyttäjäkokemuksen! visuaalinensuunnittelu verkkosivut
  23. 23. verkkosivut - mobiililla huonot konversiot! - yksinkertainen suunnittelu - käyttäjäkokemus vieläkin tärkeämpää - tarkkaile latausnopeuksia - kaikki ylimääräinen pois (tekstit, sliderit jne.) - jätä painavat visuaaliset elementit pois - whitespace - jne. jne. “Think thumb, rather than pixel” Mobiilisuunnittelusta
  24. 24. verkkosivut Mobiilisuunnittelusta vASEN YHDISTETTY OIKEAKuva: https://www.smashingmagazine.com/2016/09/ the-thumb-zone-designing-for-mobile-users/
  25. 25. verkkosivut Psykologiasuunnittelussa = rauhoittaa = uhkaa - hahmotamme maailmaa hlökohtaisilla suodattimilla - mikä tekee toisen suunnitelman houkuttelevam- maksi kuin toisen? Ihmisaivot kaipaavat järjestystä = koulutettu tunnistamaan kuvioita (esim. tekstirivi) Tunnistus (esim. tutun tapaaminen) Google = aut. täyttö Amazon = viimeisimmät selailut, suositukset = miellyttävä käyttäjäkokemus!
  26. 26. verkkosivut esteettinensuunnittelu värit 93% Ulkonäkö (1 % tuoksu tai ääni, 6 % rakenne) 85% 80% Lisää tunnistettavuutta (suora yhteys kuluttajien luottamukseen) Väri Huom! Luvut ovat suuntaa antavia.
  27. 27. verkkosivut Serif Sans-serif GroteskiAntiikva - rivinvälit, merkkien välit jne. - fonteilla voidaan luoda identiteetti yritykselle - muistijälki Perinne, ammattitaito Nykyaika, modermi esteettinensuunnittelu typografia
  28. 28. verkkosivut kuvat esteettinensuunnittelu “kuva kertoo enemmän kuin tuhat sanaa”
  29. 29. verkkosivut 4. Testaaminen (emotional ja käytettävyys) - emotionaalinen testauksen avulla arvioidaan kohderyhmän tunnetason reaktiota desingniin: kuinka hyvin/huonosti design tuottaa käyttäjässä halutun tunnetason reaktion. - käytettävyystestauksella tarkoitetaan verkkopalvelun käytettävyyden arviointia: eli etsitään tekijöitä, jotka haittaavat palvelun tavoitteiden mukaista käyttöä. TESTAAMISENTÄRKEYS
  30. 30. verkkosivut Hyvä (visuaalinen/käytettävyys) suunnittelu pitäisi perustua aina käyttäjien kokemuksiin = miten he kokevat tuotteen/palvelun Luodaan palvelut/tuotteet kuluttajien tarpeisiin, toiveisiin jne. eikä niin, että heidän pitää vain sopeutua niihin. testaamisentärkeys
  31. 31. verkkosivut emotionaldesign - tehokas tapa aiheuttaa reaktio jolla vedotaan kuluttajien tunteisiin, tarpeisiin ja toiveisiin. - näin luodaan yhteys (uskollisuus) yrityksen/tuotteiden sekä kuluttajan välille - mainonta on visuaalisesti miellyttävää unohtamatta käytettävyyttä, luotettavuutta ja toiminnallisuuksia - paras mainontahan ei myy niinkään itse tuotetta vaan oikeaa tunnetta! People love beautiful things, even if they don´t work. Even more if they work well.
  32. 32. verkkosivut käytettävyys Käyttäjäkokemus sisältää kaikki käyttäjien tunteet, uskomukset, mieltymykset jne... Käytettävyys voidaan jakaa pienempiin osiin: OPITTAVUUS MUISTETTAVUUS TEHOKKUUS MIELLYTTÄVYYS VIRHEETTÖMYYS tavoite (ensimmäinen kerta) helppo käyttö (pidempi tauko) kuinka nopea toiminta tyytyväisyys ulkoasuun virheiden määrä/vakavuus
  33. 33. verkkosivut verkkosivujenkäytettävyys nopeastilatautuvatsivutresponsiiviset hyvänavigaatioflow luettavatfontit toimivatlinkit lyhyetlomakkeet aukioloajatesillä yhteystiedot Laadukkaatkuvat Selkeätsivunimet Sommittelu Murupolku Tekstisisällöteikuvina Haku SelkeätCTA:t Selkeätotsikot Metatiedotkunnossa Vastaatavoitteita Kävijäseuranta jne.jne.
  34. 34. verkkosivut 5. Verkkosivujen sisällöntuotanto - paraskaan web design ei pelasta sivustoa, jonka tekstisisältö jää haaleaksi. - verkkosivut ilman asiakkaidesi ongelmia ratkovaa, puhuttelevaa ja johdonmukaista sisältöä VERKKOSIVUJENSISÄLTÖ asiakas+ongelmat=ratkaisu - tuota tunne, että voi auttaa asiakasta! - kerro miten olet jo auttanut muita!
  35. 35. verkkosivut - jätä kaikki turha pois - tee tekstistä helposti luettavaa (lyhyitä lauseita/kappaleita, riittävästi tilaa ympärille) - luo keskustelua - ratkaise ongelmia, anna vastauksia syihin miksi he yleensä tulivat sivustolle. - älä kirjoita ammattikieltä - kuvat, kartat, piirrokset auttavat tehokkaasti tukemaan/korvaamaan tekstiä. VERKKOSIVUJENSISÄLTÖ
  36. 36. verkkosivut TEKNINENOSUUS=KOODAUS 5. Verkkosivun tekninen toteutus - järjestelmät - toimivuus ja virheettömyys - helppo päivitettävyys - nopeus - käyttäjäkokemus - jne.
  37. 37. verkkosivut VERKKOSIVUJENPAKETOINTI - selvitä tavoite - tunne asiakas - tee rautalanka - käytettävyys - visuaalisuus - testaa - sisällöntuotanto - tekninen toteutus - seuraa

×