Pull to refresh

Полезные советы проектировщикам интерфейсов

Reading time 3 min
Views 5.3K

Уделяйте достаточное внимание шаблонам


Люди тратят большое количество времени, используя различные интерфейсы (Facebook, Google, Windows, Mac OS и т.д.). В них уже могут быть представлены решения проблем, с которыми вы сталкиваетесь при проектировании. Поэтому не стоит изобретать колесо. Используя привычные шаблоны интерфейсов вы поможете пользователям почувствовать себя как дома.
image
CoTweet имеет привычный по почтовым клиентам шаблон.

Правильно обращайтесь с текстом


Главным средством передачи информации был и остается текст и ему следует уделять особое внимание.
  • Для устройств вывода с небольшим ppi, например для компьютерных мониторов, предпочтительно использовать рубленый шрифт. Шрифты с засечками, особенно при малых размерах, выглядят размыто.
    image
  • Не используйте текст, набранный заглавными буквами. Самый лучший вариант для восприятия — когда первая буква прописная.
  • Не выравнивайте текст по ширине (justified). Это затрудняет восприятие из-за пробелов различной длины.
    image
  • Согласно исследованиям (pdf, eng) скорость чтения горизонтального текста наиболее быстрая, в сравнении с другими направлениями. Поэтому не стоит использовать, например, меню с вертикальными надписями.
Подробнее о тексте в статье: “Text Treatment and the User Interface”(eng)

Размещайте важную информацию в левой части


Люди, выросшие в культуре где язык пишется и читается слева направо — с детства обучены, что начинать читать и писать нужно с левой части страницы. Это может быть причиной того, почему многие пользователи больше уделяют внимания левой части веб-страницы — 69% времени, согласно исследованию Нильсена (eng).

image

Из этого следует, что:
  • Необходимо учитывать направленность языка на стадии проектирования прототипа и придерживаться культурных особенностей в дизайне (eng).
  • На ресурсах с языками слева направо будет хорошим решением размещать важную информацию в левой части.

Меньше — лучше


Хороший дизайн интерфейсов — который не замечаешь. Он не содержит лишних, ненужных элементов, не отвлекает. Все лаконично, четко и понятно. Когда вы в следующий раз будете думать о добавлении новой детали в ваш интерфейс, спросите себя: “Действительно ли это необходимо пользователю?” или “Зачем пользователю эта красивая анимированная картинка?”. Напротив, нужно сокращать количество элементов интерфейса без уменьшения возможностей продукта.
image
Google — классический пример минималистичного пользовательского интерфейса

Не используйте одиночные контекстные слова, такие как “продолжить”


Слово “продолжить” является контекстным, т.е. может принимать множество разных значений. Например у вас есть интернет магазин, и у вашего клиента в голове цель: “я хочу оплатить выбранные товары”, тогда под словом “продолжить” он будет подразумевать “продолжить процесс покупки и перейти на шаг оплаты”. Но в то же время, если у него будет цель “купить еще несколько продуктов”, тогда то же слово “продолжить” будет иметь для него другое значение — “продолжить покупки”.
Решение этой проблемы простое — нужно избегать использование одиночных контекстных слов на ссылках и кнопках (“продолжить”, “вернуться”, “отправить” и т.д.).

image

Правильное использование контекстного слова “продолжить” в CS-Cart

Оптимизируйте скорость реакции, предупреждайте о задержках


В исследованиях, проведенных еще в конце 60-х годов, ученые выяснили восприятие пользователями времени (Miller, 1968):
  • До 0,1 секунды пользователи воспринимают отклик системы как моментальный.
  • До 1 секунды пользователи чувствуют, что система реагирует.
  • До 10 секунд пользователи замечают, что система работает медленно, и отвлекаются, однако способны сохранять некоторое внимание к приложению. Здесь нужно использовать индикатор хода работы.
  • После 10 секунд внимание пользователя полностью рассеивается. Он уходит за чашкой кофе или переключается на другое приложение. В таком случае следует четко обозначать состояние и ход процесса и оставшееся время до завершения. Так же необходим механизм отмены.
Статья Якоба Нильсена на тему отклика (eng)

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

image

P.S. Будет приятно увидеть в комментариях ваши советы проектировщикам интерфейсов.
Tags:
Hubs:
+70
Comments 95
Comments Comments 95

Articles