Алексей Кириченко, про дизайн и юзабилити...

34
ЗДРАВЫЙ СМЫСЛ о юзабилити 30.07.2013

Upload: insalesua

Post on 11-Nov-2014

965 views

Category:

Education


4 download

DESCRIPTION

Алексей Кириченко, юзабилити-специалист компании Promodo, на примере неудачных вариантов показывает, каким должен быть дизайн интернет-магазина, что и где размещать, что такое "продающий дизайн" и почему не существует "идеального дизайна"

TRANSCRIPT

Page 1: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

ЗДРАВЫЙ СМЫСЛ

о юзабилити30.07.2013

Page 2: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Сайт как целое

Page 3: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Лишняя, отвлекающая информация

Page 4: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Сайт должен иметь смысл

Page 5: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

По главной странице сразу понятно, чему посвящен сайт

Все основные возможности доступны без регистрации

Page 6: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Структура сайта,

информационная архитектура

Page 7: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Информационная архитектура?

Не, не слышал.

Page 8: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

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

Page 9: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Основной контент не отделен от дополнительного

Page 10: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Навигация Главное меню

Page 11: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Пункты меню должны располагаться в порядке убывания их значимости

Больше двух подуровней меню лучше не использовать

Page 12: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Непонятно, в каком разделе сайта находишься

Важная информация закопана

Пункты, содержащие подменю, должны отличаются от остальных

Page 13: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Структура страниц сайта

Блоки и элементы

Page 14: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Значение иконок должно быть интуитивно понятно

И не надо взрывать мне мозг!

Page 15: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

По смыслу элемент кликабельный; на самом деле — нет.

Page 16: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Элементов, привлекающих внимание, должно быть мало

Page 17: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

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

Page 18: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

«Цена — рядом с товаром»: все связанные элементы должны находиться рядом друг с другом

Page 19: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Поиск

Page 20: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Поиск на отдельной странице — плохо.

Page 21: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Текст

Page 22: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Пишите сначала важное, потом остальное

Текст должен быть интересен или лаконичен

Текст должен быть структурирован

Кегль основного текста для чтения — 16px

Выравнивание абзаца — только по левому краю

Page 23: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Сервис Readability.com

Page 24: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Ссылки

Page 25: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Cсылки должны визуально отличаться от остального текста

Page 26: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Кнопки

Page 27: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Кнопки должны выглядеть кнопками

Текст на кнопке — призыв к действию

Page 28: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Хотя бы как здесь

Page 29: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Формы

Page 30: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Эту форму спасет только полное перепроектирование

Page 31: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Форма должна быть лаконичной

В целевых формах (например, регистрация) должы быть только обязательные поля

Page 32: Алексей Кириченко, про дизайн и юзабилити интернет-магазина
Page 33: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Нельзя путать чекбоксы и радио-кнопки

Page 34: Алексей Кириченко, про дизайн и юзабилити интернет-магазина

Спасибо за внимание.

Алексей Кириченко

[email protected]