7 Liitännätekniikka yksinkertaistaa ja purkaa liitäntöjäsi
Mikä on yksinkertaisuus? Yksinkertaisuus on luonnollisen, selkeän ja helposti ymmärrettävän laadun laatu. Ei ole yllättävää, että yksinkertaisuus menestyy usein käyttöliittymäsuunnittelussa. Useimmat ihmiset eivät luonnostaan pidä laitteiden ja ohjelmistojen monimutkaisuutta. Kyllä, jotkut ihmiset löytävät iloa selvittääkseen, miten jotain toimii, mutta useimmille meistä, koska emme kykene käyttämään laitetta, johtaa hukkaan aikaa ja turhautumista, eikä se ole hyvä asia.
Jos voit ottaa monimutkaisen laitteen tai ohjelmiston ja muokata sitä uudelleen, organisoida ja uudistaa käyttöliittymän, jotta se olisi helppokäyttöinen ja ymmärrettävissä, olet valmis tarjoamaan paremman käyttökokemuksen .
Tässä artikkelissa aion puhua 7 käytännön tekniikoita , joita voit hyödyntää web-suunnittelussa, jotta sivustot tai web-sovellukset yksinkertaisempi ja vähemmän sekaveri.
1. Modaaliset ikkunat.
Olen varma, että muistat päivämäärät, ennen kuin ponnahdusikkunoiden selaimet otettiin käyttöön selaimissa, kun jouduttiin torjumaan pieniä ikkunoita, jotka liian usein päättivät ponnahtaa selainikkunan yläosaan näennäisesti ainoana tarkoitus harmittaa sinua. Kukaan ei halunnut näistä ponnahdusikkunoista, ja estämistekniikat otettiin käyttöön lopettamaan ne. Mutta tänään nähdään uudentyyppisiä ponnahdusikkunoita verkossa, jotka ovat paljon puhtaampia ja toimivat paljon paremmin aiottuun tarkoitukseensa. Nämä ovat modaalisia ikkunoita.
Modaaliset ikkunat ovat kuin ponnahdusikkunoita, mutta sen sijaan, että ne näkyisivät erillisessä selainikkunassa, ne näyttävät oikealta nykyisen sisällön yläpuolelta. Modaaliset ikkunat edellyttävät vuorovaikutusta, joten alla oleva sisältö pimeänä ilmaisee tämän sekä estää sisällön häiritsevän melun ja siirtää visuaalisen tarkennuksen yllä olevaan ikkunaan .
Joten miksi käytät modaalisia ikkunoita ja miten ne yksinkertaistavat käyttöliittymääsi? Jos tarkastellaan vaihtoehtoa, niiden tarkoitus on paljon selkeämpi. Vaihtoehtona modaalivaihtoehdon käyttämiselle on yleensä uuden sivun lataaminen. Esimerkiksi joillakin sivustoilla on tilisi asetussivu. Kun napsautat asetusten linkkiä, siirrytään uudelle sivulle. Mutta entä jos vain muutamia asetusvaihtoehtoja - kannattaa todella ohjata käyttäjää uudelle sivulle?
Useissa tapauksissa asioita, kuten asetuksia, laatikoita ja kirjautumislomakkeita voidaan näyttää modaalivaiheessa sisällön yli. Tämä tallentaa käyttäjälle paluumatkan toiseen sivuun . Se myös keventää verkkopalvelimen kuormitusta, koska se joutuu käsittelemään vähemmän pyyntöjä.
ActionMethod , projektinhallintasovellus, näyttää modaaliset ikkunat koko sovelluksen kautta. Tässä on arvostuslomake.
2. Hover-säätimet.
Lautasen lasku vähentäisi myös lautasen helpompaa nielemistä. Jos sovelluksessasi on useita valvontatoimenpiteitä, käyttäjien on skannattava useimpien käyttäjien keskuudessa etsimään mitä he etsivät. Todennäköisesti jotkut kontrollit ovat vähemmän tärkeitä kuin toiset, ja joitain kontrolleja käytetään paljon vähemmän kuin toiset . Yksinkertaisin asia, jota voit tehdä, on tuhota ja piilottaa nämä säätimet oletusnäkymästä.
Tämä on kätevä tapa piilottaa ohjaimet, mutta näyttää ne sitten, kun käyttäjä liikkuu tiettyihin alueisiin. Nämä ovat hover-säätimiä. Esimerkiksi Twitter, suosittu mikroblogihakemus, näyttää syötteen siitä, mitä kaikki seuraajasi listasta ovat äskettäin sanoneet. Jokainen viesti on kapseloinut omaan pieneen ruutuunsa. Kaksi viestiä voi suorittaa kahdella toiminnolla: lisää se suosikkeihisi tai vastaa siihen.
Kaikkien viestien suosikki- ja vastauspainikkeiden näyttäminen aiheuttaisi sekaannusta. Et todennäköisesti halua reagoida jokaiseen syötteen viestiin ja vielä vähemmän todennäköisesti haluat lisätä ne kaikki suosikkeihisi. Joten Twitter näyttää vain oikean kontekstin ohjaimet - kun viet yli viestin. Tämä johtaa yksinkertaisempaan käyttöliittymään eikä toimintojen menetykseen . On olemassa vaara, että uudet käyttäjät eivät näe näitä valvontatoimia, kun he ovat piilossa; Monet ihmiset kuitenkin yleensä hiirtävät asioita, joita he katsovat. Koska heilurin alueet ovat riittävän suuria, nämä tarkastukset ovat todennäköisesti nopeasti löydettävissä.
Viserrys näyttää kunkin viestin lisäyksen suosikkeihin ja vastauspainikkeisiin , kun siirrät sen päälle.
3. Ohjaukset kysyntään.
Toinen keino piilottaa asioita on käyttää Javascriptia ja näyttää joukon kontrolleja, kun käyttäjä napsauttaa jonnekin. Esimerkiksi sivustossasi saattaa olla hakukenttä, joka mahdollistaa mukautetut suodattimet tai edistyneet haut. Sen sijaan, että näet nämä vaihtoehdot oletuksena, voit piilottaa ne ja saada ne näkyviin hakupalkin lopussa. Napsauttamalla tätä painiketta saattoi näkyä vaihtoehtoja tai suodattimia. Tämä tarkoittaa sitä, että säilytät kehittyneet toiminnot niille käyttäjille, jotka tarvitsevat sitä ja samalla yksinkertaistavat käyttöliittymää ihmisille, jotka tarvitsevat vain yksinkertaisen haun.
Kaikki eivät käytä joitakin kehittyneempää tai erikoistunutta valvontaa sivustossasi. Kun piilotat ne, olet tekemässä käyttöliittymän puhtaampaa ja helpommin ymmärrettävää, koska uusilla käyttäjillä on vähemmän elementtejä käsitellä ja selvittää. Valitessasi, mitä piilottaa ja mitä pitää, ei ole helppo tehtävä, vaikka sinun on tehtävä suunnittelija löytää sopiva tasapaino.
Kontain , bloggaussovellus, tarjoaa hakuja pitkälle hakusuodattimille, piilotettuna pudotusvalikossa hakupalkin lopussa.
4. Lomakkeiden laajentaminen.
Olen varma, että olet perehtynyt tiedostojen lähettämiseen, jota näemme usein web-lomakkeissa. Se on tavallisesti pieni baari, jossa on tiedostojen selaus -painike. Kuvittele tilanne, jossa käyttäjä todennäköisesti lataa useita tiedostoja kerralla. Voit näyttää useita tiedostojen latauskenttiä, mutta se ei ole ihanteellinen, koska se haittaa käyttöliittymän ja ei ole mitään keinoa kertoa kuinka monta kenttää käyttäjä tarvitsee. Tässä tapauksessa olisi hyvä ratkaisu käyttää laajentavaa muotoa .
Kun käyttäjä lataa yhden tiedoston, toinen tiedoston latauskenttä ilmestyy alla, joka on valmis hyväksymään lisää. Voit käyttää samaa tekniikkaa mille tahansa muulle syöttökentälle. Esimerkiksi ehkä tämä lomake tarvitsee joukon sähköpostiosoitteita ihmisille, jotka haluat kutsua tiimiin tai johonkin muuhun tarkoitukseen. Sen sijaan, että sinulla on paljon tekstikenttiä, sinulla voi olla vain yksi tai pari, ja sitten kun käyttäjä täyttää ne, luodaan uusia . Lomakkeen laajentaminen tällä tavalla on erinomainen tapa säästää tilaa ja yksinkertaistaa käyttöliittymääsi .
gmail näyttää vain yhden liitetiedoston kun kirjoitat uuden viestin. Voit napsauttaa "Liitä toinen tiedosto" -linkkiä, jotta voit avata lisää, kun tarvitset niitä.
5. Tarroja tulomuodossa.
Lomakkeet voivat saada monimutkaisia nopeasti. Sinulla on tekstikenttiä, tarroja, tekstialueita, pudotuksia, valintaruutuja ja niin edelleen. Lisäksi lomakkeiden täyttäminen ei yleensä ole kovin hauskaa, joten prosessin nopeuttaminen ja lomakkeiden yksinkertaistaminen tekevät niistä vähemmän pelottavia ja helppokäyttöisempää. Yksi tekniikka, jonka avulla lomakkeiden tekeminen yksinkertaisemmaksi on, on siirtää tarrat ulkopuolisilta syöttöalueilta sisäänpäin. Joten, sen sijaan, että näytät tekstikentän vieressä olevaa merkintää, näytä se valmiiksi täytettynä tekstikentän sisällä .
Tämä pienentää tilaa huomattavasti, pienentämällä lomakkeen kokoa. Pienet asiat näyttävät yksinkertaisemmilta , joten lomakkeen pitäisi olla helpompi täyttää. Tätä ei välttämättä ole mahdollista monimutkaisempia lomakkeita varten, joissa on monenlaisia syöttötapoja (valintaruudut, valintanäppäimet ja pudotusvalikot), mutta jos sinulla on muutama tekstikenttä, jota kannattaa harkita, esim. sisäänkirjautumislomake.
Tällä menetelmällä on taantuma, jota onneksi voidaan ratkaista perusteellisemmin. Kun käyttäjä lataa sivun ensimmäistä kertaa, he näkevät kentät ja pystyvät lukemaan tarrat. Kun ne napsauttavat kenttää, useimmat lomakkeet piilottavat merkinnän kokonaan, jolloin käyttäjä voi kirjoittaa syötteen. Mutta entä jos käyttäjä ennenaikaisesti napsauttaa kenttää ja sitten unohtaa, mitä se on tarkoitettu kirjoittamaan? He joutuvat napsauttamaan lomaketta poispäin, jotta etiketti ilmestyy uudelleen (toivottavasti).
Tämän ongelman ratkaisemiseksi etiketin täysin piilottamisen sijasta voit hämätä sen, kun käyttäjä napsauttaa sitä ja piilottaa sen kokonaan, kun käyttäjä aloittaa kirjoittamisen.
MobileMe näyttää tunnisteita syöttökenttien sisällä sisäänkirjautumisruudussa ja himmennä ne edelleen, kun valitset kentän.
6. Kuvakkeet tekstin sijasta.
Yksinkertaisuuden saavuttamiseksi käyttöliittymäsuunnittelussa täytyy vähentää ja poistaa kaikki tarpeettomat tai harvoin käytetyt osat . Nämä eivät sisällä vain valvontaa, vaan ne voivat olla myös teksti-etikettejä. Jos käyttöliittymässä on paljon tarroja, katso sitä ja kysy itseltäsi - ovatko nämä tarrat tarpeellisia? Ovatko ne useimmat heistä yksinkertaisesti maininnut ilmeisen? Jos etiketti osoittaa jotain, joka on ilmeinen, kun otetaan huomioon kyseisen kohteen asiayhteys, et tarvitse tätä tunnistetta - se on vanhentunut.
Jotta saat esimerkin tästä, mieti blogissa olevia viestejä. Jokaisen viestin otsikon alla voi olla esimerkiksi päivämäärä ja kirjoittaja. Tarrojen kiinnittämistä ennen kutakin, kuten "Tekijä:" ja "Päivämäärä:", ei ehkä tarvita. Kun joku näkee nimensä ja päivämäärän artikkelin otsikon alle, he todennäköisesti selvittävät, että tämä on kirjoittaja ja se on päivämäärä. Konteksti sekä formaatti, johon he ovat tottuneet lukemasta muita blogeja, antavat käyttäjille kaikki ne tiedot, joita he tarvitsevat heti ymmärtämään tietojen takana olevan merkityksen. Näiden tarrojen poistaminen antaa sinulle puhtaamman käyttöliittymän .
Joissakin tapauksissa, joissa merkinnän jättäminen pois käytöstä ei onnistu, voit korvata merkinnän kuvakkeella. Kuvakkeella on joitain etuja kuin tekstimerkki. Se vie vähemmän tilaa. On helpompaa keskittyä siihen, koska sen väri ja erottuva muoto houkuttelevat silmää helpommin kuin teksti. Joissakin tapauksissa merkitys voidaan välittää yhtä tehokkaasti kuin teksti. Jos sinulla esimerkiksi on otsikko nimeltä "Tunnisteet:", jota seuraa tag-linkkien luettelo, voit korvata etiketin pienellä kuvasta. Edellyttäen, että sinulla on tekninen osaava yleisö, tässä tapauksessa merkityksen pitäisi olla yhtä selvä.
Tietenkin se ei toimi kaikissa tapauksissa, ja jos on olemassa vaara olla epäselvä, sinun kannattaa pelata se turvallisesti ja käyttää tekstiä. Tämän sanottuaan ei ole mitään syytä valita yksin - voit hyötyä kuvakkeiden houkuttelevista silmäänpistävistä ominaisuuksista sekä tekstin selkeydestä käyttämällä niitä yhdessä; vaikka siinä tapauksessa teet kaupankäynnin avaruuteen.
highrise , CRM-sovellus, käyttää tag-kuvaketta tekstin etiketin sijasta ennen tunnisteiden luetteloa.
7. Kontekstipohjaiset tarkastukset.
Käytössä on muutamia lähestymistapoja, joita voit käyttää käyttöliittymäsuunnittelussa, joka liittyy kontekstiin ja johdonmukaisuuteen. Yksi määrää, että sinun on pidettävä hallintasääntöjä yhdenmukaisina kaikissa sovelluksissa tai verkkosivustoissa, jotta ihmiset tietäisivät, missä kaikki on ja et saa sekaisin. Toinen lähestymistapa on muuttaa ohjaimia tai navigointi jokaisen sivun tai ikkunan kontekstissa. Kontekstipohjainen lähestymistapa on sellainen, jossa näytetään vain tavaraa, jonka käyttäjän on täytettävä tehtävä, jota he työskentelevät tässä yhteydessä.
Hyvä esimerkki näistä kahdesta lähestymistavasta on Microsoft Office -rajapinnan äskettäisessä uudelleensuunnittelussa. Office 2003 ja sen vanhemmat sisarukset noudattivat suunnitteluperiaatetta, jonka mukaan asiat ovat johdonmukaiset. Sinulla oli koko joukko työkalurivejä, jotka näkyivät näytöllä kaikkina aikoina. Nämä eivät muuttaneet, olitko työpöytiä taulukoiden, grafiikan, tekstin tai kuvien kanssa. Microsoft uudisti Microsoft Office 2007: n käyttöliittymän käyttämällä kontekstipohjaista lähestymistapaa. Yläosassa näet nyt nauhan - tai joukon välilehtiä. Kun valittu, e- välilehti näyttää tietyn tehtävän kannalta merkitykselliset ohjaimet , olivatko se oikolukua, työskentelevät grafiikan kanssa tai yksinkertaisesti kirjoittavat.
Kontekstipohjainen lähestymistapa antaa sinulle mahdollisuuden näyttää vähemmän tarkastuksia milloin tahansa, mutta samanaikaisesti enemmän valvontatoimenpiteitä, jotka ovat tärkeitä käsillä olevan tehtävän kannalta . En suosittele käyttämään kontekstipainotteista lähestymistapaa yleiseen web-suunnitteluun, koska useimmilla verkkosivustoilla ihmiset odottavat johdonmukaisen koko sivuston navigoinnin. Tämä johtuu siitä, että jokainen sivusto on erilainen, ja se helpottaisi selailukokemusta, jos tietyn sivuston yksittäiset sivut olisivat myös erilaisia.
Tämän sanottuaan tätä voidaan käyttää web-sovelluksissa, koska ne eivät ole pelkästään yksinkertaisia verkkosivustoja - ne ovat ohjelmistoja, jotka asuvat pilvessä. Ihmiset todennäköisesti käyttävät paljon aikaa Web-sovelluksessa ja heillä on enemmän mahdollisuuksia oppia, miten se toimii . Joidenkin verkkosovellusten monimutkaisuus tarkoittaa sitä, että sinun on todella käytettävä kontekstipohjaista lähestymistapaa, sillä jos et, niin näytöllä on liikaa aikaa milloin tahansa kenenkään käsittelemään. Kun näytät tietyn tehtävän vain muutamia asiaankuuluvia tarkastuksia, käyttäjät voivat selvittää, mitä tehdä paljon lyhyemmässä ajassa.
Pisama , ajan seurantaohjelmaan, on pääkäyttäjän työkalupalkin yläosassa oleva kytkin. Se vaihtaa ajan syöttösäätimiä ja raporttisäädöitä, näyttäen vain yhden sarjan kerrallaan. Tämä on järkevää, koska syötät aikaa tai tekee raportin - ei kahta asiaa samanaikaisesti.
Lopeta ...
"Yksinkertaisin tapa saavuttaa yksinkertaisuus on harkitun vähentämisen kautta" - John Maeda, Yksinkertaisuuden lakit .
Käyttöliittymän pienentäminen, kätkeminen edistyneillä toiminnoilla ja selkeyden poistaminen on yksinkertaisemman käyttöliittymän polku . Tällä tiellä kohtaat monia esteitä. Jokaiselle piilotetulle tai ottavalle ominaisuudelle tulee ihmisiä, jotka valittavat ja vaativat palauttamista. Mutta jokaisella käyttäjillasi on erilaisia tarpeita ja käyttää verkkosovellusta tai verkkosivustoa eri tavalla. Jos kuuntelet kaikkia ominaisuuspyyntöjä ja -tarpeita, ja niin pitkälle kuin ne on osoitettu ja toteutettu, et todennäköisesti pääse ohjelmiston suunnittelun ytimeen. Todennäköisemmin, sinä törmäät syvälle kuritukseen, josta on lähes mahdotonta kiivetä.
Kun lisäät ominaisuuden, sitä on vaikea ottaa pois, koska ihmiset alkavat käyttää sitä ja jotkut riippuvat siitä. Varmista siis, että jokainen ominaisuus ja jokainen lisätty käyttöliittymäosa on mielekästä ja lisää todellista arvoa tuotteellesi . Lisää ominaisuuksia tarkoittaa enemmän valvontaa ja sisältöä. Lisää ohjausta ja sisältöä helpottaa rajapinnan yksinkertaisuutta ja sotkua.
Yksinkertaisuus koskee pelkistävän ja uudelleenorganisoinnin pieneksi ja hallittavaksi. Jos jotain, sinun pitäisi pyrkiä ottamaan pois, eikä lisätä. Tuote, jossa on vähemmän painikkeita, ei välttämättä ole vähemmän tehokasta - se on todennäköisesti vain paremmin suunniteltu .
Kirjallinen yksinomaan WDD: lle Dmitry Fadeyev. Hän johtaa blogia käytettävyydestä Usability Post .
Käytätkö mitään näistä tekniikoista omissa kuvioissasi? Luuletko, että ne auttavat käyttäjäkokemusta? Jaa kokemuksiasi kanssamme.