ООО «Техническая документация. Wintobootic скачать русскую версию

yadobr 14 января 2014 в 09:10

Проектирование графического интерфейса пользователя

• Интерфейсы

Введение

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

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

Общие принципы

Какие ЭИ создать?

Какой должен быть дизайн ЭИ?

Как правильно расположить ЭИ на экране?

Как ЭИ должны себя вести?

В заключении

Литература

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

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

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

Общие принципы

Какие ЭИ создать?

Какой должен быть дизайн ЭИ?

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

Как правильно расположить ЭИ на экране?

Как ЭИ должны себя вести?

В заключении

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

Литература

Джеф Раскин , «Интерфейс: новые направления в проектировании компьютерных систем»
Алан Купер , «Об интерфейсе. Основы проектирования взаимодействия»
Алан Купер , «Психбольница в руках пациентов»

Часто пользователи домашних компьютеров и ноутбуков подключены к сети интернет через локальную сеть или модем. Но в современном мире у каждого есть кроме компьютера или ноутбука еще и другие устройства (планшет, смартфон), нуждающиеся в подключении к интернету. Одним из вариантов подключения нескольких устройств есть приобретение Wi-Fi роутера и подключение через него всех ваших устройств. Второй способ, если у вас есть встроенный или отдельный (например, USB-) Wi-Fi адаптер, можно программно организовать виртуальную точку доступа и подключить к ней все свои устройства. Для этого вам понадобится маленькая по размеру, но мощная по функциональности программа – Connectify .

Системные требования

Приложение работает на Windows 7 и 8+. Для нормальной работы вашей будущей точки доступа адаптер должен поддерживать Virtual Wi-Fi. В любом случае перед установкой программы рекомендую обновить драйвер вашего Wi-Fi адаптера до последней версии.

Базовая настройка

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

В первую очередь устанавливаем приложение на компьютер. При первом запуске следует сделать некоторые настройки, а именно: придумать имя вашей будущей точке доступа и ввести в поле "Hotspot Name", придумать пароль (8 – 63 символа) и ввести в поле "Password", выбрать сетевой интерфейс (сетевую плату, модем), через который вы получаете доступ в интернет, из списка "Internet to Share". Секцию "Advanced Settings" можно не трогать, если вы планируете раздавать интернет только по Wi-Fi.

Нажмите на кнопку "Start Hotspot" и сетевая плата Wi-Fi вашего компьютера превратится в беспроводную точку доступа.

Дополнительная настройка

Но на этом еще не все! Теперь вы можете подключиться телефоном или планшетом к вашей точке доступа и проверить наличие доступа в интернет. Если оно есть, вы счастливчик! Мне не повезло: я смог подключиться к компьютеру, но доступа к интернету я не получил.

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

Переходим на вкладку "Доступ" ставим галочку на опции "Разрешить другим пользователям сети использовать подключение к Интернету этого компьютера" соглашаемся с предупреждениями и из выпадающего списка выбираем виртуальный адаптер, созданный программой Connectify (обычно это "Беспроводное сетевое соединение 2").

Сохраняем настройки и переподключаемся к интернету на компьютере нажав напротив сетевого подключения к интернет "Отключение/Подключение".

Повторяем попытку соединения с интернетом на устройстве, подключенном к компьютеру по Wi-Fi. На этом шаге у меня получилось выйти в интернет как с ноутбука так и с телефона.

Но и это еще не все! Интернет может лагать и периодически пропадать. Для решения этой проблемы делаем следующее: в том же окне с сетевыми адаптерами заходим в свойства виртуального адаптера программы Connectify.

В открывшемся диалоговом окне нажимаем на кнопку "Настроить".

Переходим на вкладку "Управление электропитанием" и снимаем галочку "Разрешить отключение этого устройства для экономии энергии".

На этом можно считать, что мы настроили виртуальную точку доступа. Могут еще быть проблемы, связанные с блокированием программы "Connectify" разными файерволами антивирусов (Kasperskiy, Norton), включая встроенный в Windows Брандмауэр. В таком случае следует добавить программу в исключения или, как вариант, временно отключить фаервол.

Интерфейс – это некий «мост» между пользователем и системой. С помощью интерфейса пользователь сможет объяснить системе, чего он от неё хочет, а система это выполнит. Но что случится, если это понимание между машиной и человеком не будет достигнуто? Пользователь просто уйдёт с сайта. Вот так ведут себя интернет-пользователи по данным Online Marketing Institute:
— 85% могут уйти с сайта, если им не понравится дизайн интерфейса;
— 83% покинут сайт, если будут вынуждены делать много кликов, чтобы найти то, что им нужно;
— 40% никогда не вернутся на сайт, если им было трудно его использовать в первый раз.

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

Из статьи вы узнаете:

Хороший интерфейс должен:

1. Быть интуитивно понятным.

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

Интуитивно понятный интерфейс — это тот, в котором:
1) все элементы выстроены по принципам элементарной логики.
Возьмем для примера сайт с текстовым контентом (статьями). Его логический интерфейс будет таким:
— название сайта находится в самом верху страницы, под ним — краткое описание ресурса;
— ниже располагается меню с разделами сайта;
— блок с контактами и обратной связью в правой верхней части меню;
— статьи расположены в порядке их добавления на сайт;
— в конце каждой статьи есть кнопки “следующая” и “предыдущая”;
— кнопки категорий всегда должны быть на виду, чтобы можно было в любой момент перейти в другой раздел;
— правила сайта, подробная контактная информация, данные о разработчиках и т.д. располагаются в футере сайта, так как именно там их всегда и ищут.

Не запутывайте пользователя нестандартным расположением привычных блоков, а используйте проверенные принципы. Блог маркетолога Heidi Cohen структурирован понятно и логично:

Вот пример из интерфейса программы. Даже там, где значки не подписаны, вполне понятно, что они могут означать. Кнопки расположены в порядке логики — ведь каждому интуитивно понятно, что после кнопки “пауза” должна следовать кнопка “стоп”, и т.д.

2) кнопкам присвоены понятные обозначения.
Избегайте кнопок, изображение на которых может ввести в заблуждение пользователя. Не нужно изобретать велосипед. Большой знак вопроса сразу же говорит пользователю о том, за ним скрывается какое-либо руководство или помощь. Лупа — это всегда форма поиска на сайте.

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

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

3) есть помощь пользователю, если он “заблудился”.
Если пользователь попал на страницу 404, сразу же на ней дайте ему кратенькую инструкцию о том, что он может сделать дальше. Например, предложите ему вернуться в предыдущий раздел и поискать нужную информацию там.

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

И один наглядный пример:

2. Быть предсказуемым.

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

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

Еще несколько примеров. Если сделаете кнопки объемными, они будут больше выглядеть именно как кнопки, поэтому кликать на них будут с большей вероятностью:

А переключатель on/off понятно выглядит, когда сделан вот так:

Один из самых больших страхов дизайнеров — это то, что их сочтут неоригинальными. И поэтому они часто избегают использования техник, которые давно проверены на эффективность и работают, в пользу создания “чего-то нового и креативного”. Заниматься открытым плагиатом, конечно, не нужно. Но использовать уже знакомые пользователям модели построения интерфейса — это верный способ сделать его предсказуемым. Какие ресурсы чаще всего использует ваша целевая аудитория? Facebook, LiveJournal, Twitter, Amazon, Youtube? Используйте похожий стиль и в своем интерфейсе, чтобы они смогли почувствовать себя в привычной обстановке. Например, если вы ориентируетесь на Youtube, сделайте главное меню вертикальным и поместите его слева страницы, а строку поиска разместите по центру сверху.

3. Быть минималистическим.

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

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

4. Быстро загружаться.

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

Чтобы ваш сайт стал быстрее быстрого, используйте эти советы: 8 способов .

5. Показывать все важные опции.

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

Пример того, какое выпадающее меню может иметь право на жизнь.Здесь при наведении курсора открываются подразделы в разделах меню, и это вполне удобно. А вот, например, кнопка “Контакты” видна сразу же, без дополнительных наведений.

Кнопки для предпочтительных действий пользователей должны выделяться на фоне других. Здесь такая кнопка “Добавить в корзину”.

6. Уметь общаться с пользователем.

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

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

7. Иметь разные стили для кнопок с разными типами действий.

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

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

На этой странице сразу понятно, что мы находимся в разделе “Услуги” и он выделен красным цветом. Возвращаясь к пункту 5, отмечу, что тут целевое действие — покупка, поэтому кнопка “купить” выделена на фоне остальных и является объемной.

8. Быть привлекательным.

Функциональность и удобство — это хорошо, но есть еще и элементарное “красиво/не красиво”. Любому пользователю будет гораздо приятнее иметь дело с интерфейсом, который, ко всему прочему, еще и радует глаз.

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

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

9. Давать возможность персонализации.

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

В сервисе Trello можно поменять фон на другой цвет или изображение.

А вот так позволяет персонализировать свой аккаунт Twitter:

10. Быть лояльным к ошибкам пользователя.

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

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

11. Говорить на языке пользователя.

Весь текст интерфейса, любые обозначения должны быть созданы под целевую аудиторию ресурса. Тут всё очевидно: если вы делаете обучающий сайт для детей дошкольного возраста, то текст интерфейса должен быть написан на “детском” языке. Если у вас программа для продвинутых веб-мастеров, то вы смело можете использовать специфические термины без пояснения — целевая аудитория и так их знает. А если это сервис для новичков, то язык должен быть максимально прост.

12. Предоставлять оптимальное количество вариантов выбора.

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

Также это можно реализовать с помощью блока “Хиты продаж”, как показано на примере.

13. Давать мягкие подсказки.

Всплывающие подсказки — это очень хорошо. Они помогают пользователю до конца разобраться в том, в чем он не смог разобраться сам. Главный вопрос остается в том, как сделать такие подсказки эффективными и не напрягающими. Помните скрепку-помощника из ранних версий Microsoft Word? Компания отключила эту функцию именно из-за того, что она вызывала много негативных эмоций у пользователей и подвергалась критике.

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

14. Затемнять фон под модальными окнами.

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

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

15. Иметь короткие формы регистрации.

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

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

Посмотрите на пример. Форма слева показывает сразу все строки к заполнению и поэтому выглядит громоздкой. Заполнять такую форму очень не хочется. А в форме справа может быть ровно такое же количество вопросов, но они разбиты на “шаги”, поэтому не вызывают раздражения.

16. Иметь простые принципы заполнения полей.

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

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

2. Если пользователю нужно всё-таки вводить вручную свои данные, то используйте построчную проверку системой правильности заполнения формы. Никому не понравится, если система после каждой ошибки заполнения будет обнулять все строки, заполненные ранее.

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

4. Максимально снизьте вероятность неправильного заполнения формы.
Представьте себе ситуацию. Вы начинаете вводить в поле свой номер телефона. После первого заполнения система вам говорит: “Номер телефона должен быть введен в 10-значном формате”. Вы вводите еще раз, а система вам выдает: “Номер телефона не должен содержать дефисов”. И тут вы уже начнете нервничать и мысленно проклинать этот сайт (а может, и не мысленно). Идеальная форма ввода — это когда пользователь может написать в неё всё, что угодно, и система не скажет ему “неправильно”. Конечно, обработка данных будет несколько затрудняться, так как часть запросов вам придется обрабатывать вручную. Но ведь ваша главная цель — это принять заказ, а не отсеять нетерпеливых клиентов.

17. Предоставлять варианты удобного управления.

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

Как протестировать интерфейс на юзабилити?

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

Тестирование сможет решить все эти проблемы. Каким образом можно его осуществить?

1. Ручным способом.

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

2. Автоматизированным способом.

Такой способ тестирования проводится с помощью специальных программных средств, которые как бы подражают действиям живого человека при ручном тестировании. Для такого тестирования не требуется участие человека, поэтому скорость его выполнения повышается, а стоимость денежных затрат снижается. Есть тут одно большое “но”. Автоматизированное тестирование не может дать 100%-результатов, так как проводится оно только по формальным признакам (тем, которые вбиты в программу), и не предоставляет возможности найти дефекты юзабилити, которые могут быть восприняты только человеком (например, цветовая гамма интерфейса).

3. C помощью фокус-групп.

На мой взгляд, самый лучший метод тестирования в плане соотношения цена-эффективность. Проводится он следующим образом:
— набирается несколько фокус-групп, состоящих из ваших целевых пользователей. Разделять группы вы можете по разным признакам: зарегистрированные/незарегистрированные, постоянные/редкие пользователи, а также по разным демографическим показателям (которые вписываются в вашу ЦА);
— каждой группе даются задания совершить определенные действия на вашем сайте/сервисе/программе. Вы должны сказать испытуемым, что они должны сделать, но не говорите как. В этом и заключается суть тестирования — посмотреть, с помощью каких действий пользователи будут достигать своей цели.
— после всего этого вы анализируете, как именно испытуемые выполняли свои задания — куда они нажимали, по каким ссылкам переходили, быстро ли нашли желаемое и т.д.

Есть специальные сервисы, с помощью которых можно легко находить людей для проведения такого тестирования. Например, Askusers , Мудрый Тест , Usabilla .

Наглядный пример тестирования интерфейса пользователя

Для проведения тестирования юзабилити были привлечены пользователи, которые не очень часто пользуются Yelp. Им давались определенные задачи (например, зарезервировать столик в ресторане, подобрать отель для ночлега во время путешествия и т.д.), после чего анализировались их действия. Вот некоторые результаты тестирования:

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

Получилась вот такая:

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

А вот макет новой страницы:

Полную версию результатов этого тестирования смотрите .

И в заключение.

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

Станислав Жарков. Глава из книги «Shareware: профессиональная разработка и продвижение программ»

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

Одними из самых цитируемых в книгах по HCI являются десять так называемых эвристических правил известнейшего американского специалиста в области проектирования интерфейсов Якоба Нильсена (Jakob Nielsen), разработанных им совместно с другим исследователем, Рольфом Моличем (Rolf Molich). Формулировку этих принципов в оригинале можно прочитать по адресу http://www.useit.com/papers/heuristic/heHristic_list.html. Это десять главных заповедей любого разработчика компьютерных интерфейсов, т. е. минимальные критерии, которым должен отвечать интерфейс любой программы.