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

1800 – Лицом к лицу

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

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

1900 – Читайте все об этом!

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

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

1960 – Мы будем осведомлены

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

За исключением этого, в течение 1920-х годов, новый источник информации, начал привлекать внимание все большего количества людей – это радио. Неожиданно, но теперь можно слушать чужой голос на расстоянии до 100 километров. Но самое главное, вы можете получить самую последнюю информацию в живую (в прямом эфире). Это был еще один огромный этап эволюции в истории информации. 1960-е года характеризовались двумя доминирующими источниками информации: LIVE новости на радио и более подробные новости на страницах газет и журналов.

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

1990 – Настраиваться на завтра

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

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

1998 – Рассвет Интернета

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

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

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

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

2004 – Я решаю, что делать!

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

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

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

2004 стал годом, когда обычный Интернет начал сдавать свои позиции. Началось зарождение нового явления – Социальная Сеть. Эта концепция постепенно набирала силу параллельно с концепцией блогов. Это был легкий, простой и доступный способ для тех, кто делился своими идеями. И вы могли оставить свой комментарий. Впервые, каждый мог создать свою собственную информационную среду, при этом, не зная “технической стороны” вопроса.

Информация постепенно трансформировалась из инструментов для профессионалов, в инструмент для всеобщего пользования.

2007 – Я тоже

Спустя 3 года Интернет, как социальный элемент, стал настоящим рупором и мощным средством коммуникации людей. Впервые за долгое время, телевидение перестает быть основным источником информации, а газеты – борются за свое право на существование.

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

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

2009 – Все социальное

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

В течение последних 210 лет мы стали свидетелями удивительных процессов эволюции информации. Мы могли:

1. Получать информацию из разных уголков мира
2. Получать ее в Живую
3. Смотреть ее в Живую
4. Принимать решение, когда и что смотреть
5. Принимать непосредственное участие в формировании информации, оставлять комментарии.
6. Публиковать свою собственную информацию,
7. … и в 2009 году … быть информацией.

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

Будущее

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

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

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

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

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

2020 – Все традиционное мертво

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

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

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

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

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

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

Вместо чтения 5 различных статей на эту же тему, вам будет предложена одна, содержащая наиболее важные моменты.

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

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

Будь готов!

Спросите у самого себя. Вы все еще пытаетесь стать журналистом, чтобы написать о своей продукции? Вы еще делаете сайт? Является ли вашей социальной сетевой стратегией создание страницы в Facebook? … или… Становитесь ли вы, естественной частью потока информации?

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

Источник: Baekdal

Группа исследователей Калифорнийского университета, что в Лос-Анджелесе, выяснила, что поиск в интернете стимулирует центры мозга, отвечающие за принятие решений и комплексное мышление.

Центры мозга, которые активизируются при чтении книг опытным интернет-пользователем

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

Профессор Калифорнийского университета Гари Смолл сказал: “Такое простое ежедневное действие как поиск в интернете улучшает мозговую деятельность у людей пожилого возраста”

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

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

Ведущий научный сотрудник профессор Гари Смолл отметил: “Результаты наших исследований доказывают, что компьютерные технологии имеют физиологическое воздействие и приносят потенциальную пользу людям среднего и пожилого возраста”.

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

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

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

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

Однако новички в интернете еще не до конца усвоили стратегии успешного поиска.

Мозговая деятельность новых интренет-пользователей: одинаковая при чтении и использовании интренета

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

Исполнительный директор Фонда исследований болезни Альцгеймера Ребекка Вуд отметила: “Эти поразительные результаты, дополняющие предшествующие исследования, говорят о том, что можно снизить риск развития деменции у людей среднего и пожилого возраста с помощью регулярных упражнений, стимулирующих умственную деятельность”.

Пожилые интернет-пользователи – “седые путешественники по сети” – именно это и делают.
Снижают риск развития деменции и частые социальные контакты, регулярные упражнения, а также сбалансированная диета.

Глава же отдела исследований в Обществе болезни Альцгеймера доктор Сузанна Соренсен высказала такое мнение: “Послание “используй свой мозг или теряй” может позитивно влиять на активность людей, но существует очень мало доказательств, что тренировка мозга кроссвордами, играми или другими видами деятельности повышает когнитивные функции и снижает риск развития деменции”.

Источник: BBC News

1. Ъ-метод – не использовать нестандартные шрифты, достаточно в CSS сказать body {font-family: sans-serif;} и не морочить себе голову.
2. Быдло-метод – нарезать из ЖПЕГов, картинок с заголовками, ужать посильнее, что б появилась размытость и вставлять вместо текста картинки. Достаточно популярный на наших просторах метод.
3. W3C-метод – используем @font-family и наслаждаемся красивыми шрифтами без всяких заморочек. Пока этот метод не рассматривают, как рабочий, по причине слабой поддержи со стороны браузера.
4. sIFR – клевая вещь, наиболее употребляемая на сегодняшний день, но как недостаток – требует наличия Flash-плагина. Хотя это трудно назвать недостатком, но если есть инструмент, позволяющий обойтись без плагинов, то это не может не радовать.
5. Cufón – самое то. Относительно новый метод, который показывает превосходные результаты. Он и есть герой этой статьи.

Для любознательных: есть еще один способ, практически полный аналог куфона — typefaces.js, но сегодня мы будем говорить не о нем.

Что за куфон?

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

1. Не требовать плагинов, шмагинов – используются только средства, нативно поддерживаемые браузером (из этих средств, используются JavaScript, SVG и <canvas> для нормальных, VML для IE)
2. Совместимость – должен работать в всех распространенных браузерах.
3. Простота использования – минимум приготовлений и конфигурации.
4. Скорость – она должна быть достаточно большой, даже для объемных текстов.

Как работает

Cufón состоит из двух независимых частей – генератора шрифта, который преобразовывает стандартный шрифт (в форматах, TTF, OTF) в некоторый промежуточный формат, который будет использоваться далее. Вторая часть – движок рендеринга на JavaScript.

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

Попробуем

Попробуем все это на деле. Для начала возьмем файл со шрифтом, у меня есть для примера шрифт Rokwell, в обычном и жирном начертании. Идем по адресу http://cufon.shoqolate.com/generate/ и пихаем в форму имеющиеся у нас файлы. Далее, по желанию, отмечаем некие дополнительные настройки и получаем файл, в моем случае это был Rockwell_400-Rockwell_700.font.js Название нам показывается, что файл содержит наш шрифт в двух начертаниях, наглядно, но как-то долго такое в тег скрипт прописывать…

Следующим шагом будет скачивание собственно дистрибутива Cufón, который в сжатом виде занимает каких-то 14 КБ. http://cufon.shoqolate.com/js/cufon-yui.js

Подключаем оба этих файла в наш документ, как самый обычный JavaScript.

<script type="text/javascript" src="./js/cufon-yui.js"></script>
<script type="text/javascript" src="./js/Rockwell_400-Rockwell_700.font.js"></script>

Теперь выбираем, какие именно элементы страницы мы хотим прорисовать нашим красивым шрифтом. Для примера все заголовки H1, нет проблем:

<script type="text/javascript">
    Cufon.replace("h1");
</script>

Да и это все, что от нас требуется. Цвет, размер и другие параметры для прорисовки берутся из правил CSS. Если они конечно заданы.

Если мы хотим заменять не только H1, но и какие нибудь «ul.menu>li.active>a», то нам потребуется сторонняя библиотека, которая умеет делать выборку по селекторам. Дело в том, что сейчас мало кто обходится без таких JavaScript библиотек, как Prototype, jQuery, MooTools или Dojo, а потому создатели решили не делать свою библиотечку избыточной и предлагают нам воспользоваться сторонней. Правильно предлагают! Итак, при использовании одной из вышеприведенных библиотек, нам просто надо подключать их в документе раньше чем Cufón, тогда он сам разберется что к чему и можно начинать использовать более сложные запросы.

Особая заметка для людей, которые пекутся о пользователях IE. Разработчики рекомендуют вставлять следующий код, сразу перед </body>, либо перед вызовом любого внешнего скрипта, например Google Analytics:

<script type="text/javascript"> Cufon.now(); </script>

Это должно избавить IE от некоторой задержки в прорисовке шрифтов.

Использование нескольких шрифтов.

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Frutiger_LT_Std_400.font.js" type="text/javascript"></script>
<script src="Myriad_Pro_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
    Cufon.replace('h1', { fontFamily: 'Frutiger LT Std' });
    Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
</script>

Если не указать дополнительных настроек при вызове, то будет использован последний загруженный шрифт (Myriad_Pro_400).

И еще все страницы, где используется Cufón – должны быть в кодировке UTF-8, либо обратно совместимые с ней, например US-ASCII. А если ваши страницы все еще в CP-1251 – ваши проблемы.

Тонкости

Если при вызове рендера мы хотим указать для текста какие-то дополнительные визуальные настройки, то это следует делать так:

Cufon.replace("ul.menu li.active a", {color:'#000000'});

Это может понадобится например в следующем случае:

Cufon.replace(”ul.menu li a”);
Cufon.replace(”ul.menu li.active a”, {color:’#000000′});
При вызове первого рендерера, Cufón правильно определит цвет для всех ссылок в меню, согласно правилам CSS, однако он не будет ходить дальше и выяснять, есть ли у нас дальше какие-то отличия, потому одна из ссылок может быть показана белым цветом на белом фоне. Для исправления подобной ситуации и служит вызов второго рендерера.

Подобным образом можно прописывать не только цвет, а и практически все свойства CSS, относящиеся к тексту. Кроме того, есть возможность заполнить текст градиентом, но это непонятно зачем нужно, а кому очень уж хочется, отсылаю к странице руководства, где это хорошо описано.  http://wiki.github.com/sorccu/cufon/styling

Еще стоит обратить внимание на тот момент, что замена шрифтов происходит только в момент вызова рендерера:

Cufon.replace("h1.alala");

Произведет замену для всех элементов h1 с классом alala, если вы в дальнейшем с помощью скрипта присвоите класс alala, для другого h1, то там замена текста не произойдет! Так что не забывайте после манипуляций производить вызов рендерера.

Пример

Было:

Стало:

Ссылки

Страница проекта на gihub
Документация по части визуального офрмления при помощи CSS
Генератор шрифтового файла

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

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

Огромные вертикальные раскрывающиеся блоки на сайте foodnetwork.com; обратите внимание на кнопку закрыть (”х” в верхнем правом углу).

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

Где использовать выпадающее меню

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

Организовать категории в блог

Вы увидите множество блогов, которые используют выпадающее меню для организации категорий и тегов. Почему? Блоги содержат большой объемом информации, поэтому страница должна быть как можно более “чистой”, чтобы уместить весь контент.
Выпадающее меню, в конечном счете, помогает объединить все ссылки (категории) или внешние элементы (боковые блоки).

Отображать продукты в интернет-магазине

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

Показать блоки

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

Лучшая реализация

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

Избегайте использования меню более двух уровней вложенности

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

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

Вариант 1: Hover Меню (меню отображается при наведение курсора мыши)

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

Вариант 2: Clickable Меню (меню появляется при клике на нем)

С другой стороны, многие утверждают, что Clickable меню лучше, поскольку оно является гораздо более удобным. Причина? Потому что в режиме Hover пользователь должен все время держать курсор мыши над меню. Если пользователь теряет фокус, то оно закрывается. Поэтому лучше использовать выпадающее меню, которое активируется после клика по кнопке, а затем закрыть его, нажав на кнопку еще раз.

Выпадающее меню на сайте Digg активируется/деактивируется по клику, на него следует обратить внимание.

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

Задержка деактивации при наведении мыши

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

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

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

Добавить Hover эффект в меню

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

В следующем примере, на главной странице MediaTemple, меню открывается при наведении

Плавные Переходы

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

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

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

Удалить Подсказки

Конечно, при разработке выпадающего меню всегда существует много деталей, которые впоследствии сказываются на юзабилити. Одним из важных факторов является игнорирование использования всплывающих подсказок (прим. пер.: атрибут title для тега A). Вы всегда должны удалить подсказки из ссылок с раскрывающимся меню. Причина? Всплывающие подсказки только мешают, а иногда даже блокируют работу других ссылок меню.

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

Техника верстки

Использование фона может сделать меню более привлекательным. Однако фон должен быть таким, чтобы на нем легко читался контент. Вот несколько способов “оживить” меню, без чрезмерного использования фона.

Используйте списки при верстке

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

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

С другой стороны, сайт The Washington Post имеет очень плохое выпадающее меню. Здесь существенно не хватает расстояния между элементами, и поэтому ссылки выглядят достаточно беспорядочными и неудобными.

Hover эффект на пунктах меню

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

Полупрозрачный фон

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

Сохранить общий стиль

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

Смотрите выпадающее меню в следующем примере.

Плохая реализация выпадающего меню

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

Navigant Consulting

Это меню плохо сверстано и нефункционально.

Panasonic

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

Toshiba

На сайте Toshiba меню слишком маленькое, что не соответствует хорошей практике.

LG

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

Chrysler

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

Sun

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

Creative Labs

Следующее меню слишком беспорядочно и не имеет задержки перед закрытием, так что это не очень удобно.

HP

Еще одно недостаточно удобное меню.

Alienware

Черное меню на черном фоне делает этот меню не удобным для использования.

Хорошая реализация выпадающее меню

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

Sony

Хорошо разработанное Hover меню.

ActionEnvelope

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

.

Helmy Bern

Меню в красивом стиле, с эффектом плавного исчезновения.

RedBrick

Это меню имеет хорошую верстку и легко читаемый текст.

REI

Очень широкое меню, поэтому легко удерживать курсор мыши в фокусе.

Philips

На сайте Philips большое и удобное выпадающее меню.

Walmart

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

Samsung

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

Epson

На Epson показано другое удобное меню.

Mini Cooper

Этот сайт использует выпадающее меню с задержкой при закрытии.

Gateway

Вот еще один удобный выпадающий элемент.

Asus Global

Хорошее меню с задержкой перед исчезновением.

Intel

Очень простое и понятное выпадающее меню.

Target

Хорошо организованное меню с задержкой перед закрытием.

Garmin

Это раскрывающееся меню простое, но функциональное.

Logitech

Раскрывающееся меню в приятном стиле.

Incase

Это меню очень простое, но вполне выполняет свои функции.

evelMerch

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

IBM

Многоуровневое меню, с небольшой задержкой.

EA

Очень простое и хорошо сверстанное раскрывающееся меню.

ACTIVISION

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

Yahoo! Finance

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

Источник: Smashing Magazine