10 главных ошибок веб-дизайна

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

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

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

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

3. Материалы без даты
Если в статье, пресс-релизе или другом материале не указана дата, пользователи понятия не имеют насколько актуальна прочитанная ими информация. Замечательно, если вы храните свои материалы в архиве. К примеру, 80% внимания читательской аудитории сайта Alertbox приходится на старые статьи, которые пользователи до сих пор считают полезными. Но некоторые факты и рекомендации очень сильно привязаны к дате. Например есть статьи, где я рекомендую пользоваться определенной версией продукта в течение следующих двух лет. Разумеется, мы имели в виду два года с момента написания статьи; если читатели не знают дату написания статьи, они не поймут, стоит ли им следовать рекомендации или отвергнуть ее как устаревшую.

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

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

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

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

Левая картинка взята с сайта whitehouse.gov (whitehouse.gov). На ней изображены президент США, министр внутренних дел и директор национального парка, гуляющие на фоне гор Санта-Моника. Догадались бы вы об этом, если бы я вам этого не сказал? На маленькой фотографии видны только три гуляющих человека. Сложно догадаться что они гуляют по территории парка, и уж совсем невозможно угадать, какой именно это парк.

Фото справа взято с сайта cnn.com, который как правило отлично справляется с маленькими изображениями, что помещены на главной странице сайта. Данное же фото было иллюстрацией к статье о наводнении. Несмотря на то, что размеры фотографии 65 х 49 пикселей, вы ясно можете разобрать, что на ней изображено.

Если вы помещаете фото на веб-сайт:

* Оставляйте на эскизе меньше людей, мелких объектов, и выбирайте менее сложные композиции.

* Осветляйте фон за объектами крупного плана.

* При изготовлении эскизов пользуйтесь техникой нюанса. Не просто уменьшайте всю фотографию целиком, а выделите в ней важный фрагмент и уменьшите только его.

5. Слишком большой текст в атрибуте ALT
Все больше сайтов стали обращать внимание на посетителей с физическими недостатками и следуют данным нами советам, например вставляют текст в атрибут alt у изображений.

К сожалению некоторые сайты не понимают, что текст в атрибуте alt является элементом пользовательского интерфейса, а не просто вынужденной данью политкорректности. Текст в атрибуте alt должен помогать слепым пользователям (или тем, у кого отключены изображения) работать с сайтом. Этот текст должен описывать, какую роль играет данное невидимое изображение, и что пользователям надо знать о нем, чтобы эффективно работать с сайтом. Совсем нет необходимости описывать детально, что там изображено на картинке.

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

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

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

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

Что будет, если я поеду в поездку в воскресенье, а не в субботу? Как это отразится на цене моего билета на самолет? На большинстве сайтов турагенств, чтобы ответить на данный вопрос, мне надо начать все сначала, снова пошагово указать все сведения о поездке и потерять результат первого запроса.

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

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

7. Слишком длинные списки
Раньше веб-сайты предлагали две или три вещи. Теперь же сайт с тысячами или миллионами товаров — вполне обычное дело. Прекрасно, но только списки этих товаров стали очень длинными и с ними трудно работать.

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

Что для этого нужно?

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

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

* Критерии должны помогать отсеивать товары, которые посетителя не интересуют. Например:

o "показать только те товары, которые могут быть доставлены в канун Рождества"

o "Показать только те туфли, у которых есть 10 размер"

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

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

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

* Слишком требовательные формы. Если в вашей форме информация разделена на части, а пользователь привык видеть ее как единое целое, пользователю придется тратить лишнее время на перемещение курсора по полям формы. Типичный пример — форма, где имя и фамилию просят ввести в два отдельных поля вместо того, чтобы пользователь вводил свое полное имя в одно поле, что было бы гораздо быстрее. А вот еще один пример:

номер телефона: () -

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

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

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

Веб-юзабилити: шаг вперед, два шага назад

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

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