Что такое удобный сайт. Часть 1
09.02.2015
Удобным для посетителей сайтом называется такой сайт, на котором получение и работа с информацией осуществляется удобным для них образом. Для этого необходимо выполнить два условия: первое – понятная и удобная навигационная структура для быстрого поиска информации, второе – информация удобна для восприятия. Удобство понятие относительное, и нагляднее всего его показать в сравнении. Оценим удобство двух известных интернет-магазинов, занимающихся продажей компьютеров и компьютерных комплектующих.
Первые экраны главных интернет-магазинов страниц показаны на рис. 1 и 2.
Рис. 1. Первый экран интернет-магазина Ф-Центр.
Рис. 2. Первый экран интернет-магазина НИКС.
Подача информации на этих страницах и, соответственно, удобство восприятия её разное. На странице Ф-Цент информация сгруппирована и выделена в хорошо различимые функциональные блоки. Это помогает фокусировать на них взгляд при поиске нужной информации. На странице НИКС используется “мягкий информационный удар” - достаточно популярный приём, использующийся для демонстрации того, как много всего есть на сайте. В данном случае это осуществляется в мягкой форме, но несложно найти и примеры агрессивной формы, когда на странице присутствует куча непонятных ярких и мелькающих баннеров, разноцветных рекламных областей с ярким фоном, и прочего, целью которых является одно – ”взорвать мозг” посетителей с целью их принуждения к совершению покупки кучи ненужных товаров. Посетители с развитой и устойчивой психикой к информационному воздействию и рекламе просто закроют “психоделичную и назойливую” страницу, а вот другие притягиваются к ней, как насекомые яркой лампой. Идеальный покупателей - это имеющий финансы, но не думающий приверженец бренда.
На странице Ф-Центр две хорошо видимые области с динамично изменяющейся информацией. Информационный баннер вверху, на котором показаны адреса магазинов, и большой информационный слайдер в центре страницы. У меня наработан навык фильтрации рекламы, поэтому на таких областях я автоматически не фокусирую внимание, но из-за большого их размера и относительно большого размера цветных областей они попадают в периферийную область зрения, вызывают состояние дискомфорта и раздражения. Верхний баннер навсегда хочется закрыть, потянув указателем мыши горизонтальную зелёную линию вверх. Но, к сожалению и ещё большему раздражению, этот функционал не реализован на странице.
А для устранения мельтешащего слайда из области зрения быстро щёлкаю на ссылке нужного раздела каталога слева от него (хотя хочется щелкнуть на любой ссылке, лишь бы мелькание быстрее исчезло с глаз). Кто-то, возможно, предположит, что у меня повышенная чувствительность и даже психологическая неустойчивость к динамичным картинкам. Да, клипы, бегущие строки, моргающие светодиодные светильники вызывают, возможно, больше негативных ощущений, чем у других, но не могу сказать, что любая динамика изображений вызывает у меня дискомфорт. С другой стороны, если посетитель пришёл на страницу не в первый раз и с определенной задачей найти определённую информацию, то посторонние картинки лишь отвлекают его внимание. Для чего посетителям цветомузыка из появляющихся адресов магазинов, если эту информацию без труда можно получить на странице контактов? Для чего слайд-шоу акций и новинок, если информацию о них можно увидеть в соответствующих новостных разделах? Было бы неплохо реализовать функцию отключения баннера и слайдера на странице.
Информация существует во времени, и при использовании ограниченных областей для её отображения - экран, часть экрана, табло и т.п. острее ощущается последовательность информационного потока и зависимость его от времени. Cколько времени посетитель готов тратить на неё восприятие в контексте сайта? В разных ситуациях по-разному, но можно сказать, что больше бегущие строки раздражают ощутимо сильнее, чем экраны, а при первом посещении страницы посетитель готов затратить немного больше времени, так как он попадает в пока неизвестный ему информационный контент и нужно сначала осмотреться и понять, куда он попал. С опытом навык ориентирования развивается, а нетерпимость к задержкам появления нужной информации или мельканиям ненужной возрастает.
На странице НИКС раздражающих баннеров и слайдеров нет. Есть небольшая динамичная картинка с изменяющимся ростом курса чего-то и прокручивающийся текст под заголовками разделов каталога в центре страницы, которая не так сильно раздражает, как слайдер на странице Ф-Центр, но также напрягает. Для чего нужна прокрутка текста? Чтобы пять минут смотреть на неё и поразиться, как же много всего в разделе? Если нужно показать информационное наполнение, то практичнее не вываливать её в кучу, а упорядочить информационную структуру и сделать навигацию по ней более удобной. Тогда посеитель задержится и со временем поймет, что на сайте действительно много информации, которая ему может потребоваться сейчас и в будущем. Здесь же мы видим и статичный баннер вверху страницы, разделы сайта слева, рекламные блоки справа, разделы каталогов в центре, фотографию какого-то падающего дома, курсы валют справа и др. На что смотреть, что главное на странице, в какой последовательности воспринимать информацию? Оформление информации должно помогать посетителям в её восприятии, а не усложнять его. При разметке главной страницы НИКС используется многоколоночная портальная верстка, но информация на странице воспринимается как куча непонятного текста, в котором текст перемешан с ссылками и зрительно от них не отличается. Функциональные области на странице размечены, но помимо разметки их нужно ещё и выделить понятным для посетителей образом, как на странице Ф-Центра.
Разница в удобстве восприятия информации на этих страницах будет ещё более заметным, если открыть их в браузере.
Если говорить в целом, то обе страницы меня, как посетителя, напрягают: Ф-Центр - баннером и слайдером, НИКС – сплошным и непонятным массивом текста. При этом навигационная и информационная структура на сайте Ф-Центр ощутимо удобнее, чем на НИКС. Не сочтите за рекламу, но сайт Ф-Центр отличается от многих других интернет-магазинов продуманностью мелочей. Есть отдельные моменты, которые вызывают вопросы, но то, что сотрудники интернет-магазина стараются его сделать более удобным для посетителей не вызывает сомнений. Поэтому на НИКС захожу лишь изредка, чтобы посмотреть информацию о товарах, которой нет на сайте Ф-Центра.
Если прокрутить главные страницы в браузере, то нетрудно заметить, что их разметка и верстка на Ф-Центр выполнена так, чтобы блок информации полностью помещался на экране монитора при наиболее распространенных разрешениях. Благодаря этому происходит порционное отображение информации, что удобно для фокусирования внимания. Подобная верстка экранами позволяет более эффективно использовать область первого экрана, поместив в неё всё самое важное. Без учета этого момента может получиться так, что шапка и навигация займут большую часть экрана по вертикали, а из описания товара будет видно лишь его название. Посетителю придётся прокручивать экран для просмотра информации, что является лишним и действием. Прокрутить одну страницу не сложно, а представьте, что нужно посмотреть несколько десятков позиций и приходится каждый раз выполнять эту ненужную рутину.
Сайты – это относительно простые приложения и степень удобства их часто проявляется на уровне базовой функциональности, когда необходимо выполнить последовательность одних и тех же действий. Предположим, что для получения информацией на одном сайте нужно выполнить два щелчка, а на другом три. Сделать два или три щелчка не сложно, но при просмотре 10 описаний в первом случае нужно сделать 20 щелчков, а во втором 30, то есть на 50% больше! В качестве грубой аналогии представим ситуацию: в одном случае нужно нести рюкзак весом 5 кг, а в другом 7,5 кг. В чём разница? В том, что во втором довесок в 2,5 кг – ненужные камни.
На НИКС используется сплошная верстка и нетрудно убедиться, что это менее удобно для восприятия информации. Щелкнем ради интереса на ссылке ”Компьютеры, ноутбуки и планшеты” на странице Ф-Центр и “Компьютеры, Моноблоки, Микрокомпьютеры” на странице НИКС.
Рис. 3. Область оглавления разделов каталога Ф-Центр.
Рис. 4. Страница оглавления разделов каталога НИКС.
В случае Ф-Центр мы путем автопрокрутки попадаем в блок каталога товаров на этой же странице, а в случае НИКС на страницу оглавления выбранного раздела. То есть, в первом случае прокрутка экрана, во втором – загрузка новой страницы. При этом верстка страницы НИКС съехала.
Помимо перечня разделов каталога на странице Ф-Центр больше ничего нет. Благодаря этому внимание посетителей фокусируется только на нём. На странице НИКС перечень разделов относительно небольшой и при просмотре левой колонки взгляд постоянно съезжает на расположенную левее навигационную область и крупные пиктограммы соцсетей.
При вертикальной навигации на сайте иногда подменю делается выпадающим вправо. Признаться, мне не попадалось удобная реализация такой навигации. В большинстве оконных приложений навигация выполнена с выпадением подменю вниз, благодаря чему пользователи привыкают к движениям мыши по вертикали. Другая проблема связана с тем, что реализация всплывающих панелей подменю в Интернете реализована не так, как в оконных приложениях, что меня и многих пользователей напрягает весьма серьёзно. В оконных приложениях подменю появляется и исчезает по команде (щелчок мыши, нажатие горячей клавиши или клавиши Esc), а на сайтах область подменю появляется при наведении указателя мыши на ссылку, а исчезает при выведении указателя мыши за пределы области. Область подменю делают впритык к тексту, что логично, но часто даже опытные пользователи промахиваются мимо ссылок подменю, и оно закрывается, что естественно сильно раздражает. А в случае использования горизонтально выпадающего меню с длинными ссылками всё усложняется на порядок, так как пользователь помимо непривычных движений рукой может ещё и крутануть колесо мыши и основательно вылететь из навигации вниз страницы.
К сожалению, web-сообщество нередко старается искусственно уйти от ”надоевших и корявых” наработок традиционного программирования, в результате чего мы вынуждены приспосабливаться к корявым и неудобным в работе элементам навигации на страницах. С одной стороны, желание упростить взаимодействие посетителей с информацией на сайтах находит отклик в наших сердцах, но для чего упрощать усложняя? В чем ухудшение? Посетителей заставляют точнее позиционировать курсор.
Разработчики интернет-магазина Ф-Центр знакомы с данной проблемой, поэтому предложили любопытное альтернативное решение. Поначалу это решение сильно раздражало, так по логике должен был загрузиться выбранный раздел, а вместо этого происходит автопрокрутка в каталог. Но по сравнению с неудобной работой выпадающих подменю это терпимо.
Copyright © 2016