Вы окунулись в незнакомый город. Сколько всего интересного можно в нём открыть для себя, как здорово можно провести тут время. Но как обо всём этом узнать? И тут вы достаёте из кармана одно устройство...

Описание идеи
1. Аудиоканал является основным средством вывода информации, а видеоканал (экран) – вспомогательным. Основной канал ввода информации – тачскрин.
2. Тачскрин использовать как простое и удобное устройство ввода: большие кнопки, крупный шрифт опций меню. Также использовать экран для вывода графической и видео информации, при этом основную часть текста выводить только голосом.
3. Устройство работает по принципу управляемого радио. Включил и оно сразу работает - вещает. По ходу его можно подстроить или переключить на другой режим работы.
4. Дополнительные опции, настройки – о них постепенно, маленькими дозами упоминается в виде звуковой «рекламе». Так человек потихоньку узнаёт не только местность вокруг, но и возможности устройства.

Мы начали с самого главного – с посетителей. Кто они, сколько им лет, какие у них привычки? Зачем заходят они на сайт? Мы придумали кучу разных героев – персонажей. А потом выбрали из них наиболее характерных. Не для абстрактного «Пользователя», а именно для них, для ключевых персонажей мы будем проектировать интерфейс.

Как будут ниши персонажи решать свои задачи? Мы описывали это в виде маленьких рассказов – сценариев.

Что потребуется нашим персонажам при выполнении их сценариев? Какой им понадобится функционал и контент? Что действительно важно, а на что не стоит тратить ресурсы?

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

Настало пора распределить наши страницы по разделам сайта. «Порядок превыше всего!» Тут мы в полный рост привлекали статистику использования нашего сайта.

После тщательной проработки предыдущих этапов эскизы страниц рисовались легко и просто. Мы рассматривали разные варианты и придумывали их ещё лучше!

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

Экстремальное юзабилити-проектирование с командой Владимира Владимировича Шахиджаняна Соло на клавиатуре онлайн.
Как на нашем сайте персонажи будут достигать своих целей? По каким тропинкам пойдут?

Экстремальное юзабилити-проектирование с командой Владимира Владимировича Шахиджаняна Соло на клавиатуре онлайн.
Казалось бы, детская забава, а ведь теперь мы детально знали, что же нужно нашим пользователям.

Экстремальное юзабилити-проектирование с командой Владимира Владимировича Шахиджаняна Соло на клавиатуре онлайн.
Мы подробно разбирали варианты выполнения пользователями своих сценариев. Протаптывали тропинки, по которым они будут ходить. Постепенно все тропинки сценариев переплетались и связались в подробную схему

Экстремальное юзабилити-проектирование с командой Владимира Владимировича Шахиджаняна Соло на клавиатуре онлайн.
Как придать сайту чёткую структуру? Какие на нём будут разделы? Из каких страниц будут состоять эти разделы?

Экстремальное юзабилити-проектирование с командой Владимира Владимировича Шахиджаняна Соло на клавиатуре онлайн.
Как будут выглядеть самые важные страницы нашего сайта? Какие у них будут элементы управления? Как на них будет располагаться информация? Мы подбирали действия и информационные блоки для страниц. Продумывали их организацию. Всё это тщательно зарисовывали и записывали.

Схема состоит из 4-х «веток»: 1) Чай Ок? 2) Налить воду; 3) Работать и 4) Пить чай.

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

Всё хитросплетение пожеланий наших героев мы стали укладывать в одну общую карту сайта. Сценарий за сценарием, требование за требованием – так мы протаптывали тропинки от одной страницы сайта к другой…

А потом мы взялись за сами страницы. Сколько же было перебрано их вариантов! Не думайте, что творческая работа – работа лёгкая.

Серьёзный бизнес не мыслим без планирования. Проектирование интерфейса – это планирование того, каким будет представительство вашей компании в интернете.

Программистам нужны точные чертежи интерфейса, тогда его строительство будет быстрым и качественным!

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

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

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

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

Для того, чтобы увеличить фото, надо нажать на него пальцем.

Алексей Сергеевич не промахнётся мимо большой зелёной кнопки, чтобы заказать своё любимое Тальятелле с грибами.

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

Детальное проектирование сервиса статистики для владельцев сайтов и рекламодателей.

С помощью ТВ-приставки «AmiNET» абоненты компании «Контент-Хаус» получают доступ к различным услугами интерактивного телевидения, таких как: выбор и просмотр кинофильмов, оценка и комментирование, просмотр афиши, погоды, курса валют и т.д.

На рисунке показан пульт ТВ-приставки «AmiNET»

Особенности проекта в нестандартной интерфейсной среде приставки и жестких ограничениях накладываемых такой платформой.

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

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

На рисунке приведена Схема ролей пользователей и основных сценариев работы

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

Кроме документирования структуры важным являются также и схемы потоков экранов (схемы навигации). Такие схемы гарантируют целостность детального проекта: в прототипе будут проработаны все необходимые экраны и переходы между ними. Такие схемы разрабатываются на этапе концептуального проектирования на основе сценариев взаимодействия пользователей с системой.

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

Для улучшения восприятия некоторые пункты меню представляют собой мини-мониторы:в них, помимо названия раздела, отображается различная сопутствующая информация. Например, для раздела «TV-передачи» внутри показывается кадр из фильма, на котором просмотр был прерван.

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

А вот ещё один экран после его проработки графическим дизайнером.

Спроектированный интерфейс был успешно внедрён заказчиком.

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

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

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

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

Перед стартом детального проектирования схема имела довольно простой вид.

Практически перед самым официальным релизом новой версии интернет-банка, осенью 2008 года, банк «Северная Казна» был приобретён ОАО «Альфа-Банк». Соответственно, выпуск новой системы был приостановлен: ведь у «Альфа-Банка» есть свой «Альфа-Клик». Однако нет сомнений, что идеи и решения, реализованные в интерфейсе интернет-банка, найдут применение и в новой компании.

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

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

Доступ к группам задач «Мечты и цели», «Проект», «Отложено» должен быть бмыстрым, несмотря на то, что они задействованы гораздо реже. Для этого к первым листам бумаги каждого блока приклеиваются клейкие листочки с надписями. Такая система закладок защищена твёрдой обложкой тетрадки и позволяет не тратить время на поиск нужной страницы...

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

Итак, вы сидите за штурвалом… своей жизни! Полный вперёд!

Карандаш и ластик – это в 100 раз проще, чем копировать-вставить. Проще, потому что они – ручные!