Итак, я решила написать еще один пост, который представляет собой краткое введение в две очень широкие темы: дизайн пользовательского интерфейса и дизайн взаимодействия с пользователем. Знания из предыдущих и этой статей помогут вам стать лучшим дизайнером.
Давайте начнем!
Прежде всего, давайте ответим на вопрос: что такое UI-дизайн и UX-дизайн и в чем разница между ними?
Проще говоря, UI — это то, как все выглядит, UX — это то, как все работает. UX — это процесс, а UI — результат. Разберемся дальше…
Дизайн пользовательского интерфейса
Дизайн пользовательского интерфейса (UI) — это большая область. Теоретически пользовательский интерфейс представляет собой комбинацию содержимого (документы, тексты, изображения, видео и т. д.), формы (кнопки, метки, текстовые поля, флажки, раскрывающиеся списки, графический дизайн и т. д.) и поведения (что произойдет, если Я нажимаю/перетаскиваю/набираю).
Требуется хороший глазомер, много практики и много проб и ошибок, чтобы стать лучше. Ваша цель как дизайнера пользовательского интерфейса — создать привлекательный, красивый пользовательский интерфейс, а также вызвать эмоциональный отклик у пользователя, чтобы сделать ваши продукты более привлекательными и красивыми.
Когда я только начинала, в университете я научилась тому, что нужно отправиться в экскурсионное путешествие по вашему продукту. Представьте свое приложение/веб-сайт как путешествие. Каждый пользователь, который загружает ваше приложение сразу после того, как увидел его в App Store/в Интернете, используя его, достигнув целей или выполнив задачи в приложении, отправляется в путешествие. И это путешествие должно быть восхитительным.
И вы, как дизайнер приложения, являетесь мастером, который разрабатывает это путешествие. Так что не стоит выбрасывать всю информацию на экран в надежде, что пользователь ее подхватит. Это полная противоположность хорошему пользовательскому интерфейсу.
Вместо этого вы являетесь экскурсоводом, который ведет пользователя в прекрасное путешествие по вашему приложению или веб сайту. А для этого вы должны уметь переключать и перемещать их внимание с места на место, направляя их.
В дизайне пользовательского интерфейса вам необходимо проводить мозговой штурм, экспериментировать, тестировать и понимать своих пользователей и их путь на протяжении всего использования вашего продукта.
Преимущество хорошо разработанного продукта заключается в том, что у вас будет более высокий уровень удержания пользователей.
Что нужно помнить о создании хорошего пользовательского интерфейса:
На экране люди всегда сначала будут читать самое большое, самое смелое и самое яркое.
Это человеческая природа. Наше внимание запрограммировано таким образом, что мы сначала видим самое большое, самое смелое и самое яркое. А затем он переходит к более мелким, менее смелым и менее ярким вещам.
Как дизайнер, вы можете использовать эту информацию, чтобы предугадать поведение вашего пользователя.
Важность выравнивания.
Выравнивание является фундаментальным аспектом дизайна пользовательского интерфейса. И важный принцип дизайна: минимизировать количество линий выравнивания. Это улучшает читаемость и делает дизайн более приятным для глаз.
Существует два основных типа выравнивания: выравнивание по краю и выравнивание по центру.
Выравнивание по краю — это когда все элементы, имеющие одну сторону или край, выстраиваются в одну линию.
Выравнивание по центру — это выравнивание всех элементов по средней точке.
В зависимости от варианта использования вы выберете тот или иной. Обычно выравнивание по краям считается лучшим. Выровнять элементы в таких программах для дизайна, как Illustrator или Photoshop, довольно просто. Большинство дизайнерских программ обычно предоставляют линейку/направляющую для выравнивания всех элементов по краям.
Станьте архитектором внимания
Вот два способа интерпретировать это: 1) Вам нужно привлечь внимание пользователя своим дизайном. 2) Вы должны обращать внимание на каждую мелочь в своих проектах.
Чтобы стать великим дизайнером, вам нужно делать и то, и другое. Последнее позволяет достичь первого.
Дизайн пользовательского интерфейса — это адаптация опыта для ваших пользователей, направляя их внимание на разные важные вещи.
Способы использования текста для привлечения внимания пользователя:
- Сделайте его размер больше или меньше.
- Цвет насыщеннее или ярче. Или сделать его приглушенным.
- Используйте шрифт с большим весом, а не что-то тонкое или легкое.
- Выделите слова курсивом. Используйте заглавные или строчные буквы для некоторых слов.
- Увеличьте расстояние между каждой из букв, чтобы общий размер слов занимал больше места.
Самое главное при проектировании — это тестирование! Убедитесь, что вы пробуете все по-разному: цвета, шрифты, тона, углы, выравнивание, макет и т. д. Экспериментируйте с разными дизайнами, чтобы вы могли спланировать путешествие пользователя, используя различные способы привлечения внимания.
Узнайте больше о дизайне пользовательского интерфейса на Behance и Dribbble — отличные платформы для поиска хорошего дизайна для вдохновения.
Дизайн пользовательского опыта
Дизайн пользовательского опыта (UX) — это создание безболезненных и приятных впечатлений.
Вот 7 вопросов, которые нужно задать себе, чтобы узнать, хорош ли UX вашего продукта:
Юзабилити: для чего пользователь использует мое приложение? Какова основная функциональность моего приложения? Что мне нужно сделать правильно, чтобы мое приложение можно было использовать?
Теперь, как я могу свести к минимуму количество шагов, которые требуется пользователю для достижения этого в моем приложении? Чего в первую очередь хотят добиться мои пользователи с помощью моего приложения? Как я могу сделать процесс достижения этого таким же плавным, быстрым и приятным?
Профилирование пользователей: вы должны знать, кто ваши пользователи и чего они хотят достичь с помощью вашего приложения. Лучший способ сделать это — профилировать пользователей.
Вы должны сделать несколько мыслительных упражнений, чтобы понять свой рынок. Сузьте свою целевую/пользовательскую аудиторию.
Главный вопрос, который следует постоянно задавать себе: какова основная функциональность моего приложения? Профилируйте своих пользователей, чтобы постоянно пересматривать этот вопрос.
Запрос разрешений: если ваше мобильное приложение имеет push-уведомления, нуждается в службах определения местоположения, интеграции с социальными сетями, электронной почтой и т. д., вы знаете, что вам нужно разрешение пользователя на предупреждающее сообщение, которое появляется на экране, когда они используют ваше приложение. Вместо того, чтобы спрашивать всех сразу, что ошеломило бы пользователя, используйте эффект Бенджамина Франклина. Прежде чем просить кого-то о большом одолжении, попросите его о маленьком одолжении. И медленно подталкивайте пользователя в определенном направлении.
Убедитесь, что ваше приложение отправляет уведомление о разрешении только тогда, когда пользователь собирается использовать эту функцию, а не тогда, когда он только запускает приложение.
Форма против функции: дизайн — это не всегда форма — красивая цветовая гамма, шрифты, макет и тому подобное. Это касается и функциональности. Всегда отдавайте предпочтение функциональности, а не форме.
Согласованность: последовательна ли я в своем приложении? Соответствует ли мое приложение моему бренду? Непоследовательность в дизайне создает путаницу. Сбитый с толку пользователь — несчастный пользователь.
Думайте о согласованности не только с точки зрения внешнего вида, но и с точки зрения функциональности.
Простота: Могу ли я сделать это проще?
Убедитесь, что ваше приложение защищено от бабушек, т. е. пожилые люди могут понять его и использовать.
Плохое сбивающее с толку приложение — это ряды кнопок, множество разных цветов и плотно упакованный пользовательский интерфейс.
Не заставляйте меня думать: усложняю ли я жизнь своему пользователю?
Люди не любят, когда их путают.
Когда мы программируем, мы пытаемся сделать наш код максимально легким и эффективным.
При разработке мы стараемся сделать интерфейс максимально понятным и как можно менее запутанным. И красивым!
Постарайтесь сделать свою формулировку максимально понятной.
Что нужно отметить для отличного UX:
Не делайте длинных руководств при запуске приложения, объясняющих, как его использовать. Вместо этого вы хотите давать своим пользователям лакомые кусочки информации по мере необходимости. Сделайте это контекстуальным. Дайте советы и подсказки. Попробуйте создать дизайн, в котором пользователь разберется с приложением за несколько секунд, не нуждаясь в подробном руководстве. Вот где принципы интуитивного дизайна!
Когда что-то настолько укоренилось в умах мобильных пользователей, как потяните, чтобы обновить, или сведите, чтобы увеличить масштаб, — придерживайтесь этих правил для своего приложения. И НЕ используйте эти действия для какой-либо другой цели.
Не относитесь к своим пользователям как к идиотам. Не давайте всплывающее окно/оповещение пользователю, чтобы подтвердить частое действие. Запрашивайте подтверждение только для вредоносных действий, о которых пользователи могут сожалеть — например, удаление чего-либо или совершение покупки.
ненужность всплывающие окна и оповещения прерывают процесс и ухудшают работу пользователя. Не заставляйте своих клиентов чувствовать себя глупо.
Завершая пост одной из моих любимых цитат о дизайне…
«Дизайн — это не только то, как он выглядит и на что он похож. Дизайн — это то, как это работает».
-Стив Джобс
Если Вам нужен дизайн сайта или дизайн мобильного приложения свяжитесь со мной, обсудим Ваш проект!
