| Wiki Markup |
|---|
{section}
{column:width=70%}
<!-- v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} --><!-- /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-qformat:yes; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin:0cm; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Calibri","sans-serif"; mso-bidi-font-family:"Times New Roman";} -->
h4. Bill Scott & Theresa Neil:
h1. Designing Web Interaction - Principles and Patterns for Rich Interactions
h2. Preface
Suurimman osan internetin historian ajasta, käyttöliittymäsuunnittelua on vaivannut alkeellisuus.
Useimmat sivustot on rakennettu kahdella toiminnallisuudella:
* Klikkaa linkkiä
* Täytä/lähetä lomake
Näillä toiminnallisuuksilla ei vielä saada aikaan mielenkiintoista tai antoisaa elämystä sivun käyttäjälle. Lisätään tähän vielä sivun uudelleenlataus aina, kun käyttäjä tekee jotakin, ja saumaton käyttökokemus on mahdotonta saavuttaa.
Käyttäjäkokemuksen parantamiseksi voidaan käyttää kuutta suunnittelun toimintamallia:
# _Make it Direct_ \- Tee käyttökokemuksesta suoraviivaista
# _Keep it Lightweight_ \- Pidä sivuston käytettävyys kevyenä
# _Stay on the Page_ \- Pysy sivulla, vältä uudelleenlatauksia
# _Provide an Invitation_ \- Käytä kutsuja parantaaksesi löydettävyyttä ja saavutettavuutta
# _Use Transitions_ \- Käytä siirtymiä (animattioita, efektejä) tehosteina
# _React Immediately_ \- Reagoi välittömästi
h2. Make it Direct
Usein verkossa sisältö näytetään yhdellä sivulla ja muokataan toisella. Mahdollistamalla sisällön näyttämisen ja muokkauksen samassa näkymässä, käyttökokemuksesta saadaan suoraviivaisempaa.
Tapoja sisällön muokkaukseen yhdessä näkymässä:
# _In-Page Editing_ \- sisällön muokkaus sivun sisällä
# _Drag and Drop_ \- sisällön raahaminen hiirellä
# _Direct Selection_ \- toimintojen kohdistaminen suoraan valittuun kohteeseen
Nämä kaikki ovat tuttuja toimintoja työpyötäsovelluksista, mutta harvinaisempia verkossa.
h4. 1. In-Page Editing
Verkkosisältö on perinteisesti ollut vain luettavaa. Mikäli sisältöä pystyy muokkaamaan, se tehdään lomakkeen kautta. Mahdollistamalla sisällön muokkauksen suoraan siinä näkymässä, jossa se normaalisti esitetään, käyttökokemuksesta saadaan suoraviivaista ja luontevaa.
*{_}Single-Field Inline Edit{_}* *ja* *{_}Multi-Field Inline Edit{_}{*}{*}_ _*
Sen sijaan, että sisällön muokkaus tapahtuisi erillisessä ikkunassa, se voidaan toteuttaa alkuperäisessä näkymässä. Vietäessä hiiri esimerkiksi muokattavan otsikon päälle, indikaattori ilmestyy ja kehottaa käyttäjää painamaan otsikkoa päästäkseen muokkaustilaan. Muokattuaan otsikkoa käyttäjä painaa ”tallenna”-nappia, ja palaa esikatselu tilaan. Tämä kaikki tapahtuu samassa ikkunassa, ilman sivun uudelleen latauksia.
Ensimmäisiä tämän muokkausmallin hyödyntäjiä oli kuvapalvelu Flickr. Palvelu todistaa mallin toimivuuden, sillä se on pysynyt sellaisenaan vuosien ajan.
Huomioitavia seikkoja kuitenkin löytyy, käytettäessä sivun sisäistä muokkausmallia;
# Luettavuus
# Löydettävyys
# Saavutettavuus
Usein sisällön muokkauksen mahdollistava toiminto on piilotettu hiiritoiminnon taakse. Käyttäjän pitää viedä hiiri muokattavan sisällön päälle, ennen kuin järjestelmä ilmoittaa, että sisältöä voi muokata klikkaamalla. Tämä vaikuttaa toiminnon löydettävyyteen ja tästä syystä on hyvä sisällyttää muokattavan kohteen viereen myös kokoajan näkyvillä oleva ”muokkaa”-linkki. Näkyvä linkki helpottaa myös muokkausmahdollisuuden saavutettavuutta, koska se toimii varmemmin kaikilla käyttöalustoilla. Käyttöliittymän pitää olla tasapainossa löydettävyyden ja luettavuuden kanssa. Mikäli jokaisen objektin vieressä tai päällä on muokkaus-nappi, heikentää se sisällön luettavuutta.
Muokkaustilan ja esikatselutilan näkymästä toiseen vaihtamisessa tulisi olla mahdollisimman vähän häiriötekijöitä. Tällöin sivun sisäistä muokkausmallia on hyvä käyttää tilanteissa, joissa muokattavan sisällön suhde muuhun sisältöön on tärkeä. Kun käyttäjä näkee suoraan, miten muokkaus vaikuttaa sisällön kokonaisuuteen, nopeuttaa se työtä huomattavasti.
*{_}Overlay Edit{_}*
Mikäli muokattavaa sisältöä tai muokkausmahdollisuuksia on niin paljon, että sivun sisäinen muokkausmalli menettää hyötynsä, voidaan käyttää pop-up-ikkunaa tai ”dialogia” tuomaan muokkausmahdollisuudet nopeasti käyttäjälle. Käyttäjä pysyy samalla sivulla, mutta muokkaustoiminnot ilmestyvät sisällön päälle, omalle tasolleen.
*{_}Table Edit{_}*
Muokattaessa taulukkoa, luettavuudella on tärkeä rooli. Muokattavat taulukot noudattavat usein Microsoft Excelin toimintatapoja. Käyttäjän viedessä hiiren solun päälle, hiiri vaihtuu tekstikursoriksi indikoiden muokkausmahdollisuutta. Klikattaessa solun ulkonäkö vaihtuu (esim. reunukset paksunevat) ja käyttäjä siirtyy muokkaustilaan.
*{_}Group Edit{_}*
Listoissa tai vastaavissa ryhmissä, joissa on monta samankaltaista objektia, on hyvä käyttää ryhmämuokkausta. Sen sijaan, että jokaisen objektin kohdalla olisi kokoajan näkyvissä muokkaustoiminto, tarjoa yksi toiminto koko ryhmälle. Käyttäjän siirtyessä muokkaustilaan, voidaan muokkaustoiminnot tuoda erikseen jokaisen objektin kohdalle. Näin esikatselutila on huomattavasti selkeämpi ja luettavampi.
Muokkaustilaan ja takaisin esikatselutilaan siirtyminen tulisi tapahtua samalla kaavalla, jotta käyttökokemuksesta saadaan luontevaa. Toiminnot tulee myös olla selkeästi indikoitu.
*{_}Module Configuration{_}*
Useat sivut, kuten Google ja Yahoo tarjoavat käyttäjilleen mahdollisuuden muokata aloitussivun sisältöä moduuleilla. Muokattaessa moduulien asetuksia, kannattaa harkita myös edellä mainittua ryhmämuokkausta, mikäli näkymä muuten on liian täynnä ja luettavuus kärsii. Moduulien muokkausmahdollisuuksiin sisältyy yleensä moduulin nimi, näytettävän sisällön määrä (esim. uutisotsikoiden) ja moduulien järjestys.
h4. 2. Drag and Drop
”Vedä-ja-pudota” \-toiminto oli yksi Macintoshin innovaatioista, joka julkaistiin vuonna 1984. Toiminnon ilmestymistä verkkosovelluksiin saatiin odottaa vuoteen 2000 asti, jolloin pieni startup-yritys, HalfBrain julkaisi nettipohjaisen presentaatio-sovelluksen nimeltä BrainMatter. Myöhemmin Yahoo Mailin pohjana toiminut, niin ikään startup-sovellus, Oddpost käytti myös drag and drop menetelmää sähköpostien siirtämisessä kansiosta toiseen. Aikana ennen Ajaxia, käyttäjän tila objektin pudottamisen jälkeen oli hankalaa tallentaa ilman sivun uudelleen latausta. Tänä päivänä drag and drop \-menetelmä on kuitenkin helppo toteuttaa ja sitä tukee suurin osa selaimista.
Drag and drop \-menetelmä käsittää monta eri vaihetta, joista jokainen voidaan toteuttaa eri tavalla. Yleisimpiä käyttökohteita menetelmälle ovat: moduulien järjestäminen, listan järjestäminen, liikuteltavat objektit (joiden suhteita toisiinsa voidaan muuttaa) ja objektiin kohdistuvat toiminnot (esim. objektin poistaminen vetämällä se roskakoriin).
Drag and drop \--toiminnolla voi olla peräti 15 eri vaihetta. Oheisessa taulukossa on käytetty yhdeksää vaihetta, jotka on otettu suunnittelussa huomioon. !designing_web_interfaces_dnd.jpg!
h4. 3. Direct Selection
Suora valinta on tuttu käsite työpöytäsovelluksista aina Macintoshin alkuajoista asti. Työpöydällä useimmiten käytetty tapa on objektin valinta. Tällöin valinta tehdään suoraan klikkaamalla objektia, kuten työpöydän pikakuvaketta. Verkossa tutuin suoran valinnan tapa on ”kytketty” valinta (toggle selection), jossa objekti valitaan rastittamalla siihen linkitetty valintalaatikko (checkbox).
Suoran valinnan menetelmät:
* _Toggle selection_ \- kytkettävä valinta
* _Collected selection_ \- koottu valinta
* _Object selection_ \- objektin valinta
* _Hybrid selection_ \- kytkettävän valinnan ja objektin valinnan yhdistelmä
Hybridi valintaa käytetään esim. useissa sähköpostisovelluksissa, jossa viestin voi valita joko rastittamalla ruudun tai klikkaamalla viesti \-objektia (rivi, jossa lukee otsikko, lähettäjä ym.). Sähköpostisovellukset voivat käyttää myös koottua valintaa, jonka avulla käyttäjä voi valita viestejä usealta sivulta. Koottuja valintoja varten on hyvä suunnitella ns. valinta laatikko, jossa valitut kohteet näkyvät kokoajan, vaikka siirrytään sivulta toiselle. Näin käyttäjälle ei jää epäselväksi, onko hänen edellisellä sivulla tekemänsä valinnat vielä voimassa. Toinen vaihtoehto on ilmoittaa joka sivulla, kuinka monta kohdetta valinnassa tällä hetkellä on.
h2. Keep it Lightweight
Digg \--sivuston tärkein ominaisuus on ”digg it” \--painike, jolla käyttäjät voivat diggata uutisia. Kun Digg vuonna 2005 muutti diggaus ominaisuuden kaksi-vaiheisesta yhden napin painallukseen, diggausten määrä lähti hurjaan nousuun. Ajaxilla toteutettu uudistus oli varsin pieni, mutta näytti selkeästi sen, kuinka tärkeätä käyttöliittymän on olla mahdollisimman kevyt.
h4. 4. Contextual Tools
Työpöytäsovellukset usein erottavat toiminnallisuudet sisällöstä. Työkalupalkit ja tehtäväpalkit ovat omilla paikoillaan, eivät suorassa yhteydessä sisältöön. Netin alkuvaiheessa toimintoja ei juuri ollut, vaan netti oli hyvin sisältökeskeistä. Tämän päivän verkkosovellukset lähenevät kuitenkin kokoajan enemmän työpöytäsovelluksia, eikä pelkkä ”lähetä” \--nappula enään riitä.
Fittsin lain mukaan käyttökokemus paranee, mikäli toiminnallisuudet ovat tarpeeksi lähellä kontekstia ja tarpeeksi suurena esitettynä.
Kontekstuaaliset työkalut voivat olla:
\- Aina näkyvillä
\- Aktivoituvia hiiren toiminnosta
\- Kytkettynä näkyviin tai pois
\- Monitasoisia
\- Esitettynä toissijaisessa valikossa
Mikäli toiminto on sovelluksen kannalta elintärkeä, sen on hyvä olla aina näkyvillä ja tarpeaksi suurella esitettynä. Esimerkkinä toimii hyvin jo aiemmin mainittu Digg, joka perustuu käyttäjien diggailuun. ”Digg it” \--painike on suuri ja näkyvin käyttöliittymän osa. Vähemmän tärkeät toiminnot ovat nekin koko ajan näkyvillä, mutta huomattavasti pienemmällä ja sellaiseen paikkaan sijoitettuina, että ne eivät häiritse käyttökokemusta.
Mikäli sovelluksen toiminnot ovat vähemmän tärkeitä, ja sisällöllä ja luettavuudella on tärkeämpi rooli sovelluksen kannalta, toiminnot voidaan piilottaa hiiren toiminnon taakse. Tämä on yleensä toteutettu niin, että käyttäjän viedessä hiiren objektin päälle, toiminnot ilmestyvät läheisyyteen ”hover” \--efektinä. Hover \--toimintoa käytettäessä tulee välttää päällekkäisen tason käyttämistä (overlay). Mikäli toiminnot ilmestyvät omana tasonaan sisällön päälle, navigointi vaikeutuu ja sovelluksen käyttö hidastuu. Vaikka toiminnot eivät ole siis oletuksena näkyvissä, niille kannattaa varata tyhjää tilaa, että sisältö ei peity tai pompi toimintojen ollessa näkyvillä. Hover \--toiminnon sijaan voidaan myös käyttää ns. kytkintä (nappi, linkki), jolla toiminnot saadaan näkyviin tai pois näkyvistä. Näin käyttäjä voi itse valita, milloin pitää toiminnot näkyvissä, eivätkä ne häiritse luettavuutta silloin, kun niitä ei tarvita.
Työkaluissa käytetään usein ikoneita tekstin sijaan. Ikoneiden kanssa kannattaa kuitenkin olla varovainen ja käyttää ainoastaan tunnettuja symboleja. Mikäli käyttäjä joutuu pysähtymään jokaisen ikonin kohdalle nähdäkseen työkaluvihjeen (jota ei aina edes ole asetettu), käyttö hidastuu ja vaikeutuu huomattavasti.
Monitasoiset työkalut voivat olla hyödyllisiä, mikäli toimintoja on paljon, eikä haluta käyttää hover \--efektiä (joka voi olla häiritsevä esim. listojen kohdalla). Monitasoinen työkalu voi ns. ”mutton” (menu + button) eli painikkeen ja valikon yhdistelmä, jossa painike toimii ensisijaisena toimintona, jonka vieressä sijaitsee alasvetovalikko vähemmän tärkeille ominaisuuksille.
Toissijainen valikko ilmestyy perinteisesti hiiren oikealla napilla. Verkossa tämän valikon käyttö on hankalaa, koska käyttäjä on tottunut pääsemään hiiren oikealla napilla selaimen omiin valikoihin. Mikäli tätä valikkoa kuitenkin käytetään, on se tärkeää tyylitellä selkeästi erinäköiseksi, jotta käyttäjälle ei jää epäselväksi, mihin hän toiminnoillaan vaikuttaa.
h2. Stay on the Page
Harper Perennialin julkaisemassa kirjassa \_”Flow: The Psychology of Optimal Experience”,\_ Mihaly Csikszentmihalyi määrittelee optimaalisen kokemuksen seuraavasti:
_The times when people enter a state of concentration so focused it creates a state of effortless control_
Jokainen keskeytys häiritsee optimaalista kokemusta. Verkossa tämä on hyvin yleistä, koska useat sivustot käyttävät sivun uudelleen latausta käyttäjän toiminnon jälkeen. Näin ollen käyttökokemus häiriintyy.
Sivun uudelleen lataus paitsi keskeyttää toiminnan, häiritsee myös käyttäjän havaintokykyä. Ilmiötä kutsutaan nimellä _Change Blindness_, muutos sokeus.
Ilmiötä voi testata itse osoitteessa: [http://people.usd.edu/~schieber/coglab/Rensink.html|http://people.usd.edu/%7Eschieber/coglab/Rensink.html]
Demonstraation asetuksia pääsee muokkaamaan hiiren oikealla painikkeella.
Demo todistaa, että pienet muutokset ovat lähes mahdottomia huomata sivun uudelleen latauksen yhteydessä. Mikäli sivu ei lataudu kokonaan uudelleen, on muutos selkeästi havaittavissa.
h4. 5. Overlays
Sivulatauksen sijaan uusi sisältö voidaan esittää näkymän päällä omassa tasossaan, ikään kuin kevyenä pop-up-ikkunana. Selaimen omia pop-up ikkunoita tulee välttää, koska ne ovat huomattavasti raskaampia, eikä ulkonäköön pysty vaikuttamaan. Myöskin JavaScript \--hälytykset voidaan korvata kevyillä tasoilla. Hälytyksien haittapuolena on eri käyttöliittymien eroavaisuudet. Windows \--ympäristössä hälytykset tulevat keskelle näyttöä, kun taas Machintosilla hälytykset liukuvat yläpalkin alta. Näin ollen käyttökokemus on erilainen eri käyttöliittymissä.
_Overlay_ \--ikkunoiden käytössä voidaan muu alemmalla tasolla oleva sisältö tummentaa, jolloin käyttäjän huomio keskittyy täysin ylempään tasoon. Tätä kutsutaan _Lightbox_ \--efektiksi, ja sitä käytetään usein tärkeän sisällön esittämisessä tai kuvagallerioissa.
Overlay \-ikkuna voi olla modaalinen, jolloin käyttäjältä vaaditaan jokin toimenpide päästäkseen takaisin. Toimenpide voi olla esim. vastaus ”Lähetä” tai ”Peruuta”. Ei-modaalisesta ikkunasta käyttäjä sen sijaan voi poistua klikkaamalla ikkunan ulkopuolelle.
Mikäli overlay \--ikkunaa käytetään esim. tuotteen lisätietojen esittämiseen, tulee lightbox \--efektiä välttää, koska se häiritsee käyttökokemusta ja hidastaa prosessia. Sen sijaan tulee ottaa huomioon ikkunan aktivoimisen ja sulkemisen symmetrisyys ja viive. Mikäli ikkuna aktivoituu, kun käyttäjä vie hiiren objektin päälle, tulee välissä olle noin puolen sekunnin viive, jonka ajan hiiren pitää olla objektin päällä paikoillaan. Näin vältytään ns. hiiriloukulta. Kuvittele tilanne, jossa sivulla on rivi objekteja, esim. elokuvan kansia. Käyttäjän viedessä hiiren kannen päälle, ilmestyy saman tien, ilman viivettä, lisätiedot elokuvasta overlay \--ikkunaan. Navigointi hankaloituu huomattavasti, kun käyttäjä liikuttaa hiirtä kansien yli haluamansa kannen päälle ja ikkunoita pompahtelee jatkuvasti esiin. Symmetrisyydellä tarkoitetaan sitä, että mikäli samaisessa tilanteessa elokuvan lisätiedot tulevat esiin hiiren tullessa kannen päälle, tulee tietojen myös kadota, kun hiiri poistuu kannen päältä (eikä esim. ”Sulje” \--nappulasta).
h4. 6. Inlays
Uusi sisältö voidaan esitää kontekstissä sivuun upotettuna. Näin uusi sisältö ei peitä mitään, kuten pop-up dialogit, vaan laajentaa nykyistä näkymää. Upotetussa sisällössä käytetään yleisesti liuku \--efektiä, jolloin uusi sisältö liukuu näkyviin.
Upotettua sisältöä käytetään usein sivun asetuksissa tai listauksissa. Välilehdet voidaan myös lukea upotetuksi sisällöksi.
h4. 7. Virtual Pages
Virtuaali sivuja voidaan käyttää useilla tavoilla. Tarkoituksena on korvata perinteiset sivutukset, kun sisältöä on runsaasti, esim. hakutuloksissa tai sähköpostisovelluksissa.
*Virtuaalinen vieritys*
Yksi tapa on käyttää virtuaalista vieritystä, jolloin sisältö latautuu käyttäjän vierittäessä sivua alas. Oletetaan, että näkymässä on kerrallaan 10 artikkelia, esim. sähköpostiviestiä. Päästäkseen seuraavaan kymmeneen viestiin, käyttäjän tarvitsee vain rullata sivua alas päin, jolloin sovellus hakee seuraavat viestit, eikä näin ollen tarvita sivustusta. Virtuaalisessa vierityksessä on tärkeää ottaa huomioon vierityspalkin käyttäytyminen. Mikäli on todennäköistä, että käyttäjä haluaa päästä listan loppuun, eikä tuloksia ole hirveää määrää, on vierityspalkin hyvä käsittää kaikki tulokset. Mikäli viimeiset tulokset eivät ole tärkeitä, kuten esim. hakukoneissa, vierityspalkin on hyvä päivittyä sitä mukaan, kun lisää tuloksia haetaan. Tässä tapauksessa käyttäjän vierittäessä palkin aivan alas, tulee esiin seuraavat tulokset ja palkki nousee ylös päin.
*Sivun sisäinen sivutus*
Sivustusta voidaan käyttää niin, että koko sivu ei lataudu uudelleen, vain ainoastaan osa, jossa tieto vaihtuu. Esimerkiksi sähköpostisovelluksessa viestejä selatessa ainoastaan viestit latautuvat siirryttäessä sivulta toiselle, muun käyttöliittymän pysyessä staattisena. Sivun sisäistä sivutusta käytetäessä on tärkeää ottaa huomioon, että selaimen ”takaisin” \--nappi huomio sisäisen sivutuksen.
*Vieritettävä sivutus*
Vieritettävä sivustus on virtuaalinen vieritys yhdistettynä sivun sisäiseen sivutukseen. Yleisin tätä lähestymistapaa käyttävä sovellusmalli on ns. karuselli.
Karusellissa sisältö on jaettu virtuaalisiin sivuihin, joita voidaan ohjaimilla vierittää vasemmalle ja oikealle. Yleinen karusellin käyttökohde on valokuvat, kansikuvat ym.
*Panorointi*
Yksi tapa luoda virtuaalinen ympäristö, on käyttää panorointia. Käyttäjä pystyy liikkumaan ympäristössä hiiren avulla raahaamalla näkymää haluamaansa suuntaan. Tunnetuimpia sovelluksia, jotka käyttävät panorointia, ovat karttasovellukset, kuten Google Maps.
Panorointia käytetään myös käyttöliittymissä, joita ohjataan eleillä, esim. kosketusnäytölliset puhelimet.
*Zoomattava käyttöliittymä*
Zoomattavan käyttöliittymän avulla voidaan luoda esimerkiksi suuri valokuvaseinä, jossa yksittäisen valokuvan tietoihin päästään klikkaamalla kuvaa, jolloin näkymä zoomaa lähemmäksi. Menetelmän avulla voidaan esittää suuria määriä informaatiota yhdellä sivulla ja tarjota käyttäjälle erilainen käyttökokemus.
h4. 8. Process Flow
Monimutkaiset tapahtumasarjat tarvitsevat usein ohjeistusta ja monia vaiheita. Kaikkia eri vaiheita ei kuitenkaan tarvitse esittää erillisillä sivuillaan. Käyttäjä voidaan pitää yhdellä sivulla seuraavilla menetelmillä.
*Interaktiivinen prosessi*
Monen tapahtumasarjan seuraava vaihe on riippuvainen edellisessä vaiheessa tehdystä päätöksestä. Interaktiivinen prosessi esittää kaikki vaiheet yhdellä sivulla, mutta niin, että vaihtoehdot muuttuvat dynaamisesti, tehtyjen päätösten mukaan. Esimerkkinä verkkokauppa, joka myy t-paitoja: Ensimmäisessä vaiheessa käyttäjä valitsee värin ja toisessa vaiheessa koon. Interaktiivinen prosessi reagoi käyttäjän valintaan ja näyttää heti, mitä kokoja käyttäjän valitsemasta väristä on jäljellä, eikä näin synny edestakaista liikettä vaiheiden välillä.
*Upotettu prosessi*
Ostoskori on toinen verkkokaupoissa yleinen ominaisuus, johon kuuluu monta vaihetta; tuotteen lisääminen, muokkaaminen (kpl määrä), tuotteen poistaminen, tilauksen tekeminen, tietojen täyttö, maksaminen, vahvistaminen. Ostokori on usein upotettuna sivuun, niin että tuotteen lisääminen tai poistaminen ei tarvitse erillistä sivulatausta.
*Prosessi overlay \--ikkunan sisällä*
Monivaiheisia tapahtumasarjoja voidaan toteuttaa overlay \--ikkunoiden sisällä. Tärkeitä huomioitavia asioita:
\- Aloita visuaalisella, kevyellä näkymällä
\- Jätä raskaat näkymät, kuten laskutustiedot viimeiseksi. Viimeisessä vaiheessa käyttäjä on jo omistautunut palvelulle sen verran, että kynnys jatkaa on vaihe vaiheelta pienempi
\- Näytä käyttäjälle kokoajan, missä vaiheessa hän on menossa
\- Rajoita vaiheiden määrää, yleisesti kolme on sopiva määrä
*Konfiguraatioprosessi*
Useissa verkkokaupoissa tuotetta voi muokata haluamakseen tavalla tai toisella. Muokattavia tuotteita on esim. autot ja tietokonepaketit. Konfiguraatioprosessiin kuuluu, että käyttäjän tekemät valinnat näkyvät reaaliajassa sivulla. Kun käyttäjä vaihtaa auton väriä tai vanteiden kokoa, hän näkee suoraan, miltä lopputulos näyttää.
*Staattinen yhden sivun prosessi*
Mikäli tapahtumasarja ei ole liian pitkä, voi olla järkevämpää sisällyttää se yhdelle staattiselle sivulle. Näin käyttäjä näkee selkeästi, kuinka pitkä prosessi on. Väreillä ja visuaalisilla ratkaisuilla voi helposti keventää vaikutelmaa prosessin pituudesta. Mikäli kuusi vaiheisessa prosessissa vaiheet 1 ja 2 on väritetty vihreällä ja vaiheet 5 ja 6 sinisellä, käyttäjä mieltää prosessin sisältävän vain 4 vaihetta. Pitkät prosessit kannattaa kuitenkin jakaa eri näkymiin, jottei käyttäjä pelästy ja poistu.
h2. Provide an Invitation
Jotta käyttäjä osaa hyödyntää sovelluksen toimintoja, tarvitaan kutsuja. Kutsut ovat kehotteita ja vihjeitä, jotka johdattelevat käyttäjän toiminnallisuuksien läpi. Kutsut voivat olla kokoajan näkyviä, staattisia kutsuja, tai dynaamisia kutsuja, jotka ilmestyvät juuri oikealla hetkellä, esim. hiiren ollessa objektin päällä.
h4. 9. Static Invitations
Staattisia kutsuja voivat ovat esim. ns. call-to-action kutsut ja tutustumiskierrokset läpi sivuston toiminnallisuuksien.
Selkeät ja lyhyet call-to-actionit ovat yleisimpiä kutsuja. Call-to-actionit ovat käskyjä, kuten ”osta”, ”hae”, ”äänestä” tai ”tykkää”. Mikäli sovelluksen käyttö pohjautuu tietylle toiminnallisuudelle, on toiminnallisuudelle hyvä esittää staattinen kutsu, joka erottuu selkeästi sisällön joukosta. Toisaalta, jos toiminnallisuus on toissijainen, staattinen kutsu voi viedä liikaa huomiota sisällöltä ja rasittaa sovellusta visuaalisesti. Tällöin kutsu on perusteltua piilottaa ja tuoda esiin dynaamisesti tarvittaessa.
*Tutustumiskierros*
Uuden palvelun lanseeraamisen yhteydessä on yleistä sisällyttää sivustolle ns. tutustumiskierros, joka johdattelee käyttäjän haluttujen toimintojen pariin. Selkeä tutustumiskierros tai ohjeistus sovelluksen toiminnallisuuksiin ei kuitenkaan pelasta huonoa suunnittelua, joten ensisijaisesti sovelluksen täytyy toimia intuitiivisesti niin, ettei käyttäjää tarvitse opastaa kädestä pitäen.
Tutustumiskierroksia on hyvä käyttää, mikäli olemassa ollut palvelu kokee suuria muutoksia. Näin käyttäjille voidaan helposti esittää uusia ominaisuuksia, eivätkä ne jää huomaamatta.
h4. 10. Dynamic Invitations
Dynaaminen kutsu:
\- Ilmestyy käyttäjän kohdistaessa kursorin objektin päälle
o Huomio kursorin vaihtuminen toiminnon, jotta käyttäjä ymmärtää toiminnallisuuden
o Pyri demonstroimaan toiminnon vaikutus saman tien käyttäjälle
o Pidä kutsu kontekstissa; lähellä objektia
\- Käyttää tuttuja elementtejä uusien ominaisuuksien esittelemiseen
o Alasvetovalikkoa indikoiva alaspäin suuntaava nuoli on tuttu elementti, jolla voidaan tuoda esiin käyttäjälle tuntemattomia toiminnallisuuksia
\- Ilmestyy _drag and drop_ \--toiminnon / interaktion aikana
o Käyttäjän raahatessa objektia, pyri näyttämään kutsuilla, mihin objektin voi raahata
o Muista kaikki _drag and drop_ \--toiminnon vaiheet (ks. kappale 2.)
o _Drag and drop_ \--mentelmä on tutumpi työpöytäsovelluksissa, verkkosovelluksessa käyttäjää täytyy kannustaa toimintoon
\- Paljastaa lisää sisältöä
o Mikäli sovellus käyttää virtuaalista sivutusta (ks. kappale 7.), on hyvän käytännön mukaista demonstroida toiminnallisuutta animaatiolla. Esim. karuselli, joka pyörii automaattisesti, ilman käyttäjän interaktiota toimii kutsuna, jolla käyttäjä ymmärtää sisältöä olevan enemmän
Dynaamisen kutsun käyttö on perusteltua, mikäli sovelluksen sisällöllä ja visuaalisuudella on ensisijainen asema ja toiminto on toissijainen.
h2. Use Transitions
Visuaalisen informaation käsittely ihmisen aivoissa tapahtuu eri alueella, kuin liikkeen ja valon havainnointi. Niinpä ihminen havaitsee alitajuntaisesti äkilliset liikkeet ja valoisuuden vaihtelut, keskittymättä kohteeseen, jossa muutos tapahtuu. Tämä osa aivoista varoittaa ihmistä lähestyvästä kohteesta.
Animaation ylikäyttöä on syytä välttää. Jokaisella meistä on varmasti kokemuksia vilkkuvista ja heiluvista mainosbannereista, jotka häiritsevät lukukokemusta tai itse sovelluksen käyttöä. Hienovarainen animaatio on kuitenkin tehokas keino kiinnittämään käyttäjän huomion tiettyyn ominaisuuteen, mikäli sivusto muuten on staattinen.
h4. 11. Transitional Patterns
Yleisimpiä siirtymätoimintamalleja verkkosovelluksissa ovat:
\- Kirkastus ja himmennys
o Lightbox \--efekti (ks. kappale 5.)
o Kiinnittää huomion ylemmällä tasolla olevaan informaatioon, himmentäen muun sisällön
\- Laajentuminen ja piilottaminen
o Upotettu sisältö (ks. kappale 6.)
\- ”Parantuva” himmennys
o Esim. listasta poistettu objekti häviää askelittain, jättäen hetkeksi tyhjän paikan
o Auttaa käyttäjää hahmottamaan, mitä tapahtui
\- Animaatio
o Fyysisessä maailmassa mikään ei katoa tai ilmesty tyhjästä, joten verkossakin on hyvän käytännön mukaista esittää tapahtumat animaation avulla, jolloin käyttäjä pystyy havainnoimaan paremmin tapahtumia
\- Spottivalo
o Mikäli käyttöliittymässä tapahtuu muutos, spottivalo on hyvä tapa korostaa sitä
o Spottivalo voi olla esim. tekstimuutoksen jälkeen taustavärin hetkellinen muutos, joka indikoi, että toiminto on suoritettu
h4. 12. Purpose of Transitions
Siirtymien tarkoituksena on luoda ympäristö, jota on mahdollisimman helppo seurata ja ymmärtää. Käyttäjä pystyy havainnoimaan muutoksia paremmin, kun ne on esitetty siirtymien avulla, eivätkä vain tapahdu, ilman minkäänlaista siirtymävaihetta. Animaatiot myös herättävät käyttäjän huomion haluttuun kohteeseen.
Animaatiolla on kuitenkin oltava selkeä tarkoitus, ilman tarinaa, visuaalinen kikkailu ei ole kiinnostavaa. Animaation ensisijainen käyttötarkoitus on kommunikaatio.
Siirtymien yleisiä toimintaperiaatteita:
\- Mitä nopeampi siirtymä, sitä tärkeämmäksi se koetaan
\- Liike koetaan tärkeämmäksi, kuin värin vaihtelu
\- Käyttäjään kohti tuleva liike koetaan tärkeämmäksi, kuin pois päin menevä
\- Hidas liike voidaan toteuttaa häiritsemättä käyttäjää
\- Liikkeen ensisijainen päämäärä on kommunikoida käyttäjän kanssa
\- Käytä symmetristä interaktiota
\- Varo liikakäyttöä\!
\- Älä luota pelkkään animaatioon kommunikaation välineenä
h2. React Immediately
Edelliset kappaleet käsittelivät palautteen antamista käyttäjälle kutsujen ja siirtymien avulla. Kutsut antavat palautetta ennen toimintoa, siirtymät toiminnon aikana. Tämä kappale käsittelee palautteen antamista heti toiminnon jälkeen.
Newtonin kolmas laki, voiman ja vastavoiman laki: \_”For every action, there is an equal and opposite reaction”._ Mikäli kappaleeseen vaikuttaa jokin voima, niin samanaikaisesti kappaleen täytyy vaikuttaa yhtä suurella, mutta suunnaltaan vastakkaisella voimalla. Vaikka lakia ei voi kirjaimellisesti soveltaa käyttöliittymäsuunnitteluun, voidaan siitä ottaa oppia käyttäjän interaktion suunnittelussa. Käyttöliittymän tulee reagoida välittömästi jokaiseen käyttäjän tekemään toimintoon.
h4. 13. Lookup Patterns
Käyttöliittymä voi reagoida hakutoimintoihin seuraavilla menetelmillä: automaattinen täydennys, dynaaminen ehdotus, dynaaminen haku, täsmentävä haku.
Automaattinen täydennys on käytössä usein esin. sähköpostisovelluksissa. Käyttäjän alkaessa kirjoittamaan vastaanottajan osoitetta, sovellus ehdottaa yhteystiedoista löytyviä osoitteita tai henkilöitä. Sähköpostisovelluksessa tämä on hyvin tärkeä ominaisuus, jonka ansiosta käyttäjän ei tarvitse muistaa vastaanottajan osoitetta, vaan nimi riittää automaattisen täydennyksen hoitaessa loput. Automaattinen täydennys auttaa noudattamaan Jakob Nielsenin kymmentä käytettävyyden lakia, joista yksi on virheiden ennakointi.
Dynaaminen ehdotus on hyvin lähellä automaattistä täydennystä. Dynaamisten ehdotusten tarkoituksena on tarkentaa hakulauseketta. Hakukoneet, kuten Google käyttävät tätä toimintoa. Käyttäjän kirjoittaessa hakukoneeseen ”tom cruise”, sovellus listaa ehdotuksia, joilla hakua voi tarkentaa, saatavien hakutulosten perusteella. Lista ehdotuksista hakusanalle ”tom cruise” voi olla ”tom cruise films”, ”tom cruise imdb”, ”tom cruise wiki”, ym.
Dynaaminen haku eroaa dynaamisesta ehdotuksesta siten, että dynaaminen haku listaa hakutulokset samantien käyttäjän kirjoittaessa hakulauseketta. Näin ollen käyttäjän kirjoittaessa ”tom cruise”, hakutulokset ilmestyvät välittömästi ja käyttäjän tarkentaessa lauseketta muotoon ”tom cruise films”, tulokset päivittyvät. Käyttäjän ei tarvitse missään vaiheessa painaa ”hae” \--nappia ja hän näkee miten hakutulokset päivittyvät dynaamisesti hakulausekkeen tarkentuessa.
Täsmentävä haku on hyödyllinen esim. verkkokaupoissa ja varausjärjestelmissä. Haun jälkeen sovellus tarjoaa vaihtoehtoja haun täsmentämiseksi. Esimerkiksi käyttäjä voi hakea netistä autoa hakusanalla ”toyota”. Tämän jälkeen sovellus tarjoaa liutettavan palkin hintahaarukalle, johon käyttäjä määrittelee 0 - 20 000€. Näin hakutuloksia saadaan karsittua relevantimmaksi käyttäjän tarpeisiin.
h4. 14. Feedback Patterns
Hakutulokset eivät ole ainoa toiminnallisuus, joka tarvitsee välitöntä palautetta. Muita menetelmiä palautteen antamiseen on: dynaaminen esitkatselu, progressiivinen tiedonanto, edistymisen mittari ja jaksollinen päivitys.
_Even better than good error messages is a careful design which prevents a problem from occurring in the first place._ -- Jakob Nielsen, 10 käytettävyyden heuristiikkaa.
_An ounce of prevention is worth a pound of cure._ -- Benjamin Franklin.
Dynaaminen esikatselu on hyvä keino esittää käyttäjälle, miten hänen toimintonsa tulee vaikuttamaan ja estää näin edestakaisen liikkeen, koska tarvittavat korjaukset voi tehdä välittömästi. Esimerkiksi useat rekisteröitymislomakkeet käyttävät esikatselua mm. salasanan validoimisessa. Salasana \--kentän vieressä voi olla mittari, joka näyttää dynaamisesti, kuinka vahva salasana on. Salasanan vaatimukset vaihtelevat suuresti palveluittain ja virheellisen salasanan syötön mahdollisuus on suuri, mikäli sovellus ei ilmoita syöttövaiheessa virheestä. Dynaamista esikatselua voidaan käyttää erittäin hyvin hyödyksi mm. verkkokaupoissa tai markkinointikampanjoissa, joissa käyttäjä pääsee vaikuttamaan tuotteen ulkonäköön.
Progressiivinen tiedonanto mahdollistaa kevyempiä käyttöliittymiä. Mikäli jokin toiminnallisuus on tarpeellinen vain tietyssä vaiheessa, se voidaan piilottaa muuksi ajaksi ja tuoda juuri oikealla hetkellä esiin. Lomakkeissa on usein salasana \--kentän lisäksi ”vahvista salasana” \--kenttä. Lomake voidaan tehdä kevyemmäksi piilottamalla vahvistuskenttä ja tuomalla se esiin vasta siinä vaiheessa, kun käyttäjä alkaa täyttämään salasana \--kenttää.
Mikäli jokin sovelluksen toiminto kestää pitkään, on tärkeää antaa palautetta toiminnon edistymisestä käyttäjälle. Tähän toimii edistymisen mittari, joka voi perinteisimmin olla esim. selaimistakin tuttu latauspalkki. Mikäli tekniikka ei mahdollista prosentuaalista edistyksen seuraamista, voidaan edistyminen indikoida pyörivällä animaatiolla, jotta käyttäjä tietää kokoajan sovelluksen olevan toiminnossa. Edistymisen seuranta voidaan pilkkoa eri vaiheisiin, jolloin toiminto tuntuu vievän vähemmän aikaa, koska ruudulla tapahtuu kokoajan jotakin uutta.
Jaksollinen päivitys on hyödyllinen, mikäli sovelluksen tarkoituksena on tarjota jatkuvasti päivittyvää informaatiota. Esimerkiksi sosiaaliset mediat käyttävät laajalti tätä toimintoa näyttääkseen käyttäjälle jatkuvasti reaaliajassa muiden käyttäjien toimintoja. Toiminto on yksinkertaisuudessaan tietyn alueen uudelleen lataus tietyllä aikavälillä, ilman käyttäjän toimintoa (esim. sivun uudelleenlatausta). Päivitys ei saa tapahtua kuitenkaan liian tiuhaan, vaan pitää myös muistaa säilyttää sivun luettavuus.
h2. Epiloque
# Make it Direct
_WYSIWYG (What You See Is What You Get)_ \--menetelmä on todistettu toimivaksi viimeisten vuosikymmenten aikana. Mahdollista sisällön muokkaaminen kontekstissa, objektien hallinta hiirellä raahaamalla ja toimintojen kohdistaminen suoraan objekteihin.
# Keep it Lightweight
Ymmärrä käyttäjän tahtotila ja tarjoa juuri oikea määrä informaatiota, pitäen käyttöliittymä mahdollisimman kevyenä. Tarjoa toiminnallisuudet kontekstissaan, lähellä objektia, johon toiminta kohdistuu.
# Stay on the Page
Vältä sivun uudelleen latausta. Jokainen katkos häiritsee optimaalista käyttökokemusta ja käyttäjän havainnointikykyä.
# Provide an Invitation
Käytä staattisia ja dynaamisia kutsuja, jotta tarjoamasi toiminnot eivät jää huomaamatta.
# Use Transitions
Siirtymät ovat pakollisia kommunikaation saavuttamiseksi ja edistävät käyttäjän sitouttamista. Varo kuitenkin animaation liikakäyttöä.
# Be Reactive
Jokaiselle toiminnolle pitää löytyä vastareaktio. Pidä käyttäjä jatkuvasti tietoisena sovelluksessa tapahtuvasta edistymisestä.
h4.
{column}
{column}{column}
{section}<\!-\- v\:\* {behavior:url(#default#VML);} o\:\* {behavior:url(#default#VML);} w\:\* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} \--><\!-\- /\* Style Definitions \*/ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-qformat:yes; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin:0cm; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Calibri","sans-serif"; mso-bidi-font-family:"Times New Roman";} \-->
h1. Designing Web Interaction - Principles and Patterns for Rich Interactions
h2. Preface
Suurimman osan internetin historian ajasta, käyttöliittymäsuunnittelua on vaivannut alkeellisuus.
Useimmat sivustot on rakennettu kahdella toiminnallisuudella:
· Klikkaa linkkiä
· Täytä/lähetä lomake
Näillä toiminnallisuuksilla ei vielä saada aikaan mielenkiintoista tai antoisaa elämystä sivun käyttäjälle. Lisätään tähän vielä sivun uudelleenlataus aina, kun käyttäjä tekee jotakin, ja saumaton käyttökokemus on mahdotonta saavuttaa.
Käyttäjäkokemuksen parantamiseksi voidaan käyttää kuutta suunnittelun toimintamallia:
1. _Make it Direct_ \- Tee käyttökokemuksesta suoraviivaista
2. _Keep it Lightweight_ \- Pidä sivuston käytettävyys kevyenä
3. _Stay on the Page_ \- Pysy sivulla, vältä uudelleenlatauksia
4. _Provide an Invitation_ \- Käytä kutsuja parantaaksesi löydettävyyttä ja saavutettavuutta
5. _Use Transitions_ \- Käytä siirtymiä (animattioita, efektejä) tehosteina
6. _React Immediately_ \- Reagoi välittömästi
h2. Make it Direct
Usein verkossa sisältö näytetään yhdellä sivulla ja muokataan toisella. Mahdollistamalla sisällön näyttämisen ja muokkauksen samassa näkymässä, käyttökokemuksesta saadaan suoraviivaisempaa.
Tapoja sisällön muokkaukseen yhdessä näkymässä:
1. _In-Page Editing_ \- sisällön muokkaus sivun sisällä
2. _Drag and Drop_ \- sisällön raahaminen hiirellä
3. _Direct Selection_ \- toimintojen kohdistaminen suoraan valittuun kohteeseen
Nämä kaikki ovat tuttuja toimintoja työpyötäsovelluksista, mutta harvinaisempia verkossa.
1. In-Page Editing
Verkkosisältö on perinteisesti ollut vain luettavaa. Mikäli sisältöä pystyy muokkaamaan, se tehdään lomakkeen kautta. Mahdollistamalla sisällön muokkauksen suoraan siinä näkymässä, jossa se normaalisti esitetään, käyttökokemuksesta saadaan suoraviivaista ja luontevaa.
*{_}Single-Field Inline Edit{_}* *ja* *{_}Multi-Field Inline Edit{_}{*}{*}_ _*
Sen sijaan, että sisällön muokkaus tapahtuisi erillisessä ikkunassa, se voidaan toteuttaa alkuperäisessä näkymässä. Vietäessä hiiri esimerkiksi muokattavan otsikon päälle, indikaattori ilmestyy ja kehottaa käyttäjää painamaan otsikkoa päästäkseen muokkaustilaan. Muokattuaan otsikkoa käyttäjä painaa ”tallenna”-nappia, ja palaa esikatselu tilaan. Tämä kaikki tapahtuu samassa ikkunassa, ilman sivun uudelleen latauksia.
Ensimmäisiä tämän muokkausmallin hyödyntäjiä oli kuvapalvelu Flickr. Palvelu todistaa mallin toimivuuden, sillä se on pysynyt sellaisenaan vuosien ajan.
Huomioitavia seikkoja kuitenkin löytyy, käytettäessä sivun sisäistä muokkausmallia;
\- Luettavuus
\- Löydettävyys
\- Saavutettavuus
Usein sisällön muokkauksen mahdollistava toiminto on piilotettu hiiritoiminnon taakse. Käyttäjän pitää viedä hiiri muokattavan sisällön päälle, ennen kuin järjestelmä ilmoittaa, että sisältöä voi muokata klikkaamalla. Tämä vaikuttaa toiminnon löydettävyyteen ja tästä syystä on hyvä sisällyttää muokattavan kohteen viereen myös kokoajan näkyvillä oleva ”muokkaa”-linkki. Näkyvä linkki helpottaa myös muokkausmahdollisuuden saavutettavuutta, koska se toimii varmemmin kaikilla käyttöalustoilla. Käyttöliittymän pitää olla tasapainossa löydettävyyden ja luettavuuden kanssa. Mikäli jokaisen objektin vieressä tai päällä on muokkaus-nappi, heikentää se sisällön luettavuutta.
Muokkaustilan ja esikatselutilan näkymästä toiseen vaihtamisessa tulisi olla mahdollisimman vähän häiriötekijöitä. Tällöin sivun sisäistä muokkausmallia on hyvä käyttää tilanteissa, joissa muokattavan sisällön suhde muuhun sisältöön on tärkeä. Kun käyttäjä näkee suoraan, miten muokkaus vaikuttaa sisällön kokonaisuuteen, nopeuttaa se työtä huomattavasti.
*{_}Overlay Edit{_}*
Mikäli muokattavaa sisältöä tai muokkausmahdollisuuksia on niin paljon, että sivun sisäinen muokkausmalli menettää hyötynsä, voidaan käyttää pop-up-ikkunaa tai ”dialogia” tuomaan muokkausmahdollisuudet nopeasti käyttäjälle. Käyttäjä pysyy samalla sivulla, mutta muokkaustoiminnot ilmestyvät sisällön päälle, omalle tasolleen.
*{_}Table Edit{_}*
Muokattaessa taulukkoa, luettavuudella on tärkeä rooli. Muokattavat taulukot noudattavat usein Microsoft Excelin toimintatapoja. Käyttäjän viedessä hiiren solun päälle, hiiri vaihtuu tekstikursoriksi indikoiden muokkausmahdollisuutta. Klikattaessa solun ulkonäkö vaihtuu (esim. reunukset paksunevat) ja käyttäjä siirtyy muokkaustilaan.
*{_}Group Edit{_}*
Listoissa tai vastaavissa ryhmissä, joissa on monta samankaltaista objektia, on hyvä käyttää ryhmämuokkausta. Sen sijaan, että jokaisen objektin kohdalla olisi kokoajan näkyvissä muokkaustoiminto, tarjoa yksi toiminto koko ryhmälle. Käyttäjän siirtyessä muokkaustilaan, voidaan muokkaustoiminnot tuoda erikseen jokaisen objektin kohdalle. Näin esikatselutila on huomattavasti selkeämpi ja luettavampi.
Muokkaustilaan ja takaisin esikatselutilaan siirtyminen tulisi tapahtua samalla kaavalla, jotta käyttökokemuksesta saadaan luontevaa. Toiminnot tulee myös olla selkeästi indikoitu.
*{_}Module Configuration{_}*
Useat sivut, kuten Google ja Yahoo tarjoavat käyttäjilleen mahdollisuuden muokata aloitussivun sisältöä moduuleilla. Muokattaessa moduulien asetuksia, kannattaa harkita myös edellä mainittua ryhmämuokkausta, mikäli näkymä muuten on liian täynnä ja luettavuus kärsii. Moduulien muokkausmahdollisuuksiin sisältyy yleensä moduulin nimi, näytettävän sisällön määrä (esim. uutisotsikoiden) ja moduulien järjestys.
2. Drag and Drop
”Vedä-ja-pudota” \-toiminto oli yksi Macintoshin innovaatioista, joka julkaistiin vuonna 1984. Toiminnon ilmestymistä verkkosovelluksiin saatiin odottaa vuoteen 2000 asti, jolloin pieni startup-yritys, HalfBrain julkaisi nettipohjaisen presentaatio-sovelluksen nimeltä BrainMatter. Myöhemmin Yahoo Mailin pohjana toiminut, niin ikään startup-sovellus, Oddpost käytti myös drag and drop menetelmää sähköpostien siirtämisessä kansiosta toiseen. Aikana ennen Ajaxia, käyttäjän tila objektin pudottamisen jälkeen oli hankalaa tallentaa ilman sivun uudelleen latausta. Tänä päivänä drag and drop \-menetelmä on kuitenkin helppo toteuttaa ja sitä tukee suurin osa selaimista.
Drag and drop \-menetelmä käsittää monta eri vaihetta, joista jokainen voidaan toteuttaa eri tavalla. Yleisimpiä käyttökohteita menetelmälle ovat: moduulien järjestäminen, listan järjestäminen, liikuteltavat objektit (joiden suhteita toisiinsa voidaan muuttaa) ja objektiin kohdistuvat toiminnot (esim. objektin poistaminen vetämällä se roskakoriin).
Drag and drop \--toiminnolla voi olla peräti 15 eri vaihetta. Oheisessa taulukossa on käytetty yhdeksää vaihetta, jotka on otettu suunnittelussa huomioon.
3. Direct Selection
Suora valinta on tuttu käsite työpöytäsovelluksista aina Macintoshin alkuajoista asti. Työpöydällä useimmiten käytetty tapa on objektin valinta. Tällöin valinta tehdään suoraan klikkaamalla objektia, kuten työpöydän pikakuvaketta. Verkossa tutuin suoran valinnan tapa on ”kytketty” valinta (toggle selection), jossa objekti valitaan rastittamalla siihen linkitetty valintalaatikko (checkbox).
Suoran valinnan menetelmät:
\- _Toggle selection_ \- kytkettävä valinta
\- _Collected selection_ \- koottu valinta
\- _Object selection_ \- objektin valinta
\- _Hybrid selection_ \- kytkettävän valinnan ja objektin valinnan yhdistelmä
Hybridi valintaa käytetään esim. useissa sähköpostisovelluksissa, jossa viestin voi valita joko rastittamalla ruudun tai klikkaamalla viesti \-objektia (rivi, jossa lukee otsikko, lähettäjä ym.). Sähköpostisovellukset voivat käyttää myös koottua valintaa, jonka avulla käyttäjä voi valita viestejä usealta sivulta. Koottuja valintoja varten on hyvä suunnitella ns. valinta laatikko, jossa valitut kohteet näkyvät kokoajan, vaikka siirrytään sivulta toiselle. Näin käyttäjälle ei jää epäselväksi, onko hänen edellisellä sivulla tekemänsä valinnat vielä voimassa. Toinen vaihtoehto on ilmoittaa joka sivulla, kuinka monta kohdetta valinnassa tällä hetkellä on.
h2. Keep it Lightweight
Digg \--sivuston tärkein ominaisuus on ”digg it” \--painike, jolla käyttäjät voivat diggata uutisia. Kun Digg vuonna 2005 muutti diggaus ominaisuuden kaksi-vaiheisesta yhden napin painallukseen, diggausten määrä lähti hurjaan nousuun. Ajaxilla toteutettu uudistus oli varsin pieni, mutta näytti selkeästi sen, kuinka tärkeätä käyttöliittymän on olla mahdollisimman kevyt.
4. Contextual Tools
Työpöytäsovellukset usein erottavat toiminnallisuudet sisällöstä. Työkalupalkit ja tehtäväpalkit ovat omilla paikoillaan, eivät suorassa yhteydessä sisältöön. Netin alkuvaiheessa toimintoja ei juuri ollut, vaan netti oli hyvin sisältökeskeistä. Tämän päivän verkkosovellukset lähenevät kuitenkin kokoajan enemmän työpöytäsovelluksia, eikä pelkkä ”lähetä” \--nappula enään riitä.
Fittsin lain mukaan käyttökokemus paranee, mikäli toiminnallisuudet ovat tarpeeksi lähellä kontekstia ja tarpeeksi suurena esitettynä.
Kontekstuaaliset työkalut voivat olla:
\- Aina näkyvillä
\- Aktivoituvia hiiren toiminnosta
\- Kytkettynä näkyviin tai pois
\- Monitasoisia
\- Esitettynä toissijaisessa valikossa
Mikäli toiminto on sovelluksen kannalta elintärkeä, sen on hyvä olla aina näkyvillä ja tarpeaksi suurella esitettynä. Esimerkkinä toimii hyvin jo aiemmin mainittu Digg, joka perustuu käyttäjien diggailuun. ”Digg it” \--painike on suuri ja näkyvin käyttöliittymän osa. Vähemmän tärkeät toiminnot ovat nekin koko ajan näkyvillä, mutta huomattavasti pienemmällä ja sellaiseen paikkaan sijoitettuina, että ne eivät häiritse käyttökokemusta.
Mikäli sovelluksen toiminnot ovat vähemmän tärkeitä, ja sisällöllä ja luettavuudella on tärkeämpi rooli sovelluksen kannalta, toiminnot voidaan piilottaa hiiren toiminnon taakse. Tämä on yleensä toteutettu niin, että käyttäjän viedessä hiiren objektin päälle, toiminnot ilmestyvät läheisyyteen ”hover” \--efektinä. Hover \--toimintoa käytettäessä tulee välttää päällekkäisen tason käyttämistä (overlay). Mikäli toiminnot ilmestyvät omana tasonaan sisällön päälle, navigointi vaikeutuu ja sovelluksen käyttö hidastuu. Vaikka toiminnot eivät ole siis oletuksena näkyvissä, niille kannattaa varata tyhjää tilaa, että sisältö ei peity tai pompi toimintojen ollessa näkyvillä. Hover \--toiminnon sijaan voidaan myös käyttää ns. kytkintä (nappi, linkki), jolla toiminnot saadaan näkyviin tai pois näkyvistä. Näin käyttäjä voi itse valita, milloin pitää toiminnot näkyvissä, eivätkä ne häiritse luettavuutta silloin, kun niitä ei tarvita.
Työkaluissa käytetään usein ikoneita tekstin sijaan. Ikoneiden kanssa kannattaa kuitenkin olla varovainen ja käyttää ainoastaan tunnettuja symboleja. Mikäli käyttäjä joutuu pysähtymään jokaisen ikonin kohdalle nähdäkseen työkaluvihjeen (jota ei aina edes ole asetettu), käyttö hidastuu ja vaikeutuu huomattavasti.
Monitasoiset työkalut voivat olla hyödyllisiä, mikäli toimintoja on paljon, eikä haluta käyttää hover \--efektiä (joka voi olla häiritsevä esim. listojen kohdalla). Monitasoinen työkalu voi ns. ”mutton” (menu + button) eli painikkeen ja valikon yhdistelmä, jossa painike toimii ensisijaisena toimintona, jonka vieressä sijaitsee alasvetovalikko vähemmän tärkeille ominaisuuksille.
Toissijainen valikko ilmestyy perinteisesti hiiren oikealla napilla. Verkossa tämän valikon käyttö on hankalaa, koska käyttäjä on tottunut pääsemään hiiren oikealla napilla selaimen omiin valikoihin. Mikäli tätä valikkoa kuitenkin käytetään, on se tärkeää tyylitellä selkeästi erinäköiseksi, jotta käyttäjälle ei jää epäselväksi, mihin hän toiminnoillaan vaikuttaa.
h2. Stay on the Page
Harper Perennialin julkaisemassa kirjassa \_”Flow: The Psychology of Optimal Experience”,\_ Mihaly Csikszentmihalyi määrittelee optimaalisen kokemuksen seuraavasti:
_The times when people enter a state of concentration so focused it creates a state of effortless control_
Jokainen keskeytys häiritsee optimaalista kokemusta. Verkossa tämä on hyvin yleistä, koska useat sivustot käyttävät sivun uudelleen latausta käyttäjän toiminnon jälkeen. Näin ollen käyttökokemus häiriintyy.
Sivun uudelleen lataus paitsi keskeyttää toiminnan, häiritsee myös käyttäjän havaintokykyä. Ilmiötä kutsutaan nimellä _Change Blindness_, muutos sokeus.
Ilmiötä voi testata itse osoitteessa: [http://people.usd.edu/~schieber/coglab/Rensink.html|http://people.usd.edu/%7Eschieber/coglab/Rensink.html]
Demonstraation asetuksia pääsee muokkaamaan hiiren oikealla painikkeella.
Demo todistaa, että pienet muutokset ovat lähes mahdottomia huomata sivun uudelleen latauksen yhteydessä. Mikäli sivu ei lataudu kokonaan uudelleen, on muutos selkeästi havaittavissa.
5. Overlays
Sivulatauksen sijaan uusi sisältö voidaan esittää näkymän päällä omassa tasossaan, ikään kuin kevyenä pop-up-ikkunana. Selaimen omia pop-up ikkunoita tulee välttää, koska ne ovat huomattavasti raskaampia, eikä ulkonäköön pysty vaikuttamaan. Myöskin JavaScript \--hälytykset voidaan korvata kevyillä tasoilla. Hälytyksien haittapuolena on eri käyttöliittymien eroavaisuudet. Windows \--ympäristössä hälytykset tulevat keskelle näyttöä, kun taas Machintosilla hälytykset liukuvat yläpalkin alta. Näin ollen käyttökokemus on erilainen eri käyttöliittymissä.
_Overlay_ \--ikkunoiden käytössä voidaan muu alemmalla tasolla oleva sisältö tummentaa, jolloin käyttäjän huomio keskittyy täysin ylempään tasoon. Tätä kutsutaan _Lightbox_ \--efektiksi, ja sitä käytetään usein tärkeän sisällön esittämisessä tai kuvagallerioissa.
Overlay \-ikkuna voi olla modaalinen, jolloin käyttäjältä vaaditaan jokin toimenpide päästäkseen takaisin. Toimenpide voi olla esim. vastaus ”Lähetä” tai ”Peruuta”. Ei-modaalisesta ikkunasta käyttäjä sen sijaan voi poistua klikkaamalla ikkunan ulkopuolelle.
Mikäli overlay \--ikkunaa käytetään esim. tuotteen lisätietojen esittämiseen, tulee lightbox \--efektiä välttää, koska se häiritsee käyttökokemusta ja hidastaa prosessia. Sen sijaan tulee ottaa huomioon ikkunan aktivoimisen ja sulkemisen symmetrisyys ja viive. Mikäli ikkuna aktivoituu, kun käyttäjä vie hiiren objektin päälle, tulee välissä olle noin puolen sekunnin viive, jonka ajan hiiren pitää olla objektin päällä paikoillaan. Näin vältytään ns. hiiriloukulta. Kuvittele tilanne, jossa sivulla on rivi objekteja, esim. elokuvan kansia. Käyttäjän viedessä hiiren kannen päälle, ilmestyy saman tien, ilman viivettä, lisätiedot elokuvasta overlay \--ikkunaan. Navigointi hankaloituu huomattavasti, kun käyttäjä liikuttaa hiirtä kansien yli haluamansa kannen päälle ja ikkunoita pompahtelee jatkuvasti esiin. Symmetrisyydellä tarkoitetaan sitä, että mikäli samaisessa tilanteessa elokuvan lisätiedot tulevat esiin hiiren tullessa kannen päälle, tulee tietojen myös kadota, kun hiiri poistuu kannen päältä (eikä esim. ”Sulje” \--nappulasta).
6. Inlays
Uusi sisältö voidaan esitää kontekstissä sivuun upotettuna. Näin uusi sisältö ei peitä mitään, kuten pop-up dialogit, vaan laajentaa nykyistä näkymää. Upotetussa sisällössä käytetään yleisesti liuku \--efektiä, jolloin uusi sisältö liukuu näkyviin.
Upotettua sisältöä käytetään usein sivun asetuksissa tai listauksissa. Välilehdet voidaan myös lukea upotetuksi sisällöksi.
7. Virtual Pages
Virtuaali sivuja voidaan käyttää useilla tavoilla. Tarkoituksena on korvata perinteiset sivutukset, kun sisältöä on runsaasti, esim. hakutuloksissa tai sähköpostisovelluksissa.
*Virtuaalinen vieritys*
Yksi tapa on käyttää virtuaalista vieritystä, jolloin sisältö latautuu käyttäjän vierittäessä sivua alas. Oletetaan, että näkymässä on kerrallaan 10 artikkelia, esim. sähköpostiviestiä. Päästäkseen seuraavaan kymmeneen viestiin, käyttäjän tarvitsee vain rullata sivua alas päin, jolloin sovellus hakee seuraavat viestit, eikä näin ollen tarvita sivustusta. Virtuaalisessa vierityksessä on tärkeää ottaa huomioon vierityspalkin käyttäytyminen. Mikäli on todennäköistä, että käyttäjä haluaa päästä listan loppuun, eikä tuloksia ole hirveää määrää, on vierityspalkin hyvä käsittää kaikki tulokset. Mikäli viimeiset tulokset eivät ole tärkeitä, kuten esim. hakukoneissa, vierityspalkin on hyvä päivittyä sitä mukaan, kun lisää tuloksia haetaan. Tässä tapauksessa käyttäjän vierittäessä palkin aivan alas, tulee esiin seuraavat tulokset ja palkki nousee ylös päin.
*Sivun sisäinen sivutus*
Sivustusta voidaan käyttää niin, että koko sivu ei lataudu uudelleen, vain ainoastaan osa, jossa tieto vaihtuu. Esimerkiksi sähköpostisovelluksessa viestejä selatessa ainoastaan viestit latautuvat siirryttäessä sivulta toiselle, muun käyttöliittymän pysyessä staattisena. Sivun sisäistä sivutusta käytetäessä on tärkeää ottaa huomioon, että selaimen ”takaisin” \--nappi huomio sisäisen sivutuksen.
*Vieritettävä sivutus*
Vieritettävä sivustus on virtuaalinen vieritys yhdistettynä sivun sisäiseen sivutukseen. Yleisin tätä lähestymistapaa käyttävä sovellusmalli on ns. karuselli.
Karusellissa sisältö on jaettu virtuaalisiin sivuihin, joita voidaan ohjaimilla vierittää vasemmalle ja oikealle. Yleinen karusellin käyttökohde on valokuvat, kansikuvat ym.
*Panorointi*
Yksi tapa luoda virtuaalinen ympäristö, on käyttää panorointia. Käyttäjä pystyy liikkumaan ympäristössä hiiren avulla raahaamalla näkymää haluamaansa suuntaan. Tunnetuimpia sovelluksia, jotka käyttävät panorointia, ovat karttasovellukset, kuten Google Maps.
Panorointia käytetään myös käyttöliittymissä, joita ohjataan eleillä, esim. kosketusnäytölliset puhelimet.
*Zoomattava käyttöliittymä*
Zoomattavan käyttöliittymän avulla voidaan luoda esimerkiksi suuri valokuvaseinä, jossa yksittäisen valokuvan tietoihin päästään klikkaamalla kuvaa, jolloin näkymä zoomaa lähemmäksi. Menetelmän avulla voidaan esittää suuria määriä informaatiota yhdellä sivulla ja tarjota käyttäjälle erilainen käyttökokemus.
8. Process Flow
Monimutkaiset tapahtumasarjat tarvitsevat usein ohjeistusta ja monia vaiheita. Kaikkia eri vaiheita ei kuitenkaan tarvitse esittää erillisillä sivuillaan. Käyttäjä voidaan pitää yhdellä sivulla seuraavilla menetelmillä.
*Interaktiivinen prosessi*
Monen tapahtumasarjan seuraava vaihe on riippuvainen edellisessä vaiheessa tehdystä päätöksestä. Interaktiivinen prosessi esittää kaikki vaiheet yhdellä sivulla, mutta niin, että vaihtoehdot muuttuvat dynaamisesti, tehtyjen päätösten mukaan. Esimerkkinä verkkokauppa, joka myy t-paitoja: Ensimmäisessä vaiheessa käyttäjä valitsee värin ja toisessa vaiheessa koon. Interaktiivinen prosessi reagoi käyttäjän valintaan ja näyttää heti, mitä kokoja käyttäjän valitsemasta väristä on jäljellä, eikä näin synny edestakaista liikettä vaiheiden välillä.
*Upotettu prosessi*
Ostoskori on toinen verkkokaupoissa yleinen ominaisuus, johon kuuluu monta vaihetta; tuotteen lisääminen, muokkaaminen (kpl määrä), tuotteen poistaminen, tilauksen tekeminen, tietojen täyttö, maksaminen, vahvistaminen. Ostokori on usein upotettuna sivuun, niin että tuotteen lisääminen tai poistaminen ei tarvitse erillistä sivulatausta.
*Prosessi overlay \--ikkunan sisällä*
Monivaiheisia tapahtumasarjoja voidaan toteuttaa overlay \--ikkunoiden sisällä. Tärkeitä huomioitavia asioita:
\- Aloita visuaalisella, kevyellä näkymällä
\- Jätä raskaat näkymät, kuten laskutustiedot viimeiseksi. Viimeisessä vaiheessa käyttäjä on jo omistautunut palvelulle sen verran, että kynnys jatkaa on vaihe vaiheelta pienempi
\- Näytä käyttäjälle kokoajan, missä vaiheessa hän on menossa
\- Rajoita vaiheiden määrää, yleisesti kolme on sopiva määrä
*Konfiguraatioprosessi*
Useissa verkkokaupoissa tuotetta voi muokata haluamakseen tavalla tai toisella. Muokattavia tuotteita on esim. autot ja tietokonepaketit. Konfiguraatioprosessiin kuuluu, että käyttäjän tekemät valinnat näkyvät reaaliajassa sivulla. Kun käyttäjä vaihtaa auton väriä tai vanteiden kokoa, hän näkee suoraan, miltä lopputulos näyttää.
*Staattinen yhden sivun prosessi*
Mikäli tapahtumasarja ei ole liian pitkä, voi olla järkevämpää sisällyttää se yhdelle staattiselle sivulle. Näin käyttäjä näkee selkeästi, kuinka pitkä prosessi on. Väreillä ja visuaalisilla ratkaisuilla voi helposti keventää vaikutelmaa prosessin pituudesta. Mikäli kuusi vaiheisessa prosessissa vaiheet 1 ja 2 on väritetty vihreällä ja vaiheet 5 ja 6 sinisellä, käyttäjä mieltää prosessin sisältävän vain 4 vaihetta. Pitkät prosessit kannattaa kuitenkin jakaa eri näkymiin, jottei käyttäjä pelästy ja poistu.
h2. Provide an Invitation
Jotta käyttäjä osaa hyödyntää sovelluksen toimintoja, tarvitaan kutsuja. Kutsut ovat kehotteita ja vihjeitä, jotka johdattelevat käyttäjän toiminnallisuuksien läpi. Kutsut voivat olla kokoajan näkyviä, staattisia kutsuja, tai dynaamisia kutsuja, jotka ilmestyvät juuri oikealla hetkellä, esim. hiiren ollessa objektin päällä.
9. Static Invitations
Staattisia kutsuja voivat ovat esim. ns. call-to-action kutsut ja tutustumiskierrokset läpi sivuston toiminnallisuuksien.
Selkeät ja lyhyet call-to-actionit ovat yleisimpiä kutsuja. Call-to-actionit ovat käskyjä, kuten ”osta”, ”hae”, ”äänestä” tai ”tykkää”. Mikäli sovelluksen käyttö pohjautuu tietylle toiminnallisuudelle, on toiminnallisuudelle hyvä esittää staattinen kutsu, joka erottuu selkeästi sisällön joukosta. Toisaalta, jos toiminnallisuus on toissijainen, staattinen kutsu voi viedä liikaa huomiota sisällöltä ja rasittaa sovellusta visuaalisesti. Tällöin kutsu on perusteltua piilottaa ja tuoda esiin dynaamisesti tarvittaessa.
*Tutustumiskierros*
Uuden palvelun lanseeraamisen yhteydessä on yleistä sisällyttää sivustolle ns. tutustumiskierros, joka johdattelee käyttäjän haluttujen toimintojen pariin. Selkeä tutustumiskierros tai ohjeistus sovelluksen toiminnallisuuksiin ei kuitenkaan pelasta huonoa suunnittelua, joten ensisijaisesti sovelluksen täytyy toimia intuitiivisesti niin, ettei käyttäjää tarvitse opastaa kädestä pitäen.
Tutustumiskierroksia on hyvä käyttää, mikäli olemassa ollut palvelu kokee suuria muutoksia. Näin käyttäjille voidaan helposti esittää uusia ominaisuuksia, eivätkä ne jää huomaamatta.
10. Dynamic Invitations
Dynaaminen kutsu:
\- Ilmestyy käyttäjän kohdistaessa kursorin objektin päälle
o Huomio kursorin vaihtuminen toiminnon, jotta käyttäjä ymmärtää toiminnallisuuden
o Pyri demonstroimaan toiminnon vaikutus saman tien käyttäjälle
o Pidä kutsu kontekstissa; lähellä objektia
\- Käyttää tuttuja elementtejä uusien ominaisuuksien esittelemiseen
o Alasvetovalikkoa indikoiva alaspäin suuntaava nuoli on tuttu elementti, jolla voidaan tuoda esiin käyttäjälle tuntemattomia toiminnallisuuksia
\- Ilmestyy _drag and drop_ \--toiminnon / interaktion aikana
o Käyttäjän raahatessa objektia, pyri näyttämään kutsuilla, mihin objektin voi raahata
o Muista kaikki _drag and drop_ \--toiminnon vaiheet (ks. kappale 2.)
o _Drag and drop_ \--mentelmä on tutumpi työpöytäsovelluksissa, verkkosovelluksessa käyttäjää täytyy kannustaa toimintoon
\- Paljastaa lisää sisältöä
o Mikäli sovellus käyttää virtuaalista sivutusta (ks. kappale 7.), on hyvän käytännön mukaista demonstroida toiminnallisuutta animaatiolla. Esim. karuselli, joka pyörii automaattisesti, ilman käyttäjän interaktiota toimii kutsuna, jolla käyttäjä ymmärtää sisältöä olevan enemmän
Dynaamisen kutsun käyttö on perusteltua, mikäli sovelluksen sisällöllä ja visuaalisuudella on ensisijainen asema ja toiminto on toissijainen.
h2. Use Transitions
Visuaalisen informaation käsittely ihmisen aivoissa tapahtuu eri alueella, kuin liikkeen ja valon havainnointi. Niinpä ihminen havaitsee alitajuntaisesti äkilliset liikkeet ja valoisuuden vaihtelut, keskittymättä kohteeseen, jossa muutos tapahtuu. Tämä osa aivoista varoittaa ihmistä lähestyvästä kohteesta.
Animaation ylikäyttöä on syytä välttää. Jokaisella meistä on varmasti kokemuksia vilkkuvista ja heiluvista mainosbannereista, jotka häiritsevät lukukokemusta tai itse sovelluksen käyttöä. Hienovarainen animaatio on kuitenkin tehokas keino kiinnittämään käyttäjän huomion tiettyyn ominaisuuteen, mikäli sivusto muuten on staattinen.
11. Transitional Patterns
Yleisimpiä siirtymätoimintamalleja verkkosovelluksissa ovat:
\- Kirkastus ja himmennys
o Lightbox \--efekti (ks. kappale 5.)
o Kiinnittää huomion ylemmällä tasolla olevaan informaatioon, himmentäen muun sisällön
\- Laajentuminen ja piilottaminen
o Upotettu sisältö (ks. kappale 6.)
\- ”Parantuva” himmennys
o Esim. listasta poistettu objekti häviää askelittain, jättäen hetkeksi tyhjän paikan
o Auttaa käyttäjää hahmottamaan, mitä tapahtui
\- Animaatio
o Fyysisessä maailmassa mikään ei katoa tai ilmesty tyhjästä, joten verkossakin on hyvän käytännön mukaista esittää tapahtumat animaation avulla, jolloin käyttäjä pystyy havainnoimaan paremmin tapahtumia
\- Spottivalo
o Mikäli käyttöliittymässä tapahtuu muutos, spottivalo on hyvä tapa korostaa sitä
o Spottivalo voi olla esim. tekstimuutoksen jälkeen taustavärin hetkellinen muutos, joka indikoi, että toiminto on suoritettu
12. Purpose of Transitions
Siirtymien tarkoituksena on luoda ympäristö, jota on mahdollisimman helppo seurata ja ymmärtää. Käyttäjä pystyy havainnoimaan muutoksia paremmin, kun ne on esitetty siirtymien avulla, eivätkä vain tapahdu, ilman minkäänlaista siirtymävaihetta. Animaatiot myös herättävät käyttäjän huomion haluttuun kohteeseen.
Animaatiolla on kuitenkin oltava selkeä tarkoitus, ilman tarinaa, visuaalinen kikkailu ei ole kiinnostavaa. Animaation ensisijainen käyttötarkoitus on kommunikaatio.
Siirtymien yleisiä toimintaperiaatteita:
\- Mitä nopeampi siirtymä, sitä tärkeämmäksi se koetaan
\- Liike koetaan tärkeämmäksi, kuin värin vaihtelu
\- Käyttäjään kohti tuleva liike koetaan tärkeämmäksi, kuin pois päin menevä
\- Hidas liike voidaan toteuttaa häiritsemättä käyttäjää
\- Liikkeen ensisijainen päämäärä on kommunikoida käyttäjän kanssa
\- Käytä symmetristä interaktiota
\- Varo liikakäyttöä\!
\- Älä luota pelkkään animaatioon kommunikaation välineenä
h2. React Immediately
Edelliset kappaleet käsittelivät palautteen antamista käyttäjälle kutsujen ja siirtymien avulla. Kutsut antavat palautetta ennen toimintoa, siirtymät toiminnon aikana. Tämä kappale käsittelee palautteen antamista heti toiminnon jälkeen.
Newtonin kolmas laki, voiman ja vastavoiman laki: \_”For every action, there is an equal and opposite reaction”._ Mikäli kappaleeseen vaikuttaa jokin voima, niin samanaikaisesti kappaleen täytyy vaikuttaa yhtä suurella, mutta suunnaltaan vastakkaisella voimalla. Vaikka lakia ei voi kirjaimellisesti soveltaa käyttöliittymäsuunnitteluun, voidaan siitä ottaa oppia käyttäjän interaktion suunnittelussa. Käyttöliittymän tulee reagoida välittömästi jokaiseen käyttäjän tekemään toimintoon.
13. Lookup Patterns
Käyttöliittymä voi reagoida hakutoimintoihin seuraavilla menetelmillä: automaattinen täydennys, dynaaminen ehdotus, dynaaminen haku, täsmentävä haku.
Automaattinen täydennys on käytössä usein esin. sähköpostisovelluksissa. Käyttäjän alkaessa kirjoittamaan vastaanottajan osoitetta, sovellus ehdottaa yhteystiedoista löytyviä osoitteita tai henkilöitä. Sähköpostisovelluksessa tämä on hyvin tärkeä ominaisuus, jonka ansiosta käyttäjän ei tarvitse muistaa vastaanottajan osoitetta, vaan nimi riittää automaattisen täydennyksen hoitaessa loput. Automaattinen täydennys auttaa noudattamaan Jakob Nielsenin kymmentä käytettävyyden lakia, joista yksi on virheiden ennakointi.
Dynaaminen ehdotus on hyvin lähellä automaattistä täydennystä. Dynaamisten ehdotusten tarkoituksena on tarkentaa hakulauseketta. Hakukoneet, kuten Google käyttävät tätä toimintoa. Käyttäjän kirjoittaessa hakukoneeseen ”tom cruise”, sovellus listaa ehdotuksia, joilla hakua voi tarkentaa, saatavien hakutulosten perusteella. Lista ehdotuksista hakusanalle ”tom cruise” voi olla ”tom cruise films”, ”tom cruise imdb”, ”tom cruise wiki”, ym.
Dynaaminen haku eroaa dynaamisesta ehdotuksesta siten, että dynaaminen haku listaa hakutulokset samantien käyttäjän kirjoittaessa hakulauseketta. Näin ollen käyttäjän kirjoittaessa ”tom cruise”, hakutulokset ilmestyvät välittömästi ja käyttäjän tarkentaessa lauseketta muotoon ”tom cruise films”, tulokset päivittyvät. Käyttäjän ei tarvitse missään vaiheessa painaa ”hae” \--nappia ja hän näkee miten hakutulokset päivittyvät dynaamisesti hakulausekkeen tarkentuessa.
Täsmentävä haku on hyödyllinen esim. verkkokaupoissa ja varausjärjestelmissä. Haun jälkeen sovellus tarjoaa vaihtoehtoja haun täsmentämiseksi. Esimerkiksi käyttäjä voi hakea netistä autoa hakusanalla ”toyota”. Tämän jälkeen sovellus tarjoaa liutettavan palkin hintahaarukalle, johon käyttäjä määrittelee 0 - 20 000€. Näin hakutuloksia saadaan karsittua relevantimmaksi käyttäjän tarpeisiin.
14. Feedback Patterns
Hakutulokset eivät ole ainoa toiminnallisuus, joka tarvitsee välitöntä palautetta. Muita menetelmiä palautteen antamiseen on: dynaaminen esitkatselu, progressiivinen tiedonanto, edistymisen mittari ja jaksollinen päivitys.
_Even better than good error messages is a careful design which prevents a problem from occurring in the first place._ -- Jakob Nielsen, 10 käytettävyyden heuristiikkaa.
_An ounce of prevention is worth a pound of cure._ -- Benjamin Franklin.
Dynaaminen esikatselu on hyvä keino esittää käyttäjälle, miten hänen toimintonsa tulee vaikuttamaan ja estää näin edestakaisen liikkeen, koska tarvittavat korjaukset voi tehdä välittömästi. Esimerkiksi useat rekisteröitymislomakkeet käyttävät esikatselua mm. salasanan validoimisessa. Salasana \--kentän vieressä voi olla mittari, joka näyttää dynaamisesti, kuinka vahva salasana on. Salasanan vaatimukset vaihtelevat suuresti palveluittain ja virheellisen salasanan syötön mahdollisuus on suuri, mikäli sovellus ei ilmoita syöttövaiheessa virheestä. Dynaamista esikatselua voidaan käyttää erittäin hyvin hyödyksi mm. verkkokaupoissa tai markkinointikampanjoissa, joissa käyttäjä pääsee vaikuttamaan tuotteen ulkonäköön.
Progressiivinen tiedonanto mahdollistaa kevyempiä käyttöliittymiä. Mikäli jokin toiminnallisuus on tarpeellinen vain tietyssä vaiheessa, se voidaan piilottaa muuksi ajaksi ja tuoda juuri oikealla hetkellä esiin. Lomakkeissa on usein salasana \--kentän lisäksi ”vahvista salasana” \--kenttä. Lomake voidaan tehdä kevyemmäksi piilottamalla vahvistuskenttä ja tuomalla se esiin vasta siinä vaiheessa, kun käyttäjä alkaa täyttämään salasana \--kenttää.
Mikäli jokin sovelluksen toiminto kestää pitkään, on tärkeää antaa palautetta toiminnon edistymisestä käyttäjälle. Tähän toimii edistymisen mittari, joka voi perinteisimmin olla esim. selaimistakin tuttu latauspalkki. Mikäli tekniikka ei mahdollista prosentuaalista edistyksen seuraamista, voidaan edistyminen indikoida pyörivällä animaatiolla, jotta käyttäjä tietää kokoajan sovelluksen olevan toiminnossa. Edistymisen seuranta voidaan pilkkoa eri vaiheisiin, jolloin toiminto tuntuu vievän vähemmän aikaa, koska ruudulla tapahtuu kokoajan jotakin uutta.
Jaksollinen päivitys on hyödyllinen, mikäli sovelluksen tarkoituksena on tarjota jatkuvasti päivittyvää informaatiota. Esimerkiksi sosiaaliset mediat käyttävät laajalti tätä toimintoa näyttääkseen käyttäjälle jatkuvasti reaaliajassa muiden käyttäjien toimintoja. Toiminto on yksinkertaisuudessaan tietyn alueen uudelleen lataus tietyllä aikavälillä, ilman käyttäjän toimintoa (esim. sivun uudelleenlatausta). Päivitys ei saa tapahtua kuitenkaan liian tiuhaan, vaan pitää myös muistaa säilyttää sivun luettavuus.
h2. Epiloque
# Make it Direct
_WYSIWYG (What You See Is What You Get)_ \--menetelmä on todistettu toimivaksi viimeisten vuosikymmenten aikana. Mahdollista sisällön muokkaaminen kontekstissa, objektien hallinta hiirellä raahaamalla ja toimintojen kohdistaminen suoraan objekteihin.
# Keep it Lightweight
Ymmärrä käyttäjän tahtotila ja tarjoa juuri oikea määrä informaatiota, pitäen käyttöliittymä mahdollisimman kevyenä. Tarjoa toiminnallisuudet kontekstissaan, lähellä objektia, johon toiminta kohdistuu.
# Stay on the Page
Vältä sivun uudelleen latausta. Jokainen katkos häiritsee optimaalista käyttökokemusta ja käyttäjän havainnointikykyä.
# Provide an Invitation
Käytä staattisia ja dynaamisia kutsuja, jotta tarjoamasi toiminnot eivät jää huomaamatta.
# Use Transitions
Siirtymät ovat pakollisia kommunikaation saavuttamiseksi ja edistävät käyttäjän sitouttamista. Varo kuitenkin animaation liikakäyttöä.
# Be Reactive
Jokaiselle toiminnolle pitää löytyä vastareaktio. Pidä käyttäjä jatkuvasti tietoisena sovelluksessa tapahtuvasta edistymisestä. |
Page History
Overview
Content Tools
Activity