42
AIVOT JA VISUAALISUUS MIKSI DESIGNILLA ON VÄLIÄ Essi Raunamaa Senior Service Designer / Solita @raunamaa

Aivot ja visuaalisuus - miksi designilla on väliä

Embed Size (px)

Citation preview

Page 1: Aivot ja visuaalisuus - miksi designilla on väliä

AIVOT JA VISUAALISUUSMIKSI DESIGNILLA ON VÄLIÄEssi RaunamaaSenior Service Designer / Solita@raunamaa

Page 2: Aivot ja visuaalisuus - miksi designilla on väliä

MITÄ TAPAHTUU KUN KOHTAAMME KÄYTTÖLIITTYMÄN?

Page 3: Aivot ja visuaalisuus - miksi designilla on väliä
Page 4: Aivot ja visuaalisuus - miksi designilla on väliä

50 MS

Page 5: Aivot ja visuaalisuus - miksi designilla on väliä

VISUAALISUUDEN VAIKUTUS94%

Page 6: Aivot ja visuaalisuus - miksi designilla on väliä

ULKONÄKÖ VAIKUTTAA ENEMMÄN KUIN TOIMIVUUS

Page 7: Aivot ja visuaalisuus - miksi designilla on väliä
Page 8: Aivot ja visuaalisuus - miksi designilla on väliä

SKANNAUS› Tilan hahmottaminen:

• Missä olen?• Mitä sijaitsee missäkin?

› Onko täällä mitään minulle?› Mitä ennakkoluuloja ulkoasu

ruokkii?

Page 9: Aivot ja visuaalisuus - miksi designilla on väliä

ENNAKKOLUULOTToimivat ensisijaisena perusteena, kun käyttö aloitetaan.https://youtu.be/TudFAEUkR9Y?t=37

Page 10: Aivot ja visuaalisuus - miksi designilla on väliä

SKANNAUS› Eniten katsotaan:

• Otsikot• Linkit• Listat, erotellut boksit• Boldatut sanat

Page 11: Aivot ja visuaalisuus - miksi designilla on väliä
Page 12: Aivot ja visuaalisuus - miksi designilla on väliä
Page 13: Aivot ja visuaalisuus - miksi designilla on väliä
Page 14: Aivot ja visuaalisuus - miksi designilla on väliä

LUOKITTELU

Page 15: Aivot ja visuaalisuus - miksi designilla on väliä
Page 16: Aivot ja visuaalisuus - miksi designilla on väliä

LUOKITTELU› Mitä näit?› Missä?

Page 17: Aivot ja visuaalisuus - miksi designilla on väliä
Page 18: Aivot ja visuaalisuus - miksi designilla on väliä

LUOKITTELU› Mitä näit?› Missä?

Page 19: Aivot ja visuaalisuus - miksi designilla on väliä

LUOKITTELU› Aivot on ”ohjelmoitu”

luokittelemaan asioita.• Läheisyys• Samankaltaisuus• Väri• Symmetria

Page 20: Aivot ja visuaalisuus - miksi designilla on väliä

WHITE SPACEHahmotamme asiat itse asiassa tyhjän tilan perusteella.› Erottaa asiat toisistaan.› Luokittelee yhteenkuuluvat

asiat.

Page 21: Aivot ja visuaalisuus - miksi designilla on väliä

WHITE SPACE

Page 22: Aivot ja visuaalisuus - miksi designilla on väliä

VAINU ELI ”INFORMATION SCENT”

› Ihminen valitsee ensimmäisen etäisesti tarvetta muistuttavan kohdan.• Tutkimustiedon mukaan

yleensä luetaan otsikosta 2 ensimmäistä sanaa.

› Vainun saamiseen ei haluta käyttää älyllistä vaivaa.• Motivaation vahvuus

Page 23: Aivot ja visuaalisuus - miksi designilla on väliä

VAINU

Page 24: Aivot ja visuaalisuus - miksi designilla on väliä

KLIKKAUS› Aivot laskevat jokaiselle

tekemälleen päätökselle ”hankintahinnan”.

› Käyttäjä on laiska ja tyhmä:Ihminen valitsee vähiten kuormittavan vaihtoehdon. Käyttäjä jaksaa vain harvoin nähdä älyllistä vaivaa.

VAIVA

HUOMIO

VUORO-VAIKUTUS

LUKEMINEN

AJATTELU

Page 25: Aivot ja visuaalisuus - miksi designilla on väliä

LAISKUUS› Koettu vaiva vs. Koettu

hyöty› Käyttäjä muodostaa aina

arvion• Arvion muodostumiseen

vaikuttaa aiempi kokemus• Arvion muodostumiseen

vaikuttaa design

VAIVA

HUOMIO

VUORO-VAIKUTUS

LUKEMINEN

AJATTELU

Page 26: Aivot ja visuaalisuus - miksi designilla on väliä

KÄYTTÄJÄT VIETTÄVÄT SUURIMMAN OSAN AJASTAAN MUUALLA KUIN TEKEMÄSSÄSI PALVELUSSA.

Page 27: Aivot ja visuaalisuus - miksi designilla on väliä

AIEMPI KOKEMUS› Hankintahinnan alentaminen› Tehtävien

automatisoituminen› Vaikuttaa siihen, mistä

käyttäjät etsivät tietoa ja toiminnallisuuksia

LOGIN

OSTOS-KORI

HAKU

NAVIGAATIO

MURUPOLKU

ETUSIVU-LINKKI

YHTEYS-TIEDOT

Page 28: Aivot ja visuaalisuus - miksi designilla on väliä
Page 29: Aivot ja visuaalisuus - miksi designilla on väliä
Page 30: Aivot ja visuaalisuus - miksi designilla on väliä
Page 31: Aivot ja visuaalisuus - miksi designilla on väliä
Page 32: Aivot ja visuaalisuus - miksi designilla on väliä

FONTIT / TYPOGRAFIA› Emme itseasiassa lue kirjaimia.› Luemme kirjainyhdistelmiä.› Vielä tarkemmin näiden yhdistelmien välejä.

Page 33: Aivot ja visuaalisuus - miksi designilla on väliä

FONTIT / TYPOGRAFIA

Page 34: Aivot ja visuaalisuus - miksi designilla on väliä

FONTIT / TYPOGRAFIA

Page 35: Aivot ja visuaalisuus - miksi designilla on väliä

KATSOTKO MAINOKSIA?› Liika mainosmaisuus ajaa pois› Etusivu tunnistetaan isosta kuva-alueesta, mutta siihen ei

välttämättä silti kiinnitetä huomiota• Banner blindness

Page 36: Aivot ja visuaalisuus - miksi designilla on väliä

KATSOTKO MAINOKSIA?

Page 37: Aivot ja visuaalisuus - miksi designilla on väliä

MIELIKUVA

Page 38: Aivot ja visuaalisuus - miksi designilla on väliä
Page 39: Aivot ja visuaalisuus - miksi designilla on väliä
Page 40: Aivot ja visuaalisuus - miksi designilla on väliä

MIKSI BRÄNDIMIELIKUVAN LUOMA TUNNE ON TÄRKEÄ?

PAREMPI KÄYTTÖKOKEMUS PAREMPI KONVERSIO PAREMPAA LIIKETOIMINTAA

DESIGNIN VAIKUTUS BRÄNDIMIELIKUVAAN PAREMPI BRÄNDIPAREMPAA LIIKETOIMINTAA

Page 41: Aivot ja visuaalisuus - miksi designilla on väliä

KAIKEN MEIDÄN TEKEMISEN TULEE TUKEA ASIAKKAAN LIIKETOIMINTAA

Page 42: Aivot ja visuaalisuus - miksi designilla on väliä