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

По-любому нужно проверять! Почему???

Здесь есть один момент, который важен лично для меня. Оценка проекта в первую очередь должна помочь именно развить и улучшить текущее решение, а не обесценить результат. Я всегда напоминаю своей команде, что оценочное состояние — это весьма субъективное мнение и действует оно на всех разрушительно. В любом проекте всегда можно найти, что улучшить.

Требования vs Вкусовщина

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

План действий с примерами

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

  • бизнес-цель;
  • визуальная составляющая проекта;
  • понимание ожиданий целевой аудитории.

Для большей наглядности можно открыть свой проект в соседней вкладке и попутно проверять. А ещё лучше собрать команду и обсудить со всеми участниками.

Бизнес-цель

  • О чём речь?

Соответствует ли основной сценарий проекта вашему бизнесу? Какое ключевое действие мы ожидаем от пользователя?

Как вы думаете, о чём вот этот сервис?

Сайт Google Fonts

Это сервис Google Fons для подбора шрифтов. Я экспериментировал на знакомых и друзьях! Никто не мог ответить, что это за сайт и зачем он. Если мы уберём название, тогда вообще непонятно, что это такое. Это самая главная проблема. Понятно, что данный сервис ориентирован на профессиональную аудитория, но здесь точно не хватает плашки или строки «Выбери свой шрифт», чтобы было ясно, о чём речь.

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

Портал РЭЦ

  • Ключевой сценарий и функционал

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

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

Яндекс.Маркет ZephyrLab
Пример хорошего ключевого сценария

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

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

Уверен, что команда Outlook работает над собой. Воспринимайте скриншот как пример плохого ключевого сценария.

Я выделю два ключевых сценария. Первый, разобрать мои «Входящие» и «Непрочитанные». Вижу выделенные блоки и вроде всё непрочитанное отмечено — хорошая реализация, вроде всё понятно. Но возникает вопрос, зачем столько инструментов выше? Это точно не ключевой функционал? Второй сценарий, создать новое письмо. Тут вы сами попробуйте что-то найти)

  • Соответствие заголовков и изображений по смыслу

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

Визуальные свойства качества

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

  • Визуализация загрузки сетки и контента. 

В первую очередь этот пункт про работоспособность сайта. Время загрузки информационных проектов должно составлять 2 — 3 секунды. Для коммерческих проектов — 0,5 — 1,5 секунды. Проверить скорость загрузки своих сайтов можно на PageSpeed Insights от Google. Это безопасная и бесплатная программа.

Бывает так, что сервис загружается ооооооочень долго, потому что это сложный медийный проект или там много кода. Тут нужно задуматься как это оптимизировать. Есть множество приёмов. Например, самое примитивное, можно придумать красивый прелоадер. Например, как тут.

  • Мобильные устройства

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

  • Шрифты: размеры, очертания и отступы

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

Если вы контролируете все этапы производства, то во время сборки сайта проверяйте, какие именно шрифты использовали при верстке разработчики. Это то, что заложил дизайнер? Иначе это может привести к тотальным проблемам.

Текст должен легко читаться. В примере мы прочтём Make change и всё. А это главная страница сайта…

Invstr

 

  • Зоопарк цветов

Мне везло и каких-то особенно кислотные проекты не попадались, к счастью. Только представьте, интерфейс системы, где при переходе из одного раздела в другой стилистика меняется радикально: плашки то синие, то зелёные, то почему-то фиолетовые. Видимо сделано было так, чтобы пользователь не расслаблялся.

Много кислотных цветов www.interactivitydigital.com
  • Корректность и эффективность анимации

Тут главное не перестараться. Большенство пользователей крайне раздражает, когда всё мелькает. А в некоторых проектах анимации вообще не должно быть или она может быть минимальная, на уровне иконок или определенных объектов. Также тут необходимо учитывать, что на более старых устройствах анимация вообще может привести к зависанию браузера. В таких случаях необходимо предусмотреть распознавание возможностей устройства и сделать статичную версию для более старой техники.

Соответствие ожиданиям целевой аудитории

  • Потребности ЦА

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

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

  • Основные типы ЦА

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

  • Запреты/ раздражители ЦА

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

Итого

Такая проверка в первую очередь помогает синхронизироваться с требованиями, ожиданиями и реальностью. А чтобы было удобней, мы сделали мини шпаргалку — чек-лист для проведения домашнего аудита. Если хотите воспользоваться нашей шпаргалкой, то отправляйте пустое письмо с темой «Что там понаделали?» на hello@zephyrlab.ru.

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

Узнавайте последние новости студии в нашем telegram-канале: Зефир и мир

Хочу подписаться

Получайте последние новости первыми