10 levinumat disainivigu… ja kuidas neid vältida

Kujundamine on keeruline äri. Seda on liiga lihtne segi ajada.

Kvaliteetsete toodete loomiseks on üliolulised kõik väikesed detailid. Iga detaili tuleb arvestada. Üksikasjadesse eksida ja suurt pilti unustada võib olla lihtne. Sellepärast on ka mitmeid uskumatult levinud kasutajaliidese (UI) disainivigu ja nõrkusi.

Kuidas saab neid tavalisi vigu vältida? Siit leiate mõned näpunäited ja soovitused, mis aitavad teil neid liiga levinud lõkse vältida.

Jah, kõik see põhineb minu enda valusal kogemusel disainerina. Ja jah, igasugune sarnasus tegelike sündmustega on täiesti juhuslik.

1. Servajuhtumite planeerimise puudumine (öelge Lorem Ipsumile EI)

Kasutades lorem ipsum'i ja stock-fotosid, saate hõlpsalt luua kauni, harmoonilise kujunduse ... mis on kiiresti tegelikkusega ebaoluline. Teie ilus kujundus purustatakse, kui see on tõelise sisuga täidetud.

Selle olukorra vältimiseks ja klientide pettumuste vältimiseks lõpptoodete osas, mis näevad välja sellised, nagu te plaanisite, peate hankima teavet. Koguge võimalikult palju teavet juba olemasoleva sisu või toodetava sisu kohta.

Täpsemalt, enne kui hakkate töötama kasutajaliidese kujundusega, peate teadma, millist sisu kuvatakse igas lehe jaotises. Samuti peate teadma sisu minimaalset ja maksimaalset suurust (st mitu tekstirida, pildi suurust). Neid pöördepunkte nimetatakse äärejuhtumiteks, kuna need näitavad, millal ja kuidas liides muutub.

Piltide valimine

Samuti peate uurima pildipiiranguid. Kui teie kliendil puuduvad kohandatud fotod või ta ei kavatse neid osta, pole mõtet Unsplashist kasutada ilusaid, kuid mõttetuid fotosid.

Miks? Fotod kipuvad olema kontseptuaalsed. Ei piisa ainult millegi ilusa kasutamisest. Selle asemel peate valima pildid, mis loovad narratiivi või vihjavad sügavamale tähendusele.

Ükskõik, mida teete, ärge kasutage fotosid, millel pole vaja seal olla. Nendel päevadel on inimesed tohutul hulgal teavet tohutult hämmingus. Üks natuke kasutu visuaalne teave ainult ärritab neid.

Plokkide kordamise mõistmine

Veel üks servajuhtum on seotud korduvate plokkidega - näiteks pilt + tekst, ikoon + tekst, number + tekst jne. Peaksite mõtlema, kuidas need plokid kahe tekstireaga ja kümnega välja näevad ning kas nad ükshaaval seisavad.

Funktsioone kirjeldavate väikeste tekstplokkide puhul saate hõlpsalt kasutada kolmeveerulist paigutust. Kui teil on aga rohkem kui viis tekstirida ja peate seda kõike näitama ilma ellipsideta, peate leidma uue visuaalse lahenduse. Miks? Kuna pikkade tekstiveergude lugemine on kasulik ainult ajalehtedele ja pole veebi jaoks mugav. Võimalikud lahendused võivad hõlmata horisontaalse kerimisega slaidide kasutamist või kaheveerulist paigutust.

Planeerimine skaleerimiseks

Teie sisu servajuhtumite tundmine aitab teil ekraanipinda tõhusamalt kasutada ja valida liidese iga osa jaoks õige UI-käsitluse. Kuid pidage meeles, et servajuhtumid ei puuduta ainult seda, mis teil praegu on. Hea disainer peaks alati mõtlema ennetavalt, võttes arvesse võimalust, et klientidel võib tulevikus olla vaja UI-d laiendada.

2. Ebapiisavad ekraanimärkused

Järgmine suur viga, mida on parem vältida, on märkuste puudumine teie kujundustes.

Kogu teie meeskond - projektijuht, kvaliteedikontrolli spetsialistid ning kasutajaliidese ja taustaprogrammi arendajad - näeb teie kujundusekraane staatilistes vormides, nagu ilusate piltide komplekt. Nad ei tea, millist käitumist te arvate iga liidese elemendi puhul. Nad ei oska ennustada, kuidas sa selle oma mõtetes kujundasid. See, mis võib teile ja teie kaaskujundajatele ilmne olla, ei pruugi kõigile meeskonnaliikmetele ilmne olla.

Sellepärast on ülioluline lisada märkused iga elemendi käitumise kohta, linkide aadressid, animatsioonid ja ekraaniga seotud toimingud. Selle sammu vahele jätmise korral võite riskida arusaamatustega. Samuti riskite paljude asjatu segadusega, kui palju tööd on tehtud valesti.

On lihtne aru saada, kuidas selline väike asi nagu ekraanimärkused võib palju arendusaega raisata. See võib mõjutada isegi kogu projekti ulatust ja suurendada arenduskulusid.

3. Pettumust tekitavad tõrkeseisundid

Kasutajaliidese kujundamisel ärge unustage ühegi kasutajaliidese peamist eesmärki: pakkuda kasutaja ja teenuse vahel võimalikult sujuvat suhtlust. Liidestes pole kohta kahtlustele, küsimustele vastusteta ega mingisugusele ebakindlusele.

Disainerid peaksid kasutajatele olekutest selget tagasisidet andma, eriti veateadete korral. Seetõttu peaksid veateatised vastama järgmistele lihtsatele reeglitele:

  • Need peaksid olema äratuntavad ja märgatavad (nt punane värv on tavaline kasutajaliidese muster, mis näitab viga).
  • Nad peaksid selgelt selgitama, mis on juhtunud ja kuidas kasutajad saavad vea parandada.
  • Need peaksid olema kontekstuaalsed. Parem on näidata veateateid elemendi lähedal, millega nad on seotud.
  • Nad ei tohiks olla ärritavad. Kas teie kasutaja pole juba veast piisavalt ärritunud?

Disainerid peaksid hoolitsema ka ootamatute vigade eest (nt serveri vead, lehte ei leitud). Iga tõrketeade on takistuseks kasutaja voolavusele. Seetõttu peame aitama kasutajal sellega toime tulla, pakkuma kõiki võimalikke lahendusi ja proovima leevendada halba kogemust - eriti kui see pole kasutaja viga. Hea lahendus võib olla näiteks illustratsioonide või animatsioonide kujundamine 404 ja 500 lehekülje jaoks.

Olge vormikontrollidega ettevaatlik

Veaseisundite kujundamisel proovige oma kasutajaid mitte häirida. Eelkõige olge ettevaatlik kõikvõimalike vormikontrollide osas.

Kujutage näiteks ette, et teil on kohustuslike väljadega vorm. See tähendab, et arendajatel on vastav kontroll: „Kõik kohustuslikud väljad ei tohiks olla tühjad.” Oletame, et kasutaja proovib vormi täita, kuid juhuslikus järjekorras. Kui esimene nõutav väli kaotab fookuse oleku, tagastab see tõrke: “Palun täitke see väli. See on vajalik! ”

Meie kehv kasutaja hüüatab: „Hoia, tüürimees, klõpsan lihtsalt vormiväljade vahel ja pole isegi klõpsanud nuppu„ Esita ”!” Ja asjad võivad veelgi hullemaks minna. Oletame näiteks, et teil on veel üks kontroll ja nupp „Esita” keelatakse seni, kuni kõik nõutavad väljad pole enam tühjad.

Mõelda vaid korraks. Teie kehv kasutaja ei teinud midagi ega saa vormi saata, kuid olete juba süüdistanud teda mitmetes vigades. See kahjustab kindlasti kedagi, nii et kõige parem on selliseid olukordi vältida.

Kulu ja väärtuse kaalumine

Ärge kuulake arendajaid, kes proovivad teile öelda, et soovitud viisil rakendamine nõuab suuri jõupingutusi. Pidage meeles: selle probleemi vältimine EI maksa klientidele! Keegi ei vaja teenust ega toodet ilma klientideta. Isegi kui seda oli odavalt arendada.

4. Liiga tühjad tühjad olekud

See teema on seotud eelmisega - vea olekutega - ja on seotud ka servajuhtumitega. Tühi olek on absoluutne servajuhtum, nii et peate nende ennetamise ennetavalt mõtlema.

Kuidas teie kasutajaliides välja näeb, kui igal lehel või jaotisel pole andmeid? Kas see on sõbralik või masendav? Kas see näeb hea välja või on see purunenud? Kas kasutajad saavad aru, kus nad asuvad ja mida riik tähendab?

Parim tava on pakkuda kena visuaali, mis sisaldab informatiivset sisu. See võib olla illustratsioon, ikoon või lihtsalt tekstiplokk kena tüpograafiaga, mis olukorda selgitab.

5. Tüpograafiahierarhia puudumine

Järgmisena veel üks teema, mis põhjustab palju disainivigu, mida on parem vältida - tüpograafia.

Tekst on informatiivse sisu peamine üksus. Seetõttu peab see olema loetav, äratuntav ja hästi korraldatud. Õigesti vormindatud tekst hõlbustab kasutajatel teabe tajumist, hoides nad keskendumas sellele, mis on tegelikult oluline.

Fontide ja fondistiilide kasutamine

Fontidega mängimine võib olla lõbus. Kuid kui keegi proovib lugeda midagi, mis muudab lõigus kümme korda fonti, muutub see kiiresti väsitavaks ja tüütuks.

Sellise fondi väsimuse vältimiseks soovitan kasutada ühes paigutuses mitte rohkem kui kolme fonti. Sellegipoolest pidage meeles fontide ja fondistiilide erinevust. Igal fondil on oma stiilikomplekt: tavaline, keskmine, paks, must, kaldkiri, paks kaldkiri jne. Kui ühendate kõik need kirjastiilid suurtähtede ja väiketähtedega, on kaks või kolm fonti enam kui piisavad, et luua atraktiivne tüpograafiasüsteem.

Kerningule tähelepanu pööramine

Tüpograafiale mõeldes ärge unustage kerningut. Kui te pole kunagi varem võrsumisest kuulnud, ärge muretsege; see on väga lihtne. Kerning on tüpograafias protsess, mille käigus tähemärkide vahelist ruumi kohandatakse kas käsitsi või automaatselt.

Kerning on oluline, kuna mõnes olukorras võib märkide vahelise ruumi kohandamine muuta tüpograafia loetavamaks ja silmale meeldivamaks. Kergimise väärkasutamine või sellele mitte eriti tähelepanelik tegemine võib aga põhjustada suuri probleeme. See võib põhjustada vääritõlgendusi või tahtmatult hävitada kujunduse sidususe.

Visuaalse hierarhia säilitamine

Püüa alati oma lehel kirjastiilide vahel visuaalset hierarhiat säilitada. Teksti eri tasandite visuaalseks jaotamiseks ja range hierarhia kehtestamiseks kasutage kontrastset tüpograafiat. Et teabehierarhia oleks lehel selgelt nähtav, peaksid peamised pealkirjad olema lehel kõige silmatorkavamad. Alapead peaksid olema märkimisväärselt väiksemad, kuid siiski selgelt nähtavad.

Sama põhimõte kehtib ka loogilise ploki visuaalse hierarhia korral. Pealkiri peaks olema lehe suurim kujunduselement, millele järgneb väiksem, vähem silmatorkav alapealkiri. Järgmisena peaksid kõik järgnevad funktsioonide pealkirjad olema pealkirjaga võrreldes märgatavalt väiksemad ja sama kaaluga. Funktsioonide kirjeldamiseks tuleks kasutada väikseimaid fonte jne. See visuaalne hierarhia aitab saidi külastajatel eristada rohkem ja vähem olulist teavet.

6. Ebapiisav polsterdus ja vahed

Õige polsterdus ja vahed tagavad teie paigutuse puhta ja korrektse väljanägemise, hõlbustades samal ajal lugejatel teabe lugemist ja mõistmist.

Loogiliste plokkide ümber tuleks seada sama suurusega tühikud (nt üla- ja alaosas ning vasakul ja paremal küljel). Kui tühikud on ebaühtlased, näib teie leht räpane ja kasutajad ei pruugi kõiki jaotisi võrdselt arvesse võtta.

Liiga väike polster tähendab, et kasutajad ei saa sisu loogilisteks plokkideks jagada. Loogiliste osade segunemise vältimiseks hoidke neid eraldi ja sisestage nende vahele suur tühik.

Visuaalse hierarhia säilitamiseks on lihtne järgida seda lihtsat reeglit: Erinevate loogiliste plokkide vaheline polster peaks olema suurem kui iga ploki pealkirja ja teksti vaheline polster. Näiteks oletagem, et teil on pikk tekstiplokk, mis sisaldab pealkirju, alapealkirju ja lõike:

  • Seadke pealkirja polstri alaosa 40 piksli suuruseks ja järgige seda teksti lõiguga.
  • Seadke lõigu polstri alaosa 10 pikslile.
  • Kui lõigu järel on alapealkiri, siis andke sellele 30 pikslit polsterduse jaoks (st lõigu ja alaosa ülaosa vahe on 30 pikslit) ja 20 pikslit polstri põhja jaoks (st alam alaosa ja lõigu vahe on 20 pikslit, mis on suurem kui lõigete vaheline tühik).

See paneb soovitud rõhu kõige olulisematele ja suurimatele elementidele. Suurima teksti - pealkirja - ümber on suurem ruum. Kuid see ruum peaks olema lähemal seotud elementidele, mis seda järgivad.

7. Segane ikonograafia

Ikoonid on uskumatult kasulikud, kui peate tähendust väljendama väikese sümboli kaudu või kirjeldust lühidalt illustreerima. Need on ka moodsate liideste oluline osa, eriti mobiilis.

Rakendustes on ikoonid sageli samaväärsed nuppudega. Vaadake lihtsalt Instagrami: näete ainult ikoone ja teksti.

Sellepärast on väga oluline valida õige visuaalne pilt, mis vastaks elemendi tähendusele. Kõlab lihtsalt, eks? Ei. Iga maailma disainer teab, kui valus võib olla täpselt õige ikooni leidmine.

Peate lugu rääkima, kasutades väga lihtsaid ja tavalisi pilte, mis on kõigile arusaadavad. Ja peate need ikoonid vastama kasutajaliidese üldisele stiilile. Seejärel peate need edastama arendajatele SVG-vormingus.

Võib-olla olete otsinud tasuta ikoone ja olnud elevil, kui leidsite iga elemendi jaoks kena pildi. Arvate, kui ideaalselt nad üksteisega vastavad! Need on kõigile arusaadavad! Kahjuks tundub valitud ikoonikomplekti üldmulje üsna räpane ja tüütu. Kuidas saab sellist jama vältida? Siin on teile lühike kontrollnimekiri:

  • Joone laius - pärast suuruse muutmist peaks kõigil teie ikoonidel olema võrdne joone laius. Muidu on väga märgatav, et nad seda ei tee.
  • Nurgaraadius - kui teie ikoonid sisaldavad mõnda ristkülikukujulist kuju, võrrelge iga komplekti ikooni nurgaraadiust. Kui see erineb erinevate ikoonide puhul, siis parem lahendada.
  • Joonkorgi kuju (visandatud ikoonide jaoks) - see võib olla ristkülikukujuline või ümardatud.
  • Nurgad liiguvad kujuga (visandatud ikoonide jaoks) - see võib olla ristkülikukujuline või ümardatud.

On tõsi, et kogenematud kasutajad ei pruugi erinevat joonelaiust või nurgaraadiust konkreetselt märgata. Üldine mulje on siiski vale ja kasutajad tunnevad seda.

Teisisõnu, kuigi tasuta ikoonide kasutamine pole vale, on kõige parem liikuda nende poole. Tasuta ikoonide kasutamine muudab projekti odavaks ja mõnel juhul ebaprofessionaalseks. Lisaks on seal palju tasuta ikoone, mida inimesed tunnevad kohe ära. Miks? Nad on juba näinud, kuidas neid kõikjal kasutatakse.

Sellepärast on minu nõuanne olla rangelt valiv tasuta ikoonidega või - veelgi parem - kujundada ikoone ise. Kohandatud ikoonid pakuvad alati parimat kogemust.

8. Madal kontrastsus

Kontrast graafilise disaini aluspõhimõttele. Meie silmadele meeldib kontrast. Kontrastsus on instrument, mida disainerid kasutavad kasutajate tähelepanu juhtimiseks.

Kontrastsus ilmneb siis, kui lehe kaks elementi on erinevad. Näiteks võib kontrast tekkida teksti ja taustvärvi erinevate värvide kasutamisest. See võib olla pealkirjakomplekt suures, paksus ja õrnas kirjas, mida kasutatakse põhiteksti elegantse sans-serif-fondi kõrval. See võib olla erinevus suure graafika ja väikese graafika vahel, või võib see olla töötlemata ja ühtlase tekstuuriga tekstuur.

Kontrastsuse juures on oluline see, et kontrastsed elemendid peaksid olema täiesti erinevad. Pole just pisut erinev - märgatav, julge erinevus.

Valge ruumi kasutamine

Kui aga asetate kaks täiesti erinevat elementi üksteisele väga lähedale, ei saa kasutaja aru, mis element on „peamine”. Sellepärast võime öelda, et kontrast ei tähenda ainult erinevate visuaalsete stiilide rakendamist elementidele, vaid ka valge ruumi kasutamise kunsti. Selle põhjuseks on asjaolu, et mõnikord tuleb elementide kontrastsuse saavutamiseks eraldada need tühja kohaga.

Valge ruum on oluline, et muuta teie sisu kasutajatele hõlpsaks. Muidugi võib valget ruumi valesti kasutada: kui teil on liiga palju tühja ruumi või siis on liiga palju sisu väiksele alale pritsitud. Ka paljudel ülemäärase reklaamiga veebisaitidel puudub piisavalt vaba ruumi.

Teksti ja pildi piisava kontrasti tagamine

Vältige pildile paigutatud tekstikoopia puhul madalat kontrasti. Teksti ja tausta vahel peaks olema piisavalt kontrasti. Koopia silmapaistvamaks muutmiseks asetage pildi peale kontrastne filter. Must on populaarne värv, kuid võite kasutada ka erksaid värve, neid segades ja sobitades.

Teine võimalus on kasutada kontrastset pilti algusest peale. Sel juhul saate koopia paigutada foto või pildi tumeda osa kohale.

Kontrasti üleannustamise vältimine

Vältige ühel lehel liiga paljude stiilide kasutamist. Ühel lehel on liiga palju tüpograafilisi ja kujundusstiile, mis muudavad selle ebaprofessionaalseks ja muudavad selle raskesti loetavaks. Selle vältimiseks piirduge ühe fondi ja kahe küllastusvõimalusega (nt tavaline ja paks).

Vältige kitsaste leheelementide rõhutamist värviga. See ei tundu lihtsalt hea. Näiteks on pealkirjad tänu oma suurusele, tüübiküllastusele ja polstritele juba hästi tähistatud. Kas soovite esile tuua konkreetse lehe punkti? Kasutage kogu ploki jaoks värvilist tausta, sealhulgas seotud pealkirja ja tekstikoopiat.

9. Platvormide üle mõtlemata jätmine

Jah, ideaaljuhul ei peaks see enam tänapäeva maailmas probleeme olema. Me kõik teame, et enamik kasutajaid pääseb veebiteenustele juurde mobiilseadmete kaudu. Kahjuks kipuvad paljud disainerid seda fakti endiselt unustama. (Või on asi võib-olla selles, et kliendid ei taha mobiilile optimeeritud kujunduste loomiseks raha kokku nõuda?)

Disainiprofessionaalide jaoks ei tohiks aga mitme seadme jaoks optimeerimise probleem ilmneda. Kasutajaliidese loomisel peaksite alati meeles pidama laialt levinud lähenemisviisi “kõigepealt mobiil”. Keskenduge sisule, mida igat tüüpi kasutajad igal lehel näevad. Seejärel küsige endalt: "Kas selle konkreetse sisu kuvamiseks valisin UI-juhtelemendi või mitte?"

Võite valida kena kasutajaliidese elemendi, mis töötab suurepäraselt ka lauaarvuti seadmetes - kuid nutitelefonide kasutajatele ei sobi see suurepäraselt. Või vastupidi. Sellepärast on oluline alati meeles pidada mitmesuguseid seadmeid, mida peame tänapäeval kujundama.

10. Liiga palju disaini

See, et saate oma kujundusele midagi lisada, ei tähenda veel, et peaksite. Lihtsus pakub palju eeliseid. Nii et olge stiilidega hullumeelsed. Kuigi üleprojekteerimine pole suur viga, võib see põhjustada tõsiseid probleeme.

Näiteks on segane liiga paljude värvide kasutamine lehel; jääb ebaselgeks, millised bitid on olulisemad. Piisab ühest või kahest värvist, et visuaalselt esile tõsta seda, mis on tegelikult oluline.

Sama võib öelda ka fondi stiilide kohta. Piisab pealkirjade ja alapealkirjade rõhutamisest ning võtmefraaside kontrasti kasutamisest.

Mida rohkem "kraami" oma kavandisse sisse mahub, seda raskemini peab kasutaja mõtlema, et tema esitatud teave välja tõmmata. Kujundus peab hingama ja elama omaette. Nii et pidage meeles: tühja ruumi olemasolu pole tingimata halb. Paljudel juhtudel on see parem kui tühja ruumi iga ruut tolli täitmine.

Kas teie kujunduses on vigu, mis vajavad parandamist? Anna meile teada! Meie tipptasemel disainimeeskond aitab teil vältida kujunduslikku hullu, suheldes selgemalt ja kaunilt.

Autori kohta

UI / UX vanemdisainer Maria Pisarenko liitus Distilleryga 2018. aastal. Ta toob üle 6-aastase projekteerimiskogemuse ja on ehitanud lugematuid liideseid klientidele kogu maailmas. Maria kirgedeks on ikonograafia, tüpograafia ja illustratsioon; ta usub, et disainil on maailma paremaks muutmisel võtmeroll.