Что анализировать перед проектированием интерфейса

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

    Сразу оговорюсь, что это статья не про бизнес или системный анализ, а именно про «дизайн-анализ».

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

    Кому лень читать, то вот тут пример презентации моего этапа анализа.

    Спроси клиента


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

    Список моих стандартных вопросов:


    • Есть ли у вас логотип / фирменный стиль, которых стоит придерживаться? Иногда стиль и лого есть, но клиент разрешает ими пренебречь. Особо полезная инфа если лого — отстой.
    • Что вы хотите изменить в интерфейсе и почему? Определяемся с основным фронтом работ.
    • Кого вы считаете своим основным конкурентом? Пригодится на следующих этапах анализа.
    • Есть ли у вас выгодное отличие от конкурентов? Пусть редко, но иногда оказывается, что действительно есть.
    • Приведите пример интерфейсов, которые вам нравятся и опишите почему. Очень важно именно почему. Может оказаться, что клиенту нравится сайт не в общем, а какая-то часть, например белый фон, который у него вызывает ассоциации с «лёгкостью дизайна».
    • Требуется ли вам мобильное приложение / сайт? Задел на развитие проекта.
    • Требуется ли версия сайта адаптированная под телефон? Мы то с вами понимаем, что сейчас выходить в интернет без адаптивной вёрстки нет смысла, но и надо рисовать под телефон тоже. Но клиент может иметь другую точку зрения. К тому же адаптировать интерфейс под телефон это уже отдельная работа.
    • Можете ли вы предоставить Гостевой доступ к Яндекс.Метрике или Гугл Аналитике для этапа анализа? Главное сразу пояснить, что это именно гостевой доступ и вы никак не можете ничего сломать и не будете никому передавать супер-секретные данные. Клиенты, часто не разбираются в этом и им кажется, что дать доступ к Я.Метрике это как отдать ключи от квартиры, где деньги лежат.

    Анализ Я.Метрики / Google Analytics


    Я, как истинный патриот и старовер, предпочитаю Я.Метрику. В основном, потому что интерфейс Гугл Аналитики — отстой и там нет Вебвизора.

    Что я смотрю в Метрике:


    • Конверсию. Если были установлены цели. Если не было, то посоветовать клиенту установить их чтоб набиралась какая-то статистика пока вы делаете остальные этапы.
    • Карты. Все карты, включая Аналитику форм.
    • Отказы. Общее количество. Сам по себе этот показатель, на мой взгляд, мало о чём говорит и он нужен только для понимания его доли в следующем параметре.
    • Отказы по целевым запросам. Вот если много отказов по целевым запросам, то это уже плохо и при редизайне стоит этот параметр снижать. Поясню: «отказ по целевому запросу» значит, что я пришёл на сайт, торгующий вакцинами от Covid19, по запросу «Вакцина от Covid19. Купить недорого», но по какой-то причине не понял, что попал куда нужно и моментально ушёл с сайта. Это явно говорит, что сайт не понятен с первых секунд и клиент теряет покупателей.
    • Поисковые запросы. Важно потому что редизайном можно запросто убить кучу текста и заголовков, по которым находят сайт, что не очень хорошо, мягко говоря.
    • Статистику по устройствам входа. Пригодится для доказательства клиенту, что ему нужна моб. версия если он вдруг отказался от неё на этапе Опросника. Также даст понимание под какое разрешение её рисовать.
    • Пол и возраст основных посетителей. Пригодится на следующем этапе анализа.

    Пользовательские сценарии


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

    Для создания сценария я создаю Карточку пользователя.

    Вот из чего она состоит:


    • ФИО и возраст. На основе данных из предыдущего шага про Метрику.
    • Проблема/цель. Описание того зачем юзер открыл наш интерфейс.
    • Как пришёл на сайт. Например вбил в Гугле «Купить вакцину от Covid19». Запросы беру не с потолка, а из Метрики.
    • Страница входа. От того на какую страницу попал юзер во многом зависит его дальнейший путь. Далеко не всегда юзер попадает на главную страницу.
    • Устройство. Берём на основе метрики. От устройства с которого юзер работает с интерфейсом зависит многое в дизайне.
    • Желаемое целевое действие. То что уже мы хотим получить от юзера. Например, мы хотим чтобы он заполнил какую-то форму или нажал кнопку.

    На основе этой карточки я пишу сценарий.

    Из чего состоит сценарий:


    • Из целей посетителя, описанных в Карточке
    • Из оценки текущего Интерфейса (Редизайн). Смотрим на текущий интерфейс и пытаемся получить от него то, что написано в Карте пользователя. Отмечаем главные затыки.
    • Из «насмотренности» удачных реализаций. Дописываем в сценарий какие-то фишки, которые знаем благодаря использованию других сайтов.

    Сценариев я пишу от трёх до пяти. Стараюсь описать: стандартный; сложный (покупка не одного товара, а нескольких и разных по характеристикам); не стандартный (заход юзера с какой-то не подходящей для цели страницы или устройства). И дописываю пару других сценариев если считаю, что в каком-то из описанных суть не достаточно раскрыта.

    Конкуренты


    Есть два классических ответа на вопрос о конкурентах: «У нас нет конкурентов»; «Мы конкурируем со всеми». Ни то, ни другое, естественно, не является правдой, поэтому надо копать глубже. Для этого вопрос и есть в Опроснике. При анализе конкурентов я выписываю только то, что можно у них почерпнуть. Нет смысла выписывать слабые стороны. Это нам ничего полезного не даст. Я открываю интерфейсы конкурентов и пытаюсь использовать их опираясь на Сценарии пользователей. Ведь если это реально конкурент, то и целевая аудитория у него примерно та же. Мне пару раз клиенты с небольшой иронией в голосе говорили что-то вроде: "А, ну нормально. Просто взял, что увидел у кого-то там и к нам применяешь". Сначала это раздражало, ведь в анализе разбор конкурентов это лишь один шаг из многих и далеко не основной, но впечатление у клиентов может складываться именно «украл, что можно и всё». К счастью это случалось не часто. После этого я специально в презентацию анализа добавил фразу "Можно почерпнуть у конкурентов" сходу говоря, что если надо, то да, именно это я и возьму не стесняясь, что там кто-то это уже делает.

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

    Карта интерфейса


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

    Примеры стилистики


    Примеры стиля будущего интерфейса можно делать в виде скриншотов интерфейсов, стиль которых вы считаете подходящим для текущей задачи. Желательно стараться находить примеры по той же или схожей тематике с темой клиента. Так клиенту будет проще въехать в суть этих картинок. У меня бывали случаи, когда в тематике просто нет достойных примеров и я брал что-то нейтральное. Но надо обязательно сказать клиенту, что это лишь пример стиля (воздушность интерфейса, цветовая схема, мягкость, технологичность и пр.), а не 1 в 1, то что он в итоге получит. И желательно нейтральные примеры находить не на русском языке чтоб клиент автоматически не считывал текст, а получал общее впечатление. На этом этапе обязательно надо добиться от клиента чтобы он именно «ткнул пальцем» в тот пример стиля, который нравится. Это нужно для того чтобы у него в голове чётко сложилось понимание какой стилистики ему ожидать в итоге. Это полезно и для клиента и для дизайнера, у которого уйдёт меньше времени на поиски и упростит этап утверждения готового дизайна.

    Что в итоге


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

    Что мы получаем от этапа анализа


    • Клиенту стало чуть-чуть понятнее чего ожидать в итоге;
    • Дизайнеру стало понятнее, как делать и почему именно так;
    • Дизайнеру проще оценить сложность проекта и выдать почти точные сроки;
    • Дизайнеру и клиенту проще сдать / принять результат;
    • Проект будет более продуманным и это хорошо.
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 6

      0
      Про «слабые стороны».
      Что вы хотите изменить в интерфейсе и почему?

      Обычно перефразирую. Если не перфразировать, то ответят: "хотим добавить корзину с кнопочками, потому что нужна корзина с кнопочками". Как спросили, так ответили. Другой вариант:
      Что не устраивает в текущем сайте/приложении? Поясню — у вас уже есть сайт, и вы при этом тратите свои деньги, чтобы сделать новый. Видимо, чтото не устраивает, причём сильно, раз платите. Не хотелось бы за ваши деньги повторить те ошибки, ради которых сайт переделывается.

      Нет смысла выписывать слабые стороны. Это нам ничего полезного не даст.

      А как же определить, что раздражает у конкурентов? Разве не хотите слышать от пользователей: «Ой, какие вы крутые, не то что вон те, там приходится десять раз ткнуть, чтобы получить, а у вас раз-и готово»? В конце концов, SWOT анализ не зря называется не SOT.

      Требуется ли версия сайта адаптированная под телефон?

      Этот вопрос лучше не задавать. И вообще не поднимать. Делать и всё. Вы же не спрашиваете: «Должен ли сайт не работать по вторникам и ночью?». Или, ещё лучше: «Вы хотите переплачивать за то, что сайт работает по вторникам и по ночам?».
      Если вопрос поднимается, можно просто сухо сказать «уже много лет фигню не делаем». Есть конечно исключения, например, CRM с огромными таблицами, но это отдельная история.

      Это явно говорит, что сайт не понятен с первых секунд и клиент теряет покупателей.

      В большинстве случаев, да. Но не всегда. Типичный пример: по запросу (из Яндекса, тут это важно, из Уфы, это важно) «Купить робота Т1000» — зашли, вышли. Всё понятно, всё просто. Начинаем копать. Открываем тот же Яндекс из Уфы, и видим — сниппеты с ценами на T1000 от 17 до 19 тысяч рублей, справа предложения маркета от 16 до 19 тысяч рублей, в TITLE одного элементов выдачи «Новые T1000 за 18 тысяч рублей». У нашего сайта ни сниппета, ни цены. Заходим на сайт, а у нас T1000 за 24 тысячи рублей. Ясно, понятно, 4 секунды и посетитель уйдёт (отказ). Копаем глубже. Оказывается, обмен с 1С раз в неделю, в долларовой стоимости, пересчёт с долларов на рубли при публикации раз в месяц, а доллар то неделю назад упал в стоимости, а на самом деле T1000 у нас самый дешёвый на рынке.
        0
        Нет смысла выписывать слабые стороны. Это нам ничего полезного не даст.

        Допустим вы делаете конкурента метрики и гугл аналитикса. «Там нет вебвизора и неудобный интерфейс». Да ну, ничего полезного не даст. Проигнорим, лучше посмотрим на вот этот симпатичный фильтр по дате Метрики.
          0
          1. Да, соглашусь.
          2. Определить что раздражает у конкурентов стоит, конечно. Просто именно в презентацию анализа это не идёт. Конкуренты меня интересуют только в разрезе, что они делают клёво и что стоит заимствовать. Если прям со всех сторон конкурентов анализировать, то это уже больше анализ рынка получается ). Это другая работа, которую должен делать не дизайнер, а бизнес-аналитик или маркетолог.
          3. Да, я понимаю, что нет смысла делать сайт без моб. версии. Но ситуации бывают разные. Лучше просто спросить это сразу чтобы потом сэкономить время на осмечивании мобильной версии, которая окажется не нужна.
          4. Прикольный кейс ). При таком редком (для меня) кейсе, пожалуй согласен с вами.
            0
            Это другая работа, которую должен делать не дизайнер, а бизнес-аналитик или маркетолог.

            Ножом по сердцу=) Двенадцать лет назад я умел сделать сайт «с нуля под ключ». Десять лет назад я понял, что я не дизайнер (при «внешнем» дизайнере качество результата будет меня устраивать). Пять лет назад я понял, что я ещё и не верстальщик. Пару лет назад я понял, что без команды программистов уже сложно.

            Сейчас даже двигать серые прямоугольники в фигме/акшуре становится всё сложнее.

            А если серьёзно, то:

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

            Кардинально не согласен. Проектировщик/UX спец не занимается анализом рынка. Приведу пример такого анализа. Допустим делаем сайт для компании которая делает крыши/профнастил.

            Что делает «бизнес-аналитик»?.. Начинает ковырять всё по косточкам, выясняет, что 90% бюджета это контекстка, 90% выручки оттуда же, делает тестовый заказ (тайную покупку) вплоть до заключения договора, и тут выясняет, что бОльшая часть клиентов, которая хочет сделать себе крышу, живёт за чертой города, выясняет, что наша анализируемая компания принципиально не везёт материалы дальше чем на 50 км от города, выясняет у замерщиков и продажников, что огромная куча народу после вызова замерщика (что уже должно приводить к конверсии 70-80 процентов в договор) шлётся нахрен после того, как выясняется, что живут за >60 километров., но остальные нам норм, и чешет репу. Принимается решение — в контекстной рекламе всегда писать: только в пределах 50 км от городской черты. Конверсия прыгает раз в десять, полмиллиона за анализ получены и окуплены.

            Что делает проектировщик? Сидя на кресле, выясняет, что такое профнастил, как его выбирают, пытается на сайтах подобрать себе в вымышленный дом, понимает что половина сайтов — говно, потому что невозможно подобрать мягкий профнастил зелёного цвета, а у остальной этого нет, видит в вордстате зеленый профнастил как 30% поискового трафика, чешет репу, говорит — надо (не предлагает!), потому что спрос есть, а у конкурентов сделано через заднее место. Где-то на второй день он понимает, что всегда вместе с кровлей покупают фасад, и кардинально переделывает макеты прототипов на новый вид каталога, связанный с фасадами. Где-то на седьмой день он понимает, что когда нагуглил красивый профнастил, ты на самом деле хочешь такой же (С44, ну не знаешь ты как объяснить гуглу «мелкие прямоугольнички»), но другого цвета и цены). И со страницы товара он уже в десятый раз копипастит тип профиля, и идёт в поиск. И понимает, что тут должна быть ссылка. На все профили этого типа, этой толщины, этого цвета. Понимает, что это куча страниц для семантики и выдачи, рисует серые прямоугольники, защищает перед клиентом, все довольны, 5-10-20-80 тысяч за анализ/прототип получены и окуплены. С кресла, прошу заметить, не слезал.
          0
          «Ставя себя на место пользователя я нахожу массу не очевидных инсайтов» после этого дальше можно не читать. Без нормальных интервью ничего путного не выйдет, даже не смотря на всю возможную импатию. Алана Купера почитайте, там очень подробно разобран и описан каждый этап проектирования интерфейсов.
            0
            Так читал. ) Ставить себя на место юзеров это самое первое, что можно сделать в плане анализа. Если получится сделать нормальное интервью, то это тоже отлично. Одно не отменяет другого.

          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

          Самое читаемое