„Елеганција се постиже када се одбаци све што је сувишно, а људско биће открије једноставност и концентрацију: што је држање једноставније и трезвеније, то ће бити лепше.“ -Пауло Коељо

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

Када је реч о вебу, људи то не желе научити ствари, они то желе урадити ствари. Постоји много примера на мрежи где дизајнери одлучили да се фокусирају само на визуелну привлачност и на тај начин жртвовали употребљивост. Претпоставили су да ће „вау тренутак“ који је покренуо дизајн сам по себи бити довољно моћан да ангажује корисника. Али нажалост, корисници тешко разумеју кориснички интерфејс, имају истинске потешкоће при коришћењу веб локације, а стопе одбијања веб странице су нагло порасле.

с цорп вс ц цорп

Као што Кате Руттер изјавио, „Ружни, али корисни адути прилично, али бесмислени.“ Кључ ефикасног коришћења образаца и трендова веб дизајна је пронаћи равнотежу између онога што изгледа естетски и места где они додају вредност.

Погледајмо неке уобичајене УКС грешке.

Уобичајена грешка у веб дизајну бр. 1: Велика, фиксна заглавља

Све више и више лепљива заглавља може се видети на веб локацијама. „Блокови марке“ и навигацијски менији који имају фиксни положај и заузимају значајну количину простора. Они остају залепљени за врх прозора прегледача („лепљиво заглавље“) и често блокирају садржај док се помера испод њих.

Нека заглавља на веб локацијама великих марки имају висину преко 150 пиксела. Где је њихова вредност? Фиксни елементи, попут лепљивих заглавља, могу имати стварне користи , али веб дизајнери треба да буду опрезни када их користе - треба размотрити неколико важних УКС проблема.

Лепљиво Нав заглавље може бити превелико за удобност

Ако је одлука о лепљивом навигацијском заглављу већ донета, најбоље је да је тестирате са корисницима. Уобичајена грешка УКС-а је претјеривање и попуњавање љепљивог нав заглавља садржајем. Са фиксним заглављем, прегледање би и даље требало да буде угодно за посетиоце. Не проналажење правог биланса може резултирати остављањем мале количине простора за главни садржај и загушујућим, клаустрофобичним искуством на сајту за посетиоце.

Понекад постоји једноставно решење са ЦСС-ом: чинећи лепљиво заглавље благо прозирним, људи и даље могу да виде садржај кроз њега док се крећу, што чини подручје садржаја значајнијим.

Ево примера високог лепљивог заглавља: АТП-ова страница профила играча на Роџеру Федереру .

Висина лепљивог заглавља ове веб странице је преко 180 пиксела! То је преко 30% целокупне висине странице на неким преносним рачунарима: лоше корисничко искуство које се може избећи.

Не узимајући у обзир лепљиво Нав Хеадер УКС издање на мобилном уређају

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

Тхе Кафа са полицајцем сајт такође има фиксно заглавље, али много мање - високо мање од 80 пиксела.

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

Уобичајена грешка у веб дизајну бр. 2: танки, лагани фонтови

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

Циљ читавог текста на веб локацији је да буде читљив, а танки тип може озбиљно утицати на читљивост. Неће сви посетиоци гледати веб локацију на дисплеју који добро приказује танки тип. Неки светлосни тип је изазовно читати на иПхоне-у или иПад-у са Ретина екраном.

Текст мора бити читљив. Ако корисници не могу да прочитају речи у вашој апликацији, није важно колико је лепа типографија.

Смернице за Аппле Интерфаце

Аппле се односи на мобилне апликације, али исти принцип важи и за веб локације. Читљивост је обавезна, а не необавезна за добру употребљивост. Нема смисла стављати садржај на веб страницу ако је нечитљив.

Ево неколико уобичајених УКС грешака које треба размотрити пре употребе танког типа:

Коришћење танких и лаганих фонтова јер је у тренду

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

Најбоље је тестирати веб локацију на различитим уређајима и величинама екрана како бисте били сигурни да је сав текст веб странице читљив.

Што нас води до следеће уобичајене УКС грешке:

Не тестирање читљивости текста на свим главним уређајима

Танак, лаган тип може изгледати добро на скупим, фино подешеним мониторима многих дизајнера, али мора се узети у обзир и просечан корисник који често види наше дизајне на јефтинијим, неквалитетним екранима. Најбоља пракса је проверити како фонтови изгледају на свим главним уређајима: стоним рачунарима, преносним рачунарима, таблетима и паметним телефонима.

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

Уобичајена грешка у веб дизајну бр. 3: Текст са малим контрастом

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

Већ смо покрили танке фонтове, али постоји још већа замка: а комбинација лаганог писма са малим контрастом који озбиљно омета УКС због лоше читљивости. Дизајнери би требало да учине све што могу како би избегли ову замку употребљивости.

ллц ц цорп вс ллц с цорп

Ниски контраст текста у телесној копији

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

Не тестирање контраста текста

На Интернету постоји изврстан алат за проверу контраста Цолорабле то ће помоћи дизајнерима да поставе исправан контраст текста према Смернице за приступачност веб садржаја . Једном када дизајнери знају да користе прави контраст текста, могу прилагодити друге боје на својој веб локацији и обавити брзе вишеструке тестове уређаја / корисника како би били сигурни да је текст читљив.

Уобичајена грешка у веб дизајну бр. 4: Отмица свитака

Још један тренд високог ризика који се увећава на Интернету је „отмица помицања“. Веб локације које примењују овај тренд преузимају контролу над померањем страница (обично са ЈаваСцрипт-ом). Када се људи сусретну, више немају контролу над помицањем странице и нису у стању да предвиде њено понашање, што лако може довести до забуне и фрустрације. То је ризичан експеримент који би могао наштетити употребљивости веб страница и у најгорем случају подстакнути „ бес рачунара . '

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

Не тестирање са корисницима из стварног света

Када позајмљујете трендовске идеје или обрасце корисничког интерфејса, најбоље је да тестирате прототип веб странице на стварним корисницима како бисте избегли УКС проблеме. Једноставно тестирање употребљивости откриће да ли је примена отмице померања изводљива или не. Без тестирања, дизајнери немају начин да сазнају да ли ће отмица свитака успети, а доношење претпоставки је често скупо.

Тумблр , популарна лична веб локација за блогове, користи отмице свитака на њиховој почетној страници. Иако би то могло бити ризично, сигурно је претпоставити да добро познају своју циљну публику и кул, модерно корисничко искуство које желе да представе. Када посетиоци веб локације почну да се крећу, свитак се отима и људи се преусмеравају у следећи одељак.

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

Уобичајена грешка у веб дизајну бр. 5: Карусели

Карусели - презентација за ротирање кроз различите садржаје - врло су чести на вебу, посебно на одредишним страницама и почетним страницама. Иако могу бити корисни, имају бројне проблеме са употребљивошћу и стога се квалификују као још једна уобичајена УКС грешка. Према Ниелсен Норман Гроуп : ' људи се често одмах померају поред ових великих слика и пропуштају сав садржај у себи . “ То би могло негативно утицати на УКС јер посетиоци можда неће видети драгоцени садржај на неким ротирајућим слајдовима.

Вртуљци веб локација можда не пружају вредност корисницима

Ако се правилно уради, рингишпил може да привуче кориснике великим упечатљивим сликама. Невоља је у томе што вртуљци често не додају никакву додатну вредност, већ су једноставно ту за украс и укључени су само зато што их сви остали користе. Начин да тестирате да ли вртешка локације има смисла: запишите три предности које вртиљак пружа посетиоцу. Ако се не могу пронаћи три значајне користи, то не додаје никакву вредност.

Тхе Претходна и следећи Стрелице имају малу видљивост

Важне информације у вртуљку веб странице могу остати скривене ако следећи и Претходна стрелице се не могу открити. Контроле би такође требале бити компатибилне са додиром за мобилне уређаје.

Често не постоје стрелице за управљање рингишпилом; укључене су само тачке индикатора слајда за помицање слајдова. Међутим, они су често ниског контраста, имају малу видљивост и недостаје довољно велик клик на или додирљиво подручје . Мали циљеви на које је могуће кликнути могу довести до лошег УКС-а, фрустрираног посетиоца веб странице и брзог изласка са веб локације.

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

Закључак

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

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

Веб дизајнери могу да осмисле најхладнију шему боја, најфинију анимацију помицања или нај фантастичније ефекте паралакса, али ако људска интеракција пати због тога, УКС ће бити лош и људи ће брзо ићи даље. Још један сајт је удаљен само један клик.

• • •

Даље читање на блогу АпееСцапе Десигн:

• Одзивни дизајн - Најбоље праксе и разматрања
• Приступање процесу дизајнирања веб страница из прегледача
• Кодирање за дизајнере - колико треба да знамо?
• Шта је УКС дизајн? Уобичајене заблуде и УКС митови
• Најбоље праксе и уобичајене грешке у дизајнирању корисничког интерфејса

Разумевање основа

Шта је фиксно заглавље?

Фиксно заглавље обично се односи на траку за навигацију у фиксном положају у веб дизајну која се „лепи“ за врх прозора прегледача. Међутим, честа је УКС грешка када се користи, а да се не гледа како то утиче на употребљивост веб локације, посебно на мобилним уређајима. Најбоље је да га не користите са мобилним прегледачима.

послови информатике који путују

Која је корист одзивног дизајна?

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

Зашто нам је потребан прилагодљиви веб дизајн?

Разлог зашто нам је потребан прилагодљиви веб дизајн је тај што ће предузећа без мобилне веб локације бити заостала. Већина посетилаца веб страница ће престати да ступају у интеракцију са веб локацијом која се не приказује добро на њиховом уређају. Штавише, Гоогле рангира веб локације које не реагују ниже у претрази.

Шта је нормална тежина фонта?

Нормална тежина фонта намењена је подешавању тежине (подебљања) фонта, а односи се на „нормалан“, или редован изглед фонта. Остале тежине фонтова могу бити тешке, подебљане, полу подебљане, танке, лагане итд. Које се односе на варијанту типа дебљине нормалног фонта.

Шта је контраст у теорији боја?

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

Шта је добар УКС?

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