В чем разница между UI и UX дизайном?

А также некоторые советы, как начать работать в обоих направлениях.

Перевод статьи Харшиты Арора.

 

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

Поэтому я решила написать еще один пост с быстрым вступлением к двум очень широким темам: дизайну пользовательского интерфейса (User Interface Design, UI) и дизайну пользовательского опыта (User Experience Design, UX). Сведения из этой статьи помогут вам стать лучшими дизайнерами.

Начнем!

Прежде всего, давайте ответим на вопрос: что такое UI дизайн и UX дизайн и какая между ними разница.

Попросту говоря, UI это то, как что-то выглядит, а UX – то, как что-то работает. UX это процесс, в то время как UI это уже данность. Давайте копнем глубже…

UI дизайн

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

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

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

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

Вместо этого вы становитесь гидом, сопровождающим пользователя в прекрасном путешествии по вашему приложению. А для этого вам нужно уметь привлекать и направлять внимание пользователя с места на место.

Дизайн это не просто изучение, как пользоваться дизайнерским программным обеспечением, хотя это действительно важно. Программы это как меч дизайнера. Чтобы сражаться, вам нужен меч, но это не единственное, что вы должны знать. Вам нужно изучить стратегии, процессы, тонкости сражения/игры, чтобы суметь победить в нем. В UI дизайне вам нужно выдвигать идеи, экспериментировать, тестировать, а также понимать своих пользователей и их путешествие – использование вашего продукта.

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

Что нужно помнить при создании восхитительного UI

1. На экране люди всегда сперва читают самое большое, самое жирное и самое яркое.

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

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

2. Важность выравнивания

Выравнивание это фундаментальный аспект UI дизайна. Важный принцип дизайна гласит: минимизируйте число линий выравнивания. Это улучшает читабельность и делает дизайн более приятным глазу.

На рисунке выше изображение слева имеет одну линию выравнивания, а справа – четыре.

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

Есть два основных вида выравнивания: по краю и по центру.

• Выравнивание по краю: все элементы равняются по одной стороне/краю, образуя линию.
• Выравнивание по центру: элементы выравниваются по своей серединной точке.

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

3. Станьте архитектором внимания

Это можно трактовать двояко:

1. Вам нужно привлечь внимание пользователя свои дизайном.
2. Вам нужно уделять внимание каждой мелочи в своем дизайне.

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

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

Способы использования текста для привлечения внимания пользователя:

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

Самое важное в дизайне – тестирование! Убедитесь, что вы перепробовали разные цвета/оттенки/углы/выравнивания/макеты. Экспериментируйте с разными дизайнами, чтобы суметь спроектировать путешествие пользователя с использованием разных методов направления внимания.

Больше о UI дизайне можно почитать здесь. Для поиска примеров хорошего дизайна и для вдохновения отлично подходят такие платформы как Behance и Dribbble.

UX дизайн

Дизайн пользовательского опыта призван создавать безболезненный и приятный опыт.

Вот 7 вопросов, которые нужно задать себе, чтобы убедиться, хорош ли UX вашего продукта:

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

2. Профилирование пользователей: вам нужно знать, кто ваши пользователи и чего они хотят добиться, используя ваше приложение. Лучший способ сделать это — профилировать ваших пользователей.
   Вам нужно проделать несколько мыслительных упражнений чтобы понять свой рынок.
   Уточните вашу целевую аудиторию.
   Все время спрашивайте себя: каков главный функционал моего приложения? Профилируйте своих пользователей, чтобы постоянно пересматривать этот вопрос.

3. Спрашивайте разрешения: если у вашего мобильного приложения есть push-уведомления, оно нуждается в определении местоположения, интеграции с социальными медиа, электронной почтой, – вам нужно разрешение пользователя. Получить его можно с помощью окон уведомлений, всплывающих на экране во время использования вашего приложения. Вместо того, чтобы спрашивать обо всем сразу (что может ошеломить юзера), используйте эффект Бенджамина Франклина. Прежде чем попросить кого-нибудь о большом одолжении, попросите о малом. И медленно подталкивайте пользователя в нужном направлении.
   Убедитесь, что ваше приложение высылает подобные запросы только когда юзер использует его, а не во время запуска.

4. Форма против функции: дизайн касается не только формы (красивого цветового решения, шрифтов, макета и т. п.). Он затрагивает и функционал. Всегда отдавайте предпочтение функции перед формой.

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

6. Простота: могу ли я сделать это проще?
   Убедитесь, что ваше приложение будет бабушко-стойким, то есть в том, что люди старшего возраста смогут его понять и использовать. Многочисленные ряды кнопок, избыток цвета и «набитый» пользовательский интерфейс делают приложение запутанным, а значит, плохим.

7. «Не заставляйте меня думать» («Don’t Make Me Think», книга Стива Крага о взаимодействии человека и компьютера): усложняю ли я что-то для своего пользователя?
   Людям не нравится, когда их сбивают с толку.
   Программируя, мы стараемся сделать наш код как можно более легковесным и эффективным.
   Занимаясь дизайном, мы пытаемся сделать интерфейс как можно более понятным и как можно менее запутанным. И красивым!
   Стремитесь к понятным формулировкам и решениям.

О чем нужно помнить, создавая отличный UX:

1. Не делайте длинный инструкций, поясняющих, как использовать приложение. Вместо этого выдавайте пользователям кусочки информации по мере надобности. Делайте это в контексте. Давайте советы и подсказки. Старайтесь строить свой дизайн так, чтобы пользователь сориентировался в нем за несколько секунд без нужды в подробных инструкциях. Это принцип интуитивно-понятного дизайна!
2. Поскольку кое-что крепко укоренилось в умах мобильных пользователей (например, провести пальцем вниз для обновления содержимого экрана или соединение/разведение пальцев для выбора масштаба), придерживайтесь этого в своем приложении. НЕ ИСПОЛЬЗУЙТЕ эти действия с другими целями (вроде проведения пальцем для добавления записи в журнал), поскольку это сильно запутывает (испытано на себе).
3. Не считайте своих пользователей идиотами. Не нужно делать всплывающих окон, в которых юзер должен подтверждать часто совершаемое действие. Запрашивайте подтверждение только для тех случаев, когда пользователь может пожалеть об ошибке, типа удаления чего-либо или совершения покупки. Ненужные всплывающие предупреждения прерывают процесс использования приложения и ухудшают пользовательский опыт. Не заставляйте пользователей чувствовать себя дураками.

Больше о UX дизайне можно почитать здесь и здесь.

Я надеюсь, что эта статья помогла вам понять основные идеи UI и UX дизайна. Хочется закончить пост одной из моих любимых цитат о дизайне:

«Дизайн это не только то, как что-то выглядит и ощущается. Дизайн – это как оно работает»,

– Стив Джобс.

 
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]