Введение
Это история о начале моего пути в индустрии дизайна. Я знаю немного о каждой области дизайна, потому что изучила это в университете. Начала с выяснения, какая специализация интересует меня больше всего. Мне нравится продумывать концепцию того, как продукт работает с пользователями, делать интерфейс удобным, анализировать, тестировать и работать над визуальной частью дизайна. Итак, я пришла к выводу, что хочу быть UX/UI-дизайнером.
Поэтому я нашла IT-школу и начала учиться. Ранее читала много книг о дизайне UX/UI, но у меня не было конкретной практики, и не было достаточно знаний об инструментах, которые могли бы помочь в достижении целей. Я копалась в новой профессии дома, смотрела видео на YouTube, как стать дизайнером, читала книги и статьи, в частности про мобильный дизайн.
Почему этот проект?
В начале обучения наш учитель сказал мне, чтобы я выбрала интересную тему для проекта, которую должна создать, используя инструменты дизайна, выученные на курсах UX UI. Я взяла популярную тему, связанную со здоровым образом жизни. Это был дневник питания. Я назвала его Healthy Body. Просматривая все темы обучения, постепенно создала дизайн приложения собственное приложение.
Сначала изучила основные аспекты дизайна пользовательского опыта, основные подходы к дизайну и методологии. Для создания своего учебного проекта выбрала подход, который называется «Дизайн-мышление». Это означает, что мне нужно решить проблемы конечного пользователя с качественными исследованиями на первом этапе процесса. Моей целью было создать приложение, которое могло бы решать проблемы пользователей. Во время проектирования использовала много инструментов, таких как: холст продукта, персонажи, сценарии и другие.
Бизнес-исследование
Для хорошо разработанного UX-дизайна следовало провести бизнес-исследование, которое включает в себя описание продукта и интервью.
Product canvas — инструмент, который помог мне получить общую картину идеи проекта. Вы можете увидеть это ниже на картинке. Содержит информацию о конечных пользователях, их проблемах, основных конкурентных преимуществах и конкурентах. С тех пор, как я создавала приложение для дневника питания, поисследовала, что мои конечные пользователи имеют огромные проблемы с планированием своего питания и обычно забывают важные вещи. Поэтому приложение «Healthy Body» поможет людям не забыть купить продукты или выполнить некоторые действия из своего графика с напоминаниями! Кроме того, это приложение будет иметь другие полезные функции.
Рекомендуем курс по теме
Исследование пользователей
На следующем этапе проектирования я должна была выяснить, кто будет использовать приложение. Поэтому создала вымышленного персонажа, который представляет определенную группу пользователей, которая может использовать продукт аналогичным образом. Вы можете увидеть это описание ниже. Это называется Proto Persona.
Опрос
Чтобы получить информацию для качественного исследования, нужно было подготовить интервью с конечными пользователями и провести его. Вопросы задаются для получения информации о потребностях, целях, болевых точках и поведении пользователя.
Позже я подготовила 15 вопросов своим друзьям и провела собеседование с теми из них, кто может стать потенциальным пользователем приложения. У меня были критические вопросы как эти, избегая комплиментов и информации о моей идее проекта:
- Существуют ли проблемы со здоровьем? Они связаны с вашим питанием?
- Вы пытаетесь исправить эти проблемы и почему?
- Как вы пытаетесь исправить свои проблемы сейчас?
- А может, вы пытались решить эти проблемы раньше?
- Есть ли у вас какие-либо инструменты, которые помогут вам обеспечить здоровый образ жизни?
- Сколько это стоит?
Проведя собеседование с друзьями, я записала аудио на свой мобильный. Проанализировала их, а затем уточнила шаблон личности на основе информации, полученной при интервью.
Создание пользовательского сценария
Завершающим этапом для исследования пользователей было построение пользовательского сценария. Это инструмент, который представляет собой набор действий, предпринимаемых конечным пользователем для того, чтобы использовать продукт для достижения цели. Для удобства хранения собранной информации выбрала инструмент под названием RealTime Board. Это помогло увидеть всю мою работу и создать сценарий для проекта, используя его элементы.
Я создала два типа сценария: как есть и как будет.
Это только часть сценария, который описывает текущий пользовательский опыт, основанный на интервью. Он показывает нам, как пользователи решают свои проблемы с помощью упорядоченных действий.
Другой тип интервью под названием To Be описывает, как пользователи могут достичь своих целей с помощью функций моего приложения.
Я поняла, что это будет более удобно и займет меньше времени для достижения целей пользователя.
Информационная архитектура — от сценария к эскизам
Следующей стадией было создание Низких и Высокоточных Каркасов. Во-первых, я использовала только листки бумаги, чтобы понять, какие основные элементы должны быть на экране приложения. А затем создала простые наброски с помощью графических инструментов, таких как photoshop и paint.
Перед созданием каркасов низкого качества нужно было создать карту сайта и создать Tree Test с помощью optimworkshop.com, который поможет понять, хорошо ли спланирована навигация в приложении или ее нужно скорректировать.
Во-первых, карта сайта помогает визуально обозначить, как разные страницы и контент связаны друг с другом. Я решила, какой контент и функциональность должно содержать приложение. Готовая карта сайта имеет матричную структуру.
Так я могу понять, хорошо ли выполнена навигация по карте сайта для пользователей. А потом подумала, что смогу провести тестирование дерева со своими конечными пользователями. Для этого построила карту сайта на optimworkshop.com, и пользователи нашли в дереве места, где можно выполнить определенные задачи. Например, некоторые из вопросов были такими:
- Как вы можете изменить свою цель на вес?
- Где можно найти рецепт завтрака?
Результат проведения тестирования дерева вы можете увидеть ниже.
Постепенно используя инструмент Balsamiq, я создала каркасы с низким качеством воспроизведения и отредактировала их в Photoshop. Это было моей основой для создания красивого удобного интерфейса для приложения Healthy Body.
UI-часть проектирования
Для создания красочного дизайна для моего приложения у меня должно быть вдохновение в текущей сфере. Поэтому я создала Mood Board, который помог понять, какие цвета и картинки я буду использовать в интерфейсе приложения.
Рекомендуем курс по теме
Я решила использовать много ярких картинок на темном фоне. Потому что, когда использую такой метод, все наше внимание будет сосредоточено на светлых текстах и рисунках. Для платформы Android выбрала семейство шрифтов Roboto, потому что оно родное.
Я много думала о заставке, которая обычно появляется во время запуска игры или программы. Это графический элемент управления, состоящий из окна, содержащего изображение, логотип и слоган. Используя темный градиент, я фокусирую пользователей на логотипе. Вот:
Для домашнего экрана, который люди обычно видят после загрузки приложения, использовала интерактивные карточки и панель навигации с пятью значками. Следуя тенденциям современного дизайна, я не использовала меню бургеров, потому что все функции приложения могут решать задачи пользователей без него. Для облегчения просмотра информации разработала разбивку того, что пользователи употребляют на уровне калорий и макроэлементов, и сколько воды им нужно пить в конце дня. Эта таблица со всеми данными постоянно сверху.
Также хочу добавить, что приложение было разработано для платформы Android xxhdpi.
Поэтому при создании визуальной части интерфейса использовала официальное руководство по android от Material Design. Следить за этой информацией было легко, потому что были измерения всех компонентов Android.
Это заняло бы слишком много места, если поделюсь фотографиями всех своих экранов. Поэтому я собираюсь показать вам только некоторые из них, но записала видео о прототипах экранов приложения Healthy Body. Для создания прототипа моего продукта использовала InvisionApp.
Промо-сайт
Чтобы помочь в продвижении приложения Healthy Body, я разработала промо-сайт. Он имеет информацию о фьючерсах основных приложений. Он имеет четыре раздела.
Юзабилити-тестирование
Создав интерактивный прототип приложения, я должна провести исследование пользователей, которое фокусируется на понимании поведения пользователя, потребностей и мотивации с помощью методов наблюдений, анализа задач и других методологий обратной связи. Пользовательское исследование включает качественное исследование и количественный анализ. Качественные методы исследования отвечают на вопросы, с какими проблемами сталкиваются пользователи, используя решение, почему эти проблемы возникают или как их решить. Для своего проекта выбрала метод юзабилити-тестирования, чтобы увидеть, насколько легко использовать мое приложение с реальными пользователями. Подготовила список заданий для них, чтобы увидеть, где они сталкиваются с проблемами и испытывают замешательство. Затем провела умеренное личное тестирование с моим другом. Например, некоторые из вопросов:
- Как вы могли проверить выпитые стаканы воды в этом приложении?
- Какие изменения вы можете увидеть после этого?
- Каким образом вы можете добавить новый рецепт в базу приложения?
- Как вы могли бы отправить кому-то свой список продуктов, используя Viber?
После этого я выяснила некоторые проблемы и некоторые моменты, в которых необходимо было изменить дизайн:
- Некоторые значки не были понятны пользователям
- Некоторые кнопки были размещены неправильно
- Цвет значков навигации неправильно отражал местоположение пользователя
Значок «Назад» не следует размещать на экране второго этапа после переключения с панели навигации в соответствии с требованиями Material Design.
Информация о цели пользователя была показана дважды на двух разных экранах.
Далее исправила все проблемы по результатам теста и записала видео с измененными экранами. И собираюсь показать вам его:
Другой тип исследования пользователей — это метод количественного исследования, который отвечает на вопросы о том, сколько и с какими типами проблем сталкиваются пользователи. Я не проводила его, потому что у не было возможности собрать много пользователей. Но, размышляя о том, как гипотетически определить успех, я бы выделила следующие показатели, такие как счастье, принятие, удержание и вовлеченность. Верю, что еще будет возможность проводить A/B-тестирование и аналитику приложений.
Рекомендуем публикацию по теме
В заключение
В условиях современного и напряженного образа жизни здоровье и фитнес часто уступают суровым условиям повседневной жизни. Основная проблема людей в том, что большинство из них просто не знают, как и с чего начать или забывают о своих запланированных графиках.
В нашей повседневной жизни мы все используем множество продуктов по разным причинам, будь то работа, развлечения, общение или знакомства. Глядя на вещи критически, думая о том, как могу улучшить опыт для большинства, я разработала приложение Healthy Body, которое могло бы стать инструментом, позволяющим пользователям быстро и легко сделать свою жизнь здоровой.
Тем не менее этот проект был тренировочным в моем дизайнерском опыте, я надеюсь, он понравится всем.
Особая благодарность Юлии Фок, Юлии Сариевой и всем, кто поддерживал меня и помогал, пока я работала над этим проектом.
Примечание: а если ваш ребенок интересуется дизайном, курс веб-дизайн для детей будет полезен!
