Suunnittelumallien käyttö ja web-navimallit

Koko: px

Aloita esitys sivulta:

Download "Suunnittelumallien käyttö ja web-navimallit"

Marja-Leena Sipilä
8 vuotta sitten
Katselukertoja:

1 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 1: Käli-suunnittelumallien käyttö Suunnittele annetun yhden käyttötapauksen ja sen variaatioiden pohjalta käyttöliittymä sunnuntain asuntoesittelyissä

2 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 perustetaan pikkujoulutyöryhmä, johon ovat lupautuneet tähän mennessä Pia Koskela, Aleksi Haataja ja Kirsi Airisto. Ti 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 Mikko Haapakoski saadaan houkuteltua mukaan pikkujoulutyöryhmään. To Web-palvelut muuttaa nimensä Verkkopalveluiksi. Pe Verkkopalvelut-ryhmä jaetaan kahtia: Verkkokoulutuspalvelut Verkkopalvelujen tuotekehitys Esimerkkejä muista kälisuunnittelumallien kokoelmista Arvioi näitä kriittisesti. Coram & Lee: Garden of Windows Tidwell: High-density Information Display 2

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.

3 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 Rossi G., Schwabe D., Garrido A., Design Reuse in Hypermedia Applications Development. Hypertext 97 Conf. Proc., 1997, s 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

, Design Reuse in Hypermedia Applications Development. Hypertext 97 Conf. Proc., 1997, s. 57-66. http://www.inf.puc-rio.br/~schwabe/papers/ht97.

4 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. 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. 4

taidegalleriassa käyttäjä voi päätyä saman maalauksen (Van Goghin Sun Flowers) kohdalle joukosta Van Goghin maalaukset tai luontoaiheiset maalaukset.

5 Landmark Määritellään joukko maamerkkejä ja tarjotaan käyttäjälle pääsy niihin jokaisella sivulla. 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. 5

com Active Reference Käytännössä Rossin ryhmän esittelemä Active Reference tarkoittaa

6 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. 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. 6

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.

7 Esimerkki: Hakutulosjoukko Kirjoittajien esittämä ratkaisu on tällainen toteutus Set-based Navigationista. Mikä olisi parempi ratkaisu? 7

Samankaltaiset tiedostot

Suunnittelumallit (design patterns)

Suunnittelumallit (design patterns) Ohjelmoinnissa Rakennusarkkitehtuurissa Käyttöliittymäsuunnittelussa Sear ch Ohjelmointi Suunnittelumallit Usein toistuvia ohjelmointiongelmia ja niiden ratkaisuja: