Знакомо, правда? Мечтаешь создать невозможное: уникальное, новое, то, чего ещё нет на рынке. И при этом чтобы это было твоё «детище», твой продукт, которым ты будешь гордиться и который станет по-настоящему стоящим и полезным для мира.
Думаешь, анализируешь, ищешь вариант, генерируешь идеи… Но всё не то. И каждый раз сталкиваешься с тем, что это уже кто-то реализовал. Да ещё и так круто, что подступиться страшно.
В этой статье я расскажу о проектировании мобильного приложения "Balance" по методу колеса жизненного баланса — от выбора идеи до кликабельных прототипов и тестирования.
Изучая UI/UX-дизайн, маркетинг и рынок в целом, я пришла к главному выводу: уникальность заключается не в том, чтобы придумать то, чего никто никогда не делал, а в том, чтобы сделать так, как никто другой не делает: удобно, красиво, с душой. И для этого не нужна команда дизайнеров. Только вы, ваше желание и правильные шаги.
1. Первый шаг. Идея исходя из боли
Я тот человек, который постоянно развивается, много читает и слушает подкасты от экспертов. Я принимала участие маркетинговом хакатоне, где нам сказали, что нужно не идею искать, а анализировать проблему, которая бесит, в первую очередь, тебя или твоих знакомых каждый день. Лично я долго жила в режиме гонки: работа, проекты, учеба в институте, домашняя рутина. Я думала, что много делаю, но как оказалось, много делать не равно получать высокие результаты.
Тогда я завела заметку «Боли» и стала записывать всё, что бесит:
нехватка времени, постоянная спешка
нет понимания, как управлять финансами, как построить счастливые отношения, как… И так много мыслей и хаоса в голове
откладывание на потом
И тут я подумала: ведь многие стремятся к балансу в жизни, мечтают о жизни, которую рисуют в голове или которую построили из картинок пинтереста. Я вспомнила, что есть такая методика “Колесо жизненного баланса” — она очень известная, но её инструменты разрознены: бумажные круги, сложные Excel‑таблицы или приложения, в которых непонятный интерфейс и есть только оценка и цели. А людям нужен простой и регулярный способ оценивать баланс, видеть прогресс, а так же иметь доступ к практикам и материалам, которые будут улучшать жизнь. Вот она — боль.
Несколько рекомендаций:
Запишите 3–5 вещей, которые вас раздражают или занимают слишком много времени.
Спросите 5–10 знакомых: «Что вас больше всего раздражает в жизни?»
Выберите боль, которая повторяется чаще всего.
Так вы узнаете текущие боли аудитории, за решение которой люди готовы платить.
2. Шаг второй . Анализ рынка: какие решения уже есть?
Следующий шаг — посмотреть, что уже есть. Обычно на этом месте многие либо вообще пропускают анализ, либо, наоборот, превращают его в бесконечное исследование. Задача понять: где пробелы, что сделано хорошо, а что бесит пользователей в текущих решениях. в этом и заключается анализ рынка
В случае с приложением для баланса я поступила так:
Забила в поиск App Store ключевые слова: «колесо баланса», «жизненный баланс», «цели», “медитации”, “саморазвитие”
Скачала 5 самых популярных приложений. Просто установила и прошла их сценарии как обычный пользователь.
Выписала, что мне нравится, а что раздражает. Например, в одном приложении было красиво, но нельзя было ставить цели. В другом — всё заточено под подписку, а бесплатный функционал слишком урезан. В третьем — интерфейс перегружен и непонятно, куда нажимать.
Почитала отзывы. Это золотая жила! Пользователи часто пишут не только «спасибо», но и «не хватает того-то», «бесит это», «если бы добавили вот это — цены бы не было».
Я завела табличку, куда выписала:
список конкурентов;
их ключевые фичи;
что у них хорошо;
что у них плохо;
какую боль они не закрывают.
В итоге я увидела, что ни одно из существующих приложений не даёт пользователю улучшить свою жизнь. Он оценил, увидел слабые места, попробовал поставить цели и на этом все, приложения не дают никакого материала для развития и улучшения жизни. Везде было только колесо с оценкой, без системы обучения и возможности роста.
Из этого анализа я поняла, что моя идея имеет право на жизнь, и я чётко увидела, на чём надо сфокусироваться, чтобы мой продукт был действительно полезным инструментом.
3. Шаг третий. Понять, для кого мы это делаем: ЦА и пользовательские сценарии.
У нас есть идея, конкурентов мы изучили — можно начинать рисовать. Но я чуть не совершила ту же ошибку, которую допускают начинающие специалисты: начать делать приложение для всех. А для всех — это значит, что ни для кого. Поэтому следующий шаг — понять, кто именно будет пользоваться приложением.
Что такое ЦА и зачем она нужна
Целевая аудитория (ЦА) — это конкретные группы людей, которых объединяет общая боль и схожее поведение. Для моего приложения я задала себе вопросы:
Кому действительно важно держать баланс в жизни?
Кто готов уделять этому время регулярно?
Кто уже пробовал бумажные круги или другие инструменты?
Так же я выписала несколько гипотез:
Молодые специалисты (25–35 лет), которые горят работой, но чувствуют, что другие сферы жизни проседают.
Мамы в декрете, у которых рутина съедает всё время, а хочется развиваться и не терять себя.
Коучи и психологи, которые постоянно в обучениях и стремятся улучшить свой багаж знаний
Нужно понять, для кого ты проектируешь приложение: что это за человек, в каком он состоянии, зачем он открывает приложение и сколько внимания вообще готов ему отдать. Это сильно влияет на дизайн. Если пользователь заходит на ходу, интерфейс должен быть максимально коротким и прямым. Если он приходит решать сложную задачу, ему нужна понятная структура. Без понимания контекста очень легко нарисовать интерфейс, который вроде бы красивый, но в реальном использовании неудобный. Поэтому важно проводить интервью с потенциальной целевой аудиторией: больше ее разузнать, чтобы итоговое приложение решало боли.
4. Шаг четвёртый. Структура: что внутри приложения?
На этом этапе важно понять, а из чего будет состоять приложение: какой функционал, какие в нем возможности, кнопочки, какие решения. Вот вам лайфхак от меня, как сильно не мудрить, а сделать просто и понятно: создаешь гугл таблицу, которую делишь на два столбика. Первый столбик - страница, второй - ожидаемый на ней функционал. Тем самым у тебя появится виденье и понимание вашего проекта.
5. Шаг пятый. Сценарии — место, где приложение собирается в единую понятную систему
Сначала я начала рисовать всё и сразу: онбординг, профиль, настройки, аналитику, тёмную тему, соцсети… Стоп. Я столкнулась с хаосом и непониманием, что где и какая кнопка должна находиться.
В итоге нужно начинать не с экранов, а со сценариев. Берем лист бумаги (или Miro, или Figma) и описываем путь пользователя от открытия приложения до получения ценности. Например, для трекера баланса это выглядит так:
Пользователь открывает приложение.
Видит приветствие и краткое объяснение, зачем это нужно.
Переходит к оценке — выбирает значения по 8 сферам жизни.
Получает визуальное представление и понимает, где у пользователя дисбаланс.
Ставит 1–2 цели на ближайшие 30 дней.
Отмечает выполнение действий и видит прогресс.
Всё. Других экранов в первой версии нет. Ни настроек, ни истории, ни экспорта. Только то, что нужно, чтобы решить главную боль.
На мой взгляд, хороший сценарий — это тот, где путь до результата короткий, предсказуемый и не вызывает лишних решений. Человек не должен разгадывать приложение.
Или рисуем User Flow - это карта шагов, которые совершает пользователь, чтобы решить свою задачу. Без неё вы рискуете нарисовать кучу экранов, которые логически не связаны, либо упустить критические точки. После того как юзер-флоу утверждены, я перехожу к самому вкусному — созданию UI-кита и отрисовке экранов. Но об этом в следующем шаге.
6. Шаг шестой. Проектируем экраны
Когда структура и юзер-флоу готов и чётко понятно, куда и зачем идёт пользователь, я открываю Figma и начинаю с wireframes — прототипов. Это схематичные макеты, где нет цвета, шрифтов, иконок. Только прямоугольники, линии и текст-заглушка. В этот момент не так важно, какие шрифты ты выбрал и насколько аккуратно стоят иконки. Важно чтобы пользователь понял, куда идти дальше, или не идти.
Если на уровне схемы и простых блоков интерфейс уже читается легко, дальше с ним можно работать. Если даже в прототипе всё выглядит запутанно, визуальный дизайн это не спасёт.
Зачем это нужно? На этом этапе важно проверить:
Правильно ли расположены элементы на экране?
Логично ли они сгруппированы?
Не пропущен ли какой-то важный шаг?
Удобно ли будет пользователю перемещаться между экранами?
После того как wireframes готовы, я прохожу по ним мысленно, представляя себя на месте пользователей. Лучше всего попросить кого-то из знакомых посмотреть на прототипы и сказать, понятно ли, куда нажимать, где что находится.
7. Шаг седьмой. Отрисовываем дизайн
Когда wireframes утверждены, я подключаю UI-кит. Теперь экраны обретают цвета, шрифты, иконки, кнопки в разных состояниях.
Что важно сделать на этом этапе:
Выбрать основные цвета. Основной фон — спокойный, акцентный — для кнопок и важных элементов. В моём примере это бежевый и нежно голубой.
Настроить типографику. Заголовки, подзаголовки, основной текст
Добавить иконки. Выбрать набор в едином стиле (хорошая платформа Флатикон) , или отрисовать самостоятельно под ваш стиль приложения.
Проработать состояния. Например, кнопка при нажатии становится темнее, поле ввода при ошибке подсвечивается красным. Лучше сразу рисовать эти варианты, чтобы потом не возвращаться.
Соблюдать сетку. Все отступы, размеры, отступы между элементами кратны 8 пикселям. Это делает интерфейс аккуратным и упрощает передачу в разработку.
8. Шаг восьмой. Прототипирование - оживляем приложение + проводим тестирование
На этом этапе превращаем статичные экраны в кликабельный прототипы. В Figma это делается просто: выбираешь каждый интерактивный элемент (кнопки, карточки, ползунки) и связываешь его с целевым экраном. Так же обязательно добавляй анимацию переходов — например, сдвиг влево или плавное появление.Важно, чтобы прототип имитировал реальное поведение приложения.
После того как прототипирование сделала, я прохожу его сама, как пользователь. Проверяю, все ли переходы работают, всё ли понятно, не забыла ли я обработку ошибок. На этом этапе такжетак же можно проверить визуал приложения и при любых недочётах сразу делать правки.
В тестировании я приглашаю 7-10 человек из моей целевой аудитории, чтобы они попользовались приложением и дали обратную связь. На самом деле тестирование на прототипе стоит в сотни раз дешевле, чем переделка уже написанного кода. Оно позволяет увидеть проблемы, которые вы сами, как автор, никогда не заметите.
Подводя итог, важно сказать: мы прошли путь от идеи до тестирования прототипа. Теперь у нас есть готовые экраны мобильного приложения, которые можно передавать в разработку.
Если вы дочитали до этого места, значит, вы уже готовы начать создавать приложение. Не бойтесь ошибаться, тестируйте, пробуйте, создавайте. И помните: даже самое сложное приложение начинается с простого шага — с бумаги, ручки и с вопроса: «Что меня бесит?».
А если у вас есть вопросы или вы хотите, чтобы я разобрала какой‑то этап подробнее — пишите в комментариях. Сделаем цифровой мир удобнее и красивее.
А для тех, кто хочет протестировать моё приложение, у вас есть возможность заполнить гугл форму для проведения созвона и тестирования: https://docs.google.com/forms/d/e/1FAIpQLSc2l2Noj9DQWk2b0K9d3Y7wZdP2VjtP3FDFFyDBk3_BH44kVg/viewform
До встречи в следующей статье!!!
