|
Круг С. Веб-дизайн, или Не заставляйте меня думать! | Конспект |
|
Примечания Конспект состоит из последовательных фрагментов — главок (полужирный текст). Главы оригинала даются курсивом. Иллюстрации Книга богато иллюстрирована — имеет смысл читать оригинал. Выходные данные Перевод Ю. Асотова. Главный редактор А. Галунов. Зав. редакцией Н. Макарова. Научный редактор А. Михайлов. Литературный редактор Л. Ага. Художник С. Борин. Верстка С. Рубашкин. Корректура С. Журавина. Веб-дизайн: книга Стива Круга или "не заставляйте меня думать!" Пер. с англ. СПб: Символ-Плюс, 2005. 200 с: цв. ил. Книга, предлагаемая вашему вниманию, написана для специалистов-практиков дизайнеров, программистов, вебмастеров, менеджеров, маркетологов. Большую пользу для себя и возглавляемых ими проектов извлекут из этого руководства те, кто платят деньги. Сайты современных крупных компаний сегодня во многом определяют судьбу последних. Однако топ-менеджеры не всегда достаточно компетентны в вопросах юзабилити, которые в последнее время приобрели решающее значение. Принципы успешного веб-дизайна описаны автором предельно ясно и с чувством юмора, а их освоение поможет вам задавать экспертам правильные вопросы и получать ответы, которые позволят находить решения трудных технических, эстетических и структурных проблем разработки сайтов. ISBN 5-93286-021-9 ISBN 0-7897-2310-7 (англ) © Издательство Символ-Плюс, 2001 Authorized translation from the English language edition, entitled "Don4 Make Me Think! A Common Sense Approach to Web Usability", published by Que, Copyright © 2000 Подписано в печать 11.02.2005. Формат 70Х90716. Доп. тираж 2000 экз. Оригинал на англ. яз. — 2001 г. Не устарело? Понятие Юзабилити Юзабилити (от англ. usability) — простота и удобство использования веб-сайта. Примеч. науч. ред. Аудитория Чем книга короче, тем с большей вероятностью читатель сможет применить на практике ее содержание. Эту книгу я писал для тех, кто занимается практической работой дизайнеров, разработчиков сайтов, менеджеров, специалистов по маркетингу, а также для тех, кто выписывает чеки, и тех, кто занимается всем этим одновременно. Я предполагаю, что у моего читателя не слишком много времени на чтение и он не является специалистом по юзабилити веб-ресурсов. Не надо все знать Человек не должен знать все на свете. Как и любая область знаний, область вопросов, касающихся понятия юзабилити, достаточно широка. Но углубляться в них имеет смысл только в том случае, если это является вашей профессией. Из прим. Еще один хороший принцип юзабилити: чем больших временных затрат что-либо требует или может потребовать, тем меньше вероятность того, что это будет кемлибо использовано. Чего здесь нет (в книге) "Единственно верного пути" для создания сайтов. Веб-разработкой я занимаюсь достаточно давно, чтобы знать, что не существует некого "правильного" способа. Процесс создания сайта довольно сложен, и в большинстве случаев ответом на все вопросы является "It depends" ("Ну, это как посмотреть! Все зависит от..." англ.). Но я убежден, что можно определить несколько основных принципов, которые всегда имеет смысл учитывать. Именно эти принципы я попытаюсь донести до вас в своем изложении. Учиться на лучших примерах Убежден, что учиться нужно на примере хороших сайтов, а не плохих. Поэтому в этой книге я старался говорить о сайтах, в которых есть лишь незначительные погрешности. Тем не менее, эти сайты можно считать превосходными. Глава 1. Не заставляйте меня думать! Уже многие годы я повторяю, что это Первый закон юзабилити. И чем больше мне приходится изучать веб-страницы, тем больше я убеждаюсь, что это действительно так. Это главный и основной принцип юзабилити, который является решающим при оценке того, что и как работает (или не работает) в веб-дизайне. И если вы способны усвоить лишь один принцип веб-эффективности, то запомните именно его. Этот принцип означает, что в той мере, насколько этого можно достичь, веб-страница должна быть максимально простой, понятной и "самоочевидной". Другими словами, я должен сразу "схватить" ее — понять, что на ней и как ей пользоваться без затраты каких-либо усилий. Действовать, не задумываясь! Что значит: простой, понятной и "самоочевидной"? Страница должна быть настолько простой, чтобы, скажем, ваша соседка по дому, не заинтересованная в предмете вашей работы и вряд ли представляющая, для чего служит кнопка "Назад", могла бы взглянуть на заглавную страницу вашего сайта и сказать: "О! Это ...". (Она, конечно, воскликнет : "О! Это .... Как мило!". Но это уже другой вопрос.) То, что заставляет думать Чаще всего такими виновниками являются вычурные или заумные названия, торговые марки, фирменные наименования и незнакомые технические термины. Другим источником вопросительных знаков являются ссылки и кнопки, вид которых не всегда ясно показывает, что на них можно нажать. Пользователь никогда не должен тратить и сотой доли секунды на то, чтобы разбираться, можно или нельзя щелкнуть по объекту. Вы не сможете сделать все самоочевидным Ваша цель — каждую страницу сделать "самоочевидной", чтобы при первом взгляде средний пользователь мог понять, что это и как этим пользоваться. Однако в ряде случаев, когда требуется создать нечто оригинальное, ошеломляющее или очень сложное, трудно достичь полной простоты и ясности и приходится довольствоваться только понятностью. Понятная страница не нуждается в пояснениях, и пользователю нужно только немного подумать, чтобы "въехать" в нее — но только немного. Внешний вид элементов, хорошо подобранные названия, общий вид страницы и небольшой объем тщательно составленного текста — все это должно создавать почти мгновенное понимание у пользователя. Итак, если нет возможности сделать страницу полностью самоочевидной, то, по крайней мере, сделайте ее понятной. Пользователи винят себя за беспомощность Почему это так важно? Это может показаться странным, но вовсе не потому, что: В действительности, процитированное выше утверждение не всегда верно, и вы удивились бы, если б узнали, как долго люди могут терпеть сайты, которые им не нравятся. Многие предпочитают скорее винить себя, чем сайт, сталкиваясь с проблемами при его использовании. Ясность и простота для веб-страницы как хорошее освещение для витрины магазина при них все кажется лучше. Легко использовать сайт, который не принуждает задумываться о несущественном. Ненужные раздумья отнимают у нас силы, интерес и, конечно, время. Пользователи проводят на сайте намного меньше времени Однако, рассматривая в следующей главе, как в действительности используется Интернет, мы увидим, что основной причиной не заставлять пользователя задумываться является то, что большинство людей тратят намного меньше времени на просмотр веб-страницы, чем хотелось бы разработчикам. Глава 2. Как мы в действительности используем Интернет Просматриваем, прикидываем и "делаем как получится". Факт № 1: Мы не читаем веб-страницы. Мы их просматриваем Один из немногих фактов, хорошо подтвержденных исследованиями, заключается в том, что в большинстве случаев люди стараются тратить меньше времени на чтение страниц. Вместо чтения мы бегло просматриваем текст, как бы сканируем его, ища слова и выражения, которые привлекли бы наше внимание. Исключение, конечно, составляют страницы, содержащие такие документы, как новости, отчеты, описания товаров. Но даже в этом случае, если документ длиннее нескольких абзацев, его обычно распечатывают, потому что читать с бумаги легче и быстрее, чем с экрана монитора. Также притягивают внимание рисунки, изображения. Почему же мы именно просматриваем, а не читаем? Обычно мы спешим. В большинстве случаев, при использовании Интернета мы стремимся сэкономить время. В результате, веб-пользователи склонны действовать как акулы, которые стараются сохранить движение, потому что иначе могут погибнуть. Другими словами, у нас просто нет времени на чтение того, что нам не нужно. Факт № 2: Наш выбор не всегда оптимален, но мы довольствуемся тем, что есть При разработке веб-страниц мы исходим из того, что пользователи просмотрят страницу, оценят все возможные опции и выберут наиболее подходящую. В действительности, чаще всего мы выбираем не оптимальный вариант, а тот, который первым показался нам подходящим. Такая стратегия еще известна под названием "satisficing". Как только мы наталкиваемся на ссылку, которая, на наш взгляд, может привести нас к тому, что мы ищем, то, вероятнее всего, мы щелкаем по ней. Исследование поведения в экстремальных ситуациях Я наблюдал такой тип поведения в течение многих лет, но его значение окончательно стало для меня ясным только после прочтения книги Гарри Клейна "Источник силы: как люди принимают решения". В течение 15 лет Клейн изучал, каким образом люди разных профессий, в том числе пожарные, летчики, шахматисты, операторы атомных электростанций, принимают важные решения в условиях ограниченного времени, неясных целей, недостатка информации и изменяющихся ситуаций. Группа исследователей под руководством Клейна в своих первых наблюдениях (на примере полевых командиров, находившихся в боевых условиях) использовали общепринятую модель рационального принятия решений, суть которой заключается в следующем: сталкиваясь с некой проблемой, человек начинает собирать информацию, определяет возможные решения и затем выбирает из них то, которое считает наиболее подходящим. Исследователи исходили из консервативного предположения, что в условиях высокой ответственности за принятие решения и чрезвычайной ограниченности времени командир сможет сравнивать только два каких-то возможных варианта действий. Но, как выяснилось, командиры вообще не сравнивали никаких вариантов. Они просто брали первый разумный план, который приходил им в голову, и мысленно быстро давали ему оценку. Если они не находили в своем плане каких-либо ошибок, то начинали его реализовывать. Прим. Термин satisficing — синтез английских слов satisfying (удовлетворительный) и sufficing (достаточный) впервые введен экономистом Гербертом Симоном в книге "Социальные и рациональные модели человека" (издательство "Wiley", 1957 г.). Издательство "MIT Press", 1998 г. Как мы в действительности используем Интернет Итак, почему же веб-пользователи не стремятся найти наилучший вариант? Обычно у нас мало времени. Как отмечает Клейн: "Оптимизирование достаточно трудный процесс, требующий много времени. Тогда как прикидывание оказывается более эффективным способом". Нелюбовь к медленным сайтам Если выбор оказался неудачным, то это легко исправить. В отличие от тушения пожара, неправильный выбор при использовании веб-сайта приводит всего лишь к тому, что нужно один или два раза нажать кнопку "Назад". Именно поэтому прикидывание является эффективной стратегией — конечно, при условии, что загрузка происходит быстро, иначе приходится производить выбор с большей осторожностью (кстати, это одна из немногих причин, объясняющих, почему большинство пользователей избегают медленно загружающихся сайтов). Тщательное взвешивание всех возможных вариантов не всегда приводит к положительным результатам. В случаях, когда сайты разработаны плохо, стратегия поиска наилучшего варианта не является эффективной, и обычно лучше делать выбор наугад, а затем нажать на кнопку "Назад", если результат оказался неудовлетворительным. Угадывать интереснее. Это требует меньших усилий, чем предварительный поиск самого лучшего варианта. И если вы угадываете правильно, все происходит быстрее. Кроме того, это создает элемент случайности, который может привести к чему-нибудь неожиданному и хорошему. Конечно, из сказанного не следует, что пользователи никогда не пробуют сначала найти самый подходящий вариант и только потом щелкнуть мышью. Все зависит от склада ума, количества времени и степени доверия к сайту. Психология имеет важное значение. Факт № 3: Мы не задумываемся над тем, как "оно" работает. Мы просто делаем "как получится" Люди не читают Help Ленятся, или потому, что эти Help'ы написаны тяжелым языком? Сталкиваясь с какой-либо техникой, очень немногие находят время для чтения руководств и инструкций. Наоборот, мы без оглядки прорываемся вперед и выдумываем свои неясные теории о том, как нужно поступать и как "оно" работает. Пользователи находят собственные способы! Нечто похожее происходит и с тем, как люди используют программное обеспечение и сайты. Я много раз видел, как пользователи успешно применяли способы, совершенно отличные от тех, которые разрабатывали для них веб-дизайнеры. Для нас не важно, каким образом что-то работает. Если мы можем что-то использовать, то для большинства из нас не имеет значения, понимаем ли мы, как это работает. Это происходит не от недостатка интеллекта — по большому счету, нас это просто не интересует. Если что-то однажды сработало, мы стараемся это использовать постоянно. Когда мы находим что-то, что работает, пусть даже плохо, мы склонны не искать лучших вариантов. Мы принимаем лучшее, если случайно наталкиваемся на него, но редко ищем его целенаправленно. Глава 3. Начальный курс по созданию рекламных щитов Разработка веб-страниц для просмотра, а не для чтения 5 шагов Если оказывается, что пользователи Интернета проходят мимо вашего сайта, можете сделать пять важных шагов, чтобы добиться его лучшего понимания: — Создайте ясную визуальную иерархию на каждой странице. — Используйте обычаи и условности. — Разбейте страницы на четко разделенные области. — Покажите ясно то, по чему можно щелкать мышью. — Уменьшите визуальный шум. Страницы с ясной визуальной иерархией обладают тремя чертами: Чем более важен элемент, тем более он заметен на странице. Например, важные заголовки делаются либо крупнее, либо жирнее, либо выделяются цветом, либо отделяются... Элементы, логически связаные между собой, должны быть связаны и визуально. Например, вы можете показать, что какие-то элементы равнозначны, сгруппировав их под одним заголовком, либо применив к ним одинаковый стиль, либо поместив их в одну четко отделенную область страницы. Элементы представляются в виде вложений, если являются частями друг друга. Например, название раздела "Книги по программированию" будет находиться над заголовком какой-то конкретной книги по этой теме, включая в себя все содержимое части страницы (эта книга является частью данного раздела). Под заголовком этой книги, в свою очередь, будет включено ее описание. Подсказки и ориентиры Кроме того, мы хотели бы получать на сайте некие редакторские подсказки и ориентиры относительно того, что из содержания сайта является наиболее важным и ценным или популярным, так же, как ожидаем этого в других средствах масс-медиа. Почему бы тогда редактору сайта не расставить эти акценты для меня, чтобы сэкономить мои силы и время? Любое издательское сообщество создает свои обычаи и условности, затем развивает их и создает со временем новые. В Интернете существует уже много таких условностей, большинство из которых было перенято из газет и журналов. Естественно, будут появляться и новые. Логотипы телеканалов внедрены недавно Взять хотя бы маленькие полупрозрачные логотипы телекомпаний, которые несколько лет назад появились в углу телеэкрана. Сейчас такие значки используются везде, однако телевидение существовало еще за 50 лет до их появления. Условности полезны Они очень полезны. Как правило, условности становятся общепринятыми, только если они работают. Когда они правильно и к месту применяются, то помогают пользователям легко переходить от одного сайта к другому, не задумываясь о том, как все работает. Некоторое приятельское чувство возникает у пользователя, когда он видит знакомый список разделов сайта, привычно расположенный на цветном фоне на левой стороне страницы, несмотря даже на, порой неловкое, ощущение дежавю. Дизайнеры любят выдумывать Дизайнеры зачастую с неохотой применяют условности. Вместо того чтобы использовать их, дизайнеры часто стремятся выдумать колесо заново. Причина этого заключается, главным образом, в том, что дизайнеры считают (и не без основания), что их как раз и нанимают, чтобы придумывать нечто новое. (Не говоря уже о том, что похвала коллег, награды и приглашения к участию в больших проектах редко появляются от умения "лучше всех применять условности".) Многие дизайнеры имеют склонность недооценивать общепринятые обычаи и условности. Совет Мой совет заключается в следующем: используйте новую идею, только если вы уверены, что она действительно лучше (если, например, каждый, кому вы ее демонстрируете, говорит: "Ух ты, вот это да!"). Если же вы не уверены, то не изобретайте колеса — воспользуйтесь общепринятыми условностями. Разбейте страницы на четко разделенные области Взглянув на страницу, пользователь должен сразу видеть: "вот здесь то, что можно делать на этом сайте", "вот здесь ссылки на сегодняшние самые интересные истории", "вот здесь список того, что продается", "вот здесь самые популярные товары", "а вот здесь переходы к другим разделам сайта". Люди смотрят на то, что им нужно, и не замечают остальное Несколько исследований, касавшихся того, как движутся глаза пользователей при просмотре веб-страниц, подтверждают, что пользователи очень быстро решают, какие части страницы содержат полезную для них информацию, и почти никогда уже не смотрят на другие части, как будто они и не существуют. Покажите ясно, по чему можно щелкать мышью Уменьшите визуальный шум Перегруженность. Некоторые веб-страницы вызывают у меня воспоминания о чтении писем из издательств, когда нужно отправить обратно заполненную форму и умудриться при этом случайно не подписаться на какой-нибудь журнал. Если на странице находится огромное количество всевозможных призывов, приглашений к покупкам, бесчисленное множество восклицательных знаков и яркоцветных выделений, то все это вызывает эффект давления. Фоновый шум. Некоторые страницы напоминают обстановку какой-то вечеринки — нет громкого источника, отвлекающего внимание, но есть множество элементов визуального шума, которые в совокупности вызывают ощутимое раздражение. Глава 4. Животное, растение или камень? Почему пользователи любят выбирать не задумываясь Количество щелчков мышью не имеет значения до тех пор, пока каждый клик очевиден. Веб-дизайнеры и эксперты по вопросам юзабилити уже давно ведут спор о том, сколько раз пользователи в поиске того, что им нужно, могут щелкнуть мышью, не потеряв при этом интерес и не приходя в отчаяние. Для некоторых сайтов даже были приняты правила, ограничивающие количество кликов (обычно тремя, четырьмя или пятью) для перехода к любой странице сайта. В конечном счете, "количество кликов" действительно кажется полезным критерием. Но с течением времени я пришел к мысли, что все-таки не их количество имеет значение (хотя здесь, конечно, должны быть определенные рамки), но скорее их "качество", т. е. насколько легко сделать каждый клик — требует ли это действие размышлений и какова степень уверенности в правильности выбора. Вообще говоря, я думаю, что пользователь не задумывается о количестве щелчков мышью до тех пор, пока каждый клик проходит легко, а он сам сохраняет уверенность, что движется в верном направлении. Общим правилом, наверное, здесь может стать следующее утверждение: "один клик, требующий от пользователя размышлений, равен трем простым кликам, которые можно сделать не задумываясь". Здоровое чувство юмора у автора. Горизонтальный и вертикальный тип иерархии Все это — часть более широкой дискуссии относительно достоинств и недостатков горизонтального и вертикального типа иерархии сайтов. Горизонтальный тип предполагает большее количество категорий на каждом уровне сайта, но имеет меньшее число уровней, поэтому для достижения нижних уровней нужно сделать меньшее количество кликов. Тогда как вертикальный тип подразумевает большее число уровней (а значит и кликов для перемещения), однако с меньшим числом категорий на каждом уровне. Конечно, возможны исключения. Если мне нужно постоянно проходить по одной и той же дорожке вниз по структуре сайта, или же страницы довольно долго загружаются, то ценность меньшего числа кликов возрастает. Вывод Итак, в Интернете нужно постоянно делать какой-то выбор, поэтому использовать сайт значительно легче, если сам выбор не вызывает размышлений. Может, сомнений? Глава 5. Опустите слова Искусство не писать Избавьтесь от половины слов на каждой странице, затем уберите еще половину из того, что осталось. Никакой "общей болтологии" Мы сразу же узнаем "общую болтологию", как только видим ее, — это вступительные тексты, служащие для того, чтобы приветствовать нас на сайте и рассказать нам о том, какой он замечательный, или же сообщить нам о содержании раздела, в который мы вошли. Чтобы быть уверенным, что какой-то текст является "общей болтологией", вы можете воспользоваться одним надежным правилом: если во время его чтения вы внимательно прислушаетесь к себе, то услышите внутренний голос, произносящий нечто вроде: "Угу, угу, угу, угу, угу...". "Общая болтология" — это своего рода самовосхвалительные речи, которые еще можно встретить в плохо написанных рекламных брошюрах. В отличие от хороших рекламных текстов, "общая болтология" не содержит полезной информации и главным образом сосредоточена на описании того, как (а не почему) "у нас все прекрасно". Хотя "общую болтологию" можно иногда встретить на начальных страницах сайтов (обычно в абзацах, начинающихся со слов: "Добро пожаловать на сайт..."), все же самым "любимым местом обитания" для нее оказываются начальные страницы разделов ("section fronts"). Поскольку эти страницы чаще всего являются всего лишь "оглавлениями" и не несут самого содержания, то возникает соблазн наполнить их еще какой-либо "общей болтологией". К сожалению, в результате получается так, будто издатель в конце оглавления к книге добавил еще один абзац, гласящий: "В этой книге содержится много интересного. Здесь есть главы, посвященные тому-то, тому-то и тому-то. Надеемся, что чтение доставит вам удовольствие." "Общая болтология" напоминает простой светский разговор — так же бессодержательна и существует только ради разговора самого по себе. Но у большинства веб-пользователей нет времени на такие разговоры — они хотят сразу приступить к сути. Поэтому следует устранить как можно больше "общей болтологии". Никаких "инструкций" Другим большим источником ненужных слов являются "инструкции". Главное, что следует знать об "инструкциях", это то, что их никто не собирается читать, по крайней мере до тех пор, пока несколько попыток использовать сайт "как получится", в конце концов, не увенчаются успехом. Но даже тогда, если инструкции слишком длинные, то редкие пользователи начинают искать в них нужную информацию. Вашей целью должно стать стремление всегда полностью устранять "инструкции", делая все достаточно ясным без лишних объяснений ("самоочевидным") или как можно более ясным. Если "инструкции" все же действительно необходимы, то сократите их до минимума. Глава 6. Дорожные знаки и "хлебные крошки" Разработка навигации Это правда: Люди не станут пользоваться вашим сайтом, если им не будет понятно, как по нему перемещаться. Пользователи с "доминантным поиском" и другие категории Некоторые люди (Якоб Нильсен называет их пользователями с "доминантным поиском", заходя на какой-то сайт, почти всегда сразу начинают искать окно поиска (возможно, это тот же тип людей, которые при входе в магазин сразу ищут помощи продавца). Другие люди (пользователи с "доминантным выбором ссылок" (link-dominant) по классификации Якоба Нильсена) почти всегда начинают с самостоятельного поиска и обращаются за помощью к поисковой системе только в случае, если у них больше нет подходящих ссылок или одолела усталость от неудачного использования сайта. У всех других людей решение о том, стоит ли начинать самостоятельный поиск или обратиться к помощи поисковой системы, зависит от их склада ума, от того, насколько они ограничены во времени, и, наконец, насколько система навигации, используемая на сайте, кажется им удобной. Невыносимая легкость серфинга Веб-навигация С другой стороны, это помогает объяснить, почему мы вообще используем такой термин, как веб-навигация, — ведь мы не применяем слово "навигация" по поводу перемещения внутри магазина или библиотеки. Если заглянуть в словарь, то мы узнаем, что "навигация" связана с двумя понятиями: перемещением из одного места в другое и определением собственного местонахождения. Мне кажется, что мы используем это слово по отношению к Интернету, потому что "определение собственного местонахождения" — это довольно серьезная проблема, которую в Интернете решить труднее, чем в физическом пространстве. По сути дела, оказавшись в Интернете, мы "теряемся" в нем, и у нас нет возможности заглянуть через "товарные ряды", чтобы узнать, где же мы находимся. Таким образом, веб-навигация служит для того, чтобы компенсировать эту проблему отсутствия "ощущения места" с помощью внесения определенной иерархии в структуру сайта, тем самым искусственно создавая понятие "здесь". Навигация — это не какая-нибудь "примочка" для веб-сайта, это и есть сам сайт, аналогично тому, как здание, торговые полки и кассы это магазин. Без этого веб-пространство не возникает. Вывод? Веб-навигация должна быть хорошей. Условности, применяемые для навигации Первая страница и другие Я ошибся. На самом деле, есть два исключения для правила "навигация должна преследовать пользователя везде": Начальная страница. Начальная страница отличается от других страниц сайта. Она выполняет особые задачи и несет особую нагрузку. Как мы увидим в следующей главе, иногда имеет смысл не использовать на ней постоянную навигацию. Формы. На страницах, где находятся специальные формы, предназначенные для заполнения, использование постоянной навигации может иногда оказаться излишним и только отвлекать внимание пользователя. Например, при оплате покупок в Интернет-магазине от пользователя не требуется ничего, кроме как заполнить нужные формы. Это относится и к случаям, когда нужно зарегистрироваться или дать ответ, или выбрать собственные настройки. На страницах такого типа желательно иметь только минимальную версию постоянной навигации, в нее нужно включить логотип сайта, ссылку на начальную страницу и несколько сервисов, которые могут помочь пользователю заполнить нужные формы. Кнопка (логотип) сайта Логотип или название сайта выполняет для него ту же роль, что и вывеска на входе в какое-либо учреждение. Когда я иду в магазин, мне достаточно на входе увидеть вывеску, чтобы внутри магазина точно знать, что я нахожусь в нем до тех пор, пока не выйду. Другое дело Интернет: здесь основной способ перемещения — это телепортация, и поэтому мне нужно видеть эту "вывеску" на каждой странице. Мы ожидаем, что логотип сайта будет находиться в верхней части страницы, обычно в верхнем левом углу или, по крайней мере, в непосредственной близости к нему, — аналогично тому, как мы привыкли видеть табличку с наименованием учреждения прямо на его главном входе. Это объясняется тем, что логотип представляет весь сайт в целом, и, следовательно, он занимает самую верхнюю позицию в логической иерархии сайта. Конечно, нет смысла делать логотип сайта самым заметным элементом страницы (исключение может составлять только начальная страница сайта). Поэтому лучшим местом для него — таким, где ничто не заставит меня задумываться, — является верхняя часть страницы, как бы ее заглавие. Мало того, что логотип находится там, где мы ожидаем его увидеть, он должен еще и выглядеть как логотип, т.е. иметь все атрибуты, полагающиеся для торговых марок или фирменных знаков: особый стиль шрифта и графики, узнаваемый при любом размере изображения, начиная от кнопки и заканчивая дорожным щитом. Набор сервисов Набор сервисов может варьироваться в зависимости от типа сайта. Например, корпоративный сайт или интернет-магазин может иметь следующие сервисы: О нас Часто задаваемые вопросы Конфиденциальность Архивы Помощь Регистрация Оформить заказ Начальная страница Поиск Информация о компании Связи с инвесторами Тележка для покупок Как с нами связаться Как покупать Вход Отдел по работе с клиентами Вакансии Карта сайта Доски объявлений Личный раздел Ваше местоположение в магазине Скачать Новости Ваш счет Каталог Отслеживание заказов Форумы Пресс-релизы Логотип — кнопка возврата на первую стр. Стоит отойти на три щелчка, как сразу вспоминаешь, что "нет места лучше дома" Одним из важнейших элементов постоянной навигации является кнопка или ссылка для перехода на начальную страницу сайта. Расположенная на видном месте, кнопка начальной страницы дает пользователю уверенность, что даже заблудившись в недрах сайта, с ее помощью он всегда сможет начать все сначала, будто бы нажав "Сброс" или получив пропуск "Свободен" на выход из тюрьмы. Последнее время появилась практика использовать логотип сайта в качестве кнопки для перехода к начальной странице. На мой взгляд, эту ценную идею стоит взять на вооружение и на других сайтах, однако крайне мало пользователей представляют себе такую возможность. К 2006 г. это стандарт. Названия страниц, или почему я люблю ездить по Лос-Анджелесу Если вы когда-нибудь были в Лос-Анджелесе, то понимаете, что это не лирическая песня, а город больших дорог. Жители Лос-Анджелеса очень серьезно относятся к автовождению. Видимо, поэтому в городе самые лучшие дорожные знаки и указатели улиц из всех, которые я когда-либо видел. В Лос-Анджелесе: — Дорожные знаки имеют большие размеры. Когда вы останавливаетесь на одном перекрестке, то можете прочитать указатель, установленный на следующем. — Каждый знак находится на правильном месте, т.е. над дорогой, по которой вы едете, поэтому вам нужно всего лишь посмотреть вверх, чтобы прочесть его. Символ-разделитель Между уровнями используйте символ >. Опыт показывает, что лучшим разделителем между названиями уровней является символ "больше" (>). Двоеточие (:) и косая черта (/) тоже подходят, но этот символ кажется самым понятным и верным возможно потому, что визуально он предполагает движение вперед на следующий уровень. Четыре причины, по которым мне нравятся вкладки Меня мучает сильное подозрение, что вкладки изобрел Леонардо да Винчи где-то в конце 15 века, потому что, как это часто бывает с компонентами интерфейсов, они явно выдуманы каким-то гением. Вкладки — это один из тех редких случаев, когда использование физической метафоры в пользовательском интерфейсе действительно работает. Так же как закладки в обычной канцелярской папке или разделители в ящике картотеки, они делят содержание сайта на разделы и позволяют легко перейти к какому-либо из них... Цвет на вкладках. Цветовая слепота (дальтонизм?) Вкладки должны выделяться цветом. На сайте Amazon для каждого раздела используется вкладка особого цвета, тогда как остальные навигационные элементы на странице остаются в одном, общем цвете. Назначать особый цвет каждому разделу — это хорошая идея при условии, что вы не рассчитываете, что каждый пользователь будет учитывать это цветовое кодирование. Некоторые люди (приблизительно каждый двенадцатый мужчина и каждая двухсотая женщина — главным образом старше 40 лет) не способны замечать цветовые различия из-за цветовой слепоты. Но еще более важно по моим наблюдениям то, что значительно большая доля людей (приблизительно половина) просто не осознает, что цвет элементов имеет какое-то смысловое назначение. Попробуйте протестировать Теперь, когда вы уже кое-что знаете о тонкостях навигации, я предлагаю вам попробовать мой тест на определение хорошей веб-навигации. Представьте, что вы оказались с завязанными глазами внутри автомобиля. Вас куда-то отвозят и выбрасывают на одной из страниц, находящейся в недрах веб-сайта. Если эта страница грамотно разработана, то после того как у вас прояснится в глазах, вы сможете без всяких затруднений ответить на следующие вопросы:
Глава 7. Первый шаг к выздоровлению признание того, что начальная страница не в порядке Итак, начальная страница должна содержать следующее: Цель и назначение сайта. Начальная страница должна исчерпывающим образом объяснять, что это за сайт и для чего он создан. Желательно также, чтобы пользователю были даны объяснения, почему ему следует быть именно здесь, на этом сайте, а не на другом. Иерархия сайта. Начальная страница должна давать обзор того, что на сайте предлагается в плане содержания (Что я могу найти здесь?) и возможностей (Что я могу делать здесь?), а также показывать, как все это на сайте организовано. Обычно эти функции выполняет постоянная навигация. Поиск. На большинстве сайтов начальная страница должна содержать хорошо различимое окно поиска. Анонсы содержания сайта. Так же как и обложка журнала, начальная страница должна увлечь пользователя намеками на "очень интересное" содержание сайта. Обзор содержания ("Content Promos") рассказывает о новейших, лучших и самых популярных элементах содержания, как, например, последние статьи или выгодные предложения. Обзор сервисов ("Feature promos") предлагает пользователю посетить дополнительные разделы сайта и воспользоваться какими-нибудь услугами, как, например, персонализация или подписка на рассылку новостей. Периодически обновляемое содержание. Если успех сайта зависит от количества повторных посещений пользователей, то лучше сделать так, чтобы часть содержания на начальной странице периодически обновлялась. И даже в том случае, если не предполагается, что сайт будут посещать постоянные посетители, лучше, чтобы он все-таки подавал какие-то признаки жизни (например, с помощью ссылки на недавний пресс-релиз). Реклама. Пространство начальной страницы резервируется также и для всевозможной рекламы. Ярлыки. Элементы содержания сайта, которые наиболее часто запрашиваются посетителями (например, обновленные версии программного обеспечения), заслуживают того, чтобы на начальной странице находились ссылки для быстрого перехода к ним. Регистрация. Если на сайте используется регистрация, то на начальной странице должны размещаться специальные ссылки для новых посетителей и для тех, кто уже зарегистрировался. Следует также предусмотреть указатели, сообщающие о том, что вы зарегистрированный пользователь (например, "Рады вас снова видеть на нашем сайте, Стив Круг!"). Кроме того, начальная страница должна служить нескольким общим целям:
Слишком много кухарок Слишком много кухарок. Поскольку начальная страница имеет очень большое значение, каждый (даже генеральный директор вашей компании) считает своим долгом иметь свое мнение по поводу ее разработки. "первый экран" Учитывая склонность многих пользователей пробегать вниз по странице не дальше ближайшей интересной ссылки, особенно тяжелая борьба происходит из-за сравнительно небольшого участка "над сгибом". Прим. Термин, заимствованный из газетного дела; означает часть страницы, которую вы можете видеть не прокручивая ее на экране. Один размер, который подходит для всех. В отличие от страниц с нижних уровней сайта, начальная страница предназначена для привлечения всех посетителей, независимо от их интересов. Главная страница
Недостатки баннерной рекламы Почему "золотые гуси" такие соблазнительные мишени, или "А по вкусу это напоминает цыпленка!" Есть нечто, связанное с разработкой начальной страницы, что очень часто просто упускается из виду. Когда я бываю на обсуждениях дизайна начальной страницы, то замечаю, что часто мимо моих ушей проскакивает фраза "...чтобы не убить золотого гуся". Существует четыре самых распространенных способа "убить гуся". Разместить баннерную рекламу, когда в этом нет необходимости. Наверное, самое худшее свойство баннерной рекламы заключается в том, что она сдвигает вниз начало страницы, тем самым оставляя меньше пространства "над сгибом", которое можно окинуть одним взглядом, и меньше возможности для создания хорошего впечатления. Кроме того, что баннерная реклама занимает много ценного места, она еще является самым медленным по загрузке элементом на странице. Где-где, а именно на начальной странице, следует прежде всего избегать медленной загрузки. "Вымогать" данные о пользователе На некоторых сайтах делается следующая ошибка: не успел еще посетитель переступить через порог, как от него сразу пытаются вытребовать его личные данные. В худшем случае, пользователя просят пройти регистрацию даже еще до того, как он может посмотреть сайт в целом, что по сути равносильно вывеске "Убирайтесь отсюда!". К счастью, такую ошибку в большинстве случаев совершают только начинающие веб-дизайнеры. Глава 8. "Скотовод и пастух должны быть друзьями" Почему споры относительно веб-дизайна и юзабилити являются пустой тратой времени и как их избежать "Каждый любит..." /вкусовщина Все мы, чья работа как-то связана с веб-сайтами, имеем одну общую черту — мы также являемся пользователями. И так же, как и всем пользователям, нам что-то нравится в тех или иных сайтах, а что-то нет. ...появляется естественная тенденция переносить свои вкусы на пользователей Интернета в целом, т. е. думать, что большинство пользователей предпочитает то же, что и мы. Конечно, нельзя сказать, что мы думаем, будто каждый пользователь такой же, как и мы. Мы знаем, что есть люди — и некоторые из них есть даже в нашей рабочей группе, — которым не нравится то, что нравится нам. Но эти люди просто неразумные. И к тому же их не так много. Кроме личных пристрастий имеются еще и профессиональные. Дизайнеры и разработчики Взять, например, дизайнеров (designers) и разработчиков (developers). Дизайнеры склонны думать, что большинству людей нравятся сайты, которые визуально интересны, поскольку им самим нравятся визуально интересные сайты. Вероятно, они потому и стали дизайнерами, что любят хороший дизайн, — им кажется, что хороший дизайн помогает сделать все интереснее и понятнее. С другой стороны, разработчики склонны думать, что людям нравятся сайты со множеством интересных сервисов, поскольку им самим нравятся сайты с большим количеством интересных сервисов. В результате дизайнеры хотят создавать сайты с потрясающим дизайном, а разработчики хотят создавать сайты с интересными, оригинальными и удобными сервисами. Не знаю, кто в данном случае выступает в роли скотоводов, а кто пастухов, но я хорошо знаю, что различия в их подходах, в конце концов, когда приходит время определять приоритеты разработки, приводят к конфликту и горьким обидам. "Культура ремесла" и "культура ажиотажа" "Скотовод и пастух должны быть друзьями" В то же время, дизайнеры и программисты оказываются участниками другого, еще большего конфликта — по классификации Арта Клейнера между "культурой ремесла" и "культурой ажиотажа". Если "культура ажиотажа" (сюда входит менеджмент, маркетинг и разработка бизнес-проектов) сосредоточена, главным образом, на раздаче различных обещаний для привлечения капитала, пользователей, стратегических партнеров и выгодных сделок, то задача по выполнению этих обещаний падает грузом на плечи тех, кто входит в "культуру ремесленников", т. е. дизайнеров и программистов. Таким образом, и без того сложные споры по поводу вопросов юзабилити усугубляются этой вечной борьбой между искусством и коммерцией (или, возможно, скотоводами и пастухами против железнодорожных магнатов), перенесенной в Интернет, — часто в виде авторитарных указов, издаваемых со стороны "культуры ажиотажа". Очевидно, автор утрирует роль представителей этой условной культуры "ажиотажа". Миф о среднем пользователе Убеждение в том, что большинство пользователей подобны нам, вполне способно вызвать затор в ходе самого обычного рабочего обсуждения по поводу веб-дизайна. Конкретизация вопроса, тестирование Все дело в том, что не имеет смысла задавать вопросы вроде "Большинству людей нравятся выпадающие меню?". Правильнее задать другой вопрос: "Вот это выпадающее меню, с этими элементами и такими формулировками в таком контексте, вот на этой странице создаст хорошее впечатление у большинства пользователей из тех, которые возможно воспользуются этим сайтом?" И есть только один способ получить ответ на такого рода вопрос — это тестирование. Используйте общий опыт, мастерство, творческие способности и здравый смысл вашей группы для создания хотя бы черновой версии вашей работы и затем понаблюдайте внимательно за тем, как обычные люди пытаются разобраться с этим и понять, что это и как этим пользоваться. Иных способов нет. Споры о том, что людям нравится или не нравится, приводят только к потере времени и истощают силы коллектива, тогда как тестирование позволяет снять препирательства и преодолеть тупики, переводя разговор из плоскости — что правильно или неправильно, в плоскость — что работает или не работает. Тестирование показывает, насколько разнообразными могут быть мотивация, восприятие и реакции пользователей, что, естественно, никак не согласуется с мыслью о том, что все пользователи имеют такие же вкусы, как и мы. Последние три главы посвящены тому, что, почему и как тестировать. Юзабилити-тестирование Глава 9. Юзабилити-тестирование за 10 центов в день Как упростить тестирование, чтобы сделать его доступным Повторяем все вместе: метод фокусных групп — это не то же самое, что юзабилити-тестирование. Довольно много интересного — лучше смотреть в оригинале. Глава 10. Юзабилити-тестирование: снимаем кино Что должен делать наблюдатель Работа наблюдателя на юзабилити-тестировании довольно непыльная. Все, что вам нужно будет делать в качестве наблюдателя, — это только слушать и смотреть, быть внимательным и попутно делать записи. Вот на что вам придется обращать внимание:
Во время тестирования вы заметите и много того, что пока не работает, ну, например, отсутствующая графика, не работающие ссылки, опечатки. Следует отмечать эти элементы, чтобы потом передать список тем, кто должен их исправить. Однако не забывайте, что это не является вашей основной задачей, и делайте это только попутно. Кроме того, во время наблюдения учитывайте следующее:
Отчет о наблюдении После тестирования каждый наблюдатель и ассистент должен как можно быстрее написать небольшой отчет об основных проблемах, которые были им замечены во время тестирования, а также изложить свои мысли по поводу способов их устранения. Не надо писать полных и развернутых отчетов. Пусть это напоминает скорее резюме. В идеале, все участники группы по разработке должны прочитать эти отчеты (или хотя бы пробежать их глазами), поэтому они не должны по объему превышать страницу или две. Ниже приводится пример резюме, которые обычно делаю я. Глава И. Чтобы не выплеснуть с водой и ребенка Интерпретация результатов тестирования Да, мы сделали некоторые ошибки. Но давайте постараемся "не выплеснуть ребенка вместе с водой". Линдон Бэйнз Джонсон Постарайтесь, чтобы после каждого цикла тестирования каждый участник рабочей группы смог прочитать все отчеты и подумать о том, что делать дальнее. На собрании рабочей группы раздайте копии всех отчетов и приложите к ним копии набросков и изображений, которые тестировались. Следует обсудить два вопроса:
Наверное, это тоже покажется сложным. В конце концов, ведь это те же самые люди, которые не могли ни о чем договориться до тестирования. Так в чем же разница? Вот несколько моих рекомендаций:
Тем не менее:
Типичные проблемы При тестировании вы можете столкнуться со следующими типами проблем:
Советы
Не выплесните ребенка вместе с водой Как и любой хороший дизайн, успешно разработанная веб-страница основана на тонком балансе между всеми ее элементами. Поэтому важно не забывать о том, что внесение даже незначительных изменений может существенно повлиять на работу всего сайта. Иногда главная трудность при исправлении проблем дизайна как раз и заключается в том, чтобы не нарушить работу других частей сайта. Каждый раз, когда вы хотите сделать какое-то изменение, тщательно подумайте о том, что еще при этом будет затронуто. В частности, когда вы делаете что-то более заметным на странице, проследите, чтобы что-то другое, не менее важное, не потеряло в своем "весе". Ну, вот и все Как говорили Боб и Рэй, "зажмите кулаки и пишите, если будет работа". Надеюсь, что иногда вы будете заходить на сайт, посвященный этой книге, по адресу www.circle.com/krugbook. Пока же я собираюсь заняться некоторыми, как я это называю, псевдоисследованиями с использованием специального оборудования для регистрации глазных движений. Время от времени я буду публиковать свои наблюдения относительно того, что именно мы видим, когда смотрим на какую-либо веб-страницу. Больше всего я желаю вам хорошего настроения. Как я уже говорил в начале, создание хорошего сайта требует большого труда, и каждый, кто хотя бы наполовину все делает правильно, уже заслуживает восхищения. И, пожалуйста, не принимайте сказанное в этой книге, как истину, не допускающую никаких отклонений или хотя бы отступлений от "правил". Я прекрасно знаю, что есть сайты, специально рассчитанные на то, чтобы заставить посетителей задуматься, поломать голову, отгадать что-нибудь. Я только хотел, чтобы вы знали, от каких правил отступаете и, по крайней мере, задумались, действительно ли у вас есть серьезные причины для отступления. Рекомендуемая литература Конец. Составил Олег Тишков, 2006 (испр. 2009). |
Полный текст книги «Веб-дизайн» (pdf)
Обложка |
