Мой процесс разработки макетов приложений для ухода за животными состоял из 5 шагов:

1. Исследование конкурентов и тенденций

2. Интервью с пользователями — сопереживание

3. Идея

4. Каркас из проволоки

5. Мокапы

Шаг 1. Исследование

Сначала я взглянул на некоторые приложения/приложения конкурентов, тематически похожие на то, что я пытался создать.

К ним относятся:

Дафни

Флуферы

WWF вместе

Заметки о Дафни:

• 5 вешалок для шляп, информация отсортирована по профилю питомца по категориям
• Короткая ориентация с возможностью пропуска
• Симпатичные, простые иллюстрации (в настоящее время UX-тренд)
• Содержит только основную информацию и 3 раздела (компромисс между гибкостью и удобством использования).
• Приложение в стиле Habit Tracker, может отмечать задачи и устанавливать напоминания о встречах
• Может хранить медицинские записи, прикрепляя файлы
• Использует смещение контура для дружелюбного внешнего вида
• Вложение используется для разделения различных разделов информации на белом фоне.

Примечания к флуферам:

• Отображение галереи различных домашних животных в стиле Pinterest
• Короткая ориентация с возможностью пропуска
• Назначает даты прививок и визитов
• Пиктограммы для разных разделов
• 5 вешалок для головных уборов, разделенных на секции по категориям
• Гештальт-принцип подобия используется, чтобы помочь пользователям понять, что все разделы значков имеют сходную функцию.

Заметки о WWF Вместе:

• Чисто образовательное приложение
• Использует полноэкранные изображения за белым текстом
• Включает изображения/графику для большей глубины обработки
• Использует двухмерное наслоение, чтобы не перегружать пользователей отображением разных фактов на разных экранах.
• Использует сопоставление, чтобы помочь пользователям понять, в каком направлении они будут двигаться при смахивании.

Список UX-тенденций 2023 года:

1. Большой размер шрифта и эффект присутствия

Использование всего экрана с графикой и заголовком — это тенденция, используемая Apple и другими крупными брендами для отображения информации в визуально впечатляющем виде. Я могу использовать эту тенденцию, чтобы выделить определенные разделы моего приложения.

2. Доступный дизайн

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

3. Рассказ о данных

Подобно приложению WWF, которое обсуждалось ранее, многие приложения и веб-сайты используют Data Storytelling, чтобы сделать изучение информации более привлекательной задачей. Используя изображения, графику и анимацию, я могу создать дизайн, который заставит пользователей почувствовать, что процесс обучения интерактивен и доставляет удовольствие.

4. Минимализм

Минимализм — это тенденция, которая уже давно стала популярной. Держитесь подальше от Horror Vacui, чтобы мой дизайн не выглядел загроможденным и сложным для навигации.

5. Геометрическая структура

Использование интересных геометрических форм вместо использования только прямоугольников поможет моему дизайну выделиться как более креативный и живой, оставаясь при этом чистым и современным. Я вижу, что эта тенденция используется в моем дизайне Firefox Photon как что-то, что делает его профессиональным, но также и забавным.

Шаг 2. Интервью с пользователями и сопереживание

Чтобы узнать свою целевую аудиторию, я провела интервью и опрос. Из собранных данных я создал несколько персонажей пользователей.

Персонажи:

Шаг 3. Идея

Имея в виду мою целевую аудиторию, я начал придумывать экраны, которые соответствовали бы их потребностям.

Эскизы идей:

Шаг 4. Каркас из проволоки

Всего я сделал 3 разных концепции каркаса из проволоки. Концепция 1 была сосредоточена на принятии домашних животных, Концепция 2 была сосредоточена на эстетике системы дизайна Photon, а Концепция 3 была сосредоточена на доступности для людей со слабым зрением или дальтонизмом.

Концепция 1 (дизайн контекста):

Концепция 2 (Система фотонного дизайна):

Концепция 3. Доступность

Шаг 5. Мокапы

Вот мои последние концепты!

Обоснование концепции 1. Простая и ориентированная на образ концепция 1 была посвящена рекламе хороших качеств и важной информации о животном, предназначенном для усыновления. Я использовал Data Storytelling и 2D-расслоение, чтобы создать интересный и понятный дизайн.

Концепция 2 Обоснование: Эта концепция сосредоточена на трех различных функциях — поиске ближайших услуг, отслеживании медицинских карт и сравнении товаров для животных. Эстетика была вдохновлена ​​​​руководством по бренду Mozilla Firefox, поэтому используются яркие цвета и одобренные Mozilla шрифты.

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