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

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

1 Один столбец вместо нескольких

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

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

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

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

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

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

Другие публикации из этой серии

Часть 1. Unboxing VisuMax — фемто-лазера для коррекции зрения
Часть 3. Знакомьтесь — лазер по имени Amaris. Переезды и первое пробуждение VisuMax
Часть 4.1 Возвращаем зрение. От очков до эксимерного лазера
Часть 4.2 Возвращаем зрение. От очков до эксимерного лазера

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

Я постараюсь рассмотреть человеческое зрение через призму IT. Если кому-то не слишком интересно читать часть, посвященную биологическим аспектам зрения — ничего страшного. Просто пропустите разделы, начиная с оптической системы глаза, и сразу переходите к традиционному конкурсу от наших девушек. Однако, я все же рекомендовал бы ознакомиться с этим материалом, чтобы лучше понять следующую статью, в которой мы будем рассматривать LASIK, Femto-LASIK, ReLEx SMILE и другие методы лазерной офтальмохирургии.

Есть настроение разобраться, что именно говорят эти непонятные люди в белых халатах, задумчиво глядя на результаты вашего обследования? Вы хотите узнать немного нового об уникальном природном даре — зрении? Тогда добро пожаловать под habracut. Как обычно — много иллюстраций и трафика (≈5 MB).

JavaScript встречает разработчиков асинхронностью можно сказать чуть ли не с порога. Начинается все с DOM-событий, ajax, таймерами и библиотечными методами, связанными с анимацией (например jQuery-методы fadeIn/fadeOut, slideUp/slideDown). В целом, это все не очень сложно и разобраться с асинхронностью на этом этапе не представляет проблем. Однако, как только мы переходим к написанию более или менее сложных приложений, в которых комбинируется все вышеуказанное, асинхронный поток может сильно затруднить понимание происходящего в коде. Цепочки асинхронных действий, например, анимация > ajax-запрос > инициализация -> анимация, создают достаточно сложную архитектуру, которая не подчиняется строгому направлению «снизу верх». В этой статье я намерен рассказать про свой опыт преодоления трудностей связанных с асинхронным JS.

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

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

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

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

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

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

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

Вот где пригодятся методы юзабилити.

Сегодня JavaScript лежит в основе большинства современных веб-приложений. При этом за последние годы появилось большое количество JavaScript-библиотек и фреймворков для разработчиков Single Page Application (SPA), графики, анимации и даже серверных платформ. Для веб-разработки JavaScript используется повсеместно, и поэтому качество кода обретает всё большее значение.

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

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

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

Зачем улучшать UI?

Переработка UI — дорогостоящий процесс. За последнее время наши разработчики потратили на нее не меньше 30% времени, а могли бы вместо этого добавлять новые возможности. Значит, надо четко понимать, для чего мы меняем UI и какие выгоды это даст.

Для себя мы определили задачи, которые должен решать идеальный интерфейс:

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

Теперь о конкретных действиях.

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

А был ли лендинг?

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

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

Карточка товара

Рис. 1. Карточка товара

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

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

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

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

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

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

Stop fucking procrastinating and do some fucking work!

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

Один славный малый Matt West c туманного альбиона, промышляющий фрилансом и предпринимательством, предложил нашему вниманию пост: «Как использовать секционные элементы HTML5».
Ниже приводится его перевод.

---

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


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

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

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