Анализируем интерфейс, созданный в Sketch, с помощью QUANT-UX

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

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

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

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

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

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

Если ваше приложение уже готово, вам, возможно, не понадобится этот шаг. Но если вы хотите проверить, что будет делать пользователь, открыв ваше приложение, давайте поэтапно рассмотрим создание теста.Для понимания, с чем столкнется мой пользователь, я сделал макет с 4мя экранами. Затем я загрузил их в QUANT-UX. Приятно, что плагин позволяет загрузить все рабочие области. Сам плагин можно скачать здесь: https://quant-ux.com/sketch-prototyping.html Во время экспорта вы можете изменять масштаб рабочих областей прежде чем они импортируются в *.qux файл.

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

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

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

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

Так как, QUANT-UX является бета-версией, вы можете тестировать все бесплатно. После входа в учетную запись, кликните “Create a new Prototype”, чтобы создать проект. Интерфейс инструмента прост и понятен. Просто перетащите созданный *.qux файл из рабочей области в браузер. Не буду расписывать здесь все возможности прототипирования и инструментов дизайна в QUANT-UX, но ваш «начальный экран» должен быть определен как начальный экран (звучит странно, но это ваш первый экран в проекте;-) Объединить экраны просто. Это можно сделать, соединяя слои или при помощи горячих клавиш. Большой плюс QUX в том, что вы можете проверять, что вводит ваш тестовый пользователь или соединить экраны с помощью логических элементов. Это очень удобно, когда у вас есть выпадающий список и пользователь должен выбрать из него, чтобы перейти на следующий шаг. В моем случае, очередность шагов выстроена, и я могу запустить свой тест, отправив ссылку моей тестовой группе (можно отправить в любую точку мира). Также, вы можете определить этапы этой задачи, записывая шаги по мере прохождения.

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

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

Вывод

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

Перевод статьи insel.design