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

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

Все функции сохранены. Можно по-прежнему искать, смотреть специальности, записываться к врачу и писать в клинику.

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

Черновик джуниора

Исправлено

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

Справа тот же приём самый крупный блок: врач, дата, время и кнопка начала видеозвонка. Предложение с главного экрана ушло, потому что скидка на первый визит нужна тем, кто ещё не записывался, а этот человек уже записан.

Правка 1: ставим ближайший приём первым

До

После

«Запишитесь на первый приём сейчас!» со скидкой 20% на первую видеоконсультацию, кнопка «Записаться», ссылка «Подробнее» и точки карусели, против карточки «Ближайший приём» с доктором Сарой Ли, кардиологом, кнопкой видеозвонка, а дата и время в одной строке.

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

Исправление делает приём героем экрана. Лицо и имя врача говорят, кто это, дата и время стоят в одной строке, а иконка видео это подключение одним касанием. Баннер приходится закрывать, а карточкой с кнопкой пользуются.

Дата тоже стала короче и понятнее. «Tue, Oct 28, 2026 • 10:30 AM - 11:00 AM» превратилось в «Tue, 28 Oct» и «10:30 AM»: год ни у кого не вызывает сомнений, а время окончания редко нужно, чтобы решить, приходить или нет.

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

Правка 2: четыре специальности, один цвет

До

После

Восемь круглых иконок восьми цветов: Cardiology, Dentist, Eye Care, Pulmonology, Neurology, Orthopedic, Pediatrics и More, против четырёх белых плиток с бирюзовыми иконками: Cardio, Dental, Eyes и More.

Восемь цветов на восьми иконках дают глазу восемь мест, где остановиться, и ни одной причины это делать. Цвет это сигнал, а здесь он ничего не говорит: красное сердце не срочнее фиолетового глаза.

Исправление оставляет один цвет, фирменный бирюзовый, и цвет снова что-то значит. Подписи стали короче («Cardio», «Dental», «Eyes»), так что каждая умещается в одну строку читаемого размера. А показаны только четыре, плюс плитка «More», потому что тот, кому нужна редкая специальность, воспользуется поиском, который находится прямо выше.

Правка 3: карточка врача как строка

До

После

Одна карточка с фото, именем, «Cardiologist | City Heart Clinic», пятью звёздами, 4.8 (120 отзывов), «Fee: $50», плашкой «Доступен сегодня», кнопкой «Записаться» и сердечком, а следующая карточка обрезана, против двух строк с маленьким фото, именем, «Cardiologist · 1.2 km» и рейтингом 4.9 (212).

В карточке черновика девять единиц информации и два действия. Каждая по отдельности разумна. Вместе они превращают карточку в форму, которую приходится сканировать строка за строкой, а кнопка «Записаться» на каждой карточке превращает экран просмотра в торговый зал.

Исправление оставляет три строки: имя, затем специальность и расстояние, которое решает, сможете ли вы реально добраться, затем один рейтинг с числом отзывов. Цена, доступность и кнопка записи переехали на страницу самого врача, где есть место всё объяснить. Шеврон говорит «нажмите, чтобы открыть».

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

Правка 4: одна иконка в шапке

До

После

«Привет, Лео!» с вопросом «Как вы себя чувствуете сегодня?» и иконками поиска, колокольчика и чата, против зелёного аватара с инициалами, «Доброе утро, Leo Martins» и одного колокольчика с красной точкой.

В шапке черновика три иконки, и две из них повторы. Колокольчик в шапке и вкладка «Уведомления» ведут в одно место, как и иконка чата с вкладкой «Чат». Когда две двери ведут в одну комнату, люди гадают, какая из них настоящая.

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

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

• Четыре вкладки, а не пять. «Уведомления» ушли из панели вкладок, потому что колокольчик уже их закрывает. «Чат» стал «Сообщениями», так называют большинство входящих.
• Аватар с инициалами. Сплошной бирюзовый круг с LM показывает, чей это аккаунт, так же, как в любом другом приложении.
• Один отступ. В черновике 14 слева и 12 справа. В исправлении 20 с обеих сторон в каждой строке, а промежутки равны 8, 12, 14 и 20.
• Простое приветствие. «Привет, Лео! Как вы себя чувствуете сегодня?» задавало вопрос, на который экран не мог ответить. «Доброе утро, Leo Martins» не задаёт.
• Никакой карусели с предложениями. У баннера было три точки и вторая ссылка рядом с кнопкой. Исправление убирает предложение с этого экрана и оставляет одно чёткое действие в герое.

Проверьте своё медицинское приложение

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

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

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

Главный экран записи к врачу, до и после

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

Открыть в Figma

FAQ

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

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

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

Около четырёх, плюс плитка «More». Те, кто ищет что-то редкое, пользуются поиском, так что длинная сетка из восьми и более цветных иконок только добавляет шума.

Что должна показывать карточка врача в медицинском приложении?

Имя, специальность, как далеко врач и один рейтинг с числом отзывов. Цена, доступность и кнопка записи место на странице врача.

Нужен ли медицинскому приложению рекламный баннер на главном экране?

Не над ближайшим приёмом. Предложение на первый визит подходит тем, кто ещё не записывался, а вернувшиеся пациенты пришли за другим.

Сколько вкладок нужно медицинскому приложению?

Четырёх достаточно: Главная, Приёмы, Сообщения и Профиль. Уведомления могут жить в шапке в виде колокольчика с точкой.

Источники

• Оба экрана наши собственные, спроектированы и измерены в Figma.
• Фото с Unsplash: Jonathan Borba, Bruno Rodrigues и vaibhav vivian, по лицензии Unsplash.
• Впервые опубликовано как карусель в App Brainy.