+ 381 64 17 39 157 office@cyclopdesign.com

Mobile-Web-UX

Planetarni prelazak sa desktopova na mobilne uređaje doprineo je dizajnerskom dodatnom fokusiranju na UX (user experience – korisničko iskustvo). Iako korisnički interfejs (user interface – UI) igra izuzetno bitnu ulogu u kreiranju mobile-friendly dizajna, UX je sada postao podjednako važan, naročito od kada je u ponudi sve više uređaja koji nude različita korisnička iskustva.

UX je nešto što prevazilazi granice grafike i estetike. Prema rečima Rahul Varshney-a, co-creator-a sajta foster.fm: „UI bez UX je poput slikara koji baca boju po platnu bez razmišljanja“.

Ova analogija je sasvim na mestu. Možete da imate najdopadljiviji, najlepši, jedinstven i funkcionalan sajt za desktop, ali ako ne uzmete u obzir izazove koje donosi pristup sajtu sa mobilnih uređaja, onda ste bacali boju bez razmišljanja, ili po narodski: džaba ste krečili.

Dakle, šta je to što odvaja dobro mobilno iskustvo od lošeg? Nije toliko teško izdvojiti ključne komponente koje čine visoko efikasan, optimizovan i na korisnika usredsređen dizajn. Evo nekoliko u praksi proverenih praktičnih saveta čija primena može da vam posluži kao vodič:

 

Ne zaboravite na mobile-first pravilo

 

Ukoliko je vaš sajt namenjen prvenstveno mobilnim korisnicima, onda ćete verovatno primeniti „mobile first“ strategiju. Ne postoji ništa loše u prihvatanju ovog pravila ako ste sigurni da će većina vaših korisnika vašem sajtu pristupati sa mobilnih uređaja. Dizajn za mobile web nije mala izdvojena niša, kao što to kažu i na codemyviews: „u stvari postoji 1,2 milijarde mobilnih korisnika širom sveta“, a taj broj verovatno neće uskoro opasti (verovatnije je da će nastaviti sa rastom u bliskoj budućnosti). Ovo je možda u početku malo veći izazov, ali ako ste voljni da vaše korisnike postavite na prvo mesto onda je vredno truda.

Činjenica da ste rešeni da dizajnirate jednostavan, čist i na mobilne korisnike fokusiran sajt, ne znači da on ne može da bude sofisticiran. Karimrashid.com je savršen primer kako jednostavnost i prefinjenost mogu da budu umešani u stvaranje čistog i responsivnog, a opet elegantnog dizajna.

 

Kreirajte fluidne layout-e

 

Jednostavno postoji isuviše različitih dostupnih veličina ekrana da biste mogli da izaberete samo jedan za koji ćete raditi svoj dizajn. Morate da stvorite layout koji će se neprimetno prilagođavati svakome od njih. Na sreću tu su fluidni layout-i da vas izbave iz nevolje.

Zasnovani na procentima, pre nego na definitivnim merama kao što su pikseli, fluidni layout-i su postali standard među mnogim web profesionalcima. Mogu da budu zaguljeni, ali obezbeđivanje maksimalnog broja korisnika koji mogu da vide vaš sajt bez problema je svakako vredno uloženih napora.

 

Težite funkcionalnosti

 

Šta je to funkcionalnost? To je ono što nudite svojim posetiocima da bi mogli da zadovolje svoje prohteve, i to brzo. Zasnovani na svrsi vašeg sajta svi alati, kao što su lokacija najbliže radnje, pretraga proizvoda, recenzije proizvoda ili kursna lista sa konverterom valuta, mogu da pomognu korisniku da svoje ciljeve dostigne u kratkom vremenskom periodu.

Purina, brend hrane za ljubimce, je savršen primer kako „funkcije“ mogu da olakšaju posetu sajtu. Home page ima search box gde možete da tražite ono što vas zanima. Ispod su dve odvojene kolone za vrste hrane za životinje za koje su oni specijalizovani. Ceo sajt je lak za navigaciju sa kolonama, dugmićima, alatima, i elementima dizajna koji izbor, a zatim i kupovinu odgovarajuće hrane za ljubimce čine lakim kao perce.

 

Identifikujte vaše korisnike

 

Ne pokušavajte da postanete majstor svih zanata, zato što vas to može koštati tipičnog korisnika, a to niko ne želi. Za početak saznajte ko su vaši tipični korisnici. Zatim saznajte kakvo je njihovo tipično ponašanje tokom pretrage na netu.

Kada ste to obavili otkrijte šta je ono što ih pomera. Moderni korisnici dele se na dva tipa: one koji pretražuju bez jasnog cilja na umu, i one koji žele da obave određeni zadatak. Svaka od ovih grupa zahteva različite „funkcije“ zasnovane na njihovim potrebama.

Nije teško ustanoviti demografiju The Body Shop sajta, budući da njegovi korisnici ostavljaju nagoveštaje i tragove po celoj stranici. Pošto je The Body Shop fokusiran na prirodne sastojke i društveni aktivizam, monohromatske varijacije zelene, ponuda prirodnih sastojaka, „zeleni“ izbor slika, kao i izveštaji o fer trgovini, izjave obećanja i ostali događaji, zajedno čine razumno rešenje za razvijanje dizajn koncepta.

 

Uvek proučite dostupne savete namenjene developerima

 

Od velike je važnosti da proučite UI uputstva za konkretnu platformu na kojoj radite. Neke platforme dozvoljavaju više fleksibilnosti od drugih. Šta god da je u pitanju, ključni elementi i oznake brenda moraju da budu zadržani.

Developer koji radi na Apple aplikaciji bi morao da obrati pažnju na iOS Human Interface Guidelines i da prati Apple standarde kada se radi o osnovama dizajna, strategiji dizajna, UI elementima, dizajnu ikonica i slika itd. Android developer bi sa druge strane trebalo da nauči sve o komponentama, stilu, upotrebljivosti i layout-ima tipičnih Android aplikacija, uz pomoć Android developers guide-a.

Učinite sav sadržaj dostupan svim korisnicima

 

Neki dizajneri, umesto da sav sadržaj naprave tako da radi u fluidnim layout-ima, jednostavno pribegavaju sakrivanju određenih elemenata od mobilnih korisnika. Nekada je to zato što je layout zahtevan, ili zato što osećaju da je u pitanju isuviše sadržaja za mobilni layout. Greše.

Davanje mobilnim korisnicima „ogoljene“ verzije sajta ili aplikacije nije samo nefer prema njima, već to može za posledicu imati i gubitak mušterija. Možda ćete morati da ekstremno pojednostavite layout, da pomerite nešto od sadržaja u posebne ekrane da biste smanjili zagušenost, ili samo da pokušate da sve bolje organizujete. U svakom slučaju sve mora da bude prikazano svima.

Uporedite desktop verziju BBC sajta sa mobilnom verzijom. Iako pojednostavljena ona još uvek korisnicima pruža sve informacije preko celog ekrana. Nasuprot tome mobilna verzija izbacuje neke od slika (koje su još uvek dostupne unutar samog članka), ali zadržava sve naslove, dramatično pojednostavljujući iskustvo na ekranu čija je veličina prilagođena mobilnom uređaju.

 

Dizajn za dodir

 

Takođe je korisno imati na umu da će mobilni korisnik upotrebljavati prste umesto precizno nastrojenog miša. Vaš dizajn bi trebalo da bude lak za navigaciju prstima svih veličina i oblika, uzimajući u obzir da su svi mobilni uređaji sada touch-screen. Korisnik ne bi trebalo da preterano pritiska i štipka, zumira ili tapka po nečemu, posebno ako to nije ono što on želi. Netačni tapovi su česta pojava na malim uređajima i to bi trebalo uzeti u obzir prilikom dizajniranja, ostavljajući dovoljno prostora da željeni zahvat može da bude precizno izveden.

Peter Paul Koch-ov touch table bi mogao da vam bude od pomoći. Zapazite kako sama akcija dodirivanja može da varira u zavisnosti od kompatibilnosti pretraživača i uređaja.

 

Koristite alate za kompresiju

 

Količina danas dostupnih alata koji dizajnerski posao čine manje opterećujućim je nedokučiva. Naići ćete na script kompresore, kao što su HTML compressor ili Gzip kompresija, koji će automatski odstraniti nepotrebni komentar, prazan prostor ili kod. CSS minifier i CSS compressor, kao i još neki alati, će vam omogućiti da CSS kod povežete u lanac i da poboljšate performanse. Komprimovanje slika je takođe podjednako važno. Alati koji će smanjiti veličinu vaših jpeg i png fajlova uključuju EWWW ImageOptimizer, smush.it, optiPNG i jpegtran.

Ry johnson nam je pružio primer visoko responsivnog portfolio dizajna. Sajt je pun spektakularnih slika, koje se ne razlikuju od onih na desktop verziji. Tajna brzog loadovanja je ovde nesumnjivo sakrivena u optimizaciji slika.

 

 

 

 

Share this:

Pin It on Pinterest

Share This