- PVSM.RU - https://www.pvsm.ru -

Полезная и служебная информация в интерфейсе

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

1. Ипотечный калькулятор ВТБ24 [1]
Огромный перекос в служебную информацию. Полезная информация потерялась за интерфейсом.

image

2. Ипотечный калькулятор Сбербанка [2].
Полезной информации нет, пока не кликнешь на кнопку «Рассчитать кредит». Поэтому всё красное.

image

3. Расчёт ипотеки в банке Возрождение [3].
Простыня из месяцев, процентных ставок и ежемесячных платежей.

image

Не существует золотого правила баланса — тут работает только здравый смысл. Дизайнер должен помнить, пользователю нужна полезная ему информация, всё остальное это довесок и способ её получить. В идеале служебной информации быть не должно. Чтобы добиться баланса не нужно боятся нелинейности [4] в интерфейсах.

Примеры с оптимальным балансом.

1. Расчёт вклада в банке ТКС [5]

Полезная и служебная информация в интерфейсе

2. Расчёт вклада в рыбе Связного банка [6]

Полезная и служебная информация в интерфейсе

3. Выбор и поиск автомобилей в Яндекс. Авто [7]

Полезная и служебная информация в интерфейсе

Что объединяет хорошие примеры:
— контраст в подаче,
— компактное размещение служебной информации,
— визуальный акцент на полезной информации.

Резюме.
Сделали интерфейс — выделите служебную и полезную информацию. По необходимости сбалансируйте, уберите перекос служебной.

Автор: artwalek

Источник [8]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/yuzabiliti/66028

Ссылки в тексте:

[1] Ипотечный калькулятор ВТБ24: http://www.vtb24.ru/personal/loans/mortgage/base/new/calculator/Pages/default.aspx?geo=moscow

[2] Ипотечный калькулятор Сбербанка: http://www.sberbank.ru/moscow/ru/person/credits/home/buying_complete_house/

[3] Расчёт ипотеки в банке Возрождение: http://www.vbank.ru/moscow/personal/credits/flat/calculator/

[4] нелинейности: http://artwalek.ru/article/2014-06-01/

[5] Расчёт вклада в банке ТКС: https://www.tcsbank.ru/deposit/

[6] Расчёт вклада в рыбе Связного банка: http://svyaznoybank.artgorbunov.ru/deposits.html

[7] Выбор и поиск автомобилей в Яндекс. Авто: http://auto.yandex.ru/search?year_from=1975&group_by_model=false

[8] Источник: http://habrahabr.ru/post/231245/