Web-Käyttöliittymä, käytettävyys Asiakas on kuningas, hiiri aseena Jos asiakas ei löydä tuotetta, hän ei osta sitä

Käytettävyyden merkitys

Tuotetta ei osteta ennen kuin se on todettu hyväksi Ohjelmistoteollisuus vastaa tuotteistaan tukipalvelun kautta - kallista Webissä käyttäjä tutustuu sivuston käytettävyyteen ennen kuin sitoutuu maksamaan tuotteesta – kauppoja ei synny ilman hyvää käytettävyyttä

Taide vs. tekniikka Suunnittelun kaksi näkökulmaa –taiteellinen itsensä toteuttaminen –tekninen, asiakkaan ongelman ratkaiseva näkökulma Nielsen: tekninen näkökulma, tieteellinen –Sääntöjä periaatteita, ohjeita, menetelmiä Älä silti unohda luovuutta ja inspiraatiota

WWW-suunnittelun virheitä Yrityksen toimintamalli –rakentaminen organisaatiojaon mukaan, ei yhteisellä suunnitelmalla Projektinhallinta puuttuu Informaatioarkkitehtuuri –organisaation mukaan (ei lukijan mukaan) Sivujen suunnittelussa virheitä Sisällöntuotanto ei ammattimaista Linkkien rakentaminen ontuu

Sivujen suunnittelu Lähtökohta: korosta sitä, miksi sivu on arvokas käyttäjälle ja miten yritys eroaa tärkeimmistä kilpailijoista

Arvioitavat kohdat Nielsenin mukaan – heuristinen lista Näyttöala Eri käyttöliittymät Merkityksen ja esitystavan erottaminen Tyylitiedostot Vasteaika Linkit Kehysten käyttö

Näyttöala Tilan käyttö sivuilla - yhdessä Tyhjä sallittua selkeyttäjänä Sisältö vähintään 50 %, mieluimmin jopa 80 % alasta Navigointivälineille 20% (pääsivuilla enemmän) Yhden sivun tulee toimia kaikissa näyttölaitteissa

Näyttöala

Eri käyttöliittymät käyttäjä liikkuu oma-aloitteisesti voidaan lukea kämmentietokoneella, kännykällä, jopa autolla erot kämmentietokone - huipputyöasema 100- kertainen modeemin yhteysnopeus - T3-yhteys kertainen

W3schools-sivun käyttäjien näyttöpäätteiden koon jakautuminen Browser Statistics Month by Month 2009 IE7IE6IE8FxChromeSO March24.9%17.0%1.4%46.5%4.2%3.1%2.3% February25.4%17.4%0.8%46.4%4.0%3.0%2.2% January25.7%18.5%0.6%45.5%3.9%3.0%2.3%

Internet Usage in Europe

Irti resoluutiosta Näytön kokoa mahdoton arvata Riippumattomuus resoluutiosta Taulukot, kehykset jne prosentteina käytettävissä olevasta tilasta Kirjasinkoot vaihtelevat Tarkista, että grafiikat toimivat myös yli 100 dpi:n tarkkuuksissa Kirjoitin ongelma: resoluutiosta riippuvaisia sivuja vaikea tulostaa –eri sivu tulostettaville - linkki Tulosta

Standardoitu kieli Älä käytä uusia tekniikoita sivustosi ilmeen piristämiseen Vältä epästandardia tapaa Standardit linkkilistassa

Päivitysongelmat Osa päivittää selaimet heti, käytännössä tarvitaan vuosi siihen, että kaikki siirtyvät uuteen versioon - Tulevaisuudessa vielä harvemmin Ainoa varmasti toimiva versio on HTML (vain noin 40 % sivustoista on ylipäätään määritelty jollekin html- versiolle) - suositus kuitenkin - käytä XHTML 1.0 tai 1.1 koodauksessa Poikkeus : WWW-konsultit - aihetta silti varovaisuuteen

Merkityksen ja esitystavan eriyttäminen HTML suunniteltu merkityksen tallentamista varten ( sivun toiseksi suurin otsikko) Semanttinen koodaus - toimii kaikilla välineillä ja ohjelmilla

Tyylitiedostojen toimivuuden varmistaminen sivujen on toimittava, vaikka selain ei tukisi tyylitiedostoja ei enempää kuin kahta kirjasinlajia –leipätekstiin yhtä, otsikot toisesta, paksummasta suhteellinen kirjasinkoko ei !important-attribuuttia CSS:ään jos useita tyylitiedostoja, varmistuttava, että CLASS-luokkia on käytetty yhtenevästi

Vasteaika Käyttäjät haluavat sivujen latautuvan nopeammin - tärkein kriteeri –aika sekunnin kymmenys - käyttäjä kokee järjestelmän reagoivan välittömästi –aika alle sekunnin - käyttäjän ajatus ei katkea –aika alle kymmenen sekuntia - käyttäjän huomio säilyy vuorovaikutustilanteessa Ennustettavuus - vasteaikojen muutoksia on syytä minimoida

Vasteaika – miksi hidas Laitteistoa uusitaan liian hitaasti Palvelimen yhteysnopeudesta tingitään Internetin rakenne Käyttäjän hidas yhteys Selainohjelmiston ja tietokoneen piirtokyky

Latausaika ja yhteysnopeus Vähemmän kuvia - enemmän kävijöitä Värien käyttöä voi lisätä Saman kuvan toisto (muistissa) - pienet koristeelliset kuvat kierrätykseen sivustolla

Linkeistä Eri linkkityypit –Rakenteelliset (tietoavaruuden hahmotus) –Sisältö (lisätietoa alleviivatusta sanasta) –Aiheeseen liittyvät (käyttäjää autetaan löytämään etsimänsä)

Linkkejä ja Vinkkejä Älä käytä – ”Klikkaa tästä ” - informaatioarvo? •kuka klikkaa? –Lisätietoa muurahaisista tästä Sen sijaan –Täältä saat tietoa muurahaisista Käyttäjälle tarjotaan kuvaus linkin sisällöstä Linkkiotsikot – Ei näin –vaan Internetixin oppimateriaali

ja lisää vinkkejä Linkit myös ulos sivustosta Sinisen värin hyöty? - Silti suositeltava Käydyn linkin väri Sivustolle johtavat linkit –tekstin täytettävä lupaus

Rekisteröityminen tai maksu Yksiselitteinen ei - mielummin mikromaksu tai muu puhelinmaksun tapaan perittävä Mainoslinkit – % kävijöistä palaa takaisin välittömästi –”Katso tänne” ärsyttää, houkuttelu tehtävä informaatiosisällöllä

Kehykset Älä käytä kehyksiä! –Jos käytät, -tag URL-osoitteiden toimivuus pienen näytön ongelmat selainongelmat hakukoneet eivät osaa käsitellä kehyksiä

Jos käytät kehyksiä varmista että URL-osoite toimii älä riko tekijänoikeutta voit käyttää kehyksia, kun luot muita sivuja käyttäviä metasivuja (esim käytettävyyttä arvioivia sivuja, joissa on esimerkkejä)

Siis arvioitavat kohdat Nielsenin mukaan Näyttöala Eri käyttöliittymät Merkityksen ja esitystavan erottaminen Vasteaika Linkit Tyylitiedostot Kehysten käyttö