Bill Scott & Theresa Neil:
...
Designing Web
...
Interfaces - Principles and Patterns for Rich Interactions
Johdanto
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
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.
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).
Oheinen taulukko näyttää, kuinka monta eri vaihetta drag and drop -menetelmä käsittää ja joihin voidaan suunnitteluvaiheessa vaikuttaa.
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.
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.
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
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.Designing Web Interfaces (.doc)