Archive for the 'Практика' Category

Проектирование интерфейса важнее дизайна?

Михаил Елфимов on Дек 5th 2008

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

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

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

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

Filed in Практика, Проектирование ПИ | 2 responses so far

Онлайн-трансляция семинара по проектированию интерфейсов

Михаил Елфимов on Ноя 28th 2008

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

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

Filed in Практика, Проектирование ПИ, События | 2 responses so far

Уточнения о бесплатном семинаре по проектированию интерфейсов

Михаил Елфимов on Ноя 19th 2008

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

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

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

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

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

Filed in Практика, Проектирование ПИ, События | 9 responses so far

Бесплатный семинар по проектированию интерфейсов

Михаил Елфимов on Ноя 12th 2008

Я написал на Хабре, что хочу провести бесплатный семинар по проектированию интерфейсов. Если хотите участвовать, пишите в комментарии на Хабре или мне на мыло s1@elfimov.com.

Filed in Практика, События | 4 responses so far

Окно «Таланты» в World of Warcraft

Михаил Елфимов on Ноя 5th 2008

В игре World of Warcraft есть окно, в котором игрок вкладывает полученные очки талантов в развитие персонажа:
Окно «Таланты» (World of Warcraft)

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

Предлагаю два варианта решения этой проблемы.

Подтверждение вклада таланта

Это решение очевидно. После нажатия на иконку таланта, отображается диалоговое окно:
Подтверждение (макет)

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

Возможность отмены в течении 10 секунд

Но, если игрок решил забыть свои таланты и перераспределить их снова, то уже 30 очков талантов составят проблему, если спрашивать подтверждение для каждого из них. Можно предложить лучшее решение. После нажатия на иконку таланта внизу окна появляется сообщение «Очко вложено в …», кнопка «Отменить» и таймер:
Таланты (макет)

В течении 10 секунд пользователь имеет возможность отменить свой выбор. Этого времени достаточно чтобы заметить свою ошибку и вернуть очко таланта обратно. Таймер рядом с кнопкой показывает количество секунд, оставшееся для отмены, обновляется каждую секунду.

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

Написал в Blizzard, предложили выложить на форум «в связи с вопросом авторских прав». Выложил на форум «Suggestions», посмотрим.

Filed in MMORPG, Практика, Сделаем окружающее лучше | 12 responses so far

Программа-оболочка для игровых клубов

Михаил Елфимов on Ноя 5th 2008

Время от времени я захожу в один игровой интернет-клуб, недалеко от дома. Это происходит, когда у меня дома не работает интернет, или хочется немного поиграть в игрушку под Windows (дома у меня Mac OS X). В клубе на компьютерах стоит специальная оболочка astalaViSta SuperViSor (да, она именно так и называется), её удобство я и хотел рассмотреть.

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

Ввод кода доступа

Первое, с чего начинается работа — это ввод кода с чека.
Ввод кода доступа

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

В диалоговом окне кнопка действия по умолчанию («Войти») обычно выделяется визуально. Сейчас кнопки «Войти» и «Закрыть» равнозначны, хотя очевидно что большинство пользователей будут начинать сеанс, а не закрывать окно.

Выбор тарифа

Следующим открывается окно выбора тарифа.
Выбор тарифа

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

Если действительно есть из чего выбирать, то не стоит показывать окно с множеством вкладок, на котором я не понимаю что мне собственно надо сделать. Почему «купить отрытое время»? А какие времена еще бывают? Кнопка «Начать …» находится внизу экрана, (почему-то лейбл кнопки с многоточием, что это означает для пользователя?). Непонятно зачем нужна кнопка «Закрыть», когда окно и так можно закрыть стандартным способом. Зачем в этом окне дата и время? Кнопка «Начать» очень далеко от списка тарифов и заголовка. Пользователю не нужна кнопка «Обновить». Поле с описанием тарифа очень большое и отделяет список тарифов от кнопка выбора тарифа. Средства на счету лучше показывать в рублях, а не в непонятных единицах.

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

Вот как должен выглядеть этот экран:
Выбор тарифа (макет)

Работа с компьютером

Во время работы за компьютером ничто не напоминает о работе astalavista supervisor, кроме иконки в трее.
Иконка программы

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

Информация о сеансе

При нажатии на иконку в трее открывается окно приложения. Что ожидает увидеть на нем пользователь?

  • сколько осталось оплаченного времени;
  • заблокировать компьютер;
  • завершить сеанс;
  • позвать администратора.

Так сейчас выглядит информация о компьютере:
Информация о компьютере

А так — информация о сеансе:
Информация о сеансе

Почему-то первой идет не очень нужная пользователю кнопка «О программе». Рядом выводится много ненужной информации о коде доступа. Внизу зачем-то кнопка «Обновить».

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

Эту вкладку тоже стоит перепроектировать полностью. Вот как она может выглядеть (показана только вкладка «Инфомация о сеансе», без окна-обрамления и других вкладок):
Информация о сеансе (макет)

Отправил отчет создателям программы, но ответа не получил. Может в спам попало или им просто пофиг.

Filed in Практика, Сделаем окружающее лучше | No responses yet

В отчете о юзабилити стоит указывать и положительные стороны продукта. Заказчику понравится

Михаил Елфимов on Окт 31st 2008

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

Рольф Молик: Это очень серьезный вопрос, о котором я буду говорить на моих курсах. Очень важно, чтобы аналитики не только критиковали интерфейс, но и отмечали его хорошие качества. Ужасно, когда разработчики удаляют функцию, просто потому что никто им не сказал, что пользователям она понравилась. Любой профессионал должен периодически вспоминать песенку Мери Поппинс «Just a spoonful of sugar helps the medicine go down» («Чайная ложка сахара поможет съесть любую таблетку»). При наличии положительных результатов гораздо легче воспринять и отрицательные.

Вопросы Рольфу Молику для издания GUI.RU @gui.ru

Filed in Практика, Цитаты | 2 responses so far

Юзабилити-экспертиза: вопросы и ответы

Михаил Елфимов on Окт 29th 2008


В каком случае стоит обратиться к юзабилити-консультанту?

  • У вас могут быть проблемы с уровнем конверсии
  • Процент регистраций на сайте меньше, чем вы рассчитывали
  • Количество заказов меньше, чем ожидалось
  • Много однотипных вопросов в службу поддержки
  • Большое количество жалоб и проблем с выполнением элементарных действий у пользователей
  • Вы делаете новый сервис, продукт, и в вашей команде нет понимания того, как он должен выглядеть
  • Ваш продукт не выглядит целостным, различные части программы взаимодействуют с пользователем по-разному

Такого рода проблемы решает специалист по юзабилити и проектированию интерфейсов.


Что может сделать специалист по юзабилити?

Есть несколько «уровней» работы над интерфейсом.

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

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

Уровень экрана (страницы). Проектировщики интерфейсов, как эксперты, оценивают интерфейс по своим профессиональными критериям. Насколько понятно название страницы? Как быстро пользователь найдет на экране нужную функцию? Как должна называться кнопка? Где должны находиться названия полей — сверху, слева, как они должны быть выровнены? Как надо построить меню, где оно должно располагаться? Ответы на все эти вопросы знает проектировщик интерфейсов, ответы зависят от конкретной задачи и не могут быть универсальными. Проектировщик обосновывает каждое решение, которое он принимает, и может объяснить расположение, размер и внешний вид каждого элемента интерфейса.


Что клиент получает в результате работы специалиста по юзабилити?

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

Примеры экспресс-отчетов (посвященных быстрому нахождению и анализу одной-двух проблем продукта):


Чем юзабилити-тестирование отличается от юзабилити-экспертизы?

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

Что бы там не рассказывали о юзабилити-тестировании «по дешёвке», серьезное тестирование на значительном количестве людей (5-20) занимает уйму времени и нервов, но дает ценные количественные и качественные результаты.

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

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

Есть вопросы? Задавайте в комментариях.

Filed in Методы юзабилити, Практика, Юзабилити | 7 responses so far

Почему у меня нет портфолио

Михаил Елфимов on Окт 29th 2008

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

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

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

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

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

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

Поэтому у меня нет портфолио.

Filed in Личное, Практика | One response so far

Гостевая книга на сайте интернет-провайдера

Михаил Елфимов on Окт 21st 2008

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

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

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

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

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

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

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

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

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

Filed in Практика, Проектирование ПИ, Сделаем окружающее лучше | 6 responses so far