Советы и рекомендации 2014

Пишет Дима Зюзин

За несколько лет работы я получил достаточно опыта и теперь могу выделить некоторые решения и приёмы, которые помогают хорошо запроектировать интерфейсы. К чему-то я пришел сам, что-то прочитал или узнал от других дизайнеров. Ниже я расскажу о некоторых знаниях, которые использую в своей работе. Скорее всего эта статья будет полезна начинающим дизайнерам или разработчикам и руководителям стартапов, которые хотят своими силами улучшить дизайн своего продукта.

Используйте информационные карты

Работу с интерфейсом можно сравнить с путешествием. Пользователю нужно попасть из одного города в другой. Он может долететь на самолете. Если он боится летать, то ему придётся ехать на поезде и потом еще 75 километров на автобусе.

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

Пример информационной карты приложения 10tracks для Windows Phone

Информационная карта приложения 10tracks для Windows Phone

Используйте персонажей

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

Больше об использовании персонажей можно узнать из книг Алана Купера. Например, «Психбольница в руках пациентов».

Показывайте, объясняйте и подсказывайте

Пользователи могут сталкиваться с проблемами. Показывайте пользователю подсказки и объясняете суть проблемы и пути её решения.

Форма авторизации в системе. Пользователь ввел неверную пару логин-пароль.

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

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

Форма входа

Дайте пользователю «навигатор»

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

Пример пошагового заполнения банковской формы

Шаги заполнения банковской формы

Размеры полей должны соответствовать объёму вводимых данных

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

Форма для контактной информации

Ваш интерфейс может использоваться на тач устройствах

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

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

Форма ввода пароля

Сделайте всё, что можете сделать за пользователя

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

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

Форма оплаты банковской картой

Интерфейс должен быть отзывчивым

Многие люди кликают в браузере по ссылкам двойным кликом. Можно предположить, что обычные пользователи не видят или не понимают разницы между обычным курсором и курсором над ссылкой — для них все одинаково. Лучше показывать пользователю куда нажать можно, а куда нельзя, до того как он нажмёт и через несколько секунд поймёт, что ничего не происходит. Используйте смену цвета ссылки при наведении, добавьте состояние кнопки после нажатия или анимацию переключения тумблера. Делайте интерфейсы с обратной связью.

Кнопка входа Состояния кнопки входа

Получайте больше личного пользовательского опыта

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

Взгляд со стороны очень важен

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

Резюме

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