UI, UX: Кто этим занимается? Гид для дизайнеров SPECIAL. Семь вопросов о работе UX-дизайнера: разбираемся в профессии

User Interface Design или пользовательский интерфейс призван помочь организовать взаимодействие пользователя с устройством или программой.Это то, с чем пользователь сталкивается при взгляде на устройство или экран: расположение графических элементов интерфейса, кнопок и навигации. От того, насколько пользовательский интерфейс удобен, зависит желание человека воспользоваться сайтом или приложением. Лояльность пользователей во многом зависит от удобства и привлекательности интерфейса. Яркий дизайн привлекает людей и заставляет их зайти в программу или на сайт. Поэтому важно чтобы UI дизайн был интуитивно понятен.

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

Таким образом, UI-дизайн направлен на формирование необходимого эмоционального восприятия продукта. А UX-дизайн основывается на пользовательской помощи юзеру в работе с ресурсом.

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

Вы получите

Качественно выполненная работа

Привлекательный дизайн

Эмоциональное вовлечение пользователей

Структурированный интерфейс

От чего зависит цена UI дизайна

1. Количества концептов интерфейса. Чем их больше, тем она выше.
2. Типа устройств, для которого разрабатывается интерфейс. Это может быть интерфейс приложения андроид, интерфейс приложения IOS или же web-приложение.
3. Наличия сформированных правил UX. Если нам нужно будет выработать правила - цена повышается.
4. Необходимости создания иллюстраций . Они могут быть графическими и анимационными. Также цена зависит от их количества. Чем больше иллюстраций требуется, тем выше стоимость UI дизайна.

Закажите дизайн пользовательского интерфейса в брендинговом агентстве KOLORO. Мы найдем подход к вашему проекту.

Разработка UI дизайна: этапы

1.Постановка задачи:

• постановка целей, для которых будет использоваться интерфейс;
• анализ потребности пользователей;
• выбор платформы, на которой необходимо реализовать проект.

2. Разработка эскизов интерфейса.
3. Создание прототипа , для оценки удобства интерфейса.
4. Анализ полученных данных и подбор оптимальных вариантов.

UI интерфейс включает в себя такие элементы:

• информационную архитектуру;
• проектирование взаимодействия;
• графический дизайн.

Создание UI дизайна: правила

1. Дизайн элементов приложений должен быть максимально простым и понятным .
2. Пользователь не должен совершать сложных действий или длинных цепочек переходов.
3. Желательно использовать привычные элементы управления и понятные визуальные образы.
4. Логически связанные элементы необходимо объединять в меню и формы.
5. Самые важные элементы пользовательского интерфейса должны идти первыми .
6. Интерфейс должен быть оформлен в едином стиле.

Разрабатывая UI дизайн мобильного или web-приложения необходимо учитывать эффект «эстетика-юзабилити» (aesthetic-usability effect). Находясь под его влиянием человеку кажется, что интерфейс приложений, который выглядит лучше, является более удобным. Поэтому дизайн пользовательского интерфейса должен гармонично сочетать красоту и удобство .

Закажите дизайн интерфейсов в брендинговом агентстве KOLORO . Мы умеем соблюдать баланс.

Особенности разработки интерфейса приложения

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

Необходимо тщательно прорабатывать детали проекта еще на ранних этапах и следовать главным принципам разработки мобильного интерфейса. Среди последних трендов дизайна - разработка приложений, которые работали бы и на Android и на iOS. Однако UI дизайн лучше разрабатывать отдельно для каждого мобильного приложения. Так можно избежать ошибок и неправильного функционирования.

Перед UI интерфейсом стоят такие задачи

1. Обеспечивать взаимодействие пользователя с приложением.
2. Приносить эмоциональное удовлетворение пользователю в процессе работы.
3. Выглядеть привлекательно .

Составляющие UI

1. Визуальный дизайн , или VD важен для качественного отображения цветов, шрифтов и других элементов сайта, поскольку именно это создает эстетику сайта. Хороший пользовательский интерфейс может существовать только в совокупности содержания страницы и ее функционала. Кроме этого, визуальный дизайн направлен на то, чтобы привлечь пользователя и выстроить его доверие к продукту или услуге.
2. Дизайн система  — проектирование пользовательского интерфейса через системы отдельных элементов интерфейса. Они нужны для разработки многоразовых шаблонов.
3. Прототип  представляет собой действующий пример разработанного пользовательского интерфейса. Имитирование работы дает представление об откликах элементов интерфейса до их непосредственной разработки.
4. Содержимое . Гаджеты приучили пользователей работать в режиме многозадачности, поэтому при проектировании пользовательского интерфейса важно быстро и корректно продемонстрировать главный контент и функционал приложения, а все вторичное перенести на задний план или убрать.

1. Обратная коммуникация — это использование разного оформления или анимации отклика программы на действие пользователя. Человеку это дает понимание, что все под контролем и функционирует корректно.
2. Работа с помощью одной руки . Хороший дизайн интерфейса должен быть адаптирован под управление одной рукой. Легче всего управлять программой, когда необходимые элементы навигации расположены в нижнем левом углу. Также удобный дизайн интерфейса предусматривает наличие больших кнопок, отступов и броского оформления важных элементов для легкого взаимодействия с ними.
3. Быстрый ввод . Формы для заполнения должны: требовать от пользователя минимального количества информации; предлагать варианты ответов. Например, при необходимости узнать возраст юзера лучше использовать выпадающий список, а, узнавать адрес через синхронизацию с геолокацией. Общая рекомендация - минимальный ручной ввод.

Разработка UI дизайна в KOLORO принесет вам

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

UI дизайн - важный элемент интерфейса. С его помощью контактируют программа и пользователь. Обратитесь в брендинговое агентство KOLORO, и мы разработаем максимально удобный UI дизайн!

С интерфейсами любому современному человеку приходится сталкиваться постоянно. Иногда эти столкновения проходят совершенно безболезненно: несколько нажатий нужных кнопок - и вот вы уже общаетесь с друзьями в своей любимой социальной сети. Еще несколько кликов - и вы заказываете пиццу в офис, откладываете талончик к дантисту или ищете в Сети новый смартфон, потому что старый… достал своей «тупостью»! Да, иногда столкновения с интерфейсами напоминают попытки пробить стену головой. Найти нужные настройки в «мобильнике» - проблема! Заказать билет на самолет или поезд - слишком сложно (бум головой, бум-бум)! Заплатить по счетам, пользуясь интернет-банкингом - бум-бум-бум!

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

Интерфейс - это всегда взаимодействие. Взаимодействие какой-то системы (это необязательно должна быть компьютерная система) и человека (пользователя). И если взаимодействие затруднено, начинаются проблемы. Можно ли их избежать?

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

Зато можно научиться создавать удобные интерфейсы, о существовании которых пользователю даже не придется задумываться! Именно этой проблематикой и занимается такое направление в ИТ, как UI/UX Design .

UI - это интерфейс пользователя, он же пользовательский интерфейс (от английского user interface). UX в переводе означает «опыт взаимодействия» (User eXperience) и включает в себя различные компоненты: информационную архитектуру, проектирование взаимодействия, графический дизайн и контент.

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

Профессия проектировщика интерфейсов, безусловно, интересна, перспективна и многогранна, ведь она возникла на стыке дизайна, инженерных специальностей и психологии. Наверное, стать гуру UI/UX-дизайна под силу не каждому: здесь мало только любить сам дизайн - нужно разбираться в каких-то технических моментах и практических вещах, уметь заглядывать в будущее и анализировать человеческое поведение. Но если вы противник узких специализаций. Если вам нравится придумывать вещи, которых еще нет. Если вы постоянно замечаете несовершенство окружающего мира и задумываетесь о том, как это можно исправить, тогда UI/UX Design - это для вас!

«Хорошо, - воскликнете вы, - я хочу стать проектировщиком интерфейсов! Что дальше?»

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

Но есть более надежный и эффективный вариант - живое общение с Мастером своего дела и приобретение практического опыта под его руководством. Это как раз то, что предлагаем мы - добро пожаловать в Образовательный центр ПВТ на курс «Проектирование интерфейсов» (UI/UX Specialist) !

Материал подготовили: Вадим ЗЕЛЕНКОВ, Эрика ГРИЩЕНКО.

Дизайн – понятие довольно широкое и неопределенное. Когда кто-то говорит? «Я дизайнер», не сразу понятно, чем он в действительно занимается каждый день. Существуют несколько разных областей, объединенных под понятием «дизайн».

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

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

Давайте попробуем разобраться в том, что же означает каждый из этих терминов.

UX-дизайнер (USER EXPERIENCE дизайнер)

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

Пример описания работы experience-дизайнера в Twitter:

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

Результаты работы: макеты изображений на экранах, раскадровки, план сайта.

Инструменты: Photoshop, Sketch, Illustrator, Fireworks, InVision

UI-дизайнер (USER INTERFACE дизайнер)

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

Обычно UI-дизайнер также несет ответственность за создание единого стиля и обязан убедиться в том, что соответствующий «язык» дизайна применен во всем продукте.

Сохранение последовательности во всех визуальных элементах и определение поведения (например, как отображать ошибку или предупреждения) подпадают под компетенцию UI-дизайнера.

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

Инструменты: Photoshop, Sketch, Illustrator, Fireworks

Визуальный дизайнер (графический дизайнер)

Визуальный дизайнер – это тот, кто занимается графикой. Если вы спросите кого-то, кто не занимается дизайном, кто такой дизайнер, пожалуй, первым на ум придет как раз-таки графический дизайнер. Графические дизайнеры никак не связаны ни с тем, как экраны сообщаются друг с другом, ни с тем, как кто-то взаимодействует с продуктом. Вместо этого, они сосредоточены на создании красивых иконок, элементов управления и других визуальных элементов и выбирают подходящие шрифты. Графические дизайнеры трудятся над маленькими деталями, которым остальные не придают значения, и часто работают в Photoshop в режиме приближения 4X или 8X.

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

Инструменты: Photoshop, Sketch

Interactive-дизайнер (моушен-дизайнер)

Помните почти незаметную подпрыгивающую анимацию, когда вы обновляете почту на своем iPhone? Это работа моушен-дизайнера. В отличие от графических дизайнеров, которые работают со статичными элементами, моушен-дизайнеры создают анимацию внутри приложений. Они имеют дело с тем, что делает интерфейс, после того, как пользователь к нему прикасается. Например, они решают, каким образом должно развертываться меню, какие эффекты перехода использовать, и как должна реагировать та или иная кнопка. Хорошо выполненный моушен-дизайн становится неотъемлемой частью интерфейса, предлагая визуальные подсказки как использовать продукт.

Описание работы моушен-дизайнера в Apple:

«Высокая квалификация в графическом дизайне, моушен-графике, знания в digital art, хорошее восприятие шрифтов и цвета, общее внимание к материалам и текстурам, а также практическое понимание анимации. Знание iOS, OS X, Photoshop и Illustrator, также знакомство с Director (или аналогом), Quartz Composer (или аналогом), 3D-моделированием, моушен-графикой»

Инструменты: AfterEffects, Core Composer, Flash, Origami

UX Исследователь (Исследователь пользователей)

Цель UX исследователя – ответить на два вопроса: «Кто наш потребитель?» и «Что хочет наш потребитель?» Обычно в обязанности исследователя входит проведение интервью с пользователями, исследование маркетинговых данных и общий сбор аналитики. Дизайн – это процесс постоянного совершенствования. Исследователь может помочь в этом процессе, проводя A/B-тестирование, чтобы выявить, какое дизайнерское решение наиболее полно удовлетворяет потребительские нужды. UX-исследователь обычно – главная опора в больших компаниях, где доступ к огромному количеству информации дает ему достаточно возможностей, чтобы прийти к значимым заключениям.

Описание работы UX-исследователя в Facebook:

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

UX-дизайнеры периодически выполняют обязанности UX-исследователей.

Результаты работы: портрет пользователя, результаты A/B-тестирования, поведенческие исследования пользователей/интервью.

Инструменты: микрофон, бумаги, документы

Внешний разработчик (UI-разработчик)

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

Инструменты: CSS, HTML, JavaScript

Дизайнер продукта

Продакт-дизайнер – всеобъемлющее понятие, чтобы описать дизайнера, который в общем вовлечен в процесс создание образа и восприятия продукта.

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

Некоторые компании используют «UX-дизайнер» или просто «дизайнер» в качестве всеобъемлющего термина. Прочтение описания вакансии – лучший способ выяснить, что будет входить в вашу компетенцию.

Описание работы продакт-дизайнера для Pinterest

«Владение всеми сферами дизайна: взаимодействие, визуальная часть, работа с продуктом, макетирование. Создание шаблонов элементов изображений и их верстка».

Ищу дизайнера

Самая распространенная фраза, которую я слышу от молодых стартапов. Обычно они ищут того, кто мог бы делать все вышеперечисленное. Они ищут того, кто мог бы создавать красивые иконки, создавать лендинги, запускать A/B-тестирование, логично размещать элементы UI на экране, и может даже делать что-то из обязанностей внешнего разработчика. Из-за общего характера, который носит эта должность, мы часто слышим, что компания хочет нанять просто «дизайнера», не углубляясь в подробности и специфику этой профессии.

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

UX-дизайнер (user experience) на самом деле не является дизайнером, скорее это проектировщик, который разрабатывает структуру, удобную для пользователей. Готовый продукт должен привлекать своим удобством, простотой и красотой, вызывать желание заходить в приложение или на сайт снова и снова.

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

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

Немного истории

Термин UX впервые был употреблен в 1993 году Дональдом Норманом. Это было его начало карьеры в Apple. Норман считал, что компьютерный интерфейс должен не просто нести функциональность, но и вызывать приятные эмоции у пользователей.

После взлета популярности айфонов данный термин стал широко распространен. Многие конкуренты поняли, насколько важно значение UX-дизайнера при создании пользовательского интерфейса.

От малого к большому

На заре интернета дизайнеру ставилась простая задача: «нарисовать сайт». Специалист, не особо задумываясь, рисовал красивые картинки и сдавал проект. Сайты были похожи как братья-близнецы. Менялся цвет фона и наполнение.

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

Теперь UX design исследует поведение пользователей и создает архитектуру сайта, а UI графически воплощает это в жизнь. Как программист программирует, а верстальщик располагает элементы в нужном порядке.

Профессия UX/UI-дизайнера

Путаница в понятиях до сих пор остается. Некоторые веб-дизайнеры представляются UX/UI-специалистами, не до конца понимая сути. Используют название только потому, что считают это модным.

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

Такой человек способен объяснить клиенту, почему кнопочки располагаются именно в этом месте, по какой причине определенный элемент размещен внизу, а не в середине страницы. Он не просто рисует что-то красивое, он логически располагает блоки.

Отдельно UI-дизайнер не сможет добиться нужного эффекта. Фактически он владеет знаниями только в графическом редакторе, что недостаточно в современной цифровой индустрии. Он должен тесно работать с UX-дизайнером, который является одновременно психологом, аналитиком, художником, социологом, сценаристом и режиссером.

Ключевыми обязанностями UX/UI-дизайнера являются:

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

Работа считается правильно выполненной, если при работе с сайтом или приложением пользователя ничто не раздражало и не отвлекало на бесполезные элементы.

Отличие веб-дизайнера от UX/UI-специалиста

Терминология:

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

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

UX/UI-специалист не ограничен цифровыми технологиями. Его деятельность может касаться разработки панели управления кофеваркой, принтером или корабля. Конечно, в каждой области своя специфика и разработчик интерфейса сайтов хорош именно в своей работе. Но при этом суть остается одна: панель управления в автомобиле, самолете или кухонном приборе должна быть удобной, понятной и не вызывать раздражения.

Личные качества

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

Важные личные качества:

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

Специалистом не рождаются. Да, некоторые личные качества изучить невозможно, но все остальное можно приобрести: читать рекомендуемые книги и специализированные статьи, посещать лекции и много-много практиковаться.

Востребованность специалистов

В цифровой индустрии большая нехватка настоящих UX/UI-дизайнеров. Невозможно предсказать, сколько времени продлится данная тенденция, но, если интернет не пропадет, то данная отрасль будет и дальше развиваться.

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

Мало просто сделать несколько страничек с информацией о компании и написать контакты, необходим UX/UI дизайн, при помощи которого детский конструктор превратится в настоящий сайт.

Основные принципы построения интерфейсов

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

• Простота. Пользователь путем минимального количества действий должен добиться необходимого результата.
• Скрытие таблички «столб» на столбе. Лишние надписи сбивают с толка, заставляют пользователя отвлекаться. Если корзину или смайлик можно отобразить значком, то достаточно этого.
• Автоматические действия. Сложные действия отпугивают пользователя, он должен автоматически нажимать на клавиши/кнопки, не думая, зачем это делается. Важно, что он получит ожидаемый результат.
• Привычка. Человеку трудно привыкнуть к новому. Пользователь видит нарисованную корзину и появляется ассоциация покупки. Если поменять изображение на «бабушкину авоську», уже будет трудно догадаться, что к чему.
• Просмотр по диагонали. Большие тексты никто не читает. Лучше делать краткие заметки по сайту или заголовки и подзаголовки, отображающие суть вопроса.
• Кошелек Миллера. Согласно принципу американского ученого кратковременная память способна охватить 7 элементов плюс-минус две штуки. Поэтому информацию в блоках лучше располагать в пределах этих цифр.
• Интуитивность. Многие вещи пользователи делают согласно своей интуиции и не желают что-то запоминать.
• Нужное на виду. UI дизайн предполагает делать акцент на тех вещах, которые пользователю наиболее необходимы.
• Группировка. Все элементы необходимо группировать по какому-то отличительному признаку. Например, если в телефоне есть меню «сообщения», то рациональнее в него вставить входящие и исходящие сообщения, написание новых, а также настройки сообщений.
• Правило 3-х кликов. Старое, но не теряющее актуальности. Чтобы добраться до нужной информации, необходимо сделать не более трех кликов. Большее количество вызывает недовольство и влечет за собой уход с сайта или отказ от услуг.
• Одинаковый стиль. Отзывы о компании или об определенном продукте не должны отличаться функционалом или внешним отображением.
• «Защита от дурака». Если пользователь захотел удалить свои фотографии или еще что-то - нужно переспросить. Возможно, он просто случайно нажал на кнопку.
• Копирайтинг. В интерфейсе не должно быть ничего лишнего. Каждый заголовок важен, каждая буква в меню тщательно подбирается.
• Будь в тренде. Создание проекта - дело длительное, а мода переменчива. Чтобы проект не устарел его до его выхода в свет, необходимо продумывать каждую деталь.
• Мелочей не бывает. Одна маленькая черточка своим присутствием или отсутствием отпугнет или привлечет людей.

Резюме

UX/UI design важен в любой сфере деятельности. Почему в самолете штурвал, а в автомобиле - руль? Это удобно и правильно. Так и на сайте нужно подбирать удобные элементы, т.е. учитывать пользовательский опыт.

Любой проект нуждается в тестировании. Даже когда сайт уже запущен, не следует бросать его. Анализ действий пользователей поможет улучшить уже работающий ресурс и исправить имеющиеся недочеты. Может получиться так, что больше половины посетителей сразу закрывают сайт из-за неприятной цветовой гаммы, либо не могут найти нужную кнопку. Хотя при разработке все казалось очевидным.

Кого привлекать к работе: UX или UI?

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

Время достижения цели - это функция расстояние до цели и её размера. В 1954 году психолог Пол Фиттс, изучавший моторную систему человека, показал, что время, требуемое для попадания в цель зависит от расстояния до цели, а также находится в обратной зависимости от размера цели. Согласно этому закону, быстрые движения и маленькие цели приводят к большему количеству ошибок. Закон Фиттса широко применяется в UI и UX. Например, согласно этому закону, интерактивные кнопки стоит делать большими, потому что на маленькие кнопки сложнее кликнуть и это занимает больше времени.

Закон Хика

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

Закон Якоба

Пользователи проводят большее количество времени на других сайтах. Это означает, что пользователи предпочитают, чтобы ваш сайт работал так же, как и сайты, которые они уже знают. Закон Якоба придуман Якобом Нильсеном, сооснователем Nielsen Norman Group, который сделал огромный вклад в UX, например, изобрел метод эвристической оценки.

Закон прегнантности

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

Закон близости

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

Закон Миллера

В среднем, человек может удержать в памяти 7 ± 2 элемента в своей рабочей памяти. В 1956 году Джордж Миллер утверждал, что диапазон непосредственной памяти и абсолютного суждения был ограничен примерно 7 частями информации. Основной единицей информации является бит, объем данных, необходимый для выбора между двумя одинаково вероятными альтернативами. То есть, 4 бита информации - это решение между 16 парными альтернативами (4 последовательных двоичных решения). Точка, в которой путаница вызывает неправильное суждение, - это пропускная способность канала.

Закон Паркинсона

Любая задача занимает все отведенное на неё время. Согласно этому закону, ограничения во времени, пространстве или бюджете приводят к увеличению продуктивности и эффективности.

Эффект серийного расположения

Пользователи лучше всего запоминают первые и последний объекты в серии. Манипуляции с серийным размещением для создания лучшего пользовательского опыта используется во многих популярных дизайнах успешных компаний вроде Apple, Electronic Arts и Nike.

Закон Теслера

Закон Теслера, или закон сохранения сложности, утверждает, что для любой системы существует определенное количество сложности, которое нельзя сократить. В середине 1980-х Ларри Теслер понял, что взаимодействие пользователей с приложениями так же важно, как и сами приложения. Он говорит, что во многих случаях инженер должен потратить лишнюю неделю на упрощение приложение, а не заставлять миллионы пользователей тратить лишнюю минуту на использование сложной программы. Однако, Брюс Тогнаццини утверждает, что люди сопротивляются упрощению своей жизни. Поэтому, если приложение простое, пользователи начинают стремиться к более сложным задачам.

Эффект Фон Ресторфф

Эффект Фон Ресторфф, или эффект изоляции, предсказывает, что при наличии большого числа похожих объектов, вероятнее всего запомнится тот, что отличается от остальных. Этот эффект был открыт в 1933 году немецким психиатром и педиаторм Хедвиг фон Ресторфф, которая обнаружила, что когда участникам исследования показывали список похожих объектов, среди которых один отличался, этот объект запоминался лучше.