Usability *

Сразу предупреждаем — это статья не о том, что на карточке товара нужно использовать красную кнопку ”добавить в корзину”, которая поднимет конверсию на 20% и не о том, что размер фотографии товара должен быть 500 на 500 пикселей и это поднимет конверсию ещё на 10%, а размер заголовка должен быть набран 10 кеглем, именно тогда ваши товары будут продаваться. В ней нет простых рецептов и секретов. В ней есть правда. А правда в том, что недостаточно прочитать статью про кнопки и цвета, чтобы создать продающую страницу с товаром. Чтобы создать действительно продающую страницу нужно приложить немало усилий и в меньшей степени эти усилия связаны с выбором цветов, шрифтов и кнопок.



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

Продолжим наше изучение информационной архитектуры и ее значение для электронной коммерции. В первой главе мы вкратце ознакомились с понятием информационной архитектуры (далее — ИА), значением и подходами к работе над ней в рамках проектирования взаимодействия.
Теперь от вопроса «Зачем проектировать информационную архитектуру» перейдем к вопросу «Какие есть особенности ее проектирования?»

Итак: особенности работы с ИА в e-commerce и три аспекта ее проектирования:

• Принципы построения качественной ИА. Их применение в e-commerce;
• Шаблонные схемы ИА. Какие шаблоны лучше использовать;
• Процесс исследований ИА в e-commerce и их рентабельность.

Как водится, краткие итоги главы в конце поста.

25 октября прошла вторая саратовская конференция веб-разработчиков Wake Up Province, где мне посчастливилось выступить докладчиком. Сегодня же я решил поведать хабрасообществу о своем докладе на ней — думаю, кому-то это может быть интересно. Тема, в общем-то, проста и неказиста: Почему компьютеры причиняют страдания и как объяснить это заказчику. Способы проектирования интерфейсов и принципы «прозрачной» разработки.

Доклад основан на собственном опыте применения в реальной разработке мыслей и выводов одного очень известного человека — Алана Купера. При этом многие наработки «взращены» мною самим, а некоторые — заимствованы с Хабра.

Под катом несколько облагороженный текст доклада и почти полтора десятка слайдов (~660Kb). Дабы не разрывать текст, слайды спрятаны в спойлеры.

Привет, username!

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

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

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

Интервью Питера Морвиля, автора книги «Information Architecture for the World Wide Web», которая стала настольной книгой многих специалистов в области юзабилити и информационной архитектуры. В статье нет прикладных решений и революционных предложений. Автор описывает свое видение подхода к процессу разработки информационной архитектуры и функциональных элементов, которое представляет собой некий синтез традиционного подхода и различных религиозных и философских направлений.

Собственно, интервью:

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

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

В этой статье мы попытаемся ответить, какие сообщения следует посылать клиентам, когда и как? 

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

Перевод статьи «The Hamburger Icon» дизайнера сайта Booking.com Мишеля Феррейры от 23 сентября 2014 года.


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

Адаптивный веб-дизайн – это намного больше, чем просто эластичные шаблоны и @media queries. На самом деле, это совершенно новый подход к дизайну. Учитывая это, предлагаю рассмотреть несколько распространенных подводных камней, которых следует избегать в вашем следующем адаптивном шаблоне.

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

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

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

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

Раньше мы тестировали пользовательский интерфейс в процессе опытной эксплуатации (это когда новая версия устанавливается в нашей компании). У этого метода нашлись недостатки:

• Пользователям некогда оформлять замечания к продукту. Особенно если это касается удобства использования программы, а не функционала.
• Не понятно, насколько интуитивен интерфейс. Можно, конечно, проводить опросы, но они обычно малоинформативны.
• Замечания поступают слишком поздно. У разработчика остается меньше времени на их исправление.

Бороться с этими недостатками мы решили с помощью коридорного тестирования. Здесь мы хотим поделиться своим опытом.

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

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

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

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

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

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

Учитывая объем информации, было принято решение о разбивке статьи на несколько частей.

Мы продолжаем публикацию перевода статьи, посвященной технике работы с улучшениями на сайте, которые направлены на улучшение поведенческих факторов. Текст перевода предоставлен аналитическим отделом компании ALTWeb Group. Поведенческие факторы также могут быть улучшены при помощи инструмента SERPClick, в основу разработки которого легли последние исследования в области оптимизации сайтов через поведенческие факторы.

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

Нейл Патель из компании QuickSprout утверждает, что цвет на 85% влияет на решение о приобретении той или иной продукции. Поэтому многие компании вкладывают большие деньги в исследования и создание продающей упаковки для своего товара. Тоже самое правило работает и для продающих сайтов: используйте правильные цвета, и вы всегда будете в выигрыше.

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

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

В общем, рамок сам себе наставил и начну и раздам сегодня звезды ребятам, решившим проблему дистанционного тестирования в разработке интерфейсов, cайтов и контента создав сервис Фабрика Юзабилити www.fabuza.ru. Хочу предупредить изысканных читателей уважаемого ресурса, настроенных против прямой рекламы, что все сервисы, о которых планирую писать использую или пробую для себя.

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

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

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

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

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

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

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