pay someone to do my homework onlineU martu 2014 godine, Baymard Institut, kompanija iz Velike Britanije koja se bavi istraživanjem na webu, je objavila da je 67.91% online korpi za kupovinu, prazno i “napušteno”. Napuštanje korpe znači da je korisnik posetio sajt, pretražio, dodao nekoliko proizvoda u korpu, a onda napustio sajt bez izvršene kupovine. Mesec dana kasnije, u aprilu 2014 godine E-Consultancy je izjavio da online trgovci gube 3 milijarde dolara u prodaji, svake godine, samo od napuštenih korpi za kupovinu.
Jasno, smanjenje broja napuštenih kolica bi dovelo do većeg prihoda prodavnice, što je cilj svakog online prodavca. Logično – nameće se sledeće pitanje – kako možemo, kao dizajneri, programeri, pretvoriti ovu grupu korisnika u kupce.
Pre napuštanja korpe za kupovinu
Bacimo pogled na prepoznatljiva poboljšanja, tako da bi smo redukovali broj napuštanja ovih stranica. Ova poboljšanja su fokusirana na promene koje se odnose na korisničko iskustvo kupca pre donošenja odluke da doda proizvod u korpu, obavi checkout i kupovinu. Najčešća poboljšanja su:
Prikazati slike proizvoda – Kvalitetne slike proizvoda će korisnicima obezbediti uvid u to šta kupuju.
Prikazati logotipe povezane za bezbednost – Ovim se mogu ublažiti strahovi korisnika vezanih za bezbednost kartica i sigurnosti plaćanja.
Prikazati kontakt podatke – Prikazivanje kontakt detalja (broj telefona ili mail adresa) dodaje kredibilitet sajtu.
Učinite korpu za kupovinu što lakšom za ažuriranje – Olakšajte korisnicima ažuriranje korpe za što manje vremena i uz što manje truda
Ponudite alternativne metode plaćanja – Dajte korisnicima izbor za plaćanje, jer neko plaća Visa karticom, neko Paypallom, neko drugim tipovima.
Ponudite podršku – Postavite broj telefona ili online chat za na vaš sajt.
Nemojte zahtevati registraciju – Registracija odbija korisnike i oni često napuštaju sajtove koji imaju suvoparne forme za prijavljivanje.
Ponudite besplatnu dostavu – Ovo često može biti dovoljna motivacija korisnika da kupuje od vas.
Budite transparentni oko tipa i cene dostave – Skuplja cena dostave od očekivane može izazvati frustraciju kod korisnika
Pokažite ocene korisnika – Pokažite ocene vaših zadovoljnih korisnika, na taj način ćete zadobiti poverenje potencijalnih kupaca.
Ponudite garanciju i povraćaj sredstava – Ponudite garanciju i jasno definišite njene uslove. Takođe obezbedite korisnicima mogućnost povraćaja sredstava ukoliko nisu zadovoljni.
Optimizujte za mobilne uređaje – Istraživanja su pokazala da je 63% kupovina sprovedeno sa mobilnih telefona – dajte korisnicima najbolje moguće iskustvo.
Napišite sve informacije o proizvodima – Korisnici neće sami pretraživati vaš sajt da bi došli do informacije koja im je neophodna. Obezbedite da im informacije budu što dostupnije.
Može se desiti da čak i kad ispoštujete sve ove savete, korisnici i dalje napuste korpu za kupovinu. Da li zbog dizajna ili nekog drugog razloga, to treba utvrditi.
Napuštanje korpe za kupovinu
Hajde da pogledamo i obratimo pažnju na stvari koje možemo da uradimo onda kada je korpa za kupovinu napuštena. Jedna taktika je je da se pošalje mail korisniku sa ličnom porukom i linkom ka korpi koja sadrži odabrane proizvode. Ovo je poznato kao mail napuštanja.
Koncept je jednostavan. U pravo vreme se šalje prilagodljiv email, zajedno sa ličnom porukom i linkom ka napuštenoj korpi. Naravno, ovo ima smisla ukoliko je korisnik ostavio svoju email adresu. Ovo je efektan pristup jer je korisnik već uradio sve što treba, jedino je ostalo da plati. Ovakav mail može da se smatra pokušajem da se korisnik poslednji put ubedi i animira da izvrši kupovinu do kraja.
U toku septembra 2013 godine, istraživanja su pokazala da su online kolačići vratili 29% korisnika koji su napustili stranicu korpe, uz pomoć emaila. Revolucionarno otkriće, pogotovo zato što su mnogi u startu skeptični.
Da bi smo imali realniju sliku, rećićemo vam samo da su prema istraživanjima, radnici Shopify-a potvrdili ovaj podatak. Takođe, izneli su u javnost i sledeće rezultate:
U periodu od 12 meseci, prihodovali su 12.9 miliona dolara, samo na korisnicima koji su se vratili uz pomoć maila.
Od 4,085,592 poslatih mailova – 147,021 korisnika je dovršilo kupovinu. Rejting vraćanja 3.6%
Na vlasnicima online prodavnica je da biraju, da li žele da šalju ovakve mailove na 6, 12 ili 24 sata. Mailovi koji se šalju posle 6 sata imaju bolji procenat konverzije.
Vredi napomenuti da je rejting povratka 3.6% samo postignut slanjem mailova korisnicima Shopify-a. Mnogi koriste druge aplikacije, umesto ovog native dodatka. S obzirom da možda podaci mogu biti nedovoljno relevantni, možda je ovaj procenat veći.
Imajući u vidu statistiku, emailovi poslati korisniku kada napusti stranicu korpe za kupovinu, imaju bitan marketinški udeo i važan su deo strategije. Srećom, mnogi vodeći online prodavci, će slati prilagođene mailove, u već isplaniranom tekstu ili u HTML fajlu. Ukoliko dobro sastavite ovaj sadržaj, on će dodati posebnu vrednost vašoj usluzi.
Kreiranje HTML maila za napuštene korpe
Implementacija ovakvih HTML poruka može varirati od platforme do platforme. Neke platforme zahtevaju nezavisne dodatke, dok druge imaju dodatu neku funkcionalnosti. Na primer i običan tekst i HTML su dostupni na Shopify varijanti. Ukoliko želite da dodatno brendirate vašu e prodavnicu, poželjno je napraviti HTML verziju.
Poslednjih godina HTML newsletteri su doživeli procvat. Ovaj vid marketinga je zaista napredovao. Slanje HTML verzije, omogućava veću fleksibilnost prilikom vizuelnog dizajna, mada i to ima svojih loših strana.
Ako ste se bavili razvojem ili dizajniranjem tokom 90 ih godina, onda je dizajn i razvoj newslettera povratak u taj period. Dizajn i programiranje kao deo tabele, a takođe, problem mogu da predstavljaju i email klijenti koji renderuju HTML fajlove na drugačiji način.
Srećom, postoje MailChimp i Campaign Monitor su dali rešenje za ove probleme. Na primer Campaign monitor ima šablon, urađen u HTMLu i CSSu koji se može preuzeti i optimizovan je za sve mail klijente. MailChimp na primer ima nekoliko templatea u HTMLu i CSSu.
Dostupni responsive email šabloni
Dok mnogi od nas žele da kreiraju svoj šablon, činjenica je da je lakše promeniti sjajan rad drugih. Postoji mnogo besplatnih HTML šablona, koji se mogu optimizovati, menjati, prilagođavati.
Postoji nekoliko tipova ovakvih mailova. Dele se na osnovu toga gde i kako se koriste. Da bi smo razjasnili razliku, podelićemo ovakve mailove u tri kategorije:
Akcioni emailovi – “Activate your account,” “Reset your password”
Mailovi upozorenja – “You’ve reached a limit,” “A problem has occurred”
Mailovi plaćanja – Računi i fakture.
Ovi šabloni su elegantni. Takođe, svi oni su već testirani u drugim mail klijentima.
Izazov
Šabloni su dobar izbor za jednostavne mailove za napuštene korpe za plaćanje. Navešćemo primer pravljenja jednog šablona – Preuzmite neki šablon, napravite neke izmene. Postavite da se tekst odnosi na napuštanje korpa za kupovinu. Dodajte CSS kod, ubacite neke proizvoljne podatke i proverite da li vam je stigao mail.
Kreiranje kopije šablona
Kada pogledate neke druge šablone, “action” opcija se pojavljuje na početnoj tački. Možete preuzeti HTML sa interneta.
Prvi korak je da sačuvate šablon kao abandoned-cart.html. Kratka provera u pretraživaču pokazuje da stilovi nisu podešeni.
Dodavanjem CSS koda je preporučeno. Kada se doda CSS stil, dobijamo sliku ispod.
Dodavanje sadržaja
Sada kada šablon izgleda kao standardan dokument, vreme je da dodamo kod sa Shopify teme. Ovako nešto se obično nalazi u sekciji sa podešavanjima – “Settings” → “Notifications” → “Abandoned cart.”
Svi notifikacioni mailovi na Shopify koriste Liquid, jezik za kreiranje šablone koji je kreirao Shopify koji je dostupan kao besplatan projekat, kreiran u alatima kao što su Jekyll ili Siteleaf.
Proučavanjem šablona, postavićemo sadržaj u okviru jedne ćelije u tabeli.
Nakon postavljanja sadržaja, kliknućemo na šablon da bi smo videli kako to izgleda u pretraživaču.
Modifikovanje koda
Ova faza podrazumeva sređivanje neke od koda podrazumevanim, uključujući oznake za tekst <p> </p>. Onda, vreme je sad shvatimo kako je najbolje postaviti sadržaj korpe u ovom fajlu.
Nakon jednog kratkok testiranja, sada ovo već izgleda bolje. Sledeće što je potrebno uraditi:
Obrisati nepotrebne redove iz tabele.
Dodajte dobre linkove u okviru plavog dugmeta.
Promenite sadržaj footera.
Završne korekcije
Sada ćemo kreirati plavo dugme na kome će pisati “click me”.
U sledećoj liniji koda ćemo postaviti relevantan link.
U ovom slučaju {{ url }} predstavlja link ka napuštenoj korpi. Osiguran je dosledan razmak i link za unsubscribe.
Posle nekoliko minuta menjanja, šablon izgleda sasvim korektno. Ostalo nam je samo da promenimo tekst u žutoj sekciji. To je potrebno promeniti u title delu u HTML fajlu.
Inline CSS
Da se podsetimo, nismo mnogo menjali u odnosu na šablon, a CSS je identičan kao CSS šablona.
Sledeći korak je ugrađivanje CSSa i HTMLa. Neki mail klijenti će ukloniti <head> i <style> iz maila. Na sreću dodavanje CSSa i HTMLa nije dug i mukotrpan proces. Zapravo, iznenađujuće je lak.
Ukoliko ste odabrali Premailer, koji ima nekoliko dodatnih funkcija, među kojima je uklanjanje native CSSa iz sekcije HTML dokumenta, što će vam sačuvati nekoliko kilobajta.
Još jedna dobra strana Premailera je ta da možete videti oznake u pretraživaču. Možete videti link nazvan “Click to View the HTML Results.”. Ukoliko ste voljni da automatizujete kreiranje notifikacionih mailova, Premailer ima i svoj API. Broj biblioteka koje podržava je veliki, među njima je PHP premailer.
Poslednji deo je kopiranje HTML i dodavanje u HTML tab napuštene korpe. Kada je ovo promenjeno, možete videti izgled maila u pretraživaču.
Air Mail
Apple Mail
Gmail
Apple mail na IOSu
Nakon ovoga, šablon će biti koristan mail koji možete poslati. Nije bilo potrebno mnogo truda.
Šta dalje?
Šablon koji je kreiran u ovom tekstu je jednostavan, najosnovniji i predstavlja suštinu. Možemo razmotriti još mnogo toga kao što je:
Dodavanje glasovne poruke
Prilazivanje slika proizvoda, sa ciljem “osvežavanja pamćenja” korisnika
Dodavanje promo koda, kao podstrek za dalju kupovinu.
Upp sale – deljenje poklona, vaučera, popusta.
Dodavanje liste kompatibilnih proizvoda.
Daćemo vam nekoliko primera.
Dodo case
Glasovni ton je jedan od efikasnijih načina za angažovanje korisnika i to je ovde slučaj. Kao i uvek, kontekst je jako bitan ovde.
Fab
Dok je mail ovde standardan, naslov maila privlači pažnju i poziva na akciju.
Chubbies
Mail koji je kreiran ovde je pogodan za ljude koji vole zabavu.
Black Milk Clothing
Ovde je uključen meme sa kucom koja tužno pita zašto je ostavljena. Tako se korisnicima stavlja do znanja da čekamo njihov povratak.
Holstee
Holstee pita da li postoji problem i da li mogu da nam pomognu. Takođe dodat je direktan broj telefona.
Zaključak
Iako postoje mnoge taktike za ubeđivanje korisnika da kupe, postoji broj korisnika koji će doći do stranice za plaćanje i napustiti sajt. Svaka taktika koja će potpomognuti kupovinu korisnika je dobrodošla i ukoliko je potrebno malo implementacije, ovo je najbolji način da se počne. Dizajneri i developeri imaju veliki broj alata na raspolaganju koji mogu ubediti korisnika da kupi proizvod.
Kako kaže stara poslovica – slika vredi više od hiljadu reči. Ljudska bića su vizuelna i brže obrađuju vizuelne informacije, a 90% od svih informacija su konvertovani u mozgu u vizuale. Slike mogu da budu moćan način za angažovanje korisnika i naglase vaš proizvod. Slike mogu i probiti jezičku barijeru.
Više od same dekoracije slike imaju moć da obezbede dobro korisničko iskustvo.
Koristite relevantne slike
Uverljive slike imaju jedinstvenu sposobnost da inspirišu i angažuju publiku. Međutim ne mogu sve slike da inspirišu i angažuju publiku, neke će samo zauzimati mesto ili u najgorem slučaju zbuniti korisnika. Jedan od najopasnijih elemenata u dizajnu je slika koja prenosi pogrešnu poruku.
Korisnici reaguju na vizuale brže nego na tekst, tako da se potrudite da vizuali prate vaš sadržaj. Zato je bitno da slike budu relevantne sa sadržajem.
Nemojte kreirati vizuelnu buku sa slikama
Malo je verovatno da je svrha vašeg sajta ili aplikacije da prikaže slike. Umosto toga, slike treba da prikažu svrhu proizvoda. Koristite ograničeni broj vizuala u dizajnu, one koji stvarno privlače pažnju korisnika. Na primer, početna strana Apple-a ima samo jednu sliku na sredini ekrana, sa najnovijim proizvodima.
Koristite kvalitetne slike bez distorzije
Budite sigurni da su slike optimizovane za sve ekrane i platforme. Ne bi trebalo da se vide pikseli, tako da testirajte rezoluciju slika. Sačuvajte ih sa adekvatnim odnosom visine i širine, ne skalirajte ih preko 100%. Ne želite da vam slike budu izobličene ili prevelike.
Dizajn baziran na slikama nije za svaku stranu
Privlačenje pažnje korisnika estetski lepim slikama je bitan, ali ponekad cena toga može biti da se drugi elementi ne vide, padaju u drugi plan.
Kada posvečujete mnogo pažnje slikama, može doći do preterivanja, što može ometati korisnike da se povežu sa vašim sadržajem. Možete videti ovaj efekat na SoundCloud aplikaciji gde se od slika jedva vide dva dugmeta.
Ovakav dizajn je prikladan u nekim situacijama, ali u većini slučajeva bi trebalo balansirati slike i sadržaj – slike koje se koriste u korisničkom interfejsu bi trebalo da budu kompatibilne sa proizvodom, da ne prekrivaju bitne informacije i elemente jer bi tako mogle ugroziti funkcionalnost.
Koristite više sredstava
Ilustracije i fotografije mogu da se koriste na istim proizvodima. Fotografija je idealna da prikaže specifične priče. Na primer, ukoliko vam treba da prikažete cveće, na primer ruže, onda je fotografija idealna.
Ilustracija je efektnija za predstavljanje koncepta i metafora, tamo gde fotografija može ograničavati.
Fokus
Slika je alat za vizuelnu komunikaciju koja prenosi poruku. Jasan fokus komunicira koncept na prvi pogled, a nedostatak fokusa čini sliku besmislenom.
Najpopularnije fotografije sadrže nekoliko minimalnih elemenata, bez mnogo dodataka koji bi mogli da odvuku pažnju korisniku.
Prikažite realne ljude
Slike ljudi su efektne za privlačenje pažnje korisnika. Kada vidimo lica drugih ljudi, možemo se povezati sa njima, a ne samo koristiti proizvod. Mnogi korporativni sajtovi koriste slike ljudi i tako pridobijaju poverenje korisnika.
Testovi pokazuju da dekorativne slike retko kad predstavljaju poboljšanje dizajna i više mogu da naškode korisničkom iskustvu nego da ga poboljšaju. Veoma jednostavno pravilo je koristiti slike visokog kvaliteta koje se poklapaju sa karakterom sajta. Već smo rekli – slike koje koristite oslikavaju vaš proizvod ili brend.
Aktivirajte emocije korisnika
Aplikacije i sajtovi su napravljeni da bi izvršavali određenu funkciju. Ali mimo toga, moraju privući pažnju i animirati korisnika da se angažuje. Dodavanje momenta oduševljenja na svom sajtu, ćete postići dobar prvi utisak kod korisnika, jer nije sve u funkciji, ima nešto i u prepoznatljivosti.
Ukoliko već imate dobar UX, dodavanje ovakvih elemenata će prouzrokovati emocionalnu povezanost između korisnika i vas.
Zaključak
Razmišljanje o slikama, kao delu neke funkcionalne celine je jako važna- Vizuelna komunikacija u dizajnu ostavlja utisak na korisnika, angažuju korisnike i inspirišu ih na povezivanje sa vašim brendom.
Novi ažurirani Google Fonts je jedna Open Source riznica, potpuno besplatna, za korišćenje fontova. Od klasičnih do kreativnih, novi izbor fontova podrazumeva preko 135 jezika i dostupan je svim tipografima i ljubiteljima slova, a mogu se preuzeti serifni, beserifni ili rukopisni fontovi.
Ko su dizajneri koji stoje iza naših omiljenih Google fontova?U nastavku teksta ćemo vam otkriti šta je sve potrebno da se dizajnira Google font, na osnovu iskustva Davida Jonathana Rossa i Eleni Bevatou, koji već dugo godina dizajniraju Google fontove.
David Jonathan Ross
David Jonathan Ross dizajner fontova iz Los Anđelesa koji živi u Bostonu, gde radi u agenciji Font Bureau, jedna od vodećih agencija koja dizajnira fontove za Wall Street Journal, Rolling Stone i reditelja Wes Andersona.
Kako ste ušli u svet dizajniranja fontova?
“Interesovao sam se za tipografiju dok sam pohađao Hampshire College u Massachusettsu. Kao deo mog diplomskog rada dizajnirao sam familiju fontova za studentske novine, a deo te familije je i poznati font Manicotti. Nakon toga sam se zaposlio u agenciji The Font Bureau i tu sam naučio mnogo toga o poslu, radeći sa drugim dizajnerima, na različitim tipovima projekta.”
Šta je bila inspiracija za Google Font, Bungee?
“Kada sam živeo u Cambridgeu u Massachusettsu 2011, postojala je prodavnica alkoholnih pića u mom kraju gde je reć LIQUOR bila vertikalno naslagana, tako da slova mogu biti velika i vidljiva bez forsiranja očiju i držanja znaka uz ulicu. Nije to baš bio najatraktivniji znak, ali me je naveo na mišljenje o tipografiji koja bi bila efikasnija i čitljivija.
Počeo sam sa fotografisanjem svih vrsta sličnih natpisa na svojim putovanjima i odlučio da napravim Bungee kao omaž ovakvim urbanim znakovima. U znak zahvalnosti svojim šarenim, ukrasnim formama teksta, stvorio sam u liniji strukture, slojeve i nijanse za Bungee, koji može biti uokviren različitim bojama, može stvoriti različite hromatske efekte, jednostavne, za otvorene forme teksta. Bungee podseća na Art Deco stilove i njegova jednostrana forma pojačava smisao za vertikalnost. Istraživao sam kako su slova postavljena u azijskim jezicima i kreirao set slova koja mogu biti kucana i vertikalno.
Predložio sam Bungee Google fontovima zato što sam mislio da će odgovarati njihovoj Open Source biblioteci. Bungee je dobar za upotrebu u vertikalnim tekstovima, kao i za obojene fontove, tako da sam želeo da taj font bude dostupan svima. Bungee se uklapa sa eksperimentalnim bojama, gde je informacija o boji smeštena unutar fonta. Nadam se da će ovo postati koristan resurs za dizajnere i developere koji žele da eksperimentišu i da guraju ovu tehnologiju napred”
Šta je potrebno da se font izdvoji od ostalih?
“Budući da postoji toliko simbola tamo, barem na latinici, ja bih rekao da je dobar font onaj koji privlači pažnju i rešava zanimljiv problem i upotrebljava se u zanimljivim situacijama. Lako je povući slova, ali je tesko dizajnirati ih za specijalnu upotrebu.
Font je software i stvar koja ga čini dobrim je posvećenost detaljima. Ovo uključuje oprezno nacrtane forme slova, razmake, tabele i ostale elemente koji čine font čitljivim.
Jedna od najboljih delova u ovoj industriji je da je industrija mala, ali ljudi dolaze iz različitih sredina. Neki od njih su kvalifikovani kaligrafi, koji svoje talente izražavaju olovkom, dok drugi svoj rad baziraju na odličnom tipografskom iskustvu. Neki odlično pišu i donose jedinstven pečat svom radu, dok drugi dizajneri pristupaju iz tehnološke perspektive.
Eleni Beveratou
Živi u Londonu, ali je poreklom iz Grčke, Eleni je dizajnerka koja radi u agenciji Dalton Maag, koja sarađuje sa brojnim korporativnim klijentima kao što su Amazon, Nokia i Toyota.
Kako ste ušli u svet dizajniranja fontova?
“Odlučila sam da studiram tipografiju Univerzitetu u Redingu, da bih postala bolji grafički dizajner, ali po završetku studija sam odlučila da se fokusiram samo na tipografiju.
Pozicija u Dalton Maagu je Font Developer, a pridružila sam se timu pre 4 godine. Dalton Maag je međunarodna agencija, priznata u industriji fontova. Kompaniju je osnovao švajcarski dizajner Dalton Maag, 1991 godine i njen rast u poslednje 2 decenije je doprineo da ova agencija bude jedna od najpoznatijih u dizajn industriji.
Šta je bila inspiracija za Google Font, Scope One?
“Scope One je ideja da svim aplikacijama Google Docs donese nešto što smo davno osmišljavali rukom i čiji je cilj da se prenese sa papira na ekran. Taktičnost, praktičnost i nostalgija je nešto na osnovu čega bi se ovaj font izdvojio od konkurencije.
Scope One je da vrati osecaj, tekstureu i jedinstvenost štampanja sa metalnim simbolima, na kojima se uvode novi elementi, koji su neočekivani, ali ne smeju da ometaju obrte. Koncept je baziran na vanvremenskim, osnovnim principima dizajna, sa ciljem da se stvori svest o vrednosti tipografskog dizajna.
Uglavnom se fontovi skiciraju rukom, pa potom, čim se stvori ideja za dizajnom, digitalno se crta na računaru. U Dalton Maagu uvek razvijaju nove metode za poboljšavanje razvoja fontova. Kada se otkrije neki font, postoje tri procesa – dizajn, inženjering i optimizacija za ekrane.”
Šta je potrebno da se font izdvoji od ostalih?
“Dobar font je onaj gde sva slova funkcionišu kao sistem. Kada pripadaju jedni drugima i kada njihovo pojavljivanje u reči, kada su jedan pored drugog ima smisla. Jako je bitno ne fokusirati se na jedno slovo i ignorisati kako to slovo izgleda kada je pored drugih. Važno je takođe da se uverite da slova imaju svoju ličnost. U pronalaženju balansa između funkcionalnosti i ličnom pečatu fonta je ključ”
Da li je vaš sajt spor? Da li bi mogao da bude brži? Korisnici zahtevaju web sajtove koji se brzo učitavaju, bez velike vremenske pauze. Ukoliko vaš sajt ne zadovoljava ove uslove, korisnici će, nezadovoljni vašim sajtom napustiti isti.
U nastavku teksta ćemo vas upoznati sa nekim načinima ubrzanja sajta, tako da u budućnosti nemate razloga za brigu oko vremena učitavanja.
Testirajte sajt
Pre nego što kažete “nema šanse da je sajt spor”, istestirajte ga. Google ima odlične alate koje svako može iskoristiti za testiranje sajta, potrebno je samo prekopirati URL sajta. Dobićete izvanredan izveštaj koji će vam reći koliko je brz sajt i gde može da se poboljša. Dobra je ideja da sajt testirate periodično, kako bi ste osigurali da sve funkcioniše bez problema. Ukoliko postoji nekih problema sa performansama, dobijate predloge za poboljšanje.
Izveštaj će vam dati tri sugestije – šta je potrebno popraviti, šta bi trebalo razmotriti za popravku i šta je dobro. Elementi koji se testiraju su:
Keširanje u pretraživaču
Optimizacija slika
Odziv servera
Skripte i CSS
Kompresija
Redirekcije
Smanjivanje HTMLa, CSSa, i JSa
Prioritet vidljivog sadržaja
Izbrišite nepotrebne pluginove
Da li se na vašem sajtu nalaze pluginovi koje ste instalirali, a da vam pritom nisu neophodni i da ih ne koristite. Vreme je da se oterasite njih.
Čak i elementi koji se ne upotrebljavaju, osim što zauzimaju mesta na vašem serveru, utiču na brzinu vašeg sajta. Ovo se posebno odnosi ako radite sa sistemima kao što je WordPress.
Uklonite sve neiskorišćene dodatke. Trebalo bi uzeti u obzir i pluginove koje koristite i da li oni utiču povoljno na postojeće korisničko iskustvo, tj da li vaš sajt može ili ne može nesmetano da funkcioniše bez njih. Ukoliko postoje pluginovi koje koristite, a ne utiču na korisničko iskustvo, razmislite o brisanju njih ili o nalaženju bolje opcije.
Pored broja pluginova, kvalitet predstavlja problem. Nemojte samo dodavati pluginove na vaš sajt. Pokušajte da koristite visoko ocenjene pluginove, kao i one koji se redovno ažuriraju i za koje imate obezbeđenu tehničku podršku od strane autora plugina. Ukoliko imate stare, neažurirane pluginove, može se desiti da zastareli elementi usporavaju rad sajta.
Delite samo ono što je potrebno
Kada već razmišljamo o pluginovima i ostalim dodacima, pitanje je koliko sajtova sadrži dugmiće za deljenje na društvenim mrežama. Pitanje koje se postavlja je koliko je to stvarno neophodno?
Dobar deo ovih dugmića može zbuniti korisnike – koliko njih će stvarno poželeti da podeli vaš sadržaj na društvenim mrežama? Sve ovo usporava rad samog sajta.
Postavite jednu ili dve društvene mreže na kojima ste vi aktivni i želite da se korisnici povežu sa vašim sajtom i postavite te dugmiće.
Budite oprezni sa slikama
Video, ilustracije, slike, animacije.. Činjenica je da svi ovi elementi mogu učiniti vaš sajt lepšim, mogu učiniti da “izgleda skuplje”, ali takođe mogu nepovoljno uticati na brzinu učitavanja vašeg sajta. Tako da – birajte mudro.
Pre dodavanja vizuelnog elementa u dizajn vašeg sajta, razmotrite vrednost tog elementa i njegov uticaj na korisničko iskustvo. Da li taj element daje nešto korisnicima? Ukoliko daje neku informaciju korisnicima, iskoristite, ukoliko ne, onda nije potrebno koristiti te elemente.
Potrebno je da sve slike budu optimizovane za upotrebu za webu. Generalno pravilo, slike treba da budu velike onoliko koliko je neophodno. Nemojte dodavati velike slike. Sve ovo zahteva malo vremena prilikom Front End razvoja, ali je jako zgodno ukoliko vremenom sajt nastavi sa razvojem i rastom.
Iskoristite i ostale trikove. Koristite ikonične fontove, umesto ikonica. Konvertujte elemente u SVG (vektorski format) ukoliko vam ikonični fontovi nisu dovoljni. Koristite HTML i CSS trikove da bi ste kreirali elemente za koje nije neophodno koristiti slike, kao što su dugmići, strelice i ostale elemente korisničkog interfejsa.
Odmorite sa alatima za smanjivanje
Mali fajlovi su ključni za postizanje velike sajta. Ravnoteža je u ideji da postoje ekrani visoke rezolucije koji vam dozvoljavaju da se vaš sadržaj vidi u što većem kvalitetu. Tada postoji prostor za upotrebu alata za smanjivanje. Neki od najčešće korišćenih alata su:
WP Smush – smanjuje slike za WordPress korisnike
Kraken – smanjuje i kompresuje slike
TinyPNG – smanjuje veličinu i konertuje u kompatibilne formate
Gzip – Pakuje fajlove i kompresuju ih
Minify Your CSS – Redukuje suvišan kod koji je uključen u API
SpriteMe – dodaje pozadinske slike u CSS i smanjuje broj HTTP zahteva
CSS Compresor – Redukuje veličinu koda.
Keširajte
Uključite keširanje vašeg sajta.
Ukoliko niste uradili ovo, vaši korisnici će biti ti koji su nezadovoljni radom vašeg sajta. Vaš sajt treba da bude brz i to je ono sa čim bi se složila većina korisnika.
Keš memorija će kreirati privremene fajlove kao i stranice koje pretraživač treba da zapamti da bi se korisnik vratio na njih. Tako se redukuje propusni opseg upotrebe, vreme učitavanja i delay. Korisnici će vam biti zahvalni, pogotovo ukoliko koriste malo obimniji sajt.
Čistite sajt redovno
Baš kao što morate da čistite svoju kuću redovno, potrebno je čistiti i održavati web sajt, linkove i podatke. Elementi na vašem sajtu kojima je potrebno čišćenje su:
Optimizujte svoju bazu podataka. Vremenom će vaša baza podataka može biti pretrpana izmenama, od korišćenja fotografija do sačuvanih fotografija. Ne morate sve zadržati. Jako je bitno očistiti elemente koji nisu deo vašeg sajta.
Nemojte hot-linkovati slike. Povlaćenjem slike sa tuđeg web servera je loša ideja. Isto važi za bilo koji spoljni zahtev. Koristite to samo kad je baš neophodno.
Popravite linkove. Neispravni linkovi neće usporiti sajt, ali će usporiti vezu korisnicima da sa vašeg sajta odu na neke druge web lokacije, što može prouzrokovati njihovo nezadovoljstvo. Neka vam pređe u naviku provera i ispravljanje neispravnih linkova.
Neka sve na vašem sajtu bude ažurirano. Ukoliko koristite platformu kao što je WordPress, onda ažurirajte sajt često. Ukoliko koristite gotove teme, takođe ih ažurirajte. Update teme može sadržati neke dodatke koji će doprineti ubrzanju i bezbednijem funkcionisanju sajta, a ništa nije sporije od sajta koji je hakovan i zaražen malware-om.
Zaključak
Nadamo se da smo vam u ovom tekstu dali dovoljno instrukcija da nakon njih možete da se pozabavite povećanjem brzine vašeg sajta. Koristite Google Pagespeed Insights Tool. Nakon toga pokrenite sajt i sami probajte da uočite da li vidite razliku.
Ništa neće učiniti vašeg korisnika srećnijim i voljnijim da se ponovo vrati na vaš sajt, kao dobro korisničko iskustvo i brz sajt. Tokom svih faza vizuelnog dizajna, mislite o tome da kada dodajete elemente na vaš sajt, da li je taj element potreban korisnicima i da li će eventualno njegovo dodavanje usporiti sajt.
Grid Layout je tema koja nije obrađivana mnogo na našem blogu, samo je pominjana usputno nekoliko puta. Grid Layout se koristi sve vreme i koristiće se još dugo, tako da je od presudnog značaja, pre samog početka dizajna upoznati se sa osnovim pravilima grid layouta.
Za početak, korišćenje Grid Layouta nije nešto što se koristi samo u stampanju ili u digitalnom dizajnu. Raspored je raspored, a dizajn je način prenošenja poruke koja ima više elemenata. Elementi moraju biti u skladu sa onim kako to vidi ljudsko oko i kako to mozak obrađuje. Jako je bitno olakšati ljudskom mozgu što je više moguće, bez mnogo dešifrovanja poruke.
Zašto ljudi ne razumeju Grid Layout?
Na sajtu Designers Insights postoji jedna dobra lekcija o korišćenju grid layouta. Ovaj članak je odlična lekcija ukoliko nikad niste koristili grid layout do sada. Pokriva upotrebu kolona i ostalih elemenata, pravila trećine. U pravilnoj upotrebi grid layouta je razlika između prosečnih i dobrih dizajnera.
Zamislite šta bi se desilo kada bi svaki dizajner usvojio pravila iz gorenavedenog članka. Svi bi izbacili isti dizajn. Dizajneri koji razviju osećaj za pravilnu upotrebu gridova će savete iz članaka koristiti da bi izbacivali najbolje radove.
Najlakši način da se objasni kako grid nema ograničenja su tipični testovi tipa – koliko kvadrata vidite. Pošto postoje kvadrati unutar kvadrata, pa je velika verovatnoća da ljudi neće videti pravilan broj kvadrata.
Kako i zašto?
Josef Muller Brockmann (May 9th, 1914 – August 30th, 1996) je smatran jednim od ključnih igrača u Svajcarskoj školi (Swiss School of international Style). Kada se ima u vidu vreme u kom je on radio, koje obuhvata Drugi svetski rat, Hladni rat i rastući uticaj razaranja i straha u Evropi, on je svakako postavio nove standarde u dizajnu na globalnom nivou.
Müller-Brockmann je više od običnog čoveka koji je pokušavao da kreira stil označen u svajcarskoj školi: Constructivism, De Still, Suprematism i Bauhaus i svi od njih su dizajnirali novi pravac koji je otvorio vrata kreativnom izražavanju u grafičkom dizajnu.
Njegov osećaj za dizajn iz 1950 godine sa ciljem da stvori postere koji komuniciraju sa auditorijumom. Ovo nije mala stvar jer je bila neophodna komunikacija preko jezičke barijere uz engleski, francuski, nemački i italijanski, pošto se ti jezici govore u Švajcarskoj. To je bila harmonija i jednostavnost ovih delova koji su uticali na posleratni svet koji je izgubio izgubio smisao nacionalizma i stavio u lekciju, sa ciljem globalizacije. Müller-Brockmann je ubrzo uspostavljen kao vodeći teoretičar razvoja grid dizajna, koji je oslobođen subjektivnog osećaja
Grid je prioritet i raspored tipografskih i slikovnih elemenata koja daju na značenje upotrebi boja, postavljanje elemenata u red, raspoređivanje od leve na desno, odozgo na dole.
Ukoliko ostavimo sopstvenoj intuiciji da uče o izgledu i dizajnu, čini se racionalnim da je grid sistem strogo odnos s leva na desno i odozgo na gore, matematički precizno. Ukoliko gledamo Müller-Brockmann-ove radove, videćemo uspešnu primenu dizajna i ilustracije elemenata koji spadaju zajedno, ali nisu vezane za isti raspored.
Müller-Brockmann je, uprkos tome što možete misliti da grid layout dozvoljava, čovek koji je u praksi znao kako da ga koristi. Nije sve bilo horizontalno i vertikalno. Ne treba strogo pratiti linije, one su oblasti u kojima je potrebno nešto naglasiti.
U WordPress temama se posebno razvija osećaj za dizajn. Postoji poseban stil dizajniranja za web sajtove časopisa, sa animacijama, paralax efektima. Web se menja i dizajn će morati da se menja, ali u principu će dizajn i dalje biti baziran na gridu jer su oni temelj, polazna tačka, koji drži elemente zajedno.
Piet Zwart je rođen 28.5, 1885 godine u Zaandijku u Severnoj Holandiji. Od 1902 do 1907 godine je pohađao Školu primenjene umetnosti u Amsterdamu koja je bila podeljena po disciplinama kao što su crtanje, arhitektura i primenjene umetnosti. On i kolege su zajedno sami učili, pošto nastavnici nisu bili prisutni tamo. Zwart je voleo da kaže kako je škola koju je pohađao nije imala nikakvu ideju niti program.
U nedostatku prave učionice, bitan je trening gde se može vežbati dizajn, posebno tipografija na netradicionalan način. Dok je jasnoća horizontalnog grid dizajna strogo definisanih slova i slika, normalna stvar, prema Švajcarskoj školi dizajna od 1940 do 1950, Zwart je dizajnirao iz duše.
Kao i kod veličine genija došlo je do samoinicijativnog kršenja pravila koja nikada nisu naučena ili niko nije brinuo o njima. On je takođe eksperimentisao u upotrebi fotografije koja je montirana. Ipak, uz svo kršenje pravila i eksperimentisanja, Zwart je bio zabrinut za očitavanjem, osećajući da tipografija mora biti jasna i funkcionalna.
Zvart je, uprkos tome što je bio buntovnik u dizajnu, i dalje želeo da svojim dizajnom prenese poruku. U svom komercijalnom radu nije imao običaj da vodi računa o proizvodnji kablova i kompaniji koja prodaje različite vrste ovih kablova. Koristio je grid da organizuje elemente radi lakšeg razumevanja.
Poruka je ono što pobeđuje dizajn kada je u pitanju raspored. Prilikom korišćenja Z layouta, jako je bitno znati da korisnici čitaju sa leva na desno, pa gledaju dole desno i dole levo (oblik slova Z). Ne postoji mnogo izbora, osim ako ne želite zbrku u poruci koju prenosite vašim dizajnom. Na prvi pogled grid dizajn deluje kao da je pun ograničenja, ali zapravo ih nema i mogućnosti su brojne.
Dizajner i edukator Ed Fella, je njegov rad okarakterisao kao stilski pogrešan. Voleo je da kaže da je njegov rad sirov i opsesivan. Ona ima moć i spontanost. Veliki poznavalac layouta, tipografije i dizajna, je voleo da govori inspirativne reči za sve dizajnere, kako je bio zainteresovan za grafički dizajn i umetnost i smatrao je da je grafički dizajn tip umetnosti koji koristi korisničke forme koje dolaze iz grafičkog dizajna, dekorativnih ilustracija i pisanja.
Fella je definitivno kršio pravila, ali je držao disciplinu u svom dizajnu, tako što je naglašavao poruku i stavljao je u prvi plan, koristeći grid u svakoj mogućoj prilici.
Grid Layout nije zastareli princip dizajna, bez obzira na to da li je za štampu ili za web, to je čist i moćan tip dizajna koji, uprkos tome što postoji odavno i dalje se koristi kao temelj na kome se gradi dizajn.
Fella je za sebe voleo da kaže da nikad nije voleo da poštuje pravila, ali da su njegovi profesori i mentori voleli da kažu da bi ste kršili pravila morate da ih znate i da bi ste kreirali sopstveni svet, morate razumeti pravi svet.
Ukoliko želite da kršite pravila, može se videti da je svima realan svet bio osnov za učenje i razvijanje dizajna. Pravila su potrebna da bi se razumeo raspored, tipografija, elementi boje, ilustracije i fotografije, kako se vide i kako ih ljudski mozak vidi i razume.
Kada projekat počne, jako je bitno da agencija razume značaj animacije u dizajnu interfejsa, zato što rad dizajnera može doprineti uspehu projekta generalno.
Prilikom početka rada na web sajtu, dizajneri se susreću sa mnogim izazovima. Postoji i posebna grana dizajna – dizajniranje animacija i nekih pokreta. Na prvi pogled deluje da je taj posao sekundaran i da nema mnogo udela u samom projektu, ali je sa druge strane jako bitno napraviti lepe animacije, koje će angažovati korisnika. Šta je lepa animacija?
Nažalost, mnogi development profesionalci animaciju smatraju minornom i dekorativnom. Posmatranje animacije kao nešto što je lepo, je jako teško shvatiti ozbiljno. Zapravo, animacija je suštinski deo procesa komunikacije sa korisnikom i razumevanja interaktivnog projekta.
Mi koristimo HTML za prikazivanje informacija i prezentovanje poruke korisnicima, ali nam animacija pomaže da radimo obe stvari bolje. Zamislite animaciju kao vodič koji korisnicima daje informaciju o istorijatu vašeg web sajta i samim tim sprečava eventualna zbunjivanja. Pomaže korisnicima da se orjentišu u okviru samog interfejsa, da ojačaju svoj vizuelni utisak.
Ljudski mozak i oko su projektovani tako da više pažnje obraćaju na pokretljive objekte i to je refleksna pojava kod ljudi. Mađioničari uz pomoć pokreta izvode trikove. Uz pomoć animacije možemo videti kretanje nekog objekta. Kretanje nije nikako suvišan detalj, samo može poboljšati korisničko iskustvo ukoliko je pametno i skladno odrađeno.
Animacija interfejsa popunjava praznine na sajtu na različite načine:
Sugeriše interakciju i stvara vizuelni stimulans, tako što korisnik u interfejsu vidi informacije o promenama
Obezbeđuje korisnicima vizuelni feedback i daje uputstvo šta dolazi sledeće
Predstavlja logički prelaz između ekrana. Prema istraživanjima, animirani element će pomoći korisnicima da upamte interfejs, jer je poznat i predvidiv.
Animacija komunicira bolje i bliže sa korisnicima od statićkih slika
Pametno urađene animacije obezbeđuju korisnicima bolje korisničko iskustvo
Sve veća upotreba uređaja sa malim ekranima nas primorava da implementiramo veliki interfejs u mali prostor. Bilo bi zbunjujuće i frustrirajuće za korisnika da razume vezu između layera, tabova i zoomova da nema dizajnera koji će kroz interfejs to objasniti. Kao i kod tipografije, koja ima funkciju za čitanje i dodavanje ekpresije sadržaju, animacija spaja slike, oblike i u harmoniji je sa dizajnom. Pažnja usmerena na detaljima kod pažljivo kreiranih animacija i tipografije je ono što razlikuje vrhunske sajtove od onih prosečnih.
Kako iz godine u godinu nastaje sve veći broj IT zanimanja, zanimanje koje je povezano sa izradom i dizajnom animacija je – UI Motion Designer ili UX Choreographer (termin koji će se verovatno upotrebljavati u budućnosti).
Ova cela priča predstavlja nešto novo u digitalnom svetu, koji se pokazao svoj značaj i koja zaslužuje veću pažnju i prostor, do te mere da bude grana zasebna za sebe, a ne umetnički pravac ili grana koja je povezana sa programiranjem. Kada kažemo nezavisna, podrazumevamo veći prostor i veću pažnju i veća zaduženja od onih standardnih da se uradi nešto lepo za sajt.
