.

Дизайн пользовательского Web-интерфейса

Вы наверняка хотя бы раз в жизни “терялись” на каком-либо Web-сайте. И это не уди- вительно, если на сайте нет четкой навигационной схемы, или плохо проработан дизайн последовательности переходов.

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

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

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

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

Диаграммы переходов

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

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

S Представьте исходный набор вариантов в виде раскрывающегося меню. После выбора какого-либо варианта содержимое страницы будет обновляться.

На первой странице авторизации создайте ссылку “Забыли пароль?”.

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

С помощью обратной связи предоставьте пользователям возможность контроля, на каком этапе выполнения задачи (например, 2 из 5) они находятся.

Следуем схеме переходов

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

Ниже приведено несколько общепринятых правил, которых следует придерживаться или хотя бы знать, прежде чем изобретать велосипед.

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

Кроме того, реализация поисковых функций предполагает наличие трех особенностей (рис. 5.2). Во-первых, наличие слова “Поиск” (Search). Во- вторых, использование поля ввода, а иногда— поля ввода с динамически изменяющимися пунктами списка. И, в-третьих, наличие кнопки Найти (Go). Если вместо стандартного слова “Поиск” (Search) вы будете использовать на своем сайте какое-то другое слово, например “Найти” (Find), или просто создадите текстовую ссылку Поиск (Search), пользователям придется догадываться о заложенной разработчиком идее, поскольку этот вариант взаимодействия с сайтом является для пользователя необычным.

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

Ссылка для авторизации. В отличие от функции поиска, поле для авторизации обычно не размещают на каждой Web-странице. Вместо этого создается ссылка (обычно справа вверху), которая называется Войти (“Login” или “Log in”) или Зарегистрироваться (Account) Эта же ссылка отвечает за регистрацию новых пользователей. Даже если вы уже были зарегистрированы, во многих сайтах эта ссылка будет выполнять функции как авторизации, так и регистрации одновременно. После перехода по такой ссылке пользователю будет предложено ввести имя и пароль для входа в систему, а новым пользователям — зарегистрироваться с помощью функции, расположенной под областью авторизации текущих пользователей.

Обычно на странице авторизации предусмотрена функция Запомнить (Remember Me), которая настраивает файл “cookie” (данные, которые сохраняются на компьютере пользователя для его последующей идентификации Web-сайтом) таким образом, что пользователям не нужно будет проходить процедуру авторизации в следующий раз, когда они зайдут на сайт. Для тех пользователей, которые постоянно забывают свои пароли, разработчиками предусматривается ссылка Забыли пароль?.

Толь графическою дизайна в i/qorfctntfe использования cautna

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

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



Hosting Ukraine
Hosting Ukraine


Предложить

Дата Окончане проекта

Сумма проекта

×