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

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

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

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

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

Журналисты меряют время в долях часов. Например, телефон работает в режиме MP3-плеера 8.3 часов. 8.3 — сколько это? Какие могут быть десятичные доли часа, если час состоит из минут?

Время работы телефона в режиме ожидания — 280 часов. Сколько это вообще? Зачем мне эта цифра, о чем она мне говорит? Почему нельзя написать 2-3 дня, ведь никому абсолютно не нужны результаты лабораторных изменений с точностью до часа. Мне интересно сколько дней этот телефон проживет при средней нагрузке.

Разрешение экрана 160×128. Сколько это вообще? Вроде это меньше, чем 1024×768. Да наверняка меньше. О, я помню у меня давным-давно был ноутбук с CGA-экраном 320×200. Нет, опять не то.

Скорость передачи данных 300 Кб/с. Кб/с. Почему не КМ/Ч? Что означает Кб — Кбайт, Кбит? Что, жалко потратить лишние 2-3 символа?

Так, телефон стоит около 210 евро или 370-400 долларов. Гм. Я уже года два как перестал понимать цены в долларах. И евро я каждый день не пользуюсь. Полтора года назад мы купили телефон за 3500 рублей. А, недавно я продал смартфон за 4700 рублей. Сколько это в долларах? Зачем мне это знать?

Журналист пишет статью для нормальных человеческих людей, почему он при этом думает жопой?

Рассказал о проектировании пользовательских интерфейсов в 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)

Наткнулся на плагин для Firefox, называется FireShot. addons.mozilla.org/en-US/firefox/addon/5648

Делает скриншоты, включает в себя инструменты для редактирования, комментирования и загрузки на сервер.

Написано что бета-версия. Я к сожалению не попробовал сам — в Mac OS X не работает (и как они так умудрились сделать).
* * *
Кстати, я понял, почему ru_ucdesign забит исключительно вакансиями и анонсами семинаров. Мой пост про FireShot urbansheep удалил, потому что, видите ли, FireShot упоминался месяцем раньше, в комментариях. Это очень напоминает историю с СУПом и отменой базовых аккаунтов. Обе истории о том, что в одних людях нет уважения к тому, что делают другие люди.

Заодно удалили пост igrok2 о визуальном поисковике searchme.com. Между прочим, интересный пост.

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

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

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

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

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

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

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

Влияние цвета на отдачу с рекламы @Электронная коммерция, habr

Как и предыдущие ссылки, эта имеет ценность в том, что основана на реальном опыте, а не измышлениях или чтении Якоба Нильсена, Артемия Лебедева, и т.д.

8) По возможности, текст для сайта должен исключать личные обращения к клиенту. Это не любят. Текст не должен мотивировать клиента низкой ценой. Описывайте достоинства товара.
Пример: Т.е. не “уважаемые господа, предлагаем вам дешево приобрести”, а “оригинальные композиции, редкие сорта роз будут радовать и доставлять удовольствие”. Это очень интересный момент, основанный на 3 недельном тестировании магазина в двух режимах: с текстом-обращением и нейтральным. Нейтральный текст принес на 25% больше прибыли.

Организация продвижения товара @Электронная коммерция, habr

Личное наблюдение: слишком быстрая реакция на заказ пугает клиента. К примеру, из 30 звонков, произведенных мной в течение 10 минут после оформления заказа клиентом, лишь 10 полностью (т.е. без удаления нескольких позиций или полного отказа) подтвердили заказ. Оптимальное время для связи с клиентом — 15-30 минут. (25 человек полностью подтверждали). Но, чтобы избежать шаманства, отмечу: это моя практика, почему это так, я могу только предполагать.

Продвижение товаров интернет-магазина @Электронная коммерция, habr

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Артем Горбунов о слове «юзабилити»@artgorbunov.ru

Читаю что там написал Горбунов, читаю что написал Копылов, и не понимаю обоих. Вероятно, это означает что я далек от понимания юзабилити у обоих авторов.

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

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

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

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

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

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

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

Яндекс.Почта — традиционный почтовый сервис, над интерфейсом которого долго думали и вылизывали. Там красивые картинки, правильного размера кнопки и красиво сделаны фильтры «непрочтенные», «с файлами» и т.д. Красиво, но ничего особенного.

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

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