Мысли дизайнера: часть 6
Иногда мне кажется, что появилась умная мысль, которой стоит поделиться. Ниже эти мысли и представлены.
Будет полезно дизайнерам интерфейсов и людям смежных профессий.
Мысль 41
Наткнулся на заголовок статьи на UX Pub «Является ли анимация ключом к отличному дизайну продукта?»…
(и тут Остапа понесло)
Существует негласное деление на дизайн и анимацию интерфейса. Это когда отдельно показывают макеты, а потом, если вдруг найдется время или появится запрос, показывают анимацию на них.
Это в корне неверно. Анимация в интерфейсах всегда являлась и является их частью. Нельзя нарисовать сайт и отдать на откуп верстальщикам: как он будет реагировать на действия пользователя, как будут происходить переходы между вкладками, как будет появляться выпадающий список и прочее.
Нельзя отделять анимацию интерфейса от интерфейса.
Да, конечно не стоит показывать очевидные ходы (например, появление следующего экрана мобильного приложения). Но все ситуации, что не предусмотрены операционной системой, системными компонентами, браузером, — все подобные ситуации показывать в рамках работы над интерфейсом.
Мысль 42
Большинство компаний по разработке сайтов давно знакомы и применяют понятие адаптивного дизайна. Но адаптивный дизайн — это не только реакция интерфейса на разную доступную ширину экрана. Это и различный лейаут для альбомного и портретного видов планшета, и количество цветов экрана (монохромность тоже можно определять), и наличие курсора в принципе.
Чтобы быть готовыми для любых экранов, следует изучить www.w3.org/TR/mediaqueries-4 и применять по мере необходимости.
Мысль 43
Про универсальность компонентов
При работе над интерфейсом старайтесь с самого начала делать компоненты интерфейса как можно универсальнее.
Если задача стоит в дизайне кнопки, то сразу подумайте о том, где эта кнопка может быть применена помимо текущей задачи, как эта кнопка будет вести себя с короткими названиями внутри нее, с длинными названиями, как будет тянуться, будет ли минимальная ширина. Если эта кнопка будет основной, то, скорее всего, будут и второстепенные. Значит надо заранее подумать над явным отличием во внешнем виде основной кнопки от второстепенной.
Тот же подход следует применять и к полям ввода, переключателям, формам и другим стандартным элементам сайтов.
Вряд ли стоит обо всем этом задумываться, если вы работаете над одностраничным лендингом (что, конечно же, тоже является интерфейсом). Но в полноценных сайтах и мобильных приложениях (или каком-либо другом интерфейсе) подобный подход поможет сэкономить время и нервы.
Мысль 44
Я верю, что любой интерфейс можно улучшить. Но улучшить — это абстрактное понятие. Должны быть критерии, по которым можно будет понять, что интерфейс стал лучше:
- Время взаимодействия с интерфейсом уменьшилось (утилитарность)
- На интерфейс стало приятнее смотреть (эстетика)
Пользователи стали меньше проводить времени, заполняя формы на вашем сайте — плюс 1 балл. Сами формы стали эстетичнее — плюс 1 балл. Но нельзя улучшить эстетику и увеличить время взаимодействия с интерфейсом. Плюс балл там, минус балл тут. В итоге, лучше не стало. Осталось так же, работа проделана впустую.
Мысль 45
Для дизайнера темное оформление в macOS плохо тем, что окружение разрабатываемых макетов становится дальше от реального окружения уже работающих сайтов и приложений.
Включен Dark Mode, вокруг всё темное, ничего лишнего нет, ничего не отвлекает. Весь фокус на макет и работу с ним. Да, сфокусироваться так гораздо проще. Но реальность у макетов в большинстве случаев будет другой: вокруг будет куча цветных иконок с подписями, светлые панельки программ и браузера, пестрые обои рабочего стола в виде фотографии с недавнего отпуска. Получается, интерфейс создается в отрыве от контекста.
Когда же включена стандартная светлая тема в macOS, то это куда ближе к боевым условиям. Уже начинаешь понимать какие цвета правильнее использовать, какой контраст уместнее.
В общем, я вернул светлую тему у себя.
