Архив за месяц: Июнь 2014

1402400570small__3519404549

Шесть золотых правил дизайна в ИМ

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

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

Потенциальный покупатель, зайдя на сайт магазина, хочет найти серьезного партнера, который знает, что предлагает и как это делать.

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

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

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

1. Делайте корзину проще



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

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

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

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

2. Детализация покупок

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

О чем это говорит?

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

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

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

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

Наряду с описанием товара нужно предусмотреть такие опции, как выбор цвета, размера и другие параметры.

Корзина должна быть построена таким образом, чтобы была возможность удалять и изменять количество товаров.

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

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

3. Предоставьте пользователю возможность настроек



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

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

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

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

4. Внушить доверие



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

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

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

5. Соблюдайте линейность процесса покупки

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

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

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

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

6. Используйте простые формы



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

В то же время, есть основные моменты при создании форм, которые всегда должны быть реализованы на практике.

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

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

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

Вывод

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

Оригинал статьи на англ.: http://www.sitepoint.com/ecommerce-checkout-design-fundamentals/ 

header

Как создать простой эффект «схлопывания» шапки сайта

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

Эффект схлопывания/исчезновения хедера
На самом деле, как говорится все гениальное — просто. Данный эффект создается всего лишь двумя строками кода в CSS, а именно:
1. Нам необходимо зафиксировать позицию элементов header и banner с помощью свойства position:fixed.
2. И задать значение свойства z-index, которое и позволит получить такой вот необычный эффект «схлопывания» шапки сайта при прокручивании веб-страницы.
Итак, как это делается.

Начнем с того, что зафиксируем позицию шапки сайта в CSS. Также, хочу заметить, что подобные эффекты на сайтах лучше всего смотрятся, когда изображение на сайте занимает всю видимую область, поэтому первым делом нам необходимо установить значение ширины для хедера 100%: width:100%. Чтобы зафиксировать шапку нам необходимо прописать для нее свойство position: fixed. Подобное определение стиля позволит элементу оставаться на своем месте, в то время как остальная часть страницы будет прокручиваться «под нее»:
header {
            height: 100px;
            background: #bdbdbd;
            position: fixed;
            width: 100%;
            z-index: 10;
}
Следующим элементом в коде сайта у нас идет блок с баннером. Именно этот блок div banner у нас и будет восприниматься «схлопывающимся», хотя на самом деле, ничего необычного с ним мы не делаем. Положение этого блока нам также необходимо зафиксировать с помощью свойства position: fixed;. Для того, чтобы блок banner не прилипал к верхней части окна браузера зададим ему отступ от верхнего края в 100рх:
#banner {
            width: 100%;
            height: 300px;
            position: fixed;
            top: 100px;
            background: #707070;
}
Итак, мы подходим с завершающей стадии. Давайте окончательно зададим стиль для последнего блока content.
Первые два элемента header и banner у нас зафиксированы с помощью свойства position: fixed и стоят на своих местах. Поэтому для блока content нам необходимо задать относительное позиционирование и задать небольшой отступ от верхнего элемента.
#content {
            width: 100%;
            position: relative;
            top: 400px;
            background: #ebebeb;
            height: 1500px; /* Demo purposes */
}
И наконец, для получения эффекта «исчезновения» зададим свойства z-index для всех элементов. Для шапки сайта z-index должен иметь самое высокое значение по сравнению со всеми элементами — за счет этого, шапка сайта у нас остается все время видимой. А z-index для banner должен иметь самое низкое значение. Т.е., если резюмировать, то наша область с контентом content должна иметь значения свойства z-index, большее чем у баннера (за счет этого он его и перекроет), но меньшее чем у шапки (это позволит шапке оставаться все время видимой).
После того, как мы настроили позиционирование и прописали все свойства для наших элементов, можно заняться наведением красивостей, размещением текста и добавлением другой полезной информации. В частности, в данном примере, я добавил немного текста и прописал фото ночного неба над городом в область с баннером, взятое с Flickr (отдельное спасибо Кевину Дули!) — его я прописал в свойстве background и добавил свойство background-size: cover; для того, чтобы изображение заняло всю видимую область страницы в браузере.
Оригинал статьи: http://line25.com/tutorials/how-to-create-a-simple-collapsing-header-effect 

01

Оформляем дизайн канала на YouTube

Если у вас есть свой канал на YouTube и вы не хотите мириться с невзрачным оформлением, которое предлагается по умолчанию, с помощью данного урока мы решим эту проблему и создадим свою крутую тему.
Для примера мы будем создавать дизайн для оформления  моего нового игрового канала в темных тонах с использованием атрибутики, присущей военной тематике.
Как и большинство социально направленных сайтов YouTube позволяет настраивать оформление вашей страницы. Для того, чтобы наш дизайн максимально подошел по размерам для своей работы мы будем использовать шаблон. Для этого, скачайте шаблон, который я уже разработал ранее для одного из своих проектов.
  
Для фона мы возьмем бесшовную текстуру «камуфляж». Текстуру вы можете скачать с сайта Blog.SpoonGraphics

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


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


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


Далее, создаем новый слой, кликаем правой клавишей мышки на рамке выделения и из контекстного меню выбираем Stroke — т.е. залить обводку. Устанавливаем толщину нашей обводки 1рх и задаем белый цвет обводки. Нажимаем ОК и меняем режим наложения для нашего слоя на Soft Light.


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

Поскольку мы выбрали военную тематику оформления нам понадобятся пушки! Огромное количество стволов разного калибра и убойной силы. Вы можете найти фотографии оружия на любом известном вам фотостоке. Если вы не хотите искать или у вас нет времени, можете скачать готовый шаблон постера, который я делал для урока на сайте Expendables Movie poster tutorial и взять оружие из этого файла.


Открываем каждое изображение, которое нам понравилось, обесцвечиваем его и выделяем волшебной палочкой (Magic Wand) белые области вокруг объекта.

Далее идем в Image — Selection — Contarct и выставляем значение в 2рх. В итоге, область выделения у нас расширится на 2рх, в результате чего, мы сможем избавиться от белого фона начисто, наш экземпляр пистолета, автомата или ножа станет чистым, без каких-либо ненужных пикселей. Удаляем выделенные белые пиксели.

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

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

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

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


Когда «крыло» будет полностью готово, группируем все объекты и перетаскиваем в наш шаблон с YouTube темой.
Подгоняем по размеру и помещаем позади главного окна с контентом. Желательно также учитывать различные разрешения мониторов, которые могут быть у пользователей — посетителей вашей страницы. Для этого ориентируемся на разноцветные вертикальные полоски. Для 100%-й уверенности, что наша картинка будет видима для всех пользователей, ориентируемся на область бежевого цвета.


Для усиления эффекта, также можно затонировать наше крыло холодным синим цветом.

Дублируем нашу группу, отражаем по горизонтали и получаем второе крыло.


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

Кадрируем окончательно наше изображение, и сохраняем для Интернета используя функцию Save For Web. Сохраняем наше изображение в формате JPEG. При этом, настраивая качество конечного файла, не забываем, что максимальный размер файла, который можно загрузить на YouTube — 256кБ.

Готово! Заходим в свой профиль на YouTube и выбираем «Редактировать». Загружаем наше изображение в качестве фона и снимаем галочку «Повторять (замостить)». Далее настраиваем фон, текст, цвета ссылок и т.д. Окончательно не забываем выставить прозрачность родного фона YouTube на 100%, чтобы ваша тема, которая будет лежать снизу стала видна.

Посмотрите как получилось это у меня на моем канале http://www.youtube.com/chrisjspooner. Обратите внимание, как отлично смотрится мой шаблон, особенно для игрового портала, по сравнению с обычным YouTube’овским контейнером.

Посмотреть окончательный результат.

Оригинал статьи: http://line25.com/tutorials/how-to-design-a-custom-youtube-background 

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

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

КРАУДсорсинг является одним из наиболее эффективных систем реализации задач. Являясь логичным и органичным развитием аутсорсинга, он позволяет достигать качественного результата в предельно короткие сроки при невысоких затратах.

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

Наиболее ярким примером успешного краудсорсинг-проекта является Википедия. В нем на июнь 2014 г. приняли участие 21.5 млн авторов.

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

Специализированные краудсорсинговые площадки для дизайнеров, как DizKon в рунете, или http://99designs.com/ на Западе, предлагают возможность заказа дизайна сайтов, фирменного стиля, визиток и любых других графических продуктов.

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

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