Психология юзабилити: влияние пользовательских установок на восприятие интерфейса

• Блог компании ALEE Software

Споры рационалистов и эмпириков об источнике человеческого знания являются одной из интереснейших страниц в истории философии и психологии. В наше время открытия в области частных наук (нейрофизиологии, когнитивной психологии, лингвистики, исследований искусственного интеллекта и т. п.) заставляют вновь обратиться к данным дискуссиями и посмотреть на традиционные проблемы с неожиданной стороны.
Под эмпиризмом понимается позиция, согласно которой ключевым источником человеческого знания является чувственный опыт. По выражению английского философа 18 века Джона Локка, одного из самых известных приверженцев эмпиризма в философии и психологии, человеческое сознание представляет собой «чистую доску» (tabula rasa), на которую наносятся метки чувственных впечатлений. Интеллект не оказывает никакого влияния на чувственное восприятие; его функции сводятся лишь к обобщению полученных в чувственном опыте данных.
В противоположность эмпиризму рационализм основным источником познания полагает разум. Философы и психологи, стоящие на позициях рационализма, считают, что человеческий разум вовсе не является «чистой доской»: на наше восприятие вещей могут оказывать влияние как врожденные компоненты, так и предшествующий опыт. Экспериментальная психология ХХ века показала, что наше чувственное познание всегда определенным образом ориентировано. Воспринимая новые вещи, мы всегда интерпретируем их на основе целой системы предрассудков и предмнений. Для иллюстрации высказанных тезисов можно, например, сравнить, как одно и то же событие освещается в выпусках новостей на разных телеканалах: на один и тот же визуальный ряд накладываются различные тексты, создающие у зрителей установку, на основе которой осуществляется интерпретация видимого.

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

«Я знаю, где это должно находиться»

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

Поле для ввода логина и пароля в правом верхнем углу на сайте Mint.Com.

«Я знаю, как это должно выглядеть»

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

«Я знаю, как это должно работать»

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

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

«Я знаю, как это должно называться»

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

На сайте Techi.Com, публикующем новости мира высоких технологий, ссылка Contact us (Свяжитесь с нами) присутствует внизу каждой страницы.

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

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

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

Правило 7+/-2
Наша кратковременная память может содержать одновременно от 5 до 9 понятий, ведь возможности мозга по обработке информации не безграничны. Этот факт является результатом исследований Джорджа Миллера и используется при обосновании необходимости сократить количество объектов навигации меню до 7.

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

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

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

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

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

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

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

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

Человек не любит неопределенности и недоговоренности. Люди стараются как можно быстрее находить ответы на возникающие вопросы. Именно на этой особенности и основан эффект неопределенности. В 1927 году психолог Блюма Зейгарник проводила интересный эксперимент: собрав в одной комнате людей, им дали задачи для решения. Сославшись на недостаток времени, незаконченные работы забрали. После опроса выяснилось, что люди запомнили именно недоделанные задачи.

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

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

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

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

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

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

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

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

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

Что собой представляют главные принципы Usability? На этот и многие другие вопросы вы найдёте ответы в статье. Принципами «Юзабилити» называют общепринятые взгляды на взаимодействие с дизайном, которые ввёл Нельсен Якоб (основоположник «Юзабилити»). Эти воззрения, скорее, являются набором правил, а не жёсткими руководствами, поэтому их именуют «Эвристиками». Всего таких принципов существует десять.

Видимость статуса

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

Эффективность

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

Свободный выбор

Что собой представляет третий принцип Usability? пользовательское управление, которое необходимо, чтобы клиент всегда мог контролировать ситуацию. К примеру, если человек заполняет форму, он всегда должен видеть кнопку «очистить форму». А если в ней несколько шагов предусмотрено? Пользователь должен всегда иметь возможность вернуться к предыдущим пунктам или пропустить какой-нибудь из них, чтобы немного позже повторить действие.

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

Стандарты

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

Профилактика ошибок

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

Это касается и кнопок. К примеру, предложение «Принять» обычно делают ярче и крупнее, чем просьбу «Очистить форму». Вы должны подсказывать известные вам сведения о вводимой информации (код региона, формат телефона и так далее).

Упрощение

Шестым принципом является правило «Выяснить проще, чем вспомнить». Упрощайте жизнь пользователям максимально, запоминайте ранее вводимые ими сведения (даже с их прошлых посещений сайта), делайте им подсказки. К примеру, если вы используете многошаговую систему регистрации, показывайте человеку уже заполненные поля, если они пригодятся ему в будущем.

Гибкость

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

Дизайн

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

Аналогично нужно создавать формы: нельзя спрашивать у пользователя данные, которые вам не нужны. К сожалению, этой позицией почти никто не пользуется. Для того чтобы лишь поздравить с именинами или Новым годом, у клиентов в 90% случаев требуют предоставить и дату дня рождения, и домашний номер телефона, и мобильный, e-mail и даже адрес.

Помощь

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

Поддержка

Почему главные принципы Usability так важны? Давайте рассмотри десятый принцип, который называется «Документация и помощь». Материалы и поддержка должны быть простыми и понятными, легкодоступными, соответствовать целям пользователя. Вдобавок документация не должна быть объёмной. Необходимо, чтобы она содержала чёткие шаги. Если материалы слишком большие, можно сделать краткую навигацию для быстрого перехода по разделам, а также поиск по поддержке.

«Юзабилити»

Итак, мы рассмотрели главные принципы Usability. Но что же это за дисциплина? «Юзабилити» является мерой качества пользовательского опыта, полученного при взаимодействии с системой или продуктом. К примеру, это может быть программное приложение, веб-сайт или что-нибудь иное.

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

Известно также, что Forrester Research получил некоторые цифры, которые показывают суммы убытков, появившихся из-за некачественного «юзабилити» сайтов. Сетевые магазины теряют около 50% клиентов, которые не могут найти необходимый продукт. Примерно 40% пользователей не желают возвращаться на сайт, с которым им не понравилось работать.

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

Создание

Что такое разработка Usability? Принцип её заключается в методологическом подходе к созданию сайта или любого иного пользовательского интерфейса. Такая разработка состоит из нескольких методов, которые в процессе используются последовательно:

• сбор требований;
• создание и анализ прототипов;
• оценка противоположных вариантов дизайна;
• изучение вопросов пользователей;
• предложение решений и анализ сайта (либо любого иного интерфейса).

Тестирование

А что такое тестирование Usability? Принцип этого нюанса не каждый знает. Вообще, он является частью процесса создания «Юзабилити». В типичном тесте человеку необходимо выполнить несколько задач с помощью прототипа (или иной системы). Во время работы наблюдатель записывает, что говорит и делает пользователь. Как правило, такой тест проводится с одним или двумя людьми, действующими совместно.

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

Шаги дисциплины

Из каких шагов состоит «Юзабилити»? Для планировки веб-сайта сначала нужно понять, для чего вы его разрабатываете, для кого, зачем и когда ваши читатели будут посещать ваш ресурс. Если вы ответите на эти вопросы, то выявите назначение своего сайта. Определённые цели зависят от аудитории веб-узла и вашей организации.

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

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

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

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

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

Составляющие

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

У «Юзабилити» имеется пять количественных составляющих:

• Эффективность: после ознакомления пользователей с дизайном, как быстро они выполнят то же задание?
• Обучаемость: насколько легко люди могут реализовать базовые задачи, впервые используя незнакомый им интерфейс?
• Ошибки: сколько погрешностей делает человек, насколько они серьёзны, легко ли он может их исправить?
• Запоминаемость: если пользователь вернулся к интерфейсу через определённый период времени, удастся ли ему восстановить свои навыки работы с ним?
• Удовлетворённость: до какой степени человеку приятно пользоваться данным интерфейсом?

Кроме «Юзабилити», существует ещё множество иных важных качественных признаков дизайна. Одним из ключевых является полезность. Этот признак описывает функциональность технического решения и определяет полезность интерфейса пользователям. «Юзабилити» и практичность одинаково важны: зачем пользоваться удобной программой, если она даёт не тот результат, который вам необходим? Плохой считается и та программа, которая гипотетически работает так, как вам нужно, но вам не нравится её сложный интерфейс. Для анализа полезности проекта можно пользоваться теми же средствами, что и при изучении качества его «Юзабилити».

В Web-e «Юзабилити» считается необходимым условием выживания. Если с сайтом сложно работать, посетители с него очень быстро уходят. Если на главной странице веб-узла ясно и чётко не указано, чем занимается предприятие, какие задачи ресурс позволяет выполнить, пользователи будут искать другой веб-узел. Люди уйдут также, если сайт запутан, информация на нём трудна для понимания и не отвечает на их ключевые вопросы.

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

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

Увы, я не нашел ни одной статьи на русском (или украинском) языке, где бы они раскрывались. А посему, я решил, что стоит все-таки перевести и немного расшифровать эти самые принципы.

Итак, 10 общепринятых принципов юзабилити. Рассмотрим их более подробно.

1. Видимость статуса системы.

Этот принцип означает, что пользователь ВСЕГДА должен знать, что происходит и на каком участке пути он остановился. Если это сложная регистрация, указывайте, что это 2 шаг из 3. Если что-то закачивается или работает какой-то скрипт – выводите % обработки. И т.д.

Простой пример – уверен что каждый сталкивался с ситуацией, когда вы по какой-то иконке кликнули, но ничего не происходит. Судя по тому, как активно крутиться винт и мигает монитор – что-то все-таки происходит, и через несколько минут открывается окно программы, например (у меня так до сих пор открывается ИЕ). А что делать в интернете, когда все грузиться не на вашем компьютере, а на сервере в другой стране. Большинство пользователей просто несколько раз нажимают на кнопку «отправить», загружают одни и те же файлы несколько раз и т.п. А все потому, что отсутствует эта самая связь между пользователем и системой.

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

И еще одна граничная цифры – 10 секунд. Пользователь должен получить то, что он хочет в течении 10 секунд после своего действия (например, просматривая результаты поиска, пользователь открыл 5 окно. Затем быстро просматривает каждое из них. Если после того как он открыл окно в течении 10 секунд он туда не вернулся – считайте что он для вас потерян).

(цифры сам не проверял и не придумывал, взято с книги).

(это пример из Контакта. При загрузке фотографий вы видите процесс и оцениваете, сколько еще осталось ждать).

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

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

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

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

3. Пользовательское управление (свобода выбора)

Пользователь всегда должен контролировать ситуацию, так сказать держать руку на пульсе (ну или как минимум у него должно создаваться такое впечатление). Что это означает на практике? Например, при заполнении формы обязательно должна быть кнопка «очистить форму». Если форма предусматривает несколько шагов – пользователь должен вернуться на предыдущий шаг, или наоборот, по возможности – пропустить какой-то, чтоб попозже вернуться к нему.

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

(при создании проекта в Сеолибе, вы видите, на каком этапе находитесь, сколько еще осталось. Так же вы можете вернуться к предыдущему шагу, или пойти дальше, пропустив этот).

4. Последовательность и стандарты.

Еще один принцип, который кажется очевидным, но увы – так редко используемый на практике. Скажите, вы легко можете в интерфейсе любой Офисной программы Микрософт можете создать новый документ? Сохранить его? Отцентрировать текст? А ведь это не всегда такие простые операции…

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

В интернете уже есть определенные устоявшиеся обозначения и стандарты (например, вид корзины, контакты в верхнем углу и т.д.). Тем ни менее, если вы посмотрите, сколько разных видов корзин (по Яндекс или Гугл картинкам), вы поймете, что неопытный пользователь может серьезно заблудиться среди всех этих тележек, электронных корзин, ультра-модных пакетиков и т.д.).
Что же касается последовательности – то выбрав какой-то определенный стиль – соблюдайте его везде. Это касается и шрифтов, и картинок, и текста и верстки.

Я много раз видел, как расположение товара и верстка страницы отличалась в разных разделах. Создатели сайта считают это «креативной фишкой». Если они делают его для себя – то можно так и оставить, но если вы делаете это для пользователя, то как вы ему объясните, почему дизайн страницы при выборе принтера должен так сильно отличаться от дизайна страницы выбора оперативной памяти (в рамках одного и того же магазина)?

(как видно в этом примере, все иконки совершенно одинаковые в Ворде, Экселе и PP. Осваивая какой-либо новый продукт компании Микрософт, минимум половина функций вам сразу будет понятна).

5. Профилактика ошибок.

Этот принцип гласит, что ошибку проще предупредить, чем исправить. Везде, где можно упростить выбор и убрать ненужные, случайные действия – следует убрать.
На практике это может быть: подсказка при вводе с клавиатуры чего бы то ни было (города/страны например).

Это касается и кнопок. Например, ПРИНЯТЬ, обычно делают крупнее и ярче, чем Очистить форму. Если вам что-то известно о вводимой информации – подсказывайте ее пользователю (формат телефона или код региона) и т.д.

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

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

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

(подсказка региона выскакивает при вводе хотя бы одной буквы. И если пользователь не знает, как правильно пишется город – он просто кликает по одному из предложенных вариантов).

7. Гибкость и эффективность использования.

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

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

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

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

8. Эстетический и минималистический дизайн

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

К сожалению, этим принципом практически никто не пользуется. В 90% случаев при регистрации вас спрашивают и домашний телефон, и мобильный, и адрес и e-mail, и даже дату рождения. А все для того – чтоб поздравить вас с новым годом и днем рождения.

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

Точно так же, на сайте (или в программе, эти принципы универсальны), не стоит выводить пользователю ту информацию, которая может быть когда-нибудь ему понадобиться. Например, возьмем тот же Микрософтовский Ворд. Скажите, как часто вы пользуетесь функцией «навигатор» или в вставкой Дата-Время? А тем ни менее, эти кнопки всегда на виду в тулбаре (в зависимости от версии кнопки могут быть разными, но я уверен что если вы посмотрите на них, вы найдете минимум 40% иконок, которыми вы НИКОГДА не пользовались, и даже не знаете что они делают).

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

9. Помочь пользователю понять и исправить ошибку.

Скажите, что означает ошибка базы данных в строке 433? Или длинные жуткие ошибки в строке памяти LXR-XXX-5438645?
Все эти системные сообщения должны сохраняться в логах для администратора сайта/системы. Пользователю же пишите нормальным языком, в чем конкретно ошибка. Более того, пользователя по сути интересует только одно: виноват он или система? И можно ли что-то сделать?

Уверен, что у вы сталкивались с тем, что заполняете форму, нажимаете отправить, а вам в ответ какая-то ошибка базы данных. И ты сидишь и мучаешься двумя главными вопросами: кто виноват и что делать? Ушла ли форма? Если да, то вся ли информация? Или попробовать отправить еще раз?

Хотя все же такие серьезные ошибки встречаются все реже. Но другой вариант бесит еще больше – ты заполняешь довольно длинную форму, нажимаешь отправить и видишь красную надпись (или всплывающее окно) – внимательно заполните все поля, отмеченные звездочкой.
И снова ты сидишь и думаешь – какие поля? Какой звездочкой? Вроде бы я все заполнил, внимательно просмотрел… а потом оказывается что там номер телефона надо написать с пробелами, а не дефисом.

Юзабилити (англ. usability - дословно «возможность использования», «способность быть использованным», «полезность») - понятие в микроэргономике, обозначающее итоговый уровень удобности предмета для использования в заявленных целях. Термин имеет связь с понятием «эргономи́чность», но в отличие от последнего меньше ассоциируется с технической эстетикой, с внешним видом и более привязан к утилитарности «юзабельного» объекта.
Официальное определение
Международный стандарт ISO 9241-11 определяет юзабилити как «степень, с которой продукт может быть использован определёнными пользователями при определённом контексте использования для достижения определённых целей с должной эффективностью, продуктивностью и удовлетворённостью» (англ. «the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use»). При этом относительная важность всех трёх аспектов определяется этим самым контекстом. Юзабилити - это мера качества пользовательского опыта, приобретенного при взаимодействии с продуктом или системой, например, веб-сайтом, программным приложением и т.п. Юзабилити - это комбинация факторов, которые оказывают влияние на пользовательский опыт. Факторы следующие:

Почему юзабилити так важно?

Исследования User Interface Engineering, Inc показывают, что в 60% случаях люди не могут найти информацию в вебе, которая им нужна. Это приводит к потере времени, снижению производительности труда, а также к тому, что пользователи больше не вернутся на сайт. Другие источники говорят: Forrester Research получил некоторую цифры, которые показывают, сколько теряют компании из-за плохого юзабилити сайтов. Интернет-магазины теряют порядка 50% покупателей, которые не могут найти нужный товар. Около 40% пользователей не возвращаются на сайт, с которым имели негативный опыт работы. Якоб Нильсен говорит: «Изучение поведения пользователей в вебе показывает, что они плохо воспринимают медленные сайты и сайты со сложным дизайном. Люди не хотят ждать. Также они не хотят изучать, как пользоваться домашней страницей. Не существует таких вещей, как обучение веб-сайту или инструкция по веб-сайту. Люди хотят ухватить функциональность сайта сразу же после беглого сканирования страницы, то есть за несколько секунд».

Разработка Юзабилиити

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

Тестирование Юзабилиити

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

Шаги Юзабилити

• Начало - планируем веб-сайт
  • Для начала надо понять:
    • Зачем вы разрабатываете сайт
    • Кто должен посещать ваш сайт
    • Когда и зачем эти люди могут посещать сайт.

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

• • Кроме того, вы должны подумать о целях юзабилити сайта. Общие цели говорят о том, что сайт должен быть:
    • Простым в обучении
    • Эффективным в использовании
    • Легким для запоминания при последующих посещениях
    • Удовлетворяющим пользователя

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

• Собираем данные от пользователей

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

• Разрабатываем прототип

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

• Собираем, пишем и изменяем контент

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

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

Правило 7±2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сгиб (Fold)

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

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

Graceful Degradation, Fault-tolerance

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

Granularity

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

Hotspot

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

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

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

Minesweeping

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

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

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

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

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

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

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

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

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

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

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

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

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

Walk-Up-And-Use Design

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

эффективно использовать его без предварительного обучения или инструкций.

Wireframe

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