Сайт может быть привлекательным и простым в использовании. Удобство использования и привлекательный внешний вид не являются взаимоисключающими, и одно не обязательно должно отрицать другого.
Когда я впервые попал в онлайн-мир, я ничего не знал о технологиях, дизайне или удобстве использования. Но по мере развития моего сайта я понял, что у моих пользователей есть особые характеристики — если бы я хотел сохранить их и привлечь больше посетителей, мне пришлось бы заставить свой сайт работать на эту аудиторию!
Теперь, спустя 5 лет, у меня есть успешный сайт и постоянная база пользователей, которая постоянно растет. Как это произошло? Хороший вопрос. Вот история моего успеха — и шаги, которые я предпринял, чтобы сделать мой сайт привлекательным и удобным для максимально возможного числа пользователей из моей целевой аудитории.
С малого начала …
Я никогда не был технократом, это точно. Мне было 35 лет, прежде чем я даже приобрел компьютер, в начале 90-х. Это был подержанный, от профессора университета — почтенного старого 286 года, который был новым в 1986 году и имел колоссальные 40 мегабайт памяти. Он прекрасно работал с программой обработки текстов, за которую я ее купил.
Наряду с моей повседневной работой я выращивал и выращивал канареек, а также проводил реабилитационные работы с оскорбленными или нежелательными птицами различных видов. Это стало моей страстью. Я собирал, редактировал и публиковал бюллетень местного канарского клуба, писал рассказы и статьи для других клубов, а иногда и для популярного журнала о птицах.
Довольно много времени я проводил, обучая новых владельцев птиц заботиться о своих питомцах; в попытке сократить это время я написал серию базовых справочных и информационных листовок, которые стали довольно популярными среди местных клубов и зоомагазинов. Время от времени я включал компьютер и выписывал другой информационный листок или записывал историю, которую не мог забыть.
Это была полная степень моего технического ноу-хау.
Войти: Интернет
В то время как 1994 год приближался к 1995 году, время от времени кто-то упоминал мне быстро растущее явление Интернета. Несколько раз мне говорили, что я буду любить присущий им потенциал для общения, но я бездельничал эту идею. Мне? Почему мой древний маленький пьютер не мог даже правильно запустить модем!
Затем мне дали свободное время в интернет-кафе в качестве рождественского подарка. Сначала я был уверен, что никогда не смогу израсходовать все два часа, но ушел совершенно ошеломленный. Несмотря на то, что я не смог найти ни одного сайта на свою любимую тему — канареек — я был зацеплен. Я понятия не имел, как, но я знал, что я выйду в сеть, как только смогу справиться с этим. И если я не смог найти хороший канарский сайт, то я собирался научиться его строить!
Начало онлайн
К маю 1996 года у меня был новый, почти первоклассный компьютер 266 Pentium II. Он настолько отличался от моего старого 286-го, что мне потребовалось почти 6 месяцев, чтобы освоиться с ним, чтобы почувствовать себя готовым выходить в интернет.
Я обнаружил, что мир сильно отличается от того, который я испытал во время моего первоначального двухчасового набега. Многие веб-сайты, которые я хотел посетить, были трудны для чтения или навигации, или оба, особенно для «новичка», такого как я. Когда мой уровень разочарования вырос, я пообещал себе, что мой сайт будет другим, поэтому я начал обращать внимание на общие элементы тех немногих сайтов, которые я нахожу привлекательными и простыми в использовании.
На этот раз было найдено несколько канарских сайтов, но ни один из них не соответствовал моим представлениям о том, каким должен быть великий веб-сайт для маленьких птиц. Все эти годы, потраченные (буквально) на вырезание и вставку печатного контента для создания готовой к печати копии для информационных бюллетеней и клубных бюллетеней, дали мне достаточно фона в макете страницы, чтобы увидеть то, что многие мастера веб-сайтов так явно не сделали: Способ, которым глаз воспринимает информацию при сканировании поля зрения.
Точный образец, используемый каждым человеком, варьируется в зависимости от личности, культуры и даже его эмоционального состояния, но средние значения по всему населению обычно предсказуемы, и макеты страниц и используемые цвета должны быть разработаны, чтобы помочь и усилить эти движения, а не расстраивать их (попробуйте выполнить поиск по фразе «как глаза сканируют страницы» в вашей любимой поисковой системе для получения дополнительной информации об этом).
Вскоре я обнаружил сайты «создай свой собственный бесплатный сайт», но отверг Geocities как слишком длинные, трудно запоминающиеся URL-адреса и в итоге остановился на iVillage, где я провел как можно больше своего времени в течение следующих двух годы изучения базового HTML и «игры» с веб-страницами.
Исследование пользователей — кто они?
Задолго до того, как я почувствовал, что готов к публичному просмотру, люди начали находить мой сайт. В качестве отправной точки я преобразовал свои информационные листы по уходу за птицами в HTML и разместил их. Вскоре я начал получать электронные письма с просьбой о дополнительной информации — это было здорово, но знал ли я что-нибудь об этом? Часто я делал, и если так, я бы разместил веб-страницу об этом.
Вскоре у меня был такой приток электронной почты, что я с трудом отвечал на все это, поэтому я воспользовался бесплатной услугой доски объявлений, предлагаемой ныне несуществующей интернет-компанией. Таким образом, посетители могут просматривать ответы на чужие вопросы и публиковать свои собственные. Отвечая на их вопросы на доске объявлений, я дал больше людей доступ к информации, которой я делился, и сэкономил мне время, так что все были довольны.
Не осознавая этого, я сделал лучший выбор; Я облегчил людям общение друг с другом и со мной. Что еще более важно, я дал понять, что хочу знать, что они думают, и слышать о том, что они хотят видеть. Я назвал свой новый сервис «Птичья доска», мало понимая, что он станет одним из самых популярных онлайн-форумов по обсуждению небольших птичек.
Примерно в то же время я решил начать использовать бесплатный сервис «Site Meter» для подсчета посетителей (www.sitemeter.com). Я выбрал эту услугу в основном из-за качества статистических отчетов, которые ориентированы на уникальных посетителей и просмотров страниц, а не на «хиты». Мне было особенно интересно отметить, что процент посетителей моего Веб-сайта, использующих WebTV, был в среднем примерно в три раза выше, чем заявленная норма для большинства Веб-сайтов.
Это заставило меня начать публиковать простые опросы. Это всегда полезный способ сбора информации, но при онлайн-опросах важно помнить, что если вы не предложите своим посетителям какой-либо стимул для участия в опросе (например, шанс выиграть приз), вы будете получать ответы только от тех, кто заботится о том, чтобы ответить (поэтому их нельзя принять, чтобы отразить отношение ваших посетителей в целом). Тем не менее, даже такие виды опросов могут предоставить некоторые очень полезные данные.
К моему большому интересу я обнаружил, что полная половина моих посетителей была среднего возраста или более, и что большинство из них имели несколько птиц, причем более 20% респондентов имели тридцать или более птиц. Самым большим сюрпризом было обнаружение, что колоссальные 98% предпочли найти релевантную рекламу, когда они посещали веб-сайт, ориентированный на птиц — факт, который, возможно, имел какое-то отношение к тому факту, что они также сообщали, что тратят в среднем 20-40 долларов в месяц на еда и припасы для их птиц.
Совместимость и дисплей — как это выглядит?
Некоторые комментарии, размещенные на моей новой доске объявлений, заставили меня понять, что мой сайт выглядел совсем не так, как люди, использующие другие настройки, чем мой, и я начал проводить исследование того, как разные браузеры и операционные системы будут отображать мои веб-страницы. В конце концов я обнаружил, что можно спроектировать каждую веб-страницу, чтобы она отображалась одинаково, независимо от того, с какой страницы она просматривалась.
Когда я знал, что мне нужно делать, я мог успокоиться и, так сказать, испачкать руки. Сначала я просмотрел весь сайт и попытался убедиться, что каждая страница отображается правильно, независимо от того, на какой странице она просматривалась. Для этого я:
- проверил все мои страницы в разных разрешениях , от 640 х 480 до 1024 х 728, и все что между ними. Большие сюрпризы здесь! Я настоятельно рекомендую всем веб-мастерам внимательно ознакомиться с тем, как их сайты отображаются в различных условиях. Контент может быть королем — но без дисплея нигде нет.
- проверял представление в Internet Explorer, Netscape и Opera при каждом разрешении с включенной графикой и отключенной графикой, а затем проверялось с помощью бесплатного симулятора WebTV, доступного по адресу www.webtv.com
- начал приставать к моим друзьям, которые используют Mac (поскольку у меня есть компьютер, но не Mac), будучи уверенными, что они знали, что я хотел честности, а не вежливости. Я даже нашел несколько человек с доступом в Интернет на своих портативных устройствах, и посоветовал им посетить мой сайт и сказать мне, что они могли (и не могли) видеть и получать к ним доступ.
Когда все было кончено, он вернулся к чертежной доске, повторяя отзывы по мере необходимости. Этот процесс продолжается, поэтому никогда не ожидайте, что он закончится. По пути вы можете найти плато, но по мере роста и изменения Интернета, вы можете ожидать, что сможете найти что-то, чему можно научиться еще какое-то время.
Новая доска объявлений также оказалась полезной иным способом, которого я не ожидал — я мог спросить людей, как они нашли сайт для использования и какие улучшения ему нужны. Это важная функция, которой не хватает на многих веб-сайтах, и часто намеренно — это может быть много работы, чтобы ответить на комментарии и реализовать предложения! Тем не менее, это должно быть сделано, так как без постоянной обратной связи, в конечном итоге вы будете мертвы в воде.
Постепенно я начал составлять четкое представление о том, как добиться желаемых результатов, чтобы каждый мог получить доступ к моему веб-сайту.
Применяя Уроки
Вот некоторые из особенностей, которые я обнаружил, которые оказывают наибольшее влияние на способность моих посетителей находить и просматривать информацию, которую я пытался сделать доступной для них:
Правильный синтаксис тегов
Это необходимость, а не вариант; в некоторых браузерах отсутствующий кавычка или закрывающий тег могут препятствовать отображению всего содержимого страницы. Это легко сделать, открыв файлы в Arachnophilia или аналогичной утилите редактирования HTML.
Мне нравится арахнофилия по двум причинам: этично, потому что это ПО, а не условно; и практически, потому что он будет выделять теги разметки и ошибки тегов, делая его простым, легким и быстрым для выявления и исправления ошибок.
Очистить тэги Alt
Описательный тег alt должен присутствовать для всех изображений, которые имеют какое-либо отношение к вашему контенту (хотя вам не нужно маркировать прозрачные разделители изображений и тому подобное). Заполнение тегов alt может звучать как выбор нитов для вас, но это может иметь огромное значение для многих людей — и в зависимости от того, кто является вашей целевой аудиторией, это может быть больше людей, чем вы можете догадаться.
В моем случае я знал, что примерно половина моей целевой аудитории (люди, которые держат домашних птиц) были среднего возраста или более, и что многие другие, вероятно, имели медленные коммутируемые соединения. Это означало, что значительный процент моего веб-трафика мог использовать текст или другие альтернативные браузеры, или изображения могли быть отключены для ускорения загрузки.
Я знал из практического опыта, что другая группа посетителей будет включать людей с ограниченными возможностями. За канареками довольно легко ухаживать, и их песня прекрасно поднимает настроение, делая их любимым питомцем людей, которые по какой-либо причине не могут заботиться о кошке или собаке.
Правильное использование цвета
Использование цветов, которые хорошо работают вместе, является не только хорошей идеей, но и должно считаться необходимым. Мы все видели их — те веб-страницы, которые имеют цветовые комбинации, которые вызывают озноб. Если вы похожи на меня, вы не сможете уйти от такого сайта достаточно быстро! Помните также, что до 10% населения в целом имеют красно-зеленую дальтонизм. Этим людям трудно различать эти цвета, поэтому не пытайтесь противопоставить красный и зеленый — это может быть не замечено.
По моему мнению, веб-безопасные цветные диаграммы необходимы для правильного форматирования страниц для одинакового отображения в разных системах. Конечно, вы могли бы просто придерживаться черно-белого — но это невероятно непривлекательно, и зубы людей тоже на грани; таким образом, неиспользование цвета может быть таким же вредным для ваших конечных результатов, как и неправильное использование цвета.
Тестируйте, тестируйте и тестируйте снова, пока не найдете сочетания цветов, которые хорошо работают вместе и легко доступны для просмотра всем.
Оптимизировать изображения
Если есть одно правило доступности веб-страниц, которое веб-мастера, похоже, любят нарушать, это размер изображения. Если вы не можете получить детали, которые вам нравятся, в размере файла, который будет загружен за 15 секунд или меньше для человека, использующего модем 28,8 КБ, то либо используйте меньшее изображение, либо найдите что-то с меньшим размером файла для использования. Разрешение выше 96 точек на дюйм (точек на дюйм) теряется в Интернете, и обычно изображения можно «оптимизировать» (то есть уменьшить размер файла), не сильно влияя на их внешний вид при просмотре в обычном веб-браузере.
Многие графические программы имеют встроенные утилиты оптимизатора, или вы можете использовать один из многих бесплатных сервисов, таких как www.spinwave.com .
Сохраняйте материалы с высоким разрешением для своего локального компьютера — будьте добры к своим посетителям и всегда оптимизируйте фотографии, которые вы публикуете на своем веб-сайте.
Читаемые шрифты
Всегда указывайте альтернативные шрифты, особенно если вы хотите использовать причудливый шрифт в качестве основного! Если человек, просматривающий вашу веб-страницу, не имеет этого шрифта на своем компьютере, и вы не указали альтернативные шрифты, он не сможет прочитать ваше сообщение. Перечислите два или три наиболее распространенных шрифта, таких как Arial, Times New Roman или Helvetica, в качестве альтернативы — лучше, чтобы ваша страница была читабельной, если не совсем красивой, чем великолепной, но пустой текст!
В том же духе, используйте причудливые шрифты, чтобы подчеркнуть простой текст, а не заменить его. Eyestrain уже является достаточно важным фактором в жизни многих веб-серферов, и они не будут вам благодарны, если вы добавите его.
Фиксированная ширина таблицы пикселей в процентах
До тех пор, пока все различные стандарты * ML не уладят и не выберут общие точки соприкосновения, таблицы будут оставаться лучшим способом управления макетами ваших страниц. Установка в процентах ширины таблиц, а не фиксированной ширины в пикселях, позволяет им расширяться или уменьшаться, чтобы соответствовать экрану зрителя по мере необходимости.
Через некоторое время вы начинаете чувствовать, что вы можете сделать с этим, и понимаете, что это не так ограничено, как вы думали. Можно, немного поэкспериментировав, спроектировать страницы, которые будут отображаться аналогично на экране веб-телевизора с низким разрешением или на экране высокого разрешения с разрешением 1024 x 768 пикселей или более. И да, все еще возможно поддерживать интересный контент.
Варианты ссылок
Одна из самых важных деталей — предоставить посетителям несколько способов навигации по сайту. Снова и снова я слышал от веб-мастеров с большим разнообразием опыта, что это излишне и ненужно. Что они забывают включить в свое заявление, так это то, что им это не нужно.
Изучите это утверждение более внимательно, и у вас есть причина, по которой несколько ссылок так полезны: ваш сайт не для вас, а для ваших посетителей! Разные люди думают по-разному, и только вежливо пытаться разместить ваших посетителей так, как им удобно.
Если хотите, укажите это следующим образом: некоторые люди заметят и нажмут на текстовые ссылки, а другие будут искать и определять графическую ссылку каждый раз. Люди, привыкшие использовать один вид ссылок, будут искать его и могут пропустить другие типы ссылок. Но если вы сделаете доступными оба типа ссылок, каждый сможет обойтись легко, не задумываясь об этом дважды.
Оставайтесь на связи
Часто забываемая деталь в поддержании хороших отношений с посетителями вашего сайта заключается в том, чтобы держать их в курсе последних новостей в вашей области, а также событий и обновлений на сайте. Вероятно, самый простой способ сделать это — создать список адресов электронной почты.
У вас есть два основных варианта: вы можете начать рассылку новостей (также известную как «Список объявлений») или создать более интерактивный список («Список обсуждений»). Этот второй тип списка позволяет участникам публиковать вопросы по всему списку, так что каждый участник получает копию и может ответить (или нет) публично (в списке) или лично (вне списка), как они предпочитают.
Списки объявлений намного проще в управлении, но они менее интерактивны, в то время как списки обсуждений гораздо труднее поддерживать и контролировать, и они могут быть хлопотными, если происходит сеанс «пламени» (что, рано или поздно, всегда происходит).
Лично я взял главу из книги Криса Пирилло «Публикация бедных Ричардов по электронной почте» и начал рассылку. «Flock Talk» завершит свой второй год в конце августа и в настоящее время растет со средней скоростью более 7 новых подписчиков в день со скоростью отписки менее 0,5%. Это может показаться не так много, но это лучше, чем в среднем по веб-журналу, и эти цифры могут сложиться быстро!
Если вы собираетесь посвятить себя публикации, онлайн или вне сети, важно помнить следующее: если вы устанавливаете расписание, обязательно сохраняйте его! Задержки в несколько часов иногда неизбежны, но задержки в день и более недопустимы и не должны допускаться. Если вы позволите им, вы обнаружите, что ваша репутация надежности начнет спешить. Помните: плохие новости распространяются в десять раз быстрее, чем хорошие!
Тестирование в реальном времени
Как только вы достаточно довольны своим сайтом, самое время для настоящего теста на кислотность.
Есть несколько утилит, которые будут проверять ваш сайт для вас, и во что бы то ни стало использовать их в своих интересах — чем больше отзывов, тем лучше, когда речь идет о создании простого в использовании сайта.
Но ничто не сравнится с реальным. Если вы действительно хотите знать, как ваш сайт влияет на посетителей, обратитесь к посетителю, чтобы узнать. Я не хочу просить обратной связи на вашем сайте, хотя — мы уже прошли через это. Нет, это последний этап тестирования; из-за отсутствия лучшего термина я склонен называть это «живым» тестированием.
Выйдите и наймите кого-нибудь — желательно кого-то, кого вы не знаете, кого интересует тема, на которой сосредоточен ваш сайт. Заплатите им, чтобы они сели и потратили определенное количество времени на просмотр вашего сайта. Организуйте свое присутствие, но, кроме указания им первичного URL-адреса до начала сеанса, не взаимодействуйте с ними вообще, пока они не закончат просмотр вашего сайта.
Сядьте позади них и немного в сторону, чтобы вы могли легко видеть, что они делают. Делайте заметки о том, что они делают на вашем сайте, и как они это делают. Запишите, в каком порядке они просматривают страницы, сколько времени они тратят на какие страницы, какой контент читается, а какой просто просматривается. Если вы продаете какие-либо товары, попросите их сделать покупку. Особо обращайте внимание на любые действия, которые могут привести их в замешательство или разочарование — это признаки того, что юзабилити вашего сайта в этой области требует немедленного внимания.
После того, как их визит закончится, дайте им интервью или, что еще лучше, предоставьте им форму обратной связи, чтобы они могли заполнить ее — люди, как правило, немного более честны на бумаге или по электронной почте, чем им может быть удобно при личной встрече. Попросите, чтобы на все вопросы ответили как можно больше подробностей, и не забудьте оставить им достаточно места для ввода комментариев.
Вот список простых вопросов, которые я часто задаю:
- Какое у вас сложилось общее впечатление при посещении сайта?
- Что вы думаете о появлении сайта?
- Что вы думаете о содержании?
- Вам было легко найти интересующую вас информацию?
- Удалось ли вам легко получить доступ ко всей информации, которую вы хотели?
- Что вам понравилось на сайте?
- Что вам не нравится в сайте?
- Какие улучшения, по вашему мнению, нужны сайту?
- Вам нравится использование веб-сайта цвета?
- Как вы чувствуете цвета, используемые на сайте? (Я могу гарантировать, что вы будете удивлены некоторыми ответами на этот вопрос)
- Как вы думаете, вы посетите этот сайт снова? Почему или почему нет?
После того, как вы повторили эту «пробную стрельбу» с несколькими разными людьми, вы, вероятно, начнете замечать появление паттерна. Вы можете быть удивлены тем, что вам говорят, и можете почувствовать, что некоторые из них не имеют значения. Это может быть — но если все стремятся поднять один и тот же вопрос, то разумно обратить внимание на то, что они говорят — возможно, они замечают то, что вы пропустили.
Мой список юзабилити
Вот шаги, которые я использовал, чтобы превратить свой сайт в тот, который пригоден для использования и отвечает потребностям моей аудитории.
1. Будьте осторожны, чтобы использовать:
- правильный синтаксис тега,
- Альт-теги изображений,
- оптимизированные изображения и
- цвета, которые хорошо работают вместе и выглядят одинаково под разными ОС.
2. Предлагайте текстовые и графические ссылки и всегда указывайте альтернативные и основные шрифты.
3. Убедитесь, что ваши веб-страницы отображаются одинаково при разрешении экрана от маленького до большого и в разных браузерах. Простой способ сделать это — увидеть, что для таблиц задана процентная ширина, а не фиксированная ширина пикселя.
4. Обратите внимание на посетителей вашего сайта:
- Спросите, что они думают о ваших предложениях, и серьезно выслушайте их предложения.
- Используйте опросы и обратную связь с электронной почтой, веб-формами или досками объявлений, чтобы узнать, кто ваши посетители и что они ищут, когда они посещают ваш сайт.
- Обязательно спрашивайте, какие улучшения они хотели бы увидеть!
5. Поддерживайте связь с пользователями через список адресов электронной почты, как только вы установили с ними отношения. Убедись, что ты:
- держать их в курсе сезонных или последних новостей в вашей области
- информировать их обо всех новых разработках и предложениях на сайте
- пусть увидят, что вы пытаетесь предложить то, что они попросили найти
6. Никогда не прекращайте тестирование и никогда не ожидайте, что ваш сайт будет «завершен»: по определению, хороший сайт — это постоянно меняющаяся, растущая и развивающаяся организация.
7. Воспользуйтесь преимуществами изменчивости Интернета , используя его для ускорения развития вашего веб-сайта, чтобы посетители были довольны и возвращались снова и снова.
Заглядывая вперед
С приближением 2002 года, я уверен, мы увидим еще больше удивительных инноваций, поскольку технологии стремительно развиваются. И все же верно и то, что чем больше меняется, тем больше остается неизменным. Если есть одна область, в которой это высказывание может претендовать на первостепенное значение, это область человеческой природы. Идеи народов могут измениться, но сами они редко меняются.
Научитесь понимать посетителей вашего сайта достаточно хорошо, и вы научитесь понимать, чего они хотят, и как вы можете наилучшим образом предлагать им это так, как им нравится. Держите их счастливыми, и они не только продолжат возвращаться снова, но и начнут приводить своих друзей.
Прежде всего, никогда не прекращайте тестирование и никогда не ожидайте, что ваш сайт будет «завершен»; по определению, хороший сайт — это постоянно меняющаяся, растущая и развивающаяся организация. Хороший веб-мастер учится использовать изменчивость Интернета, используя его для улучшения развития своего сайта или сайта, чтобы посетители были довольны и возвращались снова и снова.