Вы сделали экраны приложения в SketchApp и задались вопросом: «Будет ли мой дизайн работать на целевую аудиторию?» Но как «оценить» ваш дизайн, его юзабилити и результат UX? Надеюсь, эта статья даст ответ на этот вопрос.

Дизайн, Тест, Анализ

Недавно, я открыл для себя отличный инструмент QUANT-UX. Несколько дней назад в Sketch появилась бета-версия плагина. QUANT-UX позволяет оценить юзабилити ваших прототипов, макетов, и т. д. Я хочу создать небольшое приложение для магазина женских товаров. Там можно будет купить одежду, обувь и аксессуары. Не вдаваясь в подробности, я всего лишь пытаюсь сделать акцент на быстрый поиск нужного товара.

Целевая аудитория

Для начала, необходимо провести исследование целевой аудитории. В моем случае, это работающие замужние женщины 35−50 лет, с 1−2 детьми, у которых есть опыт покупок с мобильного телефона. Это — небольшой пример, приведенный для этой статьи. В реальном случае, целевая аудитория будет более конкретизирована.

Дизайн макета/прототипа в SketchApp

Если ваше приложение уже готово, вам, возможно, не понадобится этот шаг.

Но если вы хотите проверить, что будет делать пользователь, открыв ваше приложение, давайте поэтапно рассмотрим создание теста. Для понимания, с чем столкнется мой пользователь, я сделал макет с 4мя экранами.

1-NWXVsHNXEC6zkhN7s6mh8A

Затем я загрузил их в QUANT-UX. Приятно, что плагин позволяет загрузить все рабочие области. Сам плагин можно скачать здесь: https://quant-ux.com/sketch-prototyping.html

Во время экспорта вы можете изменять масштаб рабочих областей прежде чем они импортируются в *.qux файл.

Задача пользователя

В моем случае, перед женщинами из моей целевой аудитории, стоит 2 основные задачи:

  • Войти в свою учетную запись
  • Пролистать и купить зеленую обувь, кликнув на нее и добавив в корзину

Создайте проект, загрузите файлы и добавьте описание

Так как, QUANT-UX является бета-версией, вы можете тестировать все бесплатно. После входа в учетную запись, кликните «Create a new Prototype», чтобы создать проект. Интерфейс инструмента прост и понятен.

QUANT-UX создать проект

Просто перетащите созданный *.qux файл из рабочей области в браузер.

.qux

Не буду расписывать здесь все возможности прототипирования и инструментов дизайна в QUANT-UX, но ваш «начальный экран» должен быть определен как начальный экран (звучит странно, но это ваш первый экран в проекте;-)

QUANT-UX ваш начальный экран

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

QUX

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

1-s6sjou1sH-4pl1fSlYnJ4w

Анализ результатов

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

QUANT-UX анализ конкурентов

QUANT-UX метрика

Вывод

Как я и говорил в начале, эта статья рассказывает об анализе UI, созданного в SketchApp. Этот простой пример был приведен только для демонстрации базовых возможностей QUANT-UX. При работе с инструментом, вы убедитесь, что возможности практически безграничны. На моем примере, я показал, как просто и быстро загружать макеты в QUANT-UX. С помощью этого инструмента вы можете протестировать каждый этап вашего дизайна.

Своевременный анализ вашего дизайна позволяет экономить время!