IHTE-2100 KaSuper 2008-2009 Luento 9: www-käyttöliittymät, standardit Ten Good Deeds in Web Design 1. Aseta nimi ja logo joka sivulle, tee logosta linkki 2. Tarjoa hakumahdollisuus jos sivuja > 100 3. Kirjoita selkeät otsikot sivuille ja teksteille 4. Tue silmäilevää lukutapaa 5. Käytä hypertekstiä sisällön jäsentämisessä 6. Käytä tuotekuvia mutta älä liikaa 7. Pienennä kuvat oleellisen sisällön mukaan 8. Käytä linkkiotsikoita 9. Varmista että tärkeät sivut ovat myös erikoisryhmien saatavilla 10. Tee kuten muutkin (Nielsen, http://www.useit.com/alertbox/991003.html) 1. Aseta nimi ja logo joka sivulle, tee logosta linkki 1. Aseta nimi ja logo joka sivulle, tee logosta linkki
1. Aseta nimi ja logo joka sivulle, tee logosta linkki 2. Tarjoa hakumahdollisuus jos sivuja > 100 2. Tarjoa hakumahdollisuus jos sivuja > 100 2. Tarjoa hakumahdollisuus jos sivuja > 100
3. Kirjoita selkeät otsikot sivuille ja teksteille 3. Kirjoita selkeät otsikot sivuille ja teksteille 4. Tue silmäilevää lukutapaa 4. Tue silmäilevää lukutapaa
5. Käytä hypertekstiä sisällön jäsentämisessä 5. Käytä hypertekstiä sisällön jäsentämisessä 6. Käytä tuotekuvia mutta älä liikaa 7. Pienennä kuvat oleellisen sisällön mukaan
7. Pienennä kuvat oleellisen sisällön mukaan 8. Käytä linkkiotsikoita 9. Varmista esteettömyys 9. Varmista esteettömyys
9. Varmista esteettömyys Esteettömät verkkopalvelut Verkkopalvelut kaikkien saataville Hyöty erityisryhmille ja erikoisten päätelaitteiden käyttäjille Esteettömyyden huomiointi edistää samalla myös käytettävyyttä erilaisissa käyttötilanteissa ja ympäristöissä Huomioi verkkopalvelussa erityisesti 1. Rakenne 2. Kieli 3. Tekniikat 4. Linkit 5. Multimedia 6. Taulukot 7. Ohitettavuus
Esimerkki vaihtoehtoteksteistä Kaikki verkkosivut ovat aina keskeneräisiä käyttäjälle ei siis kannata kertoa sivuston puutteista julkaise sivut vasta kun ne ovat julkaisukelpoisia tulevaisuudensuunnitelmista voi kertoa, mutta tärkeintä käyttäjälle on mitä sivustolla voi tehdä tällä hetkellä Nielsen: rakenna sivusto huolella Erota sisältö ja esitystapa - käytä semanttista koodausta - käytä tyylitiedostoja (CSS, Cascading Style Sheet) tarvittaessa Pääosassa sisältö eli se informaatio, joka oletettavasti sai käyttäjän sivustolla käymään Nyrkkisääntö: yksinkertainen on monimutkaista parempi vaihtoehto Uskottavuus: sivuston voi perustaa kuka tahansa, luotettavuutta parantaa sivun hyvä suunnittelu ja siisti ulkoasu Nielsen: pääsivu on tärkeä Sivuston tärkein sivu Tehtävänä - kertoa käyttäjälle sivuston tarkoitus - tarjota reittejä muualle sivustoon Paras sisältö riippuu aina sivuston tarkoituksesta ja kohderyhmästä Erilliset käynnistyskuvat ja tervetuloa - sivut animaatioineen useimmiten turhia
Seittisivujen lukeminen Näytöltä lukeminen 25% hitaampaa kuin paperilta lukeminen Miten käyttäjät lukevat seittisivuja? Nielsen: eivät mitenkään. käyttäjät selaavat ja silmäilevät sivuja John Morkesin & Nielsenin tutkimus 1997 79% käyttäjistä silmäilee sivuja vain 16% lukee sanasta sanaan Esimerkki: Näytöltä lukeminen Nielsenin & Morkenin tutkimus Viisi eri versiota seittisivuista alkuperäinen teksti lyhennetty teksti silmäiltävä teksti objektiivinen teksti yhdistetty versio, jossa käytetty kaikkia kolmea muokattua versiota Mitattiin, kuinka paljon käytettävyys (luettavuus) prosentuaalisesti paranee Esimerkki: Alkuperäinen teksti Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446).
Esimerkki: Tiivistetty teksti (58%) In 1996, six of the best-attended attractions in Nebraska were Fort Robinson State Park, Scotts Bluff National Monument, Arbor Lodge State Historical Park & Museum, Carhenge, Stuhr Museum of the Prairie Pioneer, and Buffalo Bill Ranch State Historical Park. Esimerkki: Silmäiltävä teksti (47%) Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were: Fort Robinson State Park (355,000 visitors) Scotts Bluff National Monument (132,166) Arbor Lodge State Historical Park & Museum (100,000) Carhenge (86,598) Stuhr Museum of the Prairie Pioneer (60,002) Buffalo Bill Ranch State Historical Park (28,446). Esimerkki: Objektiivinen teksti (27%) Nebraska has several attractions. In 1996, some of the most-visited places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446). Esimerkki: Yhdistetty versio (124%) In 1996, six of the most-visited places in Nebraska were: Fort Robinson State Park Scotts Bluff National Monument Arbor Lodge State Historical Park & Museum Carhenge Stuhr Museum of the Prairie Pioneer Buffalo Bill Ranch State Historical Park
Nielsen: verkkoon kirjoittaminen Tee silmäiltävää tekstiä - käytä useita otsikkotasoja - kirjoita informatiivisia väliotsikoita - pilko osa tekstistä luetteloiksi ja listoiksi - korosta avainsanoja (lihavointi, värit) - havainnollista kuvien, kaavioiden ja taulukoiden avulla - myös tyhjä tila on tehokeino Nielsen: käytä kuvia harkiten Perusteeton kuvitus on karsittava - toisaalta käytä kuvia esim. verkkokaupassa Nopeuta latautumista - optimoimalla kuvien koko ja talletusmuoto - määrittelemällä kuvien leveys ja korkeus - käyttämällä pikkukuvia (thumbnails) joista linkki isompaan kuvaan Jos kuva sisältää tärkeää informaatiota, on tieto tarjottava myös muussa muodossa Kuvan merkityksellinen pienentäminen Lisää huomioitavia asioita Palautemahdollisuus Rakenna sivustosta hakukoneille helppo käsiteltävä (search engine design) Visuaaliset suunnitteluperiaatteet, asettelu Värien valinta Normanin suunnitteluperiaatteet Nielsenin heuristisen arvioinnin lista
Nielsen: ota linkeistä kaikki irti Linkit, 3 tyyppiä - rakenteellinen linkki hahmottaa esimerkiksi sivujen rakennetta - sisältölinkki siirtyy sivulle, jossa lisätietoa linkin sanasta tai kuvasta - aiheeseen liittyvä linkki auttaa käyttäjää löytämään muita samanaiheisia sivuja Linkeillä vain 2 standardiväriä - sininen = avaamaton linkki - sinipunainen/punainen = avattu linkki Linkkitekstit informatiivisiksi - Kesän uutuuksista saat lisätietoja täältä vs. Tutustu kesän uutuuksiin - Jos linkkitekstinä henkilön nimi, linkin tulisi viedä sivustolle jossa lisätietoja henkilöstä. Sähköpostilinkit erikseen. Nielsen: ota linkeistä kaikki irti Linkkiotsikot hyvä keino välittää lisätietoa - tulevat näkyviin, kun kursori on ollut n. 1s linkin kohdalla - tarkoituksena auttaa käyttäjää arvioimaan, mitä tapahtuu tiettyä linkkiä seuratessa Linkit ulos sivustolta - hyvät linkit saavat käyttäjät palaamaan sivulle - linkkeihin lyhyt kuvaus kohteen sisällöstä - laatu korvaa määrän, muista ryhmittely - käyttäjälle tulee kertoa, jos linkki vie ulos sivustolta
Nielsen: vasteajat Vasteajat - toiminnon tulee reagoida ajassa 0,1s - sivulta toiselle siirtyminen tulisi olla < 1s - hyvä tavoite on sivun latautuminen alle 10 s WWW-sivujen tärkein ominaisuus on nopea latautumisaika. - Jakob Nielsen Nielsen: sivut nopeasti latautuviksi enemmän tekstiä ja vähemmän kuvia, optimoidut kuvat sivun yläosan tulee olla hyödyllinen käyttäjälle ilman, että kuvat ovat latautuneet kuviin ALT-tekstit, näkyvät useissa selaimissa ennen kuvan latautumista tekstisisältö latautuu nopeasti jos WIDTH- ja HEIGHTmäärittelyt kaikkiin kuviin ja taulukoihin ovat olemassa vaikeaselkoiset ja monimutkaiset taulukot jaetaan useaan pienempään taulukkoon multimediaefektejä vain tarvittaessa suuria tiedostoja sisältäviin linkkeihin tiedoston koko ja esimerkki latautumisajasta tietyllä nopeudella Nielsen: taita sivu joustavaksi Sivua ei pidä suunnitella erityisesti millekään tietylle standardikoolle - näyttöjen ja selainikkunoiden koot vaihtelevat - käytetyt resoluutiot vaihtelevat - jos kuitenkin halutaan tehdä määrätyn kokoinen sivu niin leveys tulisi olla alle 600 pikseliä. Liukuva asettelu käyttäjille parempi kuin kiinteä Pieniä näyttöjä ei pidä pakottaa vierittämään näyttöä vaakasuunnassa Nielsen: tarjoa tulostusmahdollisuus Sivun tulee mahtua sekä letter- että A4-arkille - suositeltava marginaali 2,5 cm, jolloin tulostettava alue on n. 23x16cm Sivusta tehtävä tarvittaessa kaksi versiota; tulostettava ja näytöltä luettava - näytöllä 1 palsta, tulosteessa 2 - erilaiset kirjasinlajit - näytöltä luettava muotoa HTML - tulostettavat muotoa PS (PostScript) tai PDF Tulevaisuudessa ehkä standardi jonka avulla automaattisesti tarjotaan eri versio tulostukseen?
Standardit Standardien käyttö on pääosin ilmaista - käyttöönotto käytännössä ei Standardeja on kolmea päätyyppiä - kansalliset ja kansainväliset standardit (viralliset standardit) - teollisuusstandardit, esim. PDF - sisäiset standardit, esim. käyttöliittymästandardi (Interface Design Standard) - (konsortiostandardit, esim. W3C) Tärkeimmät standardointiorganisaatiot ISO (International Organization for Standardization) IEC (International Electrotechnical Commission) SFS (Suomen standardoimisliitto) Standardit Toistuvaan tapaukseen tarkoitettu yhdenmukainen ratkaisu yhteensopivuus, johdonmukaisuus turvallisuus laadun takaaminen rahalliset säästöt Esim. SI-järjestelmä Standardit Standardi on sovittu toimintatapa ei ole pakko noudattaa noudattamisesta yleensä hyötyy sekä tuotteen valmistaja että käyttäjä
Raha-, kieli- ja maakoodit saattavat muuttua maksullisiksi ISO-standardeilla yritetään rahastaa Tietotekniikan standardielimet ovat nousseet takajaloilleen ISO:n (Organization for Standardization) ehdotuksesta muuttaa eräät sen keskeisistä standardeista maksulliseksi. Uuden ehdotuksen mukaan esimerkiksi ohjelmatalot joutuisivat maksamaan rojalteja maa- ja rahakoodien käytöstä ohjelmissaan, kertoo uutispalvelu Cnet. ISO ottaa tälläkin hetkellä maksun monista standardeja käsittelevistä dokumenteistaan, mutta erilaisten koodien käyttö on ollut aina ilmaista. Ehdotus pyytää lisenssimaksuja eräistä maailman yleisimmin käytetyistä standardeista on vielä alkuvaiheessa, mutta se on jo saanut osakseen voimakasta vastustusta. Ehdotusta vastustavat esimerkiksi World Wide Web -järjestö (W3C) ja Unicode. Unicoden mukaan esimerkiksi maakoodien maksullisuudella olisi suuri vaikutus lähes kaikkeen ohjelmateollisuuteen. Erilaisia ISO-koodeja on pakko käyttää esimerkiksi käyttöjärjestelmissä ja lähes kaikissa sovellusohjelmissa. "Koodeja käytetään Windowsissa, Javassa, Unixissa ja XML:ssä, ne ovat kaikkialla", toteaa Unicoden Mark Davis. Standardit kälisuunnittelussa Prosessiorientoituneet standardit kuvaavat proseduureja ja prosesseja, joita seurataan: - Human-centred design processes for interactive systems - Guidance on Usability ITviikko, verkkolehti ma 22.09.2003 Standardit kälisuunnittelussa Tuotesuuntautuneet standardit kuvaavat käyttöliittymän vaadittuja ominaisuuksia, esim. - Keyboard layouts for text and office systems - User Interfaces - Cursor controls - User guidance - Icon symbols and functions Standardit kälisuunnittelussa Käytettävyyden kannalta tärkeimmät standardit ovat: - ISO 9241-11: 1998 Guidance on Usability Tarkkuus, tehokkuus ja tyytyväisyys, jolla määritellyt käyttäjät saavuttavat määritellyt tavoitteet tietyssä ympäristössä - ISO 13407:1999 Human-centred design processes for interactive systems 56
Standardit kälisuunnittelussa Standardit ja niiden käyttötarkoitus käytön tehokkuus sekä käyttötyytyväisyys tietyssä ympäristössä Standardit voidaan jaotella sen mukaan, mitä aluetta ne koskevat: - käytön tehokkuus sekä käyttötyytyväisyys tietyssä ympäristössä - tuotekehitysprosessi - käyttöliittymä ja vuorovaikutus - organisaation kyky integroida käyttäjäkeskeinen suunnittelu osaksi tavanomaisia prosesseja Use in context Principles and recommendations ISO/IEC 9126-1: Software Engineering - Product quality - Part 1: Quality model ISO/IEC TR 9126-4: Software Engineering - Product quality - Part 4: Quality in use metrics ISO 9241-11: Guidance on usability Specifications ISO 20282: Usability of everyday products Standardit ja niiden käyttötarkoitus tuotekehitysprosessi Documentation Developement process ISO/IEC 18019: Guidelines for the design and preparation of software user documentation ISO 13407: Human-centred design processes for interactive systems ISO/IEC 15910: Software user documentation process ISO/IEC 14598: Information Technology - Evaluation of Software Products Käyttöliittymä ja vuorovaikutus Interface and interaction Principles and recommendations ISO/IEC TR 9126-2: Software Engineering - Product quality - Part 2 External metrics ISO/IEC TR 9126-3: Software Engineering - Product quality - Part 3 Internal metrics ISO 9241: Ergonomic requirements for office work with visual display terminals. Parts 10-17 Specifications ISO 9241: Ergonomic requirements for office work with visual display terminals. Parts 3-9 ISO/IEC 10741-1: Dialogue interaction Cursor control for text ISO/IEC 11581: Icon symbols and functions ISO TR 16982: Usability methods supporting human centered design ISO 11064: Ergonomic design of control centres ISO 14915: Software ergonomics for multimedia user interfaces IEC TR 61997: Guidelines for the user interfaces in multimedia equipment for general purpose use ISO 13406: Ergonomic requirements for work with visual displays based on flat panels ISO/IEC 14754: Pen-based interfaces - Common Gestures for text editing with pen-based systems ISO/IEC 18021: Information Technology - User interface for mobile tools
Organisaation kyky integroida käyttäjäkeskeinen suunnittelu osaksi tavanomaisia prosesseja Capability Other Principles and recommendations ISO TR 18529: Ergonomics of human-system interaction - Human-centred lifecycle process descriptions ISO 9241-1: Part 1: General Introduction ISO 9241-2: Part 2:Guidance on task requirements ISO 10075-1: Ergonomic principles related to mental workload - General terms and definitions ISO DTS 16071: Guidance on accessibility for humancomputer interfaces http://www.usabilitynet.org/tools/r_international.htm Specifications Muut ohjeistot käyttöliittymäsuunnittelussa Visuaalinen aakkosto - Yrityksellä, tuotteella, tuoteperheellä tms. yhteinen standardi graafinen merkistö - Yhdistää - Auttaa luomaan käsitemalleja ja tuttuja koodauksia Tyylioppaat - Tyyliopas liittyy tiettyyn ympäristöön esim. Windows-tyyliopas - Kertoo millainen käyttöliittymän tulisi olla ja miten eri elementtien tulisi toimia - Voi sisältää visuaalisen aakkoston määrittelyn Käyttöliittymästandardit Templates - pohja Webissä 85% sivuista noudattelee muutamia pohjia - Kotisivut - Lomakkeet - Wizardit - Tietokantojen ylläpito Käyttöliittymästandardit Määritellään templatesta mm: - toimintojen nimet - milloin käytetään mitäkin pohjaa - mitkä osat pohjasta ovat vakioituja
Käyttöliittymästandardi Kiitos kurssista ja onnea tenttiin Käyttöliittymästandardi Tyyliopas Visuaalinen aakkosto