not found
Юзабилити

8 принципов в веб дизайне, которые следует знать!

Автор: Аслан Патов24.12.2013

Дизайн сайта важнее для конверсии чем мы думаем. Можно бесконечно внедрять различные стратегии и тактики для увеличения конверсии, но слабый дизайн, а следовательно и юзабилити, не позволят полностью раскрыть потенциал сайта. Дизайн – это не просто основа юзабилити, это маркетинг. Это “язык” вашего продукта, который может рассказать о себе, а порой, понравиться с первого взгляда. Но для того, чтобы получить дизайн, который соответствует общепринятым стандартам, необходимо следовать нескольким принципам.

1. Визуальная иерархия

Мы уже затрагивали эту тему в одной из статей и теперь снова возвращаемся к ней. Визуальная иерархия является одним из самых важных принципов эффективного веб дизайна и юзабилити. Это, по сути, тот порядок, в котором человеческий глаз воспринимает и видит вещи. Чтобы понять что это такое, достаточно лишь посмотреть на рисунок ниже. Расставьте треугольники в порядке важности, что первое приходит на ум? not found Не зная ничего об этих фигурах нам удается с легкостью их проранжировать, не так ли? Это и есть визуальная иерархия. На вебсайтах достаточно элементов различной степени важности – формы, кнопки, предложения и пр., и не все они должны иметь одинаковую визуальную иерархию. Если на главной странице сайта 5 кнопок все ли они одинаково важны? Куда бы вы хотели направить пользователя? Решайте этот вопрос поскорее и выделите тот блок или кнопку, где необходимо сконцентрировать больше внимания. Иерархия не обязательно должна исходить из размера. Визуальной иерархией может “командовать” и цвет. Порой, мы видим как платформы электронной коммерции выделяют и цветом, и размером кнопку добавления товара в корзину. Но как определить какие элементы следует выделять? Это должно исходить из цели. Если у бизнеса или у вас лично отсутствует конкретная цель, вы не сможете корректно расставить приоритеты, а значит и использовать метод визуальной иерархии.

2. Золотое Сечение

Золотое Сечение является магическим числом 1.618 которое делает вещи пропорциональными и эстетически правильными. По крайней мере, так все думают. В дополнение к этому есть также и так называемая Последовательность Фибоначчи, где каждая следующая цифра является результатом суммы двух предыдущих: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 и так далее. Интересным в этом деле является то, что две эти вещи, а именно Золотое Сечение и Последовательность Фибоначчи, казалось бы, не имеющие друг к другу отношение, имеют один и тот же итог. Вот так выглядит Золотое Сечение: not found Многие архитекторы и художники использовали это правило в своих работах. Достаточно лишь посмотреть на Пантеон построенный в Древней Греции: not found Спрашиваете а как это правило использовать в веб дизайне? Взглянем на Твиттер. not found Вот комментарий креативного директора Твиттер:

To anyone curious about #NewTwitter proportions, know that we didn’t leave those ratios to chance. This, of course, only applies to the narrowest version of the UI. If your browser window is wider, your details pane will expand to provide greater utility, throwing off these proportions. But the narrowest width shows where we started, ratio-wise. @stop

Итак, если ширина вашего макета равна 960px, поделите эту цифру на 1.618 (=593px). Получится, что ширина ленты активности слева будет равна 593px, а правого блока 367px. Если высота сайта составляет 760px, пропорции составят 470px и 290px (760/1,618=470)

3. Закон Хикса

Закон Хика гласит что каждая дополнительная возможность выбора увеличивает время необходимое на принятие решения. Каждый из нас ощущал это на себе: в ресторанах, где громадное меню не дает возможности сосредоточиться на чем-то одно, и, порой, даже заставляет совершать ошибочные действия; в магазинах, куда, казалось бы, мы пришли за одними вещами/продуктами, а покупаем совсем другие или не покупаем вовсе. Дали бы нам на выбор всего 2-3 вещи, решение давалось бы легче и быстрее. Чем больше выбора мы даем, тем проще людям ничего не выбрать… Спрашиваете, а как вам поступить если каталог слишком обширный, а категорий миллион? В наше время это, к сожалению, не редкость, но выход есть – фильтры! Чем лучше и понятней фильтры и методы сортировки, тем проще становится делать выбор.

4. Закон Фиттса

Закон Фиттса гласит, что время, необходимое для перемещения к площади цели, (напр.нажатие на кнопку) является соотношением дистанции до объекта и размера самого объекта. Другими словами, чем больше и ближе к нам цель, тем проще нам ее использовать. Это не значит что больше значит лучше. Кнопка на полэкрана не лучшая мысль и для этого, нам не нужно проводить математических исследований. Но не следует заблуждаться – закон Фиттса не так прост. Так, юзабилити маленькой кнопки возрастет значительно при 20% увеличении самой кнопки, но мы не достигнем того же результата с бОльшими объектами, увеличив их на те же 20%. Величина объекта должна соответствовать частоте его использования. Для того чтобы понять что именно используется чаще всего, достаточно лишь посмотреть аналитику (статистику) по данному объекту или сразу группе объектов и увеличить те из них, что пользуются наибольшей популярностью. Предположим, на странице “Контакты” вашего сайта, в форме обратной связи есть две кнопки: “Отправить” и “Очистить” – понятно, что 95% случаев использования придется на кнопку “Отправить”, соответственно именно она должна быть больше в этой группе.

5. Правило третей

Использовать фотографии или картинки в статьях – это прекрасная идея! Они помогут нам наладить процесс коммуникации и, несомненно, улучшат способность доносить информацию быстрее. Лучшие примеры изображений используют “правило третей”, когда любое изображение делят на девять равных квадратов благодаря двум вертикальным и двум горизонтальным линиям, а значимые объекты на фотографии размещают или вдоль этих самых линий, или на их пересечении. Использование этого метода сделает сайт привлекательнее, а статьи интереснее. Вот несколько примеров: not found

6. Принципы Гештальта

Принцип Гештальта – это пространственно-наглядная форма воспринимаемых предметов, чьи существенные свойства нельзя понять путём суммирования свойств их частей. Если гвоорить простым языком, то по мнению Гештальта, человеческий глаз в первую очередь видит объекты целиком, и уже потом переходит к восприятию деталей. Вот что имеется ввиду: not found Обратите внимание, что собаку удается заметить без фокусировки на тех пятнах из которых она “состоит”. В этом суть этого принципа. Люди видят целое, и уже затем переходят на детали. Также и с дизайнами наших сайтов – сначала посетитель видит общую картину, а не отдельные заголовки, изображения, меню или другие элементы.
Существует 8 так называемых законов дизайна Гештальта, которые позволяют нам понять как именно работает восприятие у людей.

1. Закон близости.

Этот закон Гештальта о группировке элементов, которые находятся в непосредственной близости друг от друга в пространстве. Человеческое восприятие, в результате группировки этих элементов, создает единый образ или объект.

not found

В веб-дизайне этот закон работает просто: элементы, которые, по замыслу, не должны иметь ничего общего, соответственно не должны восприниматься и как единое целое. И наоборот – если мы хотим передать видение единого целого, мы должны сочетать определенные элементы.

2. Закон схожести.

Элементы схожие по форме, цвету, содержанию или другим параметрам объединяются в группы.

not found

3. Закон замыкания.

Человеческий разум всегда ищет завершенность. Наше восприятие само дорисовывает картину с недостающими элементами. Данный принцип часто используется в логотипах.

not found

4. Закон симметрии (простоты).

Наш разум пытается выстраивать симметрию для объектов или воспринимает их таковыми, находя центральную точку вокруг которой и сторится объект. Нашему мозгу нравится это делать: простые линии, изгибы и формы предпочтительны, как и симметрия и баланс.

5. Закон общей судьбы.

Предполагается, что сгруппированные элементы движутся совместно и ведут себя, как единое целое.

6. Закон хорошего продолжения.

Аналогично указанному выше разум склонен продолжать формы и линии за пределы их конечных точек.

7. Закон выделения.

Разум воспринимает лучше те фигуры или элементы, что имеют то или иное выделение на фоне заднего плана.

8. Закон лучшего (хорошего)

Чем проще, упорядоченнее, сбалансированнее, унифицированнее и т.д. элементы, тем проще и лучше для нашего разума объединить их в одну картинку.

7. Белое пространство

Белое, или как его еще называют “негативное” пространство – это часть страницы вебсайта, которая является пустой. Это проблем между графическими и текстовыми элементами, колонками и линиями или другими видами визуальной информации. Забитая информацией страница без белого пространства выглядит слишком загруженной и ее сложно “читать”, информация с таких страниц едва воспринимается. Достаточное количество белого пространства, напротив, позволяет вебсайту или отдельной странице выглядеть “чище”. А такой дизайн необходим для передачи более четких сообщений и четкого процесса обмена и коммуникации с пользователями, читателями или клиентами. Правильно использование этого метода позволяет сфокусироваться на основном сообщении и другой визуально информации. Это придает элегантность и солидность, улучшает фокусировку и доступность информации.

8. Бритва Оккама

Философ Уильям Оккам в 13в. дал начало принципу бережливости (закон экономии), который в кратком виде можно выразить таким образом:

Не следует множить сущее без необходимости Уильям Оккам

В контексте же дизайна, Бритва Оккама указывает на то, что простейшее решение является наилучшим. Но, и тут не все так просто. Бритва Оккама, по сути, сравнивает два метода (или подхода), когда второй метод, учитывая первый, еще и дополняет его. Если же при сравнении оказывается что это самое дополнение не имеет в себе определенной значимости, то первый метод и есть наилучший. В завершение, хотелось бы отметить пару важных моментов. Простой и минималистичный дизайн не обязательно даст сам по себе желаемые плоды, но скорее сделает нас ближе к ожидаемым результатам. Простота, тем не менее, является лучшим инструментом в этом деле, а дизайн должен не только отталкиваться от пользователя, но и опираться на цели, стоящие перед вами или вашим бизнесом. Какие комментарии или замечания вы бы сделали к данной статье? Есть ли у вас примеры использования данных методов в Российском сегменте Интернета?

Реакция на статью
поделюсь
0%
интересно
0%
полезно
100%
не уверен
0%
скучно
0%
где автор?
0%
Аслан Патов
Создатель проекта.
Комментарии
Оставить отзыв

You must log in to post a comment