HCI is over… I can now have my life back!

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

Для начала немного статистики:

Студентов, посмотревших видео:  29,105

Из них 2, 470 сделали хотя бы 1 задание, а все 5 заданий  выполнили всего 791 человек. В связи с этим особенно приятно быть в их числе )

Было 2 варианта прохождения курса (с 2 разными сертификатами в конце):

Studio Track: выполнение индивидуального проекта + еженедельные тесты по материалу из лекций.

Apprentice track: прохождение только тестирования.

Лично мое мнение: лекции, конечно, хороши, но несут очень мало пользы в отрыве от практики. Так что я не жалею о бессонных ночах и потраченном времени 😉 К слову о теме, которую я выбрала:

The overall idea is the following: what if your mobile device could adapt to your environment and needs and show really relevant info when you need it? You come to a business meeting – it shows you the agenda right away. You’re passing by a food store – and it tells you “hey, your girlfriend asked you to buy milk and bananas and I think you may be running out of shampoo and cat’s food”. You are at the clothing store somewhere abroad and it tells you “maybe you need to convert shoes size into European? Here it is!” You are in a movie rental – it tells you “hey, haven’t you wanted to watch the “Die Hard” recently?”

I decided to focus on a single activity — buying food/bath accessories. Almost everyone does it, and maybe there’s a chance to help people save some time, broaden the number of products they try out (and enhance their customer experience) and make the whole process more pleasurable.

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

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

На второй фотографии: storyboard, описывающий идею моего мобильного приложения.

И вот что у меня получилось в итоге:

Что понравилось:

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

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

Что не понравилось:

— Система оценки (peer grading). Каждое задание оценивали несколько случайным образом выбранных студентов. И каждый студент должен был оценить 5 разных работ. Возможно, мне просто не повезло с моими оценщиками, но по первым заданиям я получила мизер адекватной обратной связи. В частности, в оценке, которая предполагала проверку по юзабилити-эвристикам Якоба Нильсена, мне, к сожалению, не написали ничего по этой теме… А судя по форуму, такая же ситуация была и у других студентов. Хотелось бы, конечно же, получить обратную связь от самих преподавателей… но я понимаю, что это фантастика, учитывая количество участников.

В общем и целом я курсом довольна, рекомендую всем.

Мелочь, а приятно

Ребята из http://meetup.by начали работу по рекомендациям, которые мы составили на одном из прошедших UX Meetup-ов. Мы тогда провели юзабилити-поединок по их сайту и нагенерили много идей, а Ди донесла их до заинтересованных лиц. И вот результат.

Пост 8, насыщенный событиями

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

Проделанный путь: Минск — Рига — Брюссель — Лиссабон — Хельсинки — Рига — Минск — Санкт-Петербург — Москва — Минск — Гродно — Минск.

Посещено мероприятий: 7 штук. Из них: 2 внутренних UX митапа, один БА митап, конференция UX-LX в Лиссабоне, конференция ПрофсоUX в Питере, митап по интерфейсам в Гродно и Analyst Days в Минске.

Докладов сделано: 3 штуки.

Мою презентации с митапу по интерфейсам можно найти на SlideShare, там же лежит наша с Юрой презентация с Analyst Days.

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

На фото: я с отвоеванными в неравной схватке у Юры наушниками Sennheiser hd215  и Юра, счастливый обладатель фоторамки. Подарки получены за доклад на Analyst Days.

Landing Page Template Guide

Наткнулась случайно на отличный шаблон Landing Page. По ссылке как «скелет» страницы, так и тепловая карта, и наиболее типичные траектории движения взгляда.

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

Пост седьмой, очаровательный

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

И вот чем мы там занимались:

Сначала я предложила всем поучаствовать в оценке дизайна т.н. методом триад. Для чистоты эксперимента суть метода я пояснила ближе к концу. Что мы делали:

а) Взяли для сравнения 3 дизайна (все с сайтов, посвященных конференциям): ux-lx.com, profsoux.ru и it-spring.org. Конференции все мы любим, и даже собираемся все эти 3 штуки посетить (а одна уже даже за плечами). Так что мы самая что ни на есть целевая аудитория.

б) Поочередно сравнивали сайты следующим образом: брали 2 дизайна и называли ту особенность, которая их объединяет и отсутствует в третьем дизайне. Для того, чтобы направить мысли в правильное русло, я раздала всем небольшой список свойств продукта из Microsoft product reaction card:

Accessible Desirable Gets in the way Patronizing Stressful
Appealing Easy to use Hard to use Personal Time-consuming
Attractive Efficient High quality Predictable Time-saving
Busy Empowering Inconsistent Relevant Too technical
Collaborative Exciting Intimidating Reliable Trustworthy
Complex Familiar Inviting Rigid Uncontrollable
Comprehensive Fast Motivating Simplistic Unconventional
Confusing Flexible Not valuable Slow Unpredictable
Connected Fresh Organized Sophisticated Usable
Consistent Frustrating Overbearing Stimulating Useful
Customizable Fun Overwhelming Straight Forward Valuable

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

— Яркий/ Бледный

— Информативный/Не информативный

— Полезный/ Бесполезный

— Веселый/ Скучный

— Модный/ Устаревший

— Вызывающий доверие/ Подозрительный

— Призывающий к действию/ Не призывающий к действию

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

В целом метод простой, а главное — позволяет выявить конкретные слабые места в дизайне, не опираясь на субъективную оценку и «нравится/не нравится».

Затем Юра вещал нам о Fascination Design (намеренно, как это делал и докладчик, не перевожу этот термин на русский).  Подробнее (я надеюсь) он изложит свои мысли в своем блоге. Ну а я тут перечислю то основное, что мне запомнилось. Итак, базовые типы fascination:

1) Похоть (Lust): отличную подборку примеров уже после митапа скинула Саша.

2) Мистика или тайна: «секретные ингредиенты» и в принципе любое нагнетание таинственности — пример использования этого приема.

3) «Звонок» или тревога: все то, что нас пытается подтолкнуть к действию, вызывая отрицательные эмоции (к примеру, страх не иметь возможности получить этот же объект в будущем — «ограниченное предложение»)

4) Престиж: работает на сравнении себя с другими, более успешными представителями человечества. «Мажь подмышки дезодорантом X, и станешь красив, богат и успешен, как теннисист Y»

5) Сила и контроль: может, в частности, работать как апелляция к потере контроля. И (это уже дополнение от меня) лучше всего действует на людей,  первичной мотивацией на получение и удержание власти.

6) Запрещение: не читайте, пожалуйста, следующее предложение.  Не это, а сразу после него. Да-да, вот это самое.  Остались вопросы? 🙂

7) Доверие: апелляция к долгой истории («мы с вами с 1812 года»), стабильности, последовательности.

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

После Юры Саша рассказала — о новых фичах Photoshop CS6. Об этом тоже много писать не стану, чтобы у Саши остался шанс подготовить на базе своего доклада статью с картинками.

Ну и под конец обсудили доклад с SQA Days «Принцип Паретто usability-тестирования: 20% усилий , дающие 80% результата», великодушно пересказанный нам Татьяной Дергай, сие мероприятие посетившей.

Пост шестой, запоздавший

Довелось мне намедни поприсутствовать на событии  КУ-meetup#5 «С какой стороны подкатить к дизайну?». Было это аж 28 апреля, а руки написать отчет дошли только сейчас.

Заявлено было 3 доклада:

— Разработка логотипа: как помочь заказчику написать хороший бриф

— Как сделать афишу

— Хватит играть со шрифтом: 10 ошибок в работе со шрифтом и 5 способов их избежать

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

Справедливости ради, кое-что во втором докладе зацепило: а именно — разделение композиций на импульсные и резонансные.

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

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

Итак, 11 наиболее распространенных ошибок при работе со шрифтами (прочувствованные на собственном опыте и вычитанные у умных людей):

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

2) Недостаточный контраст с фоном. Каким бы красивым ни был шрифт, если из-за низкого контраста с фоном текст невозможно прочитать, это серьезная проблема.

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

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

5)  Слишком маленький интерлиньяж. Не стоит всегда полагаться на значение по умолчанию для  расстояния между сроками. Иногда совсем небольшое увеличение этого расстояния делает текст намного более удобочитаемым.

6) Использование более 3 шрифтов за один раз. В большинстве случаев уже 2 шрифта — это вполне достаточно. Если вы не хотите, чтобы ваша работа была похожа на открытку, которую сделала секретарша, впервые обнаружившая WordArt, умеренность — ключ к успеху.

7) Слишком маленький размер шрифта. Если, конечно, ваша цель — не в том, чтобы читатель морщил лоб, пытаясь разобрать написанное.

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

9) Слишком короткие или слишком длинные строки.

10) Недостаточное использование белого пространства. Когда все элементы как будто склеены друг с другом, становится весьма трудно различать их.

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

Ну и напоследок — отличная статья о том, как выбрать правильный шрифт:

http://www.smashingmagazine.com/2011/03/24/how-to-choose-a-typeface/

Пост пятый, вдохновительный

Привожу здесь свои рассуждения на тему «Где взять вдохновение для решения задач по UX«, прозвучавшие пятничным утром на UX meetup-е.

Итак…

Вдохновение нам особенно нужно тогда, когда мы решаем задачи, в которых присутствует некая степень неопределенности. Если речь идет о рутинных задачах, которые мы прекрасно представляем, как выполнять, тут все просто: ритмичную музыку в наушники, клавиатуру в зубы и вперед. А вот если задачу мы себе представляем не полностью, совсем другой разговор. Притом учитывая IT реалии, сидеть и ждать, пока снизойдет вдохновение — не наш метод. Хотелось бы иметь тумблер, который бы включать режим «Вдохновение». А пока такого тумблера не изобрели, расскажу, что помогает лично мне.

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

2. Вдохновляющие примеры. Очень помогает просмотр поисковой выдачи по словам Showcase of beautiful [вставить слово] design. Вместо квадратных скобок может быть что угодно: форма авторизации, домашняя страница, опрос, форма обратной связи и любой другой объект, который с завидной частотой встречается на сайтах. Почему я ищу именно красивые примеры: утверждение спорно, но тем не менее я считаю, что по-настоящему удачные решения редко бывают некрасивыми (речь идет об особенной красоте, встречающейся, например, в тригонометрии). При этом обратное утверждение неверно: не все красивые решения удачны. Есть у меня любимые источники вдохновения, где часто публикуют подобные подборки: www.smashingmagazine.com, www.designmodo.com, www.inspirationfeed.com, www.naldzgraphics.net.

3. Реальные объекты. Мой образец для подражания здесь — это то, как из навигационной системы в аэропортах родилась идея Metro дизайна. Создавая что-то новое, я всегда оглядываюсь на то, как задача выполняется «оффлайн» (если это возможно, конечно). Чем это хорошо: если пользователь уже выполняет какую-то деятельность, это говорит о том, что мы можем использовать его ментальную модель для переноса деятельности «онлайн»: тем самым мы упростим обучение. В то же время при переводе деятельности в электронный вид, мы приобретаем некоторые уникальные возможности, которые могут ее улучшить (например, автоматизация рутинных операций, возможность хранить историю, исправлять ошибки и т.п.). Поэтому стоит обращать внимание на 2 аспекта:

а) сильные стороны оффлайн решения, которые стоит постараться сохранить;

б) сильные стороны онлайн решения, которые можно добавить.

4. Конкуренты. Куда же без них. Многие системы, которые мы создаем, не уникальны. Поэтому стоит посматривать в сторону аналогов, хотя бы для того, чтобы понять, что работает, а что — нет. Опасность, которая здесь таится: соблазн скопировать. Этого делать не стоит: у систем, как и у людей, должен быть свой индивидуальный стиль. Если ваша система состоит из кусков подсмотренных решений, она начинает восприниматься другими как жалкий подражатель без своего мнения и внутреннего стержня. Поэтому подсмотрев, как сделано у конкурентов, нужно напрячь извилины и сделать не так же, а лучше.

5. Коллеги. Я люблю советоваться с членами команды. При этом чаще всего советниками выступают программисты. Объясню, почему: во-первых, если ваше решение выдержит критику программиста, вы приобретете +5XP к Persuasion. Во-вторых, у программистов часто за плечами очень много разнообразного опыта и они могут подкинуть хорошие идеи. В-третьих, многие программисты «гики», они следят за свежими решениями и новыми подходами, и могут указать на что-то с точки зрения пользователя. Ну и в-четвертых, советовать программисты любят. Главное помнить, что решение все равно за вами.

6. Инструменты. Если все, что было перечислено выше, не помогает, есть смысл обратиться к специальным инструментам. Что может выступать в роли таких инструментов: Mental Notes карточки, Mind Maps, метод 6 шляп и в принципе любые методы, в основе которых так или иначе лежит мозговой штурм. Есть еще индивидуальные особенности, за которыми стоит понаблюдать: создание определенной атмосферы способствует появлению вдохновения. Для кого-то сработает классическая музыка, для кого-то — несколько кофейных зерен на столе, для кого-то — шоколадка.

Это пока все, что пришло в голову. Буду рада почитать о методах, которые используют остальные.

Пост четвертый, гастрономический

А у нас вчера был очередной UX-митап. Перерыв между прошлым и этим вышел совсем маленький, но о чем поговорить все равно нашлось. Обстановку здорово скрасили суши, так что атмосфера была совсем уж расслабляющая. Кстати о суши: заказали мы их на этот раз в Jam Club и никак не могли пройти мимо их меню: очень уж рекомендую посмотреть, как оно сделано. В свете недавнего митапа, посвященного вопросам доступности, вызвало бурю обсуждений. Оценили? Ладно уже с W3C WCAG, вертится-то как! Сезон аттракционов еще не открылся, а у меня ощущения как после катания на карусели! Ну разве не прелесть? А учитывая скорость, с которой эта штука вся вращается, все элементы разглядеть в принципе невозможно. Так что можно говорить, что речь идет о подпороговой стимуляции: вроде бы и картинки не рассмотрел, но есть-то как захотелось резко!

На самом митапе успели мы очень многое:

1) Сначала поговорили о публичных выступлениях.

2) Потом речь зашла о Responsive Web Design и Mobile First: тут мы задумались (особенно Юра), существует ли подход, который подразумевает подстраивание системы (в частном случае — веб-сайта) не только под технические устройства (разрешение экрана, браузер и т.п.), но и подо все, что можно узнать о пользователе: его местоположение, окружение, историю действий и предпочтения. Сначала мы подумали в сторону «персонализации», но потом решили, что тут надо брать еще шире. Потом пришли к термину Adaptive Web Design, но к сожалению, он уже занят другим, более скучным понятием.  Поэтому будем еще продолжать думать в этом направлении.

3) Далее мы продолжили разговор об эмпатии, но с необычного ракурса, а именно: как она может мешать на работе. Подробнее можно почитать в блоге UX booth, но основная идея такова: люди с хорошо прокаченным навыком эмпатии очень подвержены влиянию негативных эмоций от других людей, в частности — коллег по работе. А Юра задвинул интересную теорию о коллективном бессознательном, устроенном в виде Dropbox-а: все наши мысли и идеи обитают не в наших головах, а в общем хранилище, но у каждого есть свой уникальный логин/пароль. А особо прокаченные перцы могут использовать чужие логины/пароли и извлекать идеи из этого хранилища. Эзотерично? Весьма. Но докажите, что это не так 🙂

4) Ну и в конце я минут 7 вещала на тему Task Analysis: как его вижу я. А вижу я его как разбор по кирпичикам деятельности пользователя, с указанием длительности, частоты, окружения и оборудования для каждого кирпичика. С последующим анализом каждого кирпичика и мозговым штурмом по его улучшению. Юра пририсовал к моим кирпичикам эмоциональные рожицы с цитатами, и вот получилось уже нечто большее. Над этой темой я еще подумаю и опубликую здесь достойный пример, но мне кажется, что этой небольшой деталью мы приблизились к Experience Maps.

Пост третий, социальный

В пятницу был прям какой-то день митапов. Сначала мы с утра провели внутренний традиционный митап, потом все вместе отправились  на митап, посвященный вопросам accessibility.

На нашем митапе Саша представила интересную адаптацию раскадровок к решению практических задач: рисуются 6 квадратов, первые два представляют собой иллюстрацию проблемы (I try to… but…), далее 3 квадрата отводятся под решение, а последний — показывается полезный выхлоп от нашего решения. Раньше я как-то с опаской относилась к Storyboarding-у (из-за предубеждения «много затрат — мало выхлопа»), а сейчас пересмотрела свое отношение.

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

Я предложила несколько вариантов:

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

2) В самом лифте создать явный call to action: разместить кнопку закрытия дверей выше (сейчас она чуть ниже пояса), сделать ее крупной, чтобы можно было нажать ладонью.

3) Изменить алгоритм поведения лифта: сократить время, которое лифт выжидает, прежде чем закрыть двери.

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

На вечерний митап позвали незрячих пользователей, которые рассказали нам о том, как они пользуются интернетом. Кстати, а вы знали, что самый доступный браузер — Internet Explorer? А самый недоступный — Opera? Вот так-то.

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

А вот доклад о WAI ARIA подкачал: мы здорово превысили тайм-лимит, поэтому детального обзора не получилось. Придется, видимо, читануть как-нибудь.