Нет ничего лучше хорошего слогана!

Слоган (tagline) – это емкая фраза, которая характеризует все дело в целом и кратко объясняет суть и преимущества того, что предлагается. Слоганы давно используются в рекламном, издательском и развлекательном бизнесе, например «Тысячи видеомагнитофонов по невероятно низким ценам!», «Здесь больше звезд, чем на небе», «Все новости, которые стоит печатать».

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

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

Не забывайте, что слоганы отличаются от девизов (которые могут быть, например, такими: «Мы привносим в жизнь только самое лучшее», «Вы в хороших руках», «Чтобы обслуживать и защищать»). Девиз выражает какой-либо принцип, или цель, или идеал, тогда как слоган сообщает о ценном предложении. Девиз имеет возвышенное и убеждающее звучание, но он не сообщает мне о том, что именно предлагается.
-Хорошие слоганы привлекательны и имеют живое, а иногда и остроумное звучание. Однако все эти качества хороши при условии, что они помогают ясно передать сообщение о выгодном предложении.

Добавлено: 24 Июля 2018 07:46:02 Добавил: Андрей Ковальчук

Как передать основную идею

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

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

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

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

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

Возьмем, например, сайт Essential.com. Здесь предлагается совершенно новая услуга (выбор поставщика энергии и средств коммуникации), поэтому требуется специальное «объяснение» о назначении сайта, для чего разработчики не пожалели большей части начальной страницы. Почти каждый элемент начальной страницы помогает объяснить пользователю, для чего сайт работает.

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

-Не используйте описание назначения сайта в качестве приветственного текста. На начальных страницах многих сайтов можно встретить описания, которые звучат так, словно они были написаны финалисткой конкурса «Мисс Америка»: «Компания XYZ предлагает высококлассные продукты в такой бурно развивающейся сегодня области, как…». Мало кто читает такие тексты.

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

Добавлено: 24 Июля 2018 07:45:39 Добавил: Андрей Ковальчук

Попробуйте протестировать

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

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

-Что это за сайт? (Логотип сайта)
-На какой странице я нахожусь? (Название страницы)
-Какие главные разделы на этом сайте? (Разделы)
-Какие опции есть на этом уровне? (Локальная навигация)
-Где именно я нахожусь в общей структуре сайта? (Указатели «Вы
находитесь здесь»)
-Каким образом осуществляется поиск?
-Почему такой детективный сюжет? Причина в том, что пребывание в Интернете часто напоминает не приятную прогулку по саду, а скорее выполнение неких действий под скрытым принуждением. Дизайнеры склонны думать, что пользователи сначала знакомятся с начальной страницей сайта и только потом переходят непосредственно к страницам, пользуясь аккуратными дорожками, которые для них подготовили. Но в действительности пользователь зачастую оказывается в середине какого-то сайта, не представляя, где он находится, так как он всего лишь щелкнул по ссылке, полученной в поисковой системе или на другом сайте, и совершенно незнаком с местной навигацией.

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

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

Потренируйтесь в проведении этого теста на четырех страницах, которые приведены далее, и сравните ваши и мои ответы.

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

Добавлено: 24 Июля 2018 07:45:07 Добавил: Андрей Ковальчук

Хлебные крошки

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

«Хлебные крошки» (breadcrumbs) – это название, возникшее как напоминание о крошках хлеба, которые Ганс незаметно бросал в лесу, чтобы они с Гретой могли найти дорогу домой.

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

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

Долгое время «хлебные крошки» были редкостью и встречались только на сайтах, являющихся большими базами данных с очень глубокой иерархией, как, например, поисковая система Yahoo…

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

Однако сейчас «хлебные крошки» применяют все чаще – и иногда вместо тщательно разработанной навигации.

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

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

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

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

-Между уровнями используйте символ ›. Опыт показывает, что лучшим разделителем между названиями уровней является символ «больше» (›). Двоеточие (:) и косая черта (/) тоже подходят, но символ › кажется самым понятным и верным – возможно потому, что визуально он предполагает движение вперед на следующий уровень.

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

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

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

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

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

Добавлено: 24 Июля 2018 07:44:21 Добавил: Андрей Ковальчук

Обычаи и условности – ваши друзья

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

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

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

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

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

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

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

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

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

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

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

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

Добавлено: 23 Июля 2018 22:53:58 Добавил: Андрей Ковальчук

Создайте ясную визуальную иерархию на каждой странице

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

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

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

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

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

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

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

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

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

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

Добавлено: 23 Июля 2018 22:52:51 Добавил: Андрей Ковальчук

То, что заставляет думать

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

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

Обратите внимание, что название нужного мне раздела лежит в неком диапазоне понятий между «Понятно каждому» и «Совсем непонятно» и возможны разные положения внутри этого диапазона.

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

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

Возможно, вы скажете: «Ну, ведь нетрудно разобраться, можно ли по чему-то щелкнуть или нет. Если навести курсор на то, по чему щелкнуть можно, он превратится из стрелки в руку. Что здесь сложного?».

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

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

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

Конечно, весь этот «внутренний монолог» происходит за доли секунды, но, как вы сами видите, это довольно утомительный процесс. Даже вполне безобидное на первый взгляд изменение известного понятия или имени (как, например, «Быстрый поиск» вместо «Поиск») может вызвать у пользователя вопрос.
Если для сравнения посмотреть на Amazon.com, то мы увидим, что разделение
«Автор-Название-Ключевое слово» там даже не упоминается. Вы просто набираете то, что ищете, и поиск начинается.

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

Я могу привести и другие вопросы, о которых посетители сайтов нисколько не
должны задумываться. Например:
Где я?
Откуда следует начинать?
Где находится…?
Что самое главное на этой странице?
Почему это называется так?

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

Добавлено: 23 Июля 2018 22:51:27 Добавил: Андрей Ковальчук

Не заставляйте меня думать!

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

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

Этот принцип означает, что в той мере, насколько этого можно достичь, веб-страница должна быть максимально простой, понятной и «самоочевидной». Другими словами, я должен сразу «схватить» ее – понять, что на ней и как ей пользоваться без затраты какихлибо усилий.

Что значит: простой, понятной и «самоочевидной»? Страница должна быть настолько простой, чтобы, скажем, ваша соседка по дому, не заинтересованная в предмете вашей работы и вряд ли представляющая, для чего служит кнопка «Назад», могла бы взглянуть на заглавную страницу вашего сайта и сказать: «О! Это …». (Она, конечно, воскликнет: «О! Это … Как мило!». Но это уже другой вопрос.)

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

Но когда я смотрю на страницу, которая заставляет меня думать, все мои мысли
принимают форму вопросительных знаков.

Когда вы создаете сайт, ваша основная задача состоит в том, чтобы избавиться
от вопросительных знаков.

Добавлено: 23 Июля 2018 22:50:47 Добавил: Андрей Ковальчук