MS Pivot — новый способ путешествия по Сети

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

Гэри Флейк из Microsoft Live Labs выступил на конференции TED 2010 с рассказом о Pivot — средстве просмотра больших массивов данных, позволяющем удобно сортировать, фильтровать и просматривать в духе zoom-интерфейсов исследовать большое количество графической и текстовой информации.

Вы можете скачать Pivot на официальном сайте приложения и попробовать его в действии, если у Вас установлена Windows Vista или более новая ОС с поддержкой технологии Aero.

Microsoft Live Labs Pivot

Редизайн iPhone-приложения Qiwi

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

Владимир Попов (пользователь Хабрахабра fearout) разместил на сервисе заметку о редизайне iPhone приложения Qiwi, который он сделал, по его словам, на общественных основах, «для тренировки».

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

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

В комментариях один из пользователей показывает еще один вариант редизайна того же приложения.

Интерфейс программы Киви для Айфона

Кто живет в подвале, или как создать правильный «футер»?

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

Все привыкли, что на сайте должен быть «подвал» (footer), то есть сетевой аналог нижнего колонтитула в бумажных изданиях. Он помогает пользователю определить нижний край страницы и понять, что страница загрузилась пользователю, а дизайнеру — создать гармоничный и законченный дизайн страницы. Но какая же информация должна жить в подвале и как ее лучше отобразить?

Блог Webdesigner Depot подготовил обширный обзор различных вариантов дизайна футеров, классифицировал их основные функции (дополнительное меню действий, карта сайта, рекламное место, информация об авторе, место для выходных данных сайта), описал принципы построения подвалов и вещи, на которые стоит образать внимание при их проектировании и дизайне.

How to Build a Footer That Doesn’t Stink

Повествовательный формат для веб-форм

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

Известного эксперта по проектированию веб-форм Люка Вроблевского очень вдохновил необычный дизайн формы регистрации на сайте Huffduffer.

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

Разработчики vast.com провели A/B-тестирование стандартной и повествовательной формы для отправки запроса продавцу автомобиля (правда, в отличие от Huffduffer они использовали более привычное оформление полей ввода). Они утверждают, что повествовательный вариант повысил конверсию более чем на 25%.

Форму, использованную Huffduffer, Люк недавно обсуждал также в подкасте Джерида Спула Spoolcast.

«Mad Libs» Style Form Increases Conversion 25-40%
SpoolCast: Moving Beyond Static Forms with Luke Wroblewski

Концепция ОС Microsoft Locus

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

Австралийский дизайнер Бартон Смит в рамках одного из конкурсов для дизайнеров интерфейсов подготовил видеоролик, демонстрирующий концепцию «геозависимой» (location-aware) операционной системы Locus OS.

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

Location-based operating system concept: «Locus OS»

Формы ввода в мобильных устройствах

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

С появлением новых поколений смартфонов и, в первую очередь, мультитач-устройств под управление iPhone OS и Android, возникло множество новых идиом взаимодействия, связанных с заполнением форм.

Люк Вроблевский описал все эти нововведения в рамках одной статьи. Среди них:

• автоматическое масштабирование к активному элементу ввода;
• изменение клавиатуры в зависимости от формата вводимых данных;
• отображение текущей вводимой буквы при максировке паролей;
• нетипичный вид раскрывающихся списков;
• интересная реализация ввода «составных» данных
• голосовой ввод

Web Form Innovations on Mobile Devices

Фильтрация по количественным параметрам

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

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

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

Numeric Filters: Issues and Best Practices

Повышение конверсии путем проектирования форм

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

Гевин Дулан (Gavin Doolan) из команды разработки Google Analytics написал прекрасную статью о проектировании форм. Но сначала Гевин привел простой график:

График показывает доходность (ROI – возврат инвестиций) перепроектирования различных частей сайта :

• Менее всего приносит доход, как ни странно, изменение главной страницы сайта (голубой прямоугольник в графике). Связано это с тем, что большинство сайтов пользователи начинают изучать не с главной страницы, а с внутренних – пользователи попадают на них с помощью поисковых систем. Эти внутренние страницы называются Landing Pages (страницы входа на сайт).
• Вложение в Landing Pages более оправдано (средний прямоугольник в графике) – особенно надо обратить внимание на систему навигации.
• Наиболее критичной частью сайта являются формы, каждая из которых является реальным препятствием для посетителя, который движется в направлении своей цели.

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

Было:

Стало:

Improve your web-forms and increase conversions

Книга «Проектирование веб-интерфейсов»

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

Издательство «Символ-Плюс» радует переводом актуальной книги. Доступна для заказа (по сниженной цене) книга Билла Скотта (Bill Scott) и Терезы Нейл (Theresa Neil) «Проектирование веб-интерфейсов».

Проектирование веб-интерфейсов
Полноразмерные иллюстрации к книге, которые можно скачать отдельно
Designing Web Interfaces: Principles and Patterns for Rich Interactions (оригинал книги)

Реализм в дизайне пользовательских интерфейсов

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

Пользователь drive опубликовал на Хабрахабре перевод статьи швейцарского специалиста Лукаса Матиса (Lukas Mathis) посвященной тому, какой уровень реализма графических изображений оптимально использовать внутри пользовательских интерфейсов.

Реализм в дизайне пользовательских интерфейсов
Realism in UI Design (оригинал статьи)

Что же это такое — спецификация на пользовательский интерфейс?

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

В интернете довольно сложно найти примеры спецификаций на пользовательский интерфейс. Тем ценнее статья Пабини Габриель-Пети (Pabini Gabriel-Petit), которая не только привела готовые примеры, но и объяснила, каким требованиям спецификации должны отвечать.

В самом начале статьи Пабини разбирается с причинами плачевного состояния пользовательских интерфейсов большинства цифровых продуктов. Но затем сразу переходит к интересному примеру — интерфейсу фильтра ТВ-передач, расположенному на сайте fancast.com. Пабини берет небольшой кусок интерфейса и показывает приемы, с помощью которых можно его описать.

Кстати, в конце статьи имеется отличный перечень ссылок на промышленные стандарты пользовательских интерфейсов.

Главный вывод из статьи — делайте спецификации таким образом, чтобы разработчикам было сложно неверно интерпретировать ваши интерфейсные идеи.

Specifying Behavior: With an Example Menu Behavior Specification

Тенденции в дизайне навигационных меню

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

Smashing magazine опубликовал подборку интересных решений в дизайне навигационных меню.

Они выделили следующие модные тенденции:

• Трехмерный дизайн меню
• «Пузыри», выделяющие прямую речь в стиле комиксов
• Закругленные уголки
• Массированное применение иконок в навигации
• Анимация, запускаемая Javascript’ом
• Кнопки необычных форм
• «Листалка» страниц в качестве основной навигации

Showcase Of Modern Navigation Design Trends

Перепроектирование формы заказа в онлайн-магазине Apple

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

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

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

The Apple Store’s Checkout Form Redesign

Юзабилити-марафон 2: видеозапись выступления Эми Куэва

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

Вашему вниманию предлагается видеозапись вебинара Эми Куэва из компании Mad*Pow, США на Юзабилити-Марафоне 2, который посвящен инструментам для создания поисковых интерфейсов и фильтров (Search & Filter Interface Round Up: Examples & Best Practices).

Видеозапись вебинара:

Стенограмма вебинара на русском языке:

Презентация вебинара:

За пределами юзабилити-лаборатории: крупномасштабные исследования опыта взаимодействия

Реклама в результатах поиска — лучшие практики

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

Как максимально эффективно использовать рекламу в результатах поиска по сайту? Грег Нудельман (Greg Nudelman) и Фрэнк Гуо (Frank Guo) знатоки этой темы, и поэтому поделились своим опытом в серии из двух статьей.

Make More Money: Best Practices for Ads in Search Results: Part 1
Make More Money: Best Practices for Ads in Search Results: Part 2

Краткая история жестовых пользовательских интерфейсов

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

Интерфейсы основанные на жестах становятся все более и более популярными. Тали Краковски (Tali Krakowsky) перечислил основные вехи развития этой индустрии начиная с 1977 года, когда был создан первый сенсорный экран. Вопрос на засыпку — знали ли вы, что еще в 1994 году компания IBM создала первый смартфон с полностью сенсорным управлением? Этот смартфон позволял отсылать и принимать факсы, работал как сотовый телефон и пейджер, а также служил записной книжкой.

A Very, Very Brief History Of Gestural Interfaces

Загибать уголки — дурной тон?

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

Некоторые считают, что загибать уголки страниц в книге — откровенно дурной тон. Однако загнутые уголки в интерфейсах становятся все более распространенным приемом. Причем он используется не только на сайтах, но и, например, в мобильных приложениях, таких как Google Maps для iPhone.

Turn the Page

Windows 7 и MacOS X Snow Leopard: что нового с точки зрения юзабилити?

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

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

Мифический простой интерфейс

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

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

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

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

Применительно к мобильным сервисам мораль это статьи в том, что радикальное урезание функциональности до наиболее базовой не всегда идет продукту на пользу.

Choosing simple design isn’t so simple

Стрелка как элемент интерфейса

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

Джонатан Фоллетт написал для UXmatters статью о стрелках, которые всегда встречались в интерфейсах на самых разных ролях.

The Ever-Evolving Arrow: Universal Control Symbol