По моим наблюдениям, проектируя пользовательское взаимодействие, дизайнеры часто не соблюдают баланс между полезной и служебной информацией, с перекосом в служебную. Под полезной информацией я понимаю ту, ради которой человек приходит, например на сайт. Под служебной — та, которая относится к навигации, бренду или интерфейсной фурнитуре. Для наглядности тезиса, покажу на примеры дисбаланса, применив цветовое кодирование: красным выделю служебную, полезную зелёным.
1. Ипотечный калькулятор ВТБ24
Огромный перекос в служебную информацию. Полезная информация потерялась за интерфейсом.
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/3ac/278/432/3ac278432a6e8dbf937aaad75dda36cf.jpg)
2. Ипотечный калькулятор Сбербанка.
Полезной информации нет, пока не кликнешь на кнопку «Рассчитать кредит». Поэтому всё красное.
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/6b9/639/0d9/6b96390d99c2917e396c3e208e684814.jpg)
3. Расчёт ипотеки в банке Возрождение.
Простыня из месяцев, процентных ставок и ежемесячных платежей.
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/bf2/142/9e6/bf21429e62db608c270199b1b01bf601.jpg)
Не существует золотого правила баланса — тут работает только здравый смысл. Дизайнер должен помнить, пользователю нужна полезная ему информация, всё остальное это довесок и способ её получить. В идеале служебной информации быть не должно. Чтобы добиться баланса не нужно боятся нелинейности в интерфейсах.
Примеры с оптимальным балансом.
1. Расчёт вклада в банке ТКС
![](https://habrastorage.org/r/w780q1/getpro/habr/post_images/4ab/328/e07/4ab328e071cc13fae4e4361c80e9657e.jpg)
2. Расчёт вклада в рыбе Связного банка
![](https://habrastorage.org/r/w780q1/getpro/habr/post_images/e7e/1a4/192/e7e1a41926d5ae6280b483d1856b648d.jpg)
3. Выбор и поиск автомобилей в Яндекс. Авто
![](https://habrastorage.org/r/w780q1/getpro/habr/post_images/f10/ef1/632/f10ef1632da48305d83e3004aef19d52.jpg)
Что объединяет хорошие примеры:
— контраст в подаче,
— компактное размещение служебной информации,
— визуальный акцент на полезной информации.
Резюме.
Сделали интерфейс — выделите служебную и полезную информацию. По необходимости сбалансируйте, уберите перекос служебной.
1. Ипотечный калькулятор ВТБ24
Огромный перекос в служебную информацию. Полезная информация потерялась за интерфейсом.
![image](https://habrastorage.org/getpro/habr/post_images/3ac/278/432/3ac278432a6e8dbf937aaad75dda36cf.jpg)
2. Ипотечный калькулятор Сбербанка.
Полезной информации нет, пока не кликнешь на кнопку «Рассчитать кредит». Поэтому всё красное.
![image](https://habrastorage.org/getpro/habr/post_images/6b9/639/0d9/6b96390d99c2917e396c3e208e684814.jpg)
3. Расчёт ипотеки в банке Возрождение.
Простыня из месяцев, процентных ставок и ежемесячных платежей.
![image](https://habrastorage.org/getpro/habr/post_images/bf2/142/9e6/bf21429e62db608c270199b1b01bf601.jpg)
Не существует золотого правила баланса — тут работает только здравый смысл. Дизайнер должен помнить, пользователю нужна полезная ему информация, всё остальное это довесок и способ её получить. В идеале служебной информации быть не должно. Чтобы добиться баланса не нужно боятся нелинейности в интерфейсах.
Примеры с оптимальным балансом.
1. Расчёт вклада в банке ТКС
![](https://habrastorage.org/getpro/habr/post_images/4ab/328/e07/4ab328e071cc13fae4e4361c80e9657e.jpg)
2. Расчёт вклада в рыбе Связного банка
![](https://habrastorage.org/getpro/habr/post_images/e7e/1a4/192/e7e1a41926d5ae6280b483d1856b648d.jpg)
3. Выбор и поиск автомобилей в Яндекс. Авто
![](https://habrastorage.org/getpro/habr/post_images/f10/ef1/632/f10ef1632da48305d83e3004aef19d52.jpg)
Что объединяет хорошие примеры:
— контраст в подаче,
— компактное размещение служебной информации,
— визуальный акцент на полезной информации.
Резюме.
Сделали интерфейс — выделите служебную и полезную информацию. По необходимости сбалансируйте, уберите перекос служебной.