В дизайне, каким бы он ни был креативным, симпатичным и модным, существуют свои правила, принципы, аксиомы. UI дизайн — не исключение. Чтобы ознакмить вас с его основополагающими принципами, мы взяли отрывок из Fundamental UI Design, электронного курса Jane Portmann.

Jane Portmann — независимый UI/UX консультант из России, который помогает зарабатывать больше денег комапниям, связанным с программным  обесечением. Бывший креативный директор крупного агентства, после рождения двух малышей Джейн ушла в одиночное плавание, создав успешную консультационную компанию. Сейчас Джейн работает над третьей книгой —  The UI Audit, любит выступать на мероприятиях, но больше всего — решать реальные проблемы бизнеса за счет продуманного дизайна UI.

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

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

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

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

Понятность

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

В любом месте вашего приложения несколько моментов всегда должны быть понятны пользователю:

• что случилось
• где он находится
• что можно сделать
• что произойдет, если он сделает это
• что случилось, и т.д. 

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

Правило большого пальца состоит в том, чтобы сделать проверку после того, как вы назовете что-то законченным. Представьте, что вы не знакомы с продуктом, и вам неизвестны все проектные решения, принятые в процессе разработки. Спросите себя: «Все ли так до ужаса очевидно? Выглядит ли результат как корабль пришельцев или как уютный домик?»

Гибкость

Дизайн — это то, что выглядит хорошо в любой ситуации.

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

Вы должны принимать все это во внимание. Как создать дизайн, который выдержит сложное испытание временем?

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

Близость

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

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

Вот вам список моментов, которые всегда должны быть абсолютно понятны юзеру:

• иконки (если сомневаетесь в них, лучше замените на текст)
• навигация
• призывы к действию (ссылки, кнопки и т.п. ). Используйте понятные распространенные глаголы.
• привычные цветовые ассоциации (красный — предупреждение, зеленый — «сделано» и т.п. )
• все, что связано с процессом оплаты.

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

Убедитесь, что пользователь выполняет свое главное действие наиболее эффективным способом и никогда не потеряет результат проделанной работы. Во-первых, ответьте на вопрос: "Какое самое рутинное действие пользователь выполянет ежедневно? Может, это вечное получение доступа к контенту, или редактирование, или монотонный просмотр? Совершает ли он одну и ту же сложную последовательность каждый день?

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

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

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

Структура — то, что делает вещи более доступными.

Последовательность и структура помогут пользователю чувствовать себя как дома.

Что вы можете для этого сделать:

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

Автор - Jane Portman

Перевод — Дежурка

Смотрите также:

• Семь причин использовать генераторы статических сайтов 
• Пять анти-принципов хорошего дизайна 
• Правила использования иконок для меню типа «аккордеон»