Usability for dummies: Златните правила на уеб ползваемостта

Дори най-красивия дизайн на света е безсмислен ако не е лесен за ползване. Основната задача на всеки дизайнер, не само в уеб, е да направи продукта си лесен за употреба. В нашата сфера това е още по-важно, защото до голяма степен от това зависи успеха на проекта. 

Поканих няколко колеги уеб дизайнери, които работят по много проекти от много години и реших да ги попитам кои са базовите правила и логически връзки, които правят един уеб интерфейс ползваем. Кои са тези елементарни, сами по себе си закони, които заедно формират науката уеб ползваемост. Ето техните мнения, подредени в реда, в който ги получих.

*  *  *

Жоро Йорданов е едва на 19, а вече е работил за Diema TV, MM TV, както и за клиенти от САЩ, Европа и Австралия. В момента участва в дизайна и разработването на платени WordPress теми, класиращи се сред първите 50 от общо 1400 в ThemeForest

Мислете като потребители - какво и по какъв начин сте свикнали да ползвате, и защо. Бъдете внимателни с преоткриването на UI колелото, за да не се окаже, че сте преоткрили единствено високия bounce rate. :)

Правете clickable зоните си максимално големи, където е възможно. В примера съм показал най-често срещания случай - навигация. Погледнато от front-end dev перспектива - просто замествате margin с padding и правите линк елемента блоков. По този начин улеснявате не само потребителите с тъчскрийн устройства, но и всички останали. В тази връзка - етикетите (label) на формите също трябва да се връзват с полетата, за които се отнасят - с цел увеличаване на clickable зоната.

Чрез правилно комбиниране на типография и цветове, можете да постигнете добър контраст, който да помогне за подобряване на визуалната йерархия в проекта ви. Отделете време да проучите основните моменти в уеб типографията, както и акцентирането чрез контраст. Улесняването на потребителите ви си струва.

Празното пространство (т. нар. white space или “въздух”) е полезно. Разполагайте елементите в уеб сайта така, че отново да имате ясна визуална йерархия. Нека лесно се разбира за даден елемент от кой друг е част или с кой друг взаимодейства. Мисля, че митът “Потребителите не обичат да скролират” не е верен, така че възползвайте се от неограниченото (най-вече вертикално) пространство, което ви предоставя уеб.

*  *  *

Иво Иванов е на 24г. от Велико Търново. Работи като уеб дизайнер на свободна практика от 4 години, разбира от Photoshop, Illustrator, HTML5, CSS3, UI design, mobile interfaces и НЕ Е заинтересуван от абсолютно никакви предложения за работа на заплата и работно време.

Навигация. Добрата навигация е ключов елемент за всеки уеб сайт. Тя е проста и ясна, максимално кратка, добре структурирана (ако има падащи менюта). Показва на потребителя къде се намира, къде може да продължи и къде може да се върне и му помага максимално лесно да открие това, което търси.

Съдържание. Царят! Потребителя влиза в даден уеб сайт, не за да се радва невероятния му дизайн (освен ако не е дизайнер :D ) а заради съдържането му. Дизайна не трябва да пречи на съдържането, а да насочва вниманието на потребителите към него (например с повече отстояние от другите елементи, с рамки и боксове и т.н) . Не прекалявайте с прекалено дълги текстове, разделяйте ги на параграфи, използвайте картинки, които да допълват текста и да привличат вниманието - потребителите първо разглеждат после четат. Ако има сходни секции добър подход е да се структурират в табове… например описание на продукт: описание | доставка | коментари | т.н.

Подредба и последователност. Дизайна трябва да е подреден и последователен, да се спазват отстоянията и грида, да се открояват важните елементи (заглавни ленти, “Call to action” бутони) от второстепенните (текстове, списъци и др.) или иначе казано да се спазва йерархия на отделните елементи и секции от дизайна.

Не се опитвайте да откриете топлата вода! Няма нищо по добро от това да използваш вече утвърдили се и работещи принципи и техники, с които потребителите са свикнали да работят. Потребителя обича да се чуства умен, и няма време или желание да разучава нови и сложни неща.

Празно място. Не се чудете с какво да го запълните, а го използвайте за да предаде по добър фокус на важните елементи около него. Ако трябва да поберете много елементи в малко място, увеличете го така че пак да има празно място :)

*  *  *

Жоро Балинов е начело на Дизайн и Арт екипа в XS Software, където ръководи разработката на браузър базирани игри. Освен уеб дизайна, актуалните му страсти са лого дизайна, типографията и фотографията.

Стила ми на работа е минималистичен и за това основната мантра в дизайна за мен е “Less is more”. Старая се всички елементи и части от дизайна да имат конкретна функция и потребност, в противен случай са ненужни и дори пречат. Всички логични визуални решения са безкрайно прости и изчистени, те просто работят.

При графичното оформление винаги търся и държа на визуалния контраст, изразен както в контраста между цветовете, така и в местоположението и отношението на големината на елементите. Държа на правилното и логично разпределение на основните елементи от дизайна - навигации, бутони и т.н., както и тяхното цветово оформление, за да може потребителя да ги открие и работи с тях без да се замисля изобщо.

С навлизането на уеб шрифтовете се старая всеки нов проект да използва шрифтове от Google Web Fonts. До гуша ми е от до болка познатите шрифтове, ползвани в уеб страниците цяло десетилетие и се старая да ползвам новите шрифтове, като и не спирам да търся семплата и изчистена визия.

*  *  *

Цветелин Николов дълги години беше основния дизайн мозък в AtomSolutions. В момента работи по големи проекти в чужбина, като vcloud.tv и subs.tv.

Layouts / Grid: Да разбираме и ценим идеята на швейцарския грид, който е доказан с прецизността и гъвкавостта на швейцарско ножче.

Color - За използването на всеки цвят трябва да имаме причина – дори и да не ни харесва натрапващото и различаващото се червено, това няма никакво значение, когато бутон с този цвят се различава по-добре от всеки елемент във сайта.

Simplicity - Простота? “Добрият дизайн е… “, вече от всякъде чуваме как един дизайн трябва да е по-прост от молекулата на водата, но и до ден днешен правим сайтове пълни с безмислени facebook джаджи, twitter плугини, а вече и гугъл + благинки… Ако искате да стигнете до етап достъпност добре преценявайте добавките, който искате да имате, защото преди всичко е важно дали сайтът ще се зареди за по-малко от половин ден.

Формуляри - Страниците за обратна връзка или формуляри за получаване на жизнено важна информация са понякога решаващи за успеха. При наличието на минимални резолюции от 1024px е грехота да отделим 10% от екрана за най-важното! Правете формулярите ОГРОМНИ с добре изразени съобщения за грешки или успешно попълнени такива.

Типография - Ако Helvetica е парфюмът на града с трайна миризма над 50 години то би трябвало да има логично обяснение. Използвайте Helvetica. Шрифтът, който определено стой добре, когато го използваме в по-големи мерни единици, нещо, което определено ценя.

*  *  *

Георги Ангелов има дългогодишен професионален стаж в сферата на дизайна и интернет. Обича новите технологии, добрата кухня и всичко с вграден GPS.

Ползваемостта е фундаментална стойност за реализирането на един успешен сайт. В скромната си 10 годишна кариера като дизайнер съм научил нещо много важно, което искам да споделя: „Добрия дизайн е субективна величина, но успешния проект не е”. А за да се реализира успешен уеб сайт трябва неговите посетители да работят лесно, интуитивно и да се чувстват добре ползвайки го. 

Мисля да засегна най-важните от тях, но от страна на основната им концепция и насока, в която трябва да се ползват, а не чисто технически като код или конкретни структури. Все пак всеки има стил на работа, но е важно тези правила да се спазват, за да може потребителите ви да ползват с удоволствие вашия продукт.

Визуално отчетлив дизайн.

Може би едно от най-важните неща при създаването на добра ползваемост на един уеб сайт, е да определим неговите приоритети и цели и след това да ги изразим чрез визуално отчетливи елементи така наречената визуална йерархия.

Визуалната йерархия в общи линии е основен елемент (голяма графика, текста с най-контрастен цвят или най-голям размер на шрифта, call-2-action бутон) , вторичен елемен, няколко третостепенни елемента, който визуално с размерите или цветовете си определят, кой е най-голям по значение и кой го следва. По този начин се избягва така наречения визуален шум, който пречи на потребителя несъзнателно да се фокусира върху „важните” неща. Това е първа и много важна стъпка за моделиране на поведението на потребителя без да му се натрапваме със мигащи елементи (или падащи снежинки). 

Дръжте винаги най-важната информация над скрол-линията (FOLD). Не всички потребители ще си направят труда да скролнат страницата надолу, за да видят има ли нещо интересно там. 

Направете отчетливи интерактивните елементи (или както казваме на жаргон, нека е видимо ясно къде може да се цъка на сайта).Това са, контрастни линкове и подчертаваща линия, използването на един ясен и контрастен цвят, за да се  определят интерактивните зони. 

Вземете ли решение, придържайте се към него.

Вземете ли решение, каква ще е основната ви конструкция на сайта, къде ще се намират менютата ви, формата за вход на потребители и други основни елементи на сайта , се придържайте към тези решения и не ги променяйте в други секции на сайта. Потребителя свиква с първия дизайн, който види. Това означава, че ще се обърка/ядоса и най-вероятно ще напусне сайта, ако основното му меню не е на едно и също място или иконите с допълнителни опции. 

Мислете. Проектирайте. Създавайте адаптивни решения. 

Годината е 2012 и адаптивните решения ще са основна тенденция през тази година, за това проектирайте сайтовете си така, че да са адаптивни за различните резолюции и устройства. 

Адаптивния дизайн и технология позволява на нас създателите на уеб сайтове да моделираме дизайна според резолюцията и устройството, което посещава нашия сайт. Едно страхотно приложение на това е да държи важната информация винаги над скрол-линията.

Това в никакъв случай не са единствените правила за подобряване на ползваемостта на уеб сайта ви, но спазвайки ги ще подобрите изключително много начина, по който всеки едни потребител ще взаимодейства с проекта ви. Това от своя страна ще повиши значително нарастването на поставените цели. 

*  *  *

Eто и моите няколко прости правила, които винаги спазвам. Аз ще заложа на наистина дребни детайлчета, които смятам, че внасят яснота в един дизайн и помагат на потребителя бързо да осъзнае какво се случва. 

  • Клишетата са най-добрия ти приятел. Ако можеш да използваш клиширано интерфейс решение използвай го, защото хората вече знаят как да го използват.
  • Светата троица: hover-active-selected. Винаги активните елементи имат hover, вдлъбват се когато ги кликаш и избрания елемент от списъка винаги е маркиран. Това е мега дреболия, но помага на потребителя да разбере, че интерактването с даден бутон е било успешно, т.е бутона е кликнат → очаквай резултат.
  • Не мисли какво да добавиш, мисли какво да махнеш. Вниманието на потребителя не е безкрайно. Особено в първата версия на даден проект е важно да се придаде тежест на най-важната функционалност и ненужните неща да са сведени до минимум. Това важи и за рекламите…
  • Ако всичко е на фокус значи нищо не е на фокус. Внимавай с визуалната йерархия. Остави повече пространство около по-важните неща, направи ги по-големи, по-ярки и по-контрастни.

Да, повторих някои от правилата, споменати от колегите по-горе, но това само доказва колко са важни те. Съжалявам, ако статията е малко разностилна, нехомогенна и трудна за четене - това е защото са я писали 6 различни мозъка без да общуват помежду си.

Осъзнавам, че темата за уеб ползваемостта далеч не се изчерпва със съдържанието на тази статия. С нея просто скрачнахме повърхността. Важни са още много неща - скоростта с която се зарежда страницата, скоростта с която интерфейса реагира на командите на потребителя, контекста под който потребителя се е озовал на страницата и какво ли още не. Ето някои полезни линка на английски, с които да продължите човъркането си в тази тема:

Оставям коментарите отворени за още идеи за малки и големи правила, които спазвате когато проектирате даден интерфейс. Ако някой колега, който не е бил сред поканените иска също да разкаже нещо полезно може да използва коментарите или да напише свой блог пост - с удоволствие ще сложа линк от тук за да обогатим статията.

Благодаря на колегите за участието и се надявам, че сме били полезни. Успех :)

*  *  *

Edit: Крис постна своите препоръки за ползваемост в блога си. Някой друг престрашил се?

1 month ago ·
> ← Previous post · Home · Next post →