1. Элементы дизайна сайта

1.1. Главная страница

1.1.1. Объекты на видимой части Главной страницы (без применения «прокрутки страницы»)

Макет сайта сделан резиновым без ограничения максимальной ширины. Из-за этого текст в центральной части сайта становиться нечитабельным. Например, при разрешении 1600х1200 сайт выглядит так:

Рекомендуем отредактировать макет сайта – например, установить максимальную ширину для центральной части страницы около 400-600 px.

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

1.1.2.2. Сбоку от фотографий в шапке сайта находятся пустые мертвые зоны:

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

1.2. Логотип

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

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

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

1.3. Где щёлкать мышью?

1.3.1. Ссылки не реагируют на наведение курсора и оформлены как обычный текст

Рекомендуем оформлять ссылки так, чтобы они отличались от обычного текста.
Например, рекомендуем использовать уже привычный для пользователей Рунета формат ссылочного текста – подчеркивание, изменение цвета при наведении курсора и т.д.

1.3.2. Блок новостей выглядит не очень аккуратно и связанно. Даты, заголовки и тексты новости абсолютно не согласованы друг с другом. Например, не совсем ясно к какой новости относится ссылка «Подробнее». Причина – слишком большое расстояние между текстом новости и ссылкой:

Рекомендуем поработать над оформлением новостного блока и выстроить четкую визуальную иерархию всех элементов.

1.3.3. Новости публикуются слишком редко. Создается впечатление, что сайт не обновляется:

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

Если новостей мало или они появляются нерегулярно, рекомендуем убрать новостной блок, а информацию о новых акциях, услугах и т.д. размещать в разделах «Акции», «Новинки» и т.д.

1.4. Уменьшение визуального шума

1.4.1. На сайте используется разное написание названия торговой марки, это может запутать посетителей:

 

Рекомендуем выбрать только один вариант написания для каждой торговой марки и использовать его на сайте.

1.4.2. Не до конца ясно, какую функциональную нагрузку несет данный элемент сайта. К тому же, его цветовое решение выбивается из общей гаммы:

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

1.4.3. Такое сообщение лучше выводить в блоке авторизации, а не на каждой странице сайта, где она является лишним визуальным шумом:

Рекомендуем проследить за тем, чтобы внимание посетителя на сайте не отвлекали второстепенные вспомогательные элементы.

2. Регистрация и авторизация.

2.1. Процедура авторизации.

2.1.1. Кнопка входа и ссылки на регистрацию и восстановления пароля выполнены совершенно одинаково:

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

2.1.2. Если пароль или логин введены неверно, пользователь не получает никаких уведомлений:

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

2.1.3. Когда пользователь авторизован в определенном блоке, выводится только ссылка «Выход» (какой выход, откуда?)

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

2.2. Форма регистрации.

2.2.1. Все поля формы регистрации отмечены звездочкой, сдедовательно обязательны для заполнения.

 

Рекомендуем просто вывести информацию о том, что все поля обязательны для заполнения, и убрать звездочки, которые лишь отвлекают внимание.

2.2.2. Под формой регистрации расположено текстовое поле без каких-либо поясняющих надписей (это дополнительная информация, комментарии или поле для вопросов?):

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

В данном случае рекомендуем поместить пояснительную информацию (указать, для чего служит этот блок), например, «Комментарии», «Задать вопрос» и т.д.

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

Рекомендуем разработать скрипт, который будет выполнять проверку корректности введенных данных и капчу.

3. Поиск, выбор и покупка товара.

3.1. Поиск товара.

3.1.1. В форме поиска присутствует путаница с терминами (название, имя):

Рекомендуем проследить за корректностью формулировки текста для формы поиска, чтобы не путать посетителя.

3.1.2. Форма поиска недоступна с главной страницы сайта.

Рекомендуем сделать форму поиска доступной со всех страниц сайта – это максимально облегчит посетителю ориентирование на сайте, поиск нужной продукции.

3.1.3. Ссылка на поиск по параметрам размещена гораздо выше формы поиска, оформлена как обычный текст и малозаметна:

Рекомендуем поработать над тем, чтобы посетитель сразу видел все возможности поиска на сайте и каталоге продукции.

3.1.4. Форма поиска по параметрам мало функциональна. Ее дизайн выглядит разрозненным и весьма сложным для восприятия.

Рекомендуем поработать над поиском по параметрам. Процесс поиска должен быть максимально простым и удобным.

3.2.Выбор товара.

3.2.1. в списке сортировки товара (при выборе для «Корзины») присутствуют лишние поля. Например, при просмотре товаров выбранной фирмы, в поле сортировки есть значение «Фирма»

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

3.2.2. Для многих товаров отсутствует фото:

Рекомендуем поработать над созданием полноценной фотогалереи. Качественное фото – хороший стимул для приобретения товара.

3.2.3. Наиболее важный параметр товара – его цена – размещена в малозаметном месте:

 

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

3.2.4. Дизайн сделан так, что посетителю кажется, что кнопка «добавить» относиться к нижнему блоку с товаром, а не к верхнему, как это есть на самом деле:

Рекомендуем проследить за размещением кнопок, соблюдением визуальной иерархии элементов.

3.2.5. Добавлять товар могут только зарегистрированные пользователи. Это не очень положительно сказывается на количестве покупок:

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

4. Корзина.

4.1. Заголовки столбцов не выровнены по верхней границе. Из-за этого дизайн корзины выглядит неаккуратно:

Рекомендуем выровнять текст заголовков столбцов.

4.2. Фон слишком темный и малоконтрастный по отношению к цвету текста. Это уменьшает читабельность текста:

Рекомендуем поработать над цветовой гаммой – цвета текста и фона должны быть контрастными для лучшего восприятия информации. В то же время цветовые сочетания не должны резать глаз.

4.3. Нижняя строка текста корзин не выровнена относительно остального текста. Создается ощущение, что текст «втиснут»:

 

Рекомендуем проследить за корректным форматированием текста (строк, абзацев) в корзине.

4.4. Указана стоимость товара с точностью до копейки, в то время как все цены и «к оплате» приведены в целых рублях:

 

Поскольку все цены округлены до целых рублей, рекомендуем убрать лишние нули (копейки) в цене.

4.5. Оформление заказа.

4.5.1. Дизайн элементов формы абсолютно не согласован иразваливается. Между полями отсутствуют вертикальные отступы:

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

4.5.2. Из дизайна формы становиться очевидным, что доставка осуществляется только в Москве, т.к. есть поле «Расстояние от МКАД»

Рекомендуем предоставить посетителю информацию о том, на какое расстояние фирма осуществляет доставку и в каких регионах (Москва, Московская область, Россия?)

4.5.3. Не совсем ясно, что имеется в виду под временем контакта и временем доставки, какую именно информацию должен там указать клиент.

Рекомендуем разъяснить посетителям, какая именно информация от них требуется.

5. Кабинет

5.1. Непонятен алгоритм подсветки вкладок, например, почему вкладка сменить пароль светло-зеленого цвета?

Рекомендуем придерживаться одного стиля для оформления элементов, несущих одинаковую функциональную нагрузку (например, кнопки блока навигации).

5.2. В «Кабинете» находится пустая таблица, предназначение которой не совсем понятно:

 

Рекомендуем убрать элементы, не несущие никакой смысловой нагрузки или объяснить пользователю их функции (таблицу следует заполнить, отправить, отредактировать?).

5.3. Дизайн формы для ввода персональных данных разваливается (ширина формы и шапки различна, большое расстояние между названиями полей и местом для введения данных и т.д.):

Рекомендуем поработать над дизайном формы ввода персональных данных.

6. Тексты сайта

В текстах сайта встречаются ошибки. В данном случае допущена грамматическая ошибка (пропущена запятая в обращении):

 

Рекомендуем проверить тексты на сайте на наличие ошибок и исправить их. Особенно внимательно рекомендуем проверить ссылочный текст, текст-обращение к посетителям и т.д.

7. Навигация сайта

7.1. В главном меню никак не выделяется название страницы, пункта, в котором пользователь находится в данный момент – это затрудняет навигацию по сайту:

 

Рекомендуем выделять в меню раздел, название пункта, страницы, на которой в данный момент находится пользователь.

7.2.1. Не совсем удачное решение для расположения блоков меню. Например, в данном случае создается впечатление что меню «Услуги» относиться к блоку авторизации:

 

Рекомендуем продумать оформление и расположение блоков меню, чтобы максимально упростить навигацию.

7.2.2. В разных блоках меню используются одинаковые названия подразделов - это вводит в заблуждение:

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

7.2.3. Названия разделов не совсем очевидны и понятны лишь интуитивно:

 

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

7.3. В навигационных блоках слишком много элементов – это усложняет восприятие и, как следствие, ориентирование на сайте.

Рекомендуем уменьшить количество элементов в меню до 5 – 7. Такое количество блоков оптимально для восприятия.