Мобиле Веб Десигн 10 савјета за бољу употребљивост

Очекује се да ће се мобилно претраживање интернета претворити у сљедећу велику интернетску платформу. Сада је лако претраживати мрежу са скоро било ког места користећи мобилне уређаје који се уклапају у руке због технологије. Бити кратки у доброј употребљивости у мобилном веб дизајну, отежава прегледавање различитих популарних мобилних сајтова. Дизајнирање за мобилне уређаје мора бити једноставније од стандардног веб сајта и више засновано на задацима да би се посао обавио јер корисници траже нешто специфично и хитно.

Требало би да узмете у обзир како да користите најнижи минимум расположивог простора за ваше главне садржаје и да останете занимљиви за мобилне кориснике. Избегавајте велике слике и фласх анимације јер ће успорити ваш сајт. Запамтите да је функционалност важнија од стила за мобилне веб-локације. Ако ваш сајт није кодиран и дизајниран како треба, то би могло изгледати боље на једном телефону, најгоре на другом или још горе, не приказује се уопште. Тестирајте, потврдите и проверите да ли је компатибилан са свим мобилним уређајима.

Да би вам помогао у креирању веб-локације која није доступна само на десктоп или лаптоп рачунарима, већ и на мобилним уређајима, ево неких ствари које треба размотрити на мобилном веб-дизајну са огледним сликама заједно са директном везом за верзију мобилног веб-сајта.

1. Одлучите се за резолуцију екрана

Мобилни свет садржи богату варијацију дизајнерских разматрања од различитих величина екрана и резолуције до различитих облика. Циљ је да се постигне равнотежа између довољне ширине екрана и величине публике. Сазнајте спецификације тренутних мобилних уређаја и користите најбољу процену. Оно што је изазов за мобилне програмере је начин да се корисник на одговарајући начин прикаже кроз читав низ величина екрана без потребе да поново креира странице за различите платформе.

Ево листе веб резолуција које су популарне на мобилним уређајима од фебруара 2011. године коју је представио Укбоотх.цом са њиховим објављеним чланком, Разматрања за мобилни веб дизајн (Дио 2): Димензије, би Давид Леггетт. Аутор објашњава неколико тачака о димензијама екрана и решењима за дизајн распореда.

2. Подијелите веб странице на мале дијелове

Дуги дијелови текста могу бити тешко читати, тако да их стављање на неколико страница ограничава помицањем у једном смјеру. Ослободите се садржаја ниског приоритета. Држите се само једне колоне текста која омотава тако да нема хоризонталног скроловања.

За пример испод, верзија мобилног веб сајта ЦБС Невс приказује само главни део вести и разбија новинске чланке у мале делове. Док се Треехуггер представља са својим недавним чланцима и најновијим твеетовима са неким од карактеристика целог сајта. Обе локације имају корисник клик на текстуалну везу да би погледао остатак чланка.

ЦБС Невс

Дрвољубац

3. Поједноставите дизајн

Једноставност је једнака употребљивости. Пустите их да се крећу по локацији без потешкоћа. Избегавајте укључивање табела, оквира и другог форматирања. Ако користите паддинг, запамтите да га држите на апсолутном минимуму далеко мање него што бисте користили за нормалну веб страницу. У поређењу са десктоп рачунарима, што више кликнете на линкове на мобилним веб локацијама, више ћете чекати због времена учитавања. Уз то, морате уклонити и поједноставити Вашу веб локацију с балансом између садржаја и навигације.

За наш примјер, веб страница мобилне верзије Бест Буи наводи само најосновније категорије производа које смањују разину хијерархије садржаја. Док почетна страница ИоуТубе-а за мобилне уређаје приказује само четири најновија видеа у центру пажње.

Најбоља куповина

ЈуТјуб

4. Опција за преглед целог сајта

Обезбедите везу за мобилне посетиоце да се врате на вашу пуну веб локацију да би корисник пронашао и погледао други садржај и функције које су доступне само верзији сајта на радној површини. Ваши гледаоци ће засигурно урадити много вертикалног померања, тако да им помогните са линковима "Назад на врх" тако да могу да пређу на врх странице.

Као пример, Арс Тецхница има свој линк дугме на стандардном сајту постављеном на наслов. Док Схангри-Ла има пуну веб страницу постављену на подножје.

Арс Тецхница

Схангри-Ла

5. Положај навигације

Упознајте своју публику и будите свјесни онога што траже. Сазнајте како ће се кретати кроз ваш сајт. Поставите навигациони мени испод садржаја ако циљани мобилни корисници желе да брзо виде промену садржаја. Садржај и наслов морају бити први видљиви да не би били у стању да прегледају садржај странице. За кориснике који желе да се крећу одређеном категоријом одмах, поставите навигацију на врх странице. У наставку се налазе различити узорци навигационог положаја који се користе у мобилном веб дизајну.

Д&Г

Политицо

Дневни хороскоп

6. Користите текстуалне везе

Ваш главни вебсајт може да користи меније, превртања или друге фенси справе, али мобилни претраживач вероватно неће. Имајте на уму да динамични елементи странице и графички линкови троше ресурсе, па се зато одлучите за добро означене текстуалне везе.

А Лист Апарт

Реддит

7. Направите разлику између изабране везе

Померањем курсора надоле прелистава се страница и истиче све везе одједном. Дакле, важно је да се кориснику јасно каже који је предмет у фокусу. Ово се може урадити променом фонта и боје позадине линкова и дугмади или једноставно додавањем неке облоге око веза како би се подручје које се може кликнути повећати око 44пк за 44пк. Геек Скуад и Диесел су користили велике фонтове за текст који се може кликнути.

Геек Скуад

Диесел

8. Балансирајте везе

Свако преузимање странице троши време и системске ресурсе, од којих је последња у недостатку, па покушајте да не приморате посетиоце сајта да копају кроз мноштво страница како би приступили траженим информацијама. Направите равнотежу између броја линкова на свакој страници и дубине странице.

Флицкр

Твиттер

9. Смањите унос текста корисника

Тешко је уносити текст у мобилним верзијама веб локација. Уместо тога замените радио дугмадима или листом како би могли да се одлуче за оно што им је потребно. Запамтите да корисници мобилних телефона немају приступ конвенционалној тастатури и мишу. Што је УРЛ краћи, то је боље јер је монотоно уносити дугачке УРЛ-ове.

За наш пример испод, Федек је користио контролну листу и падајуће меније. Док је Тумблр навео да изаберете језик помоћу падајућег менија.

Федек

Тумблр

10. Нема попс или освежавања

Мобилни претраживачи обично не подржавају искачуће прозоре. А ако јесу, имали би веома уски простор за попуњавање. Држите се подаље од употребе како бисте избегли непредвидиве резултате. Такође, немате периодично освежавање страница да бисте избегли попуњавање ограничене меморије уређаја. Нека корисник освежи садржај.

Укратко

Будите креативни и примените свој мобилни веб дизајн на нов начин. Учините свој садржај довољним и употребљивим. Дајте корисницима оно што желе, када то желе. Корисници не желе да копају дубље на сајт само да би пронашли оно што траже у мобилном вебу.

Да ли имате жељене мобилне сајтове који су вас заиста инспирисали? Можете ли подијелити неке од савјета за мобилни веб дизајн? Обавестите нас!

Додатна литература

1. Респонсиве Веб Десигн (алистапарт.цом)
2. Учините ваш сајт Мобиле Фриендли (тхинквитамин.цом)
3. В3Ц мобилеОК Цхецкер (в3.орг)
4. иПхоне Симулатор