Вот что редизайн животворящий делает!

Суть

Проанализировав статистику расходов на рекламу и уровень конверсии двух разработанных нами сайтов с приблизительно одинаковым товарным рядом заметили интересную особенность: на сайте с более современным дизайном уровень конверсии был примерно в полтора раза выше, чем на втором со староватым дизайном, но большим возрастом и большей посещаемостью! Клиент не пожалел денег и заказал нашей компании обновление дизайна (он же "редизайн"). Благо, на нашем движке редизайн является делом техники, никакой потери информации (как то потеря ссылочной ЧПУ-массы, характеристик товаров или фотографий) произойти не может.

Как мы решали задачу

Мы подошли к вопросу с двух сторон: творческой и практической. С одной стороны, было принято решение сделать максимально "незагромождённый" дизайн, с другой стороны, решено было использовать всё богатство доступных в нашем движке функций, как то аналоги товаров, новинки, акции и т.п.
Хочется немного подробнее обсудить принятые на проекте визуальные решения.
К нашему сожалению, несмотря на то, что технологии идут вперёд, устройства отображения стремятся не только к максимализации чёткости отображения и увеличению разрешения экранов, но также и к миниатюризации самих устройств. Также клиент стремился сохранить "атмосферу" существующего сайта, цветовую палитру, размещение некоторых блоков. Потому было принято решение сохранить фиксированный дизайн для разрешения 1024х768, которое подходит нетбукам и планшетам, что несколько сузило полёт нашей фантазии.
Формат главного меню решено было использовать горизонтальный, не столько потому, что это "самое лучшее решение" (с этой трактовкой мы не согласны, и amazon с ebay'ем тому яркое подтверждение), но оно удовлетворяет объёму наполнения категориями современных интернет-магазинов, и, что намного более важно, такой формат меню сейчас принят в большинстве украинских магазинов, а это добавляет клиентам лёгкости в восприятии информации и её поиске, к чему мы, собственно, и стремимся.
Высота подпунктов главного меню автоматически подбирается в зависимости от высоты окна браузера, это значит, что на большом мониторе пункты меню будут разнесены с большими интервалами, что позволяет придать некоторое ощущение свободного пространства, "воздуха" в дизайне. Но если Вы используете портативное устройство, и высота окна браузера будет ограничена, то подпункты разместятся более компактно и всё поместится на вашем устройстве.
Вся вспомогательная (телефоны, баннеры, подсказки) и управляющая (фильтры) информация была размещена в одном левом столбце. Это позволило максимально эффективно использовать основную информационную зону сайта под "плиточное" заполнение каталога товаров и оставить такой вариант заполнения основным. Так помещается одновременно большее количество товаров (24) и при этом не "торчит" узкий столбец самой важной информации, как это происходит, например, на Розетке со "списочным" представлением каталога по-умолчанию и 16ю товарами в длинной "колбасе" по-центру.
По нашим наблюдениям, поиск по товарам конкретной товарной категории сейчас задействован крайне редко, его применяют в основном для того, чтобы найти конкретную модель. Вместо этого в категориях товаров активно используют механизм фильтров. Чтобы разместить максимально возможное количество карточек на страницу с фиксированным дизайном мы убираем всю ненужную информацию о товаре из карточки товара в каталоге.
NB! Даже показ нескольких характеристик товаров в карточках товара в каталоге несёт клиенту избыточную информацию, а особенно там не стоит показывать всякие повторяющиеся глупости вроде "доставка за пределы Киевской области осуществляется после внесения 20% предоплаты". Про доставку стоит упоминать либо в отдельном блоке доставки, либо в момент покупки, либо на отдельной странице товара, где места много, а заполнять его не всегда есть чем.
Тем не менее, если посетитель пожелает увидеть краткую сводку характеристик о товаре прямо в каталоге без перехода на страницу товара, то он легко сможет это сделать наведя мышкой на карточку конкретного товара, информация отобразится во всплывающем блоке.
Само по себе расположение фильтров в левом столбце традиционно увеличивает высоту этого столбца сверх всяких рамок приличия. Поэтому мы применили несколько подходов, чтобы минимизировать ущерб от этого решения. Во-первых, самый важный (и самый "высокий") фильтр по брэндам товаров было решено отделить от основного блока фильтров и разместить его горизонтально непосредственно над карточками товаров. Во-вторых, значения фильтров были собраны в группы фильтров и расположены в порядке убывания их важности. И наконец, группы умеют "сворачиваться" но по-умолчанию самые важные группы фильтров выводятся развёрнутыми. Эти решения позволили сделать использование фильтров максимально комфортным для посетителей.
Очень удачным оказались некоторые функции нашего движка, которым редко находилось применение в повседневной жизни, такие как полная конвертация размеров фотографий всего каталога товаров под новый дизайн из максимального размера в меньший, перегруппировка категорий товаров, и другие.
Также оказались востребованными функции учёта заказов, остатков, одношаговой регистрации и доступа в кабинет для клиентов, доступные в данной версии магазина. Это позволит провести активную интеграцию магазина с системой 1С, в которой ведётся учёт у клиента.

Немного цифр

После обновления снизился показатель отказов с 73% до 59% в период активной контекстной рекламной компании, и с 60% до 53% при отсутствии контекстной рекламы. Что удивительно, при этом практически не изменилось среднее время пребывания посетителя на сайте. Вероятно, это связано с упрощением механизма поиска товаров и повышением удобства сайта, посетитель успевает быстрее решить свою задачу.

Кто скажет, что мы не лучшие? ;)

Мы разработали наш самый продвинутый на сегодняшний день интернет-магазин!

Прошу любить и жаловать - аквалавка!

Что здесь есть новенького из функций:
1) полноценный ассортимент - переопределяемые характеристики, позволяют менять в зависимых товарах абсолютно всё или только часть и наследовать характеристики основного товара!
2) реальный одношаговый заказ - после входа в корзину заказ (даже с регистрацией и валидацией) делается за один шаг!
3) собственно динамическая валидация (с помощью технологии ajax), позволяющая сделать вышеуказанный одношаговый заказ.
4) динамическое хранение валют - заполняйте ваш магазин ценами товаров в той валюте, в которой вам необходимо, все настоящие цены хранятся на товары постоянно, достаточно поменять курс валют и все цены станут актуальными без перезаливки прайс-листов!
5) традиционно оригинальный (люблю каламбурить) и великолепный дизайн в исполнении Вовки - "живописных дел мастера" ;)

Клиенты отметились на удивление редким "рукоприкладством", потому работа получилась радующей глаз. А Вы как думаете?

P.S. Особая "благодарность" разработчикам ИЕ 7-8 за "съеденных собак" (ох не попадайтесь нам на глаза) :)

И снова СЕО-вёрстка

Наш движок поддерживает уже огромное количество наворотов для сеошников: ЧПУ, кейвёрдсы и дескрипшны для статей, товаров и категорий - вчерашний век. Мы умеем собирать keywords, descriptions, title и блоки сео-текста по специальным правилам с учётом иерархии материала на сайте, т.е. брать фрагменты из одного уровня, добавлять к ним из другого, при этом их менять и много чего вкусного. Наши сео-партнёры от этого в экстазе, однако при всём многообразии возможностей никто не отменяет базовые принципы сео-вёрстки, которая, как оказалось, может добавить солидную ложку дёгтя в вагон мёда.

Итак, SEO вёрстка – это вёрстка HTML, которая повышает релевантность контента сайта за счёт различных приёмов самой вёрстки (контент - основной информационный текст страницы). Собственно вёрстка относится к этапу разработки дизайна, а не к оптимизации контента под поисковые запросы, а потому имеет большее отношение к разработчикам, чем к сеошникам, и значит нам её, как специалистам в сайтостроении, надо знать.

Теперь собственно про эти приёмы:

1. Вёрстка должна быть максимально приближена к валидному HTML/XHTML, W3C валидатор вам в помощь (иначе потом не удивляйтесь, почему гугл не увидел ваш текст ссылки внутри дикой комбинации тегов).
2. Правильное расположение тегов:

• должен! присутствовать тег <h1> на странице и он может быть только один;
• желательно присутствие нескольких тегов <h2> (а иногда и <h3>), разделяющих основные логические фрагменты контента;
• теги заголовков не должны содержать в себе никакие другие теги. Для различных преобразований здесь лучше применять css;
• это уже скорее к оптимизаторам, но всё же вёрстка - не забывайте использовать теги <strong> и <em> (жирный и курсив), выделяйте только самые важные моменты, вовсе не обязательно ключевые слова, и главное - не переусердствуйте, иначе эффект от них будет маленьким, а визуальное восприятие настоящими читателями - ухудшится.

3. Основной контент страницы должен быть максимально приближен к открывающему тегу <body>. Для этого:

• старайтесь, что бы все скрипты располагались либо в теге <head>, либо в конце страницы, но точно не вначале после тега <body>;
• по максимуму используйте блочную вёрстку и приёмы с визуальной перестановкой блоков, отличной от их следования в теле HTML-страницы;
• информационные блоки (новости, опросы, полезные советы) внутри html-кода страницы должны идти после основного контента;
• старайтесь не увеличивать глубину вложенности тегов понапрасну, замечено снижение релевантности текста на глубоких уровнях.

3. Всегда располагайте css в отдельном файле. Это уменьшит вес основной страницы, а значит увеличится скорость её загрузки как посетителем, так и поисковым роботом, что положительно скажется на удобстве пользования сайтом и на скорости индексации самого сайта поисковиком.
4. Наплюйте на теги <noindex> и rel="nofollow", они скорее не работают, чем работают. Лучше делайте правильную HTML структуру сайта.

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

Как работать с дизайнером

Нашёл просто обалденную статью в продолжение предыдущего поста, не могу удержаться, чтобы не выложить основные моменты (в моём изложении, да простят меня авторы и Гугл :)


Как работать с дизайнером
Хорошо сделанная дизайнером работа даст Вам возможность:

• эффективнее работать с клиентами
• повысить количество продаж
• поднять имидж вашей компании

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

Так как же эффективно работать с дизайнером? Вот некоторые советы:

1. Отнеситесь к выбору дизайнера ответственно
Взгляните на его портфолио. Если вы сами не можете оценить творения дизайнера – обратитесь за советом к специалистам (но только до момента выбора дизайнера, а не в процессе работы над вашим сайтом), свяжитесь с его предыдущими клиентами напрямую и узнайте, насколько эффективной оказалась работа дизайнера.

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

3. Заранее четко определитесь с желаемыми функциями, возможностями вашего сайта
Чётко определите цели и задачи проекта. Продумайте, какие функции сайта их реализуют (если не уверены - проконсультируйтесь с разработчиками). Во многом дизайнер будет отталкиваться от заложенных в сайт функций, и если Вы захотите добавить или отнять что-либо позже – это может разрушить основные концепции сайта.

4. Убедитесь, что основная часть материалов для сайта подготовлена ДО начала работ по проекту
Дизайнер будет использовать их в качестве рабочего материала. Если чего-то не будет хватать, хороший дизайнер попробует "дофантазировать" что-то самостоятельно, но чем меньше ему придется это делать – тем лучше для проекта. Он должен проявлять фантазию в другом.

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

6. Дизайн делается для клиентов, а не для ваших коллег, друзей или родственников
Вы должны объяснить дизайнеру - кто ваши клиенты и чего они хотят. Намного более важно, чтобы ваш сайт нравился им, а не Вам. Если настаивать на дизайне, который нравится только Вам, скорее всего, основным посетителем вашего сайта будете только Вы.
С другой стороны, если обсуждать дизайн в процессе разработки с коллегами или родственниками, то каждое чужое мнение найдёт своё отражение в сайте, но утратится его основная идея, вложенная в него дизайнером. Если у вашего проекта не будет индивидуальности – никто не станет его критиковать, но и в восторге от него тоже никто не будет. Вы должны иметь дело только с одним человеком, принимающим решения. Нельзя бросаться из стороны в сторону или менять направление в середине процесса.

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

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

Если вы будете относиться к дизайнерам как к людям, которые просто владеют графическими программами – они превратятся в людей, которые просто хотят денег!

Что будет, если "вставить 5 копеек "? или "Руками не трогать".

Сегодня мы поговорим о роли дизайна в сайтостроении.
Когда я был мал и глуп, я считал, что в сайте самое важное - это его функциональные возможности. Умеет сайт отправлять письма владельцу? - Хорошо! Есть многоязычная поддержка? - Замечально! Можно разместить каталог товаров? - Превосходно!
Но как оказалось, жизнь несколько сложнее и многограннее. Сайт прежде всего начинается... да, да, именно с дизайна. Именно его видит в первую очередь посетитель сайта, и если дизайн вашего сайта - УГ, то многоязычность и поиск с учётом словоформ русского языка уже никто оценивать никогда не будет, уж поверьте.

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

Поэтому на сегодняшний день, обращаясь в студию разработки веб-сайтов, в первую очередь смотрят на качество дизайна работ, созданных студией. Из своего опыта скажу, что в стоимости работ по созданию сайта-визитки стоимость разработки дизайна составляет около 70%. Функциональные возможности сайта (точнее его движка) начинают "играть" свою роль только если Вы разрабатываете сайт-каталог, интернет-магазин, заказной портал. И даже в этом случае, первое место в конкурсе зрительских симпатий выигрывает студия с качественным веб-дизайном.

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

Мы многократно из проекта в проект сталкиваемся с этой типичной ситуацией, когда клиент "убивает" выстраданную дизайнером идею, превращая дизайн в типичный шаблонный сайт (который можно было купить на толкучке за 50$).
С этой проблемой рано или поздно сталкиваются все веб-студии, и она не скоро потеряет злободневности. Из смешного на эту тему нашёл вот прикольчик.

Искоренить это, очевидно, невозможно, потому что все эти аспекты сродни всем знакомому: "а можно такой же, но с перламутровыми пуговицами?". Решения в стиле АртЛебедева (посылать всех подальше) - хороши только для Лебедева (да и то, думаю, не всегда), а не простых смертных.

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

В общем, вопрос скорее к менеджерам и опытным сотрудникам студий, как бороться с этой проблемой? Есть у кого опыт? Поделитесь своими наблюдениями, пожалуйста ;)