Создание кнопок для удобный интерфейсов

Атрибуты ссылок

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

Итак:

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

2. Следующая подсказка может заключаться в виде какого-то символа, означающего переход, например стрелочка, или просто значек >>

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

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

5. Сделать текстовую ссылку с фоном, так что она будет немного похоже на кнопку.

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

И еще совет. Когда используете ссылки – не складывайте их просто друг за другом. Делайте список, лучше маркированный. Это значительно упрощает чтение и сканирование взглядом страницы.

Ссылки и кнопки

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

На большинстве сайтов мы ссылок видим больше чем кнопок. Это объясняется тем, что:
- ссылку легче создать;
- ссылки просты и понятны для пользователя;
- ссылка не затмевает содержание страницы;
- ну и конечно, кнопки передают больше веса для SEO.

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

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

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

Поэтому важные кнопки должны отличаться от других. Например, кнопка РЕГИСТРАЦИЯ должна быть больше и ярче, чем кнопка Очистить форму.

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

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

Кнопки призыва к действию

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

Используйте градиенты, закругленные углы и тени, чтоб кнопка была как настоящая.

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

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

Сделайте ее большой, но не очень большой
Цвет не единственный параметр, который обращает на себя внимание. Размер так же имеет значение. Чем больше ваша кнопка, тем легче ее заметить. Кроме того, когда вы увеличиваете размер кнопки, вы так же должны увеличить и текст внутри нее. Это не только сделает ее более заметной, но и упростит чтение. Тем ни менее, не делайте ее слишком большой. Если она затмит собой контент, пользователь потеряет нить и не поймет, зачем де ему что-то покупать.

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

Смягчайте ваши призывы к действию

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

Добавьте стрелочки или другие икноки для убеждения
Есть несколько способов, с помощью которых вы можете проиллюстрировать ваш призыв к действию, чтоб сделать его более убедительным. Один из способов – добавить стрелку, типа «play», чтоб пользователь сразу знал, что эта кнопка что-то «запускает». Можно использовать другой значок, который будет показывать, что эта кнопка означает (обновление, вызов справки, очистка формы).

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

Поместите кнопку в верхней части страницы и во втором экране

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

И последний совет – используйте A/B тестирование, чтоб определить, какой вариант страницы и кнопки лучше всего подходит для вашего сайта.

Кнопки «ОК»
Изначально, когда графические пользовательские интерфесы только появились, по стандарту на любое действие пользователя, система требовала подтверждение. Кнопка ОК – выполнение, кнопка ОТМЕНА – возврат в предыдущее состояние. Сейчас системы стали более умными и сложными. А потому, ОК больше ничего не означает (особенно, когда в диалоговом окне несколько кнопок.
Делайте кнопку более понятной, помещая надпись, полностью раскрывающую смысл. Что конкретно произойдет после того, как пользователь нажмет на кнопку? Вместо ОК поставьте: КУПИТЬ, СОХРАНИТЬ ИЗМЕНЕНИЯ, ПОЛОЖИТЬ В КОРЗИНУ и т.п.

Надеюсь, эти простые советы помогут вам при создании удобных интерфейсов.

Адам Смит. Исследование о природе и причинах богатства народов

Есть ли экономист, который не слышал о «невидимой руке» А. Смита, которая распределяет ресурсы и направляет экономику к росту и процветании? Думаю, все так или иначе слышали о причинах богатства народов. Лично мне, сразу вспоминается бессмертный Онегин:

«…За то читал Адама Смита,
И был глубокой эконом,
То есть, умел судить о том,
Как государство богатеет,
И чем живет, и почему
Не нужно золота ему,
Когда простой продукт имеет.
Отец понять его не мог
И земли отдавал в залог…»

К сожалению, наше правительство, как и его отец, таких умных книг не читали…

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

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

Книга состоит из 5 частей:

1. Причины увеличения производительности труда и порядок, в соответствии с которым его продукт естественным образом распределяется между классами народа;
2. О природе капитала, его накоплении и применении;
3. О развитии благосостояния у разных народов;
4. О системах политической экономии
5. О доходах монарха или государства.

Каждая из книг интересна по-своему, и представляет собой отдельное исследование (которое можно читать как отдельную книгу) с множеством примеров и разъяснений.

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

Теории Адама Смита легли в основу классической экономической школы. Сейчас, как никогда следует изучать этот подход. Мне кажется, что очень многие забыли о роли государства в обществе. А ведь довольно четко описано, что роль государства – обеспечение безопасности, разрешать споры, гарантировать соблюдение правил и норм законов (аж самому смешно).

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

Таким образом, та самая «невидимая рука» сама перенесет излишек из одного места туда, где будет недостача…

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

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

Адам Смит «Исследование о природе и причинах богатства народов» – читать экономистам обязательно!

Список ресурсов, которые я рекомендую периодически посещать:

optimizatorsha.ru – блог Оптимизаторши, Елены Камской. Эксперименты по продвижению сайтов, советы по комплексному интернет-маркетингу.

devaka.ru – Блог seo-аналитика Сергея Кокшарова (Devaka)

http://www.dekanblog.ru/ - блог Алексей Мурзинов, преподавателя MBA о менеджменте и стратегиях

Seolib.ru - все что надо оптимизатору в одном месте!

Сайт на разных языках – как быть: отдельный домен, поддомен или папка?

Довольно часто клиенты обращаются с вопросами по поводу мультиязычности сайта: русский, украинский, английский… как быть?
Существует три варианта решения проблемы:

1. Cделать сайт на отдельных доменах:
site.com – английский
site.ru – русский
site.com.ua – украинский

2. Вынести языки на поддомены:

site.com – английский
ru.site.com – русский
ua.site.com – украинский

3. Разложить языки по отдельным папкам:
site.com/en/ – английский
site.com/ru/ – русский
site.com/ua/ – украинский

Хотя, у нас я встричал еще и другой вариант, когда к странице просто приписывается параметр, например site.ru/index.php?lang=ua
Но все-таки это не такой очевидный вариант и только привязан может быть к админке. Рассмотрим первые три.

Техническая сторона вопроса с точки зрения SEO

Считается, что лучший вариант для поисковой оптимизации – это отдельная папка. Это позволяет поисковым ботам видеть ситуацию такой, как она есть – отдельный язык как отдельная часть вашего сайта, т.е. site.com/ua/ – является минисайтом вашего site.com
Кроме того, это поможет для продвижения, если у домена большой авторитет. Тогда и страницы папки с языками быстрее попадут в индекс и часть траста перейдет и на эти страницы.
Может возникнуть законный вопрос – а не повлияет ли на рейтинг сайта страницы с разными языками (основной сайт на русском хорошо ранжируется, мы добавляем украинский, и русский может упасть).

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

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

Использование папок для разных языков сайта является наиболее простым и методом, т.к. не требует никаких дополнительных технических знаний и действий, а так же считается самым безопасным с точки зрения SEO.
Однако, это накладывает и ограничения, ведь если страниц очень много, работа пропорционально количеству языков увеличивается. Т.е. если у вас менее 100 страниц, то это вариант устроит любого. Если же больше – это уже может вызывать сложность. Кроме того, большое количество страниц «размазывает» вес сайта по этим страницам, и чем больше страниц, тем меньший вес каждой отдельной страницы.

Если у вас динамический сайт, содержание которого постоянно меняется, для вас подойдет решение с поддоменами, т.к.. они могут быть легко закодированы и так проще продвигаться с большим количеством страниц.
Создание отдельных поддоменов (ru.site.com, ua.site.com) означает, что у вас есть разные разделы сайта, которые должны быть обработаны отдельно. Например, некоторые разделы в русском языке есть, а в украинском нет. Кроме того, они могут быть размещены на разных серверах и даже в разных странах. Могут работать на одном движке или разных.

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

Более подробно отличия разных подходов к мультиязычности показаны в таблице

С точки зрения пользователей

Многие считают, что выбор структуры сайта (поддомен, папка или разные домены), это не технический вопрос, а больше политический. Зачем вы их разделяете? Чего вы пытаетесь достичь? Нужно понимать, что вы хотите показать пользователям на разных языках: аналогичную версию страницы, или полностью другой контент и дизайн?

Например, вы можете делить на домены или поддомены не по языку, а по континенту или стране. Например, россияне, украинцы и белорусы читают на русском языке, однако их можно все равно разнести на разные поддомены и давать разный контент (аналогично, английский для Великобритании, США, Канады, Австралии…).

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

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

4 совета по оптимизации коммерческих посадочных страниц

Это переводная статья (хотя тут есть немного отсебятины, или «от-меня-тины», как вам больше нравиться). Оригинал на английском можете почитать: где-то там, за бугром…


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

Кстати, о высоких уровнях конверсии. У меня часто спрашивают, какой уровень конверсии считается «нормальным». В отечественных (Россия и Украина)  интернет-магазинах, приемлемым считается 2-3%. Критическим – менее 1%. Очень хорошим 5% и более. В интернет-магазинах США и Европы ходят слухи, что нормальная конверсия составляет 20%.

Итак, вот несколько простых но очень полезных советов по оптимизации Landing (посадочных) страниц.

Совет 1. Одноразовое тестирование – ущербное. Продолжайте тестировать дальше!

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

(кстати, вот на рисунке эксперимент A/B тестирования с Google-Optimizer. Как вы видите, 5% конверсии – вполне себе реальный результат).

- Ваши рекламные и маркетинговые сообщения вне сайта находятся именно там, где целевая аудитория рассчитывает их увидеть?

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

Совет 2. Анализируйте, откуда конкретно пришли ваши клиенты

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

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

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

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

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

Совет 3. Призывайте к действию. Здесь и сейчас

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

Несколько рекомендаций:

1. Используйте активную речь. Сравните:  ”Эти люди использовали нашу продукцию и полюбили ее” и «Присоединитесь к тысячам людей, которые используют нашу продукцию и очень довольны»

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

3. Используйте слова, вызывающие любопытство, например секрет, тайна.

4. Используйте ограничения (deadline) – срочно, только сейчас, до конца месяца.

5. Объясните пользователям «почему» – если они не будут знать зачем им следует покупать вашу продукцию сейчас, они это не сделают. Дайте простой и понятный позыв: сэкономите деньги, получите выгоду, выиграете приз, получите бесплатный подарок.

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

Совет 4. Используйте ваших поклонников

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

Добавьте выдержки из отзывов и обзоров о вашем товаре.

-   когда вы получаете благодарственное письмо от клиента, поблагодарите его и спросите, можно ли использовать его отзыв в своих маркетинговых целях;

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

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

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

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

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

– Oli Gardner