?

Log in

Previous 10 | Next 10

Oct. 9th, 2008


bizarre1112

Решение задачи про дизайн ленты материалов от ITTUM'а / design

Originally published at Проектирование сайтов. Please leave any Комментарии there.

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

Дизайн ленты от ITTUM'а

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

Заголовок -- призван привлечь внимание читателя. В изначальном варианте хорошо выполняет свои функции.

Дата, время -- время добавления сообщения никто не осмелился тронуть и я в том числе, т. к. считаю, что с ним всё отлично оно на 100% выполняет свои функции.

Tags -- а вот с тегами игрались все, в том числе и я. Задумайтесь, какие именно функции выполняют теги.

1. Показать пользователю основные вопросы, освещаемые в сообщении (я очень часто пробегаю сначала только по тегам и уже, если интересно, начинаю читать сообщение).

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

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

Итак, 3-ий вопрос решается при любом расположении тегов, т.к. поисковикам вообще все равно.

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

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

* объяснение действия «глянул на рейтинг» будет дано в пункте «оценка сообщения».

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

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

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

Тело сообщения -- тело сообщения неприкосновенно.

Оценка сообщения -- а вот тут для меня была самая большая думка. Для чего служит голосование? 1. Чтобы на него отвечали 2. Чтобы по нему ориентировались.

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

Взгляд на рейтинг зависит от отношения человека к нему. Если он считает, что рейтинг является определяющим фактором в его выборе материала, то он может смотреть на рейтинг в первую очередь. Я, к примеру, так делаю при поиске роликов на youtube или rutube когда мне неважно, о чем он, главное чтобы было интересно. Если на нем стоит отметка 4 из 5, значит это действительно интересно, и я, лишь потом начинаю читать заголовок.

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

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

Более того, элемент голосования после тела сообщения служит ещё и визуальным разделителем, отделяя его от ссылок «читать дальше» и «комментарии».

Читать дальше -- не стал трогать, т. к. считаю, что и так все просто и лаконично.

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

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

Oct. 7th, 2008


bizarre1112

Почему разработчику сложно стать управляющим проектами / developer manager

Originally published at Проектирование сайтов. Please leave any Комментарии there.

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

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

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

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

К примеру, запускается новый сайт или написана свежая статья. Неплохо бы показать ее заинтересованным читателям. Для этого существуют тематические сообщества в ЖЖ. Легко получить несколько сотен посетителей -- нужно только написать анонс.

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

Это назовем трудностями погружения в социальную среду.

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

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

Это назовем длительными периодами обратной связи.

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

Sep. 30th, 2008


bizarre1112

Как выбирать хостинг / choose hosting provider

Originally published at Проектирование сайтов. Please leave any Комментарии there.

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

Кстати, на том сайте есть целый блог. Вот примеры постов:
Может ли из-за хостинга страдать посещаемость сайта
Недостатки зарубежного хостинга для русских сайтов
Подкаст про хостинг

Sep. 12th, 2008


bizarre1112

Как показать кликабельность картинки / image clickable

Originally published at Проектирование сайтов. Please leave any Комментарии there.

Посетители приучены нажимать на ссылки и кнопки. А как быть со ссылками по картинкам? Как показать, что на картинку можно нажать и получить некоторый результат?

Если кликабельность картинки никак не обозначена, большинство посетителей не догадаются об этом. Не стоит рассчитывать, что люди будут наводить курсор на картинку и наблюдать, сменилась ли «стрелочка» на «пальчик». Недавно я собрал статистику по главной deadland.ru и убедился в этом.

По картиночкам кликают неохотно

Heatmap, карта кликов страницы сайта

Отвлечемся от примера и посмотрим, в каких случаях посетители воспринимают ссылку по картинке.

1. Рядом с картинкой есть текст «Кликните по картинке, чтобы посмотреть изображение большего размера».

2. Рядом с картинкой есть ссылка «Изображение большего размера», дублирующая ссылку по картинке.

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

4. Картинки -- это превью, расположенные в несколько строк и столбцов. Посетители обычно понимают, что страница представляет собой галерею.

5. Картинка -- это кнопка размера 81х33, баннер стандартного размера.

6. Картинка похожа на баннер -- есть анимация, рекламная информация. Или это флеш.

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

Наверняка что-то упустил, буду рад вашим дополнениям.

Sep. 7th, 2008


bizarre1112

Что можно сделать с профилем на сайте / profile

Originally published at Проектирование сайтов. Please leave any Комментарии there.

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

Когда-то я играл в «Бойцовский клуб» и очень гордился соотношением побед и поражений два к одному. Да и вообще там были красивые профили: куклы с обвесом, списки друзей и врагов, принадлежность к клану, подарки, самовыражение посредствам ASCII-графики.

Профиль персонажа Бойкий Кот

Профиль в «Бойцовском клубе»

Потом на одном форуме по программированию счетчик сообщений перевалил за 50, и я перестал считать себя новичком. Завелся у меня аккаунт на dirty.ru, где было написано, что я зарегистрирован по приглашению пользователя № 6.

В ЖЖ мне нравилось смотреть на список френдов. В 2006 я участвовал в фотошоп-конкурсах на worth1000.com. Там работам ставят оценки, у пользователя в профиле график и медальки.

Профиль xynxyn

Профиль на worth1000.com

Что же заставляет пользователя пестовать свой профиль, гордиться им, заходить на страницу снова и снова?

1. Статистика. Общее количество постов и комментариев, количество постов в день. Здесь уместно вспомнить дату регистрации. Общее время, проведенное на сайте.

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

2. Графики. Динамику развития пользователя на сайте можно визуализировать. Приходит на ум пример worth1000.com, где на графике отображаются оценки пользовательских работ. Можно смотреть и говорить себе: время потрачено не зря, фотошопное мастерство растет на глазах.

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

Идея достижений во всю эксплуатируется в компьютерных играх. В последний раз видел в Mass Effect. «Выполнил все задания на такой-то планете», «Убил 150 врагов из снайперской винтовки» и т. д.

Кстати посмотрите статью «Применение игровой механики в социальных медиа».

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

5. Аватар, подпись, биография. У пользователя при заполнении профиля должно быть достаточно свободы, то есть нужно некоторое количество полей для загрузки картинок, вставки ссылок и вписывания текста. Сложно отказать себе и не воткнуть в профиль информер «Моему ЖЖ 3 года 5 месяцев и 4 дня».

Уверен, хорошо поставленная игра по обустройству профиля помогает привязать посетителя к сайту.

Aug. 26th, 2008


bizarre1112

Целый час смотрел, как раздают листовки у метро / leaflet

Originally published at Проектирование сайтов. Please leave any Комментарии there.

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

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

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

Белорусский вокзал

На выходе стояли три распространителя листовок. Я отсчитал 600 человек, вышло, что листовки берет один из восьмидесяти. То есть CTR составляет 1,25 %. Прикинул человекопоток за рабочий день распространителя, получилось 20 000 человек, значит, 250 листовок.

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

Интересно посмотреть, к каким хитростям прибегают, чтобы CTR повысить.

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

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

Два распространителя стояли на пути потока один за другим. Большинство людей брали обе листовки.

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

Пытался перенести приемы на контекстную рекламу, но ничего оригинального не придумалось.

Aug. 19th, 2008


bizarre1112

Собираю отзывы о хостингах / hosting

Originally published at Проектирование сайтов. Please leave any Комментарии there.

Запустил сайт с отзывами о хостингах. Изюминкой является форма представления информации: страницы, посвященные провайдерам, поделены на две колонки. В одну записываются преимущества, в другую -- недостатки.

Характеристики хостинга в две колонки

Посетители могут влиять на вес характеристик, голосуя. Также они могут добавлять характеристики и новых провайдеров. Регистрации не требуется. Голосование на аяксе. Есть graceful degradation.

Например, смотрите отзывы о VPS ispserver.com.

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

* * *

Не секрет, что в наш жестокий век веб-мастерам нужны ссылки. Кое-кто даже пишет бессмысленные комментарии в этом блоге. Опустите копья, есть предложение.

Новому сайту нужны отзывы о хостерах. На сайте есть возможность писать комментарии к профайлам провайдеров и оставлять ссылки. В поле для комментариев работает тег <a>.

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

Простой вариант вставки ссылки -- в конце комментария написать «Сайт: site.ru -- всё для дачи».

Aug. 16th, 2008


bizarre1112

Нужен ли кому-то код для вставки видео / link code

Originally published at Проектирование сайтов. Please leave any Комментарии there.

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

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

Получается, кодом воспользовались 0,03 % посетителей. 100 человек в сутки дают сайту одну ссылку в месяц. Не очень эффективный способ увеличения ссылочной массы. Хотя можно придумать условия, при которых отдача будет выше.

Иногда сайты предлагают посетителям код своей кнопки 88 х 31, мол, поддержите нас. Интересно узнать, берут ли его. У кого-нибудь есть опыт?

Aug. 10th, 2008


bizarre1112

Чем дорогой сайт отличается от дешевого / cheap expensive

Originally published at Проектирование сайтов. Please leave any Комментарии there.

Представим себе ситуацию: в крохотную веб-дизайнерскую студию обращается небольшая компания. Компании нужен сайт -- несколько страниц, рассказывающих о ее деятельности, и скромный каталог продукции. Студия может предложить варианты «подешевле» и «подороже». У студии есть CMS, на основе которой сделать требуемый сайт не составит труда. Пусть ее установка и настройка обойдется в 20000 руб.

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

Дешевый

Дорогой

Наполнение

Заказчик наполняет сайт самостоятельно. Разработчик забивает что-то на сайт исключительно для демонстрации: тексты перепечатываются с буклета компании и копируются у конкурентов.

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

Итог: число посетителей, прочитавших тексты, увеличится на 10%. А 1% настолько растрогается, что сконвертируется в клиентов.

0 руб.

10000 руб.

Фотографии дает заказчик. Их мало, они плохого качества. Сайт они не красят.

Фотографии делает фотограф. Он идет в компанию, снимает там продукцию, станки, рабочих и т. д.

Итог: еще 1% сконвертируется.

0 руб.

10000 руб.

Дизайн

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

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

Итог: из двадцати просмотренных сайтов потенциальный клиент обращает внимание только на сайт компании и еще двух «красивых» конкурентов. Конверсия +1%.

10000 руб.

25000 руб.

Верстка

Макет тестируется в IE6, Firefox2, Opera9 с разрешением 1024х768 и 1280х1024 со стандартным размером шрифта.

Макет тестируют в IE7, Safari, мобильных браузерах, старой «Опере» на самых разных разрешениях. Макет не разваливается при изменении размера шрифта.

Итог: 5% «необычных» пользователей будут приятно удивлены. Конверсия +0,5%.

5000 руб.

10000 руб.

Так получаем вариант «подешевле» за 35000 руб. и «подороже» за 75000 руб. Второй вариант доставит больше проблем заказчику и разработчику, займет больше времени, но в результате конверсия будет выше в разы.

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

Jul. 27th, 2008


bizarre1112

Чего не хватает типографам / typograph

Originally published at Проектирование сайтов. Please leave any Комментарии there.

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

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

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

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

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

А между тем большинство «экстремальных» случаев с хорошей вероятностью определяются несложными эвристиками. Если слово из русских букв в середине содержит запятую, скорее всего после нее пропущен пробел. Если доля многоточий высока, скорее всего их можно заменить на точки. Если \n окружают пробелы и маленькие русские буквы, скорее всего можно объявление новой строки вырезать. Регулярные выражения способны сделать из безобразного в плане типографики текста настоящую красоту.

Если разработчики какого-нибудь типографа добавят к расстановке неразрывных пробелов и хитрых кавычек набор правил для обработки текста в стиле неопытных пользователей, это будет сильным ходом. Если нужны примеры raw input'а или интересны те закономерности, что я уже выявил, с удовольствием поделюсь.

Previous 10 | Next 10