Hönnun = tilfinningar + nothæfi
Þó að fínn list sé huglæg, þá er grafísk hönnun hönnuð í grundvallaratriðum. Skilvirk hönnun ætti að gera fólki kleift að fylgjast með ákveðnum hætti og taka ákveðna aðgerð . Í þessari grein vil ég deila Gravity Switch meginreglur vefhönnunar og hugsun okkar á bak við þá.
Þessar reglur eru: skilgreindu markmið fyrst; einblína á notendur annað; hönnun fyrir tilfinningar; fylgdu reglum sjónrænna hönnun; byggja upp skýr, sjónrænt stigveldi; vera í samræmi; brjóta reglurnar (þegar nauðsyn krefur); ekki ofnotkun gimmicks; og að lokum prófa, mæla og bæta.
1. Skilgreina markmið fyrst
Ég veðja að þú hélt að ég ætlaði að segja "áherslu á notendur fyrst", það er það mestfólksegðu. Gleymdu því, við skulum byrja á markmiðum þínum. Byrjaðu á öllum vefhönnunarverkefnum með brainstorming fundi sem lýsir skýrum, raunhæfum vefsíðum sem styrkja markmið fyrirtækisins .
Til að sýna betur þetta skulum við líta á Amazon. Markmið þeirra er að hámarka vörusölu. Með "upselling" og "cross-selling" þeir geta hámarkað kaupmátt hvers notanda en til að ná árangri í þessu hægja þeir á kaupferlinu. Ólíkt mörgum keppinautum sínum, hefur Amazon ekki "kaupa núna" hnappinn í leitarniðurstöðum sínum. Notendur verða að heimsækja eina síðu (með hugsanlegum upsells) áður en þeir kaupa. Þetta er fullkomið dæmi um hvernig síða hönnun getur mætt skýrum markmiðum.
Flestar nútíma ecommerce síður hafa fjarlægt "kaupa núna" hnappinn frá leitarniðurstöðum þeirra, þótt sumir múrsteinn og steypuhræra verslunum enn hafa það.
2. Leggðu áherslu á notendur annað
Með skýrum markmiðum þínum í huga, þá þarftu að skilgreina og forgangsraða notendum . Vertu eins nákvæm og mögulegt er. Nokkur dæmi um spurningar til að spyrja eru:
- Karlkyns vs kvenna sundurliðun?
- Menntun stigi?
- Staðsetningar í landi?
- Tengd áhugamál?
- Tekjur krappi?
- Hver er að keyra vörukaup barna? Krakkar? Foreldrar? Afi og amma?
Lykilatriðið er að hönnuðir ættu að vera meðvitaðir um notendur svo að þeir geti tryggt að hönnun þeirra taki ekki til notkunarleiða.
3. Hönnun fyrir tilfinningar
Vertu viss um að þú skiljir hvaða tilfinningar vörumerkið þitt ætti að bjóða . Brainstorm. Spyrja spurninga. Fá samkomulag. Og hugsanlega síðast en ekki síst, einbeittu þér að þessum tilfinningum þegar þú sendir til viðskiptavina þinna. Aldrei spyrja hvort viðskiptavinurinn þinn "líki" við hönnun. Þegar þú sendir hönnun, ættir þú að staðsetja spurningar eins og "Hver af þessum gerir þér líða mest faglega?" Eða "Þegar þú samanstendur af þessum tveimur hönnunum, munt þú sjá að þetta er nútímalegra, en þessi er öflugri. Þeir voru bæði tilfinningar sem voru mikilvægir fyrir þig, nú þegar þú sérð þau sjónrænt, sem finnst þér mikilvægasta tilfinningin fyrir þig að kynna fyrir markhópinn þinn? "
Hvaða þessara stofnana eru skemmtilegir? Afslappandi? Nýjunga? Upptekinn? Real? (Hönnun með @JessicaShiner og Christine Mark)
4. Fylgdu reglum sjónrænna hönnun
Það eru margar litlir þættir sem vefsíðanotendur meðvitað og ómeðvitað nota til að ákveða hvort þeir ætla að treysta á vefsíðu. Mikilvægustu eru:
- Cropping: Að velja myndir er aðeins helmingur bardaga, cropping myndir er það sem gerir eða brýtur síðu skipulag.
- Neikvætt pláss: Gæta skal varúðar við margar, púði og línuhæð er munurinn á að líta út eins og New York Times vs. háskólafréttabréf.
- Skírnarfontur: Allir elska að velja letur, en frábær hönnuður getur flett fagleg letur fljótt og hefur takmarkaðan hátt til að halda fjölda letur á vefsíðunni í 1-2 (ekki telja lógóið sem er oft eigin leturgerð).
- Litir: Litir eru einn af erfiðustu hlutum fyrir hönnuði að nota á áhrifaríkan hátt. Það eru svo mörg reglur að velja góða litaval, og á meðan það er freistandi að nota á netinu litavali rafala , eyða tíma til að hanna eigin litaspjald.
- Skipulag: Búðu til góða sjónræna síðu "flæði" þannig að augun notandans fara þar sem þú vilt að þeir fara á síðu án þess að aðrir þættir skýrast sjónrænt markmiðum þínum.
5. Byggja upp skýr, sjónrænt stigveldi
Vefsíður gestir skimma. Þeir lesa ekki. Gakktu athygli þeirra og fáðu þær mikilvægustu upplýsingar með greinilega, vel hugsaðri sjónrænu stigveldi . Vel hugsuð hönnun - síða> síða> hluti - leiðir notandann í gegnum síðuna eins og þú vilt. Notendur ættu að geta litið á síðuna þína og skiljið það í lok annars.
Horfðu á eftirfarandi dæmi um grein og athugaðu hvernig það er erfitt fyrir augað að segja frá því hvað síðunni er um eða hvar greinin hefst!
Hér að neðan er mockup sem ég gerði með því að breyta um tugi línur af CSS til að búa til skýrari sjónræna stigveldi á þessari síðu á eftirfarandi hátt:
- Titill greinarinnar ætti að vera mest áberandi þátturinn á síðunni. Það er nú minni leturstærð en fyrirsögnin lengra niður á síðunni! Svo ég aukið stærð hlutar titilsins og minnkaði stærð fyrirsagnirnar.
- Fyrirsögnin lengra niður á síðunni var líka ótengdur frá efninu sem það var ásýnd fyrir sjónrænt, þannig að ég hélt einnig upp bilið fyrir neðan fyrirsögnina en yfirgefa plássið fyrir ofan fyrirsögnina til að láta notendur vita að það er fyrirsögn fyrir málsgreinina hér að neðan .
- Ég flutti líka litlu myndinni til hægri á titlinum í stað vinstri þannig að þegar notandi skannar niður vinstra megin við hliðina til að stefna sér er hlutaritillinn í sýn sinni.
- Ég eyddi landamærunum og bakgrunni á bláum blurb svo það keppir ekki lengur við fyrirsögnina og fjarlægði efstu mörkin. Það var þegar flokkur til að gera það grátt, sem virkar vel í þessu tilfelli.
- Ég fjarlægði líka truflandi texta og mynd sem vekur athygli á því að þetta sé endurtekningartilkynning ásamt nokkrum tómum málsgreinum og
tags.
Ég skilst af ásetningi öllum auglýsingum eins og þau voru upphaflega dulmáli, að því gefnu að það sé mikilvægur hluti þessarar síðu.
6. Vertu í samræmi
Ekki rugla notendum þínum. Tenglar ættu að vera í samræmi og áberandi. Ættir þú að velja að nota tákn, myndir og myndir í gegn ganga úr skugga um að þær líta út og líða eins og þau tilheyra samhengi. Ósamræmi mun afvegaleiða notandann og hylja skilaboðin þín. Ekki nota meira en 3 leturgerðir - það er best ef þeir eru allir í sömu fjölskyldu. Takmarkaðu þig við 5-6 liti (Athugaðu: merki getur verið annað letur, og oft ætti að vera).
7. Brotið reglurnar (þegar nauðsyn krefur)
Ef eitthvað er sérstaklega einstakt eða mikilvægt sem þú þarft að leggja áherslu á, gætir þú þurft að "brjóta reglurnar." Þú getur notað eina eða tvær andstæður liti til að hjálpa þátturinn standa út. Til dæmis leggur breska vefsíðan hér að neðan áherslu á skatthlutfallið með því að gera þetta stærra frumefni með poppi af lit.
Þegar fólk heimsækir upplýsingasíðuna um VSK skattur, Hönnuðir GOV.UK gættu þess að upplýsingarnar sem flestir þurfa er að framan og miðju.
8. Ekki nota ofnotkun
Gerðu hönnunina skemmtileg, en vertu viss um að þættirnir styðja það sem þú ert að reyna að ná á síðunni. Til dæmis Inze síða er fallegt að líta á og dásamlegt á farsímanum en þegar ég heimsótti það á tölvunni minni var ég týndur. Það kemur í ljós að leiðsögnin er falin þangað til þú byrjar að fletta sem því miður tóku augun á botn síðunnar. Þar af leiðandi sá ég ekki einu sinni að lúmskur leiðsögnin birtist efst. Ég skaut mest af leiðinni til botns áður en ég vissi að það var (að lokum) siglingar efst. The "falinn" flakk er snyrtilegur áhrif, en "hönnunin" hindraði mig frá því að gera viðeigandi aðgerð. Í the endir, það miðlar ruglingslegt, sloppy vörumerki mynd.
Bera saman Inze við það sem gerist rétt í þessari grein hér að neðan Vefur Hönnuður Depot þegar þú rúlla yfir tengil á skjáborðinu þínu. Við höfum snyrtilegur áhrif en það skapar ekki "hindrun" fyrir notendur fyrir sakir brella. Það niðurbrotnar einnig tignarlegt svo það muni ekki brjóta á farsíma eða eldri vafra.
9. Próf. Mál. Bæta
Websites þróast. Hönnun fyrir sveigjanleika og aðlögunarhæfni. Að safna og greina áframhaldandi prófgögn mun keyra stöðug framför. Mundu að það snýst allt um að búa til hönnun sem uppfyllir markmiðin þín.
Með því að mæla vandlega niðurstöðurnar af röð minniháttar breytinga á hönnun á upprunalegu áfangasíðunni (til vinstri) komumst við með nýjan hönnun (hægri) sem jókst prósentan með 60%!
Mundu
Skilvirk grafísk hönnun þarf að tengja tilfinningalega notandann við vörumerkið en á sama tíma fá þá til að gera það sem þú vilt. Það er hægt að gera.
Ertu sammála þessum reglum um hönnun? Viltu bæta við meira? Láttu okkur vita af skoðunum þínum í athugasemdum.