Okviri na mreži 101: Vodič za početnike

Autor Meghna Hazarani, UX analitičar u Red Blue Blur Ideas (RBBi)

Shvatite osnove i postupak Wireframinga i naučite više o tome kako je dobar žičani okvir neophodan za besprijekorno korisničko iskustvo.

Prije nego što započnem prepirku o nekoj temi, mnogi možda nisu svjesni - napravite korak unatrag i recite mi: koliko ste web mjesta posjetili prije nego što ste posjetili članak? Jeste li samo provjerili ažuriranja na Facebooku? Jeste li pregledavali smiješne videozapise s mačkama na YouTubeu dok ste trebali raditi? Recimo da Facebook nema kućni feed i morali ste ručno kliknuti imena svih prijatelja da biste vidjeli njihova ažuriranja. Ili, recimo, YouTube videozapis koji gledate ne prikazuje prijedloge sličnih videozapisa, tako da morate pregledavati sve stranice u rezultatima pretraživanja, nadajući se da jedna od sličica ima sličan video mačak. Zvuči zamorno? Pa, ne brinite, digitalni superheroji su ovdje kako bi vas spasili od ove sudbine. Mislim na profesionalce za UX (User Experience): ljude koji slijede određeni postupak za izradu web lokacija prilagođenih korisnicima. Ako bih objasnio laički, ovi UX profesionalci slijede postupak dizajniranja UX-a kako bi osigurali optimalnu izvedbu web stranice tako da su prilagođeni korisnicima, intuitivni i korisni, kao i poboljšavajući konverzije ili povećavajući zadržavanje klijenata. Ukratko, trebao bi biti "lak za korištenje". Proces dizajniranja UX-a sastoji se od više faza, ali u ovom ćemo se članku koncentrirati na samo jednu od tih faza, a to je wireframing.

Dakle, što je žičani okvir?

Žični okvir se može definirati kao "slika ili skup slika koji prikazuju funkcionalne elemente web stranice ili stranice, obično se koriste za planiranje strukture i funkcionalnosti web lokacije" - Oxford Dictionary

Jednostavnije rečeno, žičani okvir funkcionira slično kao u nacrtu i pokazuje kako se diktira struktura web mjesta: koji se sadržaj postavlja, gdje se postavlja i kako bi korisnik komunicirao sa stranicom. Izrađene u gotovo pedeset nijansi sive, žičane okviri web stranica dizajnirani su koristeći sve informacije dobivene tijekom faze istraživanja i otkrivanja. Žičani okvir može biti brza gruba skica ili žičani okvir visoke vjernosti, ali trebaju udovoljiti određenim smjernicama kako bi bili sigurni da su prilagođeni korisnicima, poput Deset upotrebljivih heuristika za dizajn korisničkog sučelja tvrtke Nielson. Podržane stvarnim podacima i kreirane posebno imajući u vidu korisnika, ove sive i bijele slike mogu napraviti ili slomiti finalizirani proizvod. Evo procesa razmišljanja iza stvaranja ovih skeletnih slika koje nazivamo žičanim okvirom.

1. Odlučite se o modulima sadržaja i hijerarhiji

Prvo, stvaramo sadržajne module, što je popis informacija i značajki koje žični okvir mora uključivati. Informacije unutar modula sadržaja ovise o tome o čemu se radi na stranici, koja je njezina glavna svrha, kao i uključivanju ključnih podataka dobivenih tijekom faze istraživanja. Istodobno gledamo na hijerarhiju sadržaja: utvrđujemo koji su podaci primarni prema sekundarnim. U osnovi to uključuje provjeru da je najvažniji sadržaj unaprijed za korisnika. Ali prije nego što uđemo u stvaranje modula sadržaja podržanih UX ekspertizom - uvijek pomaže skinuti UX kapu i biti samo korisnik. Iako, komentar s kojim se neki stručnjaci ne slažu - volim ugraditi neko osobno iskustvo u postupak. Na primjer, recimo da stvaramo žični okvir početne stranice za web stranicu aviokompanije, razmišljao bih o vlastitom osobnom iskustvu - primjerice "rezervaciji karte". Kao i većina, i ranije sam posjećivao web stranice avioprijevoznika - koje su značajke olakšale moj zadatak? Koji je sadržaj privukao moju pažnju? Zbog čega sam se odlučila rezervirati na toj web stranici ili ne, ako je to slučaj? Zapamtite "sve" dolje - bilo koji podatak je dobra informacija. Imajući na umu ove osobne uvide, vrijeme je da ponovno stavite UX kapu i uključite sve informacije koje ste naučili tijekom faze otkrivanja.

2. Uključiti istraživanje sadržaja modula

Pretpostavimo da smo ustanovili da je glavna svrha početne stranice rezervacija pretvorbe - pa je istaknuti widget za rezervaciju obavezan. Naše istraživanje fokus grupe otkrilo je da korisnici žele vidjeti ponude letova unaprijed (imajte na umu da je izuzetno važno uključiti korisnika od samog početka bilo da se radi o fokusnim skupinama ili intervjuima jedan na jedan). Persona i korisnička putovanja koja smo stvorili na temelju našeg istraživanja također su nam pomogli suosjećati s potrebama korisnika i razviti tok od točke interakcije do završetka. Naše istraživanje je također ukazalo na ponašanje i očekivanja korisnika u pogledu sadržaja koji bi ciljna publika tražila i kako to otkrivaju. Na primjer, korisnik poslovne klase želio bi vidjeti vozovnice poslovne klase unaprijed dok putnik s obitelji možda želi vidjeti odredišta unaprijed. Kao dodatna provjera, referentna analiza također je naložila da mnoge web stranice zrakoplovnih kompanija imaju svoj widget za rezervaciju iznad preklopa unutar stranice, pa kombinirajući sve svoje uvide, stvarate pobjednički modul sadržaja formule za stranicu.

3. Istraživački trendovi, oznake i interakcije.

Sada je vrijeme da se vidi kako se sve ove informacije mogu prevesti u vizualnu strukturu? Ovdje pomaže i analiza usporednih ocjena - kako su web stranice s referentnim vrijednostima prikazivale svoje podatke na početnoj stranici? Je li većina web stranica koristila istu strukturu? Na primjer, ljepljivo zaglavlje za navigaciju - postoji razlog zašto su ljudi prešli na ljepljive izbornike, a drugi su slijedili njegovu primjeru - to djeluje. Slično tome, možete potražiti i nadahnuće trendova: kako su ostale web stranice predstavile svoj sadržaj - a vi niste ograničeni na web lokacije iste industrije, inspiracija može doći iz više izvora. Također se vaši identificirani trendovi mogu spojiti, na primjer, ako jedna web stranica prikazuje ponude leta u obliku sličica s osnovnim informacijama, dok druga web stranica prikazuje ponude sa sveobuhvatnijim informacijama; postoji li način da se to spoji zajedno za dobitnu kombinaciju?

Slično kao i trendovi - mogu se istraživati ​​oznake i interakcije. Koje su oznake korištene za odvajanje različitih odjeljaka. Koji se jezik koristi? Je li razgovorno ili ravno do točke? Na primjer, dok bi jedna web stranica rekla "Najnovije ponude letova", druga bi imala oznaku "Ponude za vas". Što ima više smisla imati na umu regiju i potencijalne korisnike? Uz to, koje interakcije se koriste - lebdeći, klizne kartice, padajuće kartice? Uvođenje interakcija koje vode ka otkrivanju sadržaja, te provjere valjanosti i dovršavanje zadataka može pomoći korisniku da se angažira i na kraju pretvori u pretvorbu.

4. Skica, skica i skica prije nego što koristite "Skica"

Vrijeme je da zgrabite olovku i oslobodite svog unutarnjeg umjetnika. Znam da je primamljiv osjećaj prelaska ravno na digitalni program, ali ostanite snažni jer ćete inače vjerojatno gubiti vrijeme. Odličan je osjećaj kad neku strašnu dvominutnu skicu pretvorite u digitalnu umjetnost. Ali otpor i upornost su ključevi. Vaša skica ne treba biti savršena, ona je u tome da ispravite osnovni koncept i razmislite o nožnim prstima: brzo uređivanje i podešavanje uz put i dobivanje suradničkog ulaza kako biste bili sigurni da je vaše sučelje ispravno. Poboljšanje i usavršavanje mogu se dogoditi kada finalizirate svoj žičani okvir u digitalnom programu. Štoviše, izrada kolaborativnih iteracija u načinu skice pomaže u smanjenju promjena prilikom pretvaranja u žičani okvir visoke vjernosti i naknadnu fazu dizajna.

5. Ispitajte svoje žičane okvire

Ispitajte s stvarnim korisnicima bilo da se radi o procesu skiciranja putem prototipa na papiru ili dok se pretvara u žičane okvire visoke vjernosti. Kao ključno je uključiti korisnika prije pokretanja žičanog okvira putem fokusnih grupa ili intervjua jedan na jedan - jednako je važno da to učinite i prije finaliziranja žičanog okvira. Ne mora biti pravilna sesija testiranja korisnika - zgrabite obitelj ili prijatelje - testirajte ih. Naravno budite sigurni da je on idealan korisnik - nemojte samo zgrabiti petogodišnjeg nećaka i tražite od njega da rezervira let. U idealnom slučaju, svaki žičani okvir treba temeljito ispitati kako bi se vidjelo što treba poboljšati.

6. Neka bude dosljedna

Svi vaši okviri trebaju biti dosljedni u pogledu korištenih modula, dizajna poziva na akciju (CTA) i oznaka - dosljednost je ključna za osiguravanje da korisniku ne dajete mnogo razmišljanja kada izvršavaju zadatak. Na primjer, recimo da se CTA kao što je Book Now prikazuje na gumbu na jednoj stranici, dok se na drugoj prikazuje kao tekstualna veza. Zbunjujuće je za korisnika. U očima korisnika povezali su Book Now s određenim vizualnim prikazom. Cilj je osigurati da korisnik ne oklijeva kad vidi CTA. Dosljednost u tim elementima također skreće pozornost na detalje, kvalitetu i pomaže u uspostavljanju povjerenja kada se prevede u pravu stvar.

7. Napravite Mini-audit

Jednom kada su vaši žičani okviri dovršite - provjerite malo razumnosti. Vratite se Deset heuristika - i testirajte svoj žičani okvir. Napravite mini reviziju, nije je potrebno detaljno opisivati; u suštini ispravljate sve manje stvari koje su zanemarene. Još bolje, dajte žičane veze suigraču. Kao UX stručnjaci, moramo osigurati neke konačne žičane okvire, ali svi mi postajemo umjetnici kada je u pitanju naš posao - teško je pronaći grešku ako neumorno radite na nečemu. Ako svoj rad pokažete nekome drugom, on će vam moći pružiti nepristranu kritiku i imati će dodatne povratne informacije koje možete ugraditi prije konačne isporuke.

Žičani okvir zaista je sastavni aspekt UX procesa. Od stavljanja sebe u cipele korisnika do oslanjanja na svoje znanje o UX-u - to će osigurati da se spajanje oba svijeta pretvara u nešto što ne samo da će uspjeti, nego će se i pamtiti. Proces vam omogućuje da ne samo provjerite jesu li klijenti i tim na istoj stranici, već vam omogućuje i testiranje s ciljanom publikom prije nego što se duboko udubite u vizualni dizajn. Funkcionalnost, interakcija i hijerarhija sadržaja važni su elementi žičanih okvira koji se trebaju odrediti od samog početka. Žično uokvirivanje omogućava vam vrijeme zanemarivanja vizualne estetike i žargona, te se usredotočuje na stvaranje nacrta web stranice s korisnošću u osnovi. Dakle, naprijed i započnite wireframing!