Школа юзабилити: ожирение «хрома», или «не ешь мои пиксели!»

Posted on by riasevastopol

Доподлинно неизвестно, кто придумал термин «хром», но это, вероятнее, визуальная аналогия с железным хромом, применяемым в дизайне громадных американских машин 1950-х годов: кузов автомобили был окружен блестящим хромом, покрывавшим бамперы, декоративные «плавники», ободки фар и тому подобное.

Что же такое «хром»?

  • «Хром» (Chrome) — это визуальные элементы графического интерфейса пользователя (graphical user interface, GUI), каковые дают пользователям данные о контенте, отображаемом на экране, либо предоставляют в их распоряжение команды для работы с этим содержимым, но не являются его частью.
  • Эти элементы дизайна GUI предоставляются базисной совокупностью — будь то ОС, лендинг/сайт либо приложение — и в буквальном смысле окружают пользовательские эти.

В большинстве современных GUI «хром» расположен по краям экрана, окружающим центральную область дисплея, на которой отображаются пользовательские эти. По всей видимости, и разработчики веб-браузера Chrome вкладывали подобный суть в наименование собственного детища: его интерфейс пользователя наглядно воплощает принцип «окружения».

Smart-TV: дешёвый контент как ключ к юзабилити

«Хром» на различных уровнях совокупности

Школа юзабилити: ожирение «хрома», или «не ешь мои пиксели!»

Ниже приведены кое-какие примеры «хрома», изменяющегося в зависимости от базисной совокупности:

  1. На компьютере, трудящемся под управлением Windows, базисной совокупностью есть ОС от Микрософт Corporation. В ОС Windows 7 «хром» складывается из кнопки «Пуск», панели задач, корзины и области уведомлений. Мы имели возможность бы в качестве «хрома» упомянуть и гаджеты для оформления рабочего стола Windows 7, особенно в случае если пользователь «залипает» на тех из них, что по умолчанию поставляются вместе с ОС (так поступают многие, легко по инерции либо же из-за «фальшивого авторитета» настроек по умолчанию).
  2. При применении прикладного ПО, для того чтобы, к примеру, как текстовый процессор, «хром» — это строка меню либо панель инструментов, линейка, полоса прокрутки, и разные специальные панели, такие как панель тезауруса в Word либо палитры цветовых образцов в Photoshop.
  3. В веб-браузере «хром» включает в себя адресную строчок, панель инструментов браузер, кнопки браузера, вкладки, поля состояния и полосы прокрутки.
  4. В мобильном приложении «хром» довольно часто содержит в себе строчок состояния в верхней части экрана и панель вкладок со командных значков в нижней. Время от времени в него кроме этого добавляется навигационная панель под строчком состояния.
  5. На сайте «хром» складывается из навигационных панелей, колонтитулов, логотипов, окна поиска и без того потом.

Чем угрожает ожирение «хрома», либо «Не ешь мои пиксели!»

Расплата за чрезмерное применение «хрома» понятна: он занимает пространство экрана, оставляя меньше места для целевого контента либо данных. Это особенно не хорошо для мобильных устройств, где экранное пространство ценится еще дороже, чем на планшетных либо персональных компьютерах. Но кроме того на 30-дюймовом настольном мониторе совокупный «хром» Windows и Excel оставляет в распоряжении пользователя лишь 67 строчков данных в электронной таблице вместо 80 строчков, теоретически помещающихся на экране.

Так получается, что без «хрома» пользователь был бы в состоянии заметить практически на 19% больше данных.

Пример с таблицей Excel показывает второй недочёт «хрома»: он накапливается в виде совокупностей, положенных в слои других систем, и любая из них со своим собственным «хромом».

Предположим, к примеру, что вы пользуетесь Facebook. В простом окне настольного браузера пользователя новостная лента Facebook образовывает только около 48% веб-страницы; «хром» Facebook и неиспользуемое пространство экрана съедают оставшиеся 52%. (В соответствии с отечественному определению, реклама не относится к настоящему «хрому» — по причине того, что она ненужна — но все-таки она окружает нужный контент, исходя из этого прибавим и площадь, занятую ей). В то время, когда вы дополнительно вычтите совокупный «хром» браузера и ОС, новостной ленте пользователя дастся менее 40 % от площади экрана.

«Дед науки юзабилити» Якоб Нильсен (Jakob Nielsen) в 2001 году проанализировал последовательность домашних станиц веб-сайтов и понял, что под настоящий контент выделялось ничтожные 20% пользовательского экрана. На современных громадных мониторах относительные издержки от потребления площади комбинированным «хромом» ОС и браузера выглядят менее раздутыми, так что 40% экрана, остающиеся для Facebook, возможно, достаточно репрезентативны для большинства больших веб-сайтов.

Потому, что накапливающийся «хром» обычно «съедает» более половины имеющихся в отечественном распоряжении пикселей, то из этого следует первый принцип: остерегайтесь «ожирения» «хрома»!

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

  • Используете несложную и надежную операцию для активации «хрома» (не используете алогичные либо допускающие случайное срабатывание жесты).
  • Предлагаете неразрывную логическую последовательность действий так, дабы существование скрытого «хрома» закрепилось в долгосрочной памяти пользователя через отсутствие и избыточное повторение жестов каких-либо отклонений либо исключений, нарушающих процесс обучения.

Мобильная реклама: как выбрать верное размещение?

Преимущества «хрома»

Наровне с вышеперечисленными недочётами «хром» владеет и большими преимуществами:

  1. Он расширяет возможности пользователей, предоставляя в их распоряжение постоянный комплект опций и команд, неизменно находящихся на виду (либо, по крайней мере, легко обнаруживаемых). «Хром» остается на одном и том же месте, избавляя пользователей от необходимости искать его. Помимо этого, пользователи становятся свободны от причуд определенных веб-прихотей и страниц дизайнеров; вот одна из обстоятельств того, что кнопка «Назад» есть одной из самые популярных функций в сети.
  2. Хром» возможно убыточен с позиций применения экранного пространства, но это замечательный инструмент в руках пользователя, талантливый послужить в качестве мгновенно появляющегося «аварийного выхода» с неприятных либо ненужных страниц.
  3. «Хром» предлагает комплект универсальных команд, каковые трудятся со всеми различающимися типами контента и данных, появляющихся внутри его инфраструктуры. Потому, что команды неизменно однообразны, пользователи тратят на их изучение меньше упрочнений, что свидетельствует, что они смогут сосредоточиться на собственных настоящих потребностях, а не на сотрудничестве с компьютером.
  4. «Хром» содействует стандартизации пользовательских интерфейсов, что облегчает обучаемость и оказывает помощь пользователям ощущать себя полновластными хозяевами собственного опыта (само собой разумеется, это относится лишь к тем случаям, в то время, когда вы как разработчик интерфейса придерживаетесь стандартов, а не собственный изобретаете личный причудливый «хром», дабы ввести в заблуждение пользователей).

В конечном итоге «хром» нужен для юзабилити. В случае если, само собой разумеется, не переусердствовать.

Максимизация соотношения контента к «хрому»: за счет чего она возможно достигнута?

Сущность неприятности: на громадном экране сокрытие «хрома» оказывает значительное влияние на понятность и издержки сотрудничества фактически без улучшения соотношения контента к «хрому».

Один из читателей блога компании Nielsen Norman Group отправил сообщение, в котором он жаловался на актуальный тренд «страшных окон, лишенных меню» (horrible menuless windows) и сравнивал подобные интерфейсы с машинами, в которых бы все функции приборной панели были бы запрятаны в коробке для перчаток («в бардачке», выражаясь на водительском сленге). Его досада была позвана новой настольной версией Firefox, которая «копирует браузер Chrome» и скрывает функции меню под иконкой-«гамбургером».

Меню-«гамбургер» в браузере Firefox скрывает все простые опции меню и заменяет ветхую панель меню в верхней части окна

Меню типа «гамбургер» есть только одним воплощением текущей тенденции уменьшать количество «хрома» на рабочем столе. Анализ популярных сайтов, совершённый Якобом Нильсеном, указал на тот факт, что «элементы» и хром навигации на данный момент, в большинстве случаев, занимают меньшую долю домашней страницы если сравнивать с 2001 годом.

За этим трендом стоит «антихромное» перемещение, вдохновляющееся предположением, навеянным практикой разработки мобильных интерфейсов: отдавать контенту приоритет над «хромом». Само собой разумеется, пользователи заходят на сайты и посадочные страницы для, того, дабы взаимодействовать с их содержанием, а не восхищаться умным интерфейсом пользователя, так что в конечном итоге контент был и остается «королем». Но в случае если это так, то отчего же скрывать «хром» не хорошо?

Будущее UX: невидимые интерфейсы

Издержки сокрытия «хрома»

Истина содержится в том, что «хром» снабжает помощь сотрудничества пользователей с контентом и разрешает им выяснить, есть ли сайт нужным либо нет. Скрытие «хрома» несет в себе большие издержки для пользователей:

  1. Пользователи должны открывать «хром». Независимо от того, скрыт ли он под кнопкой неспециализированного меню либо под запланированным разработчиками жестом (как в Windows 8 для сенсорных экранов) люди должны додуматься до того, что необходимо кликнуть по конкретной кнопке либо выполнить жест, дабы раскрыть «хром».
  2. Кроме того по окончании того как они нашли «хром», пользователи должны не забывать о том, как получить доступ к нему позднее в течение той же сессии. Интуитивное обнаружение возможностей навигации предпочтительней их распознавания через повторный вызов — так гласит одно из 10 правил юзабилити.
  3. На протяжении тестирования Windows 8, совершённого сотрудниками Nielsen Norman Group, довольно часто замечалось, что пользователи выявляют, как получить доступ к «хрому», а позднее об этом забывают. Вправду, «С глаз долой».

Кроме того если они найдут «хром» запомнят, как получить доступ к нему, пользователи пострадают от увеличения издержек сотрудничества, нужного чтобы воспользоваться функциями, дешёвыми через интерфейс пользователя. Для меню типа «гамбургер» им придется сперва кликнуть иконку вызова меню, а после этого выбрать необходимый вариант, вместо того, дабы легко сходу надавить на выбор нужной функции.

Само собой разумеется, вы имеете возможность возразить — какие конкретно неприятности в том, дабы сделать еще один дополнительный клик? Вправду, значительно чаще это воздействие не требует особенных упрочнений, но оно скоро может стать раздражающим, в случае если пользователям нужно будет получать доступ к этим скрытым опциям.

Skype для Windows 8. Чтобы получить доступ к настройкам звука, пользователям необходимо кликнуть 3 раза (и отыскать в памяти о том, как позвать всплывающую панель Charms Bar): сперва переместить курсор мыши в верхний правый либо нижний правый угол экрана, дабы активировать прелести Charms Bar, по окончании кликнуть по иконке «Настройки», а после этого надавить на «Опции» (Options) (на скриншоте не продемонстрировано).

Skype для Windows 7. Аудионастройки находятся в меню вызовов: пользователям необходимо кликнуть два раза, для получения доступа к ним.

Эргономичный интерфейс пользователя, либо Война «Определить» против «Отыскать в памяти»

Соотношение контента к «хрому» и размер экрана

Через чур много «хрома» — это не хорошо, через чур мало — также плохо. Что нам необходимо максимизировать, так это не количество контента на экране, в частности соотношение контента к «хрому». И это соотношение изменяется в связи с размером экрана.

На мелком дисплее панель навигации с 8 пунктами легко потребит более половины дешёвого экранного пространства; она может сместить контент и заставить пользовать воспользоваться прокруткой, для получения представления о веб-странице.

Соотношение контента к «хрому» в этом случае через чур мало, так что имеет суть постараться расширить его, скрыв кое-какие функциональные возможности под кнопкой меню. (Кроме того на маленьких дисплеях сокрытие навигации в меню-«гамбургере» не есть лучшим решением: люди, если не видят чего-то, то скоро его забывают; повторное обнаружение меню все-таки требует от них приложения чуть большего количества упрочнений. Изучения интерфейсов, ориентированных на управление жестами, совершённое Nielsen Norman Group, продемонстрировали, что доступ пользователей к невидимому «хрому» заметно затруднен. Но на совсем маленьких экранах, таких как дисплеи «умных часов» (Smartwatches), управление жестами остается единственным вероятным вариантом. Экранные кнопки через чур много места и смогут уменьшить соотношение контента к «хрому» до непозволительно малых значений.)

На значительно большем настольном мониторе панель навигации из 8 элементов будет минимально оказывать влияние на соотношение контента к «хрому». Да, соотношение стало бы чуть лучше, в случае если навигация скрыта, но не так лучше, дабы оправдать издержки сокрытия «хрома». Помимо этого, мелкую иконку несложнее потерять из виду на громадном экране, чем на мелком.

В конечном итоге, в случае если пропускная свойство канала связи между устройством и человеком мелка, нам необходимо сжать данные так, дабы послать так большое количество значимого содержания, сколько мы сможем уместить в нескольких пикселей. Так как сокровище информации по большей части зависит от контента, то имеет суть минимизировать «хром». Но данный довод несостоятелен для громадных экранов.

Шаблоны дизайна для десктопов, уменьшающие «хром», но не воздействующие на соотношение контента к «хрому»

Кое-какие из последних статей в не Nielsen Norman Group посвящены тенденциям разработки «настольных» GUI, инициированным мобильным дизайном. В базе этих трендов лежат ошибочные идеи об улучшении соотношения содержимого к «хрому» на рабочем столе десктопа. Воплощение этих фальшивых концепций на практике ведет к минимальному трансформации упомянутого соотношения, но жертву в жертву ему приносится юзабилити GUI.

1. Меню-«гамбургер» для навигации

Популярность иконки-«гамбургера» на рабочих столах десктопов была позвана ее повсеместным распространением на мобильных устройствах и повышением количества адаптивных сайтов, пробующих поддерживать однообразный дизайн интерфейса на любых типах устройств. К сожалению, маленький размер меню-«гамбургера» — довольно громадного рабочего стола — затрудняет обнаружение этого элемента GUI. Подобное меню несложнее найти на мелких дисплеях.

Однако кроме того на сотовых телефонах многие пользователи не имеют доступа к функциям, скрытым в меню, либо проверить его.

2. Иконка увеличительного стекла вместо окна поиска

замена окна и Ликвидация поиска его иконкой лупы стала фактически стандартом для мобильных интерфейсов. Таковой подход не работает на громадных настольных мониторах: пространство легко через чур громадно, дабы пользователи набрались терпения для «охоты» на мелкую иконку поиска. В случае если разглядывать вопрос об применении ее на рабочем столе ПК, то направляться иметь в виду, что экономия пространства как правило не оправдывает утрату доступности поискового инструмента.

3. Неподписанные иконки

Вы имеете возможность думать, что иконки предоставляют пользователю более захватывающий опыт сотрудничества, но в действительности многие из них намного более неоднозначны по смыслу, чем слова. В то время, когда иконки либо изображения употребляются для навигации сами по себе, без сопроводительных текстов, сохранение свободного пространства не оправдывает потерю «информационного запаха».

Создание мобильной навигации независимо от гамбургер-меню

Вместо заключения

Графические пользовательские интерфейсы для десктопов и мобильных устройств имеют различающиеся ограничения, благодаря чего подчиняются разным правилам юзабилити. Компромиссы, на каковые идут дизайнеры, проектируя мобильные GUI, нельзя обобщать на рабочие столы ПК (и напротив). Перед тем как примкнуть к лагерю «бесхромных» разработчиков, поразмыслите два раза. Спросите себя: данный интерфейс с уменьшенным числом «хрома» усиливает соотношения контента к элементам управления?

В случае если ответ «нет», то сделайте «хром» видимым. И не забывайте: для одного и того же дизайна ответ на вопрос, заданный выше, возможно разным для различных устройств.

Высоких вам конверсий!

По данным: nngroup.com, image source gregdavidphotos

Случайные статьи:

Основы юзабилити (usability) сайтов


Подборка похожих статей:

riasevastopol

More Posts