Привет. Я Денис Элиановский, дизайн-директор в JTC и руководитель в Opium Pro. Мы работаем в очень узких сегментах рынка IT, связанных с финансами и документооборотом. Вы точно ещё не слышали об этих компаниях и сегодня мало что о них узнаете, ведь эта статья про UX-исследования.

Я занимаюсь дизайном последние 12 лет (из них 8 — именно дизайном сложных интерфейсов) и хочу рассказать, как мы у себя проводили юзабилити-тестирование приложения ДБО. А ещё о том, какие ошибки совершили и какие сделали из этого выводы. В процессе порекомендую пару книг. Все картинки кликабельны.

Что такое ДБО? Расшифровывается как Дистанционное Банковское Обслуживание. Ещё эти приложения называют онлайн-банками. Наверняка у всех вас уже есть такое в телефоне. Вот мы одни из тех, кто такие приложения дизайнит и разрабатывает.

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

Кому удобнее смотреть видео, тут запись выступления

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

Создавая презентации, или рецензируя чужие, я руководствовался собственными впечатлениями. Когда же наткнулся на документацию к LaTeX Beamer, был в восторге: там было не только подробное руководство по собственно латех-бимеру, но и общие рекомендации по созданию слайдов. Читая документацию я буквально радовался каждому абзацу, ловя себя на мысли «Да, да. Точно, правильно.»

И когда возникла необходимость составить рекомендации по созданию презентаций для конференции RuPyRu, я вспомнил про документацию к бимеру. Она и послужила основой для общих рекомендаций. А уже на основе общих рекомендаций я составил упрощенную редакцию, которую и привожу здесь:

Думаю, много кого волнует вопрос, как побеждать на фриланс-конкурсах? Постараюсь дать универсальные советы-и-правила-в-виде-инструкции-по-применению :)

Предисловие. Купила краски пачку.

Клиент, разместивший конкурс для фрилансеров, — это неуверенный в себе субъект. В 90% случаев он не способен выбрать подрядчика (поэтому и идет на конкурсы, собственно), чаще всего не способен даже грамотно сформулировать задачу, плюс ко всему он испытывает дикий финансовый голод, а также очень искренне надеется на то, что за его $200 он получит на выходе чудом родившееся у исполнителя гениальное решение его проекта, и приводит в качестве примера логотип компании Nike, нарисованный за $50 в прошлом веке.

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

Правило первое — трезвое.
Знайте, на что идете. Подумайте, почему тот или иной клиент пришел делать конкурс с фрилансерами. Дайте этому трезвую оценку, и не будьте идиотом ждите чуда чудесного от этой затеи.

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

Шведский инженер Martin Tall предлагает использовать технологии Eye-Tracking'а (инфракрасная камера, следящая за зрачками пользователя) для взаимодействия с экранными объектами. Называется это NeoVisus gaze interaction interface.

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



Вот еще большое видео, а также ссылка на документацию (PDF 3.3M).

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

Основы web-типографики пришли к нам из далекого 1991 года, еще от небезызвестного Tim Berners-Lee :)

Если оглянуться назад, в страшные времена царствования IE 1.0, то web-типографика (я не говорю о web-дизайне) находилась в зачаточном состоянии. На данный момент, ситуация иная. Мы имеем достаточно средств, для грамотного оформления текста на web-странице.

Cуть web-типографики заключаться не просто в выборе нужного шрифта и умение отличить начертание одного шрифта от другого.


Рис. 1: Как показали последние опыты, 90% тренированных обезьян правильно отличают шрифт Helvetica.

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

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

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

На западе решением этой проблемы было озадачено несколько компаний, разработавших всё, что можно найти в Google по запросу “Live Chat Software“, то есть программы для мгновенной связи оператора с посетителем сайта. По некоторым данным, такой механизм в хорошей реализации может увеличить конверсию и, соответственно, продажи более чем на 80% (!). Это вполне логично — задать вопрос специалисту проще, чем лазать по каталогу и легче, чем звонить, искать кого-то в ICQ или ждать ответа по e-mail.

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

Часть I — Часть II — Часть III — Часть IV — Часть V — Часть VI

Часть I

Как-то ко мне обратился знакомый дизайнер с просьбой разобраться в странной по его мнению ситуации. Клиент просил «сделать так же, как у Apple», но с использованием собственных способов расположения блоков, изображений, цветовой гаммы и текста. В общем, дизайн в итоге получался совершенно непохожий на apple.com, но этого, собственно, и добивался клиент. И вроде бы у дизайнера получилось, но… Клиенту по-прежнему не нравилось, он всё равно требовал переделать макет. По его ощущения «что-то было ну совсем не так». А что именно — тот объяснить был не в силах. Вот и возник вопрос у моего коллеги по поводу того, как угодить капризам клиента и понять его чаяния. Оказалось всё не так просто, но вполне объяснимо. Я и раньше сталкивался с данной проблемой. Поэтому решил попробовать изложить свои мысли по этому поводу.

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

FireShot — это дополнение к обозревателю Mozilla Firefox, которое позволяет создавать скриншоты открываемых вами страниц. В отличие от других средств подобного рода, это дополнение предоставляет в распоряжение пользователя целый ряд инструментов для редактирования скриншота и добавления графических и текстовых аннотаций. Подобная функциональность будет полезна для веб-разработчиков, тестеров и редакторов.
Скриншоты могут быть загружены на сервер изображений, сохранены на диске (в форматах PNG, GIF, JPEG, BMP), скопированы в буфер обмена, отправлены по электронной почте или экспортированы во внешний редактор для последующей обработки.

Посмотреть флеш — презентацию(осторожно, запускается сама)

Скачать данное дополнение.

Совместимость на 14.05.2008: * Firefox: 2.0 – 3.0pre

От себя добавлю, что после того как оно мне попалось на глаза, пользуюсь им в полной мере. Удобно, понятно и юзабельно. В комментариях видел рекомендации данного плагина, но топиков не заметил. Смотрите и пользуйтесь. Рекомендую :)

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

Не заставляйте нас изменять размер шрифта

Мы не хотим постоянно менять настройки размера шрифта в браузере при посещении каждого нового сайта.

Не доказывайте нам, что переполненные страницы лучше выглядят

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

Не втирайте нам, что прокрутка страниц — это плохо

Потому что в таком случае все сайты плохие. В прокручивании веб-страницы нет ровным счётом ничего страшного. Ни-че-го. Так же, как нет ничего страшного в перелистывании страниц книги.

Не говорите нам, что текст не важен

95 % того, что обычно называют веб-дизайном, — это типографика.

Не требуйте, чтобы мы начали носить очки

Лучше вместо этого перестаньте тереться носом об экран, откиньтесь в кресле назад (!) и продолжайте чтение этой статьи в расслабленной позе.

К сожалению, в наше время перенасыщенное рекламой, у многих сложился стереотип, что дизайн – это просто симпатичная и яркая картинка.

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

Сделав сногсшибательную картинку, иногда видишь, что все-таки в ней что-то не так. И это отражается на потребителе, когда продажи товара просто не идут. В отличие от конкурента, у которого совершенно пустая белая картинка, с парой выражений (скажем с рекламным слоганом) и логотипом.

На тему эффективного дизайна можно привести несколько ссылок:

10 принципов эффективного веб-дизайна
Пять дизайнерских правил применяемых в Web

Это из того что вспомнилось. Рекомендуется почитать блог Дизайн пользовательских интерфейсов и юзабилити.

Это, скажем так преамбула, которую можно отнести к любому направлению дизайна. В этой статье мы поговорим о Web-дизайне и о применении Золотого Сечения и Правила Третей.

Одной из главных задач эффективного дизайна в Web – это ясность и интуитивность. А также концентрация внимания пользователя на нужных местах страницы. Как этого добиваются?

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

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

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