Käyttöliittymät II Luento 7 Suunnittelumallien käyttö ja web-navimallit Harjoitus 1: Asuntohaku-sovellus Harjoitus 2: Groups and Items Esimerkkejä muista kälisuunnittelumalleista Web-navigoinnin suunnittelumallit (Rossi et al.) Harjoitus 1: Käli-suunnittelumallien käyttö Suunnittele annetun yhden käyttötapauksen ja sen variaatioiden pohjalta käyttöliittymä sunnuntain asuntoesittelyissä käymistä varten. Käytä seuraavia patterneja: Continuous Filter Overview beside Detail Double List Schedule Autosave Kun olet laatinut käliratkaisusi, arvioi: Tarvitsetko vielä Rule Storagea tai Data Storagea? Todennäköisesti et tarvitse Temporary Storagea. Mikset? 1
Harjoitus 2: Groups and Items Suunnittele Groups and Items -esimerkkikuvan käyttöliittymäratkaisua eteenpäin s.e. tuet seuraavien käyttötapausten sekvenssiä: Ma 28.10. perustetaan pikkujoulutyöryhmä, johon ovat lupautuneet tähän mennessä Pia Koskela, Aleksi Haataja ja Kirsi Airisto. Ti 29.10. yritykseen palkataan Web-palvelujen projektipäälliköksi uusi henkilö, Minna Pihlaja. Entinen projektipäällikkö Esko Siltamäki siirtyy markkinointiryhmän jäseneksi ja aloittaa johtoryhmässä. Ke 6.11. Mikko Haapakoski saadaan houkuteltua mukaan pikkujoulutyöryhmään. To 7.11. Web-palvelut muuttaa nimensä Verkkopalveluiksi. Pe 15.11. Verkkopalvelut-ryhmä jaetaan kahtia: Verkkokoulutuspalvelut Verkkopalvelujen tuotekehitys Esimerkkejä muista kälisuunnittelumallien kokoelmista Arvioi näitä kriittisesti. Coram & Lee: Garden of Windows www.maplefish.com/todd/papers/experiences/experiences.html Tidwell: High-density Information Display www.mit.edu/~jtidwell/interaction_patterns.html 2
Web-navigoinnin suunnittelumalleja (navigational patterns) Lähteet Rossi G., Schwabe D., Lyardet F., Improving Web Information Systems with Navigational Patterns. WWW8 / Computer Networks, 31 (11-16), 1999, s. 1667-1678. http://www8.org/w8-papers/5b-hypertextmedia/improving/improving.html Rossi G., Schwabe D., Garrido A., Design Reuse in Hypermedia Applications Development. Hypertext 97 Conf. Proc., 1997, s. 57-66. http://www.inf.puc-rio.br/~schwabe/papers/ht97.pdf Set-based Navigation Aloittelevat suunnittelijat tekevät tyypillisesti luettelosivun, jossa on linkki jokaista kohdetta varten. Kun käyttäjä suorittaa käyttötapaustaan, hän joutuu turhaan navigoimaan edestakaisin luettelosivun ja kohdesivujen välillä. Back Back 3
Set-based Navigation Rossin kantavana ajatuksena on se, että käyttäjän tehtävään liittyvät kohteet linkitetään yhdeksi joukoksi. Kohteet voivat olla esimerkiksi kirjoja, CD-levyjä, maalauksia tai kaupunkeja. Esim. taidegalleriassa käyttäjä voi päätyä saman maalauksen (Van Goghin Sun Flowers) kohdalle joukosta Van Goghin maalaukset tai luontoaiheiset maalaukset. Set-based Navigationia täydentää Rossin mukaan Node in Context. www.nga.gov Node in Context Taidegalleriasovelluksessa kontekstisolmu (Context node) voisi olla esimerkiksi Van Goghin maalaukset tai luontoaiheiset maalaukset. Van Goghin Sun Flowers -maalaus (Node) esiintyy monessa kontekstissa, tässä luontoaiheisten maalausten joukossa. www.inf.puc-rio.br/~schwabe/papers/ht97.pdf 4
Landmark Määritellään joukko maamerkkejä ja tarjotaan käyttäjälle pääsy niihin jokaisella sivulla. www.amazon.com Active Reference Käytännössä Rossin ryhmän esittelemä Active Reference tarkoittaa jatkuvasti näkyvillä olevaa navigointipalkkia, jossa nykysijainti on korostettu. Kyseessä on siis yhdenlainen Overview beside Detail. www.inf.puc-rio.br/~schwabe/papers/ht97.pdf 5
News Web-sivustoille tuotetaan jatkuvasti uutta informaatiota, kuten uusia kirjoja, uusia julkaisuja tai tietoja tulevista tapahtumista. Uusi kohde sijoitetaan sivuston jäsentelyn mukaiselle oikealle paikalleen. Lisäksi tarjotaan kokoelma uutuuksia, josta käyttäjät saavat tietoa viimeisimmistä muutoksista joutumatta etsimään niitä käymällä läpi koko sivustoa. www.news.com www.borland.com Shopping Basket Käyttäjät ostavat webkaupoista tyypillisesti useita tuotteita kerrallaan. Koska jokaisen tuotteen ostotapahtumaan liittyvien tietojen syöttäminen erikseen olisi vaivalloista, tarjotaan käyttäjälle mahdollisuus kerätä tuotteet ensin ostoskoriin ja ostaa ne kaikki kerralla. Jokaisen tuotteen yhteyteen lisätään toimintopainike, jolla käyttäjä siirtää ko. tuotteen ostoskoriin. Vaikka hyviä metaforia on harvassa, tässä ostoskorimetafora toimii hyvin. www.amazon.com 6
Esimerkki: Hakutulosjoukko Kirjoittajien esittämä ratkaisu on tällainen toteutus Set-based Navigationista. http://www8.org/w8-papers/5b-hypertext-media/improving/improving.html Mikä olisi parempi ratkaisu? 7