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

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

Правила и принципы юзабилити

Правило 7±2

Возможности мозга по обработке информации не безграничны, в соответствии с результатами исследования Джорджа Миллера кратковременная память может одновременно содержать от 5 до 9 сущностей. Этот факт часто используется при обосновании необходимости сократить количество элементов в навигационных меню до 7, что вызывает горячие дебаты¹, поскольку не совсем ясно, как это правило должно применяться в веб. [Miller’s studies²]

Правило 2-х секунд

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

Правило 3-х кликов

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

Правило 80/20 (Принцип Парето)

Заключается в том, что 80% эффекта получается в результате 20% действий. В бизнесе это правило часто применяется в виде: «80% продаж приходится на 20% клиентов». В веб-дизайне и юзабилити это правило работает не менее эффективно. К примеру, значительно улучшить отдачу сайта можно определив 20% пользователей, заказчиков, действий, продуктов или процессов которые дают 80% прибыли и обратив на них особое внимание при разработке.

Восемь золотых правил для разработчиков интерфейсов

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

1. Стремитесь к логичности
2. Для опытных пользователей должен быть быстрый способ (сокращения, горячие клавиши, макросы)
3. Должна быть информативная обратная связь
4. Диалог должен быть законченным
5. Обработка ошибок должна быть простой
6. Должен быть простой способ отмены действий
7. Пользователь должен чувствовать, что все под его контролем
8. Как можно меньше загружайте кратковременную память

Подробнее о правилах Шнейдермана можно узнать из Wikipedia: Shneiderman’s rules for design³.

Правило Фиттса

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

Перевернутая пирамида

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

Удовлетворенность

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

Психология в юзабилити

Синдром утенка (Baby-Duck-Syndrome)

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

Баннерная слепота

Пользователи игнорируют все, что похоже на рекламу, и что интересно, делают это весьма эффективно. Хотя рекламу замечают⁵, ее все равно всегда игнорируют⁶. У пользователей выработаны довольно-таки четкие схемы, которым они следуют, выполняя в веб различные действия: в поисках необходимой информации они фокусируют внимание на тех частях страницы, где эта информация может быть расположена — на основном тексте и гиперссылках. Большие, красочные, анимированные баннеры в этом случае полностью игнорируются.

[487x427]⁶
Источник: Banner Blindness: Old and New Findings⁶
Перевод: Пользователи не видят баннеров⁷

Эффект неопределенности (Эффект Зейгарник)

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

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

Гештальт принципы восприятия форм

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

Закон близости утверждает, что когда мы видим набор объектов, объекты, расположенные ближе друг к другу, мы распознаем как группу.

[331x248]⁹
Реальный пример действия закона близости c MTV Music Awards 2002. Источник⁹.

Закон сходства утверждает, что сходные объекты человек подсознательно группирует.

The Law of Prägnanz утверждает, что один и тот же объект может играть важную роль в одном визуальном поле и быть частью фона в другом.

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

Закон симметрии утверждает, что мы склонны воспринимать симметричные объекты как один объект.

Закон смыкания утверждает, что люди склонны объединять объекты, которые на самом деле едиными не являются.

⁹
В логотипе IBM мы видим буквы I, B, M хотя на самом деле там есть только линии различной длины. Источник⁹.

Подробнее эта тема раскрыта в статье Gestalt principles of form perception⁹.

The Self-Reference Effect

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

Термины и концепции

Отслеживание взгляда (Eye-Tracking)

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

[478x382]¹¹
Пример результата отслеживания взгляда. Источник¹¹.

Сгиб (Fold)

Сгиб — это линия, проходящая на уровне нижней границы окна браузера, все расположенные ниже нее элементы страницы не видны без прокрутки. Уровень этой линии зависит от разрешения монитора посетителя. На элементы, расположенные выше сгиба, обычно приходится больше кликов и внимания пользователей, и как следствие, больше прибыли, но существуют и противоположные мнения¹². [Usability.gov¹³]

Подсказки (Gloss)

Подсказки к ссылкам можно добавить с помощь атрибута title. Точное описание всех внутренних и внешних ссылок с помощью информативных подсказок и текста ссылки может улучшить юзабилити веб-сайта.

Graceful Degradation, Fault-tolerance

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

Granularity

Степень разделения большого объема сложных данных на небольшие модули.

Hotspot

Кликабельная область сайта, меняющая свое оформление после клика на нее. Это характерно для :focus-эффектов после клика на ссылку или другой элемент сайта.

[499x215]¹⁴
Hotspot и gloss на Smashingmagazine.com¹⁴

Разборчивость (Legibility)

Визуальная разборчивость текста.

Minesweeping

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

Мистическая навигация (Mystery-Meat Navigation, MMN)

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

Логичность (Physical consistency)

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

Прогрессивное улучшение (Progressive Enhancement, PE)

Стратегия разработки, при которой базовый функционал сайта доступен из всех браузеров, а для пользователей современных браузеров предусмотрены дополнительные возможности. Основное преимущество такого подхода в том, что он позволяет создавать сайты, удобные для пользователей с медленными соединениями или старыми браузерами, при этом предоставляя дополнительные возможности для пользователей со скоростными соединениями и современными браузерами. [Wikipedia¹⁵]

Читабельность (Readability)

Обозначает уровень понятности смысла текста, зависит от сложности предложений и используемых терминов. Обычно измеряется уровнем образования: необходимого читателю, чтобы понять текст. Читабельность и разборчивость — понятия разные. [Usability Glossary¹⁶]

Дизайн ориентированный на пользователя (User-centered design, UCD)

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

Бдительность (Vigilance, sustained attention)

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

Walk-Up-And-Use Design

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

Wireframe

Скелет сайта, который отражает идеи концепции и структуру будущего сайта. Может быть представлен в виде презентации, демонстрирующей заказчикам, особенности компоновки и функциональности сайта, а также возможные сценарии выполнения пользователями их задач. Обычно скелет не содержит визуальных элементов или готовой разметки сайта, но, возможно, в него будут включены черновики или скетчи. Пример¹⁷. [Glossary¹⁶, Wikipedia: Wireframes¹⁸ ]

[266x446]¹⁹

Инетересно было бы увидеть в комментариях ваши варианты перевода этих терминов, для некоторых я не нашел ничего подходящего.

Wireframes. Источник¹⁹.