Банкомат от IDEO: с тачскрином и стенками

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

Получив заказ на разработку банкомата, компания IDEO решила отталкиваться не от существущих аппаратных решений, а от целей и потребностей пользователей.

То, что у них в итоге получилось, продемонстировано в концептуальном видеоролике. Помимо результата работ ролик рассказывает и о процессе: в проекте использовались бумажные (или даже картонные) прототипы и метод Wizard of Oz.

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

The Future of Self-Service Banking

iPad — заповедник эмоционального дизайна

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

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

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

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

Flipboard captures something we lost along the way
Flipboard, New «Social» iPad Magazine will be Powered by Semantic Data (Статья с более подробным описанием программы.)

Зоопарк иконок для Apple

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

Джош Кларк — автор книги «Tapworthy», о которой мы рассказывали вчера, рассказал об особенностях проектирования для дисплея высокой четкости на на новом iPhone 4.

Для того, чтобы приложения работали на разных версиях телефона разработчики ввели единицу измерения размеров «пункт» (point). iPhone’овский пункт имеет мало общего с типографским. В случае с iPhone 3 он совпадает с пикселем, но на iPhone 4 в один пункт помещается 4 пикселя: 2 в ширину и 2 в высоту. Таким образом, задав размеры всех элементов в пунктах, можно добиться одинаковых физических размеров этих элементов на разных моделях устройства. Конечно, каждое графическое изображение должно присутствовать в двух вариантах: ОС способна автоматически увеличить изображения в старых приложениях, но не может уменьшить изображения для 4 версии.

Но больше всего поражает количество иконок, которые нужны для приложения: нужны иконки для App Store, для запуска приложения, для настроек и результатов поискка и для документов. Причем для последних трех видов нужно три размера: под iPad, старые и новые iPhone. Итого: 11 (одинадцать!) иконок.

Designing for iPhone 4’s Retina Display

Как твиттер повысил конверсию при регистрации

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

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

Gradual Engagement Boosts Twitter Sign-Ups by 29%

Видеозапись юзабилити-митапа от 10 июня

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

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

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

Второй доклад Алексея Каленюка из компании UIDesign Group назывался «Турсайты — приятное с полезным». Алексей рассказал об особенностях проектирования сайтов, связанных с туризмом на примере сайта i-Travel.

MeeGo — ОС для планшетов от Intel

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

Компания Intel представила прототип собственного планшетного ПК, который на вид достаточно сильно напоминает Apple iPad. Он работает на базе чипа Intel Moorestown и операционной системы MeeGo.

MeeGo разработана на основе двух существующих мобильных ОС на базе Linux — Moblin и Maemo. Многие журналисты, освещавшие событие, отмечают отлично проработанный интерфейс системы. Правда по заявлениям Intel, это предварительная версия системы, которая еще будет дорабатываться. Первые реальные устройства могут появиться на рынке не ранее начала 2011 года.

На видеороликах в основном видно стартовый экран системы, который реализован достаточно необычно.

Intel демонстрирует Moorestown-планшет с ОС MeeGo (заметка на сайте 3DNews)

Паттерн «Активные фильтры»

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

Quince — это онлайн библиотека паттернов пользовательских интерфейсов. Коллективный Хабр пользователь port80 опубликовал творческий и адаптированный перевод паттерна «Active Filtering» из этой библиотеки.

Построение интерфейса: описание паттерна «Активные фильтры» (Active Filtering)
Оригинальная статья

Прикосновения с умом

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

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

Smart Tapping in Mobile Firefox

Как в результатах поиска Google появилась третья колонка

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

Недавно на странице с результатами поиска Google появилась колонка с параметрами поиска. Такое решение вызвало у многих пользователей реакцию неприятия — уже появились рецепты, каким образом эту колонку можно спрятать (вот, например, специальный плагин для Chrome).

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

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

Новый дизайн Google – как мы его делали

Куда девать параметры поиска в мобильных устройствах?

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

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

Грег Нудельман (Greg Nudelman) творчески подошел к проблеме и придумал 4 варианта решения этой проблемы:

• 4 угла
• Водяные знаки
• Тизер
• Параллельный

Design Patterns for Mobile Faceted Search (Часть I)
Design Patterns for Mobile Faceted Search (Часть II)

Сенсорные кнопки: размер имеет значение

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

Интерфейсы на базе сенсорных экранов стали общим местом. У проектировщиков, в связи с этим, встает вопрос — какого размера должны быть активные элементы? Люк Вроблевски (Luke Wroblewski) взял стандарты от Apple, Microsoft, Nokia, Ubuntu, а также исследования на эту тему и выписал рекомендуемые минимальные размеры элементов.

Touch Target Sizes

Борьба с интерфейсом сайта gosuslugi.ru

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

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

Как я получал загранпаспорт через gosuslugi.ru

Супер хлебные крошки — это не просто сухарики

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

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

Блог Boxes and Arrows подробно описывает навигационный паттерн «Расширенные хлебные крошки», который позволяет не только вернуться к предыдущим разделам, но и перемещаться по разделам в горизонтальном направлении. Также этот паттерн полезен при работе с результатами фасетного поиска.

Faceted Finding with Super-Powered Breadcrumbs

Ценность живого движения

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

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

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

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

Biological Motion and Happy Interfaces: What Pixar and Apple Can Teach Us About Infusing Products With Personality
Анимированный прогресс-бар субъективно ускоряет загрузку

В самом сердце ритма: уроки музыкальной революции

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

Когда редакция фреша впервые увидела Microsoft Blend, то сразу вспомнила, что где-то уже видела продукт с очень похожим интерфейсом: он был такой же плоский (2D), состоящий из областей, которые легко меняют свои относительные размеры. Ну конечно же, это Ableton Live! На самом деле, музыкальные интерфейсы находятся в авангарде пользовательских интерфейсов, и даже разработчики инструментов для программирования с трудом за ними поспевают.

Дейв Кронин из компании Cooper опубликовал «режиссерскую» (расширенную) версию своей статьи из журнала Interactions. В ней Дейв рассказывает об эволюции пользовательских интерфейсов компьютерных музыкальных инструментов и дает большое количество отличных примеров современных инструментов.

Into the groove: Lessons from the desktop music revolution

Алиса в стране iPad: что ж — это просто отпад!

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

Все говорят: «Ни за что не откажусь от бумажных книг: о этот прекрасный запах бумаги и шелест страниц!» А что они скажут на это?

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

Страница приложения в iTunes

iPad и аккордеон

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

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

Но речь пойдет не об этом, а том, что в вводной части выступления Стив Джобс рассказал об интересных приложениях для iPad. И среди них было приложение «Аккордеон» проектировщика взаимодействия Александра Комарова и дизайнера Сергея Рачка.

Мы поздравляем ребят за храбрость и желаем, чтобы как можно больше российских разработчиков делало приложения с таким замечательным опытом взаимодействия (user experience).

Кстати, можно полюбоваться промо-видео:

Сообщение от Саши на Хабре
Аккордеон для Айпада
Аккордеон для Айфона (и айпода тач)
Сайт Александра Комарова

Hick’s & Fitts’ Laws: расставляем точки над «i»

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

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

Стивен Бредли опубликовал статью, претендующую на то, чтобы расставить все точки над «i» по этому вопросу. Он дает четкие определения законов и обсуждает их теоретические и практические следствия.

How To Improve Usability With Fitts’ and Hick’s Laws

Эсфера — ручное управление окнами

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

Интересная идея пришла в голову проектировщику компании Canonical (разработчик популярного дистрибутива Linux — Ubuntu). Идея позволяет внедрить управление жестами в привычную GUI среду.

Желание упростить графический интерфейс и сделать его более удобным для пользователей не покинет умы разработчиков никогда. Пабло Квирос (Pablo Quiros) из Canonical предложил внедрить в Ubuntu новый универсальный элемент управления под названием «эсфера» (Esfera). Эсфера представляет собой большую круглую кнопку, которая располагается в верхнем правом углу каждого окна. В отличие от прочих элементов управления окнами, эсфера многофункциональна. Идея, которая лежит в её основе, немного напоминает мышиные жесты, применяемые, например, в браузере Opera. Если попытаться перетащить эсферу вверх, то окно развернётся на весь экран, а если вниз – наоборот, свернётся. Движение влево или вправо перемещает окно на предыдущий или следующий рабочий стол. Впрочем, это самые простые и логичные жесты. Бывают и более замысловатые команды. Например, чтобы закрыть окно, предлагается «нарисовать» на эсфере крестик, что уже не так очевидно.

Разработчики Ubuntu придумали новый элемент управления (статья в Компьютерре)
Изначальное предложение Pablo Quirós
Само предложение в виде документа (PDF, 140 Кб)

5 главных тенденций электронной коммерции в этом году

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

Область электронной коммерции развивается чрезвычайно динамично. Роб Смит (Rob Smith) — директор агентства Blueleaf Digital из Великобритании перечислил 5 главных тенденций 2010 года. Следует отметить, что тенденции относятся к глобальному рынку, однако в большей степени применимы (или будут применимы в скором времени) и к нашему рынку.

1. Фокусируйтесь на имеющейся аудитории, а не на новой
   Развитие рынка и кризис приводит к тому, что рост новой клиентской базы замедляется. Следовательно пристальное внимание надо обратить на взаимодействие с имеющейся аудиторией. Роб ставит ряд вопросов ответы на которые помогают улучшить это взаимодействие.
2. Объединяйте онлайновое взаимодействие с оффлайновыми
   Примеры такого объединения: дайте возможность пользователям заказывать через сайт магазина, а забирать товар в самом удобном для них реальном (оффлайновом) магазине. Нынешние клиенты не разделяют оффлайновую и онлайновую деятельность компаний продающих товары — поэтому им надо дать на выбор все способы заказа и получения товара.
3. Мобильность у вашего порога
   Количество смартфонов, которые имеют удобный выход в интернет переходит в новое качество. С помощью мобильного телефона клиенты осуществляют покупки в любой удобный момент, отслеживают заказы, отсылают претензии. Появляются магазины оптимизированные исключительно для мобильных устройств. Чтобы не упустить важную аудиторию необходимо создавать мобильные версии сайтов.
4. Фокусируйтесь на форме так же, как и на содержании
   Осуществляя покупку в вашем магазине, пользователь должен получить впечатляющий опыт взаимодействия. Такое впечатление можно дать с помощью качественного визуала, или с помощью инновационных способов взаимодействия (например, использовать дополненную реальность для виртуальной примерки одежды).

   

5. Совершенствуйте, а не перестраивайте ваш сайт
   Роб советует тратить деньги на последовательное улучшение сайта электронной коммерции, а не на тотальную переделку. Чаще всего, это более выгодно. В качестве примера автор приводит сайт amazon, который действительно улучшается постоянно, но незаметно.

5 Important E-Commerce Themes for 2010