Miten suunnitella suuri käyttöliittymä
Verkkosovelluksen suunnittelussa toiminnot sijoitetaan usein kaiken muun yläpuolelle. Suurin osa tästä on hyvä asia.
Ihmiset (enimmäkseen) käyttävät sovelluksia, koska ne ovat hyödyllisiä, ei siksi, että ne näyttävät kauniilta. Mutta tämä ei tarkoita sitä, että voit jättää hyvän käyttöliittymän suunnittelun huomiotta tai yksinkertaisesti koputtaa yleiskäyttöisen käyttöliittymän. Hyvä käyttöliittymän suunnittelu lisää minkä tahansa web-sovelluksen yleistä käyttäjätietämystä.
Hyvä käyttöliittymä on monella tapaa samanlainen kuin hyvä web-suunnittelu. Väriteorian, negatiivisen tilan ja asettelun periaatteet ovat edelleen voimassa. Mutta käyttöliittymäsuunnittelu vaatii hieman enemmän ajatusta monissa tapauksissa sen edellyttämän vuorovaikutteisuuden vuoksi.
Vierailijat eivät vain tarkastele sivustoasi; he ovat vuorovaikutuksessa sen kanssa, joskus sellaisilla tavoilla, joita ette odottaneet. On elintärkeää, että otat aika todella tutkia käyttöliittymän suunnittelua ennen web-sovellusten suunnittelun aloittamista.
Seuraavassa on useita periaatteita ja ideoita suuren käyttöliittymän suunnitteluun.
Johdonmukaisuus on elintärkeää
Käyttöliittymäsuunnittelussa sivujen, toimintojen ja vaihtoehtojen välinen johdonmukaisuus on elintärkeää. Käyttäjät odottavat tiettyjä asioita, kun he käyttävät ohjelmaa, ja jos nämä asiat muuttuvat sivusta toiseen, se on sekava ja turhauttavaa.
Jos esimerkiksi sovelluksen kotisivulla käyttäjät siirtyvät sivujen välillä, joissa on yläreunan navigointipalkki, varmista, että samalla ylimmällä navigointipalkilla näkyy seuraavissa sivuissa ja että linkitetyt sivut näkyvät samassa järjestyksessä.
Muita asioita, joita on pidettävä johdonmukaisina, sisältävät värimallin ja yleisen asettelun sekä linkit tärkeisiin sivuihin, joita ei ehkä käytetä suoraan sovelluksessa (kuten tilin sivun tai usein kysyttyjä kysymyksiä).
Käyttäjät tekevät virheitä
Riippumatta siitä, kuinka hyvin suunnitella käyttöliittymääsi ja kuinka intuitiivinen se on, käyttäjät tekevät virheitä toisinaan. Joskus se johtuu siitä, että he vahingossa napsauttivat, kun he eivät halunneet. Muina aikoina se johtuu siitä, että he eivät todellakaan kiinnittäneet huomiota siihen, mitä he tekivät tai eivät lukenut sivun sisältöä.
Kummassakin tapauksessa on tärkeää, että käyttäjät voivat helposti kumota virheet, joita he tekevät.
Huomaat useilla verkkosovelluksilla, kuten Google-dokumentteilla, että käytännöllisesti katsoen milloin tahansa jotain, linkki näyttää kumoavan viimeisen toiminnon. Muissa sovelluksissa sinun on ehkä käytettävä valikkoa, jos haluat kumota toiminnon, mutta parhaat verkkosovellukset tekevät siitä edelleen helpoksi ja helposti tavoitettavalle askeleelle tai kahdelle milloin tahansa.
Korosta muutokset
Kun muutokset tehdään web-sovelluksen käytön aikana, käyttäjille on hyötyä, jos korostat nämä muutokset. Jos sovelluksessa esimerkiksi sisältää tietoja useista lähteistä tai käyttäjistä, korostetaan uutta sisältöä sen mukaan, mikä se on, on hyödyllinen ominaisuus.
On olemassa useita tapoja, joilla voit korostaa sisältöä. Yksi suosituimmista on luoda varjostettu tausta uuden sisällön taakse.
Muut sovellukset käyttävät kuvakkeita uuden sisällön ilmaisemiseen. Riippumatta siitä, mitä päätät tehdä, varmista, että uuden sisällön merkinnät eivät häiritse sisällön luettavuutta. On myös tärkeää, että nämä ilmoitukset hajottavat, jotta käyttäjät eivät häiritse niitä, jotka eivät tällä hetkellä ole mukana sisällön vaihtamisessa.
TitanPad käyttää värikoodausta ilmoittamaan kunkin käyttäjän tekemät muutokset.
Ota käyttöön pikanäppäimet
Kaikki käyttäjät eivät käytä pikanäppäimiä, vaikka ne olisivat saatavilla. Mutta niiden käyttäjien prosenttiosuus, jotka käyttävät pikanäppäimiä, ei niiden mukaan voi olla tuhoisan vaikutuksen käyttäjien tyytyväisyyteen.
Ajattele yleisimpiä toimintoja, joita käyttäjät suorittavat verkkosivustollasi ja varmista, että näille on käytettävissä pikanäppäimiä.
Varmista myös, että käyttämäsi pikanäppäimet ovat loogisia. Joitakin pikavalintoja käytetään jo tietyissä toiminnoissa (kuten Ctrl + Z kumoa tai Ctrl + V liittää), joten varmista, että ne toimivat edelleen muiden ohjelmien tapaan.
Valitse pikavalintasi käyttämät näppäimet loogisesti, joten ne on helppo muistaa käyttäjille. Varmista, että liittäkää ne myös mihinkään pudotusvalikkoihin niiden toimintojen vieressä.
Käytä tunnettuja standardeja ja yleissopimuksia
Laajalti käytössä olevat sovellukset ovat asettaneet tiettyjä standardeja siitä, miten asioiden odotetaan toimivan sovelluksessa. Esimerkiksi ihmiset näkevät "Avaa" -kansiokuvakkeen tai Liitä-leikekirjan.
Niissä käytetään myös tiettyjen sovellusten valikoiden avaamista tietyissä sovellusvalikoissa (uuden asiakirjan tai tiedoston luominen on lähes aina "Tiedosto" -valikon alla, kopiointi ja liittäminen löytyvät lähes aina "Muokkaa" -valikon pudotusvalikosta) .
Ajattele vakiintuneita sovelluksia, jotka tekevät samanlaisia asioita sovelluksesi sovelluksiin ja katsovat, miten he järjestävät toimia ja mitä kuvakkeita he käyttävät.
Jos näet eri sovellusten välisiä johdonmukaisuuksia, harkitse vakavasti samaa tai samankaltaista kuvaketta omalle sovellukselle. Se helpottaa käyttäjiä, jotka siirtyvät toisesta sovelluksesta omaansa ja parantavat kokemustaan.
Tarjoa personointiasetuksia
Monet web-sovellukset antavat käyttäjille mahdollisuuden muokata tiliäsi. Joillakin sivustoilla voit muuttaa värimallia tai lähettää mukautettuja grafiikoita. Toisten avulla voit järjestellä ulkoasun tai mikä näkyy, kun kirjaudut sisään sisään. Toisten avulla voit luoda omia sivuja tai vastaavia sisältöjä, jotka näyttävät tietoja, joista olet tekemisissä.
Ajattele mahdollisia muokkauksia, jotka parantaisivat sekä sovellusten toimintoja että käyttökokemusta.
Jotkut sovellukset eivät ehkä hyödy paljon muokkauksista, kun taas toiset ovat täynnä mahdollisuuksia. Jopa yksinkertaiset asiat, kuten sen, että käyttäjät voivat ladata oman logonsa tai muuttaa värimallia tai fonttia omien mieltymyksiensä mukaan, voivat vaikuttaa voimakkaasti käyttäjän kokemuksiin ja tyydytykseen.
Highrise antaa käyttäjille mahdollisuuden mukauttaa hallintapaneelinsa värimaailmaa. Pienet mukautusvaihtoehdot, kuten tämä, voivat lisätä käyttäjän tyytyväisyyttä.
Käytä työkaluvinkkejä ja integroituja ohjeviestejä
Useat sovelluskehittäjät sisältävät laajan dokumentaation sovellustensa käyttämisestä, mikä on uskomattoman hyödyllistä uusille käyttäjille. Mutta monissa tapauksissa tämä dokumentaatio säilytetään omalla, erillisellä osiolla verkkosivustolla. Pääsyäsi varten käyttäjien on poistuttava sovelluksesta tehokkaasti.
Vaikka laaja dokumentaatio on edelleen hyvä idea monimutkaisille sovelluksille, joissa on työkaluvihjeitä ja integroituja ohjesääntöjä modaaliväylissä tai sivupalkissa, lisää useimmille käyttäjille käytettävyyttä.
Se on saumaton tapa tarjota apua, kun joku todella käyttää sovellustasi, mikä säästää aikaa ja tekee koko kokemuksesta miellyttävämmän.
Käytä kohdistettua navigointia ja painikkeita toiminnoille
Karttasovelluksella on useita etuja painikkeiden tai tekstilinkkien suhteen. Tärkeintä on kuitenkin sen hienoinen psykologinen vaikutus.
Välilehdet herättävät muistikirjaa tai sideainetta. Jokainen välilehti merkitsee uutta osaa tai aihe. Sama pätee verkossa. Välilehdet tekevät henkilöistä alitajuisesti ajatella siirtyvän fyysisesti uuteen osaan sivustosta tai sovelluksesta.
Painikkeet puolestaan herättävät toimen. Painikkeiden käyttäminen esimerkiksi lomakkeen lähettämisen kannalta on järkevää psykologisesti, kun ihmiset yhdistävät painikkeen painamisen tekemällä jotain. Joten optimaaliseen käyttökokemukseen, muista välilehdet = navigointi, painikkeet = toiminta.
Varjosta kaikki modaalisen ikkunan takana
Tämä on yksi niistä todella tärkeistä asioista, joita joskus unohdetaan. Kun avaat modeemin ikkunan, varmista, että varjostat kaiken taustalla ikkunan takana. Tämä tekee ikkunasta erottuvan enemmän ja poistaa häiriötekijät.
Hyvä esimerkki modaalisesta ikkunasta, jossa on varjostettu tausta.
Käytä asiaankuuluvia kuvakkeita ja tarroja
Monet kehittäjät haluavat käyttää kuvakkeita sovelluksissaan merkitsemällä kyseiset kuvakkeet. Muut kuin absoluuttiset yleisimmät kuvakkeet, tämä on usein virhe ja vain sekoittaa käyttäjän.
Lisäämällä alt-tunnisteita, jotka tulevat näkyviin, kun kuvakkeet ovat leijuneet, ei ole hyvä ratkaisu sekaannuksen välttämiseksi, koska se vaatii vielä paljon käyttäjää.
Tarrojen sijoittaminen kuvakkeiden viereen tarkoittaa, että ne ovat heti tunnistettavissa. Kun käyttäjät tuntevat kunkin kuvakkeen merkityksen, he voivat selvittää entistä paremmin, mitä he etsivät ja siihen asti he voivat helposti nähdä täsmälleen mitä kukin kuvake merkitsee.
Toinen vaihtoehto on, että käyttäjät voivat piilottaa tarrat, mutta varmista, että oletusasetus on, jotta ne näkyvät.
Pidä asiat yksinkertaisina
Paras rajapinta on niin yksinkertainen kuin ne voivat olla tehokkaasti. Älä lisää kelloja ja pilliä kynsien ja pilliin lisäämiseksi. Jos toiminnolla on selvä tarkoitus, lisää se. Jos ei, niin älä.
Sama koskee suunnittelun elementtejä. Jos elementille on tarkoitus, niin se on okei lisätä siihen. Älä kuitenkaan lisää asioita, jotka näyttävät kauniilta. He lisäävät vain visuaalisia sekavuutta ja hämmentävät käyttäjiäsi. Valitse yksinkertaisin ratkaisu, joka saa työn.
Tämä ei välttämättä tarkoita sitä, että sovelluksesi on oltava minimalistinen. Muista kuitenkin, että useimmat ihmiset käyttävät sovelluksia niiden toimivuus, ei niiden suunnitteluun. Niin kauan kuin suunnittelu ei häiritse niiden kykyä käyttää sovellustasi tehokkaasti, he eivät todennäköisesti kiinnitä paljon huomiota sovelluksen visuaalisiin elementteihin.
Tehokas työnkulku
Suunnittelemalla käyttöliittymää sinun on harkittava käyttäjien työnkulkua. Ihmiset ovat määrittäneet tietyt tietotyyppiset ohjelmistot ja tietyt sovellukset, ja sinun on suunniteltava käyttöliittymä näiden kuvioiden mukaiseksi.
Jos esimerkiksi tiettyjä toimintoja tehdään yleensä toisiinsa nähden, ryhmittele ne yhteen sovelluksen samalla alueella.
Tutki useiden käyttäjien työnkulkua nähdäksesi, mitä näyttävät parantavan tehtävien tehokasta täyttämistä, ja selvitä sitten, miten käyttöliittymää voidaan parantaa heidän tarpeisiinsa. Joissakin tapauksissa käyttöliittymä ei yksin pysty ratkaisemaan näitä asioita, mutta joskus se voi.
15 Esimerkkejä suurista käyttöliittymistä
Siellä on satoja tai jopa tuhansia web-sovelluksia, joissa on fantastinen käyttöliittymäsuunnittelu. Tässä on enemmän kuin kymmenkunta, joka antaa sinulle joitain ideoita.
Shoply
Shoply tekee käyttäjistä melko helppo poistaa, muokata tai tarkastella jo lähettämiäsi tuotteita sekä lisätä uusia tuotteita.
Invoicera
Invoicera käyttää välilehtien navigointia ja painikkeita toimien suorittamiseen. Se pitää myös suhteellisen yksinkertaisen ja suoraviivaisen asettelun ja värimaailman.
Pandora
On selvää, että suunnittelijat takana Pandora otti huomioon MP3-soittimissa ja muissa medialaitteissa käytettävät liitännät niiden käyttöliittymän suunnittelussa. Se on intuitiivinen ja helppokäyttöinen muotoilu, jossa ei ole lainkaan oppimiskäyrää.
Wufoo
Wufoo n lomakkeen suunnittelurajapinta on niin intuitiivinen kuin sovellus voi saada. Ohjeviestit näkyvät, kun aloitat uuden lomakkeen suunnittelun selvittääksesi tarkalleen mitä tehdä ilman, että poistut sivulta.
Grooveshark
Grooveshark käyttää kuvakkeita navigointia ja toimintoja varten. Yleisesti tunnettuja kuvakkeita, kuten "leikkiä" ja "ohita" -painikkeita, ei ole merkitty, mutta toiset, kuten Koti- ja Suosikit -kuvakkeet, ovat.
Wridea
Wridea käyttää intuitiivista käyttöliittymää, jonka avulla voit muokata mitään vain napsauttamalla sitä. He käyttävät myös valikoita, jotka vain laajenevat, kun viet yli idea, mikä vähentää visuaalista sekavuutta ja antaa käyttäjien valita kahden värimallin välillä.
Reppu
Reppu käyttää painikkeita toimintoihin ja välilehtien navigointiin, mikä tekee siitä intuitiivisemman käytön.
Muista maito
Muista maito käyttää välilehtien navigointia ja painikkeita toimintoihin. Niihin sisältyy myös hyödyllisiä merkintöjä, jotka useimmiten hylkäävät erillisen dokumentoinnin tarpeen.
Ta-da List
Ta-da Listat pitää rajapinnan mahdollisimman yksinkertaisena. Ei ole mitään ylimääräistä tietoa, vain käsillä oleva tehtävä. Se on uskomattoman intuitiivinen ja tekee erinomaisesta käyttäjäkokemuksesta.
Relenta
Relenta käyttää välilehtien navigointia ja merkittyjä kuvakkeita. Ne pitävät myös sähköisten ohjelmien vakiokäytäntöjä, joten heidän oppijoilleen ei ole lainkaan oppimiskäyrää.
Viviti
Viviti käyttää intuitiivista käyttöliittymää, jossa otetaan huomioon heidän ei-suunnittelijaasi käyttäjien tarpeet. Vihjeitä annetaan aina, kun kirjaudut sisään, ja dokumentointi on helposti saatavilla ja helppokäyttöinen, joten voit valita minkä tyyppisen apuohjelman haluat ennen kuin poistut sivulta, jota olet työskennellyt.
Pomppia
Bounce n käyttöliittymä on hyvin suoraviivaista ja yksinkertaista. Käytettävät työkalut ovat intuitiivisia (vain vetämällä alueelle, jotta voit kirjoittaa merkinnän, kirjoittaa palautetta ja jakaa sen).
Meetifyr
Meetifyr käyttää sellaista intuitiivista käyttöliittymää, että käytännössä dokumentaatiota ei tarvita. Sovelluksen tarkastelu kestää vain muutaman sekunnin ajan heti, kun tunnistetaan sekä sen käyttö että eri kuvakkeet ja värikoodit.
DoingText
DoingText yksinkertaistaa käyttöä, koska se ei edellytä minkäänlaista rekisteröintiprosessia. Asiakirjat ovat vain URL-pohjaisia ja yhteistyökumppanit tarvitsevat vain URL-osoitteen. Se tekee yhteistyöstä lähes hetkellisen prosessin.
Writeboard
Writeboard sisältää hyödyllisen muotoilun apu sivupalkissa pääosan sisältöalueen vieressä.
Kirjoitettu yksinomaan WDD: lle Cameron Chapman .
Mikä on suosikki käyttöliittymäsuunnittelu? Onko muita vinkkejä erinomaisten käyttöliittymien suunnittelussa? Jaa ne kommentteihin!