Что значит на большом экране
Хитрости измерения диагонали экрана у современных смартфонов
Содержание
Содержание
В статье будет рассказано о том, как измеряется диагональ экрана смартфонов, что собой представляет полезная площадь экрана и как соотношение сторон дисплея влияет на компактность и удобство использования мобильного устройства. Такая простая, на первый взгляд, тема таит в себе подводные камни, информация о которых может оказаться полезной при выборе смартфона.
Как измеряется диагональ экрана?
До недавних пор большинство мобильных устройств обладали стандартным прямоугольным дисплеем с соотношением сторон 16:9, и это было самое удобное время для измерения диагоналей. По сути, измерения происходили максимально просто: необходимо было лишь приложить линейку от левого верхнего края дисплея к правому нижнему краю, либо наоборот — правый верхний и левый нижний края позволяли получить ровно такой же результат. Если на линейке нанесена информация в дюймах, то удаётся сразу же получить результат и соотнести его с тем, что указывает производитель в официальных технических характеристиках. Зачем это может понадобиться? На самом деле даже именитые производители могут округлять диагональ в большую сторону, чтобы получить красивые цифры, а малоизвестные бренды и вовсе способны завысить результат на несколько десятых дюйма. Хочется надеяться, что это осталось в прошлом.
Если на линейке есть только значения в сантиметрах, это тоже не проблема. Учитывая, что в 1 дюйме 2.54 сантиметра, достаточно полученный результат поделить на 2.54. В результате получим диагональ в дюймах.
Более сложный способ измерения диагонали состоит в использовании теоремы Пифагора. Это возможно в том случае, если известны длина и ширина экрана. Их можно измерить с помощью линейки или получить подобную информацию из некоторых приложений, например, через AIDA64 (иногда данные могут быть не указаны или указаны не совсем точно: с округлением в большую или, что маловероятно, в меньшую сторону).
Итак, воспользуемся той же формулой, предназначенной для измерения диагонали прямоугольника: c² = a² + b², где «a» и «b» — это стороны прямоугольника (в нашем случае прямоугольного экрана), а «c» является диагональю.
Для примера возьмем старичка ASUS ZC520KL. С помощью линейки и приложений определено, что его стороны равны 6.5 и 11.5 см. Данные значения подставляем в формулу, получая c² = 6.5² + 11.5².
При вычислении квадратов, то есть при умножении цифр на самих себя, получаем c² = 42.25 + 132.25, а после сложения результат будет такой: c² = 174.5.
Теперь предстоит извлечь квадратный корень из обеих сторон уравнения, в результате чего формула приобретает такой вид: √c² = √174.5. После подсчёта и округления получаем c = 13.21 см, или, переведя сантиметры в дюймы (13.21 делим на 2.54), узнаём, что диагональ экрана равна 5.2″, что соответствует данным, указанным производителем смартфона ASUS ZC520KL.
Но проблема в том, что модели смартфонов с идеальным прямоугольным экраном хоть ещё и выпускаются, но с каждым годом становятся всё большей редкостью. Чаще всего в продаже можно увидеть дисплеи с закруглёнными углами, которые уменьшают фактическую или, как её ещё можно назвать, видимую диагональ, и делают недоступной для просмотра часть информации на экране. В технических характеристиках различных девайсов принято указывать полную диагональ без учёта скруглённых углов, но некоторые производители в своих рекламных материалах могут давать пояснения, что реальная диагональ будет меньше. Здесь всё зависит от того, насколько сильно закруглены углы. Нетрудно догадаться, что чем больше закругления, тем меньше видимая часть экрана.
Как и в случае с обычным прямоугольным экраном, измерять видимую глазу диагональ можно с помощью линейки. Только при подсчёте учитывать нужно ту зону, на которой отображается картинка, тогда как рамки нас уже интересовать не будут — вне зависимости от того, какую они имеют форму.
Какие диагонали экранов бывают у смартфонов?
Современные технологии позволяют производителям создавать устройства с достаточно тонкими рамками, толщина которых со временем наверняка станет ещё меньше. Насколько это удобно реальному пользователю — уже отдельный вопрос, но факт в том, что диагонали экранов неуклонно растут. Популярное заявление о том, что всё, что больше 7 дюймов, — это уже планшет, теряет свою актуальность, поскольку смартфоны при одинаковой диагонали всегда оказываются компактнее планшетов, в том числе за счёт узких рамок и экранов с соотношением сторон 18:9, 19:9 и т. д., но влияние соотношения сторон на габариты устройства рассмотрим чуть позже.
Согласно статистике диагоналей и размеров смартфонов от магазина DNS, смартфоном с самым большим экраном стал Honor 8X Max, получивший дисплей с диагональю 7.12 дюйма. Однако на деле девайс оказывается куда меньше, чем планшеты.
Новинка под названием Tecno Pouvoir 4 и вовсе показывает, что семидюймовый смартфон может быть не только сравнительно компактным, но и бюджетным, не выходящим за рамки стоимости в 10 000 рублей.
А вот компактные смартфоны в наше время найти будет очень проблематично. Среди немногочисленных исключений выделяется Apple iPhone SE 2020, который остался в стороне от модных веяний, получив небольшой экран с диагональю 4.7″. У него ещё и соотношение сторон классическое — 16:9. Одно лишь огорчает: из-за больших рамок полезная площадь экрана находится на достаточно низком уровне.
Что такое полезная площадь экрана?
Полезная площадь экрана — это соотношение площади дисплея к общей площади передней стороны смартфона. Для этого есть даже отдельный англоязычный термин screen-to-body, который можно часто встретить в новостях о новых моделях смартфонов.
Для лучшего понимания вопроса вновь возьмём ASUS ZC520KL, у которого стороны корпуса равны 15.05 и 7.33 см. Для вычисления площади корпуса умножаем показатели, получая в итоге 110.3165 см². Такую же операцию проводим и для определения площади дисплея: 6.5 см × 11.5 см = 74.75 см². Имея площадь корпуса смартфона (а значит, и передней панели) и площадь дисплея можно вычислить полезную площадь экрана по следующей формуле: 74.75 (площадь дисплея) : 110.3165 (площадь передней стороны) × 100 = 67.76. Таким образом, полезная площадь экрана смартфона ASUS ZC520KL составляет 67.76%, что по современным меркам мало. Это объясняется широкими рамками вокруг экрана.
Нужно ещё учитывать, что производители при указании полезной площади часто прибегают к хитростям, измеряя только переднюю панель, которая выделена на картинке ниже оранжевым цветом, тогда как части боковых граней (обозначенные на изображении синим цветом), которые тоже занимают площадь на передней стороне смартфона, не учитываются. Можно долго спорить насколько это правильный подход, но обычному пользователю точно измерить площадь только передней панели уже практически невозможно.
С появлением дисплеев, которые выходят на боковые грани корпусов смартфонов, а это в том числе так называемые экраны-водопады с закруглением около 90 градусов и более, полезная площадь экранов иногда не только составляет почти 100%, но даже и превышает эту цифру.
К примеру, в Xiaomi Mi Mix Alpha, который так и не был запущен в массовое производство, показатель составил фантастические 180%, но в связи с этим напрашивается вопрос о том, каким образом можно получить более 100%? На самом деле производителями принято измерять площадь всего экрана, и даже тех его частей, что выходят за переднюю сторону девайса. С учётом этого неудивительно, что площадь дисплея будет превышать площадь передней стороны и выходить за отметку в 100%.
Что такое соотношение сторон и как оно влияет на размеры смартфонов?
Говоря простым языком, под соотношением сторон экрана, которое в англоязычной литературе обозначается как aspect ratio, понимается соотношение размеров экрана — ширины и высоты. На практике, если мы возьмём экран с приблизительными размерами 6.5 и 11.5 см, то поделив большее число на меньшее, получим результат в 1.7. Точно такое же число выйдет, если 16 разделить на 9. Всё это указывает на то, что соотношение сторон экрана составляет классические 16:9, но проще будет ориентироваться на разрешение экрана, которое обязательно указано во всех технических характеристиках. К примеру, если разрешение экрана составляет 1280 × 720 пикселей, то при аналогичном делении чисел (1280 : 720) вновь получим показатель 1.7, указывающий на соотношение сторон 16:9.
Но такое соотношение постепенно уходит в прошлое. На смену ему приходят показатели 18:9 (2:1), 18,5:9, 19:9, 19,5:9, 20:9 и так далее. Всё будет ограничиваться только идеями создателей смартфонов и экранов для них. Другими словами, экраны увеличиваются в длину, что, с одной стороны, сделает их в некоторых случаях удобнее в использовании, но, с другой стороны, при аналогичной диагонали площадь экрана будет больше именно у варианта с соотношением сторон 16:9.
Поэтому нет ничего удивительного в том, что даже модели с одинаковыми размерами рамок и с одинаковой диагональю будут иметь разные размеры корпуса. Варианты со сторонами 18:9, 18.5:9, 19:9 и так далее будут компактнее девайсов с соотношением 16:9. Платой за компактность станет потеря нескольких десятых дюйма дисплея (при пересчёте на соотношение 16:9), но на самом деле эту нехватку мало кто замечает, даже с учётом того, что площадь дополнительно уменьшится из-за закруглённых углов.
Адаптивное масштабирование: дизайн интернет-магазинов для больших экранов
Предлагаю вашему вниманию перевод статьи «Responsive Upscaling: Large-Screen E-Commerce Design» автора Christian Holst.
Революция в адаптивном дизайне не за горами (если уже не случилась!), и даже не смотря на то, что интернет-магазины не взялись на адаптивный дизайн столь же агрессивно, как другие индустрии, все же это становится популярным.
Уже давно большинство размышлений об адаптивном дизайне не выходят за рамки проектирования перехода между мобильным и десктопным интерфейсами. Пора немного внимания уделить возможностям расширения этих границ за пределы стандартного десктопного экрана, чтобы создать интерфейс, соответствующий современным широким экранам. Взгляните на это:
В этой статье мы изучим, как дизайнеры интернет-магазинов могут использовать адаптивное масштабирование, чтобы спроектировать интерфейс специально для пользователей с большими экранами. Мы изучим один базовый принцип, и вместе с ним 11 идей, как адаптировать различные элементы интерфейса интернет-магазина. С помощью этих идей можно решить некоторые проблемы взаимодействия, которые мы наблюдали в ходе наших исследований. В оригинале эта статья была опубликована институтом Baymard.
Многие коммерческие сайты не используют пустое пространство на больших экранах. Результат: часто много белого пространства окружают довольно урезанные результаты поиска. (Увеличить изображение)
Обратите внимание на белое пространство, окружающее довольно урезанные результаты поиска IKEA. В процессе нашего изучения списка товаров в интернет-магазине стало понятно, что в нише товаров, выбираемых по эстетическим характеристикам, как декор для дома, пользователям нужны крупные превью, чтобы оценить товар правильно. Убрать свободное пространство, используя его — это одна из многих идей «адаптивного масштабирования» для интернет-магазинов, на которые стоит обратить внимание.
Пустое пространство, появившееся в основном за счёт большого экрана, как правило остаётся не использованным и отображается как широкое море белого, если оригинальный контент страницы урезан под узкий дизайн, ориентированный на экран лэптопа. Как минимум, в контенте должно быть немного больше воздуха, должно оставаться немного пустого пространства между элементами на мониторах с большой диагональю.
Кроме того, в «адаптивном масштабировании» можно пойти намного дальше, улучшая интерфейс пользователей с большим экраном. Можно использовать пустое пространство, чтобы увеличить изображения, добавить колонки товаров, лучше показать контекст страницы и упростить доступ к контекстным операциям (фильтр, сортировка, «Добавить в корзину» и т.д.).
Базовый принцип адаптивного масштабирования: одинаковый контент, разное представление
Существует два основных пути избавления от пустого пространства: разместить дополнительный контент на странице (т.е. контент, который отображается только на высоких разрешениях) и показать текущий контент в ином виде (т.е. переместить элементы, изменить их формат, увеличить и т.д.).
Вы заметите, что все примеры в этой статье иллюстрируют, как текущий контент можно показать иначе (иногда коородинально иначе). Причина в том, что добавление абсолютно нового контента, который будет отображаться только на широких разрешениях — это, в большинстве случаев, не очень хорошая идея. Конечно, бывают исключения, но, в целом, если контент недостаточно важен, чтобы показывать его в «стандартном» десктопном виде, то, скорее всего, он недостаточно важен и для отображения на больших экранах.
Показывайте одинаковый контент на всех устройствах, но «упаковывайте» его по-разному. (Увеличить изображение)
Наличие большого экрана не означает, что пользователь вдруг хочет получить обрезанную страницу, которую трудно просматривать. Точно так же наличие меньшего экрана не означает, что пользователю не потребуется какая-нибудь информация, которая была замечена на сайте ранее. Следовательно, покажите тот же контент, но «упакуйте» иначе, так, чтобы он подходил для отображения на большом экране.
Маловажный контент ни в коем случае не должен быть добавлен на страницу просто потому, что для него на странице есть место. Таким же образом, важный контент не должен быть урезан только потому, что место на экране ограничено (смотрите результаты тестирования “Чем ваши мобильный и десктопный сайты должны отличаться?”, в которых описан этот принцип). Единственный случай, когда новый контент может добавляться на большом экране — если этот контент имеет смысл только на большом экране, а на обычных не нужен.
Универсальное правило: появление нового контента при широком разрешении — это тревожный звоночек. В некоторых случаях это может быть оправдано, но, в основном, контент будет либо слишком маловажным, чтобы показывать его на стандартном экране, и тогда нужно исключить его из расширенной версии, либо он будет действительно важным, и тогда его нужно показывать вне зависимости от размера экрана. Понятно, что важный контент можно представить по-разному на имеющемся пространстве, но этот контент должен присутствовать в той или иной форме во всех версиях дизайна.
Идеи для адаптивного масштабирования интернет-магазинов
Помня о правиле неизменности контента, описанном выше, рассмотрим некоторые из многих путей адаптивного масштабирования, которые могут сработать для интернет-магазинов.
Все последующие примеры будут показаны с помощью скетчей, наложенных на скриншоты сайта Wayfair.com. На текущий момент десктопный дизайн Wayfair.com совсем не адаптируется (то есть страницы не масштабируются, и верстка не перестраивается при изменении размера браузерного окна), ни вправо, ни влево — ширина страницы остаётся фиксированной вне зависимости от размера видимой области экрана. Однако, это хороший пример, чтобы показать, как разные типы страниц интернет-магазина можно адаптировать под большие экраны.
В реальных условиях другие элементы на странице, скорее всего, будут перестраиваться и, возможно, масштабироваться (особенно такие элементы, как шапка и подвал). Но для наших схематичных иллюстраций будет достаточно немного их подвинуть. Эти примеры служат для вдохновения. Некоторые покажутся вам более целесообразными, чем другие, в зависимости от вашей ниши и сферы деятельности.
Встроенное окно авторизации
Окно авторизации можно сделать менее навязчивым на большом экране, если отказаться от модального отображения и вместо этого зафиксировать форму в видимой части страницы. Тогда форма не будет так бросаться в глаза, так как перестанет блокировать всю страницу. При этом останется заметной, так как будет появляться вверху страницы сразу после загрузки (поверх основного слоя).
Окно с формой авторизации встроено как содержимое колонки поверх основного слоя. (Увеличить изображение)
Таким образом, пользователям, которые не хотят проходить авторизацию, будет легче игнорировать форму, ведь её больше не нужно выключать специально. В то же время, на наших юзабилити-исследованиях большинство респондентов просто закрывали стандартные диалоговые окна, даже не читая, и зачастую причисляя их к «попапам» (смотрите статью «Избегайте эти 5 типов графики для интернет-магазинов»). Это что-то вроде выборочной слепоты. У таких людей может возникнуть больше желания смотреть на форму авторизации, если она будет отображаться не модально, а внутри основной колонки поверх контента. Глядя на элемент, им не придётся тратить все внимание на то, чтобы найти, как его отключить.
Быстрые ссылки из шапки и подвала
Самые популярные ссылки из шапки (например, Личный кабинет или оформление заказа для авторизованного пользователя) и из подвала (обслуживание и вопросы) можно показывать в блоке на главной странице, если есть место. Разумеется, ссылки должны остаться доступными на прежнем месте в меню шапки и разделах подвала. На большом экране эти ссылки могут просто дублироваться на главной странице.
Популярные ссылки из шапки и подвала отображаются как быстрые ссылки в блоке на главной странице. (Увеличить изображение)
Это хороший пример контента, который остается доступным на странице, но отображается по-другому. Это не новый контент, просто текущий контент стал отображаться иначе, специально для пользователей с большими экранами. Конкретно в этом примере быстрые ссылки должны быть немного приглушенными, чтобы не перетягивать внимание от основного контента.
Встроенный слайдер-карусель
У карусели на главной странице есть много интерфейсных проблем, и внедрять ее нужно всегда с большой осторожностью (смотрите восемь требований к карусели, полученных в ходе наших исследований). На большом экране карусель, конечно, можно просто увеличить, увеличив тем самым весь функционал показа слайдов. Однако, если слайды квадратные или даже с вертикальной ориентацией, их увеличенная карусель может опустить остальной контент за границу видимой области — на главной странице будет видно меньше, хотя видимая область стала больше! Решение — заменить карусель на ряд из двух или трёх слайдов подряд, которые выводятся одновременно.
Слайды в карусели заменены на ряд обычных слайдов. (Увеличить изображение)
Если общее количество слайдов соответствует количеству столбцов, то проблем с функциональными особенностями карусели можно избежать, используя статичную верстку слайдов в несколько колонок. Если слайдов больше, чем колонок, то, конечно, придется оставить карусель или добавить новые ряды.
Встроенная корзина с покупками
После того, как пользователь добавил товар в корзину, большинство владельцев интернет-магазинов надеются на одно из двух событий: пользователь отправляется искать другие товары, чтобы добавить в корзину, или оформляет заказ на товары в корзине. Если пользователь ищет другие товары, это, безусловно, хорошо для продаж. С другой стороны, это означает, что пользователь начинает сожалеть о своём выборе, особенно если он потратил много времени, исследуя сайт, когда искал добавленный товар.
Стандартная расхлопывающаяся корзина становится встроенной, когда пользователь добавляет в неё товары. (Увеличить изображение)
Встраивая в контент стандартную расхлопывающуюся корзину (доступную в шапке), продавец создаёт для пользователя обзор товаров, которые уже есть в корзине. И тем самым напоминает, какие замечательные товары пользователь уже нашёл (которые, разумеется, нужно обязательно купить перед уходом!). Это даёт пользователю быстрый доступ к оформлению заказа и тем самым помогает закрыть продажу.
Кроме того, в течение нашего исследования главной страницы и навигации по категориям мы часто наблюдали, как люди повторно открывают корзину, просто чтобы взглянуть на название добавленных ранее товаров. Например, они могут отрыть корзину, чтобы посмотреть название модели фотоаппарата, который только что был добавлен, чтобы найти подходящий чехол. Расхлопнутая по умолчанию корзина сделает проще поиск сопутствующего товара, поскольку позволит напрямую сопоставить текущий список товаров с товарами в корзине.
Дополнительная колонка товаров
Один из самых очевидных путей избавления от пустого пространства в плитке товаров — перестроить товары так, чтобы они вставали в дополнительную колонку. Это может здорово увеличить число товаров, видимых на экране. В примере ниже пользователь может видеть уже не шесть товаров, а десять.
Сетка списка продуктов скомпонована так, чтобы на большом экране помещались дополнительные колонки. (Увеличить изображение)
С помощью такого подхода можно значительно адаптировать список товаров под большой экран, но делайте это осторожно. Если количество колонок будет слишком большим, то плитку в конечном счете станет сложнее просматривать. Пользователи будут вчитываться в информацию, и им будет сложно перескакивать глазами от строки к строке (по этой причине у текста есть оптимальная длина строки).
Поэтому ограничивайте ваш список товаров на ширину от пяти до восьми колонок (зависит от размера элементов в списке и ниши товара), чтобы пользователи не потерялись в море информации.
Увеличенные изображения товаров в списке
Другой очевидный способ использовать преимущества большого пространства видимой области в списке продуктов — увеличить каждый элемент списка, чтобы заполнить экран. Например, вы можете сильно увеличить размер превью товара, позволяя пользователю рассмотреть дизайн каждого товара намного более детально. Это ощутимое преимущество для ниш товаров, продвигаемых за счет внешнего вида, так как если количество передаваемой визуальной информации максимально, пользователю намного проще выбрать товар по вкусу.
Элементы списка товаров увеличиваются, подгружая картинки с высоким разрешением и передавая максимальное количество визуальной информации. (Увеличить изображение)
Однако, и здесь не помешает осторожность. Простое масштабирование картинки часто приводит к серьезному увеличению высоты строки списка (предполагаем, что пропорции сохраняются). В результате число товаров на странице значительно сократится. Обратите внимание на иллюстрацию выше — вторая строка в списке оказалась почти полностью вытесненной из поля зрения.
Поэтому компромисс при увеличении изображения в списке товаров заключается в следующем: повышая уровень детализации визуальных данных для каждого товара, мы ограничиваем обзор доступных товаров из-за того, что меньшее число товаров помещается в видимую область.
Масштабирование и перестройка списка товаров
Совместив два предыдущих решения на случай расширения экрана пользователя — то есть, добавив колонки и увеличив каждый элемент списка товаров — мы получим лучшее из них. Визуальных данных для каждого товара становится больше, при этом обзор сохраняется. Плитка продуктов перестраивается так, чтобы показывать дополнительные колонки, даже если элементы списка по высоте достигают нижней границы.
Элементы списка товаров одновременно увеличены и перестроены в дополнительные колонки. (Увеличить изображение)
Таким образом, элемент списка может увеличится, чтобы отобразить дополнительную визуальную информацию, но без какого-либо увеличения по высоте, чтобы пришлось идти на компромисс с количеством товаров, которые видны на экране. На самом деле, из-за добавления колонок, число продуктов в пределах видимой области даже увеличится. Получается, мы увеличиваем и общее число товаров на экране и уровень детализации каждого.
Залипаюший фильтр
Ещё один способ избавиться от пустого пространства — закреплять панель с фильтрами и сортировкой в видимой области экрана как «залипаюший» элемент. Это даст пользователю дополнительную информацию о том, какой продукт он сейчас смотрит, а также быстрый доступ к управлению параметрами списка.
Панель фильтров может отображаться в виде боковой панели, прикреплённой к краю(краям) экрана. (Увеличить изображение)
Фиксированный контент — это эффективный способ использовать пространство, если основной контент не очень широкий. Однако, всякий раз, когда вы фиксируете контент у края экрана, делайте это только по той оси, на которой достаточно места для его размещения, то есть по оси, на которой слишком много места. К примеру, не фиксируйте контент сверху или снизу экрана без применения правил, основанных на высоте видимой области (например, основанный на высоте медиа-запрос), которые будут проверять, есть ли необходимое место.
Однако, с соответствующей проверкой правила, залипающая боковая панель фильтров также может перестраиваться и в несколько колонок, с параметрами, разбитыми на две-три колонки. Если панель фильтров горизонтальная, вы можете прикрепить ее к самому верху экрана, если позволяет высота видимой области. Или, если много свободного места по горизонтали, вы можете перестраивать эту панель в боковую при прокрутке страницы. Высоту браузерного окна также можно использовать, чтобы динамически регулировать сокращение параметров фильтра — количество параметров, которое отображается до определенного порога, увеличится с увеличением высоты экрана.
Недавно просмотренные товары
Когда респонденты на тестировании переходили на страницу товара и понимали, что товар в итоге им не подходит, они либо продолжали поиск, либо уходили с сайта. Разумеется, в интересах продавца сделать доступной возможность вернуться к предыдущим экранам. Показывая предложения с альтернативными вариантами и сопутствующими товарами или список недавно просмотренных товаров на боковой панели, вы сразу даете пользователю пути отступления, которые они могут выбрать, если товар, который они сейчас смотрят, им не подойдёт.
Товарные предложения или список недавно просмотренных товаров можно разместить на боковой панели для лёгкой навигации между продуктами. (Увеличить изображение)
Упрощённый переход от товара к товару может значительно повлиять на готовность пользователя продолжать поиски. Естественно, таким же образом можно продвигать и категорию товаров. Вспомним хотя бы пользовательские сценарии — пользователь перемещается назад и вперёд между списками товаров и страницами или может переходить от одного товара к другому?
Иногда возможность перехода от товара к товару бывает привлекательной, поскольку даёт пользователю более полное представление о предложениях сайта. Но сценарий с таким переходом также создаёт немало конфликтов. Поэтому убедитесь, что путь, который вы предлагаете для продвижения каких-либо единиц, выдерживает здоровый баланс между категорией и карточками товара, на которые переходит пользователь.
Залипающая сводка по товару
Карточки товара бывают длинными. Они могут содержать изображения, описания, спецификации, отзывы, предложения с альтернативными и сопутствующими товарами, вопросы и т.д. Все наши юзабилити-исследования показали, что больше информации почти всегда значит лучше (покуда контент хорошего качества — то есть, полезный, достоверный и более или менее точный). Это также означает, что иногда пользователь может остановиться очень далеко от основного описания продукта (это имя, цена, любые возможные варианты товара и кнопка «Купить»). Чтобы всегда показывать контекст и держать кнопку «Купить» в пределах досягаемости, поместите залипающую сводку по товару на свободном пространстве большого экрана, прикрепляя её к верхней границе видимой области, когда пользователь прокрутит страницу вниз.
Залипающая сводка по товару и кнопка «Добавить в корзину» прикреплена к верхнему краю экрана, когда пользователь прокручивает вниз длинную страницу карточки товара. (Увеличить изображение)
Залипающая сводка по товару может быть в основном слегка измененной версией дизайна, который используется для элемента списка товаров. Если же сводка закрепляется у верхней или нижней границы экрана, её можно сделать более узкой по форме. Так или иначе, смысл в том, чтобы постоянно показывать пользователю контекст, дав возможность видеть название, стоимость и какие-либо варианты товара, даже если пользователь спустился глубоко в отзывы. И, конечно, всегда держите кнопку «Добавить в корзину» в пределах досягаемости, когда пользователь читает восторженный отзыв счастливого клиента.
Залипающая сводка по заказу и поддержка
Во время оформления заказа избыток горизонтального пространства не будет использоваться, потому что такие страницы, как правило, требуют сосредоточенности, и потому что формы в несколько колонок могут привести к серьёзным проблемам с юзабилити в процессе покупки. На большом экране это море пустого белого пространства можно использовать для сводки по заказу и информации о поддержке. Сводка по заказу может быть неизменным элементом на всех этапах оформления заказа как постоянное напоминание о товарах, от покупки которых пользователь находится всего в нескольких шагах.
Сводка по заказу и детали поддержки отображаются на боковой панели, когда для них есть место на экране. (Увеличить изображение)
Между тем, детали поддержки, которые в обычном состоянии расположены в подвале, можно поднять так, чтобы они были легко доступны, если у пользователя возникнут затруднения в процессе оформления заказа. Если вы беспокоитесь о переизбытке обращений в поддержку, то можете показывать детали поддержки более избирательно, основываясь на сумме заказа и на том, сколько этапов процедуры оформления заказа уже пройдено и не возникло ли ошибок валидации.
Адаптивное масштабирование для интернет-магазинов
Поразительно, как немного интернет-магазинов на текущий момент оптимизировали дизайн своих сайтов под большие экраны. Даже 18% топовых интернет-магазинов, которые предлагают сайты, оптимизированные под большие экраны, на самом деле сделали только один маленький шаг в этом направлении. Учитывая многочисленный сегмент пользователей с большими экранами, сфера адаптивного масштабирования созрела и имеет потенциал.
Применяя адаптивное масштабирование, не забывайте о базовом принципе «одинаковый контент, разное представление». Либо даже небольшая часть контента будет важна для всех пользователей, либо она будет недостаточно важна, чтобы беспокоить пользователей на больших мониторах. То, что у пользователя больше пространства на его экране, вовсе не означает, что он хочет видеть нагромождение из контента низкого качества. Вместо этого ищите способы, как показать существующий контент по-другому, чтобы интерфейс для пользователей с большим экраном стал лучше.
11 идей, описанных в этой статье, основаны на этом принципе одинакового контента и различного представления — возьмите текущее содержимое страницы и масштабируйте его или измените расположение, где-то более значительно, где-то менее: