Pull to refresh

Открытие и просмотр множества рекомендаций одним кликом

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

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

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
Tags:
Hubs:
Total votes 27: ↑24 and ↓3+21
Comments11

Articles