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

Creative ways to solve usability problems
David Travis из компании Userfocus предлагает унифицированный подход к решению проблем в интерфейсе, найденных во время юзабилити-тестирования и эксертной оценки. Он называется SCAMPER согласно основным принципам.

Инструменты

User Interface Design Framework
Коллекция шаблонов и стенсилов для Adobe Illustrator, которая содержит ключевые элементы интерфейса и навигации, а также часто используемые иконки.

How to prototype interactive iPad applications in 30 minutes using keynote
Amir Khella подробно рассказывает о том, как можно использовать iPad-приложение Keynote для проектирования интерфейсов. Статья подробно описывает процесс и сопровождается небольшим скрин-кастом. Travis Isaacs описал процесс в виде презентации, а Luke Wroblewsky подготовил обзор материалов по теме.

Free Full Layered Facebook GUI PSD Kit
Компания SurgeWorks подготовила шаблон для Adobe Photoshop, который содержит основные элементы интерфейса Facebook. Прямая ссылка на скачивание — http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/07/facebook-gui-psd-kit.zip (ZIP, 6,5 МБ).

Mobile Prototyping Tools
Sheetal Dube из Evantgage Consulting пишет об инструментах для проектирования мобильных интерфейсов. Первая статья из серии посвящена Axure и его полезности на всех этапах процесса проектирования.

Touch Notation by Matt Legend Gemmell
Matt Gemell создал простую и понятную нотацию для проектирования тач-интерфейсов. Она позволяет описывать сложные жесты без перегруженных служебных иллюстраций и легко масштабируется до небольших размеров. Прямая ссылка на скачивание — http://mattgemmell.com/files/touch_notation.zip (ZIP, 200 КБ).

Windows Phone 7 UI Templates, Screenshots & Guidelines
Коллекция дизайн-шаблонов и руководств по интерфейсу для новой мобильной ОС Windows Phone 7. Хотя платформа еще в разработке, уже доступно достаточное количество полезной информации о ее интерфейсе. Особенно полезны официальная коллекция материалов для проектировщиков и дизайнеров и набор из 28 шаблонов для Adobe Photoshop (ZIP, 88 МБ).

Паттерны

UI Patterns — Symbian Developer Community
Библиотека паттернов, использующихся в интерфейсе мобильной ОС Symbian^3. Хотя вики проекта обновляется не очень активно, в ней собрано достаточно полезных материалов.

Процесс

Notes from The ROI of UX — Proving the Value of User Experience Design
Бывший менеджер по продажам Erin Lynn Young делится своим опытом работы с клиентами, которые она применяет на своей новой работе проектировщика. В статье масса полезных советов о том, как правильно подавать и продавать интерфейсные услуги.

Design Is a Process, Not a Methodology
Pabini Gabriel-Petit написала один из лучших и наиболее подробных обзоров процесса проектирования. Статья в деталях описывает три ключевых этапа — предварительные исследования, проектирование и дизайн, поддержку разработки — и основные методики для каждого из них.

Recruiting Better Research Participants
Jim Ross дает ряд советов о том, как подбирать респондентов для юзабилити-тестирования и других исследований пользователей. В статье дается масса полезных советов по всем частям процесса.

Design Better And Faster With Rapid Prototyping
Неплохой обзорный материал Lyndon Cerejo о процессе работы над страницами интерфейса — от скетчей до интерактивных прототипов. Хотя сама тема уже разжевана не один десяток раз, в этой статье дана хорошая выжимка для начинающих.

12 emerging best practice for adding user experience work to agile software development
Jeff Patton рассказывает о своем 10-летнем опыте работы над интерфейсами в agile-процессе разработки. Статья дает серию полезных советов о том, как начать работать в таком режиме и постепенно совершенствовать его.

Кейсы

Designing the Hilo User Experience
Отлично иллюстрированный кейс о том, как проектировался экспериментальный просмотрщик изображений Hilo. Идея продукта сама по себе вряд ли интересна, зато детальное описание процесса работы над ним снабжено тонной примеров постепенного развития концепции — от первых скетчей до работающего прототипа.

Quotes from the User
Коллекция забавных высказываний пользователей, произнесенных во время юзабилити-тестирований и других исследований.

Теория

Achieving and Balancing Consistency in User Interface Design
Michael Zuschlag пишет о целостности интерфейса — он должен быть максимально унифицированным для того чтобы пользователю не приходилось изучать его заново на каждой новой странице продукта. Автор использует термин “наименьшее удивление” в качестве основного посыла статьи.

The Real Life Social Network (A Presentation by Paul Adams)
Paul Adams из Google описывает результаты масштабного исследования поведения пользователей в социальных сетях — в каких группах и как интенсивно общаются их участники. Масса интересных фактов, которые пригодятся при проектировании социальных интерфейсов.

The Dirtiest Word in UX — Complexity
Хорошая обзорная статья Francisco Inchauste на тему сложности интерфейсов — нормальное ли это явление или с ним нужно бороться. Он рассказывает о разнице в задачах, культурах и подходах в управлении сложными продуктами.

История

Know Your Icons — A Brief History of Computer Icons
Хорошо иллюстрированная примерами история развития пиктограмм в интерфейсах. Начиная с Xerox Star — первого коммерческого продукта, использующего концепцию GUI — статья показывает развитие метафор и стилистики в иконографике.

Inside the Mundaneum
Красиво поданная и отлично иллюстрированная история бельгийца Paul Otlet, автора идеи фасетной классификации. Буклет рассказывает о его проекте Mundaneum, который многие называют прототипом интернета.

Тренды

UX Storytellers
Регулярно обновляемый блог, который собирает интересные материалы по теме storytelling из разных отраслей. Этот подход сейчас активно продвигается в интерфейсном сообществе, так что многое окажется полезным в работе.

Checkout Abandonment on the Rise
Исследовательская компания Forrester провела опрос пользователей интернет-магазинов, в котором они рассказали об основных причинах брошенных корзин. Наиболее популярны 5 причин — высокая стоимость доставки, неготовность к покупке прямо сейчас, простое сравнение цен, слишком высокие цены, желание сохранить список покупок на будущее.

Материалы конференций

Web App Masters Tour 2010 Coverage — Reports, Presentations, Workbooks
Отчеты, презентации, конспекты и видео с серии мини-конференций Web App Masters Tour 2010, проходившей с марта по июль в Сан Диего, Миннеаполисе, Филадельфии и Сиэттле.

Свежие ссылки можно также отслеживать по мере появления во Friendfeed-ленте User Experience.

Организаторы собрали целую бригаду российских экспертов — я от UI Modeling Company, UI Design (Алексей Копылов и Иван Дегтяренко), UsabilityLab (Дмитрий Сатин и Андрей Сикорский), InterUX (Екатерина Сугак), Екатерина Умнова, Павел Коноплицкий. Мы должны были помочь спонсорам мероприятия — четырем украинским интернет-бизнесам — решить интерфейсные проблемы в их продуктах. Причем делать это не самостоятельно, а руководя подшефными группами специалистов, которые формировались из участников мероприятия.

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

Старт проекта

После этого началось формирование команд. Мне с Иваном Дегтяренко достался проект Prom.ua — ведущий украинский каталог компаний (работает также под брендами www.tiu.ru, www.deal.by, www.kazprom.net и в других странах СНГ). Необходимо было увеличить конверсию при регистрации новых компаний и решить сопутствующие задачи. В общем, после некоторой вводной и знакомства команд процесс стартовал.

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

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

Проектирование и презентация

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

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

Время подходило к концу, так что пора было переходить к презентации. Склеив результаты работ в виде нескольких ватманов, мы смогли наглядно показать процесс работы и его результат. Нам особенно повезло — в команде оказался профессиональный докладчик Юрий Шиляев, который сумел здорово подать материал. А кроме того, подкрепил тезис моего рассказа на открытии, говорящего о важности презентаций. В итоге результат получил и клиент, и участники команды — они поучаствовали в реальном процессе решения практической задачи, получив дополнительный опыт. Причем выданные рекомендации сугубо практические и могут быть внесены в течение 1-2 недель, а значит и отдача от них пойдет максимально быстро.

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

P.S. Спасибо моей команде, было здорово работать вместе — Денису Горовому (заказчик), Юре Шиляеву (со-организатор команды), Юре Соколову, Свете Олишевской, Даше, Олесе, Косте и Саше.

Другие материалы:

• Отчет о работе команд и еще один;
• Фото от организаторов;
• Фото от Юрия Соколова;
• Фото от Александра Кулика;
• Фото от Анны Юрченко;
• Фото от Андрея Зайцева;
• Фото от Вадима Заковинко;
• Видео-репортаж;

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

Wireframe Showcase
Коллекция примеров wireframes. Хотя по масштабности ей далеко до коллекции №1, в ней каждая схема страницы совмещена с итоговым дизайном — это помогает лучше понять особенности процесса проектирования.

Sketches and Wireframes and Prototypes! Oh My! Creating Your Own Magical Wizard Experience
Traci Lepore подробно описывает возможные уровни проработки интерфейса от скетчей и wireframes до интерактивных прототипов и дизайна. Статья хорошо показывает, как вместе с затрачиваемым на продумывание интерфейса временем растут его продуманность и уменьшаются “белые пятна”. На эту же тему недавно написал Tyler Tate, включив в статью небольшой полезный кейс из практики с примерами готовых документов и графиком их создания.

Designing for Delight (презентация Giles Colborne)
Giles Colborne из компании CXPartners описывает процесс создания дизайна, который вызывает у пользователя ощущение восторга. Причем речь идет не о модных визуальных решениях — для этого важнее предвосхитить ожидания или помочь в проблемной ситуации.

How to Engage Customers in Your E-Commerce Website
В своей статье для Smashing Magazine Rung Andras рассказывает о пользовательских рейтингах в интернет-магазинах — как лучше собирать их, отображать на страницах сайта и учитывать в специальных предложениях.

The Question Protocol — How to Make Sure Every Form Field Is Necessary
Caroline Jarrett, автор книги “Forms that Work: Designing Web Forms for Usability” описывает хороший способ сокращения полей форм. Речь идет об опроснике для заинтересованных лиц компании-владельца сайта, который позволяет определить, кому именно нужны предоставляемые пользователем данные и можно ли отказаться от их части.

The Small Print — Writing UI Instructions
Connie Malamed дает несколько советов о том, как стоит писать краткие поясняющие тексты в интерфейсах. В первую очередь это касается форм и системных сообщений.

Not to Prime, is a Crime!
Jodie Moule из компании Symplicit рассказывает о методе исследования пользователей “priming”. В ходе него участвующие в исследовании создают коллажи, описывающие их повседневные дела, что помогает лучше понять контекст и особенности их жизни и работы.

Инструменты

iPad Keynote Wireframe Toolkit — Get your Keynote Kung-Fu on
Набор стенсилов для проектирования в Keynote для iPad. Хотя это не совсем целевое использование инструмента для создания презентаций, а планшет — не самая продуктивная платформа для работы над большим количеством страниц, итоговый шаблон очень неплох.

Naview — Create easier navigations through prototyping and testing
Простой онлайн-инструмент для проработки навигации. Хорошо подходит для наглядного представления несложных 2-3 уровневых меню на несложных сайтах.

A Template for Gathering Plausible Prototype Content
Полезный в работе шаблон от компании Evantgage Consulting, который должен помочь в сборе контента для wireframes и интерактивных прототипов. Прямая ссылка на скачивание (ZIP, 100 КБ).

Паттерны

“Meet the Team” Pages — Examples and Trends
Обзор примеров и правил построения страниц “Наша команда” на сайтах компаний и организаций. Автор — Cameron Chapman для Smashing Magazine.

Website Archives Design — Good Practices and Examples
Еще один обзор Cameron Chapman для Smashing Magazine, на этот раз посвященный страницам архивов материалов. Статья описывает принципы построения навигации по архиву и приводит пачку интересных примеров.

Процесс

The Ultimate Guide To A/B Testing
Хорошая памятка по процессу A/B-тестирования от Paras Chopra. Статья сжато рассказывает о том, как и что тестировать, что особенно важно в ходе процесса, какие инструменты подойдут для работы.

UX Leadership — Designing Leadership in the UX Community
Dan Szuc и Will Evans запустили сайт, посвященный менеджменту и стратегии процесса проектирования. Они собирают интересные материалы из разных источников и готовят собственные статьи.

A Taxonomy of Constraints
Dan Brown построил хорошую классификацию ограничений, которые нужно учитывать при проектировании — от ожиданий пользователей до отраслевых стандартов и особенностей конкретной компании.

Mark Boulton — Designing for the Web
Английский дизайнер Mark Boulton выложил свою книгу “Designing for the Web” в свободный доступ. Хотя она посвящена скорее визуальному дизайну, в ней есть неплохое описание дизайн-процесса.

Кейсы

Case Study — Gradual Engagement Boosts Twitter Sign-Ups by 29%
Отличный кейс о недавнем редизайне процесса регистрации в Твиттере, который позволил заметно увеличить количество создавших аккаунт пользователей. Ключевая его особенность в том, что пользователь активно вовлекается в жизнь сервиса уже на первых шагах и может сразу “пощупать” его. Еще немного по теме плавного вовлечения от Люка Вроблевски и другая статистика Твиттера.

Using Persona Advocates to develop user-centric intranets and portals
Юридическая компания Howard McQueen рассказывает о том, как использовалась методика персонажей в процессе работы над их интранет-сайтом — от предварительного исследования до применения построенных портретов при дизайне и разработке.

Personas as User Assistance and Navigation Aids
Еще один интересный пример использования персонажей от Mike Hughes. Он описывает, как эта методика помогла рабочей группе одного из технических стандартов в создании удобного в работе свода знаний.

Usability of iPad Apps and Websites — First Research Findings
Компания Якоба Нильсена и Дональда Нормана провела масштабное юзабилити-исследование интерфейса iPad и приложений для него. Среди общей критики непоследовательности решений выделяется интересный момент — интерфейс планшета находится примерно в той же стадии, что и веб в начале своего развития, когда четких устоявшихся стандартов еще не было и каждый придумывал свои решения типичных задач. Прямая ссылка на скачивание – (PDF, 10 МБ) и аннотация к отчету.

На эту же тему высказался и Oliver Reichenstein из компании Information Architects. Он критикует версию журнала Wired для iPad за не самую удачную подачу контента.

Iron Man 2 Case Study
Компания Perception NYC рассказывает о том, как делались псевдо-реальные интерфейсы для фильма Iron Man 2 — от придумывания общих концепций до подготовки прототипов.

Google Lays Out Its Mobile User Experience Strategy
Статья достаточно подробно описывает UX-стратегию Google в области мобильных устройств. Это 6 ключевых аспектов — понимание потребностей пользователей “здесь и сейчас”, доступность в кармане, персональнее чем компьютер, прозрачность режимов работы, особое внимание к локализации и интегрированные экосистемы.

Why we turned Microsoft Office into a Game (Ribbon Hero story)
Специалист по играм Danc опубликовал свою презентацию с конференции Wordcamp 2010 о работе над Ribbon Hero — обучающей игрой для MS Office. Он рассказывает о принципах игровой механики и том, как они применялись для обучения офисному пакету. Еще немного об этом сотрудничестве.

The Magic Behind Amazon’s 2.7 Billion Dollar Question
Jared Spool рассказывает историю появления и развития обзоров и рейтингов на Amazon.com. Очень познавательная история о том, как постепенные доработки интерфейса влияли на поведение пользователей и помогли им построить одну из самых мощных систем рекомендаций.

Теория

Service Design Books
Отлично структурированная коллекция книг по проектированию услуг с рекомендациями и комментариями ведущих специалистов направления.

UXMyths — Debunking User Experience Misconceptions
Сверхполезнейшая коллекция фактов, опровергающая частые заблуждения по поводу интерфейсов и неверные трактовки рекомендаций. По каждому из мифов приведены примеры, факты и полезные ссылки. На эту же тему высказался и Thomas Vander Wal, говоря о 5 мифах внутренних социальных сервисов компаний.

A User’s Guide to Service Design
Хороший обзорный справочник по проектированию услуг от Design Council. Он рассказывает о самой дисциплине, процессе работы и кейсах из практики.

Statistics 101 — What every user experience professional needs to know about statistics and usability tests
Крайне полезная статья Michael Zuschlag, в которой он рассказывает о правилах и принципах статистики, которые могут пригодиться проектировщикам и юзабилити-специалистам. Отличная памятка по основным вопросам, возникающим при анализе собранных в ходе исследований данных.

Organizing Content Article Series
Серия статей Tom Johnson об организации контента, а также навигации и поиска по нему. Статьи хорошо структурированы и снабжены пачкой примеров.

The Psychologist’s View of UX Design
Susan Weinschenk, автор книги “Neuro Web Design: What makes them click?”, собрала отличный свод памяток и правил о человеческой психологии, которые применимы в проектировании и дизайне. Она рассказывает о естественных ограничениях, ошибках, памяти, внимании и других особенностях поведения. Также будут интересны выдержки из ее “100 фактов о людях“.

IUP Gesture Research
Организация The International Usability Partners провела масштабное исследование пользователей по всему миру с целью изучить привычки и ожидания от сенсорных и жестовых интерфейсов. Этот сайт публикует исходные данные и результаты исследования.

Designing User Experiences for Children / Seniors
Heather Nam пишет об особенностях проектирования интерфейсов для детей. А Janet M. Six рассказывает о том, как учитывать интересы пожилых пользователей.

11 Tips on How To Apply Social Interaction Design Thinking
Adrian Chan дает несколько советов о том, как описывать требования к социальным сервисам. Он перечисляет 11 ключевых аспектов, которые должны быть учтены в такой спецификации — от мотивов работы с таким сервисом до взаимосвязей участников сообщества.

5 Myths of Visual Communication
Хотя большинство статей в духе “№ правил успешного…” дают минимум новой информации тем кто знаком с материалом, Connie Malamed говорит о вещах, контрастирующих со многими из интерфейсных трендов — использование больших шрифтов, крупных изображений, реализма и анимации.

Persuasion Tactics 101
Henk Wijnholds описывает свое выступление на тему способов влияния на поведение пользователей. К статье приложена презентация, а также отсылка на другую интересную публикацию, рассказывающую о том как распроданные продукты в магазине влияют на выбор покупателей.

История

Numpads Gone Wild
Chris Clark описывает историю появления двух раскладок цифровой клавиатуры — “7-8-9″ у калькуляторов и “1-2-3″ у телефонов. Он также сравнивает их удобство в использовании и приходит к выводу, что вариант “1-2-3″ более правильный.

Тренды

Коллекция интерфейсов: Future Vision от разных компаний
Технологические компании время от времени готовят “срезы” своего видения будущего интерфейсов и технологий в целом — того, чем постоянно занимаются их отделы R&D. Этот регулярно обновляемый список собирает примеры таких концепций.

Kathy Sierra at Business of Software 2009
Обязательное к просмотру видео с выступления Kathy Sierra на конференции Business of Software 2009. В нем она рассказывает о том, как и почему нужно создавать хороших пользователей, а не хорошие продукты.

Материалы конференций

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

Design Research Conference 2010
Отчеты, презентации, конспекты и видео с конференции Design Research Conference 2010, проходившей 10-12 мая в Чикаго.

UX London 2010
Отчеты, презентации, конспекты и видео с конференции UX London 2010, проходившей 19-21 мая в Лондоне.

UX LX 2010
Отчеты, презентации, конспекты и видео с конференции UX LX 2010, проходившей 12-14 мая в Лиссабоне.

CHI-10
Отчеты, презентации, конспекты и видео с конференции CHI-2010, проходившей 10-15 апреля в Атланте.

IA Summit 2010
Отчеты, презентации, конспекты и видео с конференции IA Summit 2010, проходившей 7-8 апреля в Фениксе.

Свежие ссылки можно также отслеживать по мере появления во Friendfeed-ленте User Experience.

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

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.

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

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

Новый формат блога

В последнее время наиболее активно шла работа с Friendfeed — туда попадал весь поток сохраняемого в закладки и тематические обсуждения, отдельной лентой шли наиболее интересные ссылки о практике проектирования (этот блок сейчас в правой колонке блога). Относительно недавно там выработался интересный формат — подборки материалов и примеров по определенной теме (например, статистика использования мобильных, примеры использования контекстов в мобильных приложениях и ОС, игровые принципы в интерфейсах).

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

• Методы и практики. Описание того, что и как делается в процессе проектирования. Итоговые документы, процесс их создания и жизненный цикл, практики и методы при работе над ними.
• Процесс. Описание хода работы над интерфейсными проектами. Выстраивание и оптимизация процесса, управление проектами.
• Кейсы. Рассказы о процессе работы над конкретными проектами.
• Теория. Общее описание принципов и особенностей проектирования, статистика, исследования.
• История. Откуда взялись и как развивались цифровые и физические устройства и их интерфейсы. Методы ввода и вывода данных, их обработки, социо-технические системы.
• Тренды. Подборки материалов по современным подходам к проектированию и описание этих направлений.
• Обзоры. Ежемесячные подборки ссылок на свежие статьи, презентации, исследования, инструменты и другие материалы.

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

Переезд в Москву и новые вакансии в UI Modeling Company

В мае я переезжаю в Москву — там находятся почти все наши клиенты, проще найти специалистов, удобнее участвовать в профессиональном сообществе, можно чаще бывать на конференциях. В связи с этим в UI Modeling Company открываются вакансии проектировщика и информационного дизайнера — к началу следующей недели появится их описание в МоемКруге и на сайте компании (за новостями, кстати, можно следить в Фейсбуке и Твиттере). Хотя резюме можно присылать уже сейчас на jvetrau@gmail.com.

Презентация о форматах взаимодействия команды проектирования с клиентом на Software People 2010

22 и 23 апреля в Москве пройдет вторая конференция Software People, на котором я выступлю с докладом “Форматы работы клиента с командой проектирования интерфейсов“. Включение работ по проектированию интерфейса в общий процесс разработки происходит с разными целями — повысить потребительские качества продукта, обеспечить проектную команду документацией на интерфейс, проверить жизнеспособность общей концепции продукта на раннем этапе. В зависимости от задач проекта, состава его команды, принципов управления и других особенностей проекта, интеграция этапа проектирования может проходить в различных форматах.

Выбор подходящего варианта взаимодействия здорово влияет и на качество итогового результата, и на удовлетворенность обеих сторон сотрудничеством. Презентация рассказывает о том, как найти компромисс между идеальным процессом с точки зрения проектирования и наиболее комфортным для команды разработки. Тема изначально была запланирована для РИТ-2009, но конференция постоянно переносилась, а рассказать об этом все-таки хотелось. Мероприятие состоится 22-23 апреля в “Инфопространстве” в 1-м Зачатьевском переулке, 4. Мое выступление назначено на пятницу, 23 апреля, с 16:30 до 17:15. Об условиях участия можно почитать на сайте мероприятия.

Презентация лекции об истории пользовательских интерфейсов и особенностях процесса их создания для “Теорий и практик”

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

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

А пока следить за новостями можно через RSS-ленту блога или во Френдфиде.

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

Все это может сделать проект не только невыгодным для компании-проектировщика, но и вредным для репутации. Не говоря уже о более проблемном процессе ведения работ и сложностей при их приемке. Тема частично перекликается с недавним рассказом на тему управления ожиданиями от процесса проектирования интерфейсов на конференции Software People 2009, хотя здесь она получилась более широкой. Возможно, в будущем это вырастет в объединенную и дополненную статью на тему ведения интерфейсных проектов в блоге. А саму презентацию можно посмотреть и скачать на сайте SlideShare:

Доклад о том, как обойтись в интерфейсном проекте без жертв

Первой в серии выступлений будет презентация “Когда проектирование заказывать не нужно. Памятка для клиентов и подрядчиков” на московской конференции User Experience 2009. В ней рассказывается о том, как обойтись в интерфейсном проекте без жертв. Несмотря на то что первоначальная проработка интерфейса или улучшение существующего пригодится почти любому продукту, добиться нужного результата почему-то получается далеко не у всех. Причины этого разные, но результат часто один — деньги и время потрачены, отношения между заказчиком и подрядчиком подпорчены, слова «проектирование» и «юзабилити» становятся для клиента ругательными.

Конференция проходит уже третий год и на этот раз — совместно с UPA Europe. Благодаря этому ожидаются выступления многих западных специалистов, из которых особенно интересным должен быть рассказ Билла Бакстона. Мероприятие состоится 26-27 октября в “Инфопространстве” в 1-м Зачатьевском переулке, 4. Мое выступление назначено на вторник, 27 октября, с 18:00 до 18:30. Об условиях участия можно почитать на сайте мероприятия.

Лекция об истории пользовательских интерфейсов и особенностях процесса их создания

Второй будет обзорная лекция “Проектирование интерфейсов и юзабилити – история и практика” для питерской части проекта Теории и Практики. Пользовательские интерфейсы существовали и до компьютеров – от «Железного Феликса» и ручек управления газовой плиты до приборных панелей автомобилей и диспетчерских пультов электростанций. С развитием цифровой техники задачи проектирования стали сложнее и интереснее – нагруженные функциями гаджеты и бытовая техника используется повседневно множеством людей. Причем у всех этих людей свои особенности – кто-то спокойно работает с техникой в офисе, другие используют гаджеты урывками на ходу, у третьих плохое зрение, четвертые подозрительно относятся ко всему новому. Как сделать продукт, которым они будут довольны?

В ходе лекции будет рассказано об истории развития интерфейсов, их текущем состоянии и направлениях развития, а также процессе проектирования и дизайна. Мероприятия T&P, как правило, проходят в неспециализированных площадках — я буду рассказывать в Cheap Bar (второй этаж бывшего Red Club) на Полтавской, 7. Назначено выступление на пятницу, 30 октября, с 20:00 до 21:00. Вход и участие бесплатны, а при желании можно отметиться на сайте в списке участников.

Доклад о форматах взаимодействия команды проектирования с клиентом

Третий доклад — “Форматы работы клиента с командой проектирования интерфейсов” на московской конференции РИТ-2009 — вместе с переносом мероприятия пока под вопросом, но предварительно заявлен в программу. Включение работ по проектированию интерфейса в общий процесс разработки происходит с разными целями — повысить потребительские качества продукта, обеспечить проектную команду документацией на интерфейс, проверить жизнеспособность общей концепции продукта на раннем этапе. В зависимости от задач проекта, состава его команды, принципов управления и других особенностей проекта, интеграция этапа проектирования может проходить в различных форматах.

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

Еще немного анонсов

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

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

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

Решением является работа с ожиданиями на различных этапах и уровнях проекта:

• Определение заинтересованных лиц и их интересов в проекте. Что ждет от него заказчик, команды разработки и поддержки, пользователи и сам проектировщик?
• Понимание условий успеха проекта. Важен ли срок выхода на рынок, потребительские качества продукта, учет сложных технических ограничений, вписывание в ограниченный бюджет или что-то еще?
• Донесение до клиента пользы проектирования в этом конкретном проекте. Будет ли это подробная спецификация, достижение определенных показателей потребительских качеств, экономия своих ресурсов или другие выгоды?
• Управление ожиданиями на всех этапах проекта — от предпродажных работ и сбора требований до детального проектирования и поддержки команды разработки.

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

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

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

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

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