###
  • Интернет
  • Программы
  • Игры
  • Проблемы
  • Windows
  • Социальные сети
  • Android
  • Ios

    • Кто такие UX дизайнеры и чем они занимаются. UI, UX: Кто чем занимается? Руководство дизайнера по IT-индустрии

    18.08.2019 Принтеры и сканеры

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

    Я хочу раз и навсегда поставить точку и простым понятным языком объяснить, что значит «UX/UI дизайн».

    Разные типы интерфейсов для заточки лезвий.


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

    Цель UI/UX дизайнера - довести пользователя до какой-то логической точки в интерфейсе. Сделать так, чтобы пользователь достиг своей цели.

    Что такое UX/UI, прямым текстом

    (в этом разделе будут банальные фразы)

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

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

    UX/UI дизайн - это проектирование любых пользовательских интерфейсов в которых удобство использования так же важно как и внешний вид.

    Что такое UX и UI дизайн, другими словами

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

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

    Вот первый пример: когда Вильгельм Шиккард в 1623 году изобретал арифмометр, он уже был UX/UI дизайнером.

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

    Ещё один более древний и примитивный пример - точильный камень (колесо). Уже даже в раннем средневековье было много разновидностей и механизмов такого колеса:

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

    Так вот, когда изобретатель очередного точильного камня думал:

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

    А тот человек, который думал, какой величины будет камень, какого цвета выбрать дерево для подставки и чем скрепить деревянные жерди (гвоздями или кожаными жгутами?) и какой длины будет ручка, был UI дизайнером .

    И тот способ, каким бы вы затачивали меч - назывался бы интерфейс .

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

    В последнее время популяризация профессии UX/UI дизайнера связана скорее с развитием цифровых технологий. А вот именно тот «бум» (когда мы стали видеть термин «UX/UI» в каждом втором объявлении о работе) связан с самим названием, которое кто-то придумал совсем недавно.

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

    UX и UI - это не тренды. Технологи развиваются. Спрос на сайты растёт. Цифровые приложения появляются как грибы. А инструменты дизайна и разработки упрощаются настолько, что уже практически любой человек без знания программирования может «на коленке» сделать сайт-визитку. Вот только этот сайт должен как-то выглядеть. И не просто как абстрактный каркас из текста и кнопок. Тут программистам и нужна помощь UX/UI дизайнера.

    Разделение на веб-дизайнеров и UX/UI дизайнеров появилось с развитием интернета. Со временем понадобились более узкие специалисты, которые делали бы интерфейсы именно для веб-сайтов.
    Да, UI/UX дизайн - это более широкое и емкое понятие чем веб-дизайн.

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

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

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

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

    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/UI дизайн.

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

    Начнем с UX. UX это аббревиатура от User Experience , что дословно переводится как «опыт пользователя». То, насколько продуман UX-дизайн, например сайта, настолько удобнее пользователю осуществлять поиск нужной информации или взаимодействия с ним. Иными словами задача UX-дизайна — решение вопросов функциональности и удобства инструмента или ресурса.

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


    Пользователю должно быть комфортно и всё понятно

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

    Отличия UX и UI дизайна

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

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

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

    Понятия разные, но их сходство в том, что они направлены для обеспечения комфорта пользователя.

    Сферы применения

    Как уже было сказано выше термины UI и UX применимы не только к сфере IT. Фактически они появились, как только был создан первый продукт. То есть очень давно. Например, одним из первых прорывов в UX-дизайне можно считать колесо .

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

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

    Как понять правильный ли у вас дизайн

    Если мы говорим о задаче продавать, то «правильность» UX-дизайна проверяется посредством А/Б тестирования или фокус групп . Это позволяет увидеть насколько пользователю, понятен и удобен интерфейс. Например, перед всеми членами фокус группы ставится задание, найти определённый раздел на сайте или зарегистрироваться. То насколько они быстро справляются с этим и говорит о качестве UX-дизайна.

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

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

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

    Дизайнеры

    Разработка интерфейса приложений, сайтов или игр является достаточно сложным процессом и нуждается в применении знаний из разных областей: инженерии, психологии и дизайна. Дизайнеры пользовательского интерфейса (по-английски - User Interface или UI) фокусируются на способе отображения функциональности сайта (поиск, вкладки, меню) и деталях взаимодействия клиента и интерфейса. Цель UI-дизайнера - эстетически приемлемый современный дизайн продукта . UX расшифровывается как User Experience, что в переводе значит «пользовательский опыт». UX-дизайнер больше сосредоточен на удобстве и понимании интерфейса потенциальным пользователем. Такой специалист зачастую проводит исследования и опросы, которые станут основой для создания концепции дизайна, а также тестирует концепции в ходе разработки и после неё. Обычно он сосредоточен на структуре, содержании, навигации и том, как пользователь взаимодействует с этими элементами.

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

    Что нужно знать UX/UI-дизайнеру

      Графические редакторы . Самые популярные на рынке инструменты - это Adobe Photoshop, Adobe Illustrator, а также Sketch, Figma. Выберите удобный для себя редактор и попробуйте для начала нарисовать скриншоты сайта или приложения немного их модернизировав.

      Инструменты прототипирования (Mockplus, Axure) . Инструмент для создания прототипов является связывающим звеном между идеей и её реализацией. Неважно каким инструментом при этом вы будете пользоваться. Можно попробовать несколько и определиться с тем, который подойдёт именно вам по стилю и предпочтениям.

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

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

      Желательно иметь представление о типографике , средстве объединения текстовой и визуальной составляющей.

      Композиция и юзабилити сайта.

      В зависимости от специфики работы может понадобиться понимание HTML и CSS или (немного) языков программирования (ссылки на ресурсы можно посмотреть ниже, в разделе «Что должен знать Front-end разработчик»).

    Разработчик Front-end

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

    Что должен знать Front-end разработчик

    Как правило, front-end стоит на трёх китах: язык разметки страницы HTML, таблицы стилей CSS и язык программирования JavaScript. Кроме того, фронтендщик должен понимать принципы работы протокола HTTP, серверов и браузеров, особенности отображения интерфейса на различных устройствах, которые в настоящее время находятся на рынке. Инструменты и методы создания веб-интерфейсов постоянно развиваются и меняются, поэтому разработчик должен за этим постоянно следить.

    HTML и CSS (вёрстка)

    Это верстка, те самые кирпичи, из которых строится сайт. Язык разметки HTML диктует организацию сайта, содержимое и все взаимодействие между ними. Он позволяет обозначить верхнюю часть страницы, нижнюю, боковые блоки с содержимым, заголовки, отображение текста и мультимедийных элементов. Таблицы стилей CSS служит для украшения HTML-элементов. Они определяют, как именно отображается каждый графический элемент, который располагается на странице. С помощью самых свежих версий HTML5 и CSS3 можно размещать видео и аудио компоненты на страницу, создавать двухмерные изображения и анимацию, и даже писать несложные игры. Не нужно стараться запомнить сразу все теги и стили. Будет полезно изучить основы и сразу же применить их в действии. Очень неплохой сайт, где можно изучить основы HTML и CSS - W3School. Но только если у вас есть хотя бы базовые знания английского. Также фронтендщик должен разбираться в кросс-браузерной и кроссплатформенной разработке, адаптивной и отзывчивой вёрстке.

    Bootstrap

    Это фреймворк для HTML, CSS и JavaScript. То есть определённые шаблоны, из которых, как из конструктора, можно собирать сайты гораздо быстрее, чем без них. Но, разумеется, его нужно затачивать под ваши потребности самостоятельно. Если знаете английский, рекомендуем сайт getbootstrap и всё тот же w3schools .

    JavaScript

    Javascript – ядро front-end разработки. Это первый и наиболее распространённый язык программирования интерфейсов. Он способен добавить массу возможностей на сайт. На базовом уровне этот язык позволяет добавлять интерактивные элементы на страницу. Его используют для создания карт, которые обновляются в режиме реального времени, интерактивных онлайн-игр и фильмов. На старших курсах JavaRush мы немного изучаем JavaScript. Также его можно изучать на том же W3School или почитать о нём на русском, на сайте javascript.ru .

    jQuery

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

    Javascript-фреймворки

    Существуют различные типы фреймворков, но вы можете выбрать один из них, который будет удобен в использовании именно вам. Самые известные - Angular, Backbone, Ember, и React. Представляют собой готовую структуру для кода. Они помогают ускорить разработку. А в совокупности с библиотеками способны минимизировать разработку сайта или приложения с нуля. Обзор 5 самых популярных JavaScript фреймворков и библиотек 2017

    Система управления версиями Git

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

    Краткие выводы

    UI расшифровывается как User Interface, что в переводе означает «интерфейс пользователя». То есть, Дизайнер UI отвечает в первую очередь за то, как продукт представлен пользователю. Он разрабатывает кнопки, иконки, подбирает шрифты, готовит макет. UX расшифровывается как User Experience (пользовательский опыт). Так что UX-дизайнер проектирует дизайн сайта, приложения - да чего угодно - так, чтобы пользователю было удобно и понятно, что к чему, и он мог получить от сайта то, что ему нужно с минимальными усилиями. Очень часто оба вида работ выполняет один человек-оркестр: UI/UX-дизайнер. Разработчик Front-end оживляет работу дизайнеров, внося в неё динамику: кнопки начинают нажиматься, а картинка - меняться. Он должен знать языки программирования, приправленные фреймворками, препроцессорами и библиотеками.

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

    Коротко про разницу

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

    UX-дизайнер (user experience) - это не дизайнер, а проектировщик (просто в английском слово designer имеет как раз второе значение). Он изучает потребности пользователей, строит логические схемы работы интерфейса, тестирует прототипы на живых людях, пишет ТЗ на дизайн. Другими словами, это такой инженер-маркетолог: на входе аналитика, на выходе принципы создания интерфейса, логика работы, компоновка, контент. Рисования как такового он не касается.

    Вот и всё.

    Зачем нужно было всё усложнять

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

    И дизайнер назывался просто «дизайнер». Без заморских приставок.

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

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

    То же самое уже было в отрасли. Например, просто «программистов» разделили на «фронтенд» и «бэкенд». А фронтендеров на истинных фронтендеров и «просто верстальщиков». Кстати, .

    Причина всегда одна: одного человека не хватает на большой процесс. Едем дальше.

    Кто такой UX/UI-дизайнер

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


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

    Кто такой UX/UI в идеальном мире? Сверхчеловек, который проводит весь цикл работ UX, а потом еще успевает отрисовать всё с несколькими итерациями правочек (сделать UI).

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

    Так что, если видите удивительного мутанта UX/UI, знайте, что:

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

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

    Как запомнить, где UX, а где UI

    Предлагаем две простые запоминалки.

    Для тех, кто знает английский:

    Для тех, кто не знает:

    Кстати

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