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

Проектирование дизайна никогда не было легким занятием. Оно включает в себя глубокий анализ поведения пользователей на будущем сайте и тщательное планирования элементов. Благодаря новым технологиям проектирования и взаимодействия моделей, комок вариантов и деталей которых нужно учесть веб-дизайнеру, к сожалению, становится только больше.

Сейчас уже трудно кого-то впечатлить эффектом параллакса, перспективой, интерактивными шрифтами и объемным движением элементов, по этому нужно учитывать конечное назначение сайта, не переплетать его с множеством других элементов.

1. Переполненный иннов@циями сайт.

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

Рэнди Дж Хант, Креативный директор Etsy и автор дизайна множества приложений выразился достаточно верном в одном из интервью для журнала: «Эй, дизайнеры: Прекратите попытки казаться чертовски умными и пихать в свои проекты все невпопад».

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

1 (1)

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

2

2. Смешанная навигация.

Правило «переполненной инновации» перетекает и к навигации. Некоторые дизайнеры пытаются быть оригинальными, экспериментируя с размещением навигации. Например, веб-сайт Chijoff оставляет пользователей в недоумении, что именно делает эта компания и как заказать услуги данной фирмы. Это займет немного времени для пользователя, чтобы понять, что страница «Создать проект» идентична странице «Услуги.»

И даже потом, после прочтения всей информации на странице, пользователю по-прежнему остается только гадать, что делать … конец страницы имеет небольшую форму, чтобы зарегистрироваться и подписаться на последние новости студии и получать советы! Там нет формы в стиле «Контакты», только почтовый и электронный адреса. Данный сайт не будет легким в навигации и понимании конечного пользователя.

3

А также можете ли вы догадаться, для чего кнопка “Вселенная” на сайте выше, это фактически обозначает кнопку для «Поделиться информацией» через социальную сеть Facebook. Через чур мудрено, не так ли?

5

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

3. Беспорядок..

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

6

Другое дело когда вы посмотрите на самый популярный сайт ebay, несомненно, что товара на сайте чрезмерно много, но сайт не старается вывести всю информацию сразу, он предоставляет посетителю право найти самому то, что он желает.

7

4. Соблюдайте контраст, ребята!

Контраст является одним из важнейших средств создания визуальной иерархии на сайте и вырисовывания внимания пользователя к определенным элементам. В веб-дизайне, контрастность подразумевает не только использование цвета, но также размер, форму и расположение.

Самый простой и яркий пример это сайт ниже. Этим ребятам удалось добиться такого дизайна, что общий вид текста и кнопок меню на сайте сливается с фоном и не совсем понятен посетителю. Они выбрали неудачные цвета и фон для своего сайта.

8

Сравните с сайтом ниже выбор цвета достаточно специфичен, но результат кардинально отличается. Кроме того, творческий эффект прокрутки плавно вводит новую функцию для продукции — светоотражающий материал. Смотрится понятно и очень круто, не так ли?

9

5. Игнорирование стилей форм:(

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

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

10

Еще раздражает, что когда форма слишком требовательная или не очень хорошо протестирована. Например, sketchybusiness.io форма подчеркивает все пустые поля, даже если они не требуются для заполнения.

11

Если вы посмотрите на форму сайта mostlyserious.io,  то Вам, безусловно, понравится дизайн и минимальность заполняемой информации. Плюс, креативный подход к анимации не оставит равнодушным.

12

Подведем итог …

Не поленитесь проверить какие ваши взгляды на дизайн у вас и клиентов и что важно для клиентов в первую очередь. Где они сталкиваются с проблемами на сайте и застряли при использования сайта? Это навигация, эффект параллакса или долгосрочной загрузки фонового-видео?

Один из самых больших преимуществ пользовательского тестирования является то, что вы можете примерять роль пользователя, зайти на сайт с компьютера друга и просмотреть как будет выглядеть ресурс глазами вашего товарища, спросите что не хватает ему как пользователю, и важно, чтобы это было мнение не одного человека, спросите девушку, что она хотела бы видеть, ведь в свое время моя девушка внесла весомый вклад в дизайн и структуру сайта Rudebox,в результате мне удалось добиться золотой середины в своих проектах.

А какие Вы встречали грубые ошибки веб-дизайна? Поделитесь своими мыслями и историями в комментариях.

Читайте также: