x
 
Антон Ангел
25 июля 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Илья, добрый день!

Сегодня третий день, как я начал учиться дизайну. Чтобы, помимо теории, набить руку и освоиться в Скетче, участвую в Daily UI. Сегодняшнее задание — Credit Card Checkout. Укажите на ошибки, пожалуйста.

Большое спасибо!


Это лучше, чем большинство форм в интернете — отличный результат для третьего дня.

Но давайте посмотрим, что можно ещё улучшить.

Элементы управления

Переключалка суммы пожертвования не похожа на радиопереключалку, скорее это просто четыре независимые кнопки. Выбрать из неё можно только что-то одно, и это должно быть показано графически. Лучше соединить все варианты в один горизонтальный элемент, как показан в совете о теории близости. Ещё есть проблема с логикой: выбранный (то есть ненажимаемый) элемент выглядит точно так же, как главная кнопка формы.

Язык и синтаксис

Вместо «Выберите сумму пожертвования» — «Сумма пожертвования» или даже просто «Сумма». Мы подписываем элементы формы, а не велим ими воспользоваться. Можно представить интерфейс с пошаговым руководством в повелительном наклонении, но тогда нужно всё приводить к такой форме, а не только одну подпись.

Заголовок «Имя владельца» не очень удачен: кто-то впишет только имя, кто-то напишет по-русски. Более надёжно — «Имя на карте».

Вёрстка

Синтаксис элементов интерфейса

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

Верхняя граница формы неприятно почти-совпадает с линией горизонта.

Cтрочка «Выберите сумму пожертвования» выглядит как заголовок формы, а не подпись первого элемента. При этом подпись чекбокса ниже — второго элемента формы — набран меньшим кеглем. Нужно унифицировать. Элемент выбора суммы пожертвования висит ровно посередине между его подписью и чекбоксом — надо к чему-то отнести.

В сумме 1000 ₽ не нужен пробел между классами. А вообще, когда такой пробел используете, его надо делать раза в два меньше, чем обычный пробел между словами.

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

Текст поверх фотографии

Сейчас поля слева и справа от полей ввода на передней стороне карты почти равны, но не совсем.

Из-за серого фона и текста, поле CVV кажется отключенным.

Почти, но не совсем
Интерфейс и информация — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Комментарии

Игорь Скляревский
25 июля 2017

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

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

Красиво, конечно, что карта с логотипом и фирменным цветом банка, но в жизни так вряд ли будет. Несмотря на то, что есть базы для определения банка по BIN (первые шесть цифр), вряд ли вы станете заморачиваться с заготовкой под это дело базы логотипов и цветов.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

2 7 9




Недавно всплыло

Выбранные элементы списка, как не забывать принципы из советов бюро и когда нужен логотип 1 1 1 Как сделать, чтобы публикация выделялась в ленте: композиция, исправление дефектов, цвет 1