В этой части я приведу примеры мировых лидеров Web 2.0 и подробно разберу их ошибки и достоинства. Эта информация пригодится тем, кто работает над созданием своего проекта в стиле полноценного ресурса веб 2.0. Лучше учиться на ошибках других, чем самому наступать на грабли, и статья поможет в этом обучении. Зная как правильно построить сайт, рассматривая подробное описание технических решений лучших ресурсов в сети, вы добъетесь максимальной отдачи в первые недели запуска своего проекта.
Каждый проект будет разделён на 4 стороны обзора: краткое описание проекта, внедрённые идеи, недостатки и варианты решений.
Что же должно присутствовать на сайте Веб 2.0, чтобы он считался “вебдванольно-юзабельным”:
Дизайн, пожалуй, наименее важный показатель вебдванольности, но это самое первое на что обращают внимание пользователи. Поэтому сбрасывать его со счёта мы не будем:
Социальный сайт новостей. На главной странице можно увидеть новости/истории/статьи за которые проголосовало большее количество пользователей.
Вот пример одной из новостей, которая выбралась в топ дигга.
которые означают “Закопать новость” и “Проголосовать за новость” соответственно. По сути, пользователи, нажимающие на эти кнопки, выполняют работу модераторов, они управляют контентом в самом прямом смысле.
Кнопки справа: 30 Days, 7 Days, Top in 24 Hr, 365 Days…, скриншоты из новостей, категории вверху в шапке и так далее.
Все они хорошо структурированы и позволяют получить максимум информации, которую хотят видеть пользователи, и эта информация доступна при наименьшем количестве кликов. Что улучшает восприимчивость ресурса и ставит его в глазах пользователей как юзабельный и простой сайт.
Также хочу заметить, что на дигге используются мягкие цвета, на всех элементах, кроме аватаров, картинок к новостям и рекламы. Т.е. самые важные элементы вынесены на первый план, привлекая к себе больше внимания и отдавая дополнительные баллы в пользу социализации сайта.
Вверху в видном месте находятся две очень полезные кнопки.
Поиск настолько функционален, что предоставляет возможность отыскать практически любую новость, насыщенную информацией о самой новости уже до того, как пользователь прочтёт заголовок этой статьи.
Значок RSS-подписки также наделён большой функциональностью. Он позволяет подписаться не только на лучшие новости, а и на любой запрос, осуществляемый внутри Дигга. Это например поиск по конкретному ключевому слову или подписка на определённую категорию.
Естесственно пользователи взаимодействуют не только с самим контентом на сайте, а также и с другими пользователями сайта. Например в комментариях юзеры отдают голоса за каменты, соглашаясь с ним, тем самым давая дополнительные баллы пользователю, либо закапывая, что ухудшает его репутацию.
- Взаимодействие с Сайтом
- Социализация
- Бесплатность
- Пользователи Создают Контент Сами
- Простота
- Аякс
- Поисковые Системы
- RSS-синдикация
- Веб-службы и XML
- Блочная Вёрстка и СЕО Френдли Направленность
- Кроссбраузерность
- Закруглённые Углы
- Мягкие Цвета
- Логотип
Как видите внушительный список элементов Веб 2.0. Теперь разберём то, без чего дигг решил обойтись.
Отсутствующие Элементы Веб 2.0
На сайте отсутствуют теги. Интересно чем руководствовались создатели сайта когда решили отказаться от них, но мне лично очень не хватает меток.
Контент разделяется сейчас по категориям и можно предположить, что отказ от меток в пользу категорий обусловлен стремлением создателей упростить юзабилити сайта по максимуму. Это их выбор, но я бы посоветовал вам использовать метки на своих проектах.
В дигге у пользователей есть профили. Но они направлены на социализацию и обделены возможностями социального хостинга. Нет многих привычных вещей для пользователей. Поэтому этот элемент мы тоже заносим в минус диггу.
Также на дигге не используются сервисы Mush Up. Но для дигга они были бы лишними. Дигг тем и хорош, что является независимым ресурсом и уже на его основе делаются многие mush up сервисы.
В графике можно было бы поболее использовать 3D элементы: тени, отражения, блики. Это бы сделало привлекательней сайт и ему бы такая одёжка подошла.
Отсутвие крупной графики можно объяснить тем, что сайт, при всей своей простоте, очень сильно насыщен функционально и ставить куда-то крупную графику просто нет места.
Дигг достаточно строг в дизайне. Это объяснимо тем, что его создатели относятся к сайту как к серьёзному новостному порталу, а не как к месту для развлечений и флуда. Также об этом говорит тот факт, что такие категории как “Наука” и “Бизнес” стоят вначале списка категорий. Не скажу, что это неправильно, можно было пойти по обоим путям, несерьёзная графика также подошла бы диггу, но тогда пришлось бы немного подправить структуру сайта.
Итак, чего же Нет у Дигга:
- Метки
- Социальный Хостинг
- Mash-up
- Несерьёзная Внешность
- Сглаживание и 3D
- Отражение
- Блики
- Тень
- Крупная Графика
Способы Улучшения
Единственное, что необходимо срочно добавить диггу - это метки. Без них успех дигга полон лишь на 80%.
Также я посоветовал бы заняться улучшением графики на дигге, но врядли меня читают его создатели, поэтому им этот совет до лампочки :)
Необходимо Добавить Диггу:
- Метки
- Сглаживание и 3D
- Отражение
- Блики
- Тень
Myspace
Описание
Основная идея сайта - предоставить пользователям место, где они могут создать свой собственный мини интернет-портал и показать себя миру. Это реализовано путём предоставления пользователям профайла и уже к профайлу добавлены расширяющие функции.
Внедрённые Идеи
Взаимодействие с сайтом происходит путём выбора необходимых функций вверху страницы с профайлом.
Причём, из-за структуры сайта, все функции достаточно часто используются.
Главная страница гораздо меньше привлекает постоянных пользователей этой социальной сети, чем страница с их профайлом. Страница с профайлом - что-то вроде командного штаба, откуда доступны любые действия в пределах сайта и видна вся необходимая информация.
Элементы социализации очень хорошо продуманы на myspace. Основные события, происходящие с вашими друзьями, будут видны прямо из вашего профайла. По сути это некое приватное общение внутри огромной сети.
Некоторые элементы реализованы на аяксе, но они не играют ключевой роли. Хотя в myspace и используется аякс, но этот сайт мог бы вполне обойтись без него и при этом был бы таким же успешным.
Как вы уже поняли, этот проект перенял в себя элемент социального хостинга. На сайте можно размещать видео, музыку, фотографии, информацию о себе, вести блог и прочее. Всё, что необходимо для полноценного своего личного места в интернете присутствует на myspace.
Поиск на myspace играет чуть ли не ключевую роль в юзабилити сайта. Поиск очень функционален. Существует поиск друзей и сообществ групп. Параметры поиска также обширны.
Также хочу подробней остановится на вёрстке myspace. Не буду судить насколько она хороша и на сколько сайт является SEO-френдли. Но то, что профайлы используют шаблоны, которые может создавать любой человек, говорит о многом. Эта маленькая деталь принесла как минимум 25% успеха myspace. Похожее наблюдается в facebook, но там вместо шаблонов, используются плагины, но смысл один и тот же - расширяемость. Так что если у вас на подходе несколько веб 2.0 проектов обязательно сделайте правильные выводы ;)
Вот с дизайном у myspace не сложилось. Дизайн был недавно обновлен, конечно же в лучшую сторону, но даже сейчас он достаточно убогий для такого сайта, а темболее для Web 2.0 сайта. Хорошо, что большинство пользователей в myspace ничего не смыслят в дизайне и не обращают внимание на слабый дизайн самого myspace и на ужасный дизайн их собственных профайлов, иначе как бы мы на них зарабатывали? ;)
Радует, что у маспейса хотя бы хорошо продуман логотип, используемый на сайте практически везде и узнаваемый даже из антарктиды.
Здесь мы остановимся по плюсам myspace и подведём итоги Используемых Элементов Веб 2.0:
- Взаимодействие с Сайтом
- Социализация
- Бесплатность
- Пользователи Создают Контент Сами
- AJAX
- Социальный Хостинг
- Поисковые Системы
- Веб-службы и XML
- Блочная Вёрстка и СЕО Френдли Направленность
- Кроссбраузерность
- Закруглённые Углы
- Тень
- Логотип
Отсутствует
На сайте не используются метки. Это достаточно редкий случай, когда на сайтах веб 2.0 метки не нужны. Но с ними myspace действительно смотрелся бы как Николай Валуев с пилоткой (просьба обойтись без пошлых мыслей) на голове.
Сайт нельзя отнести к самым простым и юзабельным сайтам планеты. Простота - это не про myspace. Всё достаточно запутанно, нагромождено и разобраться можно только путём заучивания и методом тыка.
Система РСС на сайте отсутствует, оно и понятно, здесь нет информации, жизненно необходимой аггрегироватся. Хотя в общем можно было бы что-то интересное придумать, но программистам сайта видимо лень это сделать.
С дизайном у сайта большие проблемы. Добавить нужно очень многое и пересмотреть существующую цветовую схему. Некоторые элементы дизайна веб 2.0 на сайте присутствуют, но в недостаточном количестве. Складывается впечатление, что дизайн рисовался на коленке.
Итак, То, Чего Нет У Myspace:
- Теги
- Простота
- RSS-синдикация
- Mash-up
- Несерьёзная Внешность
- Сглаживание и 3D
- Использование Отражения
- Блики
- Мягкие Цвета
- Крупная Графика
Решаем Проблемы
Сайту нужно придумать более простое юзабилити. Так, как сейчас, оставлять нельзя. Конкретных идей по улучшению юзабилити не предложу, здесь нужна совершенно новая концепция. Возможно будет смысл пожертвовать рекламным местом, ради добавления новых блоков управления.
Ну и не забываем про графику. Больное место этой социальной сети.
То, на что нужно Обратить Внимание на сайте, для увеличения его популярности:
- Простота
- 3D Style
- Мягкие Цвета
Переходим к последнему на сегодня разобранному проекту - flickr.
Flickr
Описание
Всё просто. Это хостинг картинок. Но простое скучное слово “хостинг”, не делает сайт таким же скучным, а происходит всё полностью наоборот. Сайт создал свой собственный стиль, ввёл элементы веб 2.0 и в конце концов, стал полноценным вебдванольным ресурсом.
Что Мы Имеем
Во взаимодействии с сайтом идёт упор в первую очередь на работу с картинками и только потом на социализацию. На flickr нет возможности удалять (закапывать) картинки как на дигге, оно и понятно, это ведь хостинг картинок, но есть отличные средства для управления рейтингом фотографий.
Юзабилити сайта полностью соответствует стандартам веб 2.0.
На главной странице практически нет лишних элементов, всё упрощено до того, что даже трёхлетний ребёнок поймёт как пользоваться сайтом.
Присутствует популярная схема объяснения работы с веб 2.0 сайтом путём пошагового и “большими буквами” объяснения куда нажимать и что делать, как на скриншоте выше, или здесь,
Скажите, что может быть проще?
Само общение пользователей происходит в комментариях к фотографиям. На этом и состоит основная часть социализации ресурса, также социализация заключается в своеобразном определинии рейтинга фотографий, например по таким параметрам как количество комментариев, количество заметок и количество раз добавления этой фотографии в избранное. На основе этих показателей строится выдача картинок в поиске.
Как и с предыдущими двумя гигантами веб 2.0 в этом обзоре, у flickr отличная система поиска фотографий. Есть возможность найти лучшие картинки по месяцам:
Ну и конечно же Flickr не мог бы обойтись без облака тегов.
Заметки на фотографиях - ещё один креативный способ общения пользователей на flickr.
Ещё хочу остановиться на отличной идее логотипа для сайта.
У flickr есть основная цветовая схема, которой они очень прочно придерживаются. Эта цветовая схема используется как на самом сайта, так и в логотипах,
и в фавиконе.
Использование запоминающейся и хорошо подобранной цветовой гаммы на сайте - немаловажный способ привлечения внимания. Я не пользуюсь flickr для расшаривания своих фотографий, но если мне это когда-нибудь понадобится, я пойду именно на flickr, а не на его конкурентов. Именно flickr мне запомнился, запомнился сам сайт, со своим скучным, но запоминающимся дизайном. Хотя, например photobucket, который стоит выше по рейтингу алексы, я никак запомнить не могу и вспоминать его название всегда приходится подсмотрев в шпаргалке.
Подведём итоги, Внедрённые Элементы в Flickr:
- Взаимодействие с Сайтом
- Социализация
- Бесплатность
- Пользователи Создают Контент Сами
- Метки
- Простота
- Аякс
- Социальный Хостинг
- Поисковые Системы
- RSS-синдикация
- Веб-службы и XML
- Кроссбраузерность
- Несерьёзная Внешность
- Мягкие Цвета
- Крупная Графика
- Логотип
Как видите, максимальная соответствие юзабилити стандартам веб 2.0. В дизайне и технической части есть пробелы.
От Чего Отказался Flickr
На сайте не используется Mash-up. Абсолютно бесполезная вещь для flickr. Но вот на основе уже flickr’а создаются Mash-up плагины и сервисы, которые используются очень часто в англоязычном интернете.
Сайт средне оптимизирован под SEO, нет каких-то интересных решений в оптимизации и вёрстке. Хотя над этим можно было бы поработать и сделать его более дружелюбным для посетителей и пс.
Flickr обделён графическими элементами. Кроме хорошей цветовой гаммы, весь остальной дизайн достаточно обыденный и неприметный. Есть куда двигаться и развиваться, думаю владельцы flickr’а со временем прийдут к этому.
Отсутствует На Сайте:
- Mash-up
- SEO-френдли направленность
- Сглаживание и 3D
- Использование Отражения
- Закруглённые Углы
- Блики
- Тень
Как Flickr’у Стать Лучше
В техническом плане и в плане юзабилити улучшить фликр можно только внедрением креативных идей. Сейчас же всё на достаточно высоком уровне.
А вот дизайн нужно основательно переработать. Хотя на многих ресурсах, принадлежащих yahoo, вечные проблемы с дизайном, эта же участь и постигла flickr. Yahoo всегда больше работал над техническими решениями, чем над бесполезным, не приносящим никому дохода, дизайном. Правильно это или нет, пусть решают Google и Microsoft, корпорации которые вечно щемят яху, а мы пока будем пользоваться их замечательными творениями :)
Flickr’у Желательно:
На этом остановимся.
Итак были разобраны на мелкие кусочки некоторые мировые Web 2.0 лидеры. На всех остальных популярных сайтах используются похожие принципы, которые вы уже должны легко замечать и легко находить недостатки на таких сайтах.
Надеюсь теперь, после прочтения этой статьи, ваши проекты не будут знать равных по популярности и легко затмят Дигг и компанию. Успехов!
