Дизайн-разнос

В этой статье покажу реально существующий интерфейс по оформлению ипотеки, расскажу что с ним не так и как его можно улучшить.

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

Как улучшить

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

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

Чипсины — это элемент интерфейса, который подразумевает быстрое распознавание информации и быстрый выбор. Текст в таком элементе должен быть коротким.

Если все чипсины вдруг станут с длинным текстом внутри, то это превратиться в нечитабельную кашицу 💩

Как улучшить

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

Почему у верхних чипсин нет лейбла, а у чипсин в нижнем ряду есть?

Как улучшить

Проверить, можно ли отказаться от лейбла и удалить его. А если лейбл нужен (что вряд ли), то его можно перенести наверх, чтобы элементы перестали визуально съезжать.

Зачем добавлять НЕ обязательные поля в анкету, чтобы потом 9/10 полей помечать красной звездочкой?

Как улучшить

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

У меня нет комментариев к этому пункту, кроме: «как можно было выпустить ЭТО в прод?»

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

Есть гипотеза, что ребята хотели отделить главные условия от второстепенных. Но если так, то контраст не достаточно сильный.

Как улучшить

Сделать элементы одинаковыми, если они равнозначны между собой. А если нет, то добавить бОльший контраст, например, увеличить шрифт в 2-4 раза у первых трех элементов.

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

Как улучшить

Блок будет гармоничнее, если отступы будут одинаковыми между всеми элементами блока.

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