Интерфейсы

индекс
44,19

Обзор свежих материалов, апрель 2010

Этот материал открывает серию ежемесячных обзоров свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Уже около года регулярно собираю, публикую и расшариваю эти ссылки в тематической Friendfeed-комнате User Experience, но помимо общей ленты полезным оказался и дайджест. Это первый выпуск — апрель 2010 года.

Обзор свежих материалов, апрель 2010


Методы и практики


Faceted Finding with Super-Powered Breadcrumb
Greg Nudelman предлагает интересный подход к построению навигации в интернет-магазинах и интернет-каталогах. Он показывает несколько примеров доработанных «хлебных крошек», которые позволяют гибко фильтровать список товаров и результатов поиска.

Controlling Privacy on Social Networking Services
Matthew C. Clarke описывает проблемы современных социальных сервисов с приватными данными пользователями — в первую очередь то, как сложно управлять их настройками. А также предлагает несколько решений проблемы.

UXmatters Q&A — Putting a Paper Form Online / Avoiding Dropouts and False Information / Applying Aesthetics
Группа специалистов по интерфейсам отвечает для UXMatters на ряд вопросов о построении форм. Как правильно перенести бумажную форму в онлайн, уменьшить количество отказов при заполнении и избавиться от заполненных «на отвяжись» полей.

Designing with Lenses
Методика использования «линз» в проектировании и дизайне от Билла Скотта из MeeBo. Способ позволяет посмотреть на интерфейс под разными углами, сопоставив его по одной из «линз» (например, точный или схематичный показ лиц). Коллекция паттернов «линз» доступна на сайте проекта.

Designing for iPad — Reality Check
Компания Information Architects рассказывает о процессе проектирования и дизайна для iPad. Команда успела собрать неплохой опыт работы в этом направлении и дает оценку адекватности официального руководства по интерфейсу.

Eye Tracking — Best Way to Test Rich App Usability
Обзор методики тестирования с помощью eye-tracking, ее особенностей и ограничений от James Breeze. Он рассказывает о возможных способах проведения eye-tracking-тестирования и эффекте каждого из них.

Инструменты


Mobile Chart Options
Theresa Neil собрала отличную подборку библиотек и фреймворков, позволяющих создавать диаграммы и графики для мобильных браузеров. Отличный способ расширить возможности мобильных сайтов и веб-приложений.

Google Drawings Wireframe Stencil
Набор wireframe-стенсилов для онлайн-инструмента проектирования Google Drawings. Хотя он изначально и не был предназначен для работы над интерфейсами и сильно уступает специализированным инструментам, его возможности совместной работы выглядят интересно.

Putting Together Simple Wireframes Using OmniGraffle
Краткое и емкое руководство от компании CX Partners по проектированию с помощью OmniGraffle. 3-страничный PDF-документ предлагает пошаговое руководство по созданию wireframes.

Паттерны


Touch Gesture Reference Guide
Luke Wroblewsky из Yahoo! собрал удобный справочник по жестам, использующимся для управления современными тач-интерфейсами. К документу прилагается коллекция из дюжины чужих стенсилов и гайдлайнов на эту же тему.

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

Design Patterns for Mobile Faceted Search
Greg Nudelman описывает интересный подход к проектированию многокритериального поиска в мобильных интерфейсах. В открывающем серию статей материале он описывает несколько приемов, позволяющих уложить расширенную функциональность в ограничения телефонных экранов и браузеров.

Maps in Modern Web Design — Showcase and Examples
Обзор примеров реализации карт в вебе и набор советов по их правильному использованию. Автор статьи Zach Dunn рассказывает о способах использования карт и дает примеры для каждого из них.

Процесс


Sustainable UX (презентация Nick Finck)
Презентация Nick Finck с конференции UX Web Summit о процессе проектирования. Хотя тема раскрывалась уже сотни раз, это один из лучших материалов по теме с хорошими иллюстрациями и удачной структурой.
Planning Your UX Strategy
Renato Feijo пишет о том, как постепенно интегрировать процесс проектирования в общую работу компании. Он рассматривает 6 степеней взаимодействия — от полного безразличия и первичного интереса к теме до активного вовлечения специалистов и их полной интеграции.

Managing User Experience Teams
Блог Margaret Gould Stewart и Graham Jenkin из Google, рассказывающий об управлении интерфейсными проектами в компании. Хотя многие материалы описывают общие для проджект-менеджмента вещи, в них упоминается много интерфейсной специфики.

Using a Collaborative Parallel Design Process
Описание процесса совместного дизайна и практики его применения от Mike Myles. Он рассказывает, как группа специалистов по интерфейсам, их коллег из других отделов и пользователей могут совместно прорабатывать интерфейс.

Кейсы


The FedEx Journey
Tom Wicinski и Brice Stokes из FedEx рассказывают о том, как построен процесс работы над интерфейсами в компании. А также том, как он выходит за рамки компьютеров в более общую сторону customer experience.

The Evolution of a GUI and the Pulsating Life of a UX
Рассказ о процессе проектирования и дизайна настольного файл-менеджера Tabbles. Показано много промежуточных концепций интерфейса, что позволяет увидеть развитие идеи.

Case Study of Agile and UCD Working Together
История редизайна крупного информационного сайта Computer Weekly. Хотя agile тут упомянут скорее как модное слово (описания взаимодействия команд почти нет), в статье приведен полезный график проекта.

Теория


Navimation — Exploring Time, Space & Motion in the Design of Screen Based Interfaces
Jon Olav H. Eikenes и Andrew Morrison предлагают новый термин «навимация» для современных интерфейсов. Они активно используют анимацию для того чтобы показать переходы между экранами, объектами и состояниями системы.

Eight Principles of Information Architecture (презентация Dan Brown)
Хорошая обзорная презентация Dan Brown о ключевых принципах информационной архитектуры — внимание к контенту, большой выбор усложняет выбор, постепенное раскрытие информации, множественные точки входа и способы классификации и т.д.

История


Into the Groove — Lessons from the Desktop Music Revolution
Dave Cronin из Cooper Consulting описывает историю развития интерфейсов специализированных программ для музыкантов — от аналоговых и простейших цифровых устройств до сложных компьютерных программ и необычных инструментов.

Bob and Beyond — A Microsoft Insider Remembers
Подробный рассказ из первых рук об истории одного из самых спорных и осмеиваемых интерфейсов. Его часто и много критикуют, хотя заложенная в MS Bob концепция была более чем интересной и должна была помочь неопытным пользователям разобраться с компьютерами. В серии материалов доступны история запуска продукта и галерея скриншотов интерфейса.

History of the Button (презентация Bill De Rouchey)
Презентация Bill De Rouchey, которая рассказывает об истории кнопок. В ней приведено множество примеров, показывающих развитие от механических инструментов до компьютерных интерфейсов.

Тренды


Natural User Interfaces are Not Natural
Дон Норман размышляет о тренде «естественных» интерфейсов и приводит несколько причин о том, почему они не совсем естественные.

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

Свежие ссылки можно также отслеживать по мере появления во Friendfeed-ленте User Experience.
+82
5 мая 2010, 11:49
180

комментарии (30)

–1
Rodman #
Пошел изучать!
Намана получилось!
0
Pervuhin #
Согласен, добавил в избранное. Вечером подробнее изучать.
0
StrangeAttractor #
> Mobile Chart Options
> Theresa Neil собрала отличную подборку библиотек и фреймворков,
> позволяющих создавать диаграммы и графики для мобильных браузеров.
> Отличный способ расширить возможности мобильных сайтов и веб-приложений

В Сети навалом фреймворков для рисования всевозможных навороченных (в т. ч. т.н «трёхмерных» графиков), но загвоздка в том, что всё это одни и те же яйца с разными декорациями. Все они строят графики y=f(x). Тем временем найти что-то для отрисовки z=f(x,y) меня в итоге заставило только то, что было жалко сдаваться после уже вложенного времени (а побудила начать искать неприязнь к велосипедизму (ну не верил я что никто эту задачу ещё не решил, и правильно) и стремление быть «стандартным программистом» bit.ly/biJ1xB.
+2
XaBoK #
Нашел интересные, а главное полезные идеи, спасибо.

Ложка дёгтя: Слишком много всего, может стоило разбить на несколько постов с более подробным описанием?
+1
jvetrau #
Материалов за месяц проходит очень много, то что попадает в дайджест — это хорошо если 5-10% от всего просмотренного. Такой формат оказался оптимальным с точки зрения затраченных сил и полезности. А желающие вполне могут сделать перевод на основе одной из ссылок :)
+1
ognevsky #
может лучше кажду неделю? действительно очень сложно так вот прямо взять, да целый месяц сидеть изучать статьи…
0
jvetrau #
У меня на такую оперативность не хватит времени :) Опять же, если есть желание получать эти ссылки быстрее и в меньших порциях — есть оперативная лента, где они появляются в первую очередь. И уже в конце месяца я собираю все ссылки из нее и формирую в виде дайджеста.
0
gutwulf #
Спасибо за подборку — почитаю обязательно.
–1
leg #
Осталось совсем немного — перевести всё на русский язык.
0
Fanamura #
лучше учить английский, так все будет гораздо лучше
0
jvetrau #
Это верно — материалов интересных тонна, переводить все не хватит никаких сил и времени.
0
leg #
это был намёк насчёт поста. А английский я знаю.
+1
webdiktor #
Первая статья очень понравилась. Так бы всем интернет-магазинам сделать.
Продолжайте публиковать избранные, а то общее количество слишком большое.
Спасибо.
0
jvetrau #
Решение там интересное, но на практике вряд ли эффективное — чтобы обнаружить этот интерфейс и научиться им пользоваться (при условии, что он не распространен по сотням сайтов), требуются усилия со стороны пользователя. А как показывает опыт, люди не готовы тратить время на обучение работе с тем сайтом, на который они вряд ли вернутся (разве что с популярными типа Амазона).

А ссылки сейчас и так избранные, за месяц проходит в несколько десятков раз больше.
0
webdiktor #
Так в том то и дело, что там интуитивно понятно. Это кажется в теории и подтверждается исследованиям, о которых и написано в статье.
0
jvetrau #
Да, общие принципы его работы понятны, с понятностью проблем нет. Но мало кто ожидает увидеть эту функциональность в хлебных крошках и мало кто будет разбираться с принципами работы такой сложной штуки. Т.е. у нее страдает discoverability — трудно обнаружить, трудно приучиться пользоваться именно им. Но решение в любом случае интересное и применимое как минимум в интерфейсах специализированных сервисов.
0
roces #
Спасибо, очень познавательно. Хотелось бы узнать побольше о проектировании мобильных интерфейсов и в частности об удобных инструментах для этого проектирования.
0
zenden #
Юра спасибо, офигенный обзор. Уже подписался на твой фид.
0
jvetrau #
Незашт :) Планирую делать много похожих подборок (помимо регулярного дайджеста).
+3
mt_ #
Что касается самой первой ссылки, где автор пытается сделать более удобным отсев товаров по набору признаков:

— считаю это решение красивым, нужным и очень удобным.

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


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

Конечно, если к хорошему дизайну добавить иерархию в выпадающих списках, будет совсем неплохо.
0
jvetrau #
Да, мысли в ту же сторону :) Хотя у автора статьи есть решение проблемы слишком длинных «крошек» (они схлопываются).
+1
lany #
Яндекс-маркет в этом плане весьма милая штука, там опции поиска очень удобные и мощные:

Особенно нравятся полоски с заданием диапазонов, на которых также отмечен фактически имеющийся диапазон в соответствии с другими опциями фильтрации. Мне кажется неоправданно загонять весь фильтр в breadcrumb. Впрочем, возможно, дело привычки.
0
jvetrau #
Описанный в статье вариант не должен заменять обычный блок фильтрации. Его плюс в том, что он привязан к «хлебным крошкам», т.е. есть полное и понятное сопоставление структуры каталога и управления текущей выборкой из нее. Это помогает одному из главных принципов проектирования — объект и связанные с ним действия должны стоять по возможности рядом друг с другом.
0
lany #
В случае с крошками навязывается иерархия каталога, которая кажется спорной. Почему сперва тип камеры, потом производитель, потом разрешение? Некоторые посчитают, что производитель камеры — более важная и всеобъемлющая категория, чем тип. Другим важнее разрешение. Теоретически один объект может быть в нескольких категориях. Таким образом крошки распадаются на неупорядоченную совокупность фильтров, которой насильно пытаются приписать ненужную семантику.

Не поймите меня неправильно, скриншоты смотрятся прилично и, думаю, этим вполне удобно пользоваться. Просто я не вижу преимуществ по сравнению с существующими решениями.
0
mt_ #
Для этого нужно слегка изменить поведение интерфейса. Вид при этом не изменится, то есть ценность визуального решения не уменьшается.
Во-вторых, навязывается не иерархия каталога, а последовательность фильтров. Иерархия в каталоге должна быть обязательно, но совершенно в другом виде. Идею можно посмотреть на скриншоте в моём комментарии выше, а реализацию сделать посовременнее.
Что касается Яндекс.Маркет, то, безусловно, их фильтр хорош, но я бы сделал выбор более элегантным и компактным. А также добавил иерархические подменю в фильтрацию по спискам.
0
Blooderst #
Если еще переводчики сделают свое доброе дело и отдельно дадут переводы этой подборки, то настанет истинная радость =)
+1
13i #
_______
Рецепт:
Если влом переводить — собери как можно больше непереведенных текстов под одной крышей и будет тебе счастье!
0
explanent #
Нормально так
0
sakhnov #
Согласен, тема интересная. Автору несомненно спасибо. Как всегда добавим ссылочку в кладовую…
0
Nashev #
вот ещё б под каждую из ссылок бы воткнуть по иллюстрации идеи — типа вот такой для первой —
Пост стал бы информативнее на пару порядков.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.