Tag Archives: edu

Usability-тесты. Сомнительная инвестиция или деньги из воздуха?

18 Окт

Первая реакция на чье-то желание проверить результат твоего труда универсальна: отправить автора вопросов заняться «своими делами», а уж “эти-то вопросы” предоставить решать профессионалам. Реакция прогнозируемая, и большинство читателей, уверен, при легком самоанализе отчетливо вспомнят себя в подобной роли.

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

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

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

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

С чего начать? В первую очередь, с честного ответа самим себе, а в чем же именно вы не уверены. Нужен ли рынку мой продукт или сервис? Кому именно его предлагать? Нужен ли он им и для чего? Нравится ли? В состоянии ли потенциальные клиенты им пользоваться, и насколько легко это удается? Именно природа вашей неуверенности определяет то, с чего начать. Маркетинговые классические тесты помогут вам со всеми вопросами, кроме последнего, и если вы хотите максимально угодить вашим потенциальным потребителям – начинайте именно с них. Это уточнит ваш выбор, продиагностирует спрос и ответит на вопрос, стоит ли именно ЭТО предлагать конкретно ЭТОЙ целевой аудитории. Не исключаю, что в ряде случаев до последнего вопроса об удобстве использования речь может даже не дойти.

Другое дело, если ваши вопросы находятся в области удобства использования, и здесь вы автоматически попадает в клиентуру специалистов по usability-тестам.

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

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

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

Usability – тесты сильны тем, что они позволяют исследовать поведение пользователей в максимально приближенной к жизни ситуации.

В рамках таких исследований людей не спрашивают об их мнении о продукте, не просят комментировать какие-либо эстетические аспекты и не устраиваются дискуссии о том, как пользователь относится к вашему бренду и вашей компании. Все это уходит на второй план. Остается только Человек, Услуга и объединяющий их в этот момент контекст использования. На usability-тестах воспроизводятся реальные жизненные ситуации, люди сами нажимают кнопки, гуляют по сайтам, настраивают себе услуги, читают бумажные инструкции и самостоятельно пытаются разрешать возникающие по дороге ситуации. Все как в реальной жизни. За исключением того, что в процессе тестов происходит полный замер деятельности пользователя, выполняемых им шагов, операций и допускаемых ошибок. В итоге вы получаете полную детальную метрическую картину того, где же людям «сложно», что именно их путает, что мешает легко и просто пользоваться вашим сервисом или сайтом. В качестве еще одного анонса могу сообщить, что тема оценки финансовой эффективности от вложений в usability станет одной из тем ближайших номеров журнала.
Работа с usability (англ. удобство использования) является свидетельством зрелости компаний, которые способны отложить в сторону свой личный опыт, свое личное мнение, привычку примерять на себя даже те свои услуги, которые предназначены для абсолютно иной пользовательской аудитории, и предложить свои продукты на пробу реальным людям.

Говоря «предложить», имею виду именно привлечение их к usability-тестам, проводить которые оптимально на самых ранних этапах, когда идея новой услуги только прорабатывается. В этом случае создается ее прототип, и результаты его исследования на людях позволят вам отточить целевой дизайн сервиса, исключив из него большинство обнаруженных проблем. А еще лучше – провести повторные тесты непосредственно перед запуском услуги на рынок, чтобы отладить те аспекты, которые выявились в период ее разработки.

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

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

Что дальше? – А дальше продолжение, следующие номера и серьезное погружение в тему того, как на практическом уровне выстроить ваш Дизайн с учетом usability-аспектов.

Автор: Александр Павлович, руководитель службы дизайна продуктов ОАО Вымпелком (ТМ Билайн)

Реклама

Прототипирование в Expression Blend + SketchFlow. Часть 2. Основы

3 Сен

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

Начало работы и интерфейс

Все начинается с создания нового проекта. На этом этапе вы можете выбрать, какого типа SketchFlow-приложение вы хотите создать. У вас два варианта: Silverlight и WPF-приложение.

image

Тут может показаться, что SketchFlow позволяет разрабатывать только прототипы Silverlight или WPF-приложений, но это не так, равно как не верно, что на бумаге можно делать только прототипы «бумажных» приложений.

Фактически, вы выбираете контейнер или, если хотите, способ доставки вашего прототипа. Silverlight-контейнер работает в браузере и может быть выложен на сайт. WPF-контейнер представляет собой отдельное Windows-приложение. Это основная разница, тем не менее не стоит забывать, что по собственной функциональности Silverlight != WPF, то есть какие-то нюансы все же могут быть, особенно, если вы выходите за пределы базовых идей SketchFlow и начинаете активно использовать возможности той или иной платформы. (См. также Типы проектов в Expression Blend + SketchFlow)
vs. 

В остальном, все зависит от вашей фантазии и ваших задач. Со SketchFlow вы получаете контейнер — проигрыватель интерактивных прототипов. В этом смысле ничто не мешает разрабатывать прототипы обычных приложений, сайтов или мобильных приложений для любой платформы. По существу, для придания контекста достаточно добавить подходящую подложку и, если нужно, подходящие стили контролов (Expression Blend умеет импортировать psd-файлы). То есть ответ на вопрос “могу ли я с помощью этой штуки сделать прототип iPhone-приложения?” положительный. Хотя, лучше, конечно, если вы сделаете приложение под Windows Phone 7 😉

Я буду придерживаться пути Silverlight-контейнера. Давайте посмотрим на интерфейс Expression Blend для SketchFlow-проекта:

Помимо меню и панели инструментов, в интерфейсе можно выделить 6 основных блоков:

  1. Рабочая область, где разворачивается основное действие,
  2. SketchFlow Map — карта вашего приложения, показывающая, какие есть экраны и компоненты и как они связаны между собой.
  3. Projects — дерево вашего проекта, Assets — заготовки, контролы и т.п., которые можно использовать в прототипе.
  4. Дерево элементов текущего экрана, компонента или контрола + панель для записи анимаций.
  5. SketchFlow Animations — специальная панель для упрощенной записи анимаций для прототипов.
  6. Свойства выделенных элементов — цвет, положение, шрифты и пр.

Прежде, чем двигаться дальше, нужно сделать одну важную настройку, которая впоследствии сильно облегчит жизнь: через меню Tools⇒Options⇒SketchFlow нужно установить размер по умолчанию для новых экранов и компонентов. Например, если вы используете подложку телефона или браузера, то разумно установить размером по умолчанию для экранов именно размер подложки.

Двигаемся дальше: впереди основные концепции: карта, экраны, компоненты, связи и в конце немного поговорим об импорте.

SketchFlow Map

SketchFlow Map — это карта ваших экранов и компонент, показывающая, как они связаны между собой. (Математически, это направленный граф и где-то в служебных файлах проекта можно даже найти его описание в xml-формате.)

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

Наверное, можно даже сказать, что SketchFlow Map позволяет увидеть картинку целиком, то, что называется big picture. Карта позволяет сконцентрироваться не на деталях экранов, а на связях между ними.

Например, на картинке выше видно, что есть стартовый экран Login, и есть несколько основных экранов, в каждый из которых вставлено меню в виде компоненты MenuComponent, через который можно попасть на любой из экранов. Во все экраны вставлена подложка WindowComponent, в основные экраны вставлены лента твитов TweersComponent и панель для обновления статуса UpdateComponent.

Схема может быть и более сложной:

или более простой:

.

В конечном счете все зависит от сложности прототипа и того, на каком уровне вы делаете дробление на экраны, т.к. часть переходов между различными состояниями может быть “зашита” внутри экрана в виде выделенных состояний (States), переходы между которыми можно задавать, к примеру, с помощью поведений (Behaviours).

Еще один интересный момент: с точки зрения взгляда на прототипирование как инструмент мышления и анализа, SketchFlow Map сам по себе является инструментом проектирования “потока” приложения и изучения возможных вариантов, в чем-то напоминающим MindMap.

Несколько простых правил по SketchFlow Map:

  1. Прототип всегда имеет стартовый экран, который обозначается зеленым треугольником (см. на картинках выше). Через контекстное меню стартовым можно сделать любой экран.
  2. Экраны обозначаются прямоугольниками, по умолчанию они синего цвета (Navigation).
  3. Компоненты обозначаются скругленными прямоугольниками, по умолчанию они зеленого цвета (Component).
  4. Переходы обозначаются сплошными линиями. Композиция обозначается пунктирными линиями.

Кстати, вы можете задавать свои цвета всем элементам карты (экраны, компоненты, связи) — у вас есть пул из восьми цветов (цветовых тегов), которые вы можете определить через меню Project⇒SketchFlow Project Settings…

Дальше назначит цвет можно через выпадающее или контекстное меню:

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

Сравните:

и .

Двигаемся дальше: экраны и компоненты.

Экраны и компоненты

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

Технически, и те и другие являются обычными UserControl.

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

можно перейти к схеме

.

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

Создавать новые экраны и компоненты можно различными способами:

  1. В панели управления SketchFlow Map есть необходимые кнопки:
  2. Эти же опции доступны из контекстного меню карты.
  3. Экраны и компоненты, находящиеся на карте имеют выпадающее меню, из которого можно вытянуть новый связанный экран или компонент:

  4. Если выделить в рабочей области или дереве объектов один или несколько элементов, то из контенкстного меню их можно превратить в новые компоненты (Make into Component Screen…).

Для каждого нового экрана или компонента на карте открывается окно, в котором можно редактировать содержание. Не забудьте установить размеры экранов и компонентов по умолчанию (см. в начале).

Связи и переходы

Связи — это очень важный элемент: мало того, что они, собственно, связывают различные экраны между собой, они также позволяют удобно проигрывать ваш прототип с помощью плеера. У каждого экрана (либо вставленных в него компонент) есть исходящие связи, которые показывают, куда с этого экрана можно перейти:

В данном случае с экрана C можно напрямую перейти на экран X и через вставленную компоненту Navigation на экраны A, B, C (да, формально получается, что на себя тоже можно перейти).

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

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

Новые связи на карте могут появляться несколькими способами:

  1. Когда вы вытягиваете новый экран или компонент из существующего, автоматически появляется связь (см. выше).
  2. Из выпадающего меню компонента или экрана можно выбрать опцию Connect an Existing Screen или Insert Component Screen и перетащить связь на нужный объект.
  3. Можно просто мышкой выделить объект и перетащить его на другой — между ними автоматически создастся связь (навигация или композиция).

Это то, что касается ручного создания связей. Есть еще вариант полуавтоматического появления связей на карте: на отдельные элементы (внутри экранов или компонентов) можно навешивать поведения (Behaviors), через которые можно запускать множество интересных действий и, в частности, переходы.

Для переходов даже добавлен специальный пункт в контекстном меню — NavigateTo, через который можно навесить переход по клику на любой из имеющихся экранов или вперед/назад в истории перемещений пользователя по экранам. Если между экранами еще нет связи, она автоматически будет добавлена и в карту.

Поведения мы рассмотрим отдельно в одной из следующих статей.

Импорт

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

В этом контексте становится интересным вопрос быстрого обозначения того, что будет на каждом из экранов. Эту задачу можно решать различными способами: от самого простого в виде текстового пояснения “тут будет список контактов” до импорта готовых зарисовок (скетчей).

В случае импорта Expression Blend + SketchFlow предоставляет вам несколько интересных возможностей, каждая из которых обладает своими плюсами и минусами

  • Графические наброски (скетчи). Продумывая наброски, вы сразу выделяете ключевые состояния (экраны) и готовите зарисовки под каждое из них. Состояние = набросок. Далее каждый под из набросков создаете отдельный экран и переносите туда изображение. Потом связываете экраны между собой и получаете первичную версию прототипа. Это также может быть удобным, если вы начинаете с бумажных прототипов или зарисовок интерфейса на бумаге.
  • Графические редакторы. Можно открыть Adobe Illustrator или Photoshop и нарисивать весь набросок в едином файле (или нескольких файлах), разнося разные компоненты и состояния по слоям. Состояние = набор слоев. Дальше можно импортировать этот файл в Expression Blend вместе со слоями.
  • Microsoft PowerPoint. Если вы делаете прототип в PowerPoint в виде последовательностей слайдов, то вы можете импортировать презентацию в Expression Blend. Для каждого слайда SketchFlow создаст отдельный экран и установит связи между ними. Состояние = слайд.
  • Expression Blend. И, наконец, можно создавать все сразу в Expression Blend + SketchFlow. Этот вариант мы рассмотрим в следующей статье.

В качестве примера, см. видео о создании прототипа интерактивного баннера.

Прототипирование в Expression Blend + SketchFlow. Часть 1. Немного истории

3 Сен

Введение

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

В качестве введения в тему и для того, чтобы получить общее представление, предлагаю посмотреть вот это короткое видео (всего 90 секунд!) с обзором текущих возможностей SketchFlow:

А начнем мы со статьи Christian Schormann об истории SketchFlow.

SketchFlow: Немного истории

SketchFlow, инструмент динамичного прототипирования для Expression Blend, наконец официально вышел (от переводчика: статья писалась к выходу Expression Blend 3)! Вы можете скачать триальную версию здесь.

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

Давайте начнем с детских фотографий:

Это прототип, который я написал несколько лет назад на Windows Forms, задолго до появления Avalon/WPF. Даже на этой ранней картинке, хорошо заметен большой редактор карты, названный «Storyboard editor». Серые стрелки отображают навигацию, а красные связи композицию.

А вот другая детская фотография тех же лет. Она показывает редактор скетчей, который позволял очень быстро набрасать в черновике идеи UI:

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

Другая фотография показывает проигрыватель в его самые первые дни:

Слева вы можете увидеть все доступные команды: зеленые обозначают навигацию, а оранжевые соответствуют изменению состояний. Внизу слева уже доступные простые средства для заметок. В этом прототипе заметки были простыми вставками речи (speech bubbles как в комиксах).

~~~

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

~~~

В один прекрасный день, когда SketchFlow встретился с Blend в первый раз (в наш офис в Миннесоте пришел Bob Pappas):

Это была любовь с первого взгляда, и с тех пор вещи начали очень быстро развиваться, взращиваемые потрясающими командами Blend и SketchFlow в Редмонде и Минессоте. Вот как выглядел плеер в тот период:

Немного спустя мы можем обнаружить фотографии вроде этой:

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

И наконец, мы пришли ко дню выпуска из школы:

Сейчас Expression Blend + SketchFlow доступен для загрузки в составе Expression Studio(От переводчика: Expression Studio также доступна в рамках подписок MSDN, MSDNAA, программ DreamSpark и BizSpark.)

Для нас безусловно будет большой честью, если вы попробуете его в работе. Команды Blend и SketchFlow с нетерпением ждут ваших первых (а также вторых и третьих) впечатлений.

via  Блог компании Microsoft