Kako stvoriti prototip stranica za razvoj stranice tako da se izvođači ne prilagode

Nastavljamo pisati o UX / UI-u. Ovaj put članak govori o tome kako stvoriti prototipsku stranicu kako bi vam olakšao život.

Izrada prototipa stranice je promišljanje sadržaja i izgleda važnih elemenata stranice. Kao što su:

  • navigaciju;
  • kontaktne informacije;
  • Elementi CTA;
  • sadržaj;
  • logotipi;
  • heder (zaglavlje stranice);
  • podnožje (podrum) i tako dalje;

Stvaranjem prototipa stranice unaprijed možete olakšati zadatak svima koji su uključeni u kreiranje i popunjavanje stranice. To je, dizajneri, copywriters, coders, programeri, i tako dalje.

Ovaj je članak namijenjen korisnicima koji žele ispravno izraditi opis uvjeta razvoja web-lokacije. Tehničke nijanse o razvoju prototipa, pročitajte vodič "Kako napraviti prototip u Axure RP, ako ne razumijete ništa o tome."

Što je stvaranje prototipa

Osim što pojednostavljuje stvaranje stranica, izrada prototipa pomaže korisnicima da bolje žive. To jest, da biste dodali nešto korisno ili uklonili nešto nepotrebno, kako biste olakšali kretanje po stranici, pronašli potrebne informacije i riješili problem.

Pretpostavimo da korisnik želi pronaći odgovor na pitanje. On pokreće pitanje u tražilicu i prati vezu na vašu web-lokaciju. Onda očekuje da vidi nešto ovako:

On očekuje da će vidjeti nešto slično, jer je navikao na to da web stranice izgledaju ovako. To se podudara s njegovim korisničkim iskustvom.

Korisničko iskustvo (UX - Iskustvo korisnika) iskustvo je koje se nakupilo prije ili nakon što je osoba koristila vaše sučelje. Korisnik će tražiti potrebne elemente na temelju njihovog iskustva.

To jest, mi, znajući kakvo iskustvo korisnik ima, može im olakšati pronalaženje rješenja za svoj problem. Primjerice, vlasnici mobilnih telefona navikli su na to da se izbornik otvara kada kliknete na gumb "hamburger" u gornjem lijevom kutu. Ako ovaj gumb nije prisutan, korisnik se može zbuniti.

Istovremeno, osoba iza monitora računala očekuje da će moći vidjeti izbornik u zaglavlju ili bočnoj traci (sidebar). On ne očekuje da se izbornik otvori pritiskom na gumb. Naprotiv, to mu je nezgodno, jer će morati napraviti još jedan tisak.

To jest, ako je pravi pristup korisnicima s različitim iskustvima, možete im pomoći da riješe svoje probleme.

No, koliko god to čudno zvučalo, rješenje zadataka korisnika nije prioritet u fazi izrade prototipa. Da, važno je da posjetitelj može udobno riješiti svoj problem, ali mnogo je važnije da vlasnik ove stranice riješi svoj zadatak.

Pogledajmo ovo pomoću TexTerra web stranice kao primjer (opet). Ciljana publika stranice je marketinška tvrtka i poslovni ljudi. Za njih je isplativije naučiti kako nešto samostalno raditi, a da ih uvjerimo da naruče naše usluge.

Obično korisnik unosi blog iz rezultata pretraživanja ili iz pretraživačkih mreža. On klikne na vezu i odlazi izravno na stranicu s člankom o temi koja ga zanima. Kada dobije prave informacije o ovoj temi, najvjerojatnije će otići.

To nije isplativo za nas, jer se autorske naknade moraju vratiti. Umjesto toga, želimo da korisnik ostane na web-lokaciji što je duže moguće. Uostalom, što će duže biti na stranicama, više će biti uvjeren u našu profesionalnost i što će radije od nas zatražiti neku uslugu. Na primjer, naručit će dizajn uzimajući u obzir korisničko iskustvo svoje publike.

Da bi ga odgodili na stranici, dodamo link, “Read also” ili “By the way” bočne trake, mogućnost komentiranja, on-line savjetnik, blok “Read also” nakon samog članka, koji odabire materijale o interesima korisnika i drugim elementima.

Sve to pomaže odgoditi čitatelje, čak i ako su već pronašli odgovor na svoje pitanje.

Ali ovdje je potrebno odmah uočiti vrlo važnu točku - ne prisiljavamo nikoga:

  • Nema poziva na svaka 2 stavka.
  • Nema skripti koje ne dopuštaju napuštanje stranice.
  • Ništa što bi spriječilo korisnika da riješi problem ili sam pronađe odgovor na pitanje.

Ako ćete učiniti sve da riješite svoje probleme, nakon što ste pljunuli na zadatke korisnika, dobit ćete negativnu reakciju.

Kako stvoriti prototip

Prvo možete imati pitanje o tome što koristiti za izradu prototipa. Odgovor je vrlo jednostavan - sve. Bilo koji program koji vam omogućuje crtanje. To mogu biti Adobe Photoshop, MS Paint, Adobe Illustrator, Gimp i drugi. Možete koristiti MS Word ili Google.Docs.

Profesionalci koriste programe kao što je Axure, ali s njime možete rukovati s papirnatom bilježnicom. Razlika je u čemu stvarate prototip. Na primjer, dizajner može izraditi prototip na komadu papira. Ako to učini uredno, bit će moguće napraviti stranicu na rasporedu.

No, copywriter, stvarajući prototip slijetanja, trebao bi to učiniti u programu, iz kojeg će biti moguće kopirati tekst u sastavljene elemente. Budući da copywriter koristi pravi tekst, a dizajner, najvjerojatnije, će umetnuti lorem ipsum.

Tada možete izravno nastaviti s izradom izgleda. Možete početi s naslovne stranice, ali nije važno. Prvo su izvučeni važni elementi, a zatim manje važni. Malo se stvari mogu izostaviti.

Prvo morate stvoriti zaglavlje stranice. Može biti:

  • logo;
  • kontaktne informacije;
  • CTA gumb;
  • obrazac za pretraživanje;
  • gumb za povratne informacije i tako dalje.

Zatim slijedi dio sadržaja i bočna traka (ako postoje). Sidebar može sadržavati:

  • obrazac za autorizaciju;
  • poveznice na korisne materijale ili društvene mreže;
  • brojila;
  • chat i tako dalje.

Nedavno se bočne trake rijetko koriste za izradu web-lokacija. Ali to ne znači da više nisu potrebni - to ovisi o određenoj lokaciji i njezinoj svrsi. Društvene mreže kao što su VKontakte i Facebook još uvijek imaju svoje bočne trake.

[Webinar snimanje] Kako prototip web stranice: UX osnove

Sadržaj dijela sadržaja, za razliku od zaglavlja, podnožja i bočne trake, može se uvelike razlikovati na različitim stranicama. Mogu postojati:

  • kategorije robe;
  • karte robe;
  • popis materijala;
  • portfelja;
  • članak;
  • kartica;
  • mišljenja;
  • fotografije i još mnogo toga.

Ponekad u sadržaju dio može biti sve odjednom. Na primjer, na stranici proizvoda mogu biti fotografije, recenzije, kartice za isporuku i srodni proizvodi - sve to će uvjeriti osobu da kupi sam proizvod i njegovu dodatnu opremu.

Zatim se projicira ciljna jedinica. Može sadržavati drugi CTA gumb ili obrazac.

Posljednji koji stvara prototip podnožja (podrumski prostor). Obično sadrži dodatnu navigaciju, detalje, autorska prava, logotip i tako dalje.

Radi lakšeg snalaženja, svi blokovi i elementi mogu se podijeliti u 3 vrste: informativni, funkcionalni i navigacijski.

Informativni elementi daju korisniku odgovor na pitanje. Nije važno hoće li to tražiti ili ne. Na primjer, korisnik rijetko postavlja pitanje o pravilima o privatnosti web-lokacije. Ali ako jest, razina povjerenja će porasti.

Funkcionalni elementi pomažu u izvođenju nekog zadatka. Na primjer, registrirajte se, pretplatite se na newsletter, naručite, kontaktirajte konzultanta i tako dalje.

Navigacijski elementi su potrebni kako bi se korisnik mogao kretati od stranice do stranice, a također i razumjeti gdje se on nalazi. To mogu biti jednostavne stavke izbornika i svi ostali elementi.

Preporučljivo je uvijek koristiti neke navigacijske elemente. Na primjer, ne samo stavke izbornika, nego i brojevi stranica ili gumb "gore":

Ako se stranica sastoji od jedne stranice (slijetanje), tada se korisnik mora i dalje kretati. Na primjer, možete usmjeriti korisnike pomoću pokaznih elemenata - strelica, indeksnih prstiju, očiju i tako dalje:

Ako je slijetanje veliko, onda bi bilo lijepo pokazati korisniku točno gdje se on nalazi. Posebno često se ova tehnika koristi na slijetanju, gdje se pomicanje odvija odmah preko zaslona:

Pošaljite korisnika na mjesto gdje može izvršiti ciljanu radnju: na obrazac, gumb, kontaktne informacije i tako dalje. Ali, u isto vrijeme, on mora imati potpunu slobodu. Kao što je već spomenuto, ne biste ga trebali spriječiti da čini ono što želi. Čak i ako želiš još jedno od njega.

Opći stil

Sada možete govoriti o stilu. Ona bi trebala biti zajednička svim elementima - bojama, oblicima i tako dalje. Nemojte raditi previše apstraktnog dizajna s mnogo trokuta, elipse, cilindara i tako dalje. Dovoljno je ograničiti nekoliko oblika i boja.

Poželjno je da je raspored uredan, a elementi su simetrični po veličini i lokaciji. Također moraju biti zatvoreni. To znači da ako imate blok, on mora biti ograđen sa svih strana.

Otvoreni element izgleda nepotpun, tako da osoba može imati osjećaj nepotpunosti. Ako je tražio neke informacije na vašoj web-lokaciji, a snimljen je u takvom bloku, vrlo je vjerojatno da će korisnik nastaviti s pretraživanjem na drugim web-lokacijama.

Također, sučelje bi trebalo biti svugdje isto. Ako osoba ode na drugu stranicu web-lokacije, a bit će izmijenjeno sučelje, možda će pomisliti da je došao na drugu stranicu.

Ali to se odnosi i na sučelje na istoj stranici - svi linkovi, polja, komentari i drugi elementi trebaju biti dizajnirani na isti način. To će dati osjećaj integriteta i cjelovitosti.

Koristite kratke tekstove i male slike kako ne biste preopterećivali korisnika informacijama. A ako imate mnogo elemenata iste vrste, onda ih treba grupirati u nekoliko dijelova (od 3 do 7) i smjestiti u različite dijelove stranice.

Informacije iz sustava i korisničkog iskustva

Najvažnija stvar je zadnja. Glavno pravilo stvaranja korisničkih sučelja je da se korisnik ne osjeća kao idiot. On mora razumjeti gdje je, što radi i kako učiniti nešto drugo.

I to mora razumjeti intuitivno. Vratimo se na primjer gumba hamburgera. Svi korisnici mobilnih uređaja navikli su se na ovaj gumb i znaju što radi. Stoga, nakon što je vidio nešto slično, korisnik će odmah razumjeti za što je ovaj element.

Isto vrijedi i za ostale elemente stranice. Ako koristite zajednički prikaz, posjetitelj će se lakše kretati:

  • Vidjevši ikonu povećala, osoba će shvatiti da će, kada se pritisne, otvoriti polje za unos upita za pretraživanje.
  • Ako se povećalo pojavi kada prelazite preko slike, može se povećati.
  • Plavi natpis se smatra poveznicom. Zbog toga se, usput rečeno, ne preporučuje korištenje podcrtanog teksta.
  • Ako se element promijeni kada prelazite, možete kliknuti na njega. Pokazivač se također treba mijenjati - iz "strelice" treba se pretvoriti u "kažiprst".
  • Klikom na ikonu male zastavice možete promijeniti jezik.
  • Gumb "Kupi" znači da se proizvod može naručiti.

Ovo su samo neke od točaka koje se mogu naći u gotovo svakom sučelju. Korisnik ih se sjeća i, gledajući ih na drugim mjestima, osjeća se ugodno, jer zna što treba učiniti.

Moramo predvidjeti što predstavnik Središnje Azije treba učiniti i kako će pokušati riješiti svoj problem. Na temelju toga možete stvoriti sučelje koje će biti prikladno općenito, ali i što je moguće prikladnije za našu publiku.

Međutim, ne treba misliti da će osoba sama pogoditi sve - treba ga informirati. Svi važni elementi trebaju biti vidljivi, a ne u memoriji. A to se odnosi ne samo na položaj na stranici, već i na status korisnika, njegovu narudžbu i tako dalje.

Vrlo je važno, na primjer, pokazati koji je korak popunjavanja obrasca u kojem je korisnik. Trebao bi se moći vratiti na bilo koji korak kako bi provjerio ili promijenio podatke. A kada završi s punjenjem, morate mu ponovno pružiti informacije za provjeru i tek onda nastaviti s plaćanjem. Ako sve to date korisniku, on će biti mirniji kada popuni obrazac, a vjerojatnost da će se predomisliti smanjit će se.

Pomoću informacija možete zatvoriti mnoge primjedbe. Zamislite da naručite jaknu u internetskoj trgovini. Koju veličinu odabrati? Što ako ne znate svoju težinu, svoju visinu ili druge dimenzije vašeg tijela? Ako niste informirani kako odabrati pravu veličinu, najvjerojatnije ćete otići u običnu trgovinu da mirno isprobate nekoliko jakni i kupite odjeću odgovarajuće veličine.

Sada zamislite da stranica ima upute o tome kako odrediti veličinu, kao i fotografije jakne na ljudima različitih oblika. Štoviše, ova uputa je vidljivo prikazana. Odluka o kupnji bit će lakša, ali ostaje sumnja u to jeste li napravili pravi izbor ili ne.

Ovdje možete besplatno ponuditi povratak odjeće ako se veličina ne uklapa, ili možete dodati online prostoriju za postavljanje na stranicu. Ako vjerujete u AstraFit, onda njihov widget pomaže smanjiti broj povrataka za 48%.

To jest, stvaranje prototipa ne samo da pomaže poboljšati interakciju korisnika sa stranicom, već i povećati prodaju. Jer neki elementi mogu dati upravo informacije koje su potrebne za zatvaranje nekih prigovora.

Istovremeno, neki dijelovi web-lokacije mogu pokvariti korisničko iskustvo i uništiti konverziju:

  • nedostatak prilagodljivog rasporeda;
  • dugo opterećenje;
  • sitni tisak;
  • horizontalno pomicanje i tako dalje.

Detaljniji popis korisnih i štetnih elemenata na stranici možete naći u članku Lily Golikova "Kontrolni popis upotrebljivosti: 200 + bodova za provjeru".

zaključak

Važno je zapamtiti za što stvarate prototip - riješiti problem korisnika i vlasnika sučelja. Ovaj pristup pomoći će vam da povećate pretvorbu. Ali za to trebate shvatiti da je često odluka potpuno očigledna.

Postoje vrlo mali detalji koji se mogu pokazati prilično beznačajnim, ali je vrlo važno da ljudi udobno koriste sučelje. Preporučujem čitanje članka Dmitry Dementia "Što je UX i UI i zašto UX-dizajneri ne postoje" kako bi razumjeli što su UX i UI, kako poboljšati korisničko iskustvo u fazi postavljanja i još mnogo toga.

Također bih vam savjetovao da uvijek razmislite o tome kako bi vam bilo lakše nešto učiniti, koja pitanja obično postavljate kada odete na web stranicu. Ali iznad svega, trebali biste biti zainteresirani za to kako se ciljna publika ponaša i što želi.

I slobodno budite inovatori! Napravite jedinstvene elemente koji će vam pomoći poboljšati korisničko iskustvo. Dodajte nove widgete, ali ne zaboravite obavijestiti posjetitelje o tome kako ih koristiti. Može biti bilo što:

  • dizajnerske gitare;
  • dizajner pizza;
  • logistički tetris;
  • upute za sastavljanje namještaja s proširenom stvarnošću;
  • vodič za češljanje buha u VR;
  • genealoški online kalkulator;
  • Simulator "100 + načina za let u jarku" na web stranici osiguravajućeg društva.

I to na prvi pogled izgleda glupo, ali čak i od takvih ideja možete dobiti pozitivan rezultat.

Pogledajte videozapis: prototip konacnog izgleda web stranice (Listopad 2019).

Ostavite Komentar