Дизайн приложения для медитации: редизайн главного экрана, до и после

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

Весь экран, до и после

Джуниорский черновик

Исправлено

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

Посчитайте, что глазу приходится сортировать с каждой стороны. Черновик показывает пять цветов настроения и четыре цвета плиток, плюс персиковый блок и фото с текстом сверху, и всё это до того, как кто-то прочитал хоть слово. В исправленном экране один фирменный шалфейный #4F7A5A и персиковое пламя #E0784A, оставленное для единственной вещи, которая означает серию.

Правка 1: задайте вопрос о настроении один раз и одним цветом

До

После

Пять цветных кружков со словом под каждым при одном вопросе, против пяти тихих лиц и одного выбранного ответа.

Проверка настроения это вопрос с пятью ответами. В черновике у каждого ответа свой цвет, поэтому ещё до выбора ряд выглядит уже отвеченным, и не видно, что выбрано. Цвет работает как украшение, а не как информация.

Исправление рисует все пять лиц одним серым и закрашивает только выбранное фирменным зелёным, а его слово выносит в метку рядом с вопросом: «Спокойно». Теперь цвет означает ровно одно: это текущее состояние. Слов под лицами в ряду больше нет, потому что метка один раз называет слово выбранного лица.

Принцип переносится на любое приложение с оценкой или выбором: если каждый вариант цветной, цвет ничего не говорит пользователю. Держите варианты нейтральными, а акцент тратьте на выбор.

Правка 2: фото сверху, слова под ним

До

После

Белые слова и четыре крошечных тега на бледном фото пляжа, против фото с заголовком, временем и одной кнопкой play под ним.

Черновик ставит белый заголовок в 17 px и четыре тега по 8 px прямо на яркий песок и море. Белое на бледном фото это самая слабая пара из возможных, а теги самый мелкий текст на экране ровно в тот момент, когда пользователь решает, что включить. Текст на фото к тому же меняется с каждым фото: в день, когда придёт более тёмный снимок, макет прочитается иначе.

Исправление переносит все слова на карточку, под фото, тёмным текстом на однотонной поверхности. Фото теперь просто фото. Четыре тега сжимаются в одну строку меты, «Daily Calm, 10 мин, Сон», а пилюля Play в углу становится круглой кнопкой в конце строки, там, где уже лежит большой палец. У той же сессии теперь один заголовок, одна длительность и одно действие.

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

Правка 3: две карточки с фото вместо четырёх цветных плиток

До

После

Четыре пастельные плитки с иконкой в каждой, против двух карточек с фото, которые показывают, каково это, пройти сессию.

Плитки ни на что не похожи. Фиолетовый квадрат с луной говорит «сон» так же плоско, как синий квадрат с лёгкими говорит «дыши», а четыре цвета стоят экрану его спокойствия. Фото показывают суть: ночное небо для сессии сна, туманное озеро для утренней. В приложении для медитации картинка часть продукта, потому что она задаёт настроение раньше, чем звук.

Исправленный ряд показывает две карточки, и каждая несёт название, длину и категорию в двух строках. Две карточки оставляют каждому фото достаточную ширину, чтобы его можно было рассмотреть. Плиток Breathe и Focus Music на этом экране нет, а раздел переименован из «Recommended For You» в «Для вас», потому что список на главном экране и так для вас.

Правка 4: три числа вместо абзаца

До

После

Предложение, в котором зарыты те же три факта, против тех же трёх фактов в виде чисел с подписями.

Обе версии говорят одно и то же: семь дней подряд, в сумме два часа тридцать пять минут, двадцать три сессии. Черновик упаковывает их в одно предложение с двумя восклицательными знаками и «пока, потрясающе!». Чтобы найти нужное число, приходится прочитать всё предложение, а число нельзя сравнить с одного взгляда, когда оно живёт внутри оборота.

Исправление даёт каждому факту свою колонку: крупное число и маленькая подпись. Пламя, персиковое, стоит рядом с серией, потому что серия это число, которое заставляет людей вернуться завтра. Теперь пользователь проверяет прогресс за то время, которое нужно, чтобы просто посмотреть.

Мелкие правки

• Четыре вкладки, а не пять. Today, Explore, Sleep и Profile заменяют Home, Sleep, Meditate, Music и Profile. У Meditate и Music больше нет собственных вкладок.
• Один отступ. В черновике было 14 px слева и 12 px справа. В исправлении 20 px с обеих сторон и 14 px между карточками.
• Чище приветствие. «Как вы себя чувствуете сегодня???» ушло из шапки, потому что карточка настроения спрашивает это один раз и с одним вопросительным знаком.
• Одно действие в шапке. Колокольчик остаётся и получает маленькую точку. Аватар из шапки убран, а Profile по-прежнему вкладка.
• Настоящая типографская шкала. Текст перешёл от 8-18 px к размерам iOS 11-28 pt, так что самый мелкий текст читается, а заголовок явно заголовок.
• Тихие ссылки разделов. «View all >» стало «Все», одни и те же слова в каждом разделе.

Аудит вашего приложения про самочувствие

Скачайте файл Figma

В бесплатном файле оба экрана как компоненты, каждая правка в виде пары до и после, переменные цветов и текстовые стили iOS.

Бесплатный файл Figma

Главный экран приложения для медитации, до и после

Оба экрана и каждая исправленная часть как компоненты Figma. Бесплатно, только просмотр, скопируйте себе в черновики.

Открыть в Figma

FAQ

Что должен показывать главный экран приложения для медитации?

Приветствие, один вопрос о настроении, сегодняшнюю сессию как одну карточку с фото и одной кнопкой play, короткий ряд предложений и прогресс пользователя. Всё остальное может подождать в одном касании от главного экрана.

Как должна выглядеть проверка настроения в приложении?

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

Можно ли в приложении класть текст поверх фото?

Только когда текст лежит на контролируемой области, например на тёмной подложке, и проходит минимум контраста. На яркое, меняющееся фото лучше не класть слова, а поставить их на однотонную поверхность под изображением.

Как показывать серии и прогресс в приложении про самочувствие?

Несколькими числами с подписями: дней подряд, общее время и сессии. Серия заслуживает небольшого акцента, например пламени. Ободряющее предложение не заменяет число.

Сколько вкладок должно быть в приложении для медитации?

Четыре или пять. Если две вкладки ведут в одну библиотеку, объедините их. В исправленном экране вкладок стало четыре вместо пяти.

Источники

• Оба экрана наши собственные, спроектированы и измерены в Figma. Пользователь, сессии и числа придуманы для упражнения.
• Фото с Pexels: Татьяна Танатова, olia danilevich, Felipe Barboza и Jean-Daniel Francoeur.
• Apple Human Interface Guidelines: Typography, размеры текста iOS, использованные в исправленном экране.
• W3C: Web Content Accessibility Guidelines 2.2, Contrast (Minimum), про текст на изображениях и фонах.
• Впервые опубликовано как карусель в App Brainy.