За последние несколько лет я проявляю всё большее интереса к юзабилити и веб-дизайну. Одной из областей, которую, как мне кажется, часто забывают, когда дело доходит до проектирования сайта является дизайн (отображение) URI на этом сайте. Современные CMS позволяют в той или иной степени формировать индивидуальный URI, но по умолчанию эта опция не используется, и в процессе проектирования эта задача часто находится последней в очереди.
Ясность и понятность адреса страницы (URI) - важная составляющая юзабилити сайта. Подавляющее большинство пользователей используют URI для навигации по сети Интернет (у меня есть знакомая секретарша, которая до сих пор серфит, кликая по баннерам - прим. пер.) и важно сделать эту навигацию максимально простой и понятной.
Во-первых, я хотел бы говорить о руководящих принципах, лежащих в основе дизайна URI, то есть поговорить о практической реализации этих принципов.
Примечание: Первоначально я написал эту статью, используя термин "URL", но так как термин "URL" признан устаревшим, то везде в тексте он заменён на "URI". (дополнительная информация от W3C) .
Во-первых, давайте взглянем на некоторые общие принципы проектирования URI.
Базовым постулатом URI является то, что это представление собой объекта данных в Интернете. URI должен быть уникальным, один URI - один объект данных.
Хотя такая цель ставилась всегда, бывают случаи, кгода этого невозможно достичь средствами CMS, и один объект доступен по 2 и более разным адресам. Для исправления ситуации были придуманы теги Canonical в заголовке страницы, указывающие на "правильный" уникальный адрес, дабы сократить количество "дублированного" контента в индексах поисковых систем. И хотя это еще не окончательное решение проблемы дублирования, поисковики настоятельно рекомендуют использовать их при проектировании (подробнее см. на SEOmoz).
URI объекта (документа) должен быть постоянным - это свидетельствует о продуманной информационной архитектуре сайта, о тщательной планировке. Может прийти время, когда вы сочтете необходимым модернизировать свою CMS и изменить структуру URI - в этом случае стоит помнить о необходимости HTTP 301 moved permanently редиректа на новый адрес. Этот редирект укажет браузерам и поисковикам на смену адреса объекта и позволит сохранить Page Rank старого документа по новому адресу.
Использование ЧПУ должно быть основным мотивирующим фактором при проектировании URI - адрес должен создаваться прежде всего в расчете на конечного пользователя. SEO-факторы и простота разработки должны быть на втором месте.
Один из способов сохранить URI удобным является делать его коротким и осмысленным. Это означает использование минимума символов при сохранении удобства пользования им. Таким образом, адрес /about будет лучше чем /about-acme-corp-page. Стремление сократить не должно идти в ущерб удобству пользования - например /a2 еще короче чем /about, но это сокращение не даёт никаких видимых преимуществ и сбивает с толку посетителей.
И наоборот - использование сократителей ссылок приветствуется при обмене адресами - например при публикации их в Твиттере или на Фейсбуке. Хорошо, если есть возможность самостоятельно формировать содержание сокращенного URI для SEO целей - Bit.ly хорошо подходит для этой цели, для Wordpress можно использовать PrettyLink Pro или Short Url plugin.
URI не должен быть основан на малозначимой или не имеющей отношения к контенту информации. Типичным примером этого является использование в URI ID записи базы данных, под которым сохранена запись - например, шариковая ручка отображена по адресу /products/23. Пользователю без разницы, что запись товара в базе равна номеру 23, а вот URI типа /products/pen смотрелось бы гораздо уместнее. Однако часто возникает соблазн использования в URI именно идентификаторов вместо наименований (отдельный случай - проверка уникальности прим. мои), так как это упрощает работу с бэкендом CMS при разработке, одновременно ухудшая читаемость адреса при использовании веб-приложения.
Очень легко проверить дружественность URI - попробовать продиктовать его вслух, например по телефону: моё резюме по адресу сайт точка ру слэш биоили моё резюме по адресу сайт точка ру слэш вэ бэ бэ двадцать девять дубль-вэ
Структура URI должна быть последовательна - то есть раз избранный формат должен использоваться во всех разделах сайта. Использование продуманной структуры только в некоторых разделах сайта оставляет впечатление от сайта как от непродуманного и недоделанного. Если вы улучшаете структуру URI на работающем сайте, изменяете - не забудьте про 301-й редирект для пользователей, заходящих по старым ссылкам, как уже упоминалось выше.
URI, относящиеся к последовательным записям, должны быть формировтаься таким образом, чтобы пользователь мог понять их структуру и вызывать произвольные документы, самостоятельно вводя адрес в адресную строку.
Например, если /events/2010/01 показывает ежемесячный календарь с событиями, с января 2010 года, то:
URI должен содержать слова, которые явно содержатся на странице и являются ключевыми. Таким образом, если URI для записи в блоге с длинным заголовком, тот в URI желательно размещать слова из заголовка (и не забудьте научиться создавать правильные заголовки! прим. моё). Например, если пост озаглавлен "Моя поездка в Best Buy за картами памяти", то URI может быть /posts/2010/07/02/trip-best-buy-memory-cards или нечто подобное. Эта же методика, по-видимому, является хорошим фактором улучшения SEO-характеристик веб-приложения.
Мы рассмотрели некоторые руководящие принципы, лежащие в дизайн URI. Теперь давайте посмотрим на некоторые технические реализации этих принципов.
URI не должен содержать .html, .htm, .aspx или другие расширения файлов, предназначенные только для отображения базовой технологии. Конечного потребителя мало заботит, что ваш сайт был написан на ASP.NET (.aspx), ColdFusion (.cfm), или использует Server Side Includes (.shtml) - по крайней мере, большинству конечных пользователей это мало интересно. Такая бесполезная информация в адресе - это лишняя работа при наборе адреса и лишняя возможность совершить ошибку в наборе.
Единственное исключение из этого правила является добавление URI с расширениями типа .atom, .rss, или .json, которые необходимо явно указывать для указания формата данных, или в случае обработки заголовков страницы директивами сервера, например Accept HTTP.
Префикс www - лишний в адресе, он не несет никакой полезной информации (gopher мёртв, детка!).
Однако многие пользователи по привычке набирают адреса сайтов с www перед доменным именем - такие запросы тоже желательно перенаправлять с помощью 301 редиректа на адрес домена без www.
URI должны быть в следующем формате: domain.com/[key information]/[name]/?[modifiers]. /[key information]/ - это не идентификатор объекта, а его общий признак, это может быть названием категории (например "статьи", "комментарии"), названием глобальной родительской категории (например, "технологии") или более общий признак, такой, как дата. Количество уровней /[key information]/ должно стремиться к минимуму, чтобы избежать чрезмерной вложенности, насколько это возможно. В конце концов, URI должен формироваться по убыванию иерархии. Например: домен → тип → категория → название. Пример: http://domain.com/posts/servers/nginx-ubuntu-10.04. В случае использования адресов, содержащих дату, формат должен следовать нисходящей иерархии: год → месяц → день. Пример: http://domain.com/news/tech/2007/11/05/google-announces-android. (прим.: Это несколько не соответствует предыдущему замечанию об уровнях вложенности, целых 3 уровня для даты - перебор! Я стараюсь использовать дату в URI в таком формате /2007-11-05/).
Для включения вашего сайта в список новостных партнеров Google придется при проектировании учитывать требования Goggle к формату URI.
Все символы должны быть в нижнем регистре. Попробуйте ввести вручную URI со смешанным регистром без ошибок с первого раза - это малореально!
Если вы переделываете движок работающего сайта, URI которого содержали символы в разных регистрах - то позаботьтесь добавить в обработчик ЧПУ модуль, перенаправляющий все такие запросы на URI в нижнем регистре.
В некоторых CMS встречаются команды серверу, передаваемые серверу методом GET - такие как show, delete, edit. Недеструктивные команды (которые не изменяют объект, типа команды выдачи печатной версии например) можно передавать в URI, все прочие рекомендовано передавать только с помощью метода POST.
URI, содерждащие текст. например заголовок статьи, могут содержать различные типографские символы, не подходящие для использования в адресной строке, их необходимо преобразовывать:
Не забываем про URLencode перед выводом символов в URI (зачем это - читаем в Вики).
Источник - статья Guidelines for URI Design, перевести которую мне захотелось после очередного просмотра своей заметки Идеология формирования ЧПУ 3-летней давности. С вами были автор перевода kikaha и Булко Тимофей с TimNet.ru в качестве приглашённой звезды, вдохновляла на перевод консультация юриста бесплатно - так что спать будем спокойно и при своих :)
Я больше года захожу в магазин "Новатек" - не как покупатель, просто позырить, сравнить цены, описания, отзывы - старый ноут уже на ладан дышит, сталбыть пора подыскивать новый. Путь стандартный - Яндекс.Маркет, подбор параметров желаемого коня - и просмотр предложений от продавцов: так я и наткнулся на этот украинский магазин. Наткнулся и в принципе пока в познавательных, а также в покупательных целях пользуюсь в основном только им - цены реально самые низкие по Украине, выбор приличный, юзабилити в порядке, дизайн лёгкий и ненапряжный - а я покупатель очень придирчивый :) Короче, после 2-3 месяцев колебаний свой новый Acer Aspire 5542G c гиговой видеокартой (не Alienware, но близко, близко) заказал у них и пока не пожалел об этом (хотя сумку и мышку впарили туфтовые, но тут сам виноват - нехрен было соглашаться на уговоры не видя товара, это чисто менеджеру бонус, развел по телефону за полминуты).
Тем не менее это не реклама этого безусловно неплохого магазина... просто жара спала и начал шевелить попой, находясь в рассуждении - как бы написать идеальный интерфейс интернет-магазина для текущего клиента, ибо ни один из описанных в недавнем обзоре магазинов меня особо не впечатлил.
На первой картинке - товарное меню на сайте магазина "Новатек", 4 пункта. Фотоаппараты и планшеты меня не интересовали, я кликал по первым 2-м пунктам и рылся в тамошних недрах. А сегодня я, человек с неплохим в общем-то зрением, впервые обратил внимание на 5-й пункт в товарном меню - пункт "Ещё", нажав на который, обнаружил, что всё это время мне было доступно около 10% ассортимента! Нет, я точно не интересуюсь покупкой новомодного блендера, или хлебопечки - однако в апреле-мае я искал себе монитор, большой и дорогой, искал в разных магазинах - а в этом мне даже и в голову не пришло!
Вот такое вот меню: из 4-х пунктов и 5-й, скрывающий кучу всего интересного - но такой неочевидный и незаметный. Интересно - сколько покупателей вместе со мной не заметили, или не обратили внимания на буковки мелким шрифтом и бледную стрелочку - и понесли свои денежки куда-то ещё?
Ребята тратят деньги на интернет-маркетинг, оптимизируют код своего магазина (кстати - почти идеал, мне понравилось внутри), снижают цены до минимально возможного чтобы завоевать рынок... платят Яндексу за попадание в Маркет (а это тот ещё геморрой, чисто технически), да и кроме Яндекса раскрутка сайта тоже имеет место - и всё это прекрасно работает: люди заходят... и не видят товара. Нет, надеюсь это не epic fail - просто хочу напомнить себе и своим читателям, что одна маленькая пуговка деталь может принести вполне немаленькие убытки - только из-за того, что пожалели денег или поленились провести юзабилити-тестирование!
Сама идея такого меню мне очень нравится - не захламляется дизайн а при необходимости в скрытый до поры раздел можно нагрузить много всякого - но существование этого раздела должно быть очевидным и визуально заметным. Необходимо выделение этой злополучной ссылки "Ещё" цветом, шрифтом, дополнительной пиктограммой - как угодно, но покупатель должен нажать на неё в своё первое же попадание на сайт!
Мало кто знает и еще меньше кто использует появившуюся в HTML5 фичу - предварительную загрузку страниц. Link prefetching работает во всех современных браузерах, поддержка в IE ожидается к 2020 году, ждите!
Copy to clipboard - бывает нужно вставить в буфер нечто одним кликом. Работает во всех браузерах, чистый джава-скрипт, без флэша (меня поправили - с флешем!).
Lightbox me! - еще одна реализация лайтбокса, с jQuery ясен пень. Красивая.
Мы тут вовсю воюем с мелкомягкими за нормальную поддержку спецификаций, забывая, что всё больший кусок рынка потихоньку откусывают браузеры мобильные. Смартфоны тихой сапой завоёвывают мир, а мужики и не в курсе! Начинаем готовиться: mobile image gallery - для идеального отображения галереи картинок на вашем iPhone 4G, если он у вас есть, разумеется! А если вы, как и я, работаете за еду и доступ к свежей Футураме, то протестировать галерею можно в десктопном эмуляторе смартфона: MobiOne. Приблуда для разработки страничек, заточенных под мобильные просмотрщики, под Win, бесплатная.
Smashingmagazine опубликовал подборку полезных скриптов, основанных на jQuery, некоторые я уже публиковал здесь, однако часть из новых представляются мне весьма полезными, особенно в плане работы с текстом.
xml2array - иногда бывает необходимо разобрать .xml-документ средствами php, например rss-feed или просто какой-нить особо хитрый конфигурационный файл - и не всегда это получается сделать с наскоку. В таком случает этот парсер лучше иметь в загашнике.
Мы будем жить теперь по-новому: с HTML5, CSS3, блекджеком и шлюхами (я уже говорил, что вышла новая Футурама? Я счастлив, сэр!) Готовим шаблон для супер-современного сайта по последнему слову неутвержденных пока еще спецификаций: часть 1, часть 2. Кому мало идей - HTML5Rocks в помощь!
Loginza.ru - ребята постарались и сделали наконец OpenID ближе к народу, молодцы! Кроме виджета для вебмастеров есть в наличии плагины для WordPress и PhpBB.
И пара слов о себе - сделал несколько сайтиков, которые рука не поворачивается вставить в портфолио, похоже, это становится трендом - не учить клиента прекрасному, а просто если он хочет херни - дать ему херню на всю сумму =( Кажется, это называется профессионализм... Полку сайтов, домены которых через год никто не продлит, прибыло, а я получил +5 к опыту и -10 к обаянию, и заодно понял, почему большинство государственных сайтов такое УГ.
Давно не делал подборок только для вебмастеров, исправляюсь. Итак, на этой неделе делаем сайты:
И новости культуры: вчера был расстрелян министр культуры Будущее MySQL в серьезной опасности! Так охарактеризовал ситуацию с покупкой Sun создатель этой широко известной открытой БД Майкл Видениус. Известно, что компания Oracle пытается купить Sun, и так как Sun приобрела в прошлом году MySQL, эта СУБД перейдет в собственность Oracle после одобрения сделки Европейской Комиссией. После покупки Sun, Oracle не обещает:
Сохранить весь код MySQL под открытой лицензией; Не добавлять закрытые модули/утилиты к существующей СУБД Не повышать стоимость лицензии и техподдержки... читать полностью
С одной стороны, на одной MySQL свет клином не сошелся, с другой - однако, прецедент назревает нехороший! Интересно, как скоро после сделки (95%, что она успешно завершится) жадные лапы капиталистов потянутся к Postgress?upd - не ссать, сделка, как я и ожидал, состоится, но Oracle пообещала быть паинькой!
CU3ER - это 125 Kb.swf файл, позволяющий манипулировать картинками в 3D, т.е. в 3 измерениях, по сути это многофункциональный слайдер. Управление изображениями осуществляется с помощью подготовленного .xml файла с записанными инструкциями. Слайдер снабжен большим количеством функций, позволяющим произвести большое впечатление на смотрящего, другими словами - это "богато" смотрящийся элемент интерфейса для rich-media сайтов, например для сайтов-визиток, промо-сайтов, создание флеш презентаций или страниц с полноэкранными баннерами-презентациями.
Пользовательский интерфейс улучшает общее восприятие изображения, позволяя пользователю получать полезную информацию (такую как текстовое описание слайдов или доп. информацию при загрузке файлов) и взаимодействовать с CU3ER с помощью навигационных элементов управления слайд-шоу.
3D переходы содержат функции, превращающие набор картинок в уникальные композиции, переходы между слайдами также уникальные, привлекательные и настраиваемые. Диапазон доступных параметров предлагает почти неограниченное количество комбинаций для создания уникального облика и оставляет у пользователю приятные впечатления от просмотра.
Бесплатный, легко настраиваемый - CU3ER легко займёт своё место в осмысленном интерфейсе, или на худой конец порадует требовательного бестолкового заказчика, который сам не знает чего хочет, но "чтобы круто, современно и за копейки" :)