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

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

Когда пользователь что-то ищет, он постоянно сталкивается с двумя противоположными проблемами: то поиск выдает ноль совпадений, то вы получаете слишком много результатов. Подобрать верный запрос, не слишком широкий и попадающий в точку,— непростое дело. Грэг Нудельман рассказывает, как решить проблемы нулевого поиска, в своей последней книге 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!

Поделиться:

Тенденции будущего: вебсайт или приложение?

Общедоступность, Остальное, Экранные интерфейсы

Интересные размышления на тему противостояния вебсайтов и приложений. Автор поднимает вопрос: вымирающее ли животное браузер, которое требуется занести в красную книгу или все-таки у него есть шанс на выживание. Статья содержит много примеров из жизни, цифр и диаграмм, а также данных по … Китаю, как одной из самых продвинутых стран в плане технологий. Не забыт в статье и HTML5. Одним словом, приготовьтесь к длительному, но познавательному чтению.

Future Trends: Are Browsers Becoming a Thing of the Past?

Поделиться:

Все об адаптивном дизайне в маленькой адаптивной книжке

Книги, Общедоступность, Гаджеты, Экранные интерфейсы

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

Последний модный термин, относящийся к этой тематике — «Responsive design». Помимо тянущихся столбцов «отзывчивый» дизайн предлагает огромный простор для творчества: от динамически тянущихся картинок до полностью изменяемой в зависимости от размеров окна структуры страницы. Еще один интересный вариант «резиновости» — изменяющие размер видеоролики. О том, как их реализовать, написано в статье в блоге Web Designer Wall.

Итан Маркотт написал книгу, в которой детально описаны все элементы responsive design. Сама книга тоже имеет не совсем стандартный формат: помимо бумажной версии есть электронная, в частности вариант в формате epub содержит видеоролики с примерами.

Responsive web design (страница книги на сайте издательства)
CSS: Elastic Videos

Поделиться:

Не мусори на экране пользователя своего! О рациональном использовании пространства

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

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

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

Подробные примеры вы можете прочитать в недавней заметке Якоба.

Utilize Available Screen Space

Поделиться:

Превью интерфейса Windows 8

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

Сенсорные дисплеи занимают все большее место в жизни пользователей, и разработчики Windows 8 в своей первой презентации интерфейсов новой операционной системы уделяют основное внимание работе на планшетных компьютерах и их старших и младших сенсорных братьях.

Новый рабочий стол заимствует множество идей из интерфейса Windows Phone 7: теперь виджеты и иконки приложений будут представлены в виде панелей-плиток, а переключаться между приложениями можно будет, проводя пальцем от края экрана к его середине.

Правда, место нового интерфейса в системе в целом пока не совсем ясно, так как классический рабочий стол останется доступен в системе. Есть опасения, что плитки будут запускаться как оболочка-надстройка над более традиционным интерфейсом, какие зачастую бывают довольно неуклюже интегрированы с основной системой. Но это наверняка не последнее превью интерфейса Windows 8, и у разработчиков есть еще много идей, о чем намекает «цензурированная» часть коллажей на стене комнаты, где записывался видеоролик.

Интерфейс Windows 8 (заметка на Хабрахабре)
Previewing ‘Windows 8’ (статья в Microsoft News Center)

Поделиться:

Не все плееры одинаково полезны

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

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

На блоге Habrahabr опубликовали перевод французской статьи Ergonomie des players de musique en ligne, которая рассказывают об эргономических характеристиках проигрывателей потокового аудио, которые делают плеер удобным для пользователей и являются залогом успеха самого сервиса.

Интерфейс аудиоплейера: эргономика и дизайн

Поделиться:

Я помню чудный интерфейс… О человеческой памяти

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

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

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

What makes an image memorable?

Поделиться:

Да здравствует простота!

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

«Простота есть главное условие красоты моральной»,— говорил Л.Н. Толстой. И именно ее — простоты — зачастую сложнее всего добиться. Заказчики постоянно хотят вместить как можно больше функционала и надстроек: в итоге получаются интерфейсы-теремки, которые того и гляди развалятся. Однако, чрезмерное урезание функционала ведет все к той же утрате простоты. Для того, чтобы сделать элементарные действия, приходится идти окольными путями, так как «шорт кат» решили убрать, чтобы очистить и упростить интерфейс. Круг замыкается.

Так как же вырваться из этого порочного круга и добиться ускользающей простоты? Серия статей Laws of Simplicity (Правила простоты) пошагово разбирает постулаты, высказанные известным графическим дизайнером John Maeda в одноименной книге The Laws of Simplicity .

Для того, чтобы быстро проникнуться культом «простоты», посмотрите запись выступления колумниста David Pogue из New York Times на конференции TED. Дэвид буквально исполнил оду простоте, высказал респект Apple и вынес выговор Microsoft.

Laws of Simplicity — Law 1: Reduce

Поделиться:

Android vs. iOS, кто сильнее?

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

Android и iOS — наиболее популярные платформы для смартфонов. Для них доступно огромное количество приложений. Однако зачастую Android остается в тени iOS. Есть ли тому адекватные причины? Почему не милы пользователям интерфейсы под Android, действительно ли приложения менее удобны, виновата ли в том сама экосистема Android? Или виной тому нерадивые разработчики и предрассудки пользователей?

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

Android vs iOS; A Usability Battle

Поделиться:

Фреш по пятницам: Войдите и выйдите

Экранные интерфейсы, Юмор

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

Что-то вроде: «Вы не можете выкопать яму, потому что она уже выкопана. Закопайте ее и выкопайте снова».

Поделиться:

HTML 5 в деле

Остальное, Экранные интерфейсы

Разговоры о внедрении HTML 5 ведутся уже очень давно. В блоге Hongkiat опубликована подборка веб-приложений, которые на деле активно используют эту версию языка разметки.

Действительно ли убийца Flash уже стоит на пороге? Знакомьтесь с возможностями HTML 5 и примеряйте их к своим проектам.

HTML5-Powered Web Applications: 19 Early Adopters

Поделиться:

Дизайн с душой

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

В блоге lovely ui регулярно публикуются скриншоты красивых мобильных интерфейсов.

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

Shopping list on Pepper Plate Recipe, Menu & Cooking Planner

Поделиться: