Илья!

Я не знаю, что делает это приложение, но интерфейс вышел ужасный и непонятный. Мне кажется, вы не за то переживаете. Давайте разберём самые болезненные проблемы.

Взгляд новичка

При взгляде на показанный вами экран невозможно понять, что происходит и что от меня хотят. Что я вообще делаю на этом экране? Кажется, что записываюсь на приём к врачу. А я уже записался или нет? А почему при записи к терапевту я должен платить за стоматологию? А зачем мне знать, кому сколько уйдёт процентов? А сколько будет стоить услуга?

А может быть, я уже давным давно записался к врачу и это карточка записи внизу, а сверху на меня из четырёх кнопок смотрят какие‑то другие штуки, которые можно делать в приложении? Я не понял.

Главный объект или действие

Хороший дизайн фокусируется на главном полезном действии и содержании. Например, на странице товара в интернет‑магазине главным будет сам товар и его фотографии, а не навигация по магазину, технические характеристики, теги, отзывы и социокнопки. На странице выбора способов оплаты в центре должны стоять их крупные обозначения, а не сопроводительный текст.

Так вот: сейчас на экране из вопроса вывалено сразу столько всего, что невозможно понять, что на нём надо делать. Вроде бы заголовок предлагает заказать какую‑то услугу. А какое отношение к ним имеет карточка внизу? Если никакого, то зачем её тут показывать?

В незнакомом интерфейсе проще разобраться, если он устроен как труба в аквапарке: катишься в одном направлении к конкретной цели и не встречаешь по пути никаких ответвлений. Подобным образом устроено приложение сервиса «Руки» для Айфона.

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

Дальше клиент движется строго в одном направлении: выбирает категорию, объект ремонта, конкретную услугу, отвечает на уточняющие вопросы и оформляет заказ:

По пути на клиента не вываливается внезапно что‑нибудь типа «А вот ваши текущие заказы». Всякие дополнительные штуки живут в отдельных вкладках.

Я рекомендую изучить родные приложения Эпла. Как правило, в плане навигации они устроены очень примитивно и понятно. Да, в них куча промежуточных экранов (одна настройка вайфая чего стоит!), но и заблудиться в них нелегко.

Типографика

На одном экране я насчитал девять стилей текста: что ни строчка, то какой‑нибудь новый кегль или цвет. Выглядит шумно и грязно. У Эпла для Айфонов придуманы отличные гайдлайны и стили, зачем изобретать велосипед?

А ещё некоторые стили используются непоследовательно. Например, серая строчка «Запись на приём» вроде как выполняет роль бирки к плашки ниже. Но набранная тем же стилем строчка «Вы платите» выступает в роли то ли заголовка, то ли какого‑то обобщающего абзаца к списку тегов. Кстати, почему эти штуки оформлены как теги?

✸✸✸

Если говорить о вашем вопросе, то проблемы я не вижу. Всё‑таки «Отменить» живёт в одном блоке со всей записью и явно отделена от остального экрана. Другой вопрос, что сейчас нужно додумываться, что именно я отменю, потому что бирку «Запись на приём» заметить очень сложно и она как раз живёт вне блока.

И ещё сбивает с толку календарь. Почему он стоит ровно напротив «Отменить»? Они как‑то связаны? Что он вообще делает? Если я могу изменить дату и время записи, то почему не давать это сделать где‑то рядом с розовой строчкой наверху? И неплохо было бы явно сказать «Изменить время приёма».

P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

Типографика в вебеИнтерфейсНоситель: программа
Отправить
Поделиться
Запинить

Рекомендуем другие советы