Cегодня мы с вами поговорим о том, что такое UI UX дизайн и узнаем чем они отличаются друг от друга. Пользователи сайтов и приложений никогда не думают о технической составляющей вашего продукта. Они всегда имеют дело с интерфейсом и его дизайном, а понравится ли им ваш сайт или приложение как раз зависит от UI и UX дизайна.
Что такое UI дизайн?
Что такое UI UX дизайн? — User interface
История UI дизайна
История дизайна пользовательского интерфейса началась около 50 лет назад. На первых компьютерах не было никаких визуальных элементов для взаимодействия с ними. Все команды вводились через командную строку, но в 80-х годах был разработан первый общедоступный графический интерфейс, благодаря которому пользователи смогли взаимодействовать со своими компьютерами с помощью различных кнопок в меню.
Что такое UI UX дизайн? — Xerox Alto
В 1973 году компания Xerox представила первый графический интерфейс в компьютере Xerox Alto, что стало настоящим прорывом. Благодаря ему стало намного проще понимать процессы происходящие в компьютере. В то время компания Xerox не осознавала какую великую революцию в дизайне совершила поэтому продала прототип графического интерфейса компании apple за 1 миллион долларов. Cтив Джобс продолжил работу над интерфейсом и представил его всему миру во время презентации Apple Macintosh в 1984 году.
Принципы UI дизайна
Визуальная ясность
Этот принцип означает, что все что происходит на экране должно быть понятно пользователю независимо от устройства, которое он использует. Визуальная ясность очень важна, так как больше половины пользователей используют смартфоны для просмотра сайтов, но при этом другая весомая часть пользователей продолжает использовать десктопы, ноутбуки или планшеты.В таком случае визуальная ясность необходима если вы хотите чтобы они получали удовольствие от использования вашего сайта или приложения и быстро выполняли все необходимые действия и находили нужную информацию независимо от размера экрана.
Что такое UI UX дизайн?
Если контент размещен правильно, то пользователь не сталкивается с препятствиями и легко достигает желаемого результата. Чтобы добиться визуальной ясности при создании пользовательского интерфейса используйте минимум информации на экранах чтобы не загромождать пространство. Вы должны разместить контент так чтобы он отображал важность вашей информации и был объединен размером, масштабом и цветом.
Согласованность
Визуальная согласованность означает, что все элементы на экране должны восприниматься как единое целое. Старайтесь объединить стилистику всех кнопок, ярлыков, тегов, шрифтов, иконок. Например самое элементарное это использовать один цвет для кнопок, иконок и текстовых ссылок. Такой подход к созданию UI дизайна сделает ваш продукт целостным.
Не стоит заново придумывать велосипед. Старайтесь использовать уже наработанные визуальные шаблоны, к которым привык пользователь. Например прямоугольная форма кнопок, компоновка элементов меню и интерфейса и так далее.
Что такое UI UX дизайн?
Также если вы делаете приложение, то обязательно согласовывайте его дизайн с гайдами Android и IOS, так как пользователю легче понять дизайн если он соответствует правилам и принципам работы других приложений на его смартфоне.
Эстетичность
Этот простой и короткий принцип означает, что контент должен быть логически сгруппирован чтобы повысить доступность информации для пользователя. Таким образом текст, фотографии, иллюстрации или анимация не должны отвлекать пользователя от необходимого действия, а наоборот должны помогать ему.
Что такое UI UX дизайн? — Эстетичность
Что делает UI дизайнер?
Основная задача и UI дизайна это помочь пользователю быстро понять как использовать продукт. В идеале UI дизайнер должен сделать так чтобы пользователю понравился сайт или приложение с первого взгляда, чтобы он посещал его все больше и больше.
Чтобы сделать интерфейс простым и интуитивно понятным нужно:
- тщательно анализировать целевую аудиторию
- тесно сотрудничать с UX дизайнерами
- создать единый стиль не только для продукта но и для бренда в целом (UI-kit, брендбук)
- вести разработку интерактивности, то есть создавать анимацию для различных элементов интерфейса, жестов или сценариев использования
- необходимо адаптировать ваш дизайн под разные размеры экранов
Что такое UX дизайн?
UX или user experience в переводе с английского означает опыт пользователя. Таким образом UX дизайн это проектирование интерфейса на основе исследований пользовательского опыта, а также изучение поведения пользователя. Другими словами UX дизайн служит для того чтобы продукт был логичным, удобным и полезным Основная цель UX дизайна сделать так чтобы сайт или приложение вызывали только приятные впечатления.
Что такое UI UX дизайн?
Где лучше разместить форму для входа в личный кабинет? Как расположить меню? Сколько шагов должен сделать пользователь чтобы подписаться на рассылку новостей или сделать заказ? Все эти вопросы решаeт UX дизайн.
Читайте также:
История UX дизайна
UX дизайн получил свое название в 1995 году от Дональда Нормана профессора и ученого, который пришел в Apple в начале 90-х в качестве архитектора пользовательского опыта. Дональд Норман был первым, кто использовал термин UX в своей должности.
Что такое UI UX дизайн? — Дональд Норман
Именно Дональд предложил термин «дизайн пользовательского опыта«. Он говорил, что придумал этот термин потому что считал, что для интерфейса удобство использования это слишком узкое понятие, и хотел охватить все аспекты опыта человека с системой включая промышленный дизайн, графику, интерфейс, физические взаимодействия и так далее. Чтобы лучше разобраться в вопросе UX дизайна давайте рассмотрим основные принципы.
Принципы UI дизайна
Полный контроль и свобода
Благодаря этому принципу пользователь должен иметь полную свободу и в то же время полный контроль на сайте или в приложении, потому что очень часто бывает, что пользователь совершает какое-то действие по ошибке, и у него всегда должен быть так называемый аварийный выход чтобы вернуться или отменить действие. Необходимо предоставить пользователю свободу выбора и гибкость чтобы он легко мог справиться с любыми нежелательными действиями и вернуться к предыдущему экрану.
Плавная навигация
Хороший UX дизайн вводит пользователя в зону комфорта где не нужно думать, что означает та или иная кнопка и куда она ведет. Навигация должна быть очевидной, плавной и понятной. Для этого нужно использовать визуальные подсказки и предсказуемость.Это означает, что пользователю должно быть очевидно как выполнить то или иное действие, например, как выйти из корзины, как продолжить покупки или как найти ту или иную статью.
Реалистичная обратная связь
UX дизайн должен обеспечивать реалистичную обратную связь. Например, когда пользователь отправил сообщение ему нужно подтвердить, что сообщение отправилось, или когда пользователь нажал на кнопку она должна изменить свой цвет и дать ему понять, что взаимодействие прошло успешно и его действия были выполнены правильно.
Что такое UI UX дизайн? — UX наброски интерфейса
Минимальная когнитивная нагрузка
Чтобы пользователь легко и быстро достиг желаемой цели следует уменьшить общее количество действий, которые ему нужно для этого предпринять.
Лучше всего использовать правило трех кликов, которое означает, что пользователь должен иметь возможность выполнить любое действие или найти любую информацию не более чем за три клика.
Функциональная согласованность
Это очень простой принцип, который означает, что нельзя изменять логику элементов интерфейса внутри продукта. Например, элементы меню и кнопки должны следовать одной и той же логике и выполнять одни и те же действия на всех страницах сайта.
Чем занимается UX дизайнер?
Чаще всего UI дизайнеры занимаются UX дизайном потому что очень важно знать как пользователь взаимодействует с продуктом прежде чем нарисовать красивый и удобный интерфейс. Помимо анализа рынка и целевой аудиторией UX дизайнер создает портрет конечного пользователя — его пол, возраст, социальную принадлежность и тд.
По этой информации строится проектирование будущего продукта, затем необходимо создать черно-белый каркас и более детализированный прототип будущего сайта или приложения с добавлением цвета изображений и типографики. После этого проводятся тестовые запуски для выявления слабых и проблемных мест, а также чтобы выяснить понятен и логичен ли интерфейс и правильно ли работают его компоненты.
В конечном итоге происходит сотрудничество с UI дизайнером во время которого отрисовываются визуальная составляющая дизайна сайта или приложения, а после этого дизайнеры работают совместно над продуктом с разработчиками чтобы те могли правильно реализовать все решения в программном коде. В итоге получается, что процесс UX дизайна очень сложный и очень важный если речь идёт о создании действительно успешного продукта.
Что такое UI UX дизайн? — UI
В чем разница между UI и UX дизайном?
Ответ очень прост — сравнивать эти два направления неуместно, так как UI дизайн это часть UX дизайна. Основная цель UX дизайна — повысить удобство и простоту использования при взаимодействии с продуктом, в то время как UX дизайн занимается внешним видом продукта как главной целью. UX дизайн присутствует на всех стадиях создания сайта или приложения — от анализа и первых прототипов, до завершающих стадий и тестирования и только потом дизайнеры пользовательского интерфейса начинают свою часть работы по созданию визуальных элементов.
UX делает интерфейс функциональным, UI делает интерфейс красивым, простым в использовании, эстетическим и приятным для пользователя. UX заботиться об удобстве не только внутри продукта, но и в рамках всего бизнеса. Например, правильно спроектированный интерфейс способен облегчить некоторые процессы, влияющие на удовлетворение пользователя будь то возврат покупки или служба поддержки.
UI и UX дизайн не могут существовать друг без друга. Они дополняют друг друга и помогают дизайнерам создавать современные и удобные сайты и приложения. Проще говоря UX это строительство вашего дома а UI его украшение и уют.
Заключение
В данной статье мы разобрали что такое UI UX дизайн и выяснили различия между этими направлениями.
