Esittely latautuu. Ole hyvä ja odota

Esittely latautuu. Ole hyvä ja odota

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

Samankaltaiset esitykset


Esitys aiheesta: "Web-Käyttöliittymä, käytettävyys Asiakas on kuningas, hiiri aseena Jos asiakas ei löydä tuotetta, hän ei osta sitä."— Esityksen transkriptio:

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

2 Käytettävyyden merkitys http://www.labnol.org/internet/blogging/the-total-number-of-websites-on-earth/2257/

3 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ä

4 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

5 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

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

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

8 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

9 Näyttöala http://gd.tuwien.ac.at/languages/html/webstyle/wsg3/7-page-design/2-document-design.html

10 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 1000- kertainen

11 W3schools-sivun käyttäjien näyttöpäätteiden koon jakautuminen http://www.w3schools.com/browsers/browsers_stats.asp 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%

12 Internet Usage in Europe http://www.internetworldstats.com/stats4.htm

13 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

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

15 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 1.0 - (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

16 Merkityksen ja esitystavan eriyttäminen HTML suunniteltu merkityksen tallentamista varten ( sivun toiseksi suurin otsikko) Semanttinen koodaus - toimii kaikilla välineillä ja ohjelmilla http://www.w3.org/TR/2002/REC-xhtml1-20020801/

17 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

18 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

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

20 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

21 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ä)

22 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 www.internetix.ofw.fi –vaan Internetixin oppimateriaali

23 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

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

25 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ä

26 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ä)

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


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

Samankaltaiset esitykset


Iklan oleh Google