Меню

+380979398298

Используйте доступное пространство на экране

  • 30
  • 08
  • 2011

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

Драгоценные пиксели монитора — самая ценная недвижимость в мире. Кнопка «Add to Cart»  на Amazon имеет размеры 160×27 пикселей, это 0.003 квадратных фута (0.0003 квадратного метра) в обычном разрешении монитора 100 dpi. Вы можете застелить пол обычного американского дома, стоимость которого на данный момент составляет 160 000$, с помощью 800 000 кнопок «Buy». Даже одиночная кнопка «Buy» будет приносить много, не говоря уже о доходе от 800 000 кнопок.

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

8 лет назад я проанализировал распределение пространства у 50 главных страниц веб-сайтов и выяснил, что только 40 % экранного пространства использовалось для навигации или необходимого для пользователей контента. Было время, когда разрешения мониторов были 800×600, тогда пространство экрана было особенно драгоценным. Сегодня веб-сайты получше, да и современные большие размеры мониторов дают больше места для выполнения действий.

Однако, на сайтах часто можно встретить крошечные всплывающие окна с важными функциями, нарушающие два правила:
1.    Не нагромождайте экраны пользователей всплывающими окнами.
2.    Показывайте материал в достаточно большой области, чтобы пользователям было видно  все без прокрутки. К примеру, можете следовать указаниям для страниц продуктов электронной коммерции, где написано, как сделать фотографии действительно большими при нажатии на кнопку увеличения изображения.

Потраченное впустую мобильное пространство

Даже на большом настольном мониторе пространство в большом почете и оно должно быть использовано. Мобильные экраны являются настолько маленькими, что грех тратить пространство впустую.
Давайте взглянем на интерфейс приложения для iPad, исследование которого мы недавно проводили. Стиль приложения напоминает тот уродливый дизайн, который преобладал раньше в приложениях для iPad:

Приложение ABC News iPad: главный экран.

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

Несмотря на эти положительные начальные отзывы, пользователям не нравился экран и они переходили к альтернативному варианту, как только узнавали о его существовании. Постоянные пользователи приложения ABC рассказали нам, что предпочли стандартный вид новостей как основной.

Приложение ABC News для iPad: альтернативный главный экран с большим количеством новостей.

Это то, чем действительно пользуются люди.

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

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

Второй пример из недавнего исследования для NASA:

Приложение NASA для iPad: главный экран с раскрытым выпадающим меню.

Основной экран приложения NASA на iPad — визуализация солнечной системы. Пример не очень эффективного использования пространства, но в принципе хорошего, так как имеется привлекательное изображение предлагающее широкий выбор вариантов и четко отображающее суть приложения.

В пользовательском тестировании основной проблемой такого отображения стал риск выбора неправильного небесного тела прикосновением: было использовано лишь 60 % наших указаний по удобству пользования для отделения объектов на сенсорном экране. (См. полное описание по советам юзабилити в мобильных технологиях.)

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

Большая проблема состоит в том, что физически трудно перемещаться через длинный список миссий — выполнение этой операции будто требует почти бесконечной прокрутки. Кроме того, каждый спутник тяжело узнать, используя его изображение и акроним. Большинство спутников ничем не отличить друг от друга, если вы не фанат всякого космического, как это вполне может ожидать NASA.

Проектировщики попытались воссоздать мега меню, но не справились и не добились его преимуществ по нескольким причинам:
1.    Нет никакой классификации пунктов меню — в хорошем мега меню миссии были бы разбиты по группам со своим заголовком. Выполнив это таким образом, можно было бы намного легче найти определенные типы спутников, например, спутники для исследования внутренности планеты.
2.    Метки не имеют объяснений — например, было бы не плохо знать, что «ACE» измеряет высокоэнергетические частицы, тогда как «AIM» изучает лед мезосферы.
3.    Иллюстрации бессмысленны. Это небольшой промах, но все же.

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

Быстрое распространение маленьких, тяжелых в использовании областей для элементов управления в приложениях для iPad — частично вина Apple из-за ошибки в дизайне почтовой программы по умолчанию. Входящие письма отображаются как узкое ниспадающее меню. Это меню здорово выглядит при альбомной ориентации экрана, что позволяет пользователям быстро перемещаться между ящиком входящих писем и самими письмами.

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

Больше — Лучше

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

Есть несколько исключений из правила о том, что большой размер в пользовательских интерфейсах — это хорошо. Один пример найден на сайтах, которые заставляют развернуть окно в полный размер даже на самых больших мониторах. Как только у людей появляется 30-дюймовый монитор, они не хотят разворачивать браузер на весь экран — это очень раздражающе работать, скажем, со словарем размера 2560×1600 пикселей, который загораживает другие окна, с которыми работаешь.

И наконец-то, давайте прекратим собирать информацию через крошечный глазок. Оптимизация пользовательского интерфейса под доступное пространство на экране является ключевой стратегией того, чтобы улучшить удобство пользования (и таким образом увеличить конверсию).

Автор: Jakob Nielsen

Оригинал: http://www.useit.com/alertbox/screen-space-use.html

targa

Забавно читать именно эту статью именно на этом сайте. На широком мониторе. Сама статья служит отличной иллюстрацией к ней самой.
Ширина колонки с контетном 617px, поле слева 501px, поле справа — 801px.

puzik

рады что у вас большой монитор! но у большинства пользователей- нет :(

targa

Да я тоже конечно рад ;)
Но всё-таки у большинства не 1024px ширина монитора
http://www.liveinternet.ru/stat/ru/resolutions.html?date=2011-07-31;period=month
Как видите у большинства 1280px и более

Сейчас ширина экрана 1024 будет держаться только за счёт нетбуков и планшетов.
Но даже они выходят с уже бОльшими разрешениями (новые нетбуки всё чаще 1366х768, недавний Самсунг Галакси 1280х800)

Т.е. разрешения учеличиваются, а дизайнеры всё продолжают рисовать макеты под 2000 год.
И количество пустого места на экране растёт.

Zobook

Здорово подмечено. Но интересно, а как бы выглядел текст на экране с шириной разрешения 1440 и более, если бы он занимал эффективную часть этой ширины? Какой она должна быть эта ширина?

targa

Ужасно бы он выглядел.
Еще из книгопечатания известно, что длина строки не может быть большой (а то или глазам сильнее работать, или головой крутить). Это одна из причин почему появились колонки в газетах журналах.
http://www.umade.ru/log/2005/11/optimal-line-length/
http://habrahabr.ru/blogs/typography/67671/

Мне кажется, что сайт должен уметь трансформировать себя под разрешение окна браузера.
При большом разрешении, например, самому сайту делать нечто похожее как делает это расширение https://chrome.google.com/webstore/detail/ppelffpjgkifjfgnbaaldcehkpajlmbc?hl=ru
Показывать дополнительный контент на освободившейся площади.
Чуть увеличивать размер шрифта (автоматом или давать такую возможность юзеру), чтобы было удобнее читать.

С этой страницей ничего мегаумного не придумать (опять же ширина строки.текста).
Разве что боковую колонку (рубрики, из последнего, facebook) показывать не только вверху страницы, а сделать видимой всё время справа (как в CSS background-image: fixed).

Оставьте комментарий

Ваш e-mail не будет опубликован.