usable sites master class in g-club

38
(-_-);

Upload: genn

Post on 29-Jan-2018

285 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: Usable sites master class in G-Club

(-_-);

Page 2: Usable sites master class in G-Club

Геннадий

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

Page 3: Usable sites master class in G-Club

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

Page 4: Usable sites master class in G-Club

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

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

Page 5: Usable sites master class in G-Club

(o_O)

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

Page 6: Usable sites master class in G-Club

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

Page 7: Usable sites master class in G-Club

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

Page 8: Usable sites master class in G-Club

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

Page 9: Usable sites master class in G-Club

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

Page 10: Usable sites master class in G-Club

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

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

Page 11: Usable sites master class in G-Club

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

Page 12: Usable sites master class in G-Club

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

Page 13: Usable sites master class in G-Club

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

Page 14: Usable sites master class in G-Club

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

Page 15: Usable sites master class in G-Club

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

Page 16: Usable sites master class in G-Club

http://rabota.ua/

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

Page 17: Usable sites master class in G-Club

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

Page 18: Usable sites master class in G-Club

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

Page 19: Usable sites master class in G-Club

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

Page 20: Usable sites master class in G-Club

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

Page 21: Usable sites master class in G-Club

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

Page 22: Usable sites master class in G-Club

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

Page 23: Usable sites master class in G-Club

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

Page 24: Usable sites master class in G-Club

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

Page 25: Usable sites master class in G-Club

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

Page 26: Usable sites master class in G-Club

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

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

Page 27: Usable sites master class in G-Club

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

Page 28: Usable sites master class in G-Club

http://genn.org/

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

Page 29: Usable sites master class in G-Club

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

Page 30: Usable sites master class in G-Club

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

Page 31: Usable sites master class in G-Club

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

Page 32: Usable sites master class in G-Club

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

Page 33: Usable sites master class in G-Club

zzz…

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

Page 34: Usable sites master class in G-Club

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

удобным

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

Page 35: Usable sites master class in G-Club

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

клики

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

Page 36: Usable sites master class in G-Club

Инстинкты

и привычки

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

Page 37: Usable sites master class in G-Club

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

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

Page 38: Usable sites master class in G-Club

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

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

электронная почта: [email protected]

skype: genn.org

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

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