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

В чем вы делаете динамические прототипы? Интересуют только варианты, работающие и на Windows, и на Mac OS.

Я делал в HTML+Javascript и Axure Pro. HTML+Javascript очень трудоемко получается, Axure Pro только под Windows и ограниченные возможности экспорта.

Слышал про Adobe Flex, кто-то этим пользовался? Насколько это трудоемко, нужно ли собственно писать код?

Проектирование интерфейса — это примерно такая же роскошь, как и дизайн.

Начиная с самого дешевого варианта: сайт, полностью сделанный одним человеком (скорее всего, студентом). Как этот сайт улучшат в первую очередь? Заплатят дизайнеру. Потому что людей уже как-то приучили, что дизайн лучше всё-таки делать за деньги. И улучшение в первую очередь видится в том, чтобы сделать сайт красивее, привлекательнее визуально.

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

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

Завтра, в субботу, 29 ноября, пройдёт второй семинар по проектированию интерфейсов, организованный вместе с «Бизнес в стиле .RU». Можно будет посмотреть трансляцию: hse.moontv.ru/ примерно с 15:00 до 18:00.

Видеозапись предыдущего семинара (прошедшего 23 ноября в клубе «Икра»), ссылки, книги можно посмотреть в сообществе groups.google.ru/group/usabilitypoint
Я учёл замечания участников первого семинара, надеюсь второй семинар будет немного лучше :-)

На семинар захотели прийти 103 человека. Это слишком много для одного семинара. Поэтому семинаров будет два, одинакового содержания.

Первый семинар будет в это воскресенье, 23 ноября. Я уже выслал приглашения. Если вы записались на Хабре, в комментариях или в хабрапочте — проверьте хабрапочту, если вы записались по электронной почте — проверьте её. Обязательно напишите мне ответ, чтобы я знал что вы придёте. За помещение и поддержку спасибо StartupPoint и лично Виталию Акимову.

Второй семинар, предварительно, будет 29 ноября. Приглашения будут в начале следующей недели. За помещение и поддержку спасибо «Бизнес в стиле .RU» и лично Артёму Киселёву.

Если вы еще не получили приглашения сейчас — скорее всего, вы получите его в начале следующей недели.

Обновление: Трансляция будет через RuTube, rutube.ru/tv/melfa.html

На сайте местного провайдера 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. Это вообще довольно интересная тема. Ты вроде как работаешь, но в то же время геймишься. Попутно делая скриншоты и заметки в блокноте.

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

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

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

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

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

Это с сайта 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)