2 урок. Основные уровни UX. 5 уровней UX: как создавать удобные интерфейсы Это история не про вдохновение и видение. А о методе, который помогает разрабатывать эффективные системы и понятный дизайн. Просто, понятно, пошагово. Модель была создана в начале 2000-х Джесси Гарреттом и получила название «5 уровней UX». Простая для понимания и предельно наглядная, она прекрасно иллюстрирует процесс разработки любой системы и помогает определиться с тем, что именно нужно вашим пользователям. Весь опыт взаимодействия должен быть результатом сознательного решения с вашей стороны. Нужно принимать во внимание все возможности, каждое действие, которое может совершить пользователь и понимать ожидания пользователей на каждом шагу, на протяжении всего процесса Диаграмма Гарретта Базой для модели стала диаграмма, при помощи которой Гарретт сумел показать связь между разными подходами к дизайну в рамках проектирования пользовательского опыта. Двигаясь от абстрактного к конкретному и от концепции к реализации, Гарретт выделил пять уровней. В зависимости от назначения системы: ориентации на действие или на предоставление информации — основные задачи могут описываться по-разному. Но общий смысл от этого не меняется. А теперь давайте разберемся, как все это можно использовать, чтобы создавать понятные и удобные системы и интерфейсы. И как проверять свои идеи и гипотезы в процессе разработки, когда еще есть возможность быстро и дешево исправить ошибки. #1 Уровень стратегии Наиболее абстрактный и концептуальный уровень. Описываем причины и цели создания продукта, изучаем аудиторию, делаем предположения. Выясняем насколько полезным будет продукт и какие задачи пользователи смогут решать, благодаря ему. Продуктом может быть что угодно: новый сайт, приложение, информационная или навигационная система, интерфейс. Отвечаем на вопросы: Для чего мы создаем продукт? Какие цели мы перед собой ставим? Кто наши пользователи? Для кого мы делаем продукт? Какие задачи мы поможем решить пользователям? Почему они будут пользоваться именно нашим решением? Поиск ответов на эти вопросы входит в комплексный процесс стратегического исследования и планирования. Нужно опросить пользователей, владельцев и команду разработчиков продукта. Уже на этом уровне мы можем проверить идею и провести ряд исследований, чтобы сразу понять, насколько идея продукта близка пользователям, правильно ли вы понимаете мотивы и нужды целевой аудитории, соответствуют ли ожидания разработчиков реалиям рынка. Какие тесты проводить: исследование этнографии, Этнографическое исследование - метод качественного исследования, при котором исследователь наблюдает за объектом исследования изнутри, погружаясь в естественную среду, в которой живет/работает/покупает целевая аудитория. интервью, онлайн-опросы, концепт-тесты. Проверка концепций. Исследование, главной задачей которого является проверка идеи или концепции. Проверка концепции осуществляется для оценки вероятности того, что маркетинговые мероприятия достигнут запланированных целей. Производители до вложения значительных инвестиций в развитие производства используют проверку концепций для разведочного исследования рекламы, продукта и цен. Результат проработки уровня стратегии — четко сформулированная миссия, цели и задачи проекта, понимание, что и для кого делается, выделение основных конкурентных преимуществ. #2 Уровень возможностей Перечисление всех функций проекта и требований к контенту. Описание особенностей функциональности и требований, которые нужны для достижения стратегических целей. Отвечаем на вопросы: Какие функции нужны для решения пользовательских задач? Какую функциональность предлагают конкуренты? Какой контент нужен пользователям? Наша задача определить все возможности для решения задач пользователей и удовлетворения их потребностей. Мы можем проверить, насколько актуальны и востребованы выделенные функции, какой функциональность выглядит в глазах пользователей более полезным. Какие тесты проводить: концепт-тесты, тест «Сортировка карточек», Сортировка карточек - это быстрый, недорогой и надежный метод, помогающий в процессе дизайна сайта. Метод сортировки карточек позволяет создать общую структуру информации на вашем сайте, а также дает рекомендации по дизайну навигации, меню и возможным вариантам деления информации на группы. Хоть сортировка карточек и не дает вам окончательного варианта структуры, она помогает вам найти ответы на вопросы, с которыми вы столкнетесь на следующих этапах дизайна. Например, у пользователей вашего сайта могут возникнуть претензии к тому, как информация сгруппирована или какие термины использованы на сайте. В этих случаях сортировка карточек поможет вам определить закономерности: какую группировку информации на сайте предпочитают пользователи: по предмету, по процессу, по структуре компании или как-то по-другому? насколько совпадают интересы различных групп пользователей? насколько сильно различаются их интересы? сколько потенциально может быть главных категорий? (это потом связано с навигацией) как должны называться группы материалов на сайте? Метод сортировки карточек помогает ответить на подобные вопросы и таким образом подготовить вас к следующим этапам дизайна. интервью, онлайн-опросы и фокус-группы. Результат работы на уровне возможностей — полное описание функционала продукта, составленное с учетом реальных потребностей пользователей. #3 Уровень структуры Проработка опыта взаимодействия пользователя с продуктом. Разработка информационной архитектуры и проектирование пользовательского опыта. Отвечаем на вопросы: Как помочь пользователю решить задачу за минимальное время и количество шагов? Понятна ли архитектура проекта пользователям? Соответствует ли дизайн ожиданиям пользователей? Можно ли безболезненно изменять архитектуру при необходимости? Основная задача — создать архитектуру, которая соответствует ожиданиям пользователей и при этом действительно помогает решать пользовательские задачи. Тестирование архитектуры — процесс гораздо более сложный, чем концептуальные исследования. Какие тесты проводить: юзабилити-исследование, тест привлекательности, тестирование методом совместного дизайна, интервью, онлайн-опросы, фокус-группы, сортировка карточек. Результат — разработанная с учетом пользовательского опыта информационная архитектура, прошедшая проверку на реальных пользователях из числа вашей целевой аудитории. #4 Уровень компоновки Создание прототипов на основе информации, полученной в ходе прохождения предыдущих уровней. Переход от абстрактного видения продукта к его конкретному воплощению. Отвечаем на вопросы: Соответствует ли прототип нужному функционалу и требованиям информационной архитектуры? Удобно ли расположены контентные блоки? Удобна ли для пользователей система навигации? Соответствует ли прототип требованиям и стандартам отрасли? Действительно ли это оптимальное решение, или можно что-то оптимизировать и улучшить прототип? Список далеко не полный. Основная задача этого этапа — свести всю работу предыдущих уровней в общую систему. Нужно проверить, насколько результат соответствует ожиданиям пользователей, владельцев и разработчиков продукта. На этом уровне мы проводим тот же комплекс исследований, что и при проектировании архитектуры и пользовательского опыта, но уже с большей ориентацией в сторону общего впечатления от продукта: юзабилити-исследование, A/B тестирование, A/B-тестирование — это неотъемлемая часть процесса работы над продуктом. Это эксперимент, который позволяет сравнить две версии чего-либо, чтобы проверить гипотезы и определить, какая версия лучше. Должны ли кнопки быть черными или белыми, какая навигация лучше, какой порядок прохождения регистрации меньше всего отпугивает пользователей? тест привлекательности, совместный дизайн, интервью, онлайн-опросы, фокус-группы, Тут несколько потенциальных пользователей собираются вместе и обсуждают какой-то продукт или тему. А мы во время их разговора задаем вопросы и пытаемся понять шаблон поведения людей в группе: то, как они взаимодействуют между собой или с продуктом. сортировка карточек. Результат — проверенный на реальных пользователей прототип продукта. #5 Уровень поверхности Финальный уровень — визуальное оформление прототипа: дизайн, типографика, верстка. На этом уровне вся абстракция конкретизируется до уровня готового продукта. В ходе работы над визуальной составляющей мы задаем себе много вопросов, среди которых наиболее значимые: Удобен ли наш интерфейс для пользователей? Решает ли он задачи, описанные на первых уровнях? Соответствует ли он тем функциям, которые в него должны быть заложены? Помогает ли дизайн пользователю? Решает ли визуальное оформление задачи, которые были заложены при проектировании пользовательского опыта? На уровне поверхности решаются все задачи, которые не были решены на предыдущих этапах. Чтобы проверить, насколько результат соответствует потребностям, нуждам и ожиданиям ваших пользователей, проводятся комплексные тесты. Результат работы на этом уровне — полностью готовый к дальнейшей работе продукт: интерфейс, сайт, приложение, веб-сервис или любая другая система. Но это еще не конец Потому что самое интересное только начинается. После релиза продукта и получения обратной связи от настоящих клиентов наступает следующий этап — непрерывная доработка и оптимизация проекта. Однако в решении всех возникающих вопросов и проблем мы можем по-прежнему применять метод пяти уровней для создания более совершенной версии продукта и использовать все те же инструменты для тестирования и проверки рабочих идей и гипотез. О пользе проектирования, зачем нам это делать? Проектирование даёт сайту очень много: 1. Сильно повышает гарантию достижения результата. Только четко сформулировав задачи, определив целевую аудиторию сайта и её потребности, смоделировав взаимодействие сайта и его пользователей, мы можем быть уверены — мы получим то, что нужно. 2. Экономит время и деньги. Исправить ошибку на этапе проектирования довольно просто: меняем несколько кусков текста и схем. Сделать это на этапе разработки дизайна или вёрстки будет уже дороже. Если ошибка обнаруживается на этапе программирования, её исправление может стоить многие тысячи (десятки, сотни тысяч) рублей и занять месяцы, а то и годы. 3. Позволяет эффективно разделять работу. Проектное задание — это вполне самодостаточный документ. Получив его, клиент может сделать сайт своими силами или нанять другую команду, которая, по его мнению, лучше справится с непосредственно разработкой (у нас есть такой опыт, когда мы выполняли только проектирование, а клиент разрабатывал сайт своими силами). Я бы не рекомендовала пренебрегать проектированием даже для самых маленьких сайтов; для самой распоследней одностраничной визитки это будет исключительно полезно. Потратьте хотя бы несколько дней — не пожалеете. Исключение, пожалуй, составляют недорогие сайты — с бюджетом 5-15 тысяч рублей — где проектирование становится нерентабельным, увы. Как проектировать? Проектирование можно условно разбить на четыре основные части: 1. Целеполагание, 2. Исследование контекста, 3. Создание концепции, 4. Моделирование. Целеполагание Целеполагание необходимо для определения того, зачем мы делаем сайт и каких именно результатов хотим достичь. Это служит ориентиром для всей дальнейшей работы: что бы мы ни делали — будь то моделирование, создание интерфейсов, добавление новых функций или изменение старых — всё это должно соответствовать целям. В будущем они же помогают оценить успешность проекта. Первый шаг в целеполагании сделан в видении проекта. На этапе же проектирования цели формулируются более точно и подробно, а также определяются задачи сайта, выполнение которых будет работать на достижение каждой цели. Исследование контекста Исследование необходимо для получения информации, которую мы будем называть контекстом сайта. Под контекстом мы понимаем различные обстоятельства, окружающие сайт и способные оказать влияние на его работу. К таким обстоятельствам относятся: Целевая аудитория и её потребности, Характеристика и тенденции области, Конкуренты и их деятельность, Опыт других проектов, Законодательные или иные ограничения, Другие факторы влияния, в зависимости от тематики проекта. Польза исследования контекста Контекст проекта помогает нам понять целевую аудиторию и то, каким нужно сделать сайт: как его позиционировать, какая информация на нём должна быть и на каком языке он должен говорить с ЦА (это называют коммуникативной стратегией), как он будет отличаться от конкурентов (естественно, в выгодную сторону). Кроме того, исследование погружает команду проекта в тему, позволяет где-то даже на подсознательном уровне видеть/принимать правильные решения. Лучше всего, конечно, исследование помогает понять аудиторию: Как с ней общаться: какие слова использовать в «разговоре» с ней, как называть свой продукт или услугу (возможно, нужно использовать профессиональный сленг, или наоборот, нарочито упрощённую терминологию), обращаться ли к ней на «вы» или на «ты». Каковы её потребности: что приоритетно, что необязательно, но желаемо, что нельзя делать ни в коем случае. Где брать данные В идеале, данные о контексте мы должны получить от клиента, но если таких данных у клиента нет, то исследование контекста предстоит провести самим. Для исследования я советую использовать два метода, которые лучше всего зарекомендовали себя на всех без исключения проектах, которые мы делали: Исследование доступных источников — литература, Интернет-ресурсы и так далее. Интервью с ключевыми действующими лицами — пользователями, экспертами. Предвижу комментарии: дескать, самостоятельное исследование рядом не стояло с профессиональными маркетинговыми исследованиями — так зачем тратить время и ресурсы? На то есть несколько причин: Без данных о контексте ваши шансы сделать хорошо пользователю стремятся к нулю. Даже самостоятельное исследование даёт полезную информацию, пусть и в меньшем объёме, нежели профессиональное. И даже если вы настолько неумело проводите исследование (что маловероятно), что не можете получить ответы на вышеобозначенные вопросы, вы всё равно погружатаетесь в контекст проекта и хотя бы подсознательно улавливаете что-то полезное. Могу сказать по собственному опыту: нам исследование помогало всегда, в любом проекте. Создание концепции сайта Отлично: цели поставлены, данные о контексте получены. Пора облачить всю имеющуюся информацию в концепцию (аналог того, что мы сделали в видении, но более подробную). Напомню, под концепцией мы понимаем основные идеи и возможности, заложенные в проект: Что и для кого мы делаем — общая идея и целевая аудитория; Как сайт будет работать и какую информацию содержать; Как сайт будет зарабатывать (если это проект с прямой монетизацией); Каковы будут отличительные особенности сайта (от конкурентов), как он будет позиционироваться; Как сайт будет развиваться после запуска. Концепция задаёт направление проектированию и помогает, аналогично видению, ещё раз состыковать точки зрения на проект — нашу и клиента. Моделирование сайта Моделирование — это создание модели сайта, которая описывает функциональные возможности и информационную структуру. Функциональная часть модели В функциональной части модели мы описываем возможности, которые сайт предоставляет своим пользователям: например, выкладывать, группировать и комментировать фотографии (социальная сеть) или заказывать и оплачивать товар (интернет-магазин). Важно понимать, что возможности являются инструментами решения задач. Если придуманная возможность не решает ни одну из задач — это может означать, что она лишняя. В проектном задании мы описываем возможности на достаточно высоком уровне абстракции — не так детально, как мы сделаем это в «Техническом задании на программирование», поскольку здесь это просто не требуется. Информационная структура Информационная структура — это схема, показывающая, из каких разделов состоит сайт, какие задачи они решают, и как пользователь будет перемещаться по сайту (схема навигации). Далее, прорабатываем схему раздела — это более глубоко и детально проработанная схема (по сравнению с информационной структурой сайта), показывающая навигацию по разделу, связи и переходы между подразделами. Схема раздела в идеале включает следующие элементы: Задачи — какие из ранее поставленных задач решает раздел. Например, раздел «Фотографии» в социальной сети решает задачу обмена информацией между друзьями и последующего общения; Сообщения — это в буквальном смысле сообщения, которые раздел или его часть передаёт посетителю. Например, сообщение приветствия «Привет, ты на портале ХХХ! Мы рады видеть тебя здесь» или «Эй, это наш лучший товар — попробуй, закажи сейчас и убедись в этом сам!». Сообщения бывают разных типов; наиболее часто встречающиеся: рекламные, призывы к действию, уведомления и имиджевые сообщения. Функциональные элементы — элементы интерфейса, дающие возможность посетителю выполнить какую-то операцию. Например, функциональным элементом является форма для ввода сообщения, позволяющая отправить сообщение, или кнопка в интерфейсе, сохраняющая сделанные изменения. Варианты поведения посетителя — предположения о том, что посетитель сайта может или должен сделать после изучения интерфейса или отдельных его частей. Небольшой вывод: 1. Обязательно проектируйте любой сайт. Если не умеете, то самое время начать учиться. 2. Проектирование полезно: оно повышает качество сайта, экономит время и деньги. 3. Проектирование — это, прежде всего, правильная постановка задачи, а затем вытекающие из неё исследование, концептуальное и инженерное моделирование. Задание на 2 урок На https://www.behance.net/ — возьмите какой-нибудь известный сайт, типа Икеи или ЛеруаМерлен, хорошо проанализируйте, представьте себя действующими веб-дизайнерами переделайте и напишите «концепт» исходя из предыдущих теоретических знаний. Концепция или прототип сайта - это набросок или скетч будущего веб-ресурса с подробным описанием функционала и рекомендациями по разработке. Например: Это интернет-магазин и было бы не плохо сделать меню сверху посередине покрупнее, так как на данном интернет-магазине его плохо видно и пользователи не все сразу могут понять навигацию сайта. Также же крупным текстом для привлечения потенциальных покупателей я бы написал для этого магазина такой-то текст: "Текст пишем сюда" И далее по всем правилам которые мы знаем мы продолжаем писать "Концепт" т.е. проявлять свои идеи и писать рекомендации.