Алексей Бородкин

Оцениваем юзабилити сайта фонда Prostor Capital


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

Алексей Бородкин — ведущий аналитик USABILITYLAB — разобрал плюсы и минусы сайта в плане юзабилити.

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

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

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

Этим мы сегодня и займемся: у нас в гостях сайт венчурного фонда Prostor Capital — встречайте!

Кто, где, когда

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

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

  1. Составить общее впечатление о венчурном фонде;

  2. Получить подробную информацию об инвестиционных программах;

  3. Связаться с представителями фонда;

  4. Вспомнить контактные данные компании (эта задача, скорее, вспомогательная, но не учитывать ее не стоит).

Как отдельную группу пользователей можно выделить представителей средств массовой информации (СМИ). Их задачи в чем-то схожи:

  1. Получить общую информацию о венчурном фонде;

  2. Посмотреть последние события, связанные с венчурным фондом;

  3. Получить информацию о руководстве фонда;

  4. Связаться с представителями фонда.

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

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

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

Главная страница

Чтобы пользователь получил общую информацию о фонде, главная страница должна отвечать на следующие вопросы:

  • Что это за фонд и чем он занимается;

  • В чем преимущества данного фонда;

  • Кто является организаторами фонда;

  • Кто его клиенты.

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

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

Теперь коснемся частных замечаний:

  1. Подавляющее большинство страниц сайта разбито на отдельные «слайды», и главная страница здесь – не исключение. Вот, например, первый слайд:

http://joxi.ru/dp27olLfKpMQ27.jpg

«Слайдовый» подход вполне корректен и выгодно работает для информационных, приближая сайт к солидной интерактивной презентации о компании.

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

  2. Отдельно можно отметить кнопку пролистывания снизу слайда — она дает понять, что экран можно пролистнуть вниз. Это пример правильной заботы о пользователях.

  3. При переходе на второй слайд сайт «ловит» скролл мышью и самостоятельно докручивает экран до второго слайда:

http://joxi.ru/JMAjpvMij7zZme.jpg

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

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

http://joxi.ru/Bv29N0JiZq7LAG.jpg

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

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

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

http://joxi.ru/qVrwMKQF7dZJ2X.jpg

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

  1. Контент второго слайда не умещается на экране и требует дополнительной прокрутки. Это нарушает «слайдовый» принцип, когда смысловой контентный блок умещается в один экран:
    http://joxi.ru/vn2YOyzhbpMQr6.jpg

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

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

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

  5. На третьем слайде встречается первый смысловой «якорь» для пользователя — типы инвестиций с возможностью перехода на развернутое их описание:

http://joxi.ru/qVrwMKQF7dBJ2X.jpg

Заодно этот слайд раскрывает преимущества фонда. Эта тема раскрыта достаточно для главной страницы.

  1. Здесь можно выделить ошибку: в тексте инвестиции называются «денежные» и «медийные», а на кнопках они же называются «инвестиции» и «media for equity». Подобная терминологическая путаница вкупе с дублированием информации может смутить пользователя.

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

http://joxi.ru/4DmBxVEHJBXpAP.jpg

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

  2. Далее следует слайд с портфолио — крайне важный слайд для венчурного фонда:

http://joxi.ru/E5mdQlWs3nx721.jpg

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

  2. Кнопка «Все компании» пропадает среди логотипов — помимо цвета, было бы уместно выделить ее отдельным расположением, например, снизу от логотипов.

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

  4. Далее следует раздел «Контакты» — он логично структурирован, и по нему никаких замечаний нет:

http://joxi.ru/LQ2K0WxtLazlAj.jpg

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

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

  3. Подвал страницы содержит блок копирайтов и ссылку на сообщество в Facebook. Никаких замечаний по данному пункту нет, все корректно.

Страница «Инвестиции»

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

  1. Первый слайд — чисто имиджевый:

http://joxi.ru/NDrlpwOiVQMarP.jpg

Как и первый слайд на главной странице, он призван создавать впечатление о компании и настраивать пользователя на спокойный, размеренный лад. С этой задачей он отлично справляется.

  1. Второй слайд дает общую вводную информацию о денежных инвестициях:

http://joxi.ru/j1A5Wq9HDEogmE.jpg

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

  1. Третий слайд говорит о кластерах, с которыми работает фонд:

http://joxi.ru/4vAWykYtgEYpmW.jpg

Неудачное сочетание текста и графики на заднем плане делает текст плохо читаемым — это серьезная проблема.

  1. Здесь же присутствует терминологическая путаница: страница говорит о кластерах, но в иконке слева речь идет о сегментах. Это может запутать пользователя.

  2. Далее следует страница с детальными параметрами инвестиций:

http://joxi.ru/QY2Lkdqs7G33m6.jpg

Здесь единственное замечание: текст справа слишком однороден, в нем не выделены акценты.

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

Media for equity

Структура страницы Media for equity в целом соответствует структуре «Инвестиций», поэтому замечания те же.

Впрочем, есть и отдельное замечание. На втором слайде присутствует ссылка «Посмотреть инфографику»:

http://joxi.ru/L4AkGVOFoBN1Aq.jpg

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

Портфолио

Данный раздел презентует проекты компании.

  1. Данный раздел выполнен лаконично и просто, предлагает пользователю понятные сценарии взаимодействия:

http://joxi.ru/vDr8NGnioYZy26.jpg

  1. Небольшое замечание вызывает заголовок страницы («Портфолио»), вернее, его оформление. Дело в том, что на страницах «Инвестиции», Media for equity и «Команда» первый слайд организован совсем иначе (без заголовка с полосой). Разномастная организация заголовков страницы размывает цельность восприятия и затрудняет навигацию. Это замечание справедливо и для других страниц.

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

  3. Небольшое замечание вызывает плашка с крестом в конце списка проектов — ее смысл не очень понятен, и она выглядит как заглушка на месте какого-то не загрузившегося проекта, поскольку по размеру аналогична картинке с логотипом.

  4. Окно с кейсом хорошо структурировано и не вызывает вопросов:

http://joxi.ru/8ZrJp6qiw03v2j.jpg

  1. Небольшое нарекание вызывают названия ссылок в верхнем регистре: они смотрятся не очень читабельно и привлекают слишком много внимания. Кроме того, непонятно назначение иконок — то, что это иконки новостных порталов, не считывается сразу. Кроме того, названия порталов тоже не упоминаются.

Команда

Данная страница, как и следует из названия, презентует команду.

  1. Первым слайдом следует общий портрет команды — и это прекрасное решение для знакомства:

http://joxi.ru/0KAgWbMHE3n3Al.jpg

  1. Далее следуют отдельные персоны с биографиями:

http://joxi.ru/BLmGjY3cw549rl.jpg

Что замечательно, портреты персон анимированы — и эта небольшая и необычная деталь запоминается и настраивает пользователя на позитивный лад.

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

http://joxi.ru/lJ2b305f0LxJA6.jpg

 

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

Пресс-центр

На данной странице приводятся материалы, потенциально интересные для прессы.

  1. Страница хорошо скомпонована, прессе предоставляются все необходимые инструменты: сами новости, контакты внутри компании, ссылка на сообщество в Facebook:

http://joxi.ru/aD2P8aBiq4j523.jpg

По данной странице никаких замечаний нет.

  1. Страница новости скомпонована хорошо — за вычетом уже упоминавшейся проблемы светлых шрифтов на сером фоне:

http://joxi.ru/gkrDxP9HKOMerp.jpg

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

Контакты

Данная страница содержит контактные данные и де-факто дублирует последний слайд на главной странице:

http://joxi.ru/YxAe5pecRaJwAy.jpg

Тем не менее, есть важное отличие: под контактными данными скрывается форма обратной связи (это единственная форма обратной связи на сайте):

http://joxi.ru/NDrlpwOiVkbarP.jpg

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

Страница ошибки 404

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

В нашем случае страница выглядит так:

http://joxi.ru/4vAWykYtgXjpmW.jpg

ВАЖНО: Очевидно, что имеет место некая ошибка чисто технического, несистемного характера. Не исключено, что она будет поправлена уже на момент публикации данной статьи.

Резюме

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

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


comments powered by Disqus

Подпишитесь на рассылку RUSBASE

Мы будем вам писать только тогда, когда это действительно очень важно