Веб-дизайн *

21 октября 2010 года президент Барак Обама посетил Пало-Альто. Для привлечения денег на его предвыборную кампанию был организован званый ужин, стоимость участия в котором составляла 30 400 $. Это крайне эффективный метод привлечения средств, правда он может сработать только в том случае, если вы имеете возможность пригласить к себе президента. Как же привлечь средства, если у вас есть только веб-сайт, который не видел никто, кроме вашей бабушки? Именно в такой ситуации мы оказались в далеком 2007 году, когда Обама выдвигался в президенты, а отставание от ближайшего конкурента выражалось двузначным числом процентов.

Зачем вам это?

• Если вы знаете как делать сайт, этот метод поможет вам убедить заказчика, почему вы предлагаете ему именно этот вариант.
• Если вы заказываете сайт, то сэкономите от 2 до 10 часов объяснений что вам нужно и зачем.
• Если вы стартапер, то вся ваша команда сможет участвовать в создании нового сайта или лэндинга. Тот самый случай, когда одна голова хорошо, а команда лучше.
• Если вы учите стартаперов, то сможете помочь им выглянуть из позиции «я знаю как надо» и без сопротивления подвести их к началам CusDev-a.

Поддавшись чувству ностальгии, сотрудники Microsoft подняли копию первого корпоративного веб-сайта образца 1994 года.



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

Мы продолжаем цикл статей о том, как построить стартап, — рассказываем о каждом шаге на собственном примере.

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

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

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

1 Брайан Айзенберг

Брайан Айзенберг – специалист в сфере поисковой оптимизации и маркетинга, автор New-York Times, один из самых востребованных авторов.

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

Отличные новости! 4-5 октября 2014 уже в седьмой раз в Самаре пройдет Фестиваль 404.



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

Мы очень ценим личное отношение, поэтому секции на Фестивале 404 будут традиционно авторские. Вот список секций, которые будут идти в 4 потока:

• Управление людьми (Сергей Котырев)
• UX (Платон Днепровский)
• Design Weekend (Артем Геллер, Вячеслав Правдзинский)
• Маркетинг для роботов (Юрий Марин)
• Мобильные приложения (Руслан Демьяненко)
• Технологии (Александр Фитискин)
• Стартапы (Антон Гугля)
• Информационное общество (Денис Кортунов)

Есть для дизайна специальные программы как Sketch, но они есть только на маках (а у меня их нет) и занимаются только дизайном, хотя судя по обзорам делают это хорошо (unix-way как-никак). А есть фотошопы, гимпы и прочие корелы, которые используют не по назначению, об одном из таких случаев и есть этот топик. Картинка для привлечения внимания (на дизайн не претендую, да и не считаю его лучше того что есть сейчас, просто картинка):

Часть 1
Часть 2
Часть 3
Часть 4

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

Человеческие лица могут увеличить количество переходов двумя способами:

1. Привлечение внимания

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

2. Стимулирование эмоций

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

Часть 1
Часть 2
Часть 3
Часть 5

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

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

Теоретически, это означает, что для того чтобы вызвать рост CTR (click-through rate) достаточно увеличить цель (в разумных пределах) и поместить ее возле ожидаемого положения курсора мыши.

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

Часть 1
Часть 2
Часть 4
Часть 5

Эллиот Шмуклер (из LinkedIn и Wealthfront) однажды сказал, что успех сайта можно свести к трем основным рычагам:

1. Увеличение экспозиции (охватить большее количество людей)
2. Уменьшение трения
3. Увеличение стимула

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

Немного информации

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

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

Часть 1.
Часть 3
Часть 4
Часть 5

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

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

Немного информации

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

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

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

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

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

24 мая в Москве прошел Dribbble Meetup 2014. На этой неформальной конференции для дизайнеров выступили два десятка сильных и интересных специалистов, представленных в одной из главных тематических социальных сетей Dribbble. Степан Бурлаков (Freeger), Pokras Lampas, Макс Костенко, Александр Зайцев, Таня Саенко (Ряжанка), Александр Хмелевский (SoftFacade), Дмитрий Новиков (MacPaw), Андрей Давликанов, Алекс Бендер, Александр Нохрин, Роман Храмов (Cuberto), Дмитрий Чута (Chapps), Павел Скрипкин (Mail.Ru Group), Алишер Якупов и Олег Андрианов (Одноклассники), Саша Бурт, а также внеплановый Антон Карташов (Иннова). Было много практически полезных рассказов и историй из жизни дизайнеров и компаний с живым и веселым диалогом со слушателями.

Этот пост знаковый для нашего блога. По счёту он, ни много ни мало, четыреста четвёртый. В честь этого мы решили написать о том, как нами был когда-то использован мощный потенциал страницы 404 на Одноклассниках. А заодно составили небольшую подборку необычных и интересных страниц с других сайтов.

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

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

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

Пример 1
Пример 2

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

Уже четыре года я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-май 2014.

Эффективный или эффектный?

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

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

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

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

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

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

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


Сатира на большинство «лендинг пейджей»