User interface design for No Erno Pizzeria. Lasse Repo Santeri Malinen Joonas Korhonen Raportti

Transkriptio

1 User interface design for No Erno Pizzeria Raportti

2 USE CASES: Pizzan paistaja Henkilö, joka on vastuussa pizzojen valmistamisesta. Pizzan paistaja saa kaikki tilaukset asiakaspalvelijoilta / tarjoilijoilta tai sähköisen tilausjärjestelmän kautta. Pizzan paistaja paistaa tilauksia siinä järjestyksessä, kun niitä tulee sisään. Tämä takaa sen, että asiakas joka on tilannut pizzan ennen toista myös saa pizzansa ennen toista. Kun asiakas on saapunut pizzeriaan ja syö siellä, niin paistaja saa tilauksen tiedot suoraan asiakaspalvelijalta. Tietoihin kuuluu minkä pizzan asiakas haluaa, minkä kokoisena se halutaan, onko mitään erikoistoiveita esimerkiksi gluteeniton / laktoositon pohja ja tiedon esimerkiksi lisämausteista (oregano, valkosipuli jne). Mikäli asiakas on tehnyt tilauksensa internetpohjaisen tilausjärjestelmämme kautta, niin paistaja saa tiedon omalle päätteelleen. Hän paistaa pizzat siinä järjestyksessä, kun niitä saapuu järjestelmän kautta. Asiakaspalvelu (henkilö, joka palvelee asiakkaita pizzeriassa) Asiakaspalvelun tulee olla täysin tietoinen siitä miten järjestelmä / sovellus toimii. Asiakaspalvelu vastaa kaikista tilauksista, face to face, puhelin- ja internetin kautta tulevista. Nämä henkilöt vastaavat siitä, että kaikki tilaukset toimitetaan, ja että tilaukset lähtevät oikeassa järjestyksessä ja oikeille asiakkaille. Kuvaus yrityksen visiosta Asiakasyrityksenä toimiva pizzeria haluaa parantaa asiakaspalveluaan kokonaisvaltaisesti ja päästäkseen haluamaansa tavoitteeseen, pizzeria on päättänyt kehittää internetpohjaisen järjestelmän / sovelluksen pizzojen tilaamista varten. 2

3 Asiakkaille halutaan tarjota helpompi ja mukavampi käyttökokemus liittyen pizzojen tilaamiseen. Internet pohjaisen sovelluksen tarkoituksena on myös tehdä pizzojen tilaamisesta nopeampaa. Järjestelmän perusideana on rakentaa sovellus, jonka käyttäminen on helppoa heti ensimmäisestä kerrasta alkaen. Niin asiakkaat, kuin henkilökuntakin voivat nopeasti omaksua järjestelmän toiminnan. Task analysis Virtual Windows Virtual windows tekniikka perustuu siihen, että tiedot eri tehtävistä / toiminnoista jaetaan erillisiin virtuaalisiin ikkunoihin. Perimmäisenä tarkoituksena on pyrkiä siihen, että ikkunoita olisi mahdollisimman vähän tehtävää kohden. Tärkeää on myös miettiä mikä tieto näkyy asiakkaalle koko ajan, ja miten käyttäjä pääsee käsiksi haluamaansa tietoon. Meidän on myös pyrittävä siihen, että käyttäjä ymmärtää mahdollisimman helposti mitä tietoa milläkin ikkunalla on. 3

4 Asiakas Tilaa pizzan Tarkastelee pizzalistaa Tarkastelee pizzerian osoitetietoja (puh.nro, katuos, jne) Tarkastelee tilaustoimintoja ja maksutapoja jne Noutaa tilauksen pizzeriasta Asiakaspalvelu Vastaanottaa asiakkaan tilauksen Välittää tiedot pizzan paistajalle Pizzan paistaja Paistaa pizzan Pitää silmällä varastoa / raaka-aineiden määrää Tarkastaa että paistettu pizza vastaa tilattua Välittää pizzan asiakaspalveluun paistettuaan sen Alla muutama käyttötapaus kuvattuna käyttäen apuna Virtual windows tekniikkaa. Käytämme alla käyttäjistä / toimijoista seuraavia lyhenteitä= Asiakas:A, Asiakaspalvelu:AP, ja Pizzan paistaja: PP Käyttötapaus Virtual windows Tarkastelee perustietoja, etusivu (A) Tarkastelee pizzalistaa (A) ETUSIVU -Osoite,puh.nro ja aukioloajat YRITYS -Perustiedot yrityksestä ja tilaamisesta PIZZALISTA 4 -Pizzan nimi, hinta ja tilauspainike

5 Tilaa pizza (A) Vastaanota tilaus (AP) Välitä tiedot paistajalle (AP) Tarkasta tilaus (PP) OSTOKORI -Pizzojen määrä ja muodostunut hinta ASIAKKAAN TIEDOT -Nimi, osoite, sähköpostiosoite, maksutapa, erityistoiveet. Asiakkaan ja tilauksen tietojen tarkastus (AP) Paista pizza (PP) Tarkasta, että raaka-aineita löytyy (PP) Toimita valmis pizza asiakaspalvelijoille (PP) VASTAANOTA TILAUS -Tilaus, tilatut pizzat, asiakkaan tiedot, kaikki tieto liittyen tilaukseen PIZZALISTA / TÄYTELISTA -Lisää / poista pizza, lisää / poista täyte Tilauksen noutaminen (A) TILAUKSEN TIEDOT -Hinta, tilauksen tiedot, maksutapa 5

6 Ymmärrettävyystesti Käytimme kahta eri testaajaa, kahteen eri rooliin pizzeriassamme. Asiakas ja pizzan paistaja saivat käyttötapauksemme ja Virtual windows mallinnuksemme kyseisistä käyttötapauksista. Käyttämämme testaajat eivät olleet samalla kurssilla kanssamme, eivätkä he opiskele tietotekniikan koulutusohjelmassa. Alla näemme testaajien antamia kommentteja liittyen käyttötapauksiin: Pizzan paistaja: Pizzojen ja täytteiden tarkastelu yksinkertaista. Pizzojen ja täytteiden poistaminen ja lisääminen suhteellisen helppoa. Kuinka paistaja kommunikoi muun ravintolan kanssa? Asiakas: Pizzalista suhteellisen selkeä ja helppo ymmärtää miten pizza tilataan. Pizzan ilmestymisen ostokoriin huomaa. Ostokorista löytyy kaikki tarvittava tieto. 6

7 Tietokantamalli Yllä pizzerian tietokantamalli kokonaisuudessaan, se sisältää kaiken tiedon mikä tulee tallentumaan järjestelmään. Yllä olevasta mallista puuttuu asiakkaan mahdollisuus kirjoittaa erityistoiveita liittyen tilaukseen. 7

8 Ulkoasun ensimmäinen versio Alla ensimmäinen niin sanottu raaka- versio pizzeriamme etusivusta. Kuten kuvassa on mainittu tummareunaiset palkit / kentät pysyvät samoina joka sivulla. Rekisteröitymis- ja kirjautumistiedot on laitettu sivun yläosaan pizzerian logon yläpuolelle. Ostokori on sijoitettu oikealle ja muut palkit / tietokokonaisuudet vasemmalle puolelle sivun keskellä sijaitsevasta tietokentästä. Tämä sivun keskellä oleva alue on se missä suurimmat muutokset tapahtuvat siirryttäessä sivulta toiselle. 8

9 Sommitelma pizzerian työntekijöiden sivusta 9

10 10

11 11

12 Valmis / viimeinen versio pizzerian käyttöliittymästä ja käytettävyystesti Heuristinen analyysi Work summary Työt ryhmän kesken jakautuivat hyvin tasapuolisesti, kaikki kolme ryhmämme jäsentä olivat myös samassa ryhmässä ohjelmistokehityksen toteutuksella. Santeri vastasi käytettävyyden testaamisesta, Lasse vastasi virtual windowsista, task analyysista ja ulkoasun sommitelmista, Joonas vastasi käyttötapauksista, tietokantamallista ja presentaatiomme tekemisestä. Aloitimme työn tekemisen melko myöhäisessä vaiheessa, mutta tämä johtui lähinnä siitä, että ohjelmistokehitys kurssilla hommaa riitti enemmän kuin mihin olimme varautuneet. Lisäksi muokkasimme ulkoasuamme viime hetkellä mikä vaikutti oleellisesti tekemisiimme kurssilla. Ryhmänä meillä ei ollut missään vaiheessa mitään ongelmia, vaikeinta oli saada hommat aluilleen, mutta kun se oli tapahtunut, kaikki sujui hyvällä otteella. Käyttöliittymän käytettävyystesti Pizzan tilaaminen

13 Käyttäjä saapuu pizzerian etusivulle, ja klikkaa sivun vasemmassa laidassa olevaa Pizzalista painiketta Kohta sisältää kaksi erilaista tapaa pizzan tilaamiseen. Klikattuaan Pizzalista painiketta käyttäjä saapuu pizzalista sivulle. Käyttäjä tilaa pizzan klikkaamalla halutun pizzan oikealla puolella olevaa Tilaa painiketta. 13

14 2.1.2 Kun käyttäjä on klikannut Tilaa painiketta, niin tilattu pizza siirtyy ostoskoriin. Oikeassa yläkulmassa olevassa ostoskorista nähdään, että siellä on tällä hetkellä yksi tuote. Käyttäjä siirtyy ostoskoriin painamalla tätä linkkiä

15 Käyttäjä voi myös vaihtoehtoisesti tilata pizzan pizzalista sivulta klikkaamalla Tilaa muokaten painiketta Tilaa painikkeet sijasta. Tilaa muokaten painike löytyy Tilaa painikkeen tavoin pizzan oikealta puolelta Kun käyttäjä on klikannut Tilaa muokaten painiketta, niin käyttäjä siirtyy sivulle, jossa hän voi määrittää pizzan koon, kuinka monta kappaletta käyttäjä haluaa tilata kyseistä pizzaa ja haluaako käyttäjä gluteenittoman tai laktoosittoman pizzan. Kun käyttäjä on määritellyt haluamansa tiedot käyttäjä klikkaa sivun alalaidassa olevaa Tilaa! painiketta. 15

16 2.2.3 Klikattuaan Tilaa! painiketta valittu pizza siirtyy ostoskoriin ja käyttäjä palaa automaattisesti takaisin pizzalista sivulle. Oikeassa yläkulmassa olevassa ostoskorista nähdään, että siellä on tällä hetkellä yksi tuote. Käyttäjä siirtyy ostoskoriin painamalla tätä linkkiä. 3.1 Ostoskori näkymä eroaa jos käyttäjä ei ole kirjautunut siitä kun käyttäjä olisi kirjautunut Käyttäjän klikattua oikeassa yläkulmassa olevaa ostoskori linkkiä käyttäjä näkee ostoskorin sisällön. Mikäli 16

17 käyttäjä ei ole kirjautunut sisään niin käyttäjä ei voi siirtyä ostoskorin sisällön tilaamiseen. Kirjautuminen suoritetaan sivun ylälaidassa olevasta kirjautumispalkista. 3.2 Kun käyttäjä on kirjautunut palveluun, niin hän siirtyy ostoskorin sisällön tilaamiseen klikkaamalla pizzan alapuolella olevaa Jatka linkkiä

18 Klikattuaan Jatka linkkiä käyttäjä siirtyy tilaus vahvistus sivulle. Tällä sivulla käyttäjä vahvistaa tilauksensa. Sivulta löytyy käyttäjän tilaukseen kuuluvat pizzat sekä käyttäjän yhteystiedot. Lopullisen tilauksen tekeminen tapahtuu painamalla sivun alalaidassa olevaa Tilaa! linkkiä. 5.1 Käyttäjän klikattua Tilaa! linkkiä käyttäjä saa ilmoituksen, että tilauksen tekeminen onnistui ja tuotteet häviävät ostoskorista. Rekisteröityminen Tilatakseen pizzaa käyttäjän tulee olla rekisteröitynyt sivustolle. Etusivun yläreunassa on kentät joihin käyttäjä voi syöttää olemassa olevat tunnukset ja painaa lähetä painiketta tai rekisteröityä uudeksi asiakkaaksi painamalla Rekisteröidy painiketta. Käyttäjä aloittaa rekisteröitymisen klikkaamalla Rekisteröidy painiketta sivun yläreunassa. 18

19 Käyttäjä syöttää kenttiin tarvittavat tiedot ja kun kentät on täytetty painaa hän Lähetä painiketta. Käyttäjä avaa syöttämänsä sähköpostin johon on saapunut sovellukselta viesti jossa on ilmoitettu käyttäjätunnus sekä aktivointikoodi jolla oman tunnuksen saa aktiiviseksi. 19

20 Käyttäjä syöttää sähköpostiin lähetetyn aktivointitunnuksen sille tarkoitettuun kenttään ja painaa Jatka painiketta. Käyttäjä saa näytölleen ilmoituksen onnistuneesta rekisteröitymisestä. Auenneella sivulla on myös kentät sisään kirjautumista varten johon käyttäjä syöttää valitsemansa käyttäjätunnuksen ja salasanan. 20

21 Käyttäjä on onnistuneesti rekisteröitynyt ja kirjautunut sivulle ja voi nyt siirtyä tilaamaan haluamiaan pizzoja. 21