Разница между UI и UX: определение терминов. UX- и UI-дизайн: назначение и отличия
Любой дизайн, не важно, насколько он хорош, будет абсолютно бесполезным, если это не 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 дизайн инструменты, которые помогают веб-дизайнерам создавать успешные онлайн проекты самостоятельно и в команде, а так же собирать информацию о пользовательском опыте с целью самосовершенствования. Если вы знаете еще какие-то полезные инструменты, о которых мы забыли упомянуть – обязательно напишите об этом в комментариях!
В ИТ-отрасли достаточно много направлений связанных с дизайном. Самые распространённые из них - дизайнеры, скрытые за аббревиатурами 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 на w3schoolJavascript-фреймворки
Существуют различные типы фреймворков, но вы можете выбрать один из них, который будет удобен в использовании именно вам. Самые известные - Angular, Backbone, Ember, и React. Представляют собой готовую структуру для кода. Они помогают ускорить разработку. А в совокупности с библиотеками способны минимизировать разработку сайта или приложения с нуля. Обзор 5 самых популярных JavaScript фреймворков и библиотек 2017Система управления версиями Git
Системы контроля версий способны отслеживать изменения, которые вносят в код со временем. Также позволяют вернуться к предыдущей версии проекта. Git – самая широкоиспользуемая система управления версиями. Умение работать с Git является важным навыком для каждого разработчика.Краткие выводы
UI расшифровывается как User Interface, что в переводе означает «интерфейс пользователя». То есть, Дизайнер UI отвечает в первую очередь за то, как продукт представлен пользователю. Он разрабатывает кнопки, иконки, подбирает шрифты, готовит макет. UX расшифровывается как User Experience (пользовательский опыт). Так что UX-дизайнер проектирует дизайн сайта, приложения - да чего угодно - так, чтобы пользователю было удобно и понятно, что к чему, и он мог получить от сайта то, что ему нужно с минимальными усилиями. Очень часто оба вида работ выполняет один человек-оркестр: UI/UX-дизайнер. Разработчик Front-end оживляет работу дизайнеров, внося в неё динамику: кнопки начинают нажиматься, а картинка - меняться. Он должен знать языки программирования, приправленные фреймворками, препроцессорами и библиотеками.Работа с пользовательским взаимодействием помогает вывести продукт или бизнес на новый уровень, потому что UX-дизайнер продумывает логику работы продукта и помогает клиентам достигать своих целей.
Чтобы начать обучение UX-дизайну, необходимо понять, как строится работа над любым цифровым проектом и за что именно отвечает такой дизайнер при разработке.
Кто такой UX-дизайнер, чем он занимается
UX-дизайнер - это проектировщик, который делает цифровые продукты понятными и логичными. Он изучает опыт взаимодействия пользователя с продуктом - сайтом, приложением, программой. Цель работы UX-дизайнера - помочь пользователю достичь своей цели. Для этого проект разделяют на этапы и прорабатывают каждый из них.
Сначала дизайнеры анализируют аудиторию продукта, исследуют ее цели и страхи. Затем проводят интервью с реальными людьми, наблюдают за сайтами и приложениями конкурентов. После этого создают прототипы, показывают их пользователям и передают файлы разработчикам.
Если подробно рассмотреть каждый из этих этапов, то легко понять, с чего начать обучение UX-дизайну.
Кто может стать UX-дизайнером
Часто в UX приходят веб-дизайнеры, которые решили углубиться в область пользовательского взаимодействия. Они уже работали с пользователями, знают основные принципы и умеют визуализировать информацию.
Однако быть веб-дизайнером для работы в UX необязательно. Все процессы в этой сфере в первую очередь строятся на логике, умении мыслить критически, общении с людьми и способности к анализу.
Один из дизайнеров Google, Фиона Йонг, рассказала , что в ее команде - лишь несколько специалистов с образованием дизайнера. Остальные раньше работали в смежных областях или в других отраслях. Кто-то занимался когнитивными науками, а кто-то психобиологией.
Поэтому хорошими проектировщиками могут стать и архитекторы, и инженеры, и программисты. Главное - разобраться в основах интерактивного дизайна и понять, как строится логика работы в UX. Это можно сделать самостоятельно или на специальных UI/UX-дизайн курсах.
С чего начать
Начать обучение UX-дизайну можно с курсов, книг и статей. Главное - составить правильный план обучения, сформулировать цели и двигаться от общего к частному.
Процесс работы над продуктом состоит из нескольких этапов. На каждом из них UX-дизайнер занимается разными вещами. Чтобы понять, какие знания необходимы для работы, нужно рассмотреть каждый из этапов подробно:
- исследование,
- анализ данных,
- проектирование,
- дизайн,
- анализ метрик.
Исследование
UX-дизайнер делает так, чтобы будущий сайт или приложение выполняли полезное действие - продавали, рекламировали, помогали пользователям.
Но сложно создать хороший проект, если не разобраться в задаче. Поэтому сначала дизайнер собирает данные о будущем продукте. Исследует конкурентов, планирует функции, думает над логикой работы.
Хороший метод исследования - это разговор с реальными пользователями. При создании сервиса для покупки билетов лучше сходить на вокзал и провести интервью с пассажирами. Узнать, будет ли им легче приобретать билеты через интернет, удобно ли оплачивать с карты, как они хотят выбирать места в вагоне.
На этапе исследования UX-дизайнер должен активно разговаривать с потенциальными пользователями и спрашивать, что им нужно.
Анализ данных
Когда задачи продукта ясны, дизайнер продумывает логику взаимодействия.
Из целевой аудитории выбирают наиболее ярких представителей и рассказывают про них. Стараются представить, что важно для этого человека в продукте. Какие задачи он будет решать, каким способом. Этот этап, создание персон, помогает дизайнеру представить конкретных людей и работать для них.
Удовлетворить требования всей целевой аудитории не получится, но можно поработать над желаниями самых ярких представителей. Тогда возрастает шанс, что остальным также будет комфортно пользоваться продуктом.
Для каждой из персон дизайнер создает сценарии использования. Здесь важно представить, как конкретный человек мог бы взаимодействовать с продуктом. Какая функциональность необходима, а от чего можно отказаться на первом этапе.
Создание сценариев помогает продумать структуру приложения или сайта, а также базовые элементы.
Проектирование
На этом этапе визуализируют все собранные данные. Строят структуру приложения, располагают элементы для каждого экрана.
Проектирование - это не создание готового дизайна. Это быстрые наброски, которые показывают пользователям. Проводят тестирование и узнают, решит ли продукт в таком виде задачу.
Макеты на этом этапе могут быть абсолютно разными - низко детализированными и черно-белыми или яркими и интерактивными. Кто-то работает с бумагой и ручкой, кто-то использует специальные программы. Некоторые дизайнеры сразу работают в графических редакторах.
Этап проектирования помогает значительно сэкономить время. Быстрее показать набросок пользователю и спросить его мнение, чем рисовать и программировать продукт с нуля и затем устранять недочеты.
Дизайн
Созданием окончательного варианта занимается UI-дизайнер. Но часто рисовать окончательный вариант приходится самостоятельно. Поэтому полезно получить основные навыки и научиться UI-дизайну.
На этапе из прототипов и вайрфреймов создают визуализацию, работают с цветом, композицией и типографикой, оформляют контент.
Для этого подходят графические редакторы, в которых работают дизайнеры:
- Adobe Photoshop,
- Adobe XD,
- Sketch,
- Figma.
Задача для UX-дизайнера - следить за юзабилити отдельных элементов и страниц в целом. Наблюдать, чтобы при добавлении визуальных эффектов, не потерялся основной смысл продукта.
Анализ метрик
После публикации первой рабочей версии продукта UX-дизайнер следит за реальным поведением пользователей. Для этого используют системы аналитики и различные метрики.
Работают над продуктом - проводят юзабилити- и A/B-тесты. Улучшают пользовательский опыт, добавляют новые возможности.
Как учиться UX-дизайну
UX-дизайн состоит из разных направлений и дисциплин. Это и визуальный дизайн, и работа с пользователями, и тестирование результатов. Некоторые специалисты по UX работают в одном направлении, некоторые - во всех.
Чтобы научиться UX-дизайну, нужно представлять весь путь разработки продукта и улучшать навыки, необходимые для каждого этапа.».
При изучении теории не забывайте о практических навыках. Создайте макет сайта или придумайте мобильное приложение. Разделите проект на части и тщательно поработайте над каждой: проведите исследование и анализ, затем займитесь проектированием и дизайном. Только практика помогает дизайнеру стать хорошим специалистом.
С интерфейсами любому современному человеку приходится сталкиваться постоянно. Иногда эти столкновения проходят совершенно безболезненно: несколько нажатий нужных кнопок - и вот вы уже общаетесь с друзьями в своей любимой социальной сети. Еще несколько кликов - и вы заказываете пиццу в офис, откладываете талончик к дантисту или ищете в Сети новый смартфон, потому что старый… достал своей «тупостью»! Да, иногда столкновения с интерфейсами напоминают попытки пробить стену головой. Найти нужные настройки в «мобильнике» - проблема! Заказать билет на самолет или поезд - слишком сложно (бум головой, бум-бум)! Заплатить по счетам, пользуясь интернет-банкингом - бум-бум-бум!
Кто и зачем заставляет нас продираться сквозь множество непонятных форм, задает кучу лишних вопросов и требует ненужных подтверждений?! Кто прячет от нас нужные кнопки и опции, мешает нам свободно реализовывать свои потребности и спокойно наслаждаться жизнью?!
Интерфейс - это всегда взаимодействие. Взаимодействие какой-то системы (это необязательно должна быть компьютерная система) и человека (пользователя). И если взаимодействие затруднено, начинаются проблемы. Можно ли их избежать?
Широкое распространение получил афоризм, авторство которого в первую очередь приписывают американскому программисту Алану Куперу: идеальный интерфейс - это отсутствие интерфейса. Воображение услужливо рисует устройства, которые считывает ваши мысли и сразу же их реализуют. Но, очевидно, даже такая идеальная схема потребует изобретения какого-то механизма, с помощью которого человеческая мысль должна воздействовать на «умную» машину. Вот и получается, что отказаться от интерфейсов просто невозможно.
Зато можно научиться создавать удобные интерфейсы, о существовании которых пользователю даже не придется задумываться! Именно этой проблематикой и занимается такое направление в ИТ, как UI/UX Design .
UI - это интерфейс пользователя, он же пользовательский интерфейс (от английского user interface). UX в переводе означает «опыт взаимодействия» (User eXperience) и включает в себя различные компоненты: информационную архитектуру, проектирование взаимодействия, графический дизайн и контент.
UX-дизайн - это комплексный подход к взаимодействию пользователя с интерфейсом, будь то веб-сайт, мобильное приложение или любая другая программа. Специалист, который выполняет такую работу, называется UX-дизайнером. Его задача - при разработке интерфейса по возможности максимально учесть все мелочи, начиная от среды пользователя и типа электронного устройства и заканчивая способами ввода и отображения информации.
Профессия проектировщика интерфейсов, безусловно, интересна, перспективна и многогранна, ведь она возникла на стыке дизайна, инженерных специальностей и психологии. Наверное, стать гуру UI/UX-дизайна под силу не каждому: здесь мало только любить сам дизайн - нужно разбираться в каких-то технических моментах и практических вещах, уметь заглядывать в будущее и анализировать человеческое поведение. Но если вы противник узких специализаций. Если вам нравится придумывать вещи, которых еще нет. Если вы постоянно замечаете несовершенство окружающего мира и задумываетесь о том, как это можно исправить, тогда UI/UX Design - это для вас!
«Хорошо, - воскликнете вы, - я хочу стать проектировщиком интерфейсов! Что дальше?»
Варианты, конечно, есть. Можно погрузиться в Интернет и проштудировать всю имеющуюся там информацию, включая книги, статьи, посты, советы и комментарии на форумах (кстати, лишним никогда не будет, но отнимет много времени, войдет не систематизировано и потенциально обременит букетом различных заблуждений). Можно продолжить самообразование, посещая различные мастер-классы и краткосрочные тренинги (с тем же эффектом).
Но есть более надежный и эффективный вариант - живое общение с Мастером своего дела и приобретение практического опыта под его руководством. Это как раз то, что предлагаем мы - добро пожаловать в Образовательный центр ПВТ на курс «Проектирование интерфейсов» (UI/UX Specialist) !
Материал подготовили: Вадим ЗЕЛЕНКОВ, Эрика ГРИЩЕНКО.
Время достижения цели - это функция расстояние до цели и её размера. В 1954 году психолог Пол Фиттс, изучавший моторную систему человека, показал, что время, требуемое для попадания в цель зависит от расстояния до цели, а также находится в обратной зависимости от размера цели. Согласно этому закону, быстрые движения и маленькие цели приводят к большему количеству ошибок. Закон Фиттса широко применяется в UI и UX. Например, согласно этому закону, интерактивные кнопки стоит делать большими, потому что на маленькие кнопки сложнее кликнуть и это занимает больше времени.
Закон Хика
Время принятия решения возрастает с увеличением количества и сложности вариантов выбора. Чем больше количество раздражителей, тем дольше пользователь будет выбирать, с каким из них взаимодействовать. Если пользователей бомбардируют вариантами выбора, им придется уделить время для интерпретации и принятия решения, чего они не хотят делать.
Закон Якоба
Пользователи проводят большее количество времени на других сайтах. Это означает, что пользователи предпочитают, чтобы ваш сайт работал так же, как и сайты, которые они уже знают. Закон Якоба придуман Якобом Нильсеном, сооснователем Nielsen Norman Group, который сделал огромный вклад в UX, например, изобрел метод эвристической оценки.
Закон прегнантности
Люди будут воспринимать и интерпретировать неоднозначные или сложные изображения в самой простой форме, потому что эта интерпретация требует от нас меньше всего когнитивных усилий. Этот закон открыт в 1910 году психологом Максом Вертхаймером, когда он увидел огни около железнодорожного переезда. Это было похоже на включение и выключение огней вокруг сцены. Наблюдателю кажется, что это один и тот же огонек, который переходит от лампочки к лампочке, хотя на самом деле это просто серия лампочек, которые включаются и выключаются по очереди.
Закон близости
Близкие друг к другу объекты воспринимаются в группе. Этот закон также является одним из основных в гештальт-психологии и был открыт Вертхаймером. Он заметил, что быстрая серия событий создает иллюзию движения. Например, фильмы - это быстрое движение кадров, которое воспринимается как сплошной визуальный опыт.
Закон Миллера
В среднем, человек может удержать в памяти 7 ± 2 элемента в своей рабочей памяти. В 1956 году Джордж Миллер утверждал, что диапазон непосредственной памяти и абсолютного суждения был ограничен примерно 7 частями информации. Основной единицей информации является бит, объем данных, необходимый для выбора между двумя одинаково вероятными альтернативами. То есть, 4 бита информации - это решение между 16 парными альтернативами (4 последовательных двоичных решения). Точка, в которой путаница вызывает неправильное суждение, - это пропускная способность канала.
Закон Паркинсона
Любая задача занимает все отведенное на неё время. Согласно этому закону, ограничения во времени, пространстве или бюджете приводят к увеличению продуктивности и эффективности.
Эффект серийного расположения
Пользователи лучше всего запоминают первые и последний объекты в серии. Манипуляции с серийным размещением для создания лучшего пользовательского опыта используется во многих популярных дизайнах успешных компаний вроде Apple, Electronic Arts и Nike.
Закон Теслера
Закон Теслера, или закон сохранения сложности, утверждает, что для любой системы существует определенное количество сложности, которое нельзя сократить. В середине 1980-х Ларри Теслер понял, что взаимодействие пользователей с приложениями так же важно, как и сами приложения. Он говорит, что во многих случаях инженер должен потратить лишнюю неделю на упрощение приложение, а не заставлять миллионы пользователей тратить лишнюю минуту на использование сложной программы. Однако, Брюс Тогнаццини утверждает, что люди сопротивляются упрощению своей жизни. Поэтому, если приложение простое, пользователи начинают стремиться к более сложным задачам.
Эффект Фон Ресторфф
Эффект Фон Ресторфф, или эффект изоляции, предсказывает, что при наличии большого числа похожих объектов, вероятнее всего запомнится тот, что отличается от остальных. Этот эффект был открыт в 1933 году немецким психиатром и педиаторм Хедвиг фон Ресторфф, которая обнаружила, что когда участникам исследования показывали список похожих объектов, среди которых один отличался, этот объект запоминался лучше.
Загрузка...
