786

Основы проектирования удобных интерфейсов

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

Основные принципы

Для создания удобных и понятных интерфейсов, дизайнеру нужно придерживаться некоторых принципов проектирования. Рассмотрим основные из них.

Простота
Независимо от того, насколько сложное программное обеспечение разрабатывается, простые вещи неизменно должны оставаться простыми. Например, если человек привык, что крестик в правом верхнем углу предназначен для закрытия окна — лучше там его и оставить. Нет никакого смысла усложнять такие элементарные вещи, поскольку вряд ли это привнесет в проект что-то кроме негативного опыта и недоумения.

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

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

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

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

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

Чтобы создать UI, который будет сразу понят пользователем, дизайнеру нужно научиться понимать действия человека и трудности, с какими он сталкивается.

Психология пользователя

Все действия человека можно условно разделить на сознательные — те, о которых он думает беспрерывно, и бессознательные, которые выполняются неосознанно.


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

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

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

Использование режимов

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

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

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

 

Работа с навигацией

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

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

Обучение профессии UX/UI-дизайнера

Научитесь создавать удобные пользовательские интересы, которые будут упрощать взаимодействие пользователя с программным продуктом. В лаборатории SpaceLAB курсы UX/UI-дизайнера проводятся полностью бесплатно, к тому же вы получаете реальную перспективу дальнейшего трудоустройства.