Как научиться рисовать красивые скетчи?

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

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

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

В статье The Messy Art Of UX Sketching, опубликованной на сайте Smashing Magazine даются советы, как самостоятельно научиться рисовать скетчи и выработать свою технику рисования.

The Messy Art Of UX Sketching

Поделиться:

Руководство по стилю Android 4

Процессы и методики, Гаджеты, Инструментарий

Долгое время руководства по стилю (UX guidelines) мобильной ОС Adnroid страдали от ряда недостатков: в них отсутствовало описание идеологии платформы, они были неполны, а также изобиловали ненужными техническими деталями. В этом плане руководства по стилю Apple iOS были куда более последовательны. Но ситуация изменилась, и теперь новое руководство для четвертой версии Android может служить образцом для подражания.

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

Android Design (руководство по стилю)

Поделиться:

Подноготная лаборатории для юзабилити-тестов

Гаджеты, Инструментарий, Исследования

Запись десктопных тестов осуществляется легко с помощью такого программного обеспечения, как, например, Silverback для Mac, и Morae для PC. Однако запись тестов на мобильных устройствах требует особых ухищрений, особенно когда тестируется продукт, на который нельзя поставить никакое специализированное ПО (например Kindle). В таких случаях юзабилисты прибегают к камерам, расположенным на специальных подставках, самодельным или приобретенным в специализированных магазинах. Однако некоторые специалисты утверждают, что подобные конструкции вынуждают пользователей держать мобильное устройство в неестественном положении и оказывают влияние на результаты тестирований.

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

Anatomy of a Hardware Usability Testing Rig

Поделиться:

Proto и другие приложения для планшетов от Adobe

Видео, Гаджеты, Инструментарий

Не так давно Adobe выпустил приложение Proto для планшетов. Пока его могут пощупать счастливые обладатели планшетов под управлением Android 3.1 и новее с диагональю не менее 8.9″. Однако в скором времени Adobe обещает выпустить Proto и всю линейку приложений Adobe Touch Apps и для iOS.

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

Помимо Proto, Touch Apps включает графические редакторы Photoshop Touch (растровый) и Ideas (векторный), программу для презентации дизайнов Debut, приложение для сбора идей в виде интерактивных коллажей-мудбордов Collage, приложение для подбора цветовых комбинаций Kuler.

Adobe Proto
Adobe Touch App Family

Поделиться:

Бесплатное удаленное мобильное тестирование

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

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

Уже появился сервис Mobile UX Research от UserZoom, позволяющий вести удаленную запись происходящего на экране у мобильных пользователей. Но если вас не устраивает функциональность или цена решения от UserZoom, то вы можете сделать такую запись бесплатно. Правда, пока это возможно только на iOS 5 благодаря функции AirPlay Mirroring. Кроме того, на компьютере пользователя должны быть запущены приложение для получения видеокартинки с устройства и сервис для трансляции экрана.

В качестве первого на Mac следует использовать AirPlayer, а на Windows — AirMediaPlayer.

Why AirPlay Mirroring is the Biggest Thing to Happen to User Research in 2011

Поделиться:

Tiggr Mobile Apps Builder: быстрые мобильные прототипы

Инструментарий

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

Как же быстро и удобно делать мобильные прототипы? Завтра Марсио Лейбович даст в своем вебинаре в рамках UX Марафона целый ряд ответов на этот вопрос, и у Вас еще есть возможность посетить вебинар. Но одним из способов мы поделимся прямо сейчас. Онлайновый сервис для прототипирования Tiggr, который мы уже упоминали на Фреше, добавил возможность использования конструктора мобильных приложений. Что же нам дает этот конструктор?

Во-первых, это несколько ограниченный, но удобный и простой набор базовых элементов, из которых можно быстро собрать экран. При этом сервис предоставляет возможность редактировать стилистику стенсилов. После того, как вы создали экраны и диалоги приложения, их можно связать ссылками, а потом быстро открыть полученный прототип непосредственно на мобильном с помощью QR кода. Если вы проектируете не мобильный сайт, а нативное приложение, то его будет лучше тестировать не в браузере, где каждая страница открывается с некоторой задержкой, а внутри специальной утилиты от Tiggr, в которой оно выглядит как почти настоящее приложение (кстати, если вас устраивает результат, то простые приложения под Android можно создавать непосредственно в Tiggr).

Что еще? Вы можете сделать, чтобы прототип реагировал на различные события, добавлять в него JavaScript, а также использовать REST APIs, которые есть у многих популярных сервисов. Интересные примеры готовых прототипов есть на сайте проекта.

Сайт Tiggr
Innovative Features in Tiggr Mobile Apps Builder (обзор на UX Movement)

Поделиться:

33 сервиса удаленного тестирования

Инструментарий

Чуть ли не каждый месяц появляются новые сервисы, предназначенные для удаленного тестирования, разработки и оценки информационной архитектуры, анализа поведения посетителей на сайте. Smashing magazine подготовил обзор наиболее интересных сервисов такого рода. Среди них как платные, так и бесплатные сервисы для полноценного удаленного юзабилити-тестирования и так называемого «микротестирования», A/B и многомерного тестирования, проведения опросов, отслеживания кликов и движений мыши, карточной сортировки, сбора мнений экспертов и пользователей. Некоторые из инструментов — старые знакомцы, другие появились лишь недавно и пока мало известны.

Статья завершается сводной таблицей с информацией о сервисах.

Comprehensive Review Of Usability And User Experience Testing Tools

Поделиться:

Ай-трекинг с помощью веб-камеры: реальность или маркетинговая уловка

Инструментарий, Исследования

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

Ага Бойко, автор книги Eye tracking the user experience, которая выйдет в 2012 году, попробовала сама принять участие в таком исследовании. По заявлениям разработчиков, одним из основных преимуществ такого метода помимо дешевизны является возможность удаленного тестирования. Но в этом случае возникает множество сложностей и побочных факторов, которые снижают надежность исследования. Например, пока система пересылает данные для калибровки, пользователь вынужден более минуты сидеть неподвижно, чего сложно ожидать от большинства пользователей.

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

25 октября в 20:00 (МСК) Ага Бойко расскажет о планировании исследований с ай-трекером, сборе и анализе количественных данных на вебинаре в рамках UX Марафона.

The Truth About Webcam Eye Tracking

Поделиться:

Средство для сбора данных о пользователях мобильных приложений от UserZoom

Видео, Инструментарий

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

Mobile UX Research

Поделиться:

Тестирование iPad-интерфейсов: какое средство выбрать для создания интерактивного прототипа

Гаджеты, Инструментарий

Какой инструмент лучше всего подойдет для тестирования прототипов iPad-приложений на целевой аудитории? Создатели BBC Global iPlayer для iPad делятся своим опытом работы с Keynote, Cocoa и iPad photo gallery.

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

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

Участникам тестирования было очень легко работать и с Photo Gallery. Большинство из них даже не понимали, что они просто листают фотографии в том или ином порядке. Для каждого сценария были созданы соответствующие альбомы, в связи с этим все нелинейные сценарии были невозможны. А потому тестировать переходы между сценариями удобнее с помощью Cocoa.

К слову, вопросу проверки дизайнерских (в широком смысле) идей и концепций посвящен один из вебинаров грядущего UX Марафона. Крис Рисдон из Adaptive Path расскажет о проверке идей на прототипах с пользователями. В рамках этого вебинара участники рассмотрят конкретный случай на примере работы с Keynote. В свою очередь, Илана Каплан из Optimal Experience расскажет конкретику о проектировании и тестировании iPad-интерфейсов.

Mobile Prototypes for Usability Testing 

Поделиться:

Adobe Edge: визуальный редактор JS-анимации

Видео, Инструментарий

Понимая тяжесть ситуации в конкуренции Flash с современными веб-стандартами, Adobe решила сама создать продукт для работы с ними. Новая программа Adobe Edge позволяет создавать анимированные объекты в визуальном редакторе, аналогичном Flash. Эти объекты описываются JSON и экспортируются в стандартных файлах HTML, CSS и JavaScript. Edge позволяет легко и быстро встраивать анимированные объекты в существующие веб-страницы, что может быть хорошим подспорьем в быстром прототипировании богатых динамическими эффектами приложений.

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

Страница Edge на сайте Adobe
Adobe Edge: редактор анимации HTML5/JavaScript (обсуждение на Хабрахабре)
Предварительная версия Adobe Edge для работы с HTML5 доступна бесплатно (новость на 3DNews)
EDGE: A new HTML5 offering from Adobe (заметка в Webdesigner depot)

Поделиться:

Шаблоны для проектирования под Android 2.3

Гаджеты, Инструментарий

В последнее время ОС Android стремительно приближается по популярности к лидерам рынка в лице Apple, и проектирование под Android постоянно набирает обороты.

Компания Teehan+Lax опубликовала PSD с векторными стенсилами для ОС версии 2.3.4. В шаблоне использован стандартный скин Android, выбрано наиболее популярное разрешение экрана и высокая плотность экрана (high density). Для использования вам потребуется установить шрифт Droid Sans.

Android GUI PSD (High-Density)

Поделиться:

Калькулятор модульных сеток

Инструментарий

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

Кроме того, сервис сразу генерирует CSS-файл для выбранного варианта сетки.

GridCalc

Поделиться:

Рисуем «карты ума» с умом

Инструментарий

SpiderScribe — любопытный новый онлайн-сервис «карт ума». С помощью него можно не только визуализировать идеи: свои или участников мозгового штурма, но и сопроводить их картинками, картами из Google Maps, документами и календарями. Сервис, как и его аналоги, поддерживает работу нескольких людей над одной «картой ума», но в отличии от других, он полностью бесплатен. По крайней мере, пока.

SpiderScribe

Поделиться:

CogTool — сервис для подсчета времени выполнения задач методом GOMS

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

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

Созданный в CMU Human-Computer Interaction Institute инструмент CogTool автоматизирует такие подсчеты. Кэтлин Запата в статье для UX Magazine описала пример использования метода, в котором подсчитано время регистрации счета на сайтах ряда банков.

Конечно, такой метод обладает определенными ограничениями: одним из наиболее существенных является то, что он прогнозирует время «прохода» по задаче для опытных пользователей, уже знающих, как ее выполнять. На UX Марафоне 2011, который пройдет в формате вебинар-конференции с 24 по 28 октября, Ричард Омансон из компании User Centric более подробно расскажет детали применения методики GOMS и сервиса CogTool, о том, как встраивать их в реальные проекты и совмещать применение GOMS с исследованиями на пользователях. Обновленный сайт конференции и программа будут доступны в ближайшие 2 – 3 недели.

Evaluating UX by measuring task efficiency
Сервис CogTool

Поделиться:

Как перейти на HTML прототипы?

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

Натан Кертис из агентства EightShapes рассказал в подкасте Джареда Спула о том, как они перешли с привычных PDF-макетов на HTML-прототипы. Это дало им, как агентству, целый ряд преимуществ:

• проектировщикам стало легче общаться с разработчиками «на их языке»;
• сами проектировщики стали больше задумываться о реализации различных деталей;
• HTML-прототипы стимулируют более подробно продумывать экраны на стадии бумажных набросков;
• хотя разработка HTML-прототипа более затратна на первых этапах, в последующем это компенсируется быстротой изменений;
• прототип очень удобен для просмотра и тестирования, так как открывается прямо в браузере по фиксированному URL;
• можно снизить количество текстовых описаний, так как логика работы различных интерфейсов, растягивающихся элементов верстки, анимированные переходы и т.д. прописаны непосредственно в прототипе;
• при работе с HTML-прототипом каждый может использовать свой любимый редактор.

Тем не менее, HTML-прототипы — не панацея. Они требуют определенного уровня навыков, и тем не менее, этот код обычно не используется на реальном сайте, так как пишется «на скорую руку» и неспециалистами. Кроме того, прототип без текстовых описаний подходит не всем заказчикам: некоторые разработчики неспособны достаточно точно реализовать представленные в прототипе решения.

Подкаст: Открыть плеер в новом окне | Скачать (Длительность: 32:14 — 16.8МБ)

Nathan Curtis – From PDFs to HTML Prototypes

Поделиться:

Android vs. iOS, кто сильнее?

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

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

Ответить на эти вопросы беспристрастно помогло A/B тестирование с учетом времени, необходимого для ответа, и ошибок, совершаемых пользователями, а также опрос пользователей для выяснения их предпочтений. Подробные результаты опубликованы в статье от авторов средства удаленного тестирования IntuitionHQ.

Android vs iOS; A Usability Battle

Поделиться:

Прототипы мобильных приложений в облаке

Гаджеты, Инструментарий

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

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

Но в скором времени, похоже, появится более удобный вариант. Компания Exadel — разработчики инструмента для прототипирования Tiggr, о котором мы писали совсем недавно, объявили сегодня в email-рассылке, что планируют выпуск приложения, аналогичного DAPP. Но в отличие от DAPP это будет веб-приложение, которое позволит размещать созданный прототип в облаке, то есть на сервере в Сети, а уже оттуда запускать его на телефоне. Для большинства это будет гораздо удобнее: дело только за удачной реализацией. А если Exadel это не удастся, то идею наверняка подхватит кто-нибудь еще.

Поделиться:

Быстрые интерактивные прототипы от Тиггра

Инструментарий

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

• быстрое создание различных интерактивных элементов с возможностью детального управления их поведением;
• работа с шаблонами;
• экспортирование в HTML;
• совместное прототипирование с взаимодействием в виде чата;
• онлайн-демонстрация прототипа с возможностью комментирования;
• отдельный слой комментариев к прототипу;

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

Tiggr: A Tool for Building Interactive Html Prototypes (статья о сервисе на UXmovement)
Сайт сервиса

Поделиться:

Шаблон iPhone для Visio

Инструментарий

Наш хороший знакомый и бывший коллега по UIDesign Group Геворг Глечян поделился набором стенсилов для прототипирования iPhone-приложений в MS Visio. Не обнаружив достойных внимания стенсилов для Visio, приближенных к фотореалистичным, автор создал этот набор на основе PSD-стенсилов от команды teehan+lax.

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

Шаблон iPhone для Visio (первая версия)

Поделиться: