Suunnittele oma käyttöliittymä juuri yrityksesi tarpeisiin

Yrityksen tietojen käsittelemisessä on usein suurta hyötyä omasta juuri tiettyyn tarkoitukseen rakennetusta käyttöliittymästä. Katsotaan seuraavaksi esimerkin avulla mitä tällä tarkoitetaan.

Yrityksellä on eri paikoissa tietoja tuotannossaan käytettävistä materiaaleista ja aineista jotka yhdessä muodostavat aineiston ‘ostotuotteet’. Tietoja on eri paikoissa, osa on tietokannassa, osa excel-tiedostoissa jne.

Kustakin ostotuotteesta on tiedot

• tunnisteista (nimi, pakkauskoko tmv., jne)
  
• tuotteen myyjistä
  
• tuotteen määrät tällä hetkellä omissa varastoissa
  
• tilausrajat
  
• muut tarpeelliset tiedot
  

Nyt halutaan tehdä yksinkertainen käyttöliittymä jolla kyseisiä hajallaan olevia tuotekohtaisia tietoja voisi helposti tarkastella nopeasti ja sujuvasti.

Käyttöliittymä on joukko yksittäisiä lomakkeita joilla jokaisella on oma tehtävänsä ja sisältönsä. Siirtyminen lomakkeelta toiselle tapahtuu ennalta määrättyjen sääntöjen puitteissa. Säännöt määräytyvät sen mukaan mitä käyttöliittymän avulla halutaan tehdä. Tässä esimerkissä käyttöliittymän avulla pitää siis saada nähtäville halutut tuotetiedot mahdollisimman sujuvasti.

On hyvä huomata heti, että sillä mistä ja miten käyttöliittymään näkyville tuotavat tiedot haetaan, ei käyttäjälle ole merkitystä. Käyttöliittymän takana näkymättömissä olevat ohjelmanosat hakevat tiedot ensin kasaan ja sen jälkeen ne tuodaan käyttöliittymään nähtäväksi. Käyttäjän kannalta riittää, että tiedot näkyvät käyttöliittymässä oikein.

Käyttöliittymän tarkoitus tässä esimerkissä on juuri se, että käyttäjän ei tarvitsisi itse nähdä vaivaa tietojen hakemisessa eri paikoista vaan hän saa ne käyttöliittymän avulla mahdollisimman helposti näkyviin tarkasteltavakseen.

Lähdetään seuraavaksi luonnostelemaan käyttöliittymää edellä olleen kuvauksen pohjalta. Kuitenkin, ennen kuin tehdään ensimmäistäkään lomaketta tai kirjoitetaan yhtään ohjelmariviä, on syytä miettiä toteutuksen “arkkitehtuuria” ja saada sen avulla ensin mahdollisimman tarkka visio siitä mitä käyttöliittymältä toiminnallisesti halutaan. Tähän tarkoitukseen sopii hyvin ns. dialogikartta (engl. dialog map).

(“dialogi” tarkoittaa näytöllä näkyvää ikkunaa, esimerkiksi yksittäistä lomaketta, jonka avulla käyttäjä on vuorovaikutuksessa ohjelman kanssa)

Dialogikartta koostuu suorakaiteista ja niiden välillä olevista nuolista:

Kukin suorakulmio kuvaa yhtä dialogielementtiä (kuten lomaketta) kuitenkin niin, että siinä ei ole esitettynä tarkkoja yksityiskohtia siitä mitä kaikkea dialogi tulee lopulta sisältämään. Suorakulmion tehtävänä on kertoa vain kyseisen elementin tarkoitus eli mihin juuri kyseistä dialogielementtiä käytettäisiin.

Kun vasemman puoleisesta dialogista on tehty tuotelistasta valinta, painikkeella ‘Näytä valitun tuotteen tiedot’ siirrytään oikeanpuoleiseen dialogiin johon tulee näkyviin vain valitun tuotteen tiedot, ei muuta. Vasemmanpuoleinen dialogi häviää näkyvistä.

Siirtyminen dialogien välillä voi ajallisesti kestää enemmän tai vähemmän riippuen siitä mistä kaikkialta tietoja haetaan, mutta kerrallaan on näkyvissä korkeintaan vain toinen dialogeista.

Dialogikartan tarkoitus on siis vain

• kertoa pelkistetysti kunkin dialogin tehtävä
  
• kuvailla siirtymiset dialogien välillä
  
• kertoa siirtymisen aiheuttava tapahtuma (esim. tietyn painikkeen klikkaus)
  

Tällä menettelyllä saadaan laadittua seuraavanlainen dialogikartta:

Seuraavassa dialogeilla näkyvät asiat:

________________________________________________________________
Sisäänkirjaus

• Näkyy sisäänkirjautumista varten tekstiruutu johon kirjoitetaan tunnus
  
• Näkyy painike ‘Kirjaudu sisään’
  

________________________________________________________________ Valinta

• Näkyy listaus kaikista tuotteista joista voi tehdä valinnan (yhden)
  
• Näkyy painikkeet
  'Tiedot'
  'Tapahtumat'
  'Uloskirjaus'

________________________________________________________________ Tuotteen tiedot

• Näkyy valitun tuotteen tiedot
  
• Näkyy painikkeet
  'Valinta'
  'Tapahtumat'
  'Uloskirjaus'

________________________________________________________________ Tuotteen tapahtumat

• Näkyy valitun tuotteen tapahtumahistoria
  
• Näkyy painikkeet
  'Valinta'
  'Tiedot'
  'Uloskirjaus'

________________________________________________________________ Näkemiin

• Näkyy ilmoitus, että käyttäjä on kirjautunut ulos
  

________________________________________________________________

Käyttöliittymää käytettäessä on siis kullakin hetkellä näkyvissä vain yksi edellä olevista viidestä dialogielementistä. Kun jossakin dialogissa klikataan jotain painiketta, sulkeutuu kyseinen dialogi ja avautuu dialogi johon käyttäjä haluaa siirtyä seuraavaksi.

Jokainen nuoli esittää siirtymistä dialogista toiselle. Sisäänkirjautumisen kohdalla pysytään samassa dialogissa jos tunnus ei ollut oikein ja näytetään virheilmoitus.

Kun sisäänkirjautuminen onnistuu, siirrytään valinta -dialogiin. Samalla ohjelman toimesta tuodaan tuotenimet dialogissa näkyvään listaan josta käyttäjä voi valita yhden. Sen jälkeen käyttäjä voi siirtyä eteenpäin joko valitun tuotteen tietoihin tai tapahtumahistoriaan.

Kun käyttäjä siirtyy ‘Tiedot’-dialogiin niin näkyviin tuodaan valittuun tuotteeseen liittyvät tiedot. Tietoja joudutaan (tässä esimerkkitapauksessa) hakemaan eri paikoista ja kokoamaan yhteen dialogissa näytettäväksi, mutta tämä ei ole käyttäjän ongelma. Asia hoituu käyttöliittymän takana olevan ohjelman toimesta. Käyttöliittymän tehtävänä nimenomaan on saada tietojen katselu käyttäjälle mahdollisimman helpoksi.

Dialogeissa ‘Valinta’, ‘Tiedot’ ja ‘Tapahtumat’ käyttäjällä on myös mahdollisuus poistua käyttöliittymästä kokonaan painikkeen ‘Uloskirjaus’ avulla.

Edellä olevan esityksen hahmotteleman käyttöliittymän toteutus onkin jo selkeää. Sen tekee ohjelmoija ja käyttöliittymän suunnittelijan ei tarvitse miettiä sitä puolta asiasta enempää.

Kun haluat hyödyntää juuri omaan tarkoitukseesi laadittua käyttöliittymää niin ota rohkeasti yhteyttä soittamalla numeroon 050 337 9941 ja kysy lisää!