Контент-бар у Светланы – о разработке и оптимизации сайтов, интернет-магазинов под пользователей

Jan28th

Сделайте мне самый стильный и красивый сайт. Мне нужен оригинальный дизайн для лучшего сайта.

автор рисунка мультипликатор Dean Yeagle— Здравствуйте. Скажите, Вы делаете сайты?
— Да.
— Вы можете сделать самый лучший сайт для нашей компании?
— Давайте делать. Чем занимается Ваша компания?
— Я правильно понял, что Вы гарантируете, что сайт будет красивым?
— он будет таким, как Вы хотите.

Вам это знакомо?

  • Вам приходилось узнавать у клиента, что такое красивый сайт в его понимании? 
  • Вы получали заказ с условием: «Это должен быть самый оригинальный веб-дизайн»? 
  • Вы показывали заказчикам образцы лучших сайтов Рунета? 
  • Вам приходилось создавать креативные сайты в фирменном стиле компании? 

Вы улыбаетесь? Значит Вам знакомы подобные задачи. Вы их решали или ставили?

Одно дело, когда с заказчиком общается менеджер по продажам, другое дело, когда договор подписан и начинается самое интересное – выяснение, что такое креативный, красивый, стильный и оригинальный дизайн. Эти прилагательные просто преследуют все, что связано с созданием сайта или логотипа, флеш баннера или бумажного буклета или…

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

По одежке встречают. Дизайн как фактор доверия

В 2002 году группа специалистов (Sliced Bread Design, B.J. Fogg, Ph.D. (глава Стэнфордской лаборатории по каптологии ) провели исследование под названием Experts vs. Online Consumers: A Comparative Credibility Study of Health and Finance Web Sites (Эксперты и потребители в on-line: сравнительное исследование вопросов доверия к веб-сайтам , предлагающим финансовые и медицинские услуги).

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

При этом пользователь определяет нравится ему сайт или нет в течение 1-2 секунд, а иногда и долей секунд.

Как понять сайт красивый или нет?

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

Мало того для каждого человека, определение красивый или не красивый — меняется, в зависимости от настроения и возраста.

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

Например, из комментариев народного рейтинга самых красивых и интересных сайтов Рунета за 2007 год, красивый сайт:

Опять скажете: «Светлана, Вы говорите банальные вещи, мы и так это знаем, лучше расскажите, как определить дизайн красивый или нет?». Как говорится, нового я ничего не открою. Но, есть:

7 простых правил, которые жизненно необходимо соблюдать, чтоб сделать красивый сайт:

  1. Рассматривайте каждую страницу сайта как цветовые пятна (текст тоже считается цветным объектом)
  2. В целом сочетание цветов сайта не должно раздражать глаза:
    • избегайте резких, не приятных для восприятия, "контрастно-ядовитых" сочетаний цветов
    • избегайте часто мигающих объектов, которые превращают Вашу страницу в новогоднюю елку.
  3. Цветовых пятен не должно быть много, чтоб глаза знали, где остановится, и за что зацепится.
  4. Комбинируйте цветовые объекты в группы, которые концентрируют внимание в определенных местах
  5. Расставляйте акценты на каждой странице сайта в зависимости от приоритетных целей страницы. По принципу, то, что важнее – привлекает больше внимание цветом, размером, формой.
  6. Дайте возможность сканировать Вашу страницу по цветовым пятнам, и при этом получать всю необходимую информацию о назначении и возможностях сайта.
  7. И самое главное, не пытайтесь угадать, понравится конечному пользователю сайт или нет, проведите небольшое тестирование.
  • на своих знакомых и родственниках (попросите их посмотреть на страницу в течение 5 секунд, потом расспросите о впечатлениях, задавайте вопросы)
  • попросите дать первое впечатление о сайте на каком-нибудь форуме, где общается ваша ЦА или близкая вашей ЦА аудитория
  • напишите блоггерам, люди в основной своей массе отзывчивые, посмотрят на Вашу страницу в течение 5-10 секунд.
  • Вы можете написать мне :)  Я тоже гляну на Вашу страницу.

P . S . Красивый сайт сравним с красивой женщиной. И у каждого мужчины, как, впрочем, и у каждой женщины, свое личное восприятие женской красоты. Кому-то нравятся женские глаза, кому-то ноги или грудь. Кто-то видит внутреннюю женскую красоту, ее внутренне тепло, доброту и энергию, кому-то нравятся сексуальные, умные и красивые

А Маулу нравится Одри Хепберн, в честь которой он организовал конкурс. Если Вы хотите принять участие в этом конкурсе красоты – у Вас еще есть время, жмите на фотографию.

Одри Хепберн

А меня из всех выставленных работ на конкурс тронула вот эта.

Jan8th

Какие элементы в дизайне сайта увеличивают конверсию и продажи? Часть 2.

"Не пренебрегайте мелочами. От мелочей зависит совершенство.
А совершенство - это не мелочь".

Продолжаем тему начатую ранее. Кто не помнит начало, читайте часть 1повышая конверсию сайта, можно получить больше прибыли при том же количестве трафика.

Сегодня, пожалуй, перейдем ближе к делу, и те, кто ищет конкретные примеры, их найдут. Читайте, думайте, дополняйте и приводите свои примеры из жизни.

Итак, поехали. Оформление различных элементов сайта по отдельности формируют общее восприятие. Как сказал Микеланджело: «Не пренебрегайте мелочами. От мелочей зависит совершенство. А совершенство — это не мелочь».

На конверсию сайта влияют:

  1. Форматирование текста: цвет и сочетание цветов, выравнивание текстов по центру, левому или правому краю, шрифт и размер текста, маркированные списки, оформление абзацев, заголовков и подзаголовков
  2. Оформление графических элементов: кнопок и рамок
  3. Картинки, их эмоциональная и информационная нагрузка
  4. Копирайтинг: обращение к потребностям, эмоциям и мечтам пользователей
  5. оформление «шапки»
  6. оформление «подвала»
  7. расположение и название информационных блоков
  8. формы, внешний вид и расположение полей
  9. оформление и расположение блоков отзывов и гарантий
  10. ит.д.

Все эти элементы условно можно разделить на 3 функциональные группы:

(more...)

Nov26th

Хотите знать как пошив модного пиджака портит сайт?

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

Представили…, а теперь представьте, как вы выглядите в этом пиджаке…

Как думаете, какой у вас будет имидж и доверие к вам, если пойдете на улицу, в ресторан, в театр или на деловую встречу.

К чему я веду. Сайт, блог или другой веб-ресурс, как и человека встречают по одежке и провожают по уму. Одежкой для сайта является — дизайн. Качеством пошива — верстка. И довольно часто много внимания уделяется дизайну, и совершенно не уделяется внимание корректной верстке. А ведь покупая одежду, Вы проверяете каждый шов и обработку срезов одежды, не так ли?

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

Такое "разлезание" сайта встречается довольно часто, даже на хорошо известных ресурсах. Например, Amazon.com после быстрой реакции на критику , которая похоже вызвала очередной редизайн — Смотрим как это выглядит:

браузер opera

разлазится в разных разрешениях экрана в IE 6
(расшифровываю для тех, кто не знает — браузер Internet Exploer 6 версии)

браузер opera

В Опере 9

Начиная с разрешения 832 х 624 и ниже Amazon «разлазится». Шапка сайта смотрится – хорошо. Контент вылазит вправо. Разрешение 800 х 600. Шапка сайта не помещается на экран и урезается справа. Контент вылазит еще дальше за шапку вправо. Разрешение 1024 х 768 и больше – это разрешения, при которых Амазон смотрится хорошо.

maulnet Маул

Браузер все тот же IE 6. Разрешении экрана можно брать любое: верх с баннером вылазит вправо на пару пикселей. Маул, если ты это видишь — подправь.

И с правой стороны красивая картинка подводного мира разрывается на две части: одна часть вверху возле первого поста, вторая часть внизу, возле 10 поста.

maulnet.ru


Как проверить сайт, даже если вы ничего не понимаете в верстке и дизайне?

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

Вот с проверкой разными браузерами вам придется посложнее. Для начала их надо установить, а потом уже проверять сайт в разных разрешениях. Например, Саша — верстальщик, который объяснял и обучал меня основам верстки, проверяет сайты в 3 - 11 браузерах, включая IE 5.5, которым по статистике пользуется все меньше и меньше народа.

Я периодически к нему обращаюсь за версткой и проверкой сайта в малоиспользуемых броузерах.

Почему надо проверять сайт в разных браузерах и при разных разрешениях?

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

P.S. «Разлезание сайта» в разные стороны — это, пожалуй, один из самых частых явлений на коммерческих сайтах, и, особенно, сайтах сделанных новичками в веб дизайне и верстке.

P.S. S. По статистике, читатели моего блога используют:

Браузеры IE — 45%
Браузером Opera — 39,4%
Браузером Firefox — 10,6%
Другие браузеры — 5%

Полезные сервисы для тестирования на кроссбраузерность, сервисы и утилиты

Описание нескольких бесплатных и платных сервисов для тестирования сайта на кроссбраузерность
Описание BrowserShots.org - проверьте отображение вашего сайта в разных браузерах

Nov16th

Как использовать на сайте ошибку 404 для формирования доверия?

Ошибка 404 формирование доверияСегодня была приятно удивлена надписью "Техническине работы"  социальной сети «Мой круг»

Технические работы

К сожалению, в данный момент Ваше действие не может быть
выполнено, т.к. мы обновляем систему. Пожалуйста повторите
попытку через несколько минут (например, просто нажмите F5)

А пока приглашаем выпить чашечку кофе.

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

  • Мне предложили чашечку кофе, мелочь, а приятно.

Что самое интересное, для меня это сработало как напоминание — пора сделать (more...)

Nov10th

Какие элементы в дизайне сайта увеличивают конверсию и продажи? Часть 1.

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

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

Более расширенно, под конверсией сайта понимают любое действие посетителя, которое Вы запланировали для получения результата:

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

Почему конверсия сайта бывает «0» или близка к нулю?
Потому, что (more...)

« Previous PageNext Page »