Veebirakenduste disainiprotsessietapid

Disainprotsessi etapid

Töörühmad

1. Ivo, Jaan, Alar

2. Peep, Veiko, Liisa

3. Tener, Jargo, Rano

4. Argo, Riho, Rene

5. Marko, Arnold, Silvar, Priit

6. Taavi, Ragnar, Andero

7. Martin, Sylver, Janno

Tööjõu vajadus erinevatel etappidel

Nõude analüüs Kontseptuaalne disain Visandid ja prototüübid Tootmine Kasutusele võtt

Töö

mah

t

Graafiline disain

Kirjutamine

Süsteemi

administreerimine

Programmeerimine

Kasutatavuse disain

Projektijuhtimine

Nõuete analüüs

Nõuete analüüsi meetodid

Nõuete spetsifikatsioon Kasutaja-Intervjuud Kasutajate küsitluse Võrdlev analüüs Logide analüüs (olemasoleva veebisaidi

puhul) Kasutajatüübid (persona) Kasutajalood (user story) Stsenaariumid

Nõuete spetsifikatsioon AA-11 rühma koduleht Pildid Klassi sümboolika Nimekiri õpilastest (kontakt, ) Ürituste nimekirjad (olnud, plaanimine,

tulevad) – Läbu/ tegevused/ürituse Teadaanded Guestbook-foorum Materjalid, link kogu - spikker Saavutused - autahvel

AA-11 rühma koduleht

Kasutajad?Õpilased AA-11LapsevanemadÕpetajadSugulasedPäästeamet/Politseid/KiirabiIT-spetsialistid – tulevased värbajadKaasõpilased

Kasutajate individuaalsed erinevused

Vanus, sugu, haridustase, töö, hobid, sissetulek

Erivajadused (nägemis-, kuulmis- ja liikumispuuded)

Oskuste tase (arvutikasutusoskus, netiket, teadmised veebisaidi teemaks olevas valdkonnas)

Erinevused arvuti seadistustes

Fondid Linkide värv Piltide laadimine Lisaprogrammide olemasolu (Flash

Player, Acrobat Reader, Real Player, Quicktime Player)

Java, JavaScripti ja cookie’de tugi

Rahvusvahelised kasutajad

Veebisaidi päritolumaa olgu nähtav Keelevalik Mõõtühikute kasutamine (km, m, l,

pint) Rahaühikud EEK, USD, £, € Sümbolid on alati kultuurispetsiifilised Kuupäeva ja kellaaja vorming

Tehnilised võimalused (1/2) Disainerid kasutavad tavaliselt palju

paremaid arvuteid kui lehekülje sihtgrupp

Microsoft pole ainuke tarkvara tootja!!! Brauserid võivad toimida erinevalt ka

erinevate Windowsi versioonide puhul Üha enam kasutatakse nn õhukesi

kliente (ingl k thin clients): mobiiltelefon, Palm, Pocket PC; USA’s on levinud ka WebTV.

Tehnilised võimalused (2/2)

Graafilised võimalusedErinevad eraldusvõime

(ekraaniresolutsioonid)Erinev värvussügavus

Internetiühenduse kiirusMobiiltelefonModemiühendusKodukasutaja püsiühendusKiire püsiühendus

Kasutajalood (user stories)

Kasutajalood kuuluvad Extreme Programming meetodite hulka

Kasutajalood kirjutatakse süsteemi tulevaste kasutajate poolt

Kasutajalugu keskendub toimingute kirjeldusele, mitte kujundusele

Kasutajaloo põhjal kirjutatakse välja kasutusjuhud (use cases)

Programmeerijad hindavad kasutusloo elluviimiseks kuluvat aega (nädalates)

Kasutajatüübid

Kasutajaprofiil Kasutaja tüüpiline päevakava Kasutaja foto lühikirjeldused

Stsenaariumid

Stsenaariumid on vabas vormis kasutajalood, mis kirjeldavad kuidas kasutaja mingeid toiminguid sooritab

Stsenaariumid on enamasti kirjutatud arendajate poolt ning neid vahetatakse ja arutatakse läbi kasutajatega

Näide 1. Rühmavanem Jõudes lehele logib enda kasutajaga portaali sisse. Vaatab üle blogid,

kas keegi on vahepeal, midagi uut ja asjakohast lisanud või mitte. Kui ilmneb, et midagi on lisatud loeb uue(d) sissekanded üle ja avaldab kus vaja oma arvamust.

Olles alles hilja aegu tagasi saanud teada X aine hinded laeb kodukale uued hinded üles. Et kursuse kaalased näeksid oma tulemusi. Kontrollib, et kas andmed läksid korralikult ülesse, või mitte.

Järgmisena pilk kalendrisse. Leiab, et nädala lõpus on ühe töö esitamise tähtaeg. Nii nüüd tuleb kiiresti heita pilk teiste usinamate poolt tehtud kodutöödele. Näe sa siis täitsa olemas. Keegi on vähemalt juba mingi töö valmis teinud. Kiitus talle.

Peale endale kodutööde näidiste allalaadimist. Avab teadete rubriigi. Lisab sinna õppetoolist saadetud muud päevateemalised üleskutsed.

Väike kiire ülevaade kas keegi mingeid fotoavaldusi ka teinud. Viimane lihv ja veebi saavad laetud ka viimas sessi aegsed pildid. Lisame juurde ka väiksed märkused ja lähevad ka need kõigile näha.

Logib portaalist välja.

Võrdlev analüüs

Väga sobiv meetod, kui alustatakse arendust nullist

Iga võrreldava veebisaidi kohta tuuakse välja:EkraanipiltPlussidMiinusedKasutatavuse probleemid

Ankeetküsitlused

Küsi ainult seda, mis on oluline Küsi kasutaja demograafilisi andmeid (vanus,

sugu, …) Erinevat tüüpi küsimuste vaheldumine

Vabas vormis vastus jah/ei vastus Valikvastus

Online ankeetide tagasiside on 1…2 % Posti teel saadetud ankeetide tagasiside 10 %

Kontseptuaalne disain

Kontseptuaalse disaini meetodid

Idee genereerimine Informatsiooni Arhitektuur Kaartide Sorteerimine Ülesannete analüüs

IA kirjeldamine

Tekstilisel kujul sisukaart Voodiagramm Horisontaalse paigutusega puustruktuur Vertikaalse paigutusega puustruktuur Kolmemõõtmeline diagramm (puustruktuur) Wireframe (lihtsustatud html-prototüüp

töötavate linkidega) Lehekülje skeem

Tekstilisel kujul sisukaart

1.0 Avaleht

1.1 Meie

1.2 Teadaanded

1.3 Sündmused

1.3.1 Olnud

1.3.2 Planeerimine

1.3.3 Ettepanekud

1.4 Foorum

1.5 Pildigalerii

1.6 Spikker

1.7 Autahvel

1.7.1 Sport

1.7.2 Kultuur

1.7.3 Kooli sisene

1.8 Sümboolika

Horisontaalne puustruktuur

Vertikaalne puustruktuur

J.J. Garrett: informatsiooni arhitektuuri visuaalne sõnavara

Lihtne visuaalne sõnavara informatsiooni arhitektuuri ning interaktsioonide disaini kirjeldamiseks

http://www.jjg.net/ia/visvocab/ Garretti IA sõnavara eelised:

käsitsi joonistatav kasutatav erinevate programmidega (Adobe

InDesign, OmniGraffle, Macromedia Freehand, Visio, OpenOffice, Powerpoint)

lihtsalt õpitav

Visandid ja prototüübid

Prototüüp

Prototüüp on lõplikult viimistlemata eksperimentaalne rakendus, mida kasutatakse disaini ideede testimiseks

Visandid ja prototüübid

Pisipildid Paberprototüüp Graafiline prototüüp HTML prototüüp

Pisipildid

Paberile joonistatud kujundus ideed

Paber prototüübi

Pildina arvutis 1024px x 768px

Resolutsioon 96dpi

Paberil suurus 27, 1cm x 20,3 cm A4 21x29,7cm

Graafiline prototüüp

HTML prototüüp