В поисках идеального интерфейса

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

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

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

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

На основании Eye-Tracking’а я протестировал 20 прототипов интерфейсов среди двухсот случайных респондентов. В результате тестирования было выделено три прототипа, которые наиболее эффективно способны решать следующие ключевые задачи интерфейса: они обеспечивают полное понимание структуры сайта в кратчайшие сроки и практически стопроцентное выполнение пользовательских сценариев. Итак, рассмотрим эти прототипы.

Прототип интефейса №1

picturePir1.jpg

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

Прототип интерфейса №2

pictPir2.jpg

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

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

Прототип интерфейса №3

PictPir3.jpg

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

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

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

Фото: pixabay.com

Расскажите коллегам:
Эта публикация была размещена на предыдущей версии сайта и перенесена на нынешнюю версию. После переноса некоторые элементы публикации могут отражаться некорректно. Если вы заметили погрешности верстки, сообщите, пожалуйста, по адресу correct@e-xecutive.ru
Комментарии
Генеральный директор, Москва

Все-таки было бы интереснее рассмотреть тип интерфейса в зависимости от типа продавца. Как лучше делать навигацию на сайте финансовой организации? Как лучше ее делать на сайте он-лайн магазина парфюмерии, к примеру. И так далее.

Юрий Максименко Юрий Максименко CIO, Украина

Честно говоря, у меня ощущение, что Василию Пирогову стоило бы, прежде чем начать писать -- почитать. Например, книги Якоба Нильсена.

Чтоб не нести фонарь средь бела дня.

Тема главной страницы уже раскрыта -- и закрыта. Уже лет десять как.

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

Консультант, Москва
Коллеги, Тут сообщество УПРАВЛЕНЦЕВ, или что? Давайте сюда ещё сопромат вынесем с ТММ, или статьи о технологии финишной отделке стен перед наклейкой обоев, или как заменить тормозные колодки своими силами. Для подобных статей свои ресурсы есть с соответствующей направленностью. И ''менеджеру'' (т.е. управленцу)технологические знания подобного рода... как бы помягче... не очень сильно нужны. Тем более что, как тут совершенно справедливо было отмечено выше, даже технологически - ничего нового, и для специалиста большая часть сказанного в статье - давно известные прописные истины.
Руководитель, Владивосток

Как специалист по юзабилити говорю - здесь не прописные истины. Здесь поиск истины, выдаваемый за Истину. Человек вдруг понял, что существуют ''глазные сигналы доступа'' и с помощью ее делает рэволюцию. Сам процесс поиска истины заслуживает уважения. Также как и максимализм юности. Другой вопрос, абсолютно согласен, что здесь, в Сообществе менеджеров, эта статья абсолютно не уместна. А вдруг Вам кто-нибудь поверит и закажет сайт штук на $30.000? А потом встретит другого человека, который на пальцах разяснят, что эти деньги были вбуханны в пионер бол. Да только за исключительную ориентацию на левое меню уже двойку по юзабилити можно ставить. А насчет контактов - Вы на сайте Президента Медведева попробуйте найти тему для отправки сообщений, что уж тут какая-то пицерия. Ей вообще сайт не нужон по большому счету. Мы эту тему с американцами еще в 1998 году обсасали.
Юный коллега, Вы пишите, пишите, тема актуальная. Но она не адекватная аудитории EХЕ, здесь спецы в HR, еBI технологиях, а не итишники. И Вы злоупотребляете их доверием. Надеюсь где подобные Вам ребята, открывающие велосипеды в инновационных технологиях тусуются, показывать не надо? На вскидку могу порекомендовать www.oborot.ru - там Ваша статья на ура пойдет.
Удачи.

Юрий Максименко Юрий Максименко CIO, Украина
Борис Яровой пишет: пионер бол
Давненько не слышал этого слова...
Генеральный директор, Уфа
Борис Зверев пишет: Коллеги, Тут сообщество УПРАВЛЕНЦЕВ, или что?
А мне статья понравилась. Ну нет у меня, у управленца, времени лазить в сопромат :-) Хочу поблагодарить автора за короткую статью с полезным контентом. А еще я порадовался, что наш сайт близок к варианту 2 или 3. :-)
Консультант, Москва
Рустэм Валеев пишет: Ну нет у меня, у управленца, времени лазить в сопромат
А надо? Может быть, ''пора прекращать эту порочную практику'' (с), когда только лично генеральный директор компании-заказчика выбирает предложенный дизайнером вариант дизайна сайта? Понятно, что если фирма из 2-3-5-10 человек, то деваться некуда. Да и то, личная ''вкусовщина'' порой заменяет научно обоснованные подходы. Ведь у врача мы не говорим, какую из предложенных таблеток будем пить - ''она по цвету и форме наиболее подходит под корпоративный стандарт''. Давайте надеяться, что как врач предложит НУЖНОЕ лекарство, ибо профессионал, так и что сайт делают профессионалы, потому сделают его грамотно. Если будет совсем плохо (в итоге) - проголосуйте ногами (соответственно, выбирая сайтостроителя - ориентируйтесь на портфолио и отзывы, не постесняйтесь позвонить представленным в портфолио заказчикам, спросите, понравилось ли, какое качество сайта, как шёл проект). Но вот зачем генеральному директору компании-заказчика изучать ''сопромат'' - что такое ''хлебная крошка'' и каковы веяния моды и требования юзабилити в отношении размещения на странице меню второго уровня... Не понимаю. Просветите? ;)
Юрий Максименко Юрий Максименко CIO, Украина
Борис Зверев пишет: Но вот зачем генеральному директору компании-заказчика изучать ''сопромат''
Но если зачем-то нужно -- разве не нужна разборчивость при выборе учебных пособий? Скажем, не стоит ли пропустить главную страничку сайта этой студии через валидатор? И увидеть 11 ошибок XHTML на достаточно незатейливой странице-заставке? Или это ерунда -- и знание веб-стандартов веб-студии ни к чему? Равно как и дизайнерам нормально делать тире дефисом (на той же стартовой странице)? Пусть такие профессионалы учат нас -- а мы будем внимать?
Консультант, Москва

Юрий,

То, что Вы говорите, должен знать ''сайтостроитель'', но не заказчик.

Если же за профессионалом надо перепроверять, причём для ''перепроверки'' заказчик должен сам стать чуть ли не экспертом в области, в которой заказывает проект (сайты, полиграфия, визитки, офисные перегородки, технологии передачи данных, отличия GPRS от edge, преимущества штрих-кода Aztec перед EAN и т.д.) - то какой же это профессионал?

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

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

Что же касается профессионализма ''учителей'', которым нам следует внимать, то совершенно с Вами соглашусь, есть большая опасность, что это те же самые ''профессионалы'', за которыми надо перепроверять. ''Не умеешь сам - иди учить других'' (с).
Но тут, увы, мы вряд-ли сможем предложить какой-либо фильтр - разве что администрация e-xe будет чуть жёстче относиться к отбору статей для раздела ''знания для менеджера''. Вплоть до создания отраслевых рецензионных советов при редколлегии - как это было в научных журналах. Либо совсем отказаться от публикации ''неуправленческого'' ликбеза на страницах портала. Либо ввести ценз на авторов - пусть публикуется не просто ''директор предприятия'' (много ума зарегистрировать фирму и назначить себя её директором не нужно), а сертифицированный эксперт. Остальных - в ''творчество без купюр'' и ''на правах рекламы''.

Юрий Максименко Юрий Максименко CIO, Украина
Борис, спасибо за развёрнутый ответ! По многим вопросам, которые Вы подняли, у меня, увы, нет аргументированного мнения. Например, насчёт ассоциаций -- у меня только эмоции. Я против ассоциаций -- но обосновать не могу. Мне вот думается, что если будет создана некая ассоциация веб-разработчиков -- это будут мерзкие склоки а-ля Союз Кинематографистов. Я не могу доказать, что иначе быть не может. Но я почему-то в этом уверен.
Борис Зверев пишет: Так или иначе, но ''каждый должен делать то, что он делать мастер'', и не надо переваливать с больной головы на здоровую - негоже владельцу бизнеса становиться экспертом по оценке профессионального уровня своих поставщиков
Согласен. Но ведь есть простые и объективные средства проверки качества сайта. Ну вот тот же валидатор. Для меня важный показатель -- как отреагирует предполагаемый поставщик на указание ошибок HTML на его сайте. Если он смутится -- я смог бы легко посмотреть на эти ошибки. Они случаются иногда даже у меня :) Но если начнёт говорить, что ''главное -- работает'' и ''у майкрософта тоже ошибки на сайте!'' -- я начну вежливо закруглять разговор. Кстати, тема актуальна -- мне придётся подрядить веб-студии для вёрстки бланков.
Борис Зверев пишет: Но тут, увы, мы вряд-ли сможем предложить какой-либо фильтр
Я верю в эффект от наших комментариев.
Оставлять комментарии могут только зарегистрированные пользователи
Статью прочитали
Обсуждение статей
Все комментарии
Дискуссии
Все дискуссии
HR-новости
РБК представил рейтинг работодателей 2024

Средняя заработная плата в компаниях — участниках рейтинга составила около 155 тыс. руб. в месяц.

Названы самые привлекательные для молодежи индустрии

Число вакансий для студентов и начинающих специалистов выросло за год на 15%.

Россияне назвали главные условия работы мечты

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

Власти Москвы заявили об отсутствии безработных в столице

При этом дефицит кадров наблюдается во всех отраслях.