Видео лекции в ИТМО «Юзабилити-тестирование»

Выкладываю видео со второго мастер-класса в ИТМО про юзабилити-тестирование. Также имеется видео первой лекции про проектирование интерфейса.

Прототипирование на чистовую в Adobe Fireworks

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

Wireframes или чистовой дизайн

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

Однако разбиение проектирования графического интерфейса на два этапа имеет и свои минусы. Часто цвет, нестандартный размер, графические приемы оформления — все это не просто добавляет «симпатичности» серым квадратикам, но и полностью меняет восприятие интерфейса пользователем. Именно поэтому я всегда недолюбливал wireframes и старался делать интерфейс сразу «на чистовую». Стоит оговориться, что мы в Digital Design в основном проектируем утилитарные системы, где какой-то особой «красоты» не требуется, так зачем рисовать серые прямоугольнички, если без проблем можно сразу нарисовать «закругленные и градиентные».

Вот пример интерфейса, который я недавно проектировал и одновременно работал над графическим оформлением:

А вот интерфейс от Ивана Филиппенко, еще одного любителя Fireworks:

Мы не потратили времени больше, чем если бы проектировали эти интерфейсы в InDesign, Visio или Axure, а выглядят экраны гораздо приятнее, чем в перечисленных программах. А т.к. для подобных профессиональных систем более гламурное оформление и не требуется, мы упразднили один этап, без ухудшения качества. Да, в Фотошопе тоже можно подобное нарисовать, но времени это займет больше.

Photoshop или Fireworks

Я много лет работал в Photoshop и считаю, что этот замечательный инструмент породил миф о том, что чистовой дизайн корректировать сложно и нужно отложить это на самый конец проектирования. Я раньше сам яростно отстаивал достоинства Фотошопа и отрицал его недостатки: ничего, что много слоев, я знаю волшебные клавиши ctrl и shift, я умею работать в Шопе быстро. Но в конце концов мы признали преимущество Fireworks и дружно перешли на него.

Вот несколько причин, почему Fireworks лучше подходит для визуализации интерфейсов:

• в одном файле хранятся все страницы (Pages) интерфейса, а Master Page позволяет не хардкодить повторяющиеся элементы;
• при этом размеры холста могут быть различными для каждой страницы;
• каждая страница имеет множество состояний (States), поэтому если мне нужно показать всплывающее окно на странице или разворачивание пункта, не приходится постоянно включать/выключать слои;
• слои не плодятся как кролики, ими при желании можно вообще не пользоваться (хватает Pages+States), но если и пользуешься, то не обалдевая от их количества, а используя возможности их шаринга между разными страницами;
• имеется библиотека символов и можно создавать свои символы с определенными свойствами, в том числе и переменными, это позволяет гибко и быстро менять повторяющиеся элементы интерфейса, типа кнопок, иконок и т.п.;
• старые добрые стили (Styles) и фильтры (Filters) дополняют гибкости и позволяют не забывать полезные фотошоповские привычки;
• прекрасная работа с объектами, как в векторном редакторе (просто выделил рамкой и сгруппировал или просто передвинул, никаких удержаний горячих клавиш) и при этом адекватная работа с растром как по отображению, так и по редактированию;
• про анимацию, нарезку и экспорт я не говорю, потому что это само-собой подразумевается.

Если кому-то будет полезно, я покажу какое расположение панелей в Fireworks я использую. Как видите, основные панели это Pages, States, Layers, а также библиотеки символов и свойства выделенного символа (картинка кликабельна):

А если все же не на чистовую?

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

Но и тут Fireworks очень помогает. Помещаешь все повторяющиеся элементы или в Master Page или в библиотеку символов и думаешь только о логике и расположении. А когда нужно наложить текстуры, достаточно лишь поменять символы из библиотеки. Вот пример одного планшетного прототипа (автор Ольга Соколова):

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

Ложка дегтя

Безусловно Adobe Fireworks не завоевал заслуженной популярности не только из-за конкуренции Фотошопа. Неродной для Адоба интерфейс полумутировавший из Макромедии не добавляет ему поклонников. Но главная проблема программы — низкая стабильность. Впрочем, это проблема скорее платформы Виндоуз, на Маке программа работает довольно хорошо (хотя и не идеально). Ну про ресурсо потребление я думаю упоминать не стоит, все же это дизайнерский инструмент.

P.S. Уже упомянутый Иван Филиппенко утверждает, что если поставить значения для антиалиасинга текста «4 time, 190, 10», то он станет «как в браузере» и решится извечная проблема веб-дизайнеров. Впрочем, я попробовал и особого улучшения не заметил, хотя сам факт настроек радует, возможно кто-то из читателей предложит лучшие настройки.

Статья написана специально для корпоративного блога DigDes-а на Хабре. Оригинал статьи: habrahabr.ru/company/digdes/blog/142771/

Когда не нужно слушать пользователей при проектировании интерфейса

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

Случай из медицины

Не так давно мы занимались полной переработкой одной медицинской системы. В частности интерфейс процедурной сестры (которая регистрирует пациентов и помогает с выбором необходимых анализов) выглядел вот так:

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

Недавно мне пришлось посетить один из филиалов этой медицинской сети, чтобы сдать анализы моего сына. Глядя на то, как процедурная сестра долго заполняет необходимые бумажки, я сказал ей, что вот прямо сейчас мы разрабатываем новый интерфейс для их системы. Милая девушка очень обрадовалась и сказала «наконец-то». Но продолжая разговор, я с ужасом понял, что ее пожелания к новому интерфейсу сводятся к «добавьте красивых котят». На мой вопрос, а удобно ли ей пользоваться сегодняшней системой, она уверенно ответила, что да, все нравится, все устраивает.

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

Еще один случай

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

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

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

Эргономические показатели интерфейса

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

Лучше подумаем, как это может помочь при проектировании интерфейсов. Влад Головач в своей онлайн книге «Искусство мыть слона» предлагает использовать показатели Шнейдермана, согласно которым интерфейсы характеризуются:

• скоростью работы пользователя;
• количеством человеческих ошибок;
• субъективной удовлетворенностью;
• скоростью обучения навыкам оперирования интерфейсом.

При этом Влад совершенно верно отмечает, что «добиться высоких показателей можно только по любым двум, отбрасывая два оставшихся» (стр. 54).

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

Говоря «не важны» я имею ввиду объективные показатели бизнеса, т.е. если процедурная сестра огорчена отсутствием «котят», это лично для нее бесспорно плохо, но для бизнеса абсолютно индифферентно (в отличии от скорости работы, к примеру). Скорость же обучения навыкам оперирования интерфейсом тоже обычно не важна, потому что лично я ни разу не встречал, скажем, продавцов с супермаркете, которые уволились бы потому, что не смогли за 10 минут освоить интерфейс кассового аппарата.

Нужно ли слушать пользователя

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

— Безусловно, нужно!

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

А показатели Шнейдермана хорошо использовать при диалоге с заказчиком и обосновании, почему критерий «нам не нравится» для некоторых интерфейсов совсем не важен. Это что-то типа таксистского «вам шашечки или ехать».

Статья написана специально для корпоративного блога DigDes-а на Хабре. Оригинал статьи: habrahabr.ru/company/digdes/blog/142772/

Видео лекции в ИТМО «Проектировании пользовательского итерфейса»

Выкладываю видео с мастер-класса в ИТМО «Проектировании пользовательского итерфейса» о котором я рассказывал ранее.

Интервью об UX

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

— Что такое UX и зачем оно нужно?

UX или User Experience не имеет устоявшегося перевода на русский язык, самое близкое — это «проектирование опыта пользователя». Наверное, нет смысла углубляться в терминологические дебри, давайте будем упрощенно считать, что это модное название слова «юзабилити» (уже вижу, летящие в меня камни за такое упрощение).

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

Тоже произошло и с индустрией программного обеспечения (включая веб). Наличие некого функционала за некую сумму денег уже не является единственным критерием выбора (ключевой момент тут, что этот выбор у потребителя есть). Бизнес все чаще требует, чтобы софт был удобным для конечного пользователя. Кажется, ну какое дело большому боссу до девушки рецепциониста, которая регистрирует посетителей в частной клинике — ну не удобно ей, ну и что с того? Действительно, часто «боссу» до девушки дела нет, а вот если эта девушка на регистрацию клиента потратит не 6 минут, а 4, а эти 2 сэкономленных минуты умножить на 500 филиалов по всей стране и несколько сот тысяч клиентов, то выйдет довольно крупная сумма экономии. Возвращаясь к авто индустрии, таксисты у нас в городи ездят на Фордах и Шевроле, а не на Ладах, не из-за комфорта клиентов, а из-за более выгодного соотношения цены к ресурсу автомобиля.

— Насколько оно развито в России?

В этой области, как и во многих других, наша страна в догоняющих. На западе (особенно в США) есть серьезное обучение в университетах, стабильный спрос, традиции. У нас в какой-то мере уже достаточно давно все это есть (об этом говорит хотя бы тот факт, что конференция UX-Russia проходит уже 10 лет), но при этом последние пару лет ситуация с UX похожа на лихие 90-е в бизнесе. Спрос явно превышает предложение, хорошие специалисты есть, но их недостаточно, а это хорошая почва для фирм-однодневок и чудо-целителей от юзабилити. Думаю в ближайшие два-три года UX-рынок в России устаканится.

— Как должно быть встроено UX-проектирование в производственный процесс?

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

Мы в Digital Design выбрали второй путь — взращивание собственной UX компетенции в каждом департаменте. Это более сложный путь, но мы верим, для нас он более правильный. Сложный, потому что приходится менять производственный цикл в десятке подразделений, потому что в каждом этом подразделении нужно посадить росток UX, притом такой, чтобы через год он разросся, а не был задушен прочими нуждами. Почему мы считаем такой подход более правильным? Потому что, если руководитель бизнес-линии осознал, что UX ему нужен, полезен для бизнеса, и у него есть устоявшийся процесс и обученные специалисты — у такого подразделения уже нет пути назад, оно уже не сможет жить по-старому, и если вдруг уволится UX-дизайнер, ему быстро найдут замену.

— В каких продуктах и решениях UX необходим в наибольшей степени?

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

— Где взять хорошего специалиста по UX?

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

А еще в этом году в рамках нашей «Школы разработчика» мы открыли UX поток. В настоящее время у нас стажируется 12 студентов, с некоторыми из них руководители подразделений уже заключили договоренности о работе.

Лекция в ИТМО

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

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

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

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

На мастер-класс люди пришли добровольно, никто их не заставлял. Но они были очень вялыми. Было видно, что они привыкли слушать лекции и тихо дремать. Я же задавал им вопросы, заставлял думать. И это удавалось с большим скрипом.

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

Конечно, я не прав, и многие меня справедливо обвинят в необъективном однобоком взгляде. Но я так увидел ИТМО в этот раз.

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

И знаете, я всерьез думаю купить им что-нибудь поесть.

Откуда берутся UX-специалисты

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

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

Как ты, мил друг, зовешься?

Самое смешное, что толком не понятно, кого искать. Ну, как это человек называется? Юзабилист? UX Designer? А по-русски как, UX-проектировщик? Или, может быть, Interaction Designer — опять не по-нашему... Дизайнер интерфейсов? Хотя нет, это наверное больше по иконкам.

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

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

Что из этих навыков важнее, а чем можно пренебречь? Каждый работодатель решает этот вопрос исходя из сложившейся ситуации. Но все равно встает перед мучительным вопросом: нужен скорее «рисовальщик» или «аналитик от UX»?

Так что я получу в итоге?

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

— Где нарисованный интерфейс? — спрашивает руководитель проекта.
— Вы понимаете, я UX-специалист, я проектирую пользовательское взаимодействие, анализирую поведенческие реакции, я еще в самом начале процесса, — пытается оправдаться новый сотрудник нанятый два месяца назад на должность «дизайнер».
— Это все прекрасно, но ты работаешь уже два месяца, а я не могу дать разработчикам экраны в разработку.
— Ну вот же, я нарисовал, это называется Wireframes.
— Это не экраны, это черные квадратики и полосочки, я не могу отдать это верстальщику и программисту, — вскипает начальник.
— Детальный дизайн должен прорабатывать другой специалист, а не UX Designer.
— Но ты же дизайнер?
— Да, но понимаете, я занимаюсь несколько другим...

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

Так кто же нужен и где его найти?

Я ищу и нанимаю на работу дизайнеров интерфейсов более пяти лет, а последние два года занимаюсь внедрением UX практик в большие IT¬-компании. В результате у меня сформировалось определенное мнение и определенный подход, который состоит из двух принципов:

1) UX-специалист должен быть универсалом. Он должен и проектировать пользовательское взаимодействие, и заниматься аналитикой, и создавать Wireframes, и рисовать чистовой дизайн. Юзабелисты, которые не могут сделать «красиво» не нужны. Тонны аналитики и подробно расписанные пользовательские персонажи мало полезны, если нет итоговых экранов от этого же человека. В идею «один делает логику и wireframes , а другой рисует дизайн» я не верю, обычно выходит полная лажа. UX-специалист, проектирующий интерфейс, не обязан быть супер графиком (проработку графических тем, текстур и модных иконок можно отдать профильным дизайнерам), но он должен уметь делать аккуратно, красиво, чтобы это, при желании, можно было отдать в разработку без привлечения дизайнера.

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

Почем универсалы и почему дизайнеры?

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

Я хочу привести лишь один довод в защиту моей практики универсальных UX-дизайнеров. Этот довод — незрелый рынок.

У 90% производителей софта (в том числе и веб) пользовательский интерфейс (UI) и пользовательское взаимодействие (UX) настолько плохие, что им не до жиру. Интерфейсный дизайнер средней руки может колоссально улучшить большинство производимых в России интерфейсов. Мы пока не доросли до Америки, где в университетском курсе для юзабелистов половина предметов начинаются со слова «психология». Нам пока рано взращивать узкоспециализированных специалистов.

Нам нужны UX универсалы. Много. Поэтому мы в Digital Design обучаем дизайнеров и поэтому с этого года мы открыли поток по проектированию интерфейсов в нашей Школе разработчика. Сейчас у нас стажируются 13 студентов, но это уже тема отдельной статьи.

Статья написана специально для корпоративного блога DigDes-а на Хабре. Оригинал статьи: habrahabr.ru/company/digdes/blog/141486/