Юзабилити-лаборатория: шаблоны – удобное решение для неудобных сайтов
Новый выпуск «Юзабилити-лаборатории» мы решили провести в формате судебного заседания. Сегодня мы рассмотрим 4 «дела» по разным сайтам, которые отобрали из полученных заявок. По каждому сайту будет выступать обвинение и защита с вынесением «приговора» в итоге.
Основная идея выпуска связана с темой готовых шаблонов сайтов для популярных CMS. Почему мы выбрали именно эту тему, будет понятно далее.
Судья: Заседание суда объявляю открытым. Обвинение представляет Зинаида Гришанина – эксперт по юзабилити, человек, знающий о юзабилити все и даже больше. На стороне защиты – Мария Жебелева – специалист по юзабилити, человек, знающий не только явные потребности пользователей, но и их скрытые желания (4 года работы клиническим психологом не проходят даром). Сегодня Мария Жебелева поможет обвиняемым отстоять их интерфейсы. За вынесение приговора сегодня отвечаю я, ведущий юзабилити-специалист, Мария Чайкина.
* При создании выпуска лаборатории ни один вымышленный потерпевший персонаж не пострадал.
Дело №1. «О труднодоступности информации»
sluzba-zdorovya.ru
Ответчик: сайт медицинского центра «Служба Здоровья», город Екатеринбург.
Обвинитель: Ответчик обвиняется в по двум статьям: намеренное сокрытие важной для пользователей информации и неэффективное представление информационного контента.
Суть обвинения: даже если посетителей сайта заинтересуют услуги указанного медицинского центра, получить более подробную информацию о них, не говоря уже о том, чтобы записаться на прием, будет практически невозможно. Слово потерпевшему.
Главная страница
В «Косметологии» я увидела нужные мне процедуры. Но я не нашла никакой информации по ним: сколько длятся, как к ним подготовиться, какие есть показания и, что важнее, противопоказания, сколько нужно сеансов на курс и с какой периодичностью их необходимо проводить. А главное, сколько стоят услуги? Ничего этого мне не сообщают. Записаться на прием через сайт тоже оказалось невозможным.
Раздел «Косметология»
Тогда я решила посмотреть цены на услуги центра. Вверху страницы нашла обнадеживающую ссылку «Прайс-лист на косметологические услуги». Но вместо открытия страницы с ценами произошло скачивание файла, я даже не знаю куда, потому что меня не спросили, нужно мне скачать его или нет.
Раздел «Косметология»
Последней надеждой стал раздел «Прайс-лист». Но и здесь меня ждало разочарование: я ожидала найти список цен на все услуги, но здесь были только ссылки на скачивание word- файлов. Хорошо, что я зашла на сайт с компьютера. С телефона я, возможно, даже не смогла бы открыть эти файлы!
Раздел «Прайс-лист»
Тогда я решила хотя бы оценить, что за врачи работают в этом центре, узнать их опыт, квалификацию и навыки, посмотреть, как они выглядят. Но такого раздела вообще нет на сайте! В разделе «Отзывы» хотела узнать мнения настоящих пациентов клиники, их мнение о врачах и услугах, но страница оказалась совершенно пуста.
Раздел «Отзывы» (http://sluzba-zdorovya.ru/otzyvy/)
В приступе отчаяния решилась позвонить в центр по телефону и спросить все, что мне нужно. И… просто не нашла номера телефона на сайте.
Главная страница
Также хочу добавить, что при попытке узнать об услугах центра больше, было подорвано мое зрение. Читать полотна сплошного текста бледно-серого цвета совершенно невозможно. Требую принять меры.
Раздел «Статьи»: Остеопатия
Обвинитель: Сайт не удовлетворил потребностей пользователя: он не смог найти нужную ему информацию и записаться на прием. Кроме того, информационный контент сайта совершенно не пригоден для представления его посетителям.
Адвокат: Уважаемый суд, мой подзащитный (Центр «Служба здоровья») стремится обеспечить каждому клиенту индивидуальный подход. Поэтому точное количество процедур, которые требуется провести клиенту, указать заранее сложно, все зависит от конкретного случая.
По обвинению в сокрытии информации: обратите внимание, что на странице меднаправления «Косметология» представлен полный список услуг (заметьте, наглядным маркированным списком, а не полотном текста) и имеются яркие иллюстрации, которые оживляют страницу. Список показаний к услуге, поэтапное описание процедуры, длительность реабилитации, временные интервалы между курсами и прочие данные присутствуют на сайте в разделе «Статьи». Потерпевший просто не смог найти эту информацию.
Раздел «Статьи»
В крайнем случае все вопросы об услуге потерпевший мог узнать по телефону, который, кстати, находится в «шапке», как на многих веб-ресурсах.
Возможность скачать файл с прайс-листом является одним из конкуретных преимуществ сайта, а не его недостатком. Клиент получает всю информацию о ценах в одном файле, может его распечатать и в любой момет к нему обратиться. Согласитесь, каждый раз переходить на сайт, чтобы посмотреть стоимость, довольно неудобно.
Раздел «Косметология»
«Полотна сплошного текста», как выразился прокурор, разделены на ясные абзацы и отбиты отступами и заголовками. Даже при беглом просмотре можно быстро понять структуру и содержание страницы.
Раздел «Остеопатия»
При вынесении приговора прошу учесть:
- преставление полного списка процедур, которые предлагает компания;
- использование инфографики для облегчения восприятия данных (маркированные списки, изображения, выделенные заголовки и пр.);
- наличие файла для скачивания с прайс-листами;
- присутствие номера телефона в «шапке» (в привычном и ожидаемом месте).
Кроме этого, прокурор не учел ряд неоспоримых достоинств ресурса sluzba-zdorovya.ru:
1. Наличие приветственных и информационных видеороликов о работе медицинского центра и направлениях лечения, а также информация о том, что деятельность центра лицензирована. Пусть новые клиенты не беспокоятся о качестве предоставляемых услуг.
Главная страница сайта sluzba-zdorovya.ru
2. Подробная информация о том, с какими аппаратами и приборами работают сотрудники центра, сформирует у посетителей адекватные ожидания о лечебной процедуре.
Раздел «Приборы»
3. В разделе «Контакты» имеются виджет «Яндекс.Карта» и графическое представление маршрута, что поможет клиенту без проблем добраться до медицинского центра.
Считаю, что мой клиент – Медицинский Центр «Служба здоровья» – невиновен. А обвинения в сокрытии важной для пользователей информации и неэффективном представлении информационного контента безосновательны.
Судья: Суд, рассмотрев в открытом судебном заседании «Дело о труднодоступности информации» в отношении сайта sluzba-zdorovya.ru, постановил ходатайство удовлетворить, меру пресечения установить в виде разработки нового сайта. В целях экономии затрат на разработку нового дизайна для сайта был подобран шаблон на медицинскую тематику, работающий на CMS Wordpress, и сайт предлагается в него «переодеть».
* Почему мы предлагаем именно шаблон. Все привыкли, что разработка сайта начинается с создания прототипов и дизайна. Затем начинается разработка сайта по дизайну. Разработка сайта в таком формате – это процесс длительный и дорогой, что не всем по карману. Для технически не очень сложных сайтов – корпоративных, интернет-магазинов, блогов, сайтов портфолио – отличным решением будет использование шаблона, созданного профессионалами. Такой шаблон за 30–70 $ уже будет содержать все необходимые элементы дизайна и набор блоков «конструктора» для сбора готового сайта.
Неоспоримое достоинство такого «конструктора» – возможность собрать сайт быстро и легко, часто это можно сделать самостоятельно без программиста. Еще одно достоинство – возможность выбрать одну из популярных бесплатных или платных CMS, которая в дальнейшем позволит легко и просто наполнять сайт контентом. Кроме того, при создании новой версии сайта на шаблоне можно сохранить все URL, которые были у старого сайта, что позволит сохранить наработки SEO.
Для сайта «Служба здоровья» мы подобрали тему Dentalux - Dentist, Medical & Healthcare Theme. Ее можно приобрести за 49 $. Демо-версия доступна по ссылке.
Преимущества темы:
- Современный дизайн.
- Создана специально для медицинских клиник.
- Полностью адаптивна и хорошо работает на мобильных устройствах – планшетах и смартфонах.
- Оптимизирована под SEO.
- Содержит визуальный конструктор.
- В случае сложностей всегда можно связаться со службой поддержки, которая поможет настроить тему под нужды компании.
Обвинение отметило некоторые недостатки сайта, которые будут устранены в новой версии:
- На сайте не было информации о врачах, поэтому добавлен раздел «Врачи».
- Записаться на прием на сайте невозможно, поэтому повсеместно будет добавлена форма для записи на прием.
- В разделе «Прайс-лист» предалагается расположить полный список услуг с ценами, а также дать возможность скачать прайс на компьютер.
- Также на сайт мы предлагаем добавить раздел «О центре», в котором пользователь может подробнее узнать о клинике.
Давайте посмотрим, как выглядит главная страница сайта «Служба здоровья» до и после переодевания в шаблон.
Было
Стало
Дело №2. «О потерянном времени»
oltek.ru
Ответчик: сайт компании «ОЛТЕК», город Москва.
Обвинитель: Ответчик обвиняется в умышленной бесполезной трате времени пользователей, а также в обмане поисковых систем.
Суть обвинения: сайт неоправданно занимает топ Яндекса. Слово потерпевшему.
Потерпевший: Я работаю системным администратором в крупной компании. Закупкой необходимого оборудования также занимаюсь я. Мне нужен был небольшой серверный шкаф. Я знал, что мне нужно, поэтому ввел в Яндексе точный запрос «напольный корпус кронос».
Я знаю, что в топе Яндекса висят только релевантные ссылки по запросам, поэтому смело кликнул на первую – http://www.oltek.ru/catalog/metallokorpus/electrical/kronos/. Это оказалась компания «ОЛТЕК». Так что шкаф я нашел быстро.
Страница с результатами поисковой выдачи Яндекса
По ссылке я сразу перешел в карточку нужного мне шкафа. Но на этом хорошие новости и закончились. Фотографии шкафа посмотреть было проблематично, так как каждая из них открывалась в новой вкладке. Пришлось перемещаться туда-обратно между вкладками и закрывать их отдельно.
Страница-карточка товара
Во вкладках «Технические характеристики» и «Типоразмеры» вообще не оказалось никакой информации.
Страница-карточка товара
Цены также не указаны. Еле обнаружил в самом низу сайта ссылку «Получить прайс-лист». Думаю, хотя бы скачаю файл, посмотрю цены. Не тут-то было. Вместо файла со списком цен – форма с кучей обязательных полей.
Страница-карточка товара
Нажимаю кнопку «Сделать заказ» – опять открывается форма для отправки сообщения. Какое сообщение, если я нажимаю кнопку заказа на странице с конкретным шкафом! Дайте мне возможность добавить его в корзину!
Я вернулся к результатам поиска в Яндексе и нажал на вторую ссылку. Здесь уже все прошло гладко, я сразу же заказал нужный мне шкаф.
Страница с результатами поисковой выдачи Яндекса
Обвинитель: Сайт не только впустую тратит время пользователей, но и намеренно вводит в заблуждение поисковые системы. Показателя отказа в данном случае не будет, так как пользователь проводит больше минимального времени на сайте, пытаясь узнать хоть что-то. Поэтому он незаслуженно занимает первую строку в поисковой выдаче.
Адвокат: Ваша честь, я протестую! Мой подзащитный честно заработал свое место в ТОП.
Благодаря раскрытию фотографий в новых вкладках покупатель может рассмотреть особенности продукта в мельчайших деталях. Это важно для наших внимательных клиентов, которые хорошо разбираются в товаре и знают, чего хотят. Подобная детализация картинки была бы невозможна при раскрытии фотографии поверх текущей страницы или – того хуже – при увеличении какой-либо зоны фотографии «лупой» при наведении курсора (нам ведь нужна картина целиком!).
Как отметил потерпевший, он отлично знал, какой серверный шкаф ему нужен. Он даже указал в поисковике конкретную модель. Таким образом, подробные технические характеристики и типоразмеры продукта ему не нужны. А вот преимущества товара подробно описаны на странице-карточке.
Вкладка «Преимущества» на карточке товара
Мой подзащитный компания Oltek заинтересован в новых клиентах, поэтому стремится продемонстрировать широту ассортимента товаров и конкурентные цены. С этой целью посетителям сайта предлагается полный прайс-лист в обмен на контактные данные. Согласитесь, это честный и равнозначный обмен для развития дальнейшего сотрудничества.
Обвинение в отсутствии «Корзины» и стандартной процедуры оформления заказа на сайте моего клиента (oltek.ru) безосновательно. Компания «Эллерон», которую привел потерпевший в качестве примера для подражания, является посредником в поставке продукции конечным клиентам, а не производителем, как компания Oltek. Поэтому их сравнение неправомочно.
Прошу оправдать по всем пунктам!
Судья: Суд, рассмотрев в открытом судебном заседании «Дело о потерянном времени» в отношении сайта oltek.ru, постановил ходатайство удовлетворить, меру пресечения установить в виде создания нового сайта. В целях экономии средств на разработку для сайта был подобран шаблон интернет-магазина, работающий на бесплатной CMS OpenCart, и сайт предлагается в него «переодеть».
Для сайта oltek.ru мы подобрали тему Tools - Opencart Responsive Theme. Ее основными достоинствами можно назвать:
- Современный дизайн адаптивный дизайн.
- Работа на бесплатной CMS OpenCart, специально разработанной для интернет-магазинов.
- Тема полностью адаптивна и хорошо работает на мобильных устройствах – планшетах и смартфонах.
- Оптимизация под SEO.
- Широкие возможности для кастомизации.
- Возможность создания мультиязычной версии сайта.
- Наличие горизонтального меню и вертикального меню на внутренних страницах.
- Возможность многоколонной верстки в 1, 2, 3 колонки.
- Возможность включения полного функционала интернет-магазина при необходимости.
Тему можно приобрести за 48 $. Демо-версия доступна по ссылке.
Обвинение отметило некоторые недостатки, которые будут устранены в новой версии сайта:
- Проблематично открывать фотографии в карточке товара. В шаблоне данная проблема устранена.
- На сайте не было корзины, в которую можно было бы добавить необходимые товары. В шаблоне предусмотрена покупка через корзину.
Давайте посмотрим, как выглядит главная страница сайта Oltek до и после переодевания в шабло
Для сайта oltek.ru мы подобрали тему Builder - Building & Construction WordPress Theme. Ее основные преимущества:
- Шаблон ориентирован на строительные компании.
- Имеет современный дизайн.
- Адаптируется под различные устройства – компьютер, планшет, смартфон.
- Работает на бесплатной CMS Wordpress.
- Хорошо кастомизируется.
- Имеет короткое время загрузки.
- Готова для дисплеев ретина.
- Имеет множество вариантов представления главной страницы и «шапки».
- Имеет круглосуточную поддержку 24/7.
- Тема оптимизирована под SEO.
- Разработана по последним тенденциям в CSS и HTML.
- Поддерживает кроссбраузерность.
Дело №3. «О создании лишних барьеров на пути пользователей»
podberi-sobaku.ru
Ответчик: сайт «Подбери собаку».
Обвинитель: Самое легкое, но и самое трудное дело в сегодняшнем заседании. Легкое – потому что самые незначительные нарушения. Тяжелое, потому что выступать против бездомных собачек – означает заработать репутацию самого жестокосердного человека в мире. Однако перейдем к сути претензии. Фильтр подбора четвероногого друга хорош, учтены практически все детали. Но на главной странице фильтр расположен на 3 «рабочем экране» и ниже. А расширенный фильтр вообще находится на отдельной странице.
Главная страница
Обвинение считает, что фильтр для поиска собаки должен быть расположен на первом «рабочем экране» главной страницы. То есть главная страница сайта «Подбери собаку» должна выглядеть так:
Страница «Каталог»
Кроме того, не хватает возможности выбора по породе. В фильтре данной опции нет, а текстовый поиск результата не дал, хотя искомая порода совершенно точно представлена на сайте.
Страница с результатами текстового поиска
Необходимо избавиться от всех препятствий на пути обретения бездомными собаками хозяев!
Адвокат: Господа! Принять в свой дом собаку из приюта – серьезное и ответственное решение, к которому необходимо подвести пользователя постепенно и последовательно. Удар «в лоб» на первом «рабочем экране» блоком подбора четвероногого друга не даст достижения желаемой цели. Пользователь просто не будет готов совершить целевое действие! Мой клиент – сайт podberi-sobaku.ru – намеренно сначала вводит посетителей в контекст, в проблему и только затем предлагает воспользоваться сервисом поиска.
Пожелание прокурора «добавить в фильтр породу собаки» звучит наивно. Сайт предлагает собак из приютов и в дар, а настоящие немецкие овчарки, как известно, стоят денег и приобретаются совсем в других местах. Конечно, на ресурсе представлены породистые собаки, которые оказались на улице, но таких явное меньшинство.
Обращаю внимание, что на сайте моего клиента представлена максимально полная информация о каждой собаке, включая внешность, здоровье, характер и воспитание. Вы легко можете связаться с человеком, у которого собака находится на передержке, или с представителем приюта для животных.
Карточки собак на сайте podberi-sobaku.ru
Уважаемый суд, прошу оправдать моего подзащитного по всем пунктам. Сайт podberi-sobaku.ru не оставит вас равнодушным!
Судья: Суд, рассмотрев в открытом судебном заседании «Дело о создании лишних барьеров на пути пользователей» в отношении сайта podberi-sobaku.ru, постановил ходатайство отклонить в виду отсутствия состава преступления и несостоятельности обвинений. Обвинителю же рекомендуется сменить гнев на милость, не вредничать и взять себе собаку из приюта.