usable sites master class in g-club
TRANSCRIPT
![Page 1: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/1.jpg)
(-_-);
![Page 2: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/2.jpg)
Геннадий
Добрый вечер, я рад приветствовать всех, кто взял бесплатное пиво и орешки. Тем, кто не взял, тоже привет! Сегодня должно быть как минимум интересно.
![Page 3: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/3.jpg)
Я работаю креативным директором в агентстве «Лаборатория 8». Это куда увлекательнее выглядит на самом деле, чем звучит. Что может быть приятнее общения с клиентами и аккаунтами? ;)
![Page 4: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/4.jpg)
(o_O)Начнем то, ради чего вы не уснули на предыдущем докладе!
Все знают анекдот про человека, который спросил у Бога, в чем же было его предназначение. «Помнишь, ты передал женщине за соседним столиком соль?» — Да!— Вот, — ответил Бог.
![Page 5: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/5.jpg)
(o_O)
Хочется верить, что у всего окружающего нас есть свое предназначение. От сотового телефона до разумного андроида типа того, что выступал передо мной. Несомненно, что предназначение есть и у веб-сайтов. Какое? У каждого свое.
![Page 6: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/6.jpg)
За что так любят фликр? Совсем не за то, что у него в логотипе синий и розовый цвета. И, как ни странно, не потому, что там есть фотографии очень даже хорошеньких девушек. Фликр любят потому, что он живет своей уникальной и правильной жизнью. Если я хочу залить или посмотреть фотографию, то мне совсем не интересно, что новый модуль обработки изображений позволяет ускорять протоны в 10 раз и получать на выходе больше красивых превьюшек за тот же промежуток времени.
![Page 7: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/7.jpg)
Видите, как мы все отвлеклись от того, чем собирались заняться? Посмотреть или залить фотографии. И никаких дурацких новостей, для них есть свой раздел.
![Page 8: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/8.jpg)
Другое дело сайт BBC News, зайдя на который и не увидев новостей я бы, пожалуй, немного удивился,…
![Page 9: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/9.jpg)
… а потом пошел бы и cдался оккупационным войскам поработившим Землю. Вру, отправился бы на фликр любоваться девушками, но тут все программисты, да? Стар-трек интереснее, согласен ;)
![Page 10: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/10.jpg)
http://plus-minus.org.ua/
Ребята, создававшие этот ресурс, не сразу сделали его самым удобным. У них было все, что нужно для стартапа — кусок кода и кусок идеи. В итоге, мы эту идею оформляли.
![Page 11: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/11.jpg)
Исходя из того, для чего пользователь может явиться на сайт, родился новый макет. Итак, зайдя на сайт переполненный возмущением покупатель хочет возмутиться! Выплеснуть отрицательную энергию на просторы интернета в надежде, что это кому-то поможет. Есть еще благодарные покупатели, которые очень хотят поблагодарить, но мне кажется, что это мифические существа типа розовых единорогов или красивых богатых нимфоманок, зовущих на чашечку кофе.
![Page 12: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/12.jpg)
В любом случае, самые быстрые и скоротечные посетители у нас те, кто хочет оставить негативный или позитивный отзыв. Не будем им мешать — разместим две огромные ссылки с говорящим фоном и пиктограммами. Кроме всего прочего, эта конструкция отлично держит дизайн.
![Page 13: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/13.jpg)
Следующая категория посетителей — те, кто зашел посмотреть, кто хорош, а кто плох. Ну, кто же не любит сплетни? Для них рейтинги худших и лучших, а дальше уже последние негодования и благодарности.
![Page 14: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/14.jpg)
Для пытливых умов, которые недолюбливают поиск (я среди них, потому что знаю, как он программируется и кто его обычно программирует, Яндекс, если вы есть в зале, ничего личного, вы молодцы ;)) слева все разделы, по которым пишутся рецензии посетителей. Очень хороший пример целесообразности: можно было бы сделать это облаком тагов, но оно там абсолютно не нужно. Облако тагов даже запутывало бы пользователей, которым, скажем, нужны магазины и рестораны. Это перечисление разделов, а для тех, кому мало сведений, в скобках есть количество отзывов.
![Page 15: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/15.jpg)
Кстати об отзывах. На ресурсе действует карма, оценка комментариев и разные цвета для разных отзывов. Благодаря сквозному цветовому кодированию, так и хочется читать и оценивать отзывы, а также добавлять свои.
![Page 16: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/16.jpg)
http://rabota.ua/
Тут мы не совсем придумывали дизайн. Нам уже принесли шаблоны и попросили их оформить. После этого мы придумывали дизайн и нахально меняли шаблоны. Очевидно, что с тем, с чего начиналось, нет почти ничего общего.
![Page 17: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/17.jpg)
Значимые блоки поиска вакансий и добавления резюме переместились в верхний левый угол. Не самые полезные на этом ресурсе «Новости» — в правый. Горячие вакансии по праву заняли место в шапке, а вакансии ведущих компаний — сразу под формой поиска работы, что логично.
![Page 18: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/18.jpg)
Если предыдущая страница должна была предоставить максимум функциональности, потому что нацелена на предоставление бесплатных сервисов, то страница работодателя должна лишь рекламировать функционал, который получит пользователь после регистрации.
![Page 19: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/19.jpg)
Вот так, на самом деле, выглядит страница, с которой работают работодатели. Блок персонального консультанта, список вакансий, отобранных резюме и рассылок.
![Page 20: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/20.jpg)
Обратите внимание, на одном и том же ресурсе все страницы выглядят целостно, но у каждой из них свое предназначение, структура и способ представления информации!
![Page 21: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/21.jpg)
Про Зеркало недели рассказывать не буду — мы там поменяли абсолютно все ;)
![Page 22: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/22.jpg)
Это наш с Юрой социальный проект, ведь мы тоже должны как-то влиться в струю эйфории, заставляющей людей все время оперировать какими-то данными в сети. Идея его в том, что он поможет организовать информацию о друзьях в разных социальных сетях. Он пока не готов, но я надеюсь, что уже на завершающей стадии программирования.
![Page 23: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/23.jpg)
Как только я нарисовал макеты, сразу же честно признался Юре, что он сочтет меня, мягко говоря, странным. Итак, у нас просто дружелюбный сайт, который общается с посетителем. Незалогиненным и незарегистрированным посетителям показывается главная страница с кратким объяснением, что за сайт и предложением залогиниться или зарегистрироваться.
![Page 24: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/24.jpg)
Мы не параноидальные ребята, поэтому процесс регистрации выглядит как процесс логина, просто база данных запоминает данные. Это так мило, не правда ли? Кроме того, поскольку тут уж мне никто ничего не навяжет, в поле пароля текст вводится буквами, а не прячется за точками или астериксами. Я убежден, что скрытие пароля на стационарном компьютере при вводе — довольно глупая вещь. Тот, кто подсмотрит из-за плеча ввод пароля, сможет полюбоваться и на нажатия на клавиатуре.
![Page 25: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/25.jpg)
Вернемся к проекту. Вот страница добавления социальных сетей, в которых зарегистрирован посетитель. Ничего лишнего — список сетей, объяснение и форма добавления новой. Я бы мог написать по этому поводу стих, вывести свежие новости из ленты Униан или даже прицепить фотографию моей любимой девушки — ничего этого нет, потому что оно там не нужно ;)
![Page 26: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/26.jpg)
http://rainbow-tours.com.ua/
Для компани Rainbow Tours мы вместе с 361-м градусом делали alternative reality game. Все сводилось к тому, что участники все равно наткнутся на вебквест.
![Page 27: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/27.jpg)
Для входа на вебквест главная страница RT, мягко говоря, перегружена баннерами. Нам понадобилась ширма, которая бы этот вход прикрыла. Берем предложения по турам, предложения по авиа-перелетам и делаем страницу, которая точно принадлежит туристической компании, позволяет заказать билет, но при этом отвечает поставленным целям.
![Page 28: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/28.jpg)
http://genn.org/
Напоследок расскажу о своем личном сайте — genn.org. Почему он адекватен и состоятелен. Сайт сделан на связке Flash + XML.
![Page 29: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/29.jpg)
Он красиво двигается, показывает разделы и все-такое. Благодаря использованию swfaddress почти в любом броузере можно скопировать ссылку из адресной строки, сбросить другу или подруге по скайпу или ICQ и быть уверенным, что он или она увидит то же самое, что и вы. Жаль только, что по неизвестным причинам это кое-где не работает.
![Page 30: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/30.jpg)
Если посмотреть на мое портфолио, то можно увидеть, что это обыкновенная галерея, которую можно листать влево и вправо. Никто не поможет выбрать все логотипы, веб-сайты или иллюстрации. Это просто объекты, которыми я, надеюсь, делаю мир красивее. У сайта простая информационная и эмоциональная роль — быть приятным и стильным ;)
![Page 31: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/31.jpg)
Это не каталог айдентики или флеш-открыток. И он такой, именно потому, что он для этого создан.
![Page 32: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/32.jpg)
Несколько пафосное сравнение, но ведь в картинной галерее никто не делит работы на масло, акрил, альтернативные материалы? Это указывается рядом с картиной или прямо на ней, но чаще можно увидеть работы экспрессионистов отдельно от реалистов. Другое дело, если бы я создавал сайт какого-нибудь агентства или для того, чтобы продать свои услуги дизайнера. Тогда я бы просто облегчил посетителю, который пришел за покупкой, навигацию, предоставив легко достичь того, чего он хочет.
![Page 33: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/33.jpg)
zzz…
Бонус для тех, кто не спит — правила создания хороших сайтов.
![Page 34: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/34.jpg)
Сайт должен быть
удобным
Любой сайт должен быть… удобным. Просто удобным.
![Page 35: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/35.jpg)
Не стоит считать
клики
Количество кликов не имеет значения вообще, но особенно тогда, когда пользователь хочет их совершать.
![Page 36: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/36.jpg)
Инстинкты
и привычки
Нет четких правил (эти не в счет, они расплывчатые ;) создания веб-сайта. Есть представление о привычках пользователей и не больше.
![Page 37: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/37.jpg)
Соответствие целям
Чем больше соответствует сайт тому, как его будут использовать, тем правильнее и активнее его будет использовать ЦА.
![Page 38: Usable sites master class in G-Club](https://reader034.vdocument.in/reader034/viewer/2022052606/5a6e472e7f8b9ad4678b56e1/html5/thumbnails/38.jpg)
Спасибо за внимание
Осипенко Геннадий
электронная почта: [email protected]
skype: genn.org
сайт: http://genn.org/
блог: http://mega.genn.org/