Какая разница между дизайном UX и UI?

1656684022 kakaya raznicza mezhdu dizajnom ux i ui

от Harshita Arora

И несколько советов для вас, чтобы начать работу с обоими.

OU9LabgKCdTWQLe0R6oU2bYvzua5Y6zWhVmL
Авторы изображений

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

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

Давайте начнем!

Во-первых, давайте ответим на вопрос: что именно такое дизайн пользовательского интерфейса и дизайн UX и в чем разница между ними?

7MMP2ME4KmUnIbyTIGCKMZjK8fyz-6MlJFRx
Автор изображения

Проще говоря, пользовательский интерфейс – это происходящее посмотритеUX – это то, что происходит работать. UX – это процесс, а UI – результат. Разберемся дальше…

Дизайн пользовательского интерфейса

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

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

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

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

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

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

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

Что нужно помнить о создании великолепного пользовательского интерфейса

  1. На экране люди всегда первыми будут читать больше всего, смелее и ярче.
aROSalmw5wfjgckzuzu35XyM2UjiGu4bpE-p
Авторы изображений

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

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

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

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

pxYS2fYShMcDNj3GsTgYCjz91CvEuYNm172l
Авторы изображений

На изображениях выше изображения налево имеет 1 линию выравнивания. В то время как изображение в правой части имеет 4 линии выравнивания.

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

z3T81DNnilE5-v7FMFmOtrqbsOX5SywgPmBf
Изображение слева имеет много линий выравнивания, а справа только одна, и выглядит более приятно для глаза! Авторы изображений

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

  • Выравнивание краев – это то, что все элементы имеют одну сторону или край, выстроенные одной линией.
  • Выравнивание по центру – это то, где вы выравниваете все элементы по их середине.
UxYYx1BenmU0D1ZmmNj4D8dAOcYmA7n0h4kz
Авторы изображений

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

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

Вот два способа интерпретации: 1) Вы должны привлечь внимание пользователя своим дизайном. 2) Вы должны обращать внимание на каждый пустяк в своих дизайнах.
Чтобы быть отличным дизайнером, вам нужно делать и то, и другое. Последнее позволяет добиться первого.

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

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

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

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

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

Дизайн взаимодействия с пользователем

Дизайн User Experience (UX) – это создание безболезненных и приятных впечатлений.

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

  1. Юзабилити: Для чего пользователь использует мою программу? Какова основная функция программы? Что мне нужно сделать правильно, чтобы мое приложение можно было пользоваться?
    Теперь как я могу минимизировать количество шагов, которые нужно сделать пользователю, чтобы достичь этого в моей программе? Что главное, чего мои пользователи хотят достичь с помощью моей программы? Как я могу сделать процесс достижения этого максимально плавным, быстрым и приятным?
  2. Профили пользователя: вы должны знать, кто ваши пользователи и чего они хотят достичь с помощью программы. Лучший способ сделать это – создать профиль пользователей.
    Вы должны выполнить несколько упражнений на мышление, чтобы понять свой рынок. Сужьте вашу целевую аудиторию/аудиторию пользователей.
    Главный вопрос, который нужно постоянно задавать себе: какова основная функция программы? Создайте профиль пользователей, чтобы постоянно просматривать этот вопрос.
  3. Запрос разрешений: если ваше мобильное приложение имеет push-уведомление, требует служб определения местоположения, интеграции с социальными сетями, электронной почтой и т.д., вы знаете, что вам нужно разрешение пользователя на уведомление, которое появляется на экране, когда они используют ваше приложение. Вместо того чтобы спрашивать все сразу, что перегрузит пользователя, используйте эффект Бенджамина Франклина. Прежде чем просить кого-нибудь о большой услуге, попросите их о маленькой услуге. И медленно толкайте пользователя в определенном направлении.
    Убедитесь, что программа отправляет уведомление о разрешении только тогда, когда пользователь собирается использовать эту функцию, а не тогда, когда она запускает программу.
  4. Форма против функции: Дизайн не всегда связан с формой – красивой цветовой гаммой, шрифтами, макетом и т.д. Дело также в функциональности. Всегда отдавайте предпочтение функции, а не форме.
  5. Консистенция: Я последователен в своей программе? Соответствует ли моя программа моему бренду? Несоответствие дизайна создает путаницу. Смущенный пользователь – недовольный пользователь.
    Подумайте о последовательности не только с точки зрения внешнего вида, но и с точки зрения функциональности.
  6. Простота: Могу ли я сделать это проще?
    Убедитесь, что ваше приложение является бабушкиным, то есть пожилые люди могут его понять и использовать.
    Ряды за рядами кнопок, много разных цветов и плотно упакованный пользовательский интерфейс могут запутать приложение.
  7. Не заставляй меня думать: Я усложняю работу своему пользователю?
    Люди не любят, когда их путают.
    Когда мы программируем, мы стараемся сделать наш код максимально легким и эффективным.
    Когда мы разрабатываем дизайн, мы стараемся сделать интерфейс как можно более понятным и менее запутанным. И красивая!
    Постарайтесь сделать свою формулировку как можно более понятной.

Важные моменты для отличного UX:

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

Узнайте больше о UX Design здесь и здесь.

Последние мнения

Надеюсь, статья помогла вам понять основные концепции дизайна пользовательского интерфейса и UX. Я хотел бы услышать любой отзыв или любое мнение по поводу публикации. Вы можете отправить мне электронное письмо на harshita@harshitaapps.com!

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

Заканчиваю пост одной из моих любимых цитат о дизайне…

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *