Разработка сайтов для СРО

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Создание и раскрутка сайтов в Интернете

Что нужно для SEO?

Текст & Всемирная Паутина

Инструмент веб-строителя

HTML - язык гипертекста

CSS - каскадные таблицы стилей

Поисковая оптимизация

Что такое раскрутка сайта?

Контекстная реклама

Что такое обмен ссылками?

Почтовые рассылки

Соблюдайте правила

Что препятствует рейтингу?

Что такое CMS?

Краткий словарь терминов

Полезные книги

Карта сайта

Этапы создания сайта

Десять важных шагов

Разработка семантического ядра

Обновление информации

Заголовки

Проверка ссылок

Проверка ошибок в коде

Шрифтовое оформление

Навигация по сайту

Метаданные

Выбор кодировки

Ключевые слова

 
Разработка сайтов под ключ

Ссылки по теме

Blogger: Создайте блог БЕСПЛАТНО

WordPress: Платформа для ведения блога

Online-переводчик :: Компания ПРОМТ

Поисковая оптимизация – все дело в написании текстов

Стратегия продвижения сайтов

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

Орфографические словари

Словарь русских синонимов Абрамова

Орфографический словарь Лопатина

Современный словарь иностранных слов

Толковый словарь русского языка Ожегова

Архивы форума "Говорим по-русски"

FAR — программа управления файлами и архивами

FCKEditor - текстовый редактор для браузера

NotPad++ - текстовый редактор

PSPad — текстовый редактор

UltraEdit-32 - текстовый редактор

Nvu - HTML редактор

CoffeeCup - HTML редактор

 

Как сделать сайт максимально удобным?

Главная « Уроки Web-мастерства « Как сделать сайт максимально удобным?

версия для печати

Как сделать сайт удобным и убедительным?

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

 

Создание постоянного фирменного стиля…

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

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

 

Создание основной навигации…

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

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

 

Вторичная навигация…

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

Вторичная навигация может иметь следующие формы:

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

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

  • подменю разделов - на больших сайтах часто существуют подменю для отдельных разделов.

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

 

Пиктография и используемый язык…

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

Пиктография обычно строится на метафорах. Метафора - это символический образ предмета или идеи. Этот образ отражает некоторое сходство между символом и связанным с ним предметом или идеей.

Примерами использования метафоры в пиктографии могут быть следующие:

  • конверт для представления электронной почты;

  • корзина для представления покупок;

  • принтер для печати информации;

  • блокнот и карандаш для представления статей;

  • монитор для представления компьютера.

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

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

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

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

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

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

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

При работе над текстовой навигацией, примите во внимание следующие советы:

  • сохраняйте текст простым и четким. Вместо «Прочитайте другие статьи» используйте «Другие статьи» или даже просто «Статьи»;

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

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


внимание!

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

 

Постоянство размещения элементов…

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

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

При работе над размещением элементов, помните следующее:

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

  • навигация. Как уже говорилось ранее, одинаковое местоположение навигации является важным аспектом успешного, простого в использовании дизайна;

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

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

 

Выпадающие меню…

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

Несколько советов по использованию выпадающего меню, например следующие:

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

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

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

 

Всплывающие окна…

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

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

Среди способов разумного применения всплывающих окон могут быть следующие:

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

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

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

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

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

  • посетители должны знать, что данная ссылка откроется во всплывающем окне;

  • избегайте ссылок, открывающихся в новом окне (если вы о них не предупреждены);

  • окна должны быть доступны даже при выключенном JavaScript.

 

Ориентирование…

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

Вы можете помочь вашим посетителям лучше ориентироваться различными способами, в том числе и такими:

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

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

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

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

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

 

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

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

Существует два основных типа тестирования на юзабилити:

  • лабораторный. Лабораторный тип подразумевает, что тестеры наблюдают за посетителями сайта, когда те вручную выполняют определенные задания. Тестеры опрашивают участников и записывают результаты исследований. Результаты исследований могут быть применены к сайту для простоты использования. Преимущество лабораторного тестирования состоит в том, что процессом можно управлять и наблюдать за ним. Основным недостатком лабораторного тестирования является то, что оно может невероятно дорого стоить;

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


внимание!

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

 

Подводим итоги…

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

 
Урок № 3: | Дата: 12.05.2007 | Автор: Коровенков Юрий

Обсудить на форуме…

 
Valid XHTML 1.0! Valid CSS!
Как устроены поисковые системы?

Облик поисковиков

Поисковые системы

Индекс поисковой системы

Полнотекстовый поиск

Учет морфологии

Релевантность

Методы регистрации

Индекс цитирования

 
Заголовки разделов текущей страницы…

Оглавление

Создание постоянного фирменного стиля…

Создание основной навигации…

Вторичная навигация…

Пиктография и используемый язык…

Постоянство размещения элементов…

Выпадающие меню…

Всплывающие окна…

Ориентирование…

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

Подводим итоги…

 

Уроки Web-мастерства

Уроки Web-мастерства

Управление web-проектом

Как более эффективно писать для Сети?

Особенности структуры текста на Web-сайте

Создание компонентов интерфейса в XHTML

Создаем CSS-меню

Основные типы CSS-макетов

Раскрывающиеся CSS-меню

Создание многоуровневых раскрывающихся CSS-меню

CSS-методы замены текста изображениями

Прямоугольники с закругленными углами на основе CSS

CSS-методы центрирования web-страницы

CSS-эффекты наведения указателя мыши

CSS-стили для шрифтов и текста

Навигационные CSS-панели на основе списков

Свободное размещение в CSS

Создание эффекта mouseover при помощи CSS

Таблицы для верстки - это не обязательно зло

Внедрение ролика Windows Media на Web-страницу

Добавление Flash на Web-страницу

 

NotPad++ - текстовый редактор…

 

наверх

 
Контактная информация

Пишите:
Звоните: + 7 (916) 597-36-78

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Copyright (©) 2004— by Yuriy Korovenkov