Про важность проработки Customer Journey Map при редизайне сайта

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

Каждые две недели мы заказываем в «Полюстрово» две бутылки воды в офис. Повторный заказ — единственный сценарий, которым мы пользуемся на сайте polustrovo.ru много лет. На старом сайте вверху была кнопка «Повторить заказ». При клике на неё, мы попадали на форму, где нужно было выбрать дату и время и нажать кнопку «Отправить». Один экран. Всё.

Сайт «Полюстрово» после редизайна

Посмотрим, сколько кликов для того же действия нужно совершить на обновлённом сайте.

1. Заходим на главную страницу. Нужной кнопки нет. Жмём «Войти», вдруг оно там?

2. Действительно там. Красными буквами поверх «красивого» дизайна написали, как можно Повторить заказ. Видимо, не только у нас возникла проблема, и пришлось добавить заметную надпись уже после окончания разработки. Хорошо. Жмём кнопку «Повторить заказ» справа.

3. Просят ещё раз нажать кнопку, теперь синюю. Жмём.

4. Заказ успешно добавлен в корзину! Ладно, теперь придётся идти в корзину. Ещё один клик и загрузка ещё одной страницы.

5. И только теперь появляется кнопка «Оформить заказ». Жмём.

6. Форма оформления заказа. ЖУТЧАЙШИЙ КАПС СЛЕВА! Ещё и узким шрифтом. Но приходится разбираться в этой каше, пить ведь хочется. Выбираем время доставки.

7. Нажали, выбираем то же время, как и всегда.

8. Теперь надо выбрать дату.

9. Жмём ближайший возможный день. Как всегда.

10. Жмём Продолжить и замираем в ожидании.

11. Это всё-таки конец. Бинго!

Выводы

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

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

Бесполезное «Спасибо»

Gmail

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

Почему? 

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

Пример

Переписка

Всё вышесказанное никак не относится к другим видам коммуникации. Благодарите чаще, если вам этого хочется.

38 место в рейтинге студий Петербурга

CMSmagazine СА-дизайн

Добавили последние работы и наконец вышли на первую страницу Рейтинга CMSmagazine. Я по-прежнему ищу крутых дизайнеров, иллюстраторов, технологов, программистов, менеджеров, маркетологов, seo-специалистов. Хотите работать вместе? Напиши мне: sa@sadesign.ru

Кофе и сигареты

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

Всё что делает река — Optimystica orchestra

Евгений Фёдоров

Пару недель назад посетили премьеру фильма о группе Optimystica (я никогда не запомню, как пишется это слово). Пожалуй, первый серьёзный фильм в котором снялась моя голова. Она попала почти во все возможные и невозможные ракурсы летающей камеры. Не зря всё-таки встал в первый ряд.

Optimystica

Если серьёзно, то получилось отличное кино. Про детство. Про Женю Фёдорова. Про красивую музыку. Про город. Кажется вчера World Travel Awards признала Петербург культурной столицей мира 2016. Так вот, «Всё что делает река» самый культурный и красивый фильм про Петербург, из тех, что я видел за последние много лет. Может москвичам и впредь снимать все фильмы про Петербург?

Петербург

Петербург

А какой саундтрек!

Полная версия фильма доступна на youtube совершенно бесплатно:

Уличная типографика теней

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

DAKU типографика

“The work is changing, the wall is changing. Everything around us is changing constantly. That’s the law of the universe”

DAKU

DAKU

Nikon vs iPhone. На что снимать?

Nikon vs iPhone

Мой стандартный набор для фотосъёмки: Nikon D90 + портретник 50 mm + широкоугольный объектив 10-24 mm

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

Я провёл небольшой эксперимент и в последние четыре поездки не брал с собой фотоаппарат. Эксперимент оправдал мои самые смелые предположения. В большинстве случаев различия в качестве не видны. Не нужно подключать провода, скидывать фотки и их обрабатывать — можно сразу пользоваться. Я ни в коей мере не причисляю себя к профессиональным фотографам и вообще фотографам. Мне просто нравится иногда выкладывать снимки в инстаграм. И как показала практика, в 80% случаев телефона хватает выше крыши. Это не значит, что сейчас я пойду и выброшу свой Nikon на помойку. Не ждите. Но каждый раз буду серьёзно задумываться, а стоит ли его сегодня взять.

Что получилось в результате эксперимента, можно посмотреть ниже. Снято на iPhone 5S:

Читать далее 

В тарелке — рецепты вкусных блюд

В тарелке

Помидоры с кинзой

Я наконец запустил собственный кулинарный проект: vtarelke.ru

Идея сайта зародилась в те далёкие времена, когда появился vkontakte и были модными домены на букву «v». Готовить я люблю и делаю это достаточно часто. Некоторые даже говорят, что достаточно неплохо. Хотелось записать и сохранить домашние рецепты для детей и внуков в одном месте. Чтобы не искать случайные записи в старом блокноте или не звонить маме, а достать телефон и быстро вспомнить сколько ложек муки класть в блинчики.

Втарелке

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

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

Втарелке Втарелке

Работа в портфолио:
http://sadesign.ru/portfolio/vtarelke/

Добавляйтесь в соцсетях, где вам удобно следить за новыми рецептами:
instagram.com/vtarelke/
vk.com/vtarelkeru
facebook.com/vtarelkeru
twitter.com/vtarelkeru

Злачное место

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

Злачное место — буквально: место, где растут злаки — выражение из православной заупокойной молитвы («…в месте злачнем, в месте покойнем…»). Так в текстах на церковнославянском языке называется рай. А рай — это где вкусно и сытно.

Избави нас от муки вечныя и огня геенскаго. Аминь.

Мобильная версия ★ unicode-table.com на всех прилавках страны

Почему нужна мобильная версия

В последнее время Google всё настойчивей стал присылать уведомления: 

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

Проще говоря, сайт опустят глубоко вниз. Новый мобильный фактор, как говорит руководство Google, включён в алгоритм, чтобы пользователи получали более релевантные результаты, оптимизированные под мобильные устройства. Мы согласились. Тем более что стали терять пользователей, да и самим давно хотелось пользоваться UT с телефона.

Стали выбирать решение:

  1. Мобильное приложение;
  2. Отдельная мобильная версия на поддомене;
  3. Адаптивная вёрстка, подстраивающаяся под разрешение любого устройства.

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

Что делать с главной страницей

Пользоваться unicode-table.com на телефоне действительно было затруднительно. Мелко. Неудобно. Зависает. Мы решили отказаться от полной таблицы в мобильной версии. И сосредоточиться на удобном поиске. Функционал мобильной версии получался другим, поэтому адаптив бы нас не спас и мы сделали отдельный сайт на поддомене.

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

Главная страница unicode-table в телефонеМобильная версия unicode-table.com

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

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

  1. Лого (для идентификации ресурса и возможности перейти на главную);
  2. Поле поиска. От кнопки «Найти» решено было отказаться;
  3. Основное меню в виде иконки гамбургера.

Технические моменты

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

Первая проблема с которой мы столкнулись на айфоне — никак получалось выделить ячейку с нужным символом. При удержании пальца на экране, выделение работало как угодно, только не так как нужно. Чаще всего выделялся целый блок (родительский <div>), а иногда произвольный набор символов. И лишь изредка выделялся тот самый, в который жмёшь. Помучившись несколько дней и попробовав разные варианты вёрстки вплоть до табличной, мы вспомнили, как работает выделение на сайтах с большими текстами: телефон стремится выделить абзац. Так родилось решение — заключить каждый символ в отдельный тег <p>. Телефон стал думать, что каждый символ — это самодостаточный абзац и выделять только его.

Выделение на телефонеВыделение на айфоне

Во-вторых, нужно было как-то объяснить Google, что m.unicode-table.com — это не новый сайт на поддомене, а всего лишь мобильная версия уже существующего сайта. Чтобы Google склеил новые мобильные страницы с уже существующими. Решение обнаружилось в справке Google.Developers

На обычной странице (http://www.example.com/page-1) нужно добавить следующий код:

<link rel="alternate" media="only screen and (max-width: 640px)"
      href="http://m.example.com/page-1" >

а на странице для мобильных устройств (http://m.example.com/page-1) такие атрибуты:

<link rel="canonical" href="http://www.example.com/page-1" >

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

При первом заходе на сайт с мобильного устройства, пользователь переадресуется на мобильную версию. Если после этого он возвращается по ссылке «Перейти к полной версии», это запоминается и автоматический переход больше не происходит. Определение устройства производится с помощью HTTP-заголовка User-Agent. Примеры определения устройства по этому заголовку для разных языков программирования можно увидеть на сайте: http://detectmobilebrowsers.com/

У нас получился отдельный домен для основной версии сайта, отдельный для мобильной версии и ещё один для статических файлов, таких как CSS и JS. Из-за политики безопасности браузеров это может нести некоторые проблемы, когда, например, не отображаются некоторые шрифты, подключаемые с соседнего поддомена. Это решается с помощью специального HTTP-заголовка, в котором перечисляются «доверяемые» домены:

Access-Control-Allow-Origin: http://one.example.com, http://two.example.comp

Почему unicode-table.com лучше, чем стандартные символьные клавиатуры на телефоне

1. Стандартные клавиатуры есть не у всех. На айфонах они появились только с iOS версии 8.3.
2. В стандартные клавиатуры входят только значки Emoji. А у нас в поиске все 70 000 символов.
3. UT — это отечественный продукт. Не содержит красителей, консервантов и ГМО.

m.unicode-table.com

 

Аня Логвинова

Давно не писал про стихи. Аня потрясающая. Если вы до этого не читали, то вот, пожалуй, три моих самых-самых:

***

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

***

Читать далее 

Про кнопки в лифте

Кнопки лифта

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

Так, мне нужна одна из этих двух кнопок → 
Палочка, треугольнички смотрят на палочку → 
Это означает что двери закрываются → 
А мне надо, чтобы двери открывались →
Мне нужна другая кнопка...

Бац! Двери захлопнулись. Опять не успел.

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

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

31 декабря

Новогодняя ночь, а тем более первое января — самое отвратительное время. Хуже только день рождения. Совсем другое дело — 31 декабря. В этот день надо включать весёлую музыку, например, The Killers, и убираться в квартире. Важно найти и выбросить что-нибудь старое и ненужное: тетрадку по химии за 8-й класс. Снять со стены старый выцветший календарь с лошадью и повесить новый красивый с козой. Вырезать ножницами снежинки и приклеить мыльным раствором на окно. Потом приоткрыть его, соскрести немного снега, слепить снежок и бросить в ворону, которая качается на ветке. Полчаса распутывать гирлянду, а включив, обнаружить, что она неисправна и искать, перегоревшую лампочку. В новогодних гирляндах последовательное соединение: сила тока везде одинаковая, а полное сопротивление цепи равно сумме сопротивлений отдельных проводников. Потом пытаться повесить её на ёлку, чтобы было красиво. Но получится всё равно так себе. И надо не забыть про звезду. А потом включить телевизор, где показывают «Иронию судьбы», помочь маме открыть зелёный горошек и нарезать что-нибудь для салата. Обязательно украсть немного отварного мяса, пока она разливает студень. А вечером нарядно одеться, усесться за стол в ожидании боя курантов и надеяться, что именно сейчас произойдёт то самое маленькое чудо. Он выйдет к экрану и скажет: «Дорогие друзья, дорогие мои. Я сделал всё что мог. Я устал, я ухожу».