Nykyaikainen Enterprise UI-suunnittelu - Osa 1: Taulukot

Ajatuksia, malleja ja ratkaisuja.

Suunnittelu yritykselle on vaikeaa. Miksi? Koska yleisesti ottaen Enterprise-ohjelmisto on monimutkainen. Sinulla on valtava määrä tietoja näytettäväksi, käyttäjän määrittämät käyttöliittymät, monimutkaiset työnkulut, automatisoidut tehtävät ja paljon muuta. Kaikkien näiden asioiden suunnittelu voi olla pieni haaste .

Seurauksena on, että jotkut Enterprise-sovellukset tarjoavat huonon käyttökokemuksen ja näyttävät hyvältä, hieman tylsältä.

Tyypillinen yrityssovellus

Aion hajottaa joukon viestejä joitain yleisiä yrityssovellusten käyttöliittymämalleja, ongelmia ja mahdollisia ratkaisuja.

On syytä huomauttaa, ettei ole yhtä kokoa, joka sopii kaikille. Jäljempänä mainitut mallit ja ratkaisut ovat asioita, jotka olen havainnut toimivan iteraation, käyttäjän palautteen ja testauksen kautta. Ratkaisut tulisi tietysti räätälöidä sovellukseesi ja mikä tärkeintä käyttäjiisi. Mikään ei estä sitä, että puhut käyttäjillesi ja katsot heidän käyttävän ohjelmistoasi.

Aloitetaan pöydistä

Yrityssovellusten on käsiteltävä valtavia määriä tietoja, ja koska ei ole parempia tapoja näyttää merkittävän määrän tietoja (vielä) kuin taulukko, aloitetaan siitä.

Yllä on tyypillinen esimerkki yrityssovelluksen taulukosta. Ihana, eikö olekin. Tutkitaan, kuinka voimme parantaa monimutkaisten taulukoiden kokemusta ja mitä meidän on otettava huomioon sitä tehdessään.

Tässä on joitain kysymyksiä, jotka meidän on otettava huomioon suunniteltaessa ja rakennettaessa datataulua:

  • Mitä laitteita taulukon katsomiseen käytetään?
  • Voimmeko hallita tietoja, jotka näytetään, vai onko käyttäjä määrittämässä niitä?
  • Kuinka voimme auttaa taulukkotietojen nopeaa skannausta? - Jos taulukko sisältää paljon tietoja, kuinka voimme tehdä käyttäjien helpoksi löytää tarvitsemansa tiedot?
  • Onko riveillä jaettuja toimia, kuten muokata tai poistaa?
  • Voisiko taulukkosolut sisältää paljon tietoja, osoitteita tai jopa tekstin kappaleita?

Muista ennen kaikkea puhua käyttäjillesi, selvittää kuinka he käyttävät taulukkoa ja mitä tietoja se tarjoaa.

Huomautus: Jäljelle jäävän tämän viestin kohdalla oletan, että työskentelemme verkkopohjaisen sovelluksen parissa, vaikka suurin osa alla olevista kohdista koskee kaikkia yrityssovelluksia käyttöjärjestelmästä riippumatta.

Perusteet ensin

Aloitamme tyydyttämättömällä peruspöydällä, joka näyttää kuvitteellisia asiakkaan tietoja:

Tyylitön pöytä

Lisää ensin joitain perustyylejä, jotka tarjoavat rivien selvän eron, auttavat luettavuutta ja poistavat joitain oletusselaintityylejä.

Tyylinen pöytä

On itsestään selvää, että pöydän tulisi olla kaikkien käyttäjien saatavilla. Oikean semanttisen merkinnän käyttäminen on välttämätöntä, jotta näytönlukijoiden käyttäjät voivat selata taulukkoa yksi solu kerrallaan, kuulla sarakkeet ja rivin otsikot heille puhutut. Sarakeotsikoiden tulee olla kuvaavia ja osuvia. Taulukkotyylien on täytettävä WCAG 2 AA -kontrastiohjeet (tai jopa AAA tarvittavan vaatimustenmukaisuuden tasosta riippuen).

Responsiiviset taulukot

Käyttäjät voivat katsella sovellustamme millä tahansa laitteella, joten meidän on varmistettava, että taulukkoamme voidaan käyttää, olipa se näkyvä mobiililaitteella, tablet-laitteella tai pöytätietokoneella.

Pöytämme 375px 667px (iPhone 7)

Pöytämme ei tällä hetkellä ole herkkä, joten se ei näytä hyvältä laitteissa, joissa on pienemmät näytöt. Responsiivinen taulukon suunnittelu on valtava aihe, joka ei kuulu tämän viestin piiriin. Katsotaan siis toistaiseksi kahta yleistä lähestymistapaa:

Tiivistyvät sarakkeet

Sarakkeet, jotka ylittävät näytön leveyden, ovat piilotettuja

Tämän kuvion avulla kaikki sarakkeet, jotka eivät mahdu näytölle, ovat piilotetut. Käyttäjä voi vaihtaa ne näyttämään piilotetut tiedot. Voit viedä tämän askeleen pidemmälle määrittelemällä, mitkä sarakkeet tulisi antaa etusijalle eri ikkunanleveyksillä, varmistaen, että kriittiset sarakkeet ovat edelleen näkyvissä pienemmissä näytöissä.

Vierityspöydät vaakatasossa

Vaakatasossa vierittävä pöytä

Ehkä käyttäjien on verrattava useita rivejä nopeasti ilman, että heidän täytyy hypätä laajentuvien asioiden ympärille? Yksi yleinen malli on antaa pöydän vierittää vaakatasossa pienemmillä näytöillä poistaen piilotettujen sarakkeiden tarpeen. Harkitse molempien kuvioiden käyttöä ja anna mahdollisuus vaihtaa näiden välillä.

Paljon tietoja käsitellään

Pöytämme näyttää tällä hetkellä kunnolta, mutta sillä on joitain käytettävyysongelmia. Kuvittele, että meillä oli 10 000 riviä, yhden tietueen löytäminen voi olla haaste.

Sivunumerointi

Sivutusta toiminnassa

Lisäämällä sivutusta, voimme rajoittaa rivien määrää sivua kohden, jolloin tietoja on hieman helpompi sulauttaa. Yllä olemme kymmenen riviä sivua kohden.

Sivutuksella on monia etuja. Se helpottaa käyttäjien etsimistä luettelosta manuaalisesti, antaa heille hallinnan tunteen (toisin kuin ääretön vieritys) ja antaa käyttäjille mahdollisuuden pitää mielessä rivien sijainti. Sivutusta käytettäessä meidän tulisi antaa käyttäjän antaa valita kohteiden lukumäärä sivua kohden (mieluiten säästää valintansa tulevaisuutta varten) ja näyttää myös luettelossa olevien kohteiden kokonaismäärän ja niiden lukumäärän.

Käyttäjän määrittelemä sivutus

Antamalla käyttäjän muuttaa kohteiden lukumäärää sivua kohden voi olla helpompaa, kun verrataan useita rivejä kuin yksi tai useampi sivu.

On myös syytä pohtia, kuinka paljon dataa taulukko tarvitsee sivuaa. Esimerkiksi, jos meillä on sivu 10 sivua kohden, mutta niitä on vain 11, käyttäjän on napsautettava vieressä nähdäksesi viimeisen rivin. Miksei tarkista ohjelmallisesti, onko niitä yli 20, ja jos niin, ota sivutus käyttöön.

Laiska lastaus

Lataa lisää rivejä tarpeen mukaan

Toinen yleinen malli joko “lataa lisää” -painikkeella pöydän alla tai lataamalla lisätietoja, kun käyttäjä vierittää taulukon pohjaan. Suosittelen sivuttamista tältä osin, pääasiassa yllä lueteltujen etujen vuoksi. Rajaton vierittäminen poistaa joitain käyttäjän hallinnan näkökohtia (Milloin tiedot loppuu? Kuinka monta tietuetta olen katsellut?). Se sopii paremmin sovelluksille, jotka keskittyvät käyttämään datavirtaa kuluttavia käyttäjiä sen sijaan, että olisivatko tietolista, missä tarvitaan enemmän käyttäjän hallintaa.

Haku taulukosta

Taulukkotietojen suora haku

Toinen ratkaisu olisi suodattaa taulukkotiedot tiettyjen hakuehtojen perusteella.

Lajittelu sarakkeiden mukaan

Lajittelu sarakkeen mukaan

Tietojen lajittelu sarakkeittain antaa käyttäjille mahdollisuuden ryhmitellä samanlaisia ​​tietoja sarakearvojen mukaan.

Nämä mallit toimivat hyvin yhdessä, suodattamalla taulukko merkityksellisen tiedon näyttämiseksi, etsien hienojakoisia tuloksia ja lajittelemalla sitten tulokset arvon mukaan.

Yhteenveto tiedoista

Visuaalinen yhteenveto tarjoaa yleiskatsauksen liitteenä olevasta taulukosta

Visuaalisen yhteenvedon lisääminen taulukon yläpuolelle voi auttaa käyttäjää analysoimaan tietoja nopeasti.

Suunnittelu tuntemattomalle

Monissa sovelluksissa on täysin mahdollista, että käyttäjä määrittelee taulukon rakenteen ja sen tiedot, joten et ehkä tiedä mitä tietoja taulukko täyttää. Hyvin suunnitellun pöydän tulisi sopia tähän. Tyypillisesti tämä asettaa muutamia lisähaasteita.

Voisiko taulukko sisältää erittäin pitkiä URL-osoitteita tai kappaleita tekstistä (osoitetiedot, käyttäjän lähettämät viestit, lomakekentän arvot)? Meillä on täällä pari vaihtoehtoa:

Lyhennä pitkää tekstiä

Pitäisikö käyttäjän nähdä kaikki kunkin rivin potentiaalisesti pitkä teksti samanaikaisesti? Se on epätodennäköistä. Ratkaisu olisi lyhentää tekstiä riittävän hyödyllisellä pituudella, jotta käyttäjälle annetaan yleiskuva tiedoista ja tarjotaan menetelmä katsella enemmän, joko linkittämällä toiselle sivulle, näyttämällä enemmän sisältöä modaalissa tai jollain muulla tavalla (me kosketat tätä myöhemmin).

Kääri pitkät jouset

Pitkät URL-osoitteet voivat rikkoa reagoivan taulukon asettelun. Meidän on varmistettava, että kaikki taulukon solun linkit (tai pitkät katkaisemattomat merkkijonot) murtuvat oikein, jotta taulukon asettelu ei rikkoudu.

Rivitoiminnot

Yhteiset rivitoiminnot tulisi ryhmitellä. Jos nämä toiminnot on mahdollista suorittaa useilla riveillä samanaikaisesti, toiminto olisi poistettava ja lisättävä lisävarusteena muualla sivulla (lähellä pöytää). Tarvitsemme tietenkin tapa valita useita rivejä.

Suoritetaan toimintoja useilla riveillä kerralla.

Taulukon toiminnot

Yhteisiin pöytitoimintoihin kuuluvat:

Taulukkotietojen tulostaminen

Anna käyttäjän tulostaa vain taulukko eikä ympäröivää käyttöliittymää. Käytä tulostamiseen kohdistettuja tyylejä optimoidaksesi pöytämuodon tulostettavaksi. Poista sivutus tulostettaessa, jotta kaikki taulukkotiedot tulostuvat.

Ladataan taulukkotietoja

Lähes kaikki virrankäyttäjät haluavat ladata taulukkotiedot vakiomuodossa (CSV, JSON jne.) Tietojen manipuloinnin mahdollistamiseksi muissa ohjelmistoissa. Jos tiedostokoko on todennäköisesti suuri, harkitse zip-arkiston käyttöä. Jos arkisto ei ole heti saatavissa, ilmoita siitä käyttäjälle ja lähetä sähköpostia heille, kun se on valmis lataamaan.

Valikko, joka tarjoaa taulukkotason toimintoja

Tässä esimerkissä olemme käyttäneet taulukon yläpuolella olevaa avattavaa valikkoa Toiminnot salliaksesi taulukkokohtaiset toiminnot

Lisärivitietojen tarkasteleminen

Käyttötavasta riippuen käyttäjän on ehkä jouduttava nopeasti saamaan lisätietoja jokaisesta rivistä pysyessään yhteydessä. Tämä voidaan suorittaa useilla tavoilla.

modals

Lisärivitietojen tarkastelu modaalissa

Moodien avulla käyttäjä voi pysyä samalla sivulla taulukon kanssa, mutta kiinnitetään enemmän huomiota lisätietoihin ja mahdollisiin toimiin.

Yksityiskohtainen paneeli

Lisärivitietojen tarkasteleminen paneelissa

Tilanteesta riippuen saatat huomata, että modaali ei ehkä ole ihanteellinen ratkaisu, jos sinun on pidettävä tiedot modaalin alla näkyvissä. Sivulle liukuva yksityiskohta-paneeli voi olla parempi ratkaisu, kun pidetään kontekstissa ja tarve pitää taulukon tiedot näkyvissä.

Lopettavat ajatukset

Nöyrässä pöydässä on usein enemmän kuin silmää. Toivottavasti jotkut edellä mainituista seikoista auttavat sinua seuraavan kerran tullessasi suunnittelemaan pöytää.

Yllä olevat käyttöliittymät rakennettiin Pulsar-suunnittelujärjestelmällä, joka toimittaa suurimman osan toiminnallisuudesta Jadu Continuum -ympäristölle.

Päivitys: Osa 2, joka tarkastelee modaalivaihtoehtoja, on nyt suorana!