Мысли дизайнера: часть 6

Иногда мне кажется, что появилась умная мысль, которой стоит поделиться. Ниже эти мысли и представлены.

Будет полезно дизайнерам интерфейсов и людям смежных профессий.

← Предыдущая часть

Мысль 41

Наткнулся на заголовок статьи на UX Pub «Является ли анимация ключом к отличному дизайну продукта?»…

(и тут Остапа понесло)

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

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

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

Мысль 42

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

Чтобы быть готовыми для любых экранов, следует изучить www.w3.org/TR/mediaqueries-4 и применять по мере необходимости.

Мысль 43

Про универсальность компонентов

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

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

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

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

Мысль 44

Я верю, что любой интерфейс можно улучшить. Но улучшить — это абстрактное понятие. Должны быть критерии, по которым можно будет понять, что интерфейс стал лучше:

1. Время взаимодействия с интерфейсом уменьшилось (утилитарность)
2. На интерфейс стало приятнее смотреть (эстетика)

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

Мысль 45

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

Включен Dark Mode, вокруг всё темное, ничего лишнего нет, ничего не отвлекает. Весь фокус на макет и работу с ним. Да, сфокусироваться так гораздо проще. Но реальность у макетов в большинстве случаев будет другой: вокруг будет куча цветных иконок с подписями, светлые панельки программ и браузера, пестрые обои рабочего стола в виде фотографии с недавнего отпуска. Получается, интерфейс создается в отрыве от контекста.

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

В общем, я вернул светлую тему у себя.

Я Саша Тихонов, сооснователь и арт-директор студии Flyphant.

Мысли дизайнера: часть 6 was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.