Тосты – всплывающие уведомления. Как создать идеальный тост
Тост – это маленькое информационное окно, которое присутствует в большинстве приложений, сайтов для ПК и телефонов. Но когда начинаешь вспоминать в каких приложениях видел их в последний раз, на ум приходит разве что яндекс почта и какой-нибудь маркет плейс.
Почему тосты незаметны?
В условиях информационного шума, пользователь бегло сканирует контент на предмет интересующей информации, не вчитываясь в содержание. При таком сканировании мозг цепляется за изображения, иллюстрации, выделяющиеся на общем фоне объекты. Другими словами, объекты, которые не требуют большой концентрации для того, чтобы понять о чём они.
А тосты просканировать ещё сложнее. Это не статичный объект и если неправильно рассчитано время исчезновения тоста, если дизайнер плохо поработал с инструментами управления вниманием пользователя. В итоге тосты становятся не заметны, если специально их не искать, как это делала я для этой статьи.
Примеры плохой и хорошей реализации тоста
Плохая реализация:
- Не проработан контраст по отношению к фону в случае Android на тёмной теме и в случае Wildberries по отношению к фирменному цвету. Во всех случаях цвет тоста неинформативен.
- Нет иконок, в случае Яндекса иконка неинформативна.
- Текст довольно мелкий во всех случаях, что осложнит прочтение содержания тоста людям с низким зрением.
Все эти ошибки привели к тому, что тосты не выполняют свою функцию. Они попросту стали незаметны.
Хорошая реализация:
- Есть контраст по отношению к фону. Цвет тостов Wildberries сообщает пользователю об содержании тоста.
- Во всех случаях присутствуют иконки отражающие смысл и содержание тоста.
Такая реализация радует потому, что тосты заметны и информативны. И их составляющие отвечают паттернам мышления пользователя.
Формула создания идеального тоста
Так как же сделать его – идеальный тост понятный всем? Разберёмся подробно. Стоит держать в голове следующие пункты:
Цвет;
Контраст;
Форма;
Изображение;
Размер и иерархия;
- Люди с ограниченными возможностями.
Цвет – должен отражать содержание тоста. Потому, что мы помним, что люди в текст не вчитываются и пользователь с первого взгляда должен понять контекст. Используйте паттерны восприятия пользователями цвета. Так, например успешное действие всегда отмечается зелёным цветом, а неуспешное красным.
Контраст – тост должен быть контрастным фону. Не стоит на чёрном фоне делать серый тост, он становится невидимым. Не стоит фон тоста делать фирменным цветом (как сделал Wildberries, например) – это так же сделало тост незаметным.
Форма – очень хорошо, когда помимо цвета о контексте говорит форма. Паттерны тут так же отлично работают, успешное действие можно подчеркнуть скругленной успокаивающей формой (например галочку заключить в круг), а неуспешное действие подчеркнуть угловатой формой (например, восклицательный знак заключить в треугольник).
Изображение – в тосте эту роль играет иконка, которая так же должна передавать контекст без прочтения текста. Тут так же стоит пользоваться паттернами, помним, что успешное действие всегда отмечается галочкой, а неуспешное восклицательным знаком.
Размер и иерархия – не стоит забывать про отступы и размеры в тосте. Он всё равно исчезнет, а потому текст должен быть легко читаемым и иконка должна распознаваться пользователем сразу.
Люди с ограниченными возможностями – всегда держите в голове, что вашим пользователем может стать человек с плохим зрением или страдающим дальтонизмом. Поэтому не стоит пренебрегать иконками, контрастом или делать слишком мелкий текст.
Выводы
Все выше перечисленные пункты должны вместе работать друг на друга. То есть пользователь увидевший цвет понимает, о чем тост, а пользователь с дальтонизмом увидев иконку понимает тоже самое. В обоих случаях скорее всего пользователь не прочитает текст, но всё равно поймёт о чём идёт речь.
В итоге должны получиться вот такие тосты:
Делитесь в комментариях, своими секретами создания идеального тоста:)