23 июня 2011 в 17:08

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

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

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

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">' . 'открыть весь список одним кликом' . '</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
Димочка @kal1sha
карма
224,0
рейтинг 0,0
CTO
Похожие публикации
Самое читаемое Дизайн

Комментарии (11)

  • +1
    i) или правая кнопка и тогда «открыть в новом табе», ii) или Ctrl+Click, iii) или другая комбинация.
    Средняя кнопка мыши давно уже. Ну, конечно, если у вас нормальная мышь.
    • 0
      Но опять же, открытие 20 наименований, — это 20 кликов. Утомляет.
      • –1
        А двадцать табов внутри одной страницы перекликивать не приходится? И вообще, как браузеры к такому относятся?
        • 0
          Приходится, но когда они все уже открыты — это гораздо удобнее. И первый раз не надо 20 раз кликать. Только при переходе на другой таб.

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

          Бегать по списку, — это вверх в вниз – это требует дополнительных силовых приложение – поэтому люди и пропускают всё, — это решение происходит подсознательно.

          Фишка в том, если у Вас рассылка, 99% людей поленятся и не откроют все товары. А так откроют.
          • 0
            Мне кажется, что в рассылке, с непривычки, многие не разглядят дополнительных страниц.
            Я вообще против дополнительных кликов. Если очень хочется, то надо размещать все на одной странице, чтобы можно было все увидеть с одного раза.
  • 0
    >>Гугл почему-то намертво отрубил все картинки
    Обычно гугл предоставляет следующий выбор, по поводу отображения картинок в письме:
    Показать картинки — Всегда показывать картинки от пользователя notification+
    • 0
      С картинками есть дополнительный нюанс: при пересылке друзьям, они часто пропадают, и даже gmail не может их открыть.
  • +1
    А на Янедкс.Маркет не смотрели? Лучше некуда — все параметры всех моделей перед глазами.
    • 0
      Правильное замечание. Так и должно быть. Правда в Интернет магазинах есть дополнительные данные о доставке гарантии и т.д. В идеале для сравнения, нужно вот так удобно столбиками.

      А если надо быстрое решение – можно и табами. Имплементация занимает до 20 минут.
      • 0
        Гарантия — ещё одна строчка в сравнении. Условия доставки обычно одинаковые для всех товаров магазина, можно под сравнением показать. Ну и делать это тоже 20 минут, если не нужно, чтобы заголовок залипал при скроллинге :)
  • 0
    Здесь дело в маркетинге. На ссылку нужно кликнуть, на этом этапе убегут треть пользователей. А тут вот они, все предложения перед глазами. И всего шаг до покупки.

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