Что делают 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?

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

Представляем новую статью серии . В этой части цикла рассмотрим позицию UX/UI дизайнера - специалиста, отвечающего за соответствие внешнего вида и логики продукта.

UX/UI дизайнер - специалист, который занимается проектированием пользовательских интерфейсов.

Типичный рабочий день включает в себя:

• работу над приоритетными задачами (проектирование, отрисовка);
• общение с заказчиком;
• внесение правок.

Преимущества и недостатки

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

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

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

«Лично меня бесят тупые приложения, неудобные расположения кнопок в лифтах, непродуманные интерьеры автомобилей - мне нравится делать что-то, что может это улучшить. Этот мир настолько несовершенен (не природа - там все идеально и сбалансирвано), что для толкового дизайнера всегда найдется работа».

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

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

Еще один плюс - возможность работать удаленно ( 20% всех дизайнеров), большой выбор проектов на фрилансе.

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

«В 80-90% случаев приходится работать без ТЗ с требованиями типа: «Сделай мегакрасиво и мегаконфигурируемо».

«Недостатком профессии считаю отношение к дизайну и дизайнерам в Украине. Почему-то все считают, что если они когда-то открывали Фотошоп, то автоматически могут быть дизайнерами и самостоятельно решать, сколько времени уйдёт на дизайн. Особенно этим грешат неопытные менеджеры и программисты (один менеджер из новичков утверждал, что сделал бы задачу за 30 минут в Пейнте, но у него нет времени на художества)».

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

«Минусы - как и во всем ИТ - сидячая работа, страдающие глаза и иногда заказчик, которому надо сделать белый #ffffff еще белее:)»

Как стать и куда двигаться дальше

Первый и главный навык по части UI - освоить графический редактор. Самый востребованный инструментарий - Adobe Photoshop, Sketch, Principle, Adobe Illustrator, After Effects. Для начала можно попробовать перерисовать скриншоты любого мобильного приложения или сайта. Но не просто скопировать (хотя и это нужно уметь), а заметить какое-то неудобство и предложить решение, как сделать лучше.

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

Изучение UX можно начать со знакомства с методологией, почитав книги Нильсена Нормана, Алана Купера, Джефа Раскина, Стива Круга, Алистера Коберна. Более прикладная литература - «The User Experience Team of One: A Research and Design Survival Guide» Leah Buley.

«В современном мире возможностей для реализации множество. Я покупал и продолжаю покупать онлайн-курсы на таких платформах, как Coursera, Udemy, Edx. Смотрю онлайн-конференции от Adobe, Google, читаю техническую литературу, анализирую работы на Dribbble , Behance , Awwwards ».

«UX/UI дизайнеру надо изучить классику пользовательского интерфейса: „Не заставляйте меня думать“ Стива Круга, „Дизайн привычных вещей“ Нормана, читать Люка Вроблевски. Необходимо постоянно практиковаться, ставить себя на место пользователя. Найти ментора, который будет указывать на ошибки, давать советы и способствовать росту».

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

UX и UI навыки и компетенции ()

Из личных качеств важны:

• усидчивость;
• упорность;
• креативное мышление;
• перфекционизм;
• желание учиться и развиваться;
• умение слышать критику.

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

Возможные карьерные пути UX/UI дизайнера:

• совершенствоваться как дизайнер, повышать рейт (если фрилансер);
• осваивать смежные направления, развиваясь как дизайнер продукта, VR дизайнер, VFX дизайнер, Game дизайнер;
• дорасти до позиции Арт-директора (Head of Design);
• развиваться как , если хочется переключиться с дизайна на управление продуктом в целом;
• стать , если интересно координировать людей;
• заняться , если больше интересен технический аспект;
• освоить программирование и стать UI-разработчиком;
• попробовать себя в маркетинге или .

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

Благодарю за помощь в написании статьи Юлию Бондаренко , Максима Паливоду , Марину Поповиченко и 25 других украинских дизайнеров, которые рассказали DOU о своей должности. Приведенные в статье цитаты взяты из их рассказов.

О том, как стать дизайнером.

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

Вот как у меня все это происходило, шаг за шагом:

1. Поймите все направления Дизайна

Есть визуальные дизайнеры, дизайнеры взаимодействий, дизайнеры пользовательского опыта (UX), дизайнеры интерфейсов (UI), продуктовые дизайнеры, графические и так далее. Есть и универсалы, которые знают всего понемногу. Начините с того, что бы выяснить, какая специализация вас интересует.

2. Читайте статьи по UX/UI дизайну по пути на работу

4. Сделайте перерыв, когда столкнетесь с трудностями

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

Я с улыбкой вспоминаю день, когда я смущенно призналась своему другу, что понятия не имею, как работать инструментом “перо” (вам будет смешно через несколько месяцев). Мой друг и я получили работу в одной компании год спустя и до сих пор улыбаемся, вспоминая день, когда в буквальном смысле потратили 8 часов, рисуя фигуры в Photoshop.

5. Читайте хорошие книги.

6. Найдите дизайнера, который знает как делать и спрашивайте его иногда

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

7. Вдохновлятесь

Слушайте Матиаса Дуарте, вице-президента по дизайну Android, и его рассказы о материальном дизайне .

Смотрите работы на Dribbble, The Best Designs и Awwwards. Сделайте вдохновение приоритетной задачей. Оно поможет вам понять UX шаблоны, визуальный дизайн и придаст вам сил.

8. Работайте над несуществующими проектами

Если ваша цель – стажер или позиция начального уровня в UI/UX дизайне, то вам нужно что-то показать работодателю. Это самый сложный шаг, это как спрыгнуть со скалы. Вряд ли вы будете готовы начать работу над проектом, но сделайте это, так или иначе. Попытайтесь создать порфтолио в Sketch или Illustrator, начните с пользовательских потоков, вайрфреймов, взаимодействий и, наконец, полноценного мокапа. После этого переделайте сайт, которому это просто необходимо. Создайте собственное приложение со списком задач. Создайте приложение по доставке. Продолжайте создавать то, что волнует вас.

9. Подпишитесь на Sidebar

Они рассылают 5 ссылок по дизайну каждый день.

10. Запишите эту цитату на вашем столе

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

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

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

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

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

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

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

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

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

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

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

Что такое UX-дизайн?

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

1. Интерактивный дизайн

Интерактивный дизайн, или IxD – подраздел UX-дизайна, определяющий взаимодействие между пользователем и продуктом; цель этих взаимодействий – хороший пользовательский опыт.

2. Визуальный дизайн

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

3. Пользовательское исследование

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

4. Информационная архитектура

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

Для иллюстрации рассмотрим карту нью-йоркского метрополитена. К слову, это хороший пример информационной архитектуры, которая помогает людям добираться из условного пункта «А» в пункт «Б». И, как звучит постулат Института информационной архитектуры, «если вы делаете что-то для других, вы применяете информационную архитектуру».

Составные процессы UX-дизайна

Выделяют три этапа UX-дизайна:

1. поиск целевой аудитории
2. понимание целей компании – как такие цели влияют на пользователя
3. нешаблонное мышление

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

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

Принципы UX-дизайна

Отрасль UX-дизайна стремительно меняется, но основополагающие принципы все те же. Дизайнеры должны понимать, что им нужно с точки зрения визуального баланса. Краткость и понятность – важные нюансы; здесь применим принцип – чем меньше, тем лучше. Стремитесь к тому, чтобы дизайн был интуитивно понятен, и, что еще важнее, учитывайте интересы и потребности пользователей.

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

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

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

Доступность : Никто не хочет понапрасну тратить свое время. Успешный UX-дизайн улучшает навигацию.

Легкость : Последовательность и незамысловатость дизайна – это всегда хорошо. Вы строите отношения с пользователями за счет удобного UX.

Простота : Никаких просчетов или лишних описаний. Сразу переходите к главному.

Результат UX

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

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

1. Пользовательское исследование

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

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

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

2. Оценка конкурентов

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

3. Интерактивный дизайн

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

4. Информационная архитектура

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

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

Когда Apple представила навигационный компонент Click Wheel для iPod, эта штука была интуитивно понятной и высокофункциональной – не говоря уже о визуальной составляющей. Это хороший пример успешного пользовательского интерфейса, или UI. UI – это способ взаимодействия с компьютерами, машинами, сайтами, приложениями, носимыми устройствами и пр. UI-дизайн – это то, что делает все эти вещи максимально упрощенными и эффективными.

UI vs. UX

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

Общие UI-элементы

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

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

Навигация «хлебные крошки»

Это дизайнерский инструмент, который визуально улучшает юзабилити сайта.

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

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

Исследование опыта взаимодействия

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

Юзабилити-тестирование

Задача такого исследования – узнать, насколько успешен продукт; в тестировании участвуют пользователи. Так компании получают реальную информацию о том, как люди пользуются продуктом или системой, или как этот продукт или система работают. Есть два основных способа тестирования.

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

Удаленное юзабилити-тестирование позволяет компаниям провести исследование в условиях, когда пользователи находятся в своей естественной среде (например, у себя дома или в офисе).

Инструменты юзабилити-тестирования

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

Adobe Fireworks СS6 позволяет веб-дизайнерам создавать графику для веб-страниц без необходимости вникать в тонкости программного кода или дизайна. У Adobe Fireworks есть ряд преимуществ. У этого инструмента впечатляющая точность пикселя, есть опции сжатия изображений (JPEG, GIF и т.д.), что позволяет пользователям создавать функциональные сайты и строить векторы.

С помощью Adobe XD можно создавать дизайн сайтов и мобильных приложений, а также прототипы, каркасное моделирование и векторную графику. Можно делиться интерактивными прототипами на нескольких платформах, включая Windows, Mac, iOS и Android – инструмент идеально подходит для командной работы.

Axure RP Pro – еще один хороший инструмент для UX-дизайна и, к тому же, бесплатный. В Axure реализованы несколько опций, в т.ч. прототипирование и документирование. Можно даже создавать схему перемещения пользователя и карты сайтов. Axure идеально подходит для создания веб- и десктопных приложений, пользователям предоставляется возможность быстрого экспорта в PDF или HTML.

Это комплексный софт со множеством специфических функций, в т.ч. недиструктивное редактирование (под этим подразумевается то, что Sketch не будет менять плотность пикселей изображения, с которым вы работаете). Экспорт кода, пиксельная точность, прототипирование, векторное редактирование – вот основные преимущества Sketch.

6. Софт для сторибординга

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

Storyboarder – бесплатная разработка с базовым функционалом, которая подойдет для всех дизайнеров, независимо от уровня их мастерства. Это ПО быстро создает наброски или фигурки, чтобы описать план или идею. Еще один инструмент – Toon Boom Storyboard Pro . Он совмещает в себе функцию рисования, анимации, контроля камеры и другие многочисленные опции – за ежегодную или ежемесячную плату. Широкий функционал, для усложненного сторителлинга и детальной подготовительной работы. Все это подойдет для дизайнеров, которые ищут возможность, чтобы визуально рассказать свою историю с помощью интерфейса.

Как стать UX-дизайнером?

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

Есть несколько важных шагов на пути к карьере UX-дизайнера. Многие университеты мира предлагают свои курсы, но чтобы на них записаться, 4 года образования в сфере дизайна – это, как правило, обязательное условие. Есть более гибкие программы, такие как Quinnipiac University Graduate Program in User Experience Design . Существуют и программы сертификации профессионалов. Многое зависит от продолжительности обучения и уровня подготовки.

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

Не упускайте из поля зрения следующие нюансы:

Визуальная привлекательность

Презентация – это все. Работа должна говорить сама за себя… показывайте, а не говорите! Выбор цвета, типографика – все это важно.

Добавьте страницу «о себе»

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

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

Объясните, как вы создаете свой UX

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

Создайте дополнительное портфолио

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

Итог

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

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

В этом году на Mobile World Congress было представлено множество Android-устройств, которые будут определять направление для разработчиков на следующие пару лет.

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

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

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

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

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

Гибель рамки

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

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

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

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

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

Меньше серых тонов, больше цвета и градиента

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

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

В мобильном дизайне мы можем увидеть это в возвращении ярких цветов в разные виды интерфейсов. Здесь плоский дизайн снова становится великим.

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

Хотя использование цветов естественно, их нужно использовать с ответственностью. Вот отличная история от Мудиты Батагоды, где он разобрал этот вопрос. Существует множество контекстных цветовых комбинаций, которые отличаются в восприятии у разных людей.

Нестандартная типографика

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

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

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

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

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

Анимированные, умные, 3D

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

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

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

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

Для 3D-интерфейсов доступной технологии пока не существует. Но постоянные попытки по её поиску приведут к чему-то со временем. Настоящие голографические дисплеи становятся проще в производстве, а ввод посредством движения снова появляется в качестве естественного способа управления машинами.

Сейчас мы можем подготовить пользователей к постепенному переходу к 3D-интерфейсам при помощи использования фальшивого 3D-дизайна в интерфейсах. Это не так важно, но это интересно пользователям, так что стоит рассмотреть их в попытке продать ваше приложение.

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

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

Это относится и к нереальным 3D-интерфейсам, которые нельзя использовать, но на них интересно смотреть. Не нужно сочетать эту анимацию с важной задачей. Мы все ещё далеки от того, чтобы заставить эти интерфейсы работать и сделать их доступными.

Создавайте системы

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

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

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

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

Заключение

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

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