Kaikki kokoelmat
Viikkotiedotteet
Mobiiliystävällisempi käyttöliittymä
Mobiiliystävällisempi käyttöliittymä
Uudistimme käyttöliittymää helpommaksi käyttää mobiililaitteilla.
Jarkko Kähkönen avatar
Tekijä: Jarkko Kähkönen
Päivitetty yli viikko sitten

Vuoden 2021 syksyllä julkaisimme ensimmäisen mobiiliystävällisemmän käyttöliittymän. Nyt lisäsimme mobiilituen useammille sivuille. Lisäksi korjasimme käyttöliittymässä havaittuja käytettävyysongelmia. Tässä artikkelissa listataan kaikki tehdyt muutokset. Myöhemmin korjaamme loputkin sivut mobiiliyhteensopiviksi.

Asiakasryhmät-sivun mobilisointi ja UI-korjaukset.

Kustannuspaikat-sivun mobilisointi ja UI-korjaukset.

Roolin muokkaus -sivun UI-korjaus.

Omat tiedot -sivun mobilisointi ja tyylin korjaus.

Ilmoita laskutusosoitteesi -toimintoon UI-korjaukset.

Tilien saldojen ja kassavirtalaskelman mobilisointi.

Laskutusosoitteenne ilmoittaminen laskujen lähettäjille -sivun mobilisointi ja saman sivun ui-fiksaus.

Laskutusosoitteen kopiointi leikepöydälle painikkeena, jotta on yhtenäinen muiden kanssa.

Ostolaskun muokkauksen Näytä muut toiminnot...-painike nimetty Muut toiminnot.

Välilehdet-otsikko pois laskujen silmä-popupista. Laskutusloki-välilehden iframen poisto, jotta latautuu nopeammin ja on nätimpi.

Tarjoukselle Laskun eräpäivä -kenttä näkyviin, jos siinä on virhe.

Tilauksesi-sivulla esittelyohjetekstien lisäämisen jälkeen skrollaa sivua niin ettei nykyinen skrollauspystypaikka muutu. Aiemmin lukeminen häiriintyi ja saattoi vahingossa klikata väärää nappia, kun nappi siirtyi alta pois.

Suljetaan käyttöönotto-popup, kun painetaan Tilauksesi-sivulla Kytke verkkolaskutus -nappeja.

JS-virheen poisto jos Painaa "Siirry lähettämään maksumuistutus...".

Jos lasku on muistutuskelpoinen, laskun muokkaukseen näkyviin myös "Siirry lähettämään maksumuistutus...", koska jos painaa Muistuta ja palaa takaisin laskun muokkaukseen, siellä oli pelkkä "Siirry lähettämään uudelleen..." ja jos halusi muistuttaa, piti mennä takaisin Laskut-sivulle ja painaa Muistuta uudelleen.

Lähete: Anna tallentaa ilman Laskun eräpäivä -virhettä.

Laskut-sivun "Lataa PDF" lataamaan PDF eikä avaamaan uuteen ikkunaan. Laskun lähetykseen tekstiksi "Avaa PDF", koska siinä avaa PDF:n uuteen ikkunaan.

Suoritukset-sivun mobilisointi. Ui-korjauksia buttoneihin (oli kuvake liian pienellä). Kohdistamattomien suoritusten "arvauslaskujen" laskun tiedot yhteen td:hen, peukkupainikkeet paremmaksi. "Päivitä arvaukset" -painike ylös. Suoritukset-sivulla Peukku ylös vihreätaustaiseksi ja Peukku alas punataustaiseksi. Näyttämään vain ne suoritukset, joilla Avoinna-summa on suurempi kuin nolla. Hakunäytön buttoneiden marginit kuntoon. Indeksejä lisätty tauluihin, jotta nopeampi. Suoritukset-sivun painikkeiden ja selectin margineita kuntoon.

Laskut-sivulla kohdistamattomien suoritusten huomiolaatikko kapeammaksi ja omalle rivilleen.

Maksuerän muokkauksen kahden kentän liian suuri leveys korjattu.

Kokonaistilanne-sivun mobilisointi.

Tilauksesi-sivun Ohje-popupin js-korjaukset: ei herjaa enää puuttuvista elementeistä.

Selectien ja nuolien svg:t images-kansioon kuviksi, jotta hyödyntää selaimen välimuistia eikä lataa joka kerta uudelleen.

Alalaidan hakunäytön navigointipainikkeiden vaakakeskitys mobiilissa korjattu. Hakunäytön navigointipainikkeisiin pystykeskitys ja minimileveys 40px. Välilehtiin focusväri.

Focusoidun kentän väri vaaleankeltaisesta vaaleansiniseksi, koska muutkin hover-värit ovat sinisiä. Myös select2:ssa ja file inputissa näkymään eri taustavärillä, jos kentässä on focus.

Salasanan unohtaminen -ikkunan marginit kuntoon vaaka-kännykällä. Login-kentistä pois reunaviiva (paitsi focuksessa).

Ylävalikko responsiiviseksi, ei-vaakaskrollattavaksi, jolloin vain sisältö ja vasenmenu -kokonaisuus jää vaakaskrollattaksi. Näin saadaan ylävalikko pysymään vaakaskrollatessa paikallaan. Ylävalikon kuvakkeiden alle tekstit. Ylävalikon alle sininen viiva. Korjattu vasenmenun nuolen ui-bugi (valkoinen reunus pois), focus-ilmaisin paremmaksi. Yläpalkin logo (jos asetuksista valittu näkymään) valkoisena aina. Muita pieniä ui-viilauksia ylävalikkoon ja vasempaan valikkoon.

Hakutulosten navigointipainikkeet samalle riville mobiilissakin. Hakutulosten yhteenveto 100% leveäksi. Välilehdet harmaiksi.

Ajax-latauspalkki vasemmalla hiukan vaaleammaksi jotta erottuu jos vasen menu näkyvissä. Palkin maksimiaika 4 sek -> 6 sek, eli vasta sen jälkeen alkaa valkoinen kuunsirppi pyöriä jos request kestänyt yli 6 sek.

Asiakkaan muokkauksessa asiakastyyppi radiobuttoniksi.

Varasto-kenttä näkyviin laskun muokkauksen etusivulle (aiemmin oli lisätiedoissa).

Virhe/Ilmoitus/Viesti-popupeihin dynaaminen aikaraja, jonka jälkeen popup suljetaan. Virheissä hiukan pidempi kuin viestissä ja ilmoituksessa. Vältetään esim. se että Tallennettu-ilmoitus jää näkyviin liian pitkäksi aikaa.

Virheen näyttö laskulle. Virheet näytetään popupissa, jossa on linkki, josta pääsee virheen kohdalle, jolloin on helppo korjata virheet varsinkin jos laskuriveissä on virheitä ja joutuu mobiilissa etsimään pitkään virheellistä riviä. Popup jää pysyvästi näkyviin ellei sitä sulje. Se avautuu aina uudelleen, jos on virheitä ja sulkeutuu jos ei ole virheitä. Näytetään Lisätiedot-painikkeessa balloon, johon päivittyy virheiden määrä lisätiedoissa. Kun kentän korjaa, määrä päivittyy.

Ilmoitus-balloonien (numero punataustaisessa ympyrässä) ulkoasu korjattu yhtenäiseksi ja balloonit pyöreämmäksi.

Ylävalikon yrityksen valintaan nuoli alas -kuvake, jotta tajuaa paremmin että siitä voi vaihtaa yritystä.

Maksuerän liitteisiin mobiilissa näkyviin otsikot ja sivulle ui-korjauksia. Maksuerien yläpainikkeisiin korjaus.

Hakunäytön hakukentät mobiilissa 100% leveiksi, jotta on siistimmän näköinen.

Ajastetut laskut: UI-korjauksia.

Korjauksia maksuerän ulkoasuun, pakotetaan niiden ulkoasu yhtenäiseksi laskun muokkauksen kanssa. Select2 ja muidenkin näkymät paremmiksi kosketusnäytöillä.

Asiakkaan muokkauksen ulkoasu yhtenäiseksi kaikkialla (Asiakkaat-sivulla, Laskut-sivulla ja laskun muokkauksessa). Asiakkaan muokkaukseen ulkoasukorjauksia.

Kaikki painikkeet ja kentät vähintään 40px korkeiksi kosketusnäytöillä.

Vastasiko tämä kysymykseesi?