Статья 2. Почему стартапы теряют пользователей. Детальный разбор на примере gdeetotdom.ru

В первой статье моего цикла статей по юзабилити «Почему 99% стартапов не выстреливает? Детальный разбор на примере turometr.ru» мы рассмотрели как содержание главной страницы влияет на восприятие сайта пользователем и решает (скорее не решает) стоящие перед человеком проблемы.

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

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

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

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

Другой пример это библиотека. В любой библиотеке есть каталог книг разбитый по тематике, по автору, по названию, по году выпуска литературы, и человек, взглянувший на каталог СРАЗУ понимает какую именно информацию он сможет найти. Только представьте себе, для того, чтобы оперировать десятками тысяч книг — огромным количеством информации, достаточно представлять себе структуру каталога. Запомнив некоторые ключевые точки структуры, человек будет точно знать где и как он сможет найти нужную информацию в будущем. Это же просто поразительно, как на нескольких страничках возможно описать огромнейший объем информации и сделать ее доступной для нахождения, а структуру легко доступной для понимания.

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

Проектируя сайт — каждый из нас, создает СОВЕРШЕННО НОВЫЙ интерфейс взаимодействия пользователя с информацией. Сейчас, когда создание сайтов превратилось в элементарный процесс для специалиста, мало кто задумывается именно над тем, что ОН создает новые интерфейсы и структуры организации информации, и именно в этом кроется главная проблема большинства новых проектов.

Задумайтесь об этом! А пока, дабы немножко отдохнуть от теории, приведу практический пример.
Не так давно интернет захватила волна видео, которое можно просмотреть прямо на страничке в броузере. Основателем внедрения видео был youtube, и именно ОН своим огромным бюджетом оплатил «программу обучения пользователей» по изучению нового интерфейса видео плеера. Именно благодаря ему мы сейчас видим многообразие разнообразных видеоплееров с небольшими отклонениями, но обязательно содержащие основные управляющие элементы, очень похожие на первоначальный плеер youtube. Это значит, что внедрять в массы новые формы взаимодействия пользователя с информацией способны только очень уважаемые компании и, обязательно с солидным бюджетом. Имеется ввиду внедрять успешно.

Я заявляю этот тезис как аксиому — ВНЕДРЯТЬ НОВЫЕ ФОРМАТЫ СПОСОБНЫ ТОЛЬКО ОЧЕНЬ СЕРЬЕЗНЫЕ КОМПАНИИ.

Что же следует из всего вышесказанного?
При проектировании интерфейсов, разработчикам следует ЖЕСТКО опираться на общепринятые стандарты представления информации. Особенно если у вас нет лишних денег для обучения пользователей взаимодействию с придуманным вами интерфейсом. Это относится как к структурированию, так и к оформлению информации и использованию понятных пользователю элементов интерфейсной навигации.

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

Перейдем от теории к практике и рассмотрим сайт gdeetotdom.ru
Открываем сайт и видим:



Сразу в глаза бросается отступ логотипа от левой границы сайта, это именно та мелочь, которая в совокупности с сотней таких же мелочей, создает общий дискомфорт от просмотра страницы. Для русского человека неестественно читать англоязычный вариант gdeetotdom потому что «е» читается как «е», а не как «э». В данном случае логичным было бы написать «ГдеЭтотДом.ру» Блок выбора региона сделан в виде выпадающего меню (как можно догадаться) однако стрелочки вверх и вниз поначалу вводят в заблуждение.

«В базе предложений — 141573» — что это значит? Каких предложений? Каких улиц? В каких городах? Фотографии чего? Чтобы все это узнать нужно делать клики, а ведь клик пользователя — очень дорогое удовольствие. Пользователь кликает ТОЛЬКО когда четко знает, ЧТО получит после клика. Кликать по этим ссылкам не хочется.

В воздухе висят малозаметные ссылки, надо полагать главного меню. Названия пунктов меню не дают абсолютно никакой информации, о том, какую информацию и в каком объеме получит пользователь. Вы лично хотите прочитать какую-нибудь аналитику, какие-нибудь новости, какие-нибудь статьи? А «Реклама» это что? Мне там покажут рекламу? Или предложат разместить рекламу на сайте? Или в газете? Или еще где-то? Я изначально не верю ничему, и чтобы заставить меня прочитать ваши новости, нужно сначала убедить меня в том, что: они актуальные, беспристрастные, представлены в полном объеме. К сожалению безликая ссылка меня в этом не убеждает.

Смотрим ниже:



Вероятно это блок поиска недвижимости. Но почему тогда вкладка «Поиск недвижимости» не активна? Крайне неудачное решение в виде двойных вкладок, или как это задумано, сходу не понятно. Что значат вкладки? Что скрывается за вкладкой «Где этот дом»??? А за вкладкой «ged.index»??? Туда нужно кликать и долго разбираться. Человек, который пришел за конкретной информацией не станет тратить время на изучение неизвестно чего, с неизвестно каким результатом.

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

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

«Расширеный поиск выключен. Включить» — стрелочка призывает нас развернуть форму вниз, кто-то может подумать, что форма развернется на этой же странице на javascript Не заблуждайтесь, попробуйте кликнуть и зафиксируйте дискомфорт.

И еще я не понимаю, для чего делать ссылку «Вход» тем самым заставляя пользователя переходить на отдельную страницу? Почему нельзя сделать поле ввода логина и пароля прямо на этой странице? Помните? Клик стоит дорого!

Идем дальше:



Видим блок под названием «Статьи». Плюсик во вкладке кажется нам интерфейсным элементом, который каким-то образом покажет остальные статьи, но это не так. Он там просто для красоты.

Излишним также будет повторять, что нет четкого понимания: ЧТО там за статьи, СКОЛЬКО их там, КТО их автор (можно ли доверять, не реклама ли), КАК просмотреть ВСЕ статьи итп.

Помимо кривой верстки, из-за которой пропали правая и нижняя границы блока, я обнаружил вопиющую деталь, которой точно не должно быть в современном сайте, особенно в таком, в который вложено больше миллиона $. Внимание! Вы готовы? Картинки, иллюстрирующие статьи в этом блоке очень плохого качества (пережатый jpeg), НАМНОГО большего размера и уменьшены СРЕДСТВАМИ HTML. Держите меня семеро!

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

Смотрим дальше и слева видим блок «Объявления от компаний»



От каких именно компаний? Из какого города? Почему объявления только 2? Где просмотреть остальные? Это ведь ГЛАВНАЯ страница сайта, и тут так много места занимает этот блок, которым заинтересуется лишь 0.1% посетителей. Ради чего он здесь находится? Я не знаю. Может быть вы знаете?

Тоже самое можно сказать о блоке справа «Специальные предложения»



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

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

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

По центру идут 3 разноплановых блока:



Причем ни один из них не подписан. Остается только гадать, какая информация там размещена, как она структурирована и где искать аналогичную информацию на сайте.

«Представляем вашему вниманию новый сервис Россия 360» — опять нужно кликать чтобы узнать что-то, а что конкретно не понятно. Более миллиона долларов было потрачено на создание базы фотографий домов и улиц, на создание возможности панорамного просмотра, и этому уделен лишь небольшой блок на сайте!!! Если у вас есть бриллиант зачем прятать его в подвал!!!??? Ну почему, скажите, почему нельзя сделать этот сервис в самом верху, в большом и красивом окне, с удобным управлением (а не как сейчас), почему нельзя по GeoIP определять из какого города посетитель (а возможно и района) и показывать ему сразу дома из его города, а возможно и с близкой ему улицы?

Представьте, заходите вы на сайт (скептически ухмыляясь, ну что мол они могут мне предложить), а перед вами на экране главная улица вашего города, да еще в панораме 360 градусов, с возможностью прокрутки. А рядом удобный список остальных улиц. Вы бы не остались на этом сайте? Не занесли бы его себе в закладки? А ведь это то, что нужно!!! Удержание трафика на сайте! Представляете НАСКОЛЬКО более эффективен такой подход? Когда мы предоставляем пользователю ИМЕННО то, ЧТО ему интересно! А в данном случае, когда пользователь СРАЗУ не найдет для себя нечто интересное, он не будет изучать весь сайт, он просто его закроет и частичка вашего рекламного бюджета растворится в воздухе.

Следующий блок: «Покупатели оживают» Отчет аналитического центра ГдеЭтотДом.РУ по рынку жилья России за май 2009 года. Единственный на сайте отчет? Да еще и от ГдеЭтотДом.ру? Почему я должен ему доверять? Отступ текста от левого края значительно больше отступа в верхнем блоке, опять неряшливость и опять дискомфорт.

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

Смотрим далее:



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

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

В самом низу расположен блок, назначение которого мне непонятно до сих пор:



Нет никакой информации о том, каким образом были выбраны данные страны, ЧТО пользователь получит при клике, ГДЕ найти другие страны, если эти меня не заинтересовали.

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

В данной статье мы рассмотрели важность правильной организации информации на странице и создания правильной и понятной структруры на конкретном примере. Более подробное теоретическое обоснование необходимости структурирования информации описано в моей первой статье «Почему 99% стартапов не выстреливает? Детальный разбор на примере turometr.ru»

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

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

Всегда ваш, serge2 :)

UPD: По вопросам консультаций по юзабилити пишите: sergexx@gmail.com