Михаил Елфимов об интерфейсах

О форме регистрации, логине, пароле и каптче@Артем Горбунов

Мне кажется, или фраза «положить в корзину» в интернет-магазинах смотрится как-то странно на фоне корзины в windows?

Книга «Effective Prototyping for Software Makers» настолько хороша, что стоило бы порекомендовать её раньше. Это настоящая библия проектирования интерфейсов, постановки процессов, методов, инструментов. Она предназначена как для проектировщиков интерфейсов, так и для менеджеров проектов. С другой стороны, прочитать её полностью довольно сложно. В книге очень дотошно расписываются многие вещи, которые можно посчитать очевидными. Я не нашел в себе сил прочесть её полностью, поэтому пишу о ней только сейчас.

Книга очень основательна (около 600 страниц). В ней подробно рассматривается процесс проектирования в целом, какие шаги предшествуют прототипированию и какие данные нужны на входе, что получается в результате прототипирования и как полученное использовать в дальнейшем процесс разработки. Рассказывается как выбрать наиболее подходящие для конкретного проекта методы прототипирования. Подробно рассматриваются такие методы, как card sorting, wireframe, storyboard, paper prototype, blank model, video prototype, coded prototype.

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

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

Примерно половина книги посвящена подробному рассмотрению каждого из методов прототипирования, а также несколько есть глав о конкретных инструментах прототипирования — Microsoft Word, PowerPoint, Excel, Visio и Adobe Acrobat.

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

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

Книгу «Effective Prototyping for Software Makers» ( Jonathan Arnowitz, Michael Arent, Nevin Berger) можно купить на Амазоне или взять почитать у меня.

ЗАКРЫТЬ НЕЛЬЗЯ ПОКАЗЫВАТЬ… или Два типа вовлечения пользователей в социальные сети @Максим Спиридонов (создатель продюсерского центра «Ройбер»)

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

Рассмотрим ситуацию, когда (и если) мы допустили пользователя к базе данных до регистрации. Пользователь “ходит” по анкетам уже зарегистрированных посетителей, использует поиск или каталог и нередко обнаруживает, что никого интересного (конкретных одноклассников, сослуживцев или даже - школы, института) для него на сайте нет. Надо ли говорить, что после этого он уходит? Скорее всего, навсегда.

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

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

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

Самые трудные уроки для стартапов, Пол Грэм @perevedem.ru

Ну вот перешел я на memori.ru, и опять понял что Google Bookmarks лучше. Интерфейс проще, мусора на страницах меньше. Ведь в memori.ru есть дизайнер интерфейсов. Значит они типа о юзерах думают. А все равно получается плохо.

Взять хотя бы страницу списка закладок, я даже скриншот сделал. В Google Bookmarks это выглядит как список закладок:

Ничего не отвлекает от собственно закладок, все управление сделано максимально тонко, минимум графического шума.

Теперь смотрим на список закладок на memori.ru:

Это не список закладок. Это, блин, радуга фруктовых ароматов skittles. Сравните, сколько места занимает список на memori и на google. Посмотрите, на месте ли управляющие ссылки и не отвлекают ли они от заголовка. Посмотрите, как быстро можно перескакивать взглядом по URL ссылок и как они обрезаются в google до домена. Насколько визуально легче отображаются теги и меньше отвлекает дата добавления.

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

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

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

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

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

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

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

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

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

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

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

Встраивание звукового файла в страницу очень симпатично сделано на computerra.ru (например, в конце статьи).

Вот так выглядит плеер в неактивном виде:

А так выглядит плеер во время воспроизведения:

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

Это вторая часть доклада «Юзабилити социальных сетей», прочитанного на конференции User Experience 2007. Первую часть доклада готовил Владимир Климентьев, она выложена в формате статьи на вебпланете (Социальные сети: от реальности к веб-сервису@webplanet.ru).

Сначала о названии. Вы можете спросить «где же тут обещанное юзабилити?». У монеты есть две стороны: проектирование пользовательских интерфейсов и юзабилити-тестирование. И то и другое отталкивается от анализа задач пользователя. Выдвигаются гипотезы о том, как пользователь будет взаимодействовать с системой. В соответствии с гипотезами проектируется интерфейс, затем эти гипотезы проверяются во время юзабилити-тестирования. Поэтому эти два вида деятельности тесно связаны. Без задач пользователя невозможно проектирование интерфейса: например, «поделиться новостью с друзьями» — вполне себе задача пользователя, и понятно как для неё проектировать. В то время как «запостить текст в сообщество» — такой задачи пользователя быть не может, и как для этого проектировать — совершенно непонятно. Должен ли у поста быть заголовок? Нужны ли теги? Будет ли указываться настроение? Из задачи пользователя это не ясно.

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

Само понятие социальной сети — дело тонкое, поэтому я буду считать социальной сетью то, что назвал социальной сетью. Подробнее об определении — в статье Владимира Климентьева.

Определимся с тем, какие компоненты необходимы для функционирования социальной сети. Итак, Социальная сеть =
Самоидентификация пользователей + Связи между пользователями + Межличностные коммуникации + Предметная область + Рейтинги?

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

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

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

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

Рейтинги. Рейтинги всегда есть. Люди всегда заинтересованы в том, чтобы померяться разного рода рейтингами, это естественная потребность, которую можно использовать для построения авторитета пользователя и повышения доверия между пользователями. Даже если вы сами не спроектировали рейтинг как часть своего сервиса — это сделают другие люди, как, например, Яндекс для Livejournal и прочих блогохостингов.

Проектирование социальной сети принципиально отличается от проектирования обычных сайтов тем, что на первый план выходит взаимодействие типа человек-человек, вместо человек-компьютер. Перед тем как рисовать экраны и именовать разделы, надо определиться с тем, как люди будут взаимодействовать между собой на вашем сервисе. Из проектирования интерфейсов в этом, кажется, может быть полезна т.н. диаграмма Swim Lane@en.wikipedia.org — на ней отображаются все процессы и все роли, и то как действие переходит между различными ролями пользователей. Всегда, проектируя интерфейс сайта, где есть социальное взаимодействие, надо видеть второго человека, сидящего по другую сторону интернета.

Рассмотрим стадии развития социальной сети.

Предсоциальный период. У любого сервиса (если только он не построен на основе другого, уже работающего сайта) есть такой этап развития, начальный, когда социального взаимодействия еще нет, поскольку пользователей слишком мало. 10 человек — явно мало, чтобы считаться социальной сетью. 100 человек — может быть. 1000 человек — наверное, уже достаточно. Вот до преодоления этого барьера на первый план выходит предметная область, функциональность, вокруг которой построен сервис. В Livejournal можно просто вести блог. В flickr можно закачивать фотографии и давать ссылки на них. В LinkedIn можно заполнить визитную карточку и использовать как резюме. Это помогает накопить первоначальную базу пользователей.

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

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

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

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

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

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

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

В рекомендациях по формированию сообществ можно выделить ряд паттернов, best practices.

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

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

Заполнение по запросу. Это сейчас начали реализовывать на moikrug.ru — вместо пустых блоков в профайле пользователя отображаются кнопки, с помощью которых другие пользователи могут попросить заполнить пробелы — указать место работы, интересы, школу, университет. Считается, что бездушные призывы сайта заполнить анкету еще на 5% не так стимулируют, как запросы от живых, реальных людей. Не знаю насколько это работает, привожу как есть.

Планирование активности. Чтобы у пользователя очень быстро не настал момент, когда он не знает что ему дальше делать на сайте, необходимо заранее планировать деятельность пользователя — сформировать основной сценарий, по которой он будет идти. Пользователь может пойти каким-то другим, альтернативным путем. Но основной сценарий необходимо продумать для того, чтобы правильно построить цепочку шагов по использованию сервиса и избежать досадных промахов в построении интерфейса.Пользователь зарегистрировался на сайте, что дальше? Поискал своих друзей. Что дальше? Заполнил место работы, поискал коллег, добавил в контакты. Что дальше? Начал переписку, написал несколько личных сообщений. Что дальше? Организовали пьянку. Что дальше? Выложили фотографии с пьянки, создали обсуждение. И т.д. Пользователей нужно вести, подсказывать дальнейшие действия, а не просто оставлять один на один с функциональностью сайта. Это может показаться навязчивым в реализации, но можно вести пользователя аккуратно, не подсказывать сто раз одно и то же, не давать неуместные в данном контексте советы, не быть назойливым. Это высший пилотаж проектирования взаимодействия — давать незаметные, но полезные подсказки в нужное время.

Напоследок, некоторые наблюдения о том, каким должен быть успешный сервис. Главное — не количество фич, не огромная всеохватывающая функциональность, а четкое позиционирование сервиса. Знакомиться — на mamba.ru, искать работу — на moikrug.ru, встречаться с одноклассниками — на odnoklassniki.ru, выкладывать фотографии — на flickr, и т.д. Человек должен с первого же взгляда на сервис понимать в чем этот сервис лучший. Если человек попал на сайт — пускай он имеет возможность воспользоваться им сразу же. Чем быстрее он увидит реальную пользу от сервиса — тем с большей вероятностью он к нему вернется.

Лучшие сервисы моделируют те аспекты человеческой деятельности, которые существовали и прежде. Они помогают людям делать то, что люди и так делали. И делают это лучше других сервисов. Вместо того, чтобы заставить людей заниматься какой-то новой деятельностью, которой нет аналога, чем пытаться изменить способ взаимодействия людей — лучше моделировать его, и делать проще. Все самые популярные сервисы не делают ничего революционного. Они просто берут то, чем люди занимались и до них, и делают это лучше, проще и понятнее. Чем и привлекают к себе. Gmail функционирует как почтовый сервис, моделируя уже существующую деятельность, но организует процесс более естественным для человека образом. То же с Flickr, то же с Google. Livejournal создавался просто как средство поддерживать связь с друзьями, и это тоже работает.

Спасибо что дочитали до этого места. Хочу напомнить, что все вышесказанное — обобщение сетевого опыта с помощью здравого смысла. Необходимо учитывать контекст, свою особую ситуацию, а не следовать примерам слепо. Контекст — ключевое слово в юзабилити.

Источники:

1. Common Pitfalls of Building Social Web Applications and How to Avoid Them @bokardo.com
2. Community Building isn’t about Features @bokardo.com
3. A Social Revolution by Modeling Human Behavior @bokardo.com
4. It's Not Just Usability @joelonsoftware.com
5. Социальные работники @sf-online.ru
6. Деловые социальные сети и рекомендательные письма @nundesign.com
7. Социальные сети и поведение на рынке труда @sj.obliq.ru
8. «Социальная сеть»: от «френд-листа» к «рабочей группе» @internet.ru
9. Social Networks And Group Formation @boxesandarrows.com
10. «Умная толпа: Новая социальная революция», Говард Рейнгольд (@ozon.ru, @bolero.ru, @findbook.ru)
11. «Design for Community: The Art of Connecting Real People in Virtual Places», Derek Powazek

Я буду рад услышать ваши комментарии и отзывы.

Презентация от моего доклада «Проектирование социальных сетей» на конференции User Experience 2007:
michael.elfimov.com/userexp/userexp-presentation.ppt (100 Кбайт)

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

P.S. Выложил текстовую версию доклада.