Почему важно сравнивать интерфейс с физическим миром? Хлебные крошки в дизайне.

При проектировании интерфейса я часто сравниваю его элементы с физическим пространством.

Отличный пример — «Хлебные крошки» (от англ. breadcrumbs). Не те, что раскидывали ребята из детской сказки, чтобы запомнить дорогу домой, а элементы интерфейса, расположенные под хэдером. Хотя функции схожи: наши "крошки" помогают посетителям сайта ориентироваться в его структуре, указывая путь от главной страницы до текущей.

Пример — маршрут до спальни в большом замке. Если указателей нет, то в сотнях комнат легко запутаться. "Хлебные крошки" будут выглядеть так:

“Прихожая/ Коридор / Гостиная / Спальня”

Сразу понятно, откуда человек пришел и как ему вернуться назад.

Тот же принцип и у "хлебных крошек" в интерфейсе. Только упрощается переход из комнаты в другую: одним кликом можно вернуться на несколько шагов.

У поведения "хлебных крошек" есть вариации. Например, может быть просто кнопка "назад" (часто в мобильных версиях) или непоследовательный путь.

Недавно я столкнулся с интересным моментом: "хлебные крошки" на нашем сайте не отражали реальный путь посетителя. То есть человек попадал в спальню не через гостиную с коридором, а напрямую.

Сравнивая это с физическим миром, я сразу вспомнил про Икеа, у которой планировка всех магазинов похожа на лабиринт. Можно бесконечно долго ходить меж полок, а можно через короткие пути попасть сразу на 3 или 4 уровень навигации.

Аналогия помогла мне объяснить логику наших "хлебных крошек" - значит все ок. А когда сравнений с реальным миром нет, я настораживаюсь и перепроверяю, подходит ли это решение.

Сопоставлять элементы интерфейса с нечто жизненным - это полезный навык. Привычные образы помогают сделать его удобным и интуитивно понятным для пользователей.