Вы сделали экраны приложения в 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. С помощью этого инструмента вы можете протестировать каждый этап вашего дизайна.

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