Тогда мы идем к вам!

Мы подготовили и открыли для свободного использования библиотеку с цветными меню.

Доступны меню в 10 цветах. С ховерами и активными разделами.

Просмотреть как выглядит библиотека

Скачать библиотеку

 Вдохновились дизайном меню от psdgraphics

• 20 рекомендаций для прототипирования в Axure RP Pro
• Как создавать ссылки в Axure RP
• Отчет о конференции «User Experience Ukraine 2011»

Мы провели исследование рынка, оказалось, что рынок реально есть. Потом узнали что будет DOU MIXER и решили развить идею там. Разделили обязанности, на мне исследование для будущего проекта, а на Руслане презентация. Пару раз встретились и составили план презентации. В итоге я сделал небольшой HTML прототип, придумал лого, а Руслан презентацию.

Я и Руслан

DOU Mixer начался в пятницу вечером на 20 этаже Горизонт Парк, пошли презентации идей, на все про все 2 минуты. Идей было около 30! Презентовались вместе с Русланом. Некоторые идеи уже приходили с готовыми командами. У нас изначально команды не было, но было желание и вера в нашу идею. После презентаций идей присутствующие разбивались на команды: некоторые идеи набирали команды, некоторые нет. Нам повезло! Наша идея набрала разработчиков. Мы собрали команду, мы еще раз рассказали идею, я показал прототип, определились с планом работ. Определили задачу минимум и задачи максимум. Разъехались.

На утро субботы собралась в Горизонт Парк вся команда. Команда у нас очень крутая, никто не подвел, всё что обещали, все делали. Начали работать, написали задачи. К нам приходили менторы давали свои дельные советы, за что им огромное спасибо. В Горизонт Парк был вкусный обед и ужин. Нужно сказать, что организаторы нас обеспечили всем необходимым: кофе, печенье комнаты для работы, интернет… В работе прошла суббота. Работали до 24.00.

Команда проекта: Киллево Даниэль, Лабунский Женя, Жакупов Руслан, Шаваран Александр, Карапузов Олег, Кузняк Александр

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

• Исследование времени «входа» на сайт.
• Полезные ссылки выпуск №3
• Korrespondent.net ложка дегтя

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

Как узнать,что проблема, которую вы решаете того стоит? Как узнать, что проблема, которую вы пытаетесь решить, доставляет настолько сильную головную боль людям, что они готовы платить деньги за её решение? Как быть уверенным, что вы расставили акценты правильно и сейчас решаете самую значимую проблему?

Далее вы ознакомитесь с простыми инструментами, которые помогут вам принять правильное решение:

1. Люди разочарованы?

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

У разочарования есть несколько форм:

• Люди жалуются на это (наш любимый способ выражать разочарование);
• Они неохотно, но принимают это «так, как оно есть»;
• Это есть в списке вещей, которые надо сделать;
• Люди спрашивают других об их мнении и рекомендациях;

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

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

Иногда люди разочарованны, но сами не знают почему. Если бы люди могли четко сформулировать причину своей проблемы, то они тут же смогли бы и решить её. Исследование пользователей путем опроса их, используя технику 6-ти вопросов (Кто? Что? Где? Когда? Почему? Как?) или каким либо другим способом, помогает выяснить в чем заключается реальная проблема. Как только вы знаете в чем она заключается, очень часто её решение становится очевидным.

2. Люди активно пытаются её решить?

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

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

Люди могут очень долго обсуждать существующую проблему, но надо помнить, что проблем намного больше, нежели времени на их решение. Так что ищите действие с их стороны, пусть и не большое, но направленное на проектирование.

3. Люди уже тратят деньги?

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

Ниже перечислено несколько способов как люди могут тратить деньги:

1. Приобретение программного обеспечения. Если люди купили существующее программное обеспечение, то это хороший знак, что проблема действительно важна для них. Обратите внимание, что это ещё не значит, что купленная программа сделает их счастливыми. И если они разочарованы программой, за которую они заплатили, то это в первую очередь говорит том, что вы пытаетесь решить действительно большую проблему.
2. Наемные консультанты. Люди не знают как решить существующую проблему и поэтому привлекают ещё один мозг для работы. Многие люди пытаются решить проблему на протяжении такого долгого периода, что уже не могут думать объективно о ней. Поэтому им был нужен кто-то, кто хорошо знаком с проблемной областью и имеет свежий взгляд на неё. Продолжительная работа над проблемой может сделать её решение очень трудным.
3. Стройте решение собственноручно. Это значит, что существующие инструменты ещё не достаточно хороши, чтобы решить проблему. Для её решения также нужны инвестиции. Ваше участие является индикатором того, что проблема вверху списка, а значить у неё самый большой приоритет.

4. Расставление приоритетов.

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

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

• Полезные ссылки выпуск №3
• Полезные ссылки выпуск №5
• Полезные ссылки выпуск №2

• Битва с самым худшим интерфейсом в мире
• Новая операционная система Windows8
• Как создавать ссылки в Axure RP

И в наш день мы желаем вам удобных интерфейсов!

А к тем кто не сделает интерфейсы удобными придем мы!

• User Experience Ukraine-2011
• Бесплатная библиотека для Axure RP «Цветное меню».
• Кто ходит в SEO по утрам?

По данным IMRG / Capgemini покупатели Великобритании потратили онлайн 13,16 миллиардов фунтов за последний квартал 2008 года, что на 15% больше, чем в последнем квартале 2007 года.
С другой стороны, статистика Jupiter Research за сентябрь 2007 года показывает, что 42% из 1179 опрошенных онлайн-покупателей покинули ресурс не осуществив покупку потому, что они не смогли найти ответы на вопросы о товаре, который уже был добавлен ими в корзину.

Что и почему мы хотели сделать.

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

•  контент страницы (описания продукта, доставка);
• непосредственно дизайн (шрифты, цвета);
•  функции (рекомендации, отзывы);
•  разметка страницы (два столбца или все таки три)

Страницы каких продуктов мы сравнивали?
Для этого исследования были выбраны продукты 6-ти из 10-ти крупнейших интернет-магазинов Великобритании на 2008 год. В них вошли:

•  Amazon
• Argos
• Tesco Direct
• Play.com
• M&S
• John Lewis

Все участники исследования были знакомы с этими ресурсами и уже делали покупки, по крайней мере, на 3-х из этих 6-ти сайтов.

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

Что мы обнаружили:

Принцип 1. Призыв к действию должен быть очевидным.

Основной призыв к действию на странице продукта это добавить продукт в корзину. Следовательно, он должен быть хорошо видимым визуально и быть похожим на кнопку. Участники отметили, что на странице Tesco Direct для них было не понятно где они должны кликнуть чтобы купить товар так, как функция «Добавление в корзину» не в виде кнопки и плохо выделена визуально. Аналогичные замечания были сделаны и о серой кнопке на ресурсе John Lewis, которая такого же цвета как и другое содержимое страницы.
С другой стороны участникам было легко добавлять товары в корзину на сайте M&S, потому что кнопка визуально привлекает своим ярким цветом:

Принцип 2. Краткое описание продукта лучше представлять в виде маркированного списка.

Участники хотели чтобы описание продукта помогло им сделать выбор «покупать или нет». Кроме того, они ожидали увидеть «теплые» слова, которые бы поощряли их покупку, а не просто констатацию факта, что они что-то купили.
Пользователи также предпочитали, чтобы информация о продукте была в виде маркированного списка для быстрого сканирования текста, как сделано на сайте Argos. Представление описания в виде параграфов не только загромождает страницу, это так же требует больших усилий покупателей найти те детали, которые им нужны.
Участник прокомментировал страницу Tesco Direct так: «Это выглядит скучно и текст тяжело читать».
Участники предпочитают, чтобы все детали были показаны на одной странице (как у John Lewis и Amazon), а не в виде вкладок (как у Argos и Tesco Direct) так, как переключения вкладок это дополнительные действия для пользователей:

Принцип 3. Представляйте картинки товара только в хорошем качестве.

Первое на что всегда смотрели покупатели — фотографии товара, независимо от того, где они распложены на странице (ниже картинка «движения глаз»).

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

Принцип 4. Используйте простоту в расположении элементов.

Большинство участников предпочли видеть картинку продукта слева, а описание продукта справа (например, как у M&S).
Ресурс John Lewis имеет достаточно хорошее расположение элементов и отображается только важная информация. Участники просмотрели весь контент на странице, независимо от продукции (одежда, бытовые/цифровые товары и т.д.), которую они искали: «Мне нравится. Просто, стильно и не загромождено».
Тем не менее все участники пропустили раздел «Вами просмотренные товары» в нижней части страницы товара John Lewis. Они прокручивали вниз, но останавливались, когда заканчивалась секция контента, и прокручивали обратно вверх. Это потому, что секция «Вами просмотренные товары» визуально отделена от всего остального контента и поэтому выглядит как конец страницы. Но, в общих случаях вертикальная планировка призывает пользователей прокручивать страницу вниз:

Принцип 5. Не используйте длинные страницы.

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

•  «Даже если я прокручу вниз, я не буду на них смотреть» (про Amazon)

Ресурсы Play.com и Amazon оба имеют очень длинные страницы с продуктами (страница Amazon примерно в 8 раз длиннее чем Tesco Direct). Участники использовали фразу «пытаешься, но очень трудно» чтобы описать эту страницу. Участники видели только 2/3 всей страницы и полностью игнорировали остальную 1/3.

• «Не знаю, где она начинается и где заканчивается. Нужна концентрация чтобы прочитать» (про Play.com)
•  «Я просматривал только верхнюю часть страницы так, как знаю, что они выбрасывают бесполезную информацию вниз страницы, особенно в случаях таких длинных страниц. Так что я игнорировал их.» (про Amazon).

Принцип 6. Указывайте только необходимую информацию о продукте.

Не перегружайте покупателей. Указывайте только важную информацию относительно тех продуктов, которые продаете.
Не очень хорошая идея выбрасывать всю имеющуюся информацию на покупателей и давать им право выбора, что именно они хотят знать о продукте. Лучше досконально изучить товар и предугадать что захотят о нем знать покупатели.
Пользователи очень легко игнорируют либо пропускают информацию, которая может быть важна для них, когда на странице продуктов находится слишком много информации. На ресурсе Amazon участники исследования не прокручивали вниз страницы, где были размещены отзывы клиентов. Таким образом, они упустили такую важную информацию как обсуждения и отзывы клиентов, а так же раздел «Просмотрите похожие товары».

Принцип 7. Расставляйте акценты на важный контент.

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

Принцип 8. Избегайте размещения важной информации не на приоритетных участках.

Когда пользователи находится на странице продуктов его основная задача заключается в понимании того, что это за продукт и как его можно купить. Пользователи не любят когда их отвлекают от их цели, поэтому они просто блокируют информацию, которая, как им кажется, не поможет я решении их задачи. Таким образом, все участники полностью проигнорировали левую и правую колонки на сайте Play.com, особенно когда на ресурсе информация о продукте находится вертикально в одну колонку. Однако, когда на странице продукты расположены в 3 колонки (2 колонки предназначены для информации о продукте), участники были более склонны обратить свое внимание (хотя и не намного) на левую колонку так, как на сайтах M&S и John Lewis:

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

Принцип 9. Обеспечьте достаточно пространства и не злоупотребляйте цветами.

Ресурс M&S пересыщен информацией: рядом с картинкой продукта справа находится имя продукта, цена, код продукта, рейтинг, обзоры, описание продукта и информация о его наличии. Более того, все шрифты одинакового размера и между ними недостаточно белого пространства. Этот раздел выглядит перенасыщенным и участники, как только не могли найти нужную им информацию, игнорировали его.
Цвета используемые на странице отвлекали участников. Tesco Direct использует больше 5-ти цветов для шрифтов:

• Красный для цены
• Черный для контента
• Зеленый для «Добавить в корзину»
•  Голубой для вкладок с этикетками
•  Серый для некоторых ссылок

Это сбивало с толку участников и увеличивало визуальный беспорядок:

Принцип 10. Избегайте требования клика если хотите, чтобы пользователь прочел информацию.

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

Итог.

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

Перевод Натальи Лейви.

• Воздушный интерфейс будущего
• Обзор политики в интернете
• 7 решений, которые помогут успешно продавать юзабилити

Для тех кто делает только первые шаги в Axure RP мы создали короткое видео о том как создавать ссылки.

• 20 рекомендаций для прототипирования в Axure RP Pro
• Бесплатная библиотека для Axure RP «Цветное меню».
• Отчет о конференции «User Experience Ukraine 2011»

«Раз человек выбрал эту профессию (UX designer), то должен был знать на что идет и быть к этому готовым.»

Ведь делая то, что осточертело, вряд ли даже самый лучший специалист сделает это хорошо. А если профессионал будет помнить, что не всё, что он делает воплощается в жизнь, то не думаю что он будет отдаваться работе на 100%.

Видео с панельной дискуссии, а также мнение о том как мотивировать людей под ним

UX как непрерывный процесс в организации from Stas Fomin on Vimeo.

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

• Виды usability-специалистов
• Будущее электронной торговли и интернет-магазинов (видео)
• Исследование времени «входа» на сайт.

Но теперь мы активно пересматриваем видео с конференции.

Рекомендуем всем владельцам интернет магазинов посмотреть доклад Камиля Калимуллина (архитектор и идеолог проекта AdVantShop.NET)

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

• Usability не как проект, а как процесс
• Конференция «User Experience 2009»

Google’s User Experience
http://www.google.com/about/corporate/company/ux.html
Эта страница Google, которая хранит в себе 10 принципов по обеспечению удобства пользования продуктов компании.

12 Website Usability Testing Myths
http://www.intuitionhq.com/blog/2011/07/website-usability-testing-myths/
Какие подводные камни могут встретиться во время тестирования и какой информации не стоит верить интересно написано в записи блога по ссылке.

The Usability of Passwords
http://www.baekdal.com/tips/password-security-usability/
Компании, отдел ИТ требуют от рабочих создания сложного труднозапоминаемого пароля. Правильно ли это и каким должен быть пароль подробнее по ссылке.

Usability in Icons
http://stiern.com/articles/usability/usability-in-icons/
Иконки — не просто украшения для сайта. В статье можно черпнуть информацию о том, как должна выглядеть иконка, чтобы она выполняла свою функцию и о многом другом.

Веб

Understanding Visual Hierarchy in Web Design
http://webdesign.tutsplus.com/articles/design-theory/understanding-visual-hierarchy-in-web-design/
Статья дает понимание, что такое визуальная иерархия, для чего она служит и как с помощью правильного исполнения этой иерархии можно добиться хорошего UX у сайта.

45 Useful jQuery Tutorials And Techniques For Better UI
http://pelfusion.com/tutorials/45-useful-jquery-tutorials-and-techniques-for-better-ui/
При проектировании интерфейса необходимо учитывать, какими средствами и способами будет реализована тот или иной элемент. 45 полезных примеров реализации jQuery-скриптов.

Мобильные девайсы

Designing With Tablets in Mind: Six Tips to Remember
http://webdesign.tutsplus.com/articles/general/designing-with-tablets-in-mind-six-tips-to-remember/
Очень познавательная статья о том, как проектировать интерфейс для планшетного компьютера, о тех принципах, которые нельзя забывать.

10 Mobile Usability Testing Tips
http://answerlab.com/blog/2011/02/03/10-mobile-usability-testing-tips/
Автор статьи пишет о том, как провести тестирование приложения для мобильного устройства: хитрости и принципы.

Инструменты

• Полезные ссылки выпуск №5
• Полезные ссылки выпуск №3
• Полезные ссылки выпуск №7