Хороший слайдер — логарифмический слайдер

Инфодизайн, Экранные интерфейсы

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

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

Такой же прием использовали в iPad-приложении для рисования Procreate. Ползунок, задающий, например, толщину кисти более тонко регулирует ее на нижнем конце и более резко — на верхнем.

Logarithmic Sliders

Поделиться:

Ненавистные поля ввода дат: пути к примирению с пользователями

Экранные интерфейсы

Никто не любит заполнять поля с датами. Это непреложный факт. Почему бы тогда не подойти к дизайну поиска билетов, не прибегая к привычным паттернам? Всегда ли пользователям важны даты их круиза на Аляску или перелета в Таиланд? Зачастую они ищут лучшие предложения, потому что только собираются запланировать путешествие и выбирают даты, на которые нужно будет написать заявление на отпуск. Однако если полей ввода дат не избежать, то можно воспользоваться рядом заметок Грега Нудельмана из его последней статьи на UXmatters.

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

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

Date Filters: Successful Calendar Design Patterns

Поделиться:

Новые пропорции для iOS приложений

Гаджеты, Экранные интерфейсы

44-пиксельный блок — традиционная «единица измерения» интерфейсов для iPhone. Именно он задает визуальный ритм во многих приложениях под iOS. Квадрат размером 44 × 44 пикселей считается минимальной площадью, удобной для взаимодействия пользователя с интерфейсом в силу размеров человеческих пальцев.

Автор статьи Эн Тан, проектировщик интерфейсов и специалист в области типографики, считает, что 44-пиксельный подход к дизайну приложений под iOS имеет ряд существенных недостатков.

По сути, каждый квадрат размером 44 × 44 пикселей делится на секции высотой в 11 пикселей. Этот интервал используется в качестве отступа заголовков и т.д. Таким образом, есть вспомогательный визуальный ритм в 11 пикселей. Учитывая размер дисплея iPhone, при таком подходе остается не удел кусок экрана высотой в 9 пикселей, так как 460 нельзя поделить без остатка на 11.

Строка состояния на iPhone всего лишь 20 пикселей высотой, что очень неудобно для взаимодействия с помощью пальцев. В свою очередь высота кнопок составляет 29 пикселей, что опять нарушает вертикальный ритм. Это далеко не все исключения из правила 44 пикселей.

Чтобы решить все эти противоречия в разметке, Эн предлагает 4-пиксельный ритм. Он позволяет при минимальных изменениях в уже существующих интерфейсах, внести порядок и последовательность в дизайн. На примере перепроектирования ряда привычных приложений автор показывает практичность применения описанной выше сетки.

New Visual Proportions for the iOS User Interface

Поделиться:

Распространенная иконка не всегда означает понятная

Инфодизайн, Экранные интерфейсы

Датский дизайнер Петер Стеен Хёгенхауг провел небольшое исследование того, как пользователи понимают иконки, используемые в WYSIWYG-редакторах в системах управления контентом и выяснил, что не больше 35% людей понимают типичные иконки, используемые для обозначения действия «Добавить ссылку».

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

На основании своего исследования Петер Стеен предлагает использовать надпись WWW, но в комментариях к заметке предлагают более удачный вариант — синяя подчеркнутая буква (например, так: А).

Usability in Icons

Поделиться:

Каким бы он был, интерфейс Chrome OS для планшетов?

Видео, Гаджеты, Экранные интерфейсы

Как бы выглядел интерфейс Chrome OS для планшетов? Ответ на этот вопрос визуализировал веб-разработчик Франсуа Бофор (François Beaufort). Он скомпилировал Chromium OS с функциями, оптимизированными для сенсорных экранов.

Учитывая то, что у корпорации Google есть своя ОС для планшетов (Android), не стоит рассматривать Chrome OS как потенциального нового игрока на рынке ПО для сенсорных устройств. Возможно, появление функций, оптимизированных под сенсорные экраны, связано с новой версией браузера Chrome для Windows 8, которая предназначена и для планшетов.

Поделиться:

Манифест контрастности

Инфодизайн, Экранные интерфейсы

Золтан Гоча — венгерский UX-специалист и один из авторов блога UX Myths призывает нас присоединиться к рядам повстанцев против империи зла, делающей тексты малоконтрастными. Если во время Великой октябрьской революции первым делом надо было захватить почту и телеграф, то теперь главное — интернет. И чтобы контрастная революция преуспела, для начала сделайте текст на своем сайте хорошо читаемым.

Советуем посмотреть сайт Contrast Rebellion хотя бы потому что он сам сделан красиво и интересно: видимо, на контрасте со многими другими.

Contrast Rebellion

Поделиться:

Проблема «сгиба»: попытка примирения сторон

Экранные интерфейсы

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

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

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

The Fold Exists but Does it Matter?

Поделиться:

Альтернативный дизайн The New York Times

Инфодизайн, Экранные интерфейсы

Техасский дизайнер Энди Ратледж — автор книги Design Professionalism — критикует текущее состояние интернет СМИ: большинство сайтов чрезмерно тяжелы визуально и не имеют адекватной пользовательским задачам навигации. На мобильных устройствах новости приходится открывать в специальном приложении, так как сайт не приспосабливается к устройству на котором, его открывает пользователь. Кроме того, по мнению Энди, тенденция к слияния новостных ресурсов и социальных медиа порочна, и такая информация, как комментарии и лайки бесполезна в контексте чтения новостей.

В отличие от BBC — относительно хорошего с точки зрения юзабилити примера онлайн-СМИ, который мы рассмотрели в другой заметке за сегодня, в качестве эталонного «плохиша» Энди выбрал The New York Times и практически полностью перепроектировал его с учетом высказанных в статье идей.

На картинке слева — альтернативный дизайн Энди, справа — существующий. Вы можете посмотреть интерактивный прототип альтернативного дизайна на сайте автора.

News Redux
Интерактивный прототип нового дизайна

Поделиться:

Как проектировали международный новостной портал для BBC News

Процессы и методики, Экранные интерфейсы

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

Тэмми Гур — дизайнер из Тель-Авива рассказывает о своем опыте проектирования международного новостного портала BBC: во время этой работы нужно было предусмотреть множество нюансов. В частности, Тэмми внимательно изучала структуру контента, который создается новостной службой BBC, его имеющиеся типы и категории, относительную важность и частоту появления разных типов информации. Другой трудной задачей было учесть все особенности пользователей из разных стран: различные предпочтения в чтении новостей, различные сценарии, различные виды письменности и так далее. Обо все этом Тэмми подробно написала в своей статье, снабдив ее множеством конкретных примеров и иллюстраций.

User Experience and the design of news at BBC World Service

Обновление: Проектирование и дизайн сайтов Би-Би-Си (перевод от Ярослава Бирзула)

Поделиться:

Хорошего поля ввода должно быть много

Экранные интерфейсы

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

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

Why Users Fill Out Forms Faster with Unified Text Fields

Поделиться:

Что стоит почерпнуть из интерфейсов игр

Экранные интерфейсы

В последнее время много разговоров идет об использовании и адаптации юзабилити-методик к проектированию интерфейсов компьютерных игр. Анна Салли Майлз посмотрела на этот вопрос с другой стороны: что могут проектировщики более традиционных интерфейсов почерпнуть из игр?

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

What Web Designers Can Learn From Video Games

Поделиться:

Что показать пользователю, когда результат поиска нулевой

Экранные интерфейсы

Когда пользователь что-то ищет, он постоянно сталкивается с двумя противоположными проблемами: то поиск выдает ноль совпадений, то вы получаете слишком много результатов. Подобрать верный запрос, не слишком широкий и попадающий в точку,— непростое дело. Грэг Нудельман рассказывает, как решить проблемы нулевого поиска, в своей последней книге Designing Search: UX Strategies for Ecommerce Success.

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

Эти и другие способы более подробно описаны в статье Грэга.

Site Search: Strategies for No Results Found
Обновление: Ничего не нашлось в поиске по сайту? Нет проблем (Перевод статьи от Ярослава Бирзула)

Поделиться:

Просмотр и редактирование: разделять или объединять

Экранные интерфейсы

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

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

Input Becomes Output in a New Way to Bag

Поделиться:

Половой вопрос и прочие (веб)-формы

Экранные интерфейсы

Люк Вроблевски написал небольшую серию статей, где рассматриваются все новые тонкие нюансы веб-форм.

1. Половой вопрос

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

Люк Вроблевски делится советом, как корректно спрашивать вопрос о половой принадлежности. Вместо того, чтобы предлагать пользователю выбрать из двух (Муж/Жен) или трех (Муж/Жен/Не хочу указывать) стандартных вариантов, попробуйте следующую постановку вопроса.

Предпочитаемое притяжательное местоимение:
Ее Его Их

Однако будет ли эффективным данный метод для русскоязычных ресурсов? Какой бы вариант постановки вопроса предложили бы вы?

2. Чтобы логин не был проблемой

Забытый пароль или логин – обыденное дело. Если вы никогда их не забывали, то вам в пору ставить памятник, или у вас ко всем сайтам один пароль… Недавнее исследование UIE показало, что у 45% пользователей ведущих онлайн-ритейлеров есть несколько профилей. 160 000 человек запрашивают восстановление пароля в день, и 75% этих людей не заканчивают начатый процесс покупки из-за забытого пароля…

Что же делать? Сравнительно недавно появилась возможность использовать в качестве логина Open ID. Главное, чтобы пользователи не забыли, какой профиль они связали с вашим сайтом (Twitter, Facebook, LinkIn) и вместо sign IN не случился sign UP.

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

Картинка довольно наглядно иллюстрирует процесс входа и напоминаний. Здесь для входа требуется больше одного клика, зато исключена проблема повторяющихся профилей.

The Gender Question
Design Solutions for New Log In Problems

Поделиться:

Ой, не та кнопка была!

Экранные интерфейсы

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

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

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

The Visual Weight of Primary and Secondary Action Buttons

Поделиться:

Персонифицированный почтовый клиент

Видео, Экранные интерфейсы

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

Официальная страница проекта

Поделиться:

Как мобильный «Wall Street Journal» отпугивает своих читателей

Гаджеты, Экранные интерфейсы

Якоб Нильсен опубликовал детальный анализ влияния страницы регистрации/входа на успех мобильного приложения. Под раздачу попало приложение известной деловой газеты «The Wall Street Journal». Несмотря на авторитет и вес печатного издания, мобильная версия собрала 40 000 гневных отзывов и комментариев, получив рейтинг в 2 звезды.

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

Why WSJ Mobile App Gets ** Customer Reviews

Поделиться:

Нужно ли давать выбирать область поиска

Экранные интерфейсы

Зачастую поисковые формы просят пользователя выбрать, объекты какого типа или в каком разделе он хочет искать. Автор блога UX Movement не рекомендует заставлять пользователя думать заранее и выбирать, какой тип объекта ему интересен. Система должна отображать ему полный спектр информации найденной по запросу. Результаты должны быть разделены по типам уже в выдаче, при этом наиболее релевантный тип информации должен быть заметен пользователям в первую очередь.

На наш взгляд, отличный пример такого подхода представлен на сервисе Last.fm.

Why a Scoped Search Makes Information Harder to Find

Поделиться:

Перекомпоновка страницы сайта по-человечески

Видео, Инфодизайн, Экранные интерфейсы

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

Сама компания Innocent не участвовала в проекте Майка и даже не знала о нем. При принятии дизайнерских решений Майк опирался только на свое восприятие бренда и продукта. Четырехминутное видео иллюстрирует выполненную Майком работу шаг за шагом.

Realigning Innocent drinks (пост в блоге Майка Куса)

Поделиться:

Выбираем контролы для игр под iPad

События, Гаджеты, Экранные интерфейсы

На майской конференции для разработчиков игр Flash GAMM! Алексей Копылов из UIDesign Group выступил с докладом «Могут ли виртуальные кнопки быть лучше аппаратных?». Вслед за презентацией Алексей написал подробную статью для блога международного альянса юзабилити-компаний UXalliance.

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

Не переносите бездумно игры с других платформ, используйте уникальные возможности сенсорных устройств!

Can virtual buttons be better than hardware ones: iOS experience
Могут ли виртуальные кнопки быть лучше аппаратных (презентация доклада на slideshare)
Видео выступления на конференции Flash GAMM!

Поделиться: