Правильные рекомендации — это залог прогресса любого Интернет магазина. Если пользователю неудобно бегать по сайту — он быстро с него уходит к конкуренту.

Типичный магазин предоставляет нам продукты списками или долгими столбиками:

product listings

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

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

Лично я пробегаюсь по списку, открываю всё в табах, а потом зондирую, чтобы не бегать туда и обратно и лишний рас не ждать. Но опять же, открытие 20 наименований, — это 20 кликов. Утомляет. И даже открытие каждой страницы в отдельном табе это не просто клик, а: i) или правая кнопка и тогда «открыть в новом табе», ii) или Ctrl+Click, iii) или другая комбинация.

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

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

Если Вы иногда пересылаете пачку линков, можно их уплотнить для пересылки Твиттером, вот к примеру эти 12 популярных наименований на Озоне.

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

Генерация табов на ходу с помощью PHP


Возьмём простой пример на PHP, когда ссылки на продукты, которые клиенту было бы нужно посмотреть сразу, у вас собраны в массиве $entry_array:

  1.  
  2. <?php
  3. $n = count ( $entry_array );
  4. $parameters = '';
  5.  
  6. for ( $i= 0; $i<$n; $i++ ) {
  7.   if ( $url = trim ( $entry_array [$i] ) ) {
  8.     $parameters .= '&url' . ($i+1) . '=' . urlencode ( $url ) .
  9.                    '&caption' . ($i+1) . '=' . urlencode ( 'Предмет ' . ($i+1) );
  10.   }
  11. }
  12.  
  13. if ( $parameters ) {
  14.   $bundled_link = 'http://many.at/links2tabs/?toc=' . urlencode ( 'Меню' ) . $parameters;
  15.   echo '<a href="' . $bundled_link . '" target="_blank">' . 'открыть весь список одним кликом' . '&lt/a>';
  16. }
  17. ?>

В результате в добавок к стандартным уже всеми используемыми меню «сюда 1, 2, 3,… туда» появляется полезный линк:

«сюда 1, 2, 3,… туда» «открыть весь список одним кликом»

…
… списки и картинки между верхним и нижним навигационным меню
…

«сюда 1, 2, 3,… туда» «открыть весь список одним кликом»

Нажимая на нём, пользователь может просмотреть восемь переносных дисков на WikiMart.

Меню оглавление можно скрыть совсем, для этого нужно в запросе вызвать toc=off. Выбрать произвольный таб, чтобы он открывался по умолчанию, можно с помощью параметра selected. Подписи в табах задаются через API, так что контролировать их можна меняя caption1, caption2,… Можно также поменять цветовую гамму и другие подписи. Больше деталей на странице API.

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

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

Работа с рассылками


Другим направлением улучшения нужно считать рассылки электронной почтой. Вот последний мейл с рекомендациями который пришёл мне в ящик на Gmail:

OZON.ru mailing in Gmail

Гугл почему-то намертво отрубил все картинки, и чтобы посмотреть товары, мне всё равно надо было кликать по каждой ссылке. Было бы гораздо удобнее, если бы мейл был короткий вот c таким одним линком:

Здравствуйте, Дима!

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

С уважением,
Ваш OZON.ru

И теперь я одним кликом могу посмотреть всё и сразу.

Так как API гибкий, можно генерировать также и суб-табы. Вот такую рассылку, 5 категорий по 4 рекомендации:

OZON.ru mailing in Gmail 5x4

можно превратить в один УРЛ со всеми наименованиями в табах 5 x 4 проганяя через такой PHP код:

  1. <?php
  2.  
  3. // Структура данных
  4. $categories = array ();
  5. $categories [] = array (
  6.   "name" => "Книжные новинки весны",
  7.   "products" => array (
  8.     array ( "url" => "http://www.ozon.ru/context/detail/id/5561766/",
  9.             "name" => "И. Ильф, Е. Петров. Двенадцать стульев (подарочное издание)" ),
  10.     array ( "url" => "http://www.ozon.ru/context/detail/id/5813135/",
  11.             "name" => "Мэри Роуч. Обратная сторона космонавтики" ),
  12.     array ( "url" => "http://www.ozon.ru/context/detail/id/5505592/",
  13.             "name" => "Милена Сигаева. Странности животной сексуальности. Как они делают это...?" ),
  14.     array ( "url" => "http://www.ozon.ru/context/detail/id/5801663/",
  15.             "name" => "Стивен Джуан. Могут ли поцелуи продлить жизнь?" ),
  16.   ),
  17. );
  18. // ...
  19. $categories [] = array (
  20.   "name" => "Свежие предложения электроники ",
  21.   "products" => array (
  22.     array ( "url" => "http://www.ozon.ru/context/detail/id/5592866/",
  23.             "name" => "Мобильный телефон Nokia N8" ),
  24.     array ( "url" => "http://www.ozon.ru/context/detail/id/5862823/",
  25.             "name" => "Мобильный телефон LG P500 Optimus One" ),
  26.     array ( "url" => "http://www.ozon.ru/context/detail/id/5623463/",
  27.             "name" => "Ноутбук MSI Megabook CX620-292" ),
  28.     array ( "url" => "http://www.ozon.ru/context/detail/id/5819885/",
  29.             "name" => "Настольный жесткий диск Iomega Prestige 1TB, USB" ),
  30.   ),
  31. );
  32.  
  33. // Код
  34. $top_parameters = '';
  35. $i = 1;
  36.  
  37. foreach ( $categories as $key => $category ) {
  38.   $parameters = '';
  39.   $j = 1;
  40.   foreach ( $category["products"] as $product ) {
  41.     if ( $url = trim ( $product["url"] ) ) {
  42.       $parameters .= '&url' . $j . '=' . urlencode ( $url ) .
  43.                      '&caption' . $j . '=' . urlencode ( $product["name"] );
  44.       $j++;
  45.     }
  46.   }
  47.   if ( $parameters ) {
  48.     $categories [$key] ["bundled_link"] = 'http://ozon.cheap.ly/?toc=off&title=OZON.ru&description=' .
  49.       urlencode ( $category["name"] ) . $parameters;
  50.     $categories [$key] ["bundled_shortlink"] = bit_ly_shorten ( $categories [$key] ["bundled_link"] );
  51.     $top_parameters .= '&url' . $i . '=' . urlencode ( $categories [$key] ["bundled_shortlink"] ) .
  52.                        '&caption' . $i . '=' . urlencode ( $categories [$key] ["name"] );
  53.     $i++;
  54.   }
  55. }
  56.  
  57. if ( $top_parameters ) {
  58.   $bundled_link = 'http://ozon.what-el.se/?toc=' . urlencode ( 'Меню' ) . $top_parameters;
  59.   echo '<a href="' . $bundled_link . '" target="_blank">' . 'открыть весь список одним кликом' . '</a>';
  60. }
  61. ?>

И отослать простое но удобное письмо:

Здравствуйте, Дима!

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

С уважением,
Ваш OZON.ru

После клика на этой ссылке попадаем на сайт с 20 страницами в табах:

Рассылка Озона 5x4 одним кликом

Если не подходят базовые УРЛы которые используется в примерах — можно поменять на свою API страницу, поставить личный логотип, прописать другие цвета. В настройках можно ограничить с каких доменов принимать API ссылки, чтобы никто не смог подставлять чужые страницы. Вот проверка что линк с ozon.ru попадёт в таб, а ссылка с d3.ru будет проигнорирована.

Инструкцию по созданию базового API линка можно найти здесь (пока только на английском). Можно даже использовать собственный домен и Google Analytics. Вот как получилось открыть русские книги на Амазоне на суб-домене super.cheap.ly.

Бонус — вставка фидов


Если у Вас есть фид, то можно открывать последние новости тоже одним кликом. Например, вот ссылка которая загрузит 10 последних новостей с Лента.ру.

Feed2Tabs