Page History

Kirjat

Joshua Porter: Designing for the Social Web
Bill Scott & Theresa Neil: Designing Web Interfaces

Työt

Pecha Kucha -presentaatio

Designing Web Interfaces -tiivistelmä
Designing for the Social Web -tiivistelmä

5.4.2011

Nonni, esitelmät pidetty ja kurssi pulkassa. Pecha Kucha -esitelmä oli melko hankala, mutta hauska kokeilu.

Jatkoa ajatellen, muistiinpanoja kannattaa olla mahdollisimman vähän, koska niitä ei todellakaan kerkeä lukea esitelmän aikana.

Presentaatio löytyy tästä.

P.S. Eikä se äänitekään niin pahalta kuulostanut, kuin pelkäsin

3.4.2011

Designing Web Interfaces -kirjan tiivistelmä löytyy kokonaisuudessaan tästä.

28.3.2011

Päiväkirja on jäänyt hieman vähemmälle huomiolle, pahoittelut siitä.
Referoin Designing for the Social Web -kirjasta johdannon ja ensimmäisen luvun.

Myös toisesta kirjasta, Designing Web Interfaces, löytyy paria lukua vaille valmis tiivistelmä.

Kirjassa käsitellään melko perusasioita, mutta niihin syvennytään tarkkaan. Tämän ansiosta kirjasta on noussut esiin hyviä pointteja.

3.3.2011

Bill Scott & Theresa Neil: Designing Web Interface

Preface

Kirja on keskittynyt vuorovaikutteisen suunnittelun toimintaperiaatteisiin. Se tarjoaa myös tietoa informaatioarkkitehtuurista ja visuaalisesta suunnittelusta.

Se tarjoaa vaihtoehtoja internetin käyttöliittymäsuunnittelulle, jota usein vaivaa alkeellisuus.
Suunnittelussa ei osata käyttää vuorovaikutteisia toimintatapoja, vaan turvaudutaan perusmalleihin:

• Klikkaa linkkiä
• Täytä/lähetä lomake

Tämän lisäksi, jos jokainen toiminta vaatii sivun uudelleenlatauksen, saumaton käyttökokemus on mahdotonta saavuttaa.

Kirja on jaoteltu kuuteen suunnittelun toimintamalliin.

1. Make it Direct
2. Keep it Lightweight
3. Stay on the Page
4. Provide an Invitation
5. Use Transitions
6. React Immediately

Principle One: Make it Direct

Suunnittele sivuston käyttöliittymä mahdollisimman suoraviivaiseksi.
"Where there is output, let there be input".

Chapter 1: In-Page Editing

Mikäli käyttäjä voi editoida sivun sisältöä, tuo editointi mahdollisuudet suoraan sivun näkymään, sen sijaan, että tekisit erillisen muokkausnäkymän.
Yleisiä sivun sisäisiä muokkausmenetelmiä:

1. Yksittäisen kentän editointi (single-field inline edit)
2. Monen kentän samanaikainen editointi (multi-field inline edit)
3. Editointi modaalisessa ikkunassa (overlay edit)
4. Taulukko editointi (table edit)
5. Ryhmän editointi (group edit)
6. Moduulien asetukset (module configuration)

26.2.2011

Joshua Porter: Designin for the Social Web

7. Design for Sharing

Jakaja:

• Mainostaa puolestasi
• Pystyy vaikuttamaan puheillaan paremmin, kuin sinä itse (objektiivisuus)
• Kertoo sinulle, mikä sovelluksessasi on jakamisen arvoista

Mitä jaamme:

• Ideoita, jotka tukevat uskomuksiamme
• Ideoita, jotka yllättävät
• Ideoita, jotka helpottavat selittämään jotakin, mitä jo tiedämme
• Asioita, joista tiedämme toisen hyötyvän
• Työkaluja, jotka helpottavat työurakkaa
• Hauskoja asioita, kuten kuvia/videoita
• Asioita, jotka saattavat meidät hyvään valoon

8. The Funnel Analysis

"Suppilo analyysissä" tarkastellaan, kuinka moni käyttäjistä etenee sovelluksen kustakin vaiheesta seuraavaan.

Kuva: Joshua Porter: Designin for the Social Web s. 165/169, 2008.

Vasen suppilo:

• Sivuston kävijöistä (100%) kirjautuu koekäyttäjäksi 70%
• Koekäyttäjistä 50% tulee aktiivisia käyttäjiä
• Aktiivisista käyttäjistä 35% alkaa maksaviksi asiakkaiksi
• Maksavista asiakkaista 20% uusii tilauksensa

Ensimmäisen suppilon "Trial sign-up" -vaihe on jaoteltu omaksi suppilokseen oikean puoleisessa kuvassa.

Sovelluksen käyttöä mitattaessa on tärkeää määritellä oikeat mittarit, joista on eniten hyötyä kyseiselle sovellukselle.

Yleisimpiä mittareita:

• Uniikit kävijät
• Palaavat käyttäjät / toistuvat käynnit
• Sivulla käytetty aika
• Pagerank (Googlen mittari sivuston relevanttiudelle)
• Rekisteröitymiset
• Syötteen tilaaminen (esim. RSS)
• Klikkimäärät ulkoisille sivuille

Designing for the Social Web

Kirja kokonaisuudessaan oli helppo lukea ja tarjosi paljon ajateltavaa.
Se antoi näkökulmia, joita ei aina tule ajatelleeksi, koska ne ovat suunnittelijalle usein itsestäänselvyyksiä.
Tarkemmin näihin asioihin syventymällä voi kuitenkin löytää uudenlaisia lähestymistapoja ja suunnittelumalleja.

26.2.2011

Joshua Porter: Designin for the Social Web

6. Design for Collective Intelligence

Sovelluksen täytyy mukautua aikaansa. Alussa pienelle käyttäjäkunnalle tarkoitettu ominaisuus voi toimia hyvin,
mutta käyttäjämäärän kasvaessa siitä saattaa olla enemmän haittaa, kuin hyötyä.

Ainoa pysyvä asia on muutos.

Collective Intelligence = Keräämällä käyttäjien käyttäytymistapoja, saadaan aikaan yleinen mielipide.

• Käyttäytymistapoja: Tykkää, tallenna suosikkeihin, jaa kavereille, raportoi (epäsovinnaista sisältöä) ym.

Sopeutuvan sovelluksen toimintaan kuuluu 3 askelta:

• Toiminta
  Käyttäjä lisää sisältöä sovellukseen. Esim. Amazonissa kirjoittaa arvostelun
• Esitystapa
  Käyttäjän luoma sisältö esitetään muille. Esim. Amazonissa tuoreimmat, "Most Recent"
• Palaute
  Muut käyttäjät antavat palautetta sisällön laadusta. Esim. Amazonissa "Is this Helpful?", "Report this", ja "Comment"

Sovellukselle on elintärkeää valikoida toimintaa jollakin tavalla, estääkseen esim. spammin ja epäsovinnaisen sisällön, sekä palvellakseen parhaalla tavalla yleisöä.

• Informatiiviset esteet
  Esteettiset ratkaisut ja copytekstit houkuttelevat tiettyä käyttäjäkuntaa
• Muodolliset esteet
  Käyttäjän täytyy rekisteröityä palveluun tai ladata tietty ohjelmisto
• Pakottavat esteet
  Sovellus hyväksyy ainoastaan tiettyjä käyttäjiä. Sisään vain kutsulla. Esim. asmallworld.net, joka hyväksyy vain rikkaita ja kuuluisia käyttäjiä

25.2.2011

Joshua Porter: Designin for the Social Web

5. Design for Ongoing Participation

1. Tiedosta oikeat motivaatiot sovelluksen käytölle
2. Rakenna käyttöliittymä, joka tukee ja kannustaa näitä motivaatioita

Sovelluksen käytön motivaatio:

• Identiteetti
  Käyttäjä rakentaa verkossa itse oman identiteetinsä
• Ainutlaatuisuus
  Käyttäjän panostus tuntuu merkittävältä ja uniikilta
• Vastavuoroisuus
  Käyttäjä haluaa antaa jotakin takasin, tai toivoo itse saavansa vastapalveluksen työstään
• Maine
  Maineen kasvattaminen, "kilpailu" kavereiden kesken, suhteiden luominen/ylläpito
• Vaikuttamisen tunne
  Hyvänolontunne hyvästä työstä
• Kontrolli
  Käyttäjä hallitsee mitä tietoja itsestään jakaa
• Omistajuus
  Käyttäjälle syntyy tunneside luomaansa sisältöön

24.2.2011

Joshua Porter: Designin for the Social Web

4. Design for Sign-Up

Käyttäjä pitää saada vakuutettua sovelluksen hyödystä ensimmäisten 8 sekunnin aikana.
Pidä esittely yksinkertaisena ja selkeänä, kerro mistä on kyse ja korosta hyötyjä käyttäjälle.

Kuka, mitä, missä, milloin, miksi ja miten?

• Kenelle sovellus on tarkoitettu
• Mitä se tekee
• Missä sitä voi käyttää (onko esim. mobiiliversiota)
• Milloin sitä voi käyttää (onko selainpohjainen)
• Miksi se on tärkeä
• Miten se toimii / Miten aloitan

Mikäli käyttäjä on saatu vakuutettua sovelluksen hyödyistä, seuraava askel on tehdä sovellukseen kirjautumisesta mahdollisimman estotonta.
Parhaassa tapauksessa käytön voi aloittaa heti ja kirjautuminen tehdään vasta siinä vaiheessa, kun käyttäjä kokee sovelluksen hyväksi ja haluaa tallentaa tietonsa/tekemänsä työn.

24.2.2011

Joshua Porter: Designin for the Social Web

3. Authentic Converstations

Asiakaspalvelu on nykypäivän markkinointia.

Aito keskustelu käyttäjien kanssa synnyttää:

1. Tyytyväisempiä asiakkaita
   • Osoittaa, että välität
   • Kasvattaa tietoisuutta ja kiinnostusta
2. Parempia sovelluksia
   • Mahdollistaa nopean reagoinnin
   • Antaa tutkimustietoa sovelluksen toiminnasta/käyttömahdollisuuksista
   • Kasvattaa intohimoisten käyttäjien määrää, jotka antavat mielellään palautetta
   • Tekee käyttäjistä investoijia (vrt. open source)

• Panosta aitoon keskusteluun
• Herätä mielenkiinto keskittymällä pieneen kohderyhmään
• Ylläpidä kiinnostusta ja rakenna luottamusta reagoimalla positiivisesti negatiiviseen palautteeseen

23.2.2011

Joshua Porter: Designin for the Social Web

2. A Framework for Social Web

Toinen kappale käsittelee AOL -metodin käyttämistä suunnittelun apuna.

Sovelluksista voi helposti tulla suunnitteluvaiheessa valtavan suuria ja monimutkaisia.
Tärkeintä on keskittyä sovelluksen ensisijaiseen tarkoitukseen ja karsia, mieluummin kuin lisätä, ominaisuuksia.

AOL = Activities, Objects, Features

1. Keskity ensisijaiseen tarkoitukseen/aktiviteettiin (mitä käyttäjä tekee sovelluksessa?)
   Esim. Amazon: Shoppailu
2. Määritä sosiaaliset objektit, joihin aktiviteetti kohdistuu
   Esimerkkejä:
   YouTube: Videot
   Flickr: Kuvat
   Twitter: Viestit ("tweetit")
3. Pidä ominaisuudet hallinnassa. Mieti mitä objekteilla voidaan tehdä.
   Esim:
   Objekti: Video
   Ominaisuudet: Toista, pysäytä, muokkaa, tallenna, lataa, jaa kavereille, kommentoi, linkitä/sisällytä esim. blogiin (embed)

AOL -metodia on hyvä käyttää suunnittelun alkuvaiheessa, kun kartoitetaan sovelluksen mahdollisia ominaisuuksia.
Tärkeää on kuitenkin pitää kokoajan mielessä kysymys; onko ominaisuus välttämätön.
Steve Jobsin sanoin, "Innovation is not about saying yes to everything. It's about saying NO to all but the most crucial features".

21.2.2011

Joshua Porter: Designin for the Social Web

Introduction

Kirja alkaa johdantokappaleella, jossa käsitellään mm. sivuston/sovelluksen käytön elinkaarta.
Elinkaareen kuuluu 5 vaihetta: tietämättömyys, kiinnostus, ensimmäinen käyttökerta, säännöllinen käyttö, intohimoinen käyttö.

Kuva: Joshua Porter: Designin for the Social Web s. 9 (ix), 2008.

Jokaisen vaiheen välissä on "esteitä", jotka täytyy ylittää, voidakseen siirtyä seuraavaan vaiheeseen.
Tämän tiedostamalla suunnittelijan on helpompi pyrkiä ja saavuttaa tavoiteltu viimeinen vaihe.

1. The Rise of the Social Web

Ensimmäinen kappale käsittelee sosiaalisen webin nousua ja ominaispiirteitä, sekä ihmispsykologiaa.
Kappale alkaa ns. Amazon -efektin esittelyllä. Amazonia käyttävät ihmiset turvautuvat Amazoniin, ostivatpa he tuotteen palvelusta tai ei.
Heille saattaa olla alusta asti selvää, että ostavat tuotteen muualta, mutta silti he menevät ensin Amazoniin.
Tämä johtuu Amazonin käyttäjien kirjoittamien arvostelujen valtavasta määrästä.
Amazonin käyttäjät menevät palveluun hakemaan puolueettomia käyttökokemuksia muilta kaltaisiltaan.

Mielinkiintoisena seikkana Amazon -efektissä nousi esiin, että käyttäjät voivat rullata sivua alas päin jopa 6000px,
jotta pääsevät muiden käyttäjien kommentteihin. Se on selvästikin siis sisältöä, jota käyttäjät haluavat nähdä.

Normaalia sivustoa luettaessa suurin huomio keskittyy n. 300px korkeuteen.
Tämä on tärkeää ottaa huomioon sivuston käytettävyyttä ajatellen.

Kuva: Jakob Nielsen, 2010. http://www.useit.com/alertbox/scrolling-attention.html