Правило внутреннего и внешнего в продуктовом дизайне. И как его определить
Истоки правила внутреннего и внешнего. Типографика.
Правило внутреннего и внешнего – это базовый принцип типографики, работающий на всех уровнях от буквы до границы блока. Внутреннее расстояние на одном уровне служит внешним на другом. Базовое правило типографики: внешнее ≥ внутреннее. Этот приём делает текст заметнее, выразительнее и читабельнее.
Внутреннее и внешнее в продуктовом веб-дизайне.
Когда я пришла работать UX/UI дизайнером на продукт Gotalent уже были разработаны макеты, но менеджер продукта озвучил мне проблему:
Мне не нравятся заголовки. Нужно подумать, как это можно исправить
Макеты выглядели так:
Первая проблема — это конечно цвет. Цвет слишком светлый, заголовок не выглядит как глава иерархии.
Вторая главная проблема — очевидно, есть проблема с расстояниями между заголовком, хедером и кнопкой.
Третья проблема — непонятно как пользователь должен ориентироваться в продукте переходя по вкладкам и углубляясь во вложенность разделов.
Решение первой проблемы было лёгким. Для решения второй и третьей проблемы была изучена навигация в продукте и проблема расстояний.
Внутреннее и внешнее в продуктовом веб-дизайне.
В дизайне продукта этот принцип распространяется на все составляющие веб страниц, но как определить между какими элементами расстояние внутреннее или внешнее? Для того, чтобы это понять нужно разобраться какие виды элементов интерфейса существуют.
Есть 3 типа элементов интерфейса:
Bars (элементы навигации) – такие элементы помогают людям определять где они находятся в приложении/продукте, обеспечивают навигацию и могут содержать кнопки или другие интерактивные элементы для инициирования действий перемещения.
Например: sidebar, bread crumbs, paginator, header, footer и т.д.
Controls (элементы управления или интерактивные элементы) – инициируют действия и передают информацию. Могут содержать текст, иконки, картинки и др.
Например: buttons, switches, checkbox, text fields, progress indicator и т.д.
- Views (контентная часть страницы – область просмотра) – содержит основной контент, который юзер видит в приложении/продукте.
Например: текст, графика, анимация, scrollbar.
Важно помнить, что эти группы элементов друг другу не родственные и расстояния между ними всегда будут внешними!
Зная это проанализируем пример макета:
Стало видно, где проблемы и почему глядя на эту страницу у менеджера продукта возникало ощущение, что что-то не так с заголовком.
Макет после работы над навигацией и расстояниями:
- Так как хедер и хлебные крошки — это элементы навигации, расстояние между ними внутреннее.
- Заголовок относится к элементам области просмотра. Поэтому расстояния между хедером, заголовком и кнопкой внешние.
В результате доработки страница выглядит понятно и правильно! Заголовок занимает правильное место в иерархии страницы благодаря правилу внутреннего и внешнего расстояния!
Делитесь своими инсайтами об этом правиле в комментариях. Давайте обсудим его вместе!
Кстати анализируя примеры макетов, можно легко определить, где необходимо внести коррективы, и улучшение восприятия и навигация пользователем в кармане