Войти в систему
Войти с помощью соц. сетей:
Кнопка должна выглядеть как кнопка. Пожалуй, это главное правило, так как пользователь должен без сомнений понимать, на какие элементы страницы можно нажать и что после этого произойдет.
Текст на кнопках не должен вводить в заблуждение. Например, в форме удаления вместо вариантов «Да» и «Отмена» лучше предложить «Удалить» и «Отмена». Еще несколько примеров: не «Подтвердить», а «Зарегистрироваться», «Войти», «Создать (заказ)», «Оплатить» и т. д.
У кнопки должно быть несколько состояний. Помимо активного и неактивного, заранее подумайте, как будет выглядеть кнопка при наведении и нажатии. При наведении цвет кнопки должен становиться чуть темнее. При нажатии опускайте текст на один пиксель, создавая реалистичный эффект. Если активация определенного действия требует времени, добавьте спиннер загрузки после нажатия. Если событие завершено успешно, поменяйте спиннер на галочку. Действие должно активироваться только после того, как кнопка отпущена. Если действий много, не стоит показывать все кнопки сразу. Покажите ключевые, а остальные спрячьте в выпадающее меню под тремя точками или кнопкой «Еще».
В большинстве случаев основное действие (удалить, сохранить) располагается справа. Единственное исключение – когда дизайнер хочет выровнять все элементы формы по левому краю, чтобы взгляд меньше «прыгал» слева направо. В этом случае ключевое действие оставьте слева.
Ключевое действие следует выделить определенным цветом. Если это критическое действие, то логичней будет использовать красный. В других случаях для этого подойдет основной цвет бренда.
Кнопки в виде иконки лучше использовать только в том случае, если действие понятно. Например, все знают, что «+» – это «добавить», а мусорная корзина – «удалить».
Ширина кнопки рассчитывается следующим образом: ширина текста + отступы слева и справа. Если ключевое действие получилось по ширине меньше, чем второстепенное, можно увеличить кнопку.
Если вы не на Dribbble, то у полей должны быть четкие края, которые видны не только на дисплее Retina, но и на старых мониторах (советую проверять все оттенки серого).
Плейсхолдер (подсказка внутри поля формы) в привычных полях не обязателен. Довольно глупо вставлять в поле с заголовком «Имя» плейсхолдер «Иван Иванов» или «Введите ваше имя», так как это очевидно. Но в полях, где могут возникнуть вопросы, не помешает добавить пояснение. Например, если минимальная длина пароля – шесть символов, неплохо бы об этом сообщить. Хороший вариант – использовать плейсхолдер, который плавно становится заголовком.
Сообщения об ошибках выдавайте красным цветом под полем или в отдельном всплывающем окне. Не помешает окрасить рамку в красный.
Если все поля, кроме одного, обязательны, то не нужно ставить звездочку у каждого. Лучше напишите у единственного дополнительного поля, что его можно пропустить. Если обязательных для заполнения меньше, то ставьте звездочки.
Не забывайте: многие поля типизированы – например, номер телефона или карты. Поэтому не помешает подстроиться под их формат. Вы упростите процесс заполнения полей и избежите возможных ошибок.
Если поле часто редактируется, добавьте справа крестик, который будет его очищать.
Группируйте поля для ввода по типу информации: личная информация, работа, контакты. Благодаря этому создается визуальная иерархия и форма считывается легче.
Длинную форму лучше разбить на несколько шагов, показав при этом прогресс ее заполнения в виде полосы или цифр (например, «1/4»). Иначе, увидев большую форму, пользователь может и вовсе уйти. Собирайте контактную информацию на первом шаге, чтобы в случае ухода у вас остались данные для связи.
Поля для ввода и кнопки выравнивайте по левому краю, тогда взгляд пользователя не будет скакать слева направо и обратно.
Делайте автофокус на первом поле, чтобы пользователь мог без лишних кликов начать вводить информацию.
В сложных местах делайте подсказки с помощью попапа под иконкой с вопросительным знаком или с помощью текстовых подписей. Уверен, вы часто видите подсказки, которые поясняют что такое код CVC на карте.
Если требуете конфиденциальную информацию, объясните, зачем она вам нужна. Во время оплаты вопросов о необходимости данных карты возникнуть не должно, но, когда при регистрации вы запрашиваете номер карты или паспорта, нужно хорошо аргументировать свои требования, иначе новый пользователь уйдет.
Если какое-либо поле введено неверно, лучше оповестите об этом сразу после перехода на следующее. Это поможет избежать ситуаций, когда после нажатия кнопки действия пользователю ударят в глаза красные подчеркивания и крестики напротив неправильно заполненных полей.
И не спрашивайте пароль дважды. Его всегда можно восстановить с помощью почты.
Таблицы используются для отображения большого количества данных и их удобного изучения.
Добавляйте «воздуха» между элементами таблицы, иначе ее будет сложно анализировать.
Заранее подумайте, в каком порядке располагать данные. Если это таблица контактов, то логичнее начать с имени. Если база заявок, то, скорее всего, информацию нужно отсортировать по дате или статусу (всё зависит от бизнеса). Предоставьте пользователю возможность сортировать таблицу по нажатию на заголовок столбца.
Возможные действия со строками (редактировать, удалить и т. д.) показывайте только при наведении, иначе пользователь столкнется с переизбытком возможных действий.
Не добавляйте в таблицу столбец ID. Чаще всего этот элемент добавляют автоматически на уровне разработки, хотя смысловой нагрузки он не несет (если только это не номер заказа). Многие используют его как ссылку, но почему бы не сделать ссылкой всю строку или первое значение?
В больших таблицах не помешает выделять строку серым цветом. Это сэкономит массу усилий человеку, который будет ее анализировать. Если ваша таблица длинная, не помешает добавить фиксированную шапку. Таким образом, пользователю будет проще соотносить данные с заголовками, когда информации много и она схожих типов. Попробуйте открыть финансовый отчет крупной организации – и поймете, в чем дело.
Цифровые значения в таблице выравнивайте по правому краю, а текстовые по левому. Заголовки выравнивайте соответственно контенту.
Войти с помощью соц. сетей: