Что делают UX и UI-дизайнеры, а что — фронтендщики? Как запомнить, где 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 дизайн. Есть сотни тысяч ресурсов, которые создают умопомрачительный дизайн интерфейсов и графический дизайн и пользуются услугами лучших профессионалов с нереальным талантом, но не могут занять достойного места в сети. А все, потому что взаимодействие между сайтом и пользователями растет экспоненциально, это значит, что чтоб найти отзыв у пользователя, веб-дизайнерам необходимо заботиться о пользовательском опыте (UX – User Experience – «опыт взаимодействия»). Именно на этом этапе на помощь придут UX дизайн инструменты – отличные онлайн сервисы, которые дают подсказки касательно проектирования пользовательских интерфейсов дизайнерам. Именно о них мы поговорим более детально в этой статье.

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

UX дизайн инструменты для моделирования и проектирования мокапов и прототипов

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

Инструмент для проектирования интерфейсов Moqups

Приложение Moqups isana HTML5 предназначено для создания макетов, мокапов и прототипов. Moqups предоставляет огромное количество заготовок и шаблонов, которые можно использовать для создания основы вашего проекта. Вы можете настроить каждый компонент и задавать свои цвета, размер текста, иконки и т. д.

Wireframe

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

Pencil

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

Balsamiq

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

PowerMockup

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

Mockplus

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

UXPin

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

Solidify

Gliffy

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

POP

Инструменты для A/B тестирования

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

Desinion

Не уверены, что создаете проект, который пользователи действительно хотят увидеть? С помощью этого инструмента A/B тестирования вы можете задать любой интересующий вас вопрос и получить реальный ответ пользователей. У инструмента есть очень полезная функция – обсуждение. Вы можете запустить обсуждение на своем сайте, чтобы привлечь пользователей к процессу проектирования. Кроме того, вы можете создавать частные обсуждения и делиться ими только с друзьями или коллегами.

Visual Website Optimizer

Это простой, но чрезвычайно мощный инструмент, который позволяет проводить A/B тестирование на высшем уровне. С его помощью, также можно проводить многовариантное тестирование и сплит-тестирование. Сегментируемые отчеты и анализ доходов также будут доступны в Visual Website Optimizer.

Optimizely

Это надежный инструмент A/B тестирования, который позволяет пользователям запускать тест, не вникая в технические детали и без необходимости специальных навыков. Отсутствие кода и полное визуальное редактирование делает его очень популярным среди маркетологов.

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

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

Loop11

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

Crazy Egg

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

Usability Tools

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

Appsee

Это «аналитическое программное обеспечение», которое используется для отслеживания активности пользователей приложений. Этот инструмент поможет вам получить ценные данные о том, как пользователи взаимодействуют с приложением. Функция «User Recording» этого инструмента является самой впечатляющей. Она регистрирует действия пользователей и тем самым дает вам отличное представление о поведении пользователей. Это полезный инструмент для улучшения общей производительности вашего приложения и увеличения конверсии.

Attensee

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

UserVoice

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

MouseStats

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

UX дизайн инструменты для создания прототипов и совместного проектирования

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

FileSquare

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

Notism

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

Red Pen

Благодаря RedPen коллективное создание дизайнов и прототипов будет быстрым и легким. Этот инструмент UX предназначен для совместного моделирования дизайнов и создания прототипов. Он специально разработан для облегчения совместной работы с графическим контентом. Обмен отзывами очень простой: для того чтоб выделить какой либо из элементов и оставить заметку, пользователю просто нужно навести на него курсор. После этого появляется небольшое текстовое поле, в котором можно оставить свои отзывы.

Memosort

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

Trello

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

Invision

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

Подводим итоги

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

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

Закон Хика

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

Закон Якоба

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

UI, UX: Профессия дизайнер интерфейсов. Руководство по ИТ-индустрии

Плюс: Описания дизайнерских должностей в Apple, Facebook, Google и других гигантах мира информационных технологий.

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

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

У дизайнерской проблемы нет единого решения.

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

UX-дизайнер

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

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

“Определять модели взаимодействия, потоки задач пользователей и UI-спецификации. Доносить до всех заинтересованных лиц сценарии, пользовательский опыт на всех этапах, модели взаимодействия и дизайн каждого экрана. Совместно с креативным директором и визуальными дизайнерами работать над привнесением визуальной идентификации бренда в каждую функцию Twitter. Разрабатывать и поддерживать вайрфреймы, макеты и спецификации по мере необходимости.”

Пример экранов приложения, созданных UX-дизайнером. Создано: Neway Lau, Kitchenware Pro Wireframe Kit на Dribbble.

Над чем работает: Вайрфреймы экранов, карты истории (storyboard), карта сайта

Чем пользуется: Photoshop, Sketch, Illustrator, Fireworks, InVision

“Каждый раз при завершении регистрации нужно отправлять пользователя на страницу “Спасибо”.

UI-дизайнер (дизайнер интерфейсов)

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

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

“Создавать и применять визуальный язык Airbnb.com. Разрабатывать и развивать гиды по стилю в контексте всего сайта”.

Граница между UI и UX-дизайнером достаточно размыта и компании зачастую принимают решение объединить эти роли.

UI-дизайнер определяет общий лейаут и внешний вид приложения. Создано: Ionut Zamfir, Metro Style Interface 4 на Dribbble.

Чем пользуется: Photoshop, Sketch, Illustrator, Fireworks

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

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

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

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

Зачастую, если в компании нет должности визуального дизайнера, задача полировки элементов до последнего пикселя ложится на плечи UI-дизайнера.

Визуальный дизайнер, опираясь на гид по стилю, выверяет каждый пиксель элемента, чтобы добиться идеального результата. Создано: Seevi kargwal, iOS 7 Guide Freebie PSD на Dribbble

Чем пользуется: Photoshop, Sketch

Как общается в дикой природе: “Кернинг нарушен, а кнопка должна быть на пиксель левее”

Дизайнер взаимодействия (моушн-дизайнер)

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

“Необходимые качества и навыки: профессионализм в графическом дизайне, моушн-графике, цифровом искусстве, чувствительность к шрифтами и цветам, общие представления о материалах/текстурах и практическое понимание анимации. Знание iOS, OS X, Photoshop и Illustrator, а также общее представление о Director (или эквивалентном инструменте), Quartz Composer (или эквивалентном инструменте), компьютерном 3D-моделировании и моушн-графике”.

Чем пользуется: AfterEffects, Core Composer, Flash, Origami

Как общается в дикой природе: “Меню должно плавно появляться слева со скоростью 800мс”

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

UX-исследователь - мастер потребностей пользователя.

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

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

- Описание должности UX-исследователя в Facebook

Роль UX-исследователей временами выполняют UX-дизайнеры.

Над чем работает: архетипы пользователей (персоны), результаты A/B тестов, исследования и интервью пользователей

Чем пользуется: микрофон, бумага, документация

Как общается в дикой природе: “Исходя из результатов исследования, типичный пользователь…”

Фронтенд-разработчик (UI-разработчик)

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

Чем пользуется: CSS, HTML, JavaScript

Как общается в дикой природе: “Я пользуюсь 12-колоночной сеткой под 960px”

Продуктовый дизайнер

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

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

Некоторые компании используют термин “UX-дизайнер” или просто “дизайнер” как универсальный. Лучший способ понять, как компания распределяет обязанности между дизайнерами - это прочитать описание должностей.

“Владеть всеми типами дизайна: дизайн взаимодействий, визуальный дизайн, продуктовый дизайн, прототипирование. Создавать идеальные до последнего пикселя макеты и писать код для новых функций продукта для веб и мобильных устройств.”

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

Это самая распространенная фраза, которую я слышу от стартаперов. На самом деле, они ищут того, кто сможет делать все вышеперечисленное сразу. Им нужен тот, кто сможет рисовать красивые иконки, создавать и A/B-тестировать лендинги, логически структурировать элементы интерфейса на экране и, возможно, заниматься фронтенд-разработкой. Поскольку термин “дизайнер” такой универсальный, небольшие компании, вместо того, чтобы выставить конкретные требования, больше разговаривают о своем поиске “дизайнера”.

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

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

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

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

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

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

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

Гибель рамки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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