Цитаты из книги «Дизайнер интерфейсов. Принципы работы и построение карьеры»

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

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

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

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

20. Анимация У любой анимации должна быть своя цель. Например, плавно открывающаяся карточка сделает ваш интерфейс более реалистичным, а «встряхивающиеся» поле ввода или модальное окно сообщат об ошибке, если что-то пошло не так.

система), если вы отмените заказ, а через несколько секунд вновь его активируете. В этом случае лучшим вариантом будет запрашивать подтверждение, прежде чем совершать отмену или удаление.

Представьте, что подумает таксист (и

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

Хороший вариант – удалить объект сразу, но оставить возможность отменить действие. В этом случае пользователь поймет, нужный ли объект он удалил, и в случае ошибки сможет быстро его восстановить. Таким образом удаляются элементы в сервисах Google (Keep, Docs, Gmail).

19. Обратимость Напомню, что пользователи – это люди, а людям свойственно совершать ошибки. И если вселенная безразлична к нам, как писал Стивен Хокинг, то пусть хотя бы ваш интерфейс будет дружелюбным. «Удаление» и «Отмена» – критические действия, поэтому к их реализации нужно подходить осторожно. Ваш интерфейс не должен выглядеть как бездушная машина, готовая выполнять любые повеления хозяина, хотя иногда кажется, что именно в этом и состоит его цель.