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

Вот такие вещи меня просто пугают:

Это с сайта mobile-review.com. По маленькой кнопке «Bookmark» (да, сайт на русском, кнопка на английском) возникает огромное новое окно (про них еще Купер в About Face писал), в котором перечислено 36 (тридцать шесть) сервисов. Это окно предоставлено сайтом AddThis.com.

Я вот чего не понимаю. Ведь этими кнопками никто не пользуется. Те, кто используют какой-либо закладочный сервис, типа del.icio.us или Google Bookmarks — они вешают себе на панель браузера специальный скрипт.

Справедливости ради надо сказать, что внизу окна есть чекбокс — AddThis.com запоминает каким сервисом из перечисленных вы воспользовались, и при следующем нажатии на кнопку «Bookmark» открывает сразу, например, добавление ссылки на Google Bookmarks. Выглядит это вот так:

Есть такая штука, как «быстрые комментарии». Это буквально однострочные ответы на запись в блоге или микроблоге (twitter), очень компактно отображающиеся на экране. Например:

Подскажите, на каких еще сайтах такое используется? Какие есть варианты визуального представления?
На самом деле, больше интересны примеры как нарисовать «дайджест» комментариев — 5-10 цитат из комментариев, кликнув на которые можно перейти на страницу с полным представлением.

Напрягите мозг :-) Вспомните, пожалуйста, где такое вообще используется?

Рассказал о проектировании пользовательских интерфейсов в Digital Zone. На пару часов. Вроде неполохо получилось. Учитывая, конечно, тот момент что научить проектировать интерфейсы на семинаре невозможно. Как и нельзя научиться проектировать интерфейсы, читая книги.

Краткое содержание

Зачем в команде проектировщик интерфейсов. Плюсы, минусы.

Этапы процесса проектирования. Сбор данных. Концептуальное проектирование. Прототипирование. Тестирование прототипов. Внедрение.

Сбор данных. Понять процесс, выяснить кто пользователь, установить контекст. Для чего нужны, и для чего не нужны исследования. Персоны. Сценарии.

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

Прототипирование. Выбор детализации прототипа, среды, инструмента.

Детальное прототипирование. Тафти: data-inc ratio, соотношение полезных и вредных пикселей. Честность данных. Инфографика. Обоснование каждого интерфейсного решения. «Почему так». Единообразие решений, влияние контекста. Явная взаимосвязь между действием и ответной реакцией интерфейса. Использование стандартных элементов интерфейса. Паттерны проектирования. Обучение на примерах: Amazon, Google; критический подход к использованию чужих решений.

Внедрение. Спецификация интерфейса. Проверка реализации на соответствие прототипу.

Книги

Effective Prototyping for Software Makers, Jonathan Arnowitz
Information Dashboard Design: The Effective Visual Communication of Data, Stephen Few
Designing Interfaces: Patterns for Effective Interaction Design, Jenifer Tidwell

Что-то, конечно, мог не успеть или забыть. Участники, напишите, пожалуйста, как оно вам.

(Отзывы можно прочитать также в Livejournal)

О заголовках постов @elfimov.com/everything

Судя по всему, существует два подхода к заголовкам записей в блоге: подход Livejournal и подход RSS.

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

Фактически, заголовки постов используются только в архиве записей за определенный месяц и в некоторых темах оформления выводится summary постов на странице. Даже сервис blogs.yandex.ru спроектирован так, чтобы избегать заголовков — в топ записей выводятся цитаты из текста, а не заголовки.

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

RSS-сервисы, вроде Яндекс.Ленты или Google Reader, спроектированы думающими людьми. Поэтому посты отображаются так, как это принято в популярных блогохостингах — заголовок, потом полностью раскрытый текст (если он отдается RSS-источником). Тут заголовки — приятное дополнение.

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

Apple's design process @businessweek.com

— Pixel Perfect Mockups
— 10 to 3 to 1
— Paired Design Meetings
— Pony Meeting

Последний пункт особенно хорош, ниже перевод.
Это возвращает нас к истории, рассказанной ранее (Michael) Lopp, в которой он рассказывал как главные менеджеры описывают что они хотят от каждого приложения: «Я хочу WYSIWYG… Я хочу чтобы оно поддерживало осноные браузеры… Я хочу чтобы оно отражало дух нашей компании». Или, как переводит Lopp, «Я хочу пони!». Он добавляет «А кто не хочет? Пони — это прекрасно». Проблема, по его словам, заключается в том, что эти люди описывают то что они думаю что хотят. И даже если это чушь, их мнение нельзя игнорировать — они платят деньги!

:-)

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

Мне кажется, или фраза «положить в корзину» в интернет-магазинах смотрится как-то странно на фоне корзины в 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) можно купить на Амазоне или взять почитать у меня.

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

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

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

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

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