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

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

Для чего нужна гостевая книга? Люди заходят туда, когда у них не работает интернет, чтобы:

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

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

Так выглядит форма отправки сообщения:


Что можно изменить?

• Написать, что мыло не будет публиковаться в гостевой книге, и что на него придет ответ поддержки. Сейчас этот адрес отправляет в гостевую книгу и виден всем. Привет, спамеры. Я бы не стал оставлять своё мыло, тем более что непонятно, для чего оно тут — будет ли на него ответ?
• Чтобы люди не забывали указывать номер договора и другие контакты, нужно убрать сверху длинный бесполезный текст и добавить на форму поле «Номер договора».
• Сделать древовидные комментарии, свернутые по умолчанию. Сейчас в сообщениях часто заметен текст типа «To Cluster», когда пользователи пытаются ответить на сообщения поддержки. Было бы удобнее, если бы пользователи могли отвечать на ответ поддержки, чтобы не плодить новые сообщения, непонятные без контекста.

В результате, вот так должна выглядеть гостевая книга:


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

Игры, в том числе стрелялки от первого лица (они же First Person Shooters), очень сильно изменились за последние 10 лет. Но больше всего изменений пришлось на игровую начинку. Главное меню, с которого начинается знакомство с игрой, все эти годы остается неизменным.

Так выглядело меню «Half-Life» в 1998 году:


Так выглядело меню «Quake 4» в 2005 году:


Так выглядит меню «Half-Life 2 Episode One» в 2007 году:


Как можно сделать лучше это меню?

В целом, есть два сценария использования:

• игра запускается в первый раз, пользователь начинает новую игру
• игра запускается не в первый раз, пользователь загружает сохраненную игру

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

Первый запуск



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

Следующий запуск



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

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

Пожалуйста, покажите это кому-нибудь в Id Software (Doom, Quake), Valve Corporation (Half-Life) или Infinity Ward (Call of Duty), чтобы мы наконец уже увидели человеческое меню в этих играх.

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

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

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

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

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

Немного поработал на одного производителя онлайн игр. Вроде им понравилось. Хочу поработать еще на кого-нибудь. Проектирование интерфейсов, критика интерфейсов. Фриланс.

Я сижу на Mac OS X, и если надо иметь дело с приложением под Windows, то с вас компьютер в офисе на время работы с приложением.

Обновление от 12 ноября 2008: теперь есть компьютер с Windows.

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

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

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

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

Есть такая штука, как «быстрые комментарии». Это буквально однострочные ответы на запись в блоге или микроблоге (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-читалками — заголовкам надо уделять серьезное внимание.