Как улучшить дизайн вашего сайта или приложения ясно-понятно: 61 совет по юзабилити

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

Просто сайт, чтобы была картинка по теме

У меня получился большой список и если список подобного размера будет у вас на сайте, то его следует разбить на категории и подписать их. Но у меня времени нет и никто не платит за это, так что сорян и я вас предупредил ;-)

  1. Делайте заголовки заметными: с помощью размера, контрастного цвета, жирности.
  2. Ведите пользователей по визуальной иерархии: должно быть понятно, что на экране самое важное, второстепенное и наименее важное. Добиться этого можно через акценты, размеры, контрастность, порядок, группирование, использования свободного пространства.
  3. Используйте макет с одной колонкой, так сложнее что-то испортить.
  4. Ставьте объекты внахлест, чтобы показать преемственность.
  5. Длинные списки в меню группируйте по значению.
  6. Заголовки размещайте ближе к своим абзацам, а не между своим и другим абзацем.
  7. Выделяйте элементы, которые требует внимания. Например, форма с ошибкой.
  8. Убирайте ненужную информацию с экрана.
  9. Используйте всплывающие окна для подтверждения действия. Затемняйте или отделяйте иначе фон, чтобы такое окно было хорошо видно.
  10. Удалите все рамки в дизайне, если они не сделаны специально, чтобы отделить или выделить объект.
  11. Удалите очевидные инструкции, которые повторяют то, что ясно из контекста.
  12. Элементы, если они есть ниже границы экрана, должны попадать на эту границу, чтобы было видно, что дальше есть что-то еще.
  13. Популярные функции размещайте ближе к пользователю, чтобы он мог быстро до них добраться и не искал.
  14. Используйте предиктивный ввод текст. Это когда в форме пишите «узб...» и вам тут же предлагается использовать «Узбекистан» (например).
  15. Популярный выбор показывайте сразу. Например, если у вас 80% клиентов из Ташкента, то доставку в Ташкент укажите как по умолчанию.
  16. Не забывайте показывать важную информацию на карточке товара. Например: цену или размеры.
  17. Если вид станет слишком сложный, показывайте подобные данные при наведении курсора.
  18. Для выбора из 2-4 элементов используйте переключатели или вкладки вместо выпадающего списка.
  19. Продублируйте популярный выбор в начале выпадающего списка.
  20. Если позволяют ваши технологии, используйте предиктивный ввод текста вместо длинного выпадающего списка.
  21. Наглядно показывайте прогресс и статус текущей процедуры. Вместо «Ждите ответа...» показывайте прогресс-бар и оставшееся время, например.
  22. В сложных схемах детально показывайте текущий статус. Не допускайте сложных схем.
  23. В пошаговых инструкциях также указывайте общее количество шагов, а не только текущий.
  24. Показывайте количество элементов в текущей группе. Например: товары в категории, результаты в поиске, отзывы в рейтинге и т. п.
  25. По возможности используйте адрес почты в качестве логина вместо пользовательского имени (username).
  26. Добавьте клавиатурные сокращения для повторяющихся команд.
  27. Там, где будет удобнее, добавьте возможность перетаскивать элементы вместо другого способа сортировки/добавления.
  28. Предупреждайте о минимальных требованиях. Например, при добавлении фото на сайт или создании пароля.
  29. Не показывайте необязательные элементы в формах. Если они необязательные, зачем их показывать?
  30. В кнопках используйте повелительное наклонение. Например: вместо «поиск» следует писать «найти»; вместо «далее» следует писать «продолжить».
  31. Еще лучше, если в кнопках будут описаны конкретные действия. Например: вместо «Отправить» следует писать «Оформить заказ». Но не переусердствуйте, не стоит использовать фразы вроде «Открыть этот файл» или «Отменить регистрацию нового пользователя», если итак очевидно, о чем речь.
  32. Показывайте, что будет, перед тем как пользователь совершит действие, которое увидит не только он. Например, опубликует фото или статью.
  33. Используйте небольшое знакомство с продуктом для новых пользователей. Покажите, что можно сделать вместо того, чтобы сказать, что пока ничего нет.
  34. Покажите сколько еще времени работает ваш офис, не только время работы.
  35. Недавние события пишите не датой, а недавностью: 30 мин назад, 2 дня назад и т. д.
  36. Не заставляйте пользователей считать. Используйте капчу, которая сама вычисляет ботов.
  37. Показывайте, где в приложении или на сайте пользователь сейчас находится. Выделяйте текущий пункт меню или отмечайте его.
  38. В сложноустроенных сайтах используйте «градусник» навигации. Он покажет структуру и текущее положение пользователя на сайте.
  39. Полезную информацию размещайте в начале заголовка. Например: «Входящие (2) — Почта» вместо «Почта — Входящие (2)».
  40. Выделяйте популярный выбор. Например, в таблице с тарифами.
  41. Выводите сообщения о результате действия после важных событий. Например: письмо отправлено, изменения сохранены.
  42. Выделяйте выбранный пункт в длинных меню. Меню длинным лучше не делать, но если иначе нельзя, выделяйте фоном или цветом тот пункт, на который пользователь навел курсор.
  43. Используйте контрастные цвета. Около 10% населения страдает от некорректного восприятия цвета и похожие оттенки для них сливаются в одинаковые.
  44. Заранее предотвращайте неверные действия. Например, если пользователь хочет загрузить слишком большой файл, сказать об этом нужно до того, как он его загрузит.
  45. Если ждать операции слишком долго (что уже плохо), разбейте задачу на подзадачи и показывайте, что уже прошло и что предстоит обработать. Так ожидание будет не на столько утомительным, как если просто сообщить: осталось 28 мин.
  46. Автоматически запоминайте содержимое всех форм без нажатия кнопок со стороны пользователя. Всегда лучше запомнить и потом удалить, чем вообще не запоминать и потерять информацию из-за инцидента.
  47. Избегайте использование название форм внутри самих форм, если после ввода курсора она исчезнет. Название формы всегда должно присутствовать на экране.
  48. Важные подсказки показывайте перед формой, а не после когда пользователь уже введет данные и продолжит чтение формы ниже. Под формой можно размещать второстепенные подсказки.
  49. Необязательные поля лучше не использовать (п. 29), но если все же решили: отмечайте те поля, которых меньше, а не наоборот. Например: если у вас меньше необязательных полей, то отмечать нужно их; если же меньше обязательных, то отмечать следует обязательные.
  50. Информацию об обязательных полях указывайте в самом начале формы, а не в конце, когда форму пользователь уже заполнит.
  51. Кликабельные и интерактивные элементы должны выглядеть так, чтобы было понятно, что с ними можно делать и как.
  52. По умолчанию используйте красный цвет для критических ошибок, оранжевый цвет для стандартных ошибок и зеленый для успешно совершенных действий.
  53. Различающиеся важные пункты списка ставьте вперед. Например:
    Ташкент — главный офис
    Коканд — региональный офис
    Джизак — региональный офис
    Карши — региональный офис
    вместо
    Главный офис в Ташкенте
    Региональный офис в Коканде
    Региональный офис в Джизаке
    Региональный офис в Карши
  54. Удалите из таблиц рамки, они только мешают. Для группировки данных лучше использовать расстояния. В длинных таблицах фиксируйте первую строку с описанием ячеек, а также добавляйте изменение оттенка фона строки при наведении курсора.
  55. Поддерживайте различные форматы ввода (например для дат).
  56. Помните, что если можно что-то испортить, то вам это сделают. Не допускайте возможности совершить ошибку. Например: если нельзя забронировать какие-то даты, то календарь не должен давать такую возможность вообще — эти даты должны быть некликабельными. Однако, убирать их совсем нельзя, иначе календарь будет выглядеть незагрузившимся.
  57. Критические действия в меню отделяйте или выделяйте (например удаление аккаунта или выход).
  58. Всегда давайте возможность удалить аккаунт из вашего сайта или приложения. Можно удалять не сразу, но предупредить, что удаление началось и через неделю аккаунт (профиль) будет полностью удален. До этого времени пользователь может отменить удаление (мало ли психанул).
  59. В вертикальном меню ставьте ссылку на всю строку, а не только на текст в строке.
  60. Давайте понятные описание ошибок и сразу предлагайте какое-то решение.
  61. Запоминайте предыдущие поисковые запросы пользователя и предлагайте их в предиктивном вводе. Позволяйте их удалить.

Напишите мне, если советы вам помогли и вы действительно внесли изменения в свой сайт или приложение.

Отправить
Поделиться
Запинить