Веб дизајн: савети за изглед и употребљивост странице

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

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

Типографија која се лако чита

• Највише два, евентуално три фонта. Један за наслове, један за текст. Сваки следећи фонт чини страницу немирнијом, а сваки додатни веб фонт и успорава учитавање.
• Довољно велико слово. За основни текст најмање 16 пиксела; на телефону мање слово тера корисника да зумира.
• Дужина реда од око 60 до 80 знакова. Предугачки редови се тешко прате, па текст на широком екрану не треба развлачити преко целе ширине.
• Проред око 1,5. Тесно сложен текст изгледа као зид и тешко се чита.
• Наслови који се разликују од текста величином и дебљином, тако да се страница може „скенирати“ погледом.
• Фонт који подржава наша слова. За сајт на српском проверите да фонт има сва ћирилична слова и, ако имате и латиничну верзију, слова č, ć, ž, š, đ – иначе ће прегледач нека слова приказати другим фонтом.

Боје и контраст

• Мала палета. Основна боја, једна боја за истицање и неутралне боје за позадину и текст су довољне за цео сајт.
• Довољан контраст текста и позадине. Светлосиви текст на белој позадини или сиви текст на тамној изгледа елегантно, али се тешко чита, нарочито на телефону напољу. Смернице за приступачност (WCAG) препоручују однос контраста од најмање 4,5:1 за обичан текст.
• Боја за истицање само за оно што је важно – дугмад, линкове, упозорења. Ако је све истакнуто, ништа није.
• Информација не сме да зависи само од боје. Грешка у форми треба да има и текст, не само црвени оквир, јер део људи не разликује боје добро.
• Тамна тема, ако је имате, треба да буде посебно подешена, а не само обрнуте боје: чисто бела слова на чисто црној позадини замарају очи, па се користе мало ублажене нијансе.

Бели простор и визуелна хијерархија

Бели (празан) простор није изгубљен простор. Размак између делова странице показује шта иде заједно, а шта је одвојено, и даје оку места да се одмори. Страница натрпана до ивица делује непрегледно чак и када је садржај добар.

• Једна главна ствар по екрану. Посетилац у првих неколико секунди треба да види о чему је страница и шта може да уради.
• Важније је веће и више. Величина, положај, боја и размак говоре шта је важно, пре него што се ишта прочита.
• Поравнање по мрежи. Елементи поравнати по истим линијама изгледају уредно; насумично постављени делују аматерски.
• Кратки пасуси и поднаслови. Људи на вебу текст углавном прелете погледом, па га треба поделити на делове који се лако препознају.

Дугмад и позив на акцију

• Дугме мора да изгледа као дугме – испуњена боја, довољна величина, јасан текст. Посетилац не треба да погађа шта је кликабилно.
• Текст дугмета каже шта ће се десити: „Пошаљи упит“, „Погледај цене“, „Преузми упутство“, уместо општих речи као што су „Кликни овде“ или „Пошаљи“.
• Један главни позив на акцију по делу странице. Када су три дугмета исте боје и величине једно до другог, посетилац често не изабере ниједно.
• Довољно велика површина за прст – на телефону дугмад и линкови треба да буду довољно велики и размакнути да се не промаше.

Форме које се попуне до краја

• Само неопходна поља. Свако додатно поље смањује број људи који форму пошаљу. За први упит често су довољни име, email и порука.
• Ознака изнад поља, а не само сиви текст у пољу који нестаје чим корисник почне да куца.
• Јасне поруке о грешкама, уз поље на које се односе, са објашњењем шта треба исправити.
• Одговарајућа тастатура на телефону – поље за email, телефон или број треба да буде тако и означено (type="email", type="tel"), па телефон сам понуди праву тастатуру.
• Потврда после слања, да посетилац зна да је порука стигла и шта следи.

Слике и иконе

• Слике треба да показују нешто стварно – ваш производ, ваш простор, ваше људе, пример рада. Генеричке фотографије „насмејаних људи у канцеларији“ посетиоци препознају и прескачу.
• Један стил икона на целом сајту, исте дебљине линија и величине.
• Без важног текста на сликама. Текст у слици не може да се копира, преведе ни увећа, а претраживачи и читачи екрана га тешко читају.
• Описни алт текст за слике које носе информацију, а празан алт за чисто декоративне.
• Одговарајућа величина датотеке – слика не треба да буде већа него што се приказује.

Анимације и ефекти

Овај савет је из старог текста и важи и данас: и најлепши ефекти брзо досаде, а не смеју да одвлаче од информација. Анимација има смисла када нешто објашњава – на пример, показује да је ставка додата у корпу или да се мени отворио.

• кратке, дискретне анимације (испод пола секунде) уместо дугих уводних ефеката;
• без аутоматског покретања звука и видеа са звуком;
• без искачућих прозора који прекривају садржај чим се страница отвори;
• поштовање подешавања „смањи покрете“ (prefers-reduced-motion) које неки корисници укључују у систему.

Приступачност

Приступачан сајт могу да користе и људи који слабије виде, користе само тастатуру или читач екрана. Већина правила приступачности чини сајт бољим и за све остале:

• довољан контраст и могућност увећања текста без „ломљења“ странице;
• видљив оквир фокуса када се кроз страницу креће тастером Tab;
• линкови чији текст има смисла и ван контекста („Ценовник израде сајта“, а не „овде“);
• наслови (H1, H2, H3) поређани логичним редом, јер се по њима крећу и корисници читача екрана;
• ознаке за сва поља у формама и алт текст за слике.

Доследност кроз цео сајт

Исти елементи треба да изгледају и понашају се исто на свим страницама: мени на истом месту, дугмад истог облика, линкови исте боје, наслови истог стила. Посетилац тако једном научи како се сајт користи. Најлакше је то постићи ако се на почетку направи мали скуп правила – боје, фонтови, величине, размаци, изглед дугмади и форми – па се свака нова страница прави од истих делова.

И још два савета из старог текста који не застаревају: не објављујте недовршене странице са натписом „у изради“ и линкове који воде нигде, и редовно ажурирајте садржај – ништа не изгледа горе од најаве акције која је истекла пре неколико година.

Шта је из старих савета застарело?

Ова страница је некада била превод немачког текста о веб дизајну из периода 1999–2004. Неки савети из тог времена данас више не важе:

• Flash и оквири (frames) – више се не користе; Flash прегледачи не подржавају од 2021. године.
• Тестирање дубине боја од 16 и 32 бита – данас се тестира на различитим величинама екрана и уређајима, пре свега на телефонима.
• „Фонтови морају бити инсталирани на рачунару посетиоца“ – веб фонтови се учитавају са сајта, па ово ограничење више не постоји, али сваки фонт додаје време учитавања.
• Мета кључне речи и ручна пријава сајта претраживачима – Google не користи meta keywords, а нове странице проналази сам, преко линкова и sitemap-а.