Esittelymalli käyttäjätiedon ja saavutettavuuden kehittämiseen
Imberg, Tanja (2019)
Imberg, Tanja
2019
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2019121125919
https://urn.fi/URN:NBN:fi:amk-2019121125919
Tiivistelmä
Opinnäytetyön tarkoituksena oli suunnitella ja toteuttaa Kuntien Tieran Parasta Palvelua, PSOP-järjestelmän palveluntuottajien vertailusta esittelymalli, jota voidaan hyödyntää keräämällä palautetta ja kehitysehdotuksia.
Tämä esittelymalli rakennettiin aiemmin luodun graafisen esittelymallin pohjalta. Pääasioina ovat käytettävyyden ja saavutettavuuden parantaminen. Nykyisessä PSOP-järjestelmän selauksessa on ilmennyt joitain saavutettavuutta rajoittavia haasteita, kuten näytönlukulaitteiden haasteet. Hyvällä suunnittelulla voidaan parantaa PSOPin saavutettavuutta, jolloin näkörajoitteisetkin pystyvät vaivattomammin käyttämään järjestelmää. Saavutettavuudessa on huomioitu typografia ja värimaailmat sekä kontrasti. Nämä kolme ovat erityisen tärkeitä eri tavoin rajoittuneille käyttäjille. Esimerkiksi kun tekstissä on oikeanlainen fontti, selkokielinen sisältö sekä hyvä taustan ja tekstin kontrasti, auttavat nämä jo huomattavasti esimerkiksi lukihäiriöisiä henkilöitä saamaan teksteistä selvää. Myös heikkonäköiset, kuten iäkkäämmät ihmiset, hyötyvät käyttöliittymän hyvästä kontrastista. Värimaailmassa taas on tärkeä huomioida, että värit eivät saa yksinään ohjata käyttäjää, vaan niissä täytyy olla myös kuvaava teksti. Käytettävyydessä on huomioitu erityisesti järjestelmän responsiivisuus. Responsiivisuuden kehittämisen tueksi on myös perehdytty Tilastokeskuksen mobiili- ja tablettilaitteiden internetin käytön tutkimukseen. Responsiivinen sivusto asettuu näyttökoon mukaan erikokoisille näytöille sopiviksi, loogisiksi ja helppokäyttöisiksi. Esittelymallin responsiivisuus on toteutettu Bootstrapin avulla. Esittelymallissa järjestelmän käytettävyyttä parannettiin myös uudella hakutoiminnolla, joka hakee palvelut palvelusetelin numerolla, sekä uudenlaisella hakutuloslistauksella ja lisätietosivulla.
Opinnäytetyön toteutuksessa on käytetty useita teknologioita. Esittelymallin Node.js -sovellus, joka on yhdistetty MongoDB -tietokantaan. Tietokantayhteyden ja Node.js -pohjaisen sovelluksen vuoksi, esittelymallilla pystyy hakemaan palveluntuottajia tietokannasta. Palveluntuottajien tiedot listautuvat hakutuloksiin. Esittelymallin käytettävyyden ja jotkin saavutettavuuden tavoitteet onnistuivat hyvin, joskin jatkokehitettävääkin vielä on. The purpose of this thesis was to design and implement a mockup for Kuntien Tiera’s Parasta Palvelua PSOP -system’s service provider comparison which could be utilized by collecting feedback and suggestions for improvement.
This mockup is based on an earlier graphic mockup. Its main roles are to improve usability ja accessibility. There have been some challenges that limit accessibility, for example, the challenges of using screen readers. With good planning, it is possible improve the accessibility of the PSOP system and then visually impaired users might use this system more easily. Accessibility takes into account typography and color schemes, as well as contrast. These three considerations are especially important for users that are in different ways impaired. For example, the right font with plain text content, and with a good contrast between font and the background, helps users with dyslexia to read more easily. Also, visually impaired people, such as the elderly, also benefit from good contrast in the user interface. In the colour scheme, however, it is important to note that colours must not guide the user by itself but must also contain descriptive text. Usability has been taken into account, especially the system’s responsivity. The studies of the Internet use on mobile and tablet devices by Statistics Finland has been oriented to support the development of responsiveness. Responsive design detects the visitor’s screen size and orientation and changes the layout accordingly. The responsivity of this mockup has been implemented with Bootstrap. The usability of the mockup has also been improved with a new search function of the service voucher ticket number. There is also a new kind of a search results model and a service provider page.
Several technologies have been used in the thesis. Mockup is a Node.js application that has been connected to MongoDB database. Because of database connectivity and the Node.js-based application, the user can search service providers from the database and the results will be listed in the search results. The mockup’s usability and some accessibility goals succeeded well although there is still room for improvement.
Tämä esittelymalli rakennettiin aiemmin luodun graafisen esittelymallin pohjalta. Pääasioina ovat käytettävyyden ja saavutettavuuden parantaminen. Nykyisessä PSOP-järjestelmän selauksessa on ilmennyt joitain saavutettavuutta rajoittavia haasteita, kuten näytönlukulaitteiden haasteet. Hyvällä suunnittelulla voidaan parantaa PSOPin saavutettavuutta, jolloin näkörajoitteisetkin pystyvät vaivattomammin käyttämään järjestelmää. Saavutettavuudessa on huomioitu typografia ja värimaailmat sekä kontrasti. Nämä kolme ovat erityisen tärkeitä eri tavoin rajoittuneille käyttäjille. Esimerkiksi kun tekstissä on oikeanlainen fontti, selkokielinen sisältö sekä hyvä taustan ja tekstin kontrasti, auttavat nämä jo huomattavasti esimerkiksi lukihäiriöisiä henkilöitä saamaan teksteistä selvää. Myös heikkonäköiset, kuten iäkkäämmät ihmiset, hyötyvät käyttöliittymän hyvästä kontrastista. Värimaailmassa taas on tärkeä huomioida, että värit eivät saa yksinään ohjata käyttäjää, vaan niissä täytyy olla myös kuvaava teksti. Käytettävyydessä on huomioitu erityisesti järjestelmän responsiivisuus. Responsiivisuuden kehittämisen tueksi on myös perehdytty Tilastokeskuksen mobiili- ja tablettilaitteiden internetin käytön tutkimukseen. Responsiivinen sivusto asettuu näyttökoon mukaan erikokoisille näytöille sopiviksi, loogisiksi ja helppokäyttöisiksi. Esittelymallin responsiivisuus on toteutettu Bootstrapin avulla. Esittelymallissa järjestelmän käytettävyyttä parannettiin myös uudella hakutoiminnolla, joka hakee palvelut palvelusetelin numerolla, sekä uudenlaisella hakutuloslistauksella ja lisätietosivulla.
Opinnäytetyön toteutuksessa on käytetty useita teknologioita. Esittelymallin Node.js -sovellus, joka on yhdistetty MongoDB -tietokantaan. Tietokantayhteyden ja Node.js -pohjaisen sovelluksen vuoksi, esittelymallilla pystyy hakemaan palveluntuottajia tietokannasta. Palveluntuottajien tiedot listautuvat hakutuloksiin. Esittelymallin käytettävyyden ja jotkin saavutettavuuden tavoitteet onnistuivat hyvin, joskin jatkokehitettävääkin vielä on.
This mockup is based on an earlier graphic mockup. Its main roles are to improve usability ja accessibility. There have been some challenges that limit accessibility, for example, the challenges of using screen readers. With good planning, it is possible improve the accessibility of the PSOP system and then visually impaired users might use this system more easily. Accessibility takes into account typography and color schemes, as well as contrast. These three considerations are especially important for users that are in different ways impaired. For example, the right font with plain text content, and with a good contrast between font and the background, helps users with dyslexia to read more easily. Also, visually impaired people, such as the elderly, also benefit from good contrast in the user interface. In the colour scheme, however, it is important to note that colours must not guide the user by itself but must also contain descriptive text. Usability has been taken into account, especially the system’s responsivity. The studies of the Internet use on mobile and tablet devices by Statistics Finland has been oriented to support the development of responsiveness. Responsive design detects the visitor’s screen size and orientation and changes the layout accordingly. The responsivity of this mockup has been implemented with Bootstrap. The usability of the mockup has also been improved with a new search function of the service voucher ticket number. There is also a new kind of a search results model and a service provider page.
Several technologies have been used in the thesis. Mockup is a Node.js application that has been connected to MongoDB database. Because of database connectivity and the Node.js-based application, the user can search service providers from the database and the results will be listed in the search results. The mockup’s usability and some accessibility goals succeeded well although there is still room for improvement.