Как улучшить дизайн вашего сайта или приложения ясно-понятно: 61 совет по юзабилити
Перечислю коротко простые советы, чтобы вы могли прямо с места в карьер взять да и улучшить свой сайт или приложение. Предлагаю распечатать и пройтись по вашему продукту, зачеркивая то, что для вас неактуально и добавляя в будущие задачи то, что следует исправить. Написано по мотивам.
У меня получился большой список и если список подобного размера будет у вас на сайте, то его следует разбить на категории и подписать их. Но у меня времени нет и никто не платит за это, так что сорян и я вас предупредил ;-)
- Делайте заголовки заметными: с помощью размера, контрастного цвета, жирности.
- Ведите пользователей по визуальной иерархии: должно быть понятно, что на экране самое важное, второстепенное и наименее важное. Добиться этого можно через акценты, размеры, контрастность, порядок, группирование, использования свободного пространства.
- Используйте макет с одной колонкой, так сложнее что-то испортить.
- Ставьте объекты внахлест, чтобы показать преемственность.
- Длинные списки в меню группируйте по значению.
- Заголовки размещайте ближе к своим абзацам, а не между своим и другим абзацем.
- Выделяйте элементы, которые требует внимания. Например, форма с ошибкой.
- Убирайте ненужную информацию с экрана.
- Используйте всплывающие окна для подтверждения действия. Затемняйте или отделяйте иначе фон, чтобы такое окно было хорошо видно.
- Удалите все рамки в дизайне, если они не сделаны специально, чтобы отделить или выделить объект.
- Удалите очевидные инструкции, которые повторяют то, что ясно из контекста.
- Элементы, если они есть ниже границы экрана, должны попадать на эту границу, чтобы было видно, что дальше есть что-то еще.
- Популярные функции размещайте ближе к пользователю, чтобы он мог быстро до них добраться и не искал.
- Используйте предиктивный ввод текст. Это когда в форме пишите «узб...» и вам тут же предлагается использовать «Узбекистан» (например).
- Популярный выбор показывайте сразу. Например, если у вас 80% клиентов из Ташкента, то доставку в Ташкент укажите как по умолчанию.
- Не забывайте показывать важную информацию на карточке товара. Например: цену или размеры.
- Если вид станет слишком сложный, показывайте подобные данные при наведении курсора.
- Для выбора из 2-4 элементов используйте переключатели или вкладки вместо выпадающего списка.
- Продублируйте популярный выбор в начале выпадающего списка.
- Если позволяют ваши технологии, используйте предиктивный ввод текста вместо длинного выпадающего списка.
- Наглядно показывайте прогресс и статус текущей процедуры. Вместо «Ждите ответа...» показывайте прогресс-бар и оставшееся время, например.
- В сложных схемах детально показывайте текущий статус. Не допускайте сложных схем.
- В пошаговых инструкциях также указывайте общее количество шагов, а не только текущий.
- Показывайте количество элементов в текущей группе. Например: товары в категории, результаты в поиске, отзывы в рейтинге и т. п.
- По возможности используйте адрес почты в качестве логина вместо пользовательского имени (username).
- Добавьте клавиатурные сокращения для повторяющихся команд.
- Там, где будет удобнее, добавьте возможность перетаскивать элементы вместо другого способа сортировки/добавления.
- Предупреждайте о минимальных требованиях. Например, при добавлении фото на сайт или создании пароля.
- Не показывайте необязательные элементы в формах. Если они необязательные, зачем их показывать?
- В кнопках используйте повелительное наклонение. Например: вместо «поиск» следует писать «найти»; вместо «далее» следует писать «продолжить».
- Еще лучше, если в кнопках будут описаны конкретные действия. Например: вместо «Отправить» следует писать «Оформить заказ». Но не переусердствуйте, не стоит использовать фразы вроде «Открыть этот файл» или «Отменить регистрацию нового пользователя», если итак очевидно, о чем речь.
- Показывайте, что будет, перед тем как пользователь совершит действие, которое увидит не только он. Например, опубликует фото или статью.
- Используйте небольшое знакомство с продуктом для новых пользователей. Покажите, что можно сделать вместо того, чтобы сказать, что пока ничего нет.
- Покажите сколько еще времени работает ваш офис, не только время работы.
- Недавние события пишите не датой, а недавностью: 30 мин назад, 2 дня назад и т. д.
- Не заставляйте пользователей считать. Используйте капчу, которая сама вычисляет ботов.
- Показывайте, где в приложении или на сайте пользователь сейчас находится. Выделяйте текущий пункт меню или отмечайте его.
- В сложноустроенных сайтах используйте «градусник» навигации. Он покажет структуру и текущее положение пользователя на сайте.
- Полезную информацию размещайте в начале заголовка. Например: «Входящие (2) — Почта» вместо «Почта — Входящие (2)».
- Выделяйте популярный выбор. Например, в таблице с тарифами.
- Выводите сообщения о результате действия после важных событий. Например: письмо отправлено, изменения сохранены.
- Выделяйте выбранный пункт в длинных меню. Меню длинным лучше не делать, но если иначе нельзя, выделяйте фоном или цветом тот пункт, на который пользователь навел курсор.
- Используйте контрастные цвета. Около 10% населения страдает от некорректного восприятия цвета и похожие оттенки для них сливаются в одинаковые.
- Заранее предотвращайте неверные действия. Например, если пользователь хочет загрузить слишком большой файл, сказать об этом нужно до того, как он его загрузит.
- Если ждать операции слишком долго (что уже плохо), разбейте задачу на подзадачи и показывайте, что уже прошло и что предстоит обработать. Так ожидание будет не на столько утомительным, как если просто сообщить: осталось 28 мин.
- Автоматически запоминайте содержимое всех форм без нажатия кнопок со стороны пользователя. Всегда лучше запомнить и потом удалить, чем вообще не запоминать и потерять информацию из-за инцидента.
- Избегайте использование название форм внутри самих форм, если после ввода курсора она исчезнет. Название формы всегда должно присутствовать на экране.
- Важные подсказки показывайте перед формой, а не после когда пользователь уже введет данные и продолжит чтение формы ниже. Под формой можно размещать второстепенные подсказки.
- Необязательные поля лучше не использовать (п. 29), но если все же решили: отмечайте те поля, которых меньше, а не наоборот. Например: если у вас меньше необязательных полей, то отмечать нужно их; если же меньше обязательных, то отмечать следует обязательные.
- Информацию об обязательных полях указывайте в самом начале формы, а не в конце, когда форму пользователь уже заполнит.
- Кликабельные и интерактивные элементы должны выглядеть так, чтобы было понятно, что с ними можно делать и как.
- По умолчанию используйте красный цвет для критических ошибок, оранжевый цвет для стандартных ошибок и зеленый для успешно совершенных действий.
- Различающиеся важные пункты списка ставьте вперед. Например:
Ташкент — главный офис
Коканд — региональный офис
Джизак — региональный офис
Карши — региональный офис
вместо
Главный офис в Ташкенте
Региональный офис в Коканде
Региональный офис в Джизаке
Региональный офис в Карши - Удалите из таблиц рамки, они только мешают. Для группировки данных лучше использовать расстояния. В длинных таблицах фиксируйте первую строку с описанием ячеек, а также добавляйте изменение оттенка фона строки при наведении курсора.
- Поддерживайте различные форматы ввода (например для дат).
- Помните, что если можно что-то испортить, то вам это сделают. Не допускайте возможности совершить ошибку. Например: если нельзя забронировать какие-то даты, то календарь не должен давать такую возможность вообще — эти даты должны быть некликабельными. Однако, убирать их совсем нельзя, иначе календарь будет выглядеть незагрузившимся.
- Критические действия в меню отделяйте или выделяйте (например удаление аккаунта или выход).
- Всегда давайте возможность удалить аккаунт из вашего сайта или приложения. Можно удалять не сразу, но предупредить, что удаление началось и через неделю аккаунт (профиль) будет полностью удален. До этого времени пользователь может отменить удаление (мало ли психанул).
- В вертикальном меню ставьте ссылку на всю строку, а не только на текст в строке.
- Давайте понятные описание ошибок и сразу предлагайте какое-то решение.
- Запоминайте предыдущие поисковые запросы пользователя и предлагайте их в предиктивном вводе. Позволяйте их удалить.
Напишите мне, если советы вам помогли и вы действительно внесли изменения в свой сайт или приложение.