От автора: прошедший год принес целую волну новых техник, стилей и трендов, большинство из которых возникли для удовлетворения потребностей растущего рынка мобильных устройств. Технический прогресс изменил ожидания пользователей по поводу эстетики и функциональности сайтов и приложений. В данной статье мы обсудим интерактивный дизайн сайта, а именно 5 лучших трендов 2015 года.
Давайте разберем несколько распространенных тактик, описанных в книге Лучшие практики интерактивного дизайна .
Фрейминг – То, как вы представляете определенную информацию. Вместо того чтобы показывать, что оплата картой будет стоить дороже, можно было бы включить ее в общую стоимость и представлять другие способы оплаты, как со скидкой.
Анкоринг – Суть заключается в отображении более дорогого товара выше, тем самым устанавливая его цену за эталон. В таком случае более дешевые товары будут выглядеть намного привлекательнее. Способ особенно эффективен в паре со скидками, когда пользователь четко видит, сколько он может сэкономить.
Боязнь потери – По результатам исследования выяснилось, что инстинкт покупателя избежать боли намного сильнее инстинкта удовольствия от покупки. Постановка вопроса «Если вы не зарегистрируетесь, то потеряете 10$» намного эффективнее, чем «Если вы зарегистрируетесь, вы сэкономите 10$».
Дефицит – Чем меньше товара, тем больший на него спрос. Внимательно посмотрев на сайты Groupon и Amazon, вы заметите, как они подчеркивают дефицит товара для управления конверсией.
Невидимый интерфейс
Хороший дизайн не привлекает к себе внимание. Такой дизайн работает на заднем плане, создавая ощущение у пользователей, что все, чего они достигли, все это благодаря только их усилиям. Ниже я представил несколько полезных способов по расширению возможностей пользователя во взаимодействии с сайтом:
Уменьшение и упрощение этапов – Чем меньше шагов пользователь делает для достижения цели, тем более успешен ваш интерфейс. Этапы могут быть небольшими, но даже если вы избавите пользователя от одного лишнего клика, то он оценит это. Просто взгляните, как Uber (ниже скриншот) превратил многоступенчатый процесс добавления данных кредитки в один простой шаг.
Понятная визуальная коммуникация – Придерживайтесь последовательной визуальной темы и универсальных и понятных значков, чтобы пользователь не запутался (т.е. иконка почты означает список сообщений или входящие).
Всепрощающий интерфейс – Предугадывайте распространенные ошибки пользователей и устанавливайте соответствующие меры безопасности. К данным мерам можно отнести отмену, автосохранение, многоформатный ввод данных, а также пояснительную обратную связь.
Следите за передвижением пользователя – Лучший способ выявить избыточность интерфейса и ненужные шаги это визуализировать передвижение пользователя по сайту. Jessica Downey на примере своей «карты щупалец » создает визуальную карту, помогающую правильно организовать этапы. Ryan Singer с сайта Basecamp придумал похожий, но более быстрый способ .
Значение пробелов
В книге «Лучшие практики пользовательских интерфейсов в веб-дизайне» сказано, что пустое место это не всегда скучно. Пробелы необходимо использовать как активную часть дизайна. С точки зрения интерактивного веб-дизайна пробелы это паузы между словами и предложениями. Распознавание и обработка элементов с экрана быстро теряет смысл без кратких передышек.
Ниже я составил парочку советов относительно пробелов, которые стоит запомнить:
Пробелы создают иерархию – Чем больше пустого пространства вокруг объекта, тем больше к нему приковывается внимание. Только этот трюк уже может помочь дизайнерам повлиять на визуальную иерархию того, на что хочется посмотреть первым.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Минимализм добавляет искушенности – Минимизировав количество элементов и увеличив пустое пространство, вы придаете своему сайту атмосферу элегантности и роскоши. Данный подход часто можно встретить на веб-сайтах модных брендов.
Пространство оказывает влияние на четкость – Пробелы используются не только для фона: если отбросить все и посмотреть на дизайн с атомного уровня, то пробелы могут, как улучшить, так и снизить читаемость текста. В нашем случае под четкостью подразумевается легкость чтения сложных букв в слове. Следуйте этим советам по пробелам между строками/буквами, чтобы быть уверенными в читаемости текста.
Текст интерфейса тоже часть дизайна
Развивая аналогию пользовательского взаимодействия, как диалога, можно сказать, что интерфейс должен тщательно подбирать слова. Все на экране приложения или сайта считается интерфейсом, и текст не исключение. Если смысл написанных слов не совпадает с задачей сайта, не поможет даже самый лучший шрифт.
Вас не спасет то, что ваш основной текст может принимать различные формы и размеры. Обычно, весь текст можно разделить и изменить по категориям. Слова приветствия могут быть непринужденными или доброжелательными, но текст призыва к действию на той же странице должен быть более смелым и кратким. Вне зависимости от цели вашего текста, следующие советы могут помочь донести до пользователя правильный смысл:
Знайте свою аудиторию – Этот совет стар, как мир. Знайте своих пользователей и то, что они хотят от вас, чтобы вы им сказали. К примеру, на сайте для детей слова или фразы могут повторяться для привлечения внимания, в то время как на юридическом сайте такой подход не приветствуется.
Определите контекст применения вашего сайта – Вы пишите для веб-сайта или приложения? Домашняя или страница описания? Так же, как вы изменили основной текст под аудиторию, измените сайт под среду использования. Если ваше приложение спроектировано для использования в суетливых или отвлекающих ситуациях (Waze при вождении), сокращение текста ускорить обработку информации.
Показывайте свою индивидуальность – Ваш стиль письма вносит свой вклад в общее настроение и атмосферу сайта так же, как и сильный образ или плавная анимация. Необходимо понять, какие эмоции вызывают определенные цвета. Текст не должен конфликтовать с визуальным взаимодействием.
Отличный дизайн
Последний, но не менее важный, хороший интерактивный дизайн это всегда приятно. Эмоциональная связь с пользователями – самый надежный способ завоевать доверие. Когда дело доходит до дизайна сердце так же важно, как и разум.
На примере MailChimp окно подтверждения является важнейшей частью привлечения пользователей через email рассылку. Забавная картинка и смешной текст только усиливают наслаждение от использования сайта (не говоря уже о том, что данный подход снижает раздражение от массовой рассылки почты). Ниже я составил несколько быстрых советов:
Не жертвуйте юзабилити – Думайте об отличном дизайне как о вишенке на торте: вишенка разбавляет вкус торта, но сама по себе она ничего не дает. Никогда не жертвуйте дизайном ценой ясности.
Оторвитесь от привычного – Как сказал Ben Rowe, ваша первостепенная задача в создании «осмысленного восторга». Как ваш сайт или приложение могут ввести людей в состояние, где действия не ограничены ничем?
Исследования – Пользователя любят сюрпризы. Подходящие микровзаимодействия (типа затухающей анимации, если пользователь завершил задачу) могут сделать довольно общие задачи более эмоционально стоящими. На рисунке ниже показано, как даже простая анимация плавного появления меню добавляет увлекательности повторяющимся действиям.
Интерактивность помогает сделать пользовательские интерфейсы выразительными и простыми в использовании. Несмотря на большой потенциал, интерактивность, пожалуй, наименее понятно из всех дисциплин дизайна. Это может быть связано с тем, что интерактивность является одним из новых членов семейства пользовательских интерфейсов. Визуальный дизайн и дизайн взаимодействия восходят к ранним графическим интерфейсам, но интерактивный дизайн должен был дождаться более современного оборудования для плавного рендера анимации. Наслаивание интерактивности пользовательского интерфейса на традиционную анимацию вносит свою лепту недопонимания. Целую жизнь можно потратить на освоение 12 основных принципов Диснея , означает ли это, что интерактивность пользовательского интерфейса также сложно? Люди часто говорят мне, что проектировать интерактивность сложно или что выбор правильных значений неоднозначен. Я утверждаю, что в областях, наиболее важных для пользовательского интерфейса, интерактивный дизайн может и должен быть простым.
С чего начать?
Основная задача интерактивного дизайна - помочь пользователям ориентироваться в приложении, проиллюстрировав взаимосвязь между элементами пользовательского интерфейса. Интерактивный дизайн также имеет возможность добавлять персонажа в приложение с анимированными иконками, логотипами и иллюстрациями; однако удобство использования должно иметь приоритет над элементами выразительности. Прежде чем демонстрировать навыки анимации персонажа, давайте начнем с создания базовой интерактивности, сосредоточившись на переходах навигации.Паттерны перехода
При разработке навигационного перехода ключевыми являются простота и согласованность. Для этого мы выберем два типа движений:- Переходы на основе контейнера
- Переходы без контейнера.
Переходы на основе контейнера
Элементы, такие как текст, значки и изображения, группируются внутри контейнеров
Если композиция включает в себя контейнер, такой как кнопка, карточка или список, тогда проект перехода основан на анимации контейнера. Контейнеры обычно легко обнаруживаются на основе их видимых границ, но помните, что они также могут быть невидимыми до начала перехода, как элемент списка без разделителей. Этот шаблон разбивается на три этапа:
* Анимация замедлена, чтобы проиллюстрировать, появление и исчезания элементов
Применение этого паттерна ко всем переходам с контейнером устанавливает согласованный стиль. А также делает понятной связь между начальной и конечной композициями, так как они связаны анимированным контейнером. Для демонстрации гибкости этого паттерна, здесь показаны пять разных композиций:
* Анимация замедлена, чтобы проиллюстрировать, как начальная и конечная композиции связаны контейнером
Некоторые контейнеры просто появляются из за экрана с помощью стандартного смягчения. Направление его движения определяется местоположением компонента, с которым он связан. Например, нажатие значка навигационного меню в верхнем левом углу приведет к перемещению контейнера слева.
Если контейнер из за границ экрана, он плавно появляется и увеличивает масштаб. Вместо анимирования от 0%, он начинает анимацию с 95%, чтобы избежать чрезмерного внимания к переходу. Масштабная анимация использует смягчение замедления , то есть начинается с максимальной скорости и мягко замедляется. Чтобы исчезнуть, контейнер просто плавно затухает без масштабирования. Окончание анимации должно быть менее выраженным, чем начало, чтобы сосредоточить внимание пользователя на новом контенте.
* Анимация замедлена, чтобы проиллюстрировать, как контейнеры могут возникать благодаря постепенному изменению элемента (масштабирование, появление и исчезание)
Переходы без контейнера
Некоторые композиции не имеют контейнера, на котором основывается переход, например, нажимая значок в нижней навигации, который выводит пользователя в новое место назначения. В этих случаях используется двухэтапный шаблон:- Композиция начинается путем плавного затухания, заканчивается плавным появлением.
- По мере того как конечная композиция исчезает, она также едва заметно масштабируется используя уменьшение смягчения элементов. Опять же, масштабирование применяется только в момент появления композиции, чтобы подчеркнуть новый контент по сравнению со старым.
* Анимация замедлена, чтобы проиллюстрировать, как происходят переходы без контейнера использую масштабирование, появление и исчезание элементов
Если начало и конец композиции имеют четкую пространственную или поэтапную связь, то совместное движение может быть использовано для ее усиления. Например, при навигации по шаговому компоненту начало и конец композиция прокручивается по вертикали по мере их постепенного затухания или появления. Это усиливает их вертикальную компоновку. При нажатии следующей кнопки для ознакомления с дальнейшим материалом, композиция прокручивается по горизонтали. Перемещение слева направо усиливает понимание последующего события. Совместное движение использует элементы стандартного смягчения.
* Анимация замедлена, чтобы проиллюстрировать, как происходят движение по вертикали и горизонтали
Лучшие практики
Чем проще тем лучше
Учитывая их высокую частоту и тесные связи с юзабилити, навигационные переходы должны в целом поддерживать функциональность по стилю. Это не значит, что они никогда не должны быть стилизованными, просто убедитесь, что выбор стиля оправдан брендом. Движение глаз обычно лучше всего задерживается на элементах, таких как маленькие иконки, логотипы, загрузчики или свободное состояние. Простой пример ниже может не привлечь столько внимания на Dribbble, но это сделает более удобным приложение.
* Анимация замедлена, чтобы проиллюстрировать, различные стили движения
Выберите правильную продолжительность и смягчение
Навигационные переходы должны использовать длительности, которые определяют приоритетность функциональности, будучи быстрыми, но не настолько быстрыми, чтобы они не стали дезориентирующим фактором. Длительность выбирается в зависимости от того, какой процент экрана занимает анимация. Поскольку навигационные переходы обычно занимают большую часть экрана, длительность 300 мс является проверенным методом. Напротив, небольшие компоненты, такие как переключатели, используют короткую продолжительность 100 мс. Если переход слишком быстрый или медленный, отрегулируйте его продолжительность с шагом 25 мс, пока он не достигнет правильного баланса.Смягчение описывает скорость, с которой анимация ускоряется и замедляется. Большинство навигационных переходов используют стандартное смягчения элементов, которое является асимметричным типом смягчения. Это означает, что элементы быстро ускоряются, а затем осторожно замедляются, чтобы сосредоточить внимание на конце перехода. Этот тип смягчения придает анимации естественное качество, поскольку объекты в реальном мире не могут вдруг начать и прекратить движение. Если переход кажется жестким или роботизированным, вероятнее всего, симметричное или линейное смягчение было выбрано ошибочно.
* Анимация замедлена, чтобы проиллюстрировать, различные типы смягчения
Паттерны и лучшие практики, изложенные в этой статье, предназначены для создания практичного и ненавязчивого стиля движения. Это подходит для большинства приложений, однако некоторые бренды могут требовать более интенсивных выражений стиля. Чтобы узнать больше о стилизации движения, ознакомьтесь с нашими инструкциями по настройке .
После того как навигационные переходы реализованы, начинается задача добавления персонажа в ваше приложение. Именно здесь простые паттерны не действуют, и тут в полной мере можно реализовать свои анимационные умения…
Персональная анимация может добавить непринужденности к серьезной ошибке
Если вам интересно узнать больше о возможности движения, обязательно прочтите наши
В чем польза вашего сайта или приложения? В том, что с его помощью просто собирать информацию? Или же покупать в один клик, а доставку товара получать уже завтра? Или главное – быстро находить ответы на нужные вопросы?
Подумайте о людях, которые разработали этот сайт или приложение. Какую они преследовали цель?
Они пытались сделать веб-ресурс, на котором было бы все то, за что его полюбят. Простой в использовании сайт, который бы быстро выдавал искомую информацию и помогал принимать взвешенные решения.
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-дизайн сейчас как никогда важен – присоединяйтесь к этому движению и извлекайте пользу для своего бизнеса.
Уровень современных цифровых технологий позволяет дизайнерам и веб-разработчикам смело экспериментировать при создании интерфейсов для различных устройств. Современные интерфейсы становятся все более интерактивными и это трудно не заметить. Сегодня многие дизайнеры начинают думать об опыте взаимодействия задолго до создания первых прототипов, так как цена возможной ошибки очень высока, а рисковать никто не хочет. Отсюда и столько разговоров о UX – прежний веб уходит в прошлое и в интернете начинают доминировать новые тренды. И одним из основных трендов является интерактивный дизайн. Но это глобальная тенденция, своеобразный тектонический сдвиг, который чувствуют все, но пока мало кто представляет, как будут выглядеть интерфейсы ближайшего будущего. Однако уже сейчас можно отметить 6 тенденций в интерактивном дизайне, которые мы, несомненно, увидим в 2016 году.
СИНЕМАГРАФИКА
Синемаграфика – это нечто среднее между фотографиями и видео. Зацикленные GIF-изображения объединяют статику и динамику и выглядят очень эффектно. Тренд появился в 2011 году и быстро набрал популярность. Использование синемаграфики в интерактивном дизайне позволит привлечь внимание пользователей к интересному графическому контенту, так что дизайнерам стоит задуматься о присутствии зацикленных гифок в их проектах.
ЛЕНДИНГИ С ДЛИННОЙ ПРОКРУТКОЙ
Сегодня множество сайтов может прекрасно обойтись без использования большого количества страниц, о чем свидетельствует появление огромного количества лендингов. Пользователям мобильных устройств гораздо проще просматривать контент на сайте-одностраничнике, так как для этого нужно всего лишь прокручивать страницу пальцем. Одностраничник с интерактивным дизайном при этом выглядит на экране смартфона гораздо выигрышнее, чем сайт со стандартной многостраничной схемой. Конечно, в таком дизайне придется использовать большие кликабельные области и кнопки, что значительно увеличит длину страницы, но при правильном подборе контента это не будет являться проблемой.
MATERIAL DESIGN
Материальный дизайн, созданный разработчиками Google, появился в результате усилий по унификации интерфейсов для Android-приложений. Стремясь сделать интерфейсы более интерактивными, дизайнеры отталкивались от идеи quantum paper – «квантовой бумаги». Расположенная в трехмерном пространстве плоская бумага подчиняется законам физики, а дизайне активно используется анимация. Элементы имеют тени, свечения, они могут двигаться, ускоряться или замедляться. Данный стиль позволяет привнести в дизайн дополнительную глубину и реализм, а анимация используется не только для «оживления» интерфейса – пользователь всегда остается в курсе того, что происходит. В материальном дизайне приложение реагирует на действия пользователя, что позволяет упростить визуальные связи при просмотре разных видов контента. Использование принципов Material Design дает возможность проектирования эффектных интерактивных сайтов и приложений.
АНИМИРОВАННАЯ ТИПОГРФИКА
Добавить сайту интерактива можно и с помощью типографики. Главное – не переусердствовать в этом. Лучше всего в дизайне смотрятся анимированные заголовки, при этом вовсе не обязательно, чтобы текст крутился, вертелся или вел себя не очень понятным для пользователя образом. Если заголовок будет реагировать на наведение курсора, к примеру, изменением цвета, это сделает взаимодействие с интерфейсом более интересным.
СЛОЖНАЯ ВИЗУАЛИЗАЦИЯ
То, что качественная красивая инфографика гораздо интереснее скучных схем и диаграмм, понимают все. Но стоит обратить внимание на такой набирающий силу тренд как использование интерактивной инфографики со сложной визуализацией. Такая инфографика может выглядеть как серия слайдов или представлять собой один слайд. Во втором случае пользователь получает нужные сведения, выделяя наиболее интересные ему элементы. Очевидно, что данная тенденция будет актуальна в ближайшие годы – такой контент очень информативен и позволяет пользователю легче усваивать информацию.
ORGANIC LAYOUTS
Название этого тренда можно перевести как «органичные макеты». Так как в интерактивном дизайне вовсе необязательно придерживаться стандартных сеток, то это дает дизайнерам возможность подать контент максимально естественно. Свободное расположение различных элементов, таких как текст, иллюстрации или мультимедиа позволяет разнообразить дизайн и представить информацию в наиболее удобной для пользователя форме.