usable sites master class in g-club

(-_-);

Геннадий

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

Я работаю креативным директором в агентстве «Лаборатория 8». Это куда увлекательнее выглядит на самом деле, чем звучит. Что может быть приятнее общения с клиентами и аккаунтами? ;)

(o_O)Начнем то, ради чего вы не уснули на предыдущем докладе!

Все знают анекдот про человека, который спросил у Бога, в чем же было его предназначение. «Помнишь, ты передал женщине за соседним столиком соль?» — Да!— Вот, — ответил Бог.

(o_O)

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

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

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

Другое дело сайт BBC News, зайдя на который и не увидев новостей я бы, пожалуй, немного удивился,…

… а потом пошел бы и cдался оккупационным войскам поработившим Землю. Вру, отправился бы на фликр любоваться девушками, но тут все программисты, да? Стар-трек интереснее, согласен ;)

http://plus-minus.org.ua/

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

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

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

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

Для пытливых умов, которые недолюбливают поиск (я среди них, потому что знаю, как он программируется и кто его обычно программирует, Яндекс, если вы есть в зале, ничего личного, вы молодцы ;)) слева все разделы, по которым пишутся рецензии посетителей. Очень хороший пример целесообразности: можно было бы сделать это облаком тагов, но оно там абсолютно не нужно. Облако тагов даже запутывало бы пользователей, которым, скажем, нужны магазины и рестораны. Это перечисление разделов, а для тех, кому мало сведений, в скобках есть количество отзывов.

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

http://rabota.ua/

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

Значимые блоки поиска вакансий и добавления резюме переместились в верхний левый угол. Не самые полезные на этом ресурсе «Новости» — в правый. Горячие вакансии по праву заняли место в шапке, а вакансии ведущих компаний — сразу под формой поиска работы, что логично.

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

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

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

Про Зеркало недели рассказывать не буду — мы там поменяли абсолютно все ;)

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

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

Мы не параноидальные ребята, поэтому процесс регистрации выглядит как процесс логина, просто база данных запоминает данные. Это так мило, не правда ли? Кроме того, поскольку тут уж мне никто ничего не навяжет, в поле пароля текст вводится буквами, а не прячется за точками или астериксами. Я убежден, что скрытие пароля на стационарном компьютере при вводе — довольно глупая вещь. Тот, кто подсмотрит из-за плеча ввод пароля, сможет полюбоваться и на нажатия на клавиатуре.

Вернемся к проекту. Вот страница добавления социальных сетей, в которых зарегистрирован посетитель. Ничего лишнего — список сетей, объяснение и форма добавления новой. Я бы мог написать по этому поводу стих, вывести свежие новости из ленты Униан или даже прицепить фотографию моей любимой девушки — ничего этого нет, потому что оно там не нужно ;)

http://rainbow-tours.com.ua/

Для компани Rainbow Tours мы вместе с 361-м градусом делали alternative reality game. Все сводилось к тому, что участники все равно наткнутся на вебквест.

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

http://genn.org/

Напоследок расскажу о своем личном сайте — genn.org. Почему он адекватен и состоятелен. Сайт сделан на связке Flash + XML.

Он красиво двигается, показывает разделы и все-такое. Благодаря использованию swfaddress почти в любом броузере можно скопировать ссылку из адресной строки, сбросить другу или подруге по скайпу или ICQ и быть уверенным, что он или она увидит то же самое, что и вы. Жаль только, что по неизвестным причинам это кое-где не работает.

Если посмотреть на мое портфолио, то можно увидеть, что это обыкновенная галерея, которую можно листать влево и вправо. Никто не поможет выбрать все логотипы, веб-сайты или иллюстрации. Это просто объекты, которыми я, надеюсь, делаю мир красивее. У сайта простая информационная и эмоциональная роль — быть приятным и стильным ;)

Это не каталог айдентики или флеш-открыток. И он такой, именно потому, что он для этого создан.

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

zzz…

Бонус для тех, кто не спит — правила создания хороших сайтов.

Сайт должен быть

удобным

Любой сайт должен быть… удобным. Просто удобным.

Не стоит считать

клики

Количество кликов не имеет значения вообще, но особенно тогда, когда пользователь хочет их совершать.

Инстинкты

и привычки

Нет четких правил (эти не в счет, они расплывчатые ;) создания веб-сайта. Есть представление о привычках пользователей и не больше.

Соответствие целям

Чем больше соответствует сайт тому, как его будут использовать, тем правильнее и активнее его будет использовать ЦА.

Спасибо за внимание

Осипенко Геннадий

электронная почта: soap@genn.org

skype: genn.org

сайт: http://genn.org/

блог: http://mega.genn.org/