Многие думают, что сайт Amazon выглядит очень плохо. На нем нет привычных для нас красивых кнопок, нарисованных иконок, а только море слов и текста. Мол, как это такая большая корпорация не может нанять себе дизайнера?
На мой взгляд, там хороший дизайнер, даже отличный. Ведь во-первых, этот сайт решает бизнес-задачу — собрать в одном месте тысячи (или даже миллионы) разных товаров различных предназначений, где нужно настроить единую систему подходящую для абсолютно любого товара, для любого продавца и сделать всё так, чтобы пользователь смог купить интересующий его товар. И судя по тому, что этим сервисом пользуются люди со всего мира, дизайнер выполнил свою задачу.
Я решил представить небольшой поверхностный разбор данного сайта, на основе книги Дэниела Розенберга «UX Magic». Все скриншоты сделаны в октябре 2022 года.
Этот разбор показывает лишь малую часть работы UX-дизайнера и верстальщика, и скорее охватывает только визуальную составляющую. Но этого достаточно, чтобы понять на сколько на самом деле сайт аккуратный, строгий и по своему красивый.
Отступы
Благодаря использованию отступов на этом скриншоте группы элементов управления отличаются друг от друга как по смыслу, так и по расположению на экране. В шапке сайта — глобальные действия, и постепенно сверху вниз эти действия локализуются, что говорит о правильной иерархии сайта. Страница сайта выглядит чистой и привлекательной.
Близость и отступы
Примеры близости и отступов в заголовке страницы.
Логотип с выбором региона, как отдельная группа элементов. Читается отдельным предложением «Amazon будет доставлять посылки в Российскую Федерацию».
Элемент управления фильтром, расположенный слева от области поисковой строки, и кнопка действия, расположенная справа, визуально выглядят как единое целое.
Группа действий с аккаунтом располагается справа, визуально тоже хорошо разделены отступами.
Контраст
Следующий принцип верстки - использование контраста для разделения областей, имеющих разное назначение и смысл. Как показано на рисунке 3, контраст используется в нескольких областях страницы. Градиентный фон, переходящий от зеленого к светлому (сверху вниз), создает основу для контраста между двумя горизонтальными областями на экране (баннеры и товары) без проведения прямоугольных пограничных линий
Контраст текста и фона видно в шапке сайта, на баннерах, на отдельных карточках. Также Карточки с подбором товара контрастируют с градиентом фона
Повторение
Повторение - это ключевой принцип компоновки. Разделы и отдельные товары компонуются по одному принципу.
Выравнивание
Точное выравнивание по визуальной сетке минимизирует нагрузку на пользователя. Последовательное и плотное выравнивание позволяет пользователю быстро интерпретировать размещение глобальных и локальных действий, а также объектов на странице без побочных отвлекающих факторов.
Строгая сетка видна на главной странице с подборками.
Семантически (логически) в этом примере всё отлично и даже элегантно, но визуально тут есть ошибка, у себя в 🔗телеграме я кратко описал ее.
Сетка каталога отделяет отступами фильтры от товаров. Это так же хороший пример близости и отступов:
«Небрежное расстояние между областями сетки снижает разборчивость. Также как и любое плохое выравнивание компонентов пользовательского интерфейса или содержимого внутри областей сетки. Однако, ширина столбцов не требует равных пропорций. Аккуратное использование неравномерного расстояния между колонками может оказать благотворное влияние на движение глаз пользователя по странице. Первое, на чем остановится взгляд, - это неравномерная область, потому что она является исключением в сетке. Гештальт определяет, как мы сначала воспринимаем то, что отличается и выделяется из окружающей среды.»
Этот пример показывает, что некоторые блоки содержимого продукта охватывают более одной колонки.
Выравнивание текста
Рекомендации по выравниванию экранного текста (на языке слева направо) в пользовательском интерфейсе следующие:
• Выравнивание по левому краю:
-Заголовки страниц
-Заголовки виджетов
-Заголовки областей экрана
-Метки пользовательского интерфейса в списках, меню и древовидных элементах управления
-Текстовое содержимое в столбцах таблицы
-Текстовые строки в числовом стиле (например, номер сотрудника, номер детали, идентификатор)
• Выравнивание по центру:
-Подписи к фотографиям
-Подписи к иконкам
-Наклейки внутри кнопок
-Метки элементов управления вкладками
• Выравнивание по правому краю
-Числовой контент, где значения могут суммироваться (например, валюта, проценты).
-Боковые метки полей данных
Видно, что в карточке название товара выровненно по левому краю, текст в чипсе, указывающий на скидку выровнен по центру (сам чипс по левому краю), подписи картинок категорий выровненны по центру, дополнительная информация о категориях выравнена по правому краю.
Размеры шрифта
Существует долгая и красивая история использования шрифтов в печатных изданиях для плакатов, обложек музыкальных альбомов и журналов. Шрифты могут выражать эмоции, и опытный специалист может использовать шрифты для их выражения в широком диапазоне. Юмор, временной период, агрессия, формальность и серьезность - вот некоторые из многих культурно признанных оттенков, которые могут передавать шрифты.
Выбор шрифта в печатных изданиях и электронных играх является примером художественного выражения. В дизайне взаимодействия программного обеспечения это НЕ так! Дизайн продукта - это соответствие формы и функции, чтобы миллионы пользователей получили пользу…
Рассмотрим отдельно карточку товара в каталоге:
Тут 6 разных написаний шрифта на 5 квадратных сантиметрах. Но, визуально всё очень аккуратно, такое разнообразие обусловленно большим количеством информации и вся эта информация отлично считывается, благодаря грамотному использованию толщины, размера и цвета шрифта. Тут нашли место даже для различных иконок.
