UX разработка – это здравый смысл в заботе о пользователе. Оптимизация будущего продукта сайта/приложения, его улучшение начиная от исследования (ресерч), концепции, дизайна и заканчивая прототипом и тестами, при этом исследование может проводить как сам UX, так и узкие специалисты (в зависимости от бюджета и щепетильности, с которой к этому будут подходить). Обязанности UX разработчика могу разнится так же, как и состав команды с которой ему придётся работать, в обязанности могут входить и функции Project-менеджера (связь с клиентом или акционерами, сроки, оценка стоимости).
Грубо говоря – UX разработчик должен определить своими силами или с помощью команды или наемных специалистов, кто будет пользоваться приложением (юзеры), что им нужно, как будет выглядеть продукт, что будет в нем полезное для юзера, что в нем лишнее и не нужное. Провести проект по всем этапам разработки веб сайта до его запуска.
Обычно в команду, с которой работает UX входят: UI дизайнер (тексты интерфейса), Visual дизайнер (дизайн, внешний вид), User researcher (тесты юзеров), Content (копирайтеры и главный редактор) и при разработке сайтов SEO (оптимизация контента для поисковых систем).
UX разработка практически тоже, что и Project-менеджмент.
Этапы разработки и задачи UX дизайнера
Ресерч (исследование)
1. Бизнес кейс – исследовать рынок готовой продукции (конкурентов), определить, что должно быть и сильные\слабые стороны. Итог: тестовый документ.
2. Маркет и Юзер ресерч – самостоятельно или с использованием специалистов.
2.1 Маркет ресерч – взгляд с высока на всех, кто использует приложение. Возраст, демография, определение особых общих потребностей юзера).
2.2 Юзер ресерч – узнать что будут делать пользователи, почему и когда обратятся за помощью сайта\приложения.
3. Создание Персон (от 3 до 5) – разделить юзеров по общим критериям, создать мифических персон, использующих продукт с общими целями и особенностями. Раздать всем акционерам и UI разработчику.
4. Тачь поинты и каналы: определить что-то, что не является главной задачей, но прямо касается её и поможет пользователю. К примеру, для приложения по Туристическим турам можно добавить тачь поинт «оренда велосипеда» – его каналом будет «оплата» (онлайн или на месте), тачь поинтом к ней будет «где оплатить» – поиск ближайшего места или список всех мест.
- для поиска новых тачь поинтов можно задействовать акционеров (Project-менеджера или заказчика, если предыдущего нет в команде).
- можно задействовать команду – попросить добавлять на табло стикеры
- определять персон для каждого тачь поинта
- совмещать похожие и удалять лишние
5. User сценарии (будут использоватся в Юзер тестах): определение того, как пользователь по приложению, как будет проходить по тачпоинтам. Как именно оплачивать и какие способы оплаты должны быть, а какие будут лишними. Имеют блочный/схематический вид.
Пример сценария для «Оплаты»:
- в поиске новых оплаты и актуальности существующих можно использовать команду. В мнениях быть рациональным: «никто не использует debit», не значит, что его не используют, возможно следует провести анализ (или найти подобные исследования), сделать вывод стоит ли с ним заморачиваться, тратить время и деньги.
6. User Flow – после сценариев нужно определить как пользователь пройдет через весь сайт/приложение, от входа до результативного окончания и удовлетворения потребности.
User Flow диаграммы: блок-схема, состоящая из «Вход» – Новый юзер – Да/нет (два пути). Нет -> Лендинг; Да -> Регистрация -> On bording последовательность -> Лендинг; Затем поледовательность Лендинга и так далее до финала.
- полезно для аукционеров, так как они с легкостью поймут как будет выглядеть их заказ
- нужно для комманды, для определения количества разрабатываемых страниц
Вместо блок схем можно делать рисунко-схему в приложения для рисования, таких как Illustrator, так же в Scetch есть плагины для этих целей, и Adobe Experience Design и онлайн апликации как UxPen
7. Результат. Это поиск проблем и их решение: Теперь все кто принимал участие, должны понимать кто такие эти пользователи и почему они там, что ими движет. Все это уменьшает финансовый риск, убирает проблемы и затраты на не нужные вещи. Далее концепция и как это будет выглядить.
Концепция: Как это выглядит?
В концепции проект пройдет по следующим ключевым этапам:
1. Первое: Wire frame (набросок от руки с связью нитками) – это low fid дизайн. Это только коробки и нитки, построенные на основании исследований пользователей. Должен показать как контент сгрупирован, как структурируется информация и примитивный набросок визуального дизайна. Должен передатся команде на одобрение, и отзыв здесь легко исправить.
2. Mockup – от low до mid fid – показывает типографию, визуальные детали, цвета, картинки. Это статическая репрезентация продукта (не связязана между собой). Лучшее место для создание нескольких вариантов дизайна на выбор.
3. Прототип – от low до hig fid – добавлен функционал – позволяет определить проблемы юзабилити и доступа. Как вариант: создание всех 3-х типов фида и каждый раз передача на тестинг, для поиска того, что вы возможно упустили.
Для набросков чаще всего используют бумагу (77%), затем Microsoft Visio.
Полная последовательность работы UX разработчика на стадии «Концепция»:
1. Наброски идей: нацеливайтесь на намеренье юзера; быстрота – сделали набросок за 3 минуты, получили фидбек – вернулись к наброскам; структура, не детали; детели добавятся позже в Wire frame процессе;
2. Таск флов (для каждого действия): линейная блок схема, предусматривающая ошибки
Для всего перечисленного выше, в то время, как нужно вовлечь команду – используйте доску. Самый наглядный и простой инструмент для работы с командой и её вовлечение в процесс.
3. Контент Wireframe (использует дизайнеры, разработчики и Project-менеджеры, а так же бизнес аналитики и Interaction дизайнеры, как и все прочие вовлеченные) – отвечает на вопросы: структура, контент, иерархия, функционал, поведение пользователей. Не для визуального дизайны. В первую очередь (совет) стройте его для разметки контента.
4. Блокнот, Доска для рисования или Adobe Comp (Android\iPad) или для ПК Sketch (Mac), Adobe Experience Design (Adobe XD – Mac/PC) или UXPin (веб) – это не весь список, но все три типа подкатегорий. Wirefy – если вы никогда не создавали Wireframe и хотите понять как это выглядит. Добавьте в букмаркбар, откройте любой сайт и перетащите его в Wirefy, и он его уменьшен до Wireframe.
Adobe Comp – позволяет перенести рисунки в Cloud и затем использовать в Adobe Photoshop, Illustrator и InDesign. Можно рисовать как жестами так и стилусом.
Adobe XD – вся команда может работать над проектов в одно время с вами. Sticker Sheet коллекция UI элементов, к примеру из Material design – доступна и для Sketch.
UXPin – позволяет просмотреть работу в телефоне или на планшете.
Блокнот, Доска для рисования – очень легко избавится от не нужного наброска, наглядно и очень легко собрать отзывы. При удаленной работе не имеет преимуществ, пожалуй только недостатки.
Бумага – в добавок к вышеперечисленному можно вырезать экран телефона на черном листе бумаги. Можно добавлять слайды и прочую чушь, по типу всплывающих окон на стикерах..
5. User Testing на Бумажном прототипе (достаточно 3-5 тестируемых, оптимально 15). Лучше 2 человека. 1 человеко-компьютер, второй (вы) задает вопросы. Тест проводится в контенте, подопытному сообщают, что он что ему нужно (к примеру найти тур в Сингапуре) и просят найти тур. Пока вы наблюдаете человеко-компьютер вставляет бумажки в зависимости от выбора тестируемого. Вы должны понимать что именно вам нужно достичь и какую информацию получить из сессии определенного опыта.
6. Сбор Feedback – разные методы: персональный; использование програмного обеспечения для Project-менеджера (Slack, Microsoft Teams.. – чтоб делится PDF, wireframes, ссылок и прочего), не включает независимого юзера; Prototyping software – поозволяет получить не специфический фидбек, оставляя комментарии, а Adobe XD позволяет прогнать тест с определенной задачей; Email – фидбек будет конкретным, но мало значущим, так как не будет видно почему (нет движения).
Дизайн
1. UI дизайней и его роль. Вид и ощущения при работе с интерфейсом – задача UI дизайнера, задаваясь вопросом как пользователь попадет от сюда – сюда. Использует патерны дизайна, следит за промежутками, цветом и заботится об наличии интуитивно-понятного интерфейса, так что пользователь не отвлекался и не забывал о основной своей цели. К примеру, у карусели должны быть стрекли и шарики – это и есть работа UI дизайнера, так же как размер картинки, отступы между элементами, шрифты и их размер и цвет caption, размер и цвет шариков, стрелок и carrots и даже относительное отношение к картинке.
- дизайн каждого экрана с которым взаимодействует пользователь;
- адаптивный дизайн
- дизайн всех элементов (даже слайдеров)
- каждый шрифт и цвет (размер, алигмент, спейсинг и т.п.
- дизайн интерактивности для каждого элемента
- анимации и движения от взаимодействия
- создает систему дизайна для всего проекта
- вовлекается в Wireframes, составлению mood board.
Использует:
- Рисование: Photoshop, Illustrator или др.
- Прототипирование: Adobe XD/Scetch или др.
Вовлекается во все юзер-тесты, чтоб убедится что все главные проблемы – устранены. Он так же работает с командой UX и клиентом. Чтобы понят бренд и цели и ожидание пользователей, которые были определены на стадии исследования. Потом взаимодействует с разработчиками, чтоб не поняли все намеренья дизайнеров. Кроме того это задача UI чтоб вырезать все элементы в форме, необходимой для разработчиков.
Контраст в цветал элементов управления важен – так как многие (МНОГИЕ) имеют те или иные проблемы со зрением. Размер элементов важен, так как имеется стандарт и средний размер отпечатка пальцев (см. стандарты гугла).
loading...
