ДМИТРИЙ ВОЛКОВ

Мини тестирование удобства страницы портала Alibaba.com

Пациент страница портала Alibaba.com: http://www.alibaba.com/product-detail/sexy-dress-Designer-dress-sexy-club_1940265143.html?spm=5386.7286033.1998066781.8&tracelog=new01

Разбирал плюсы и недостатки данной странички ориентируясь на целевую группу – «Покупатели». Т.к. покупатели наиболее многочисленная аудитория любого продающего портала.
Мой покупатель действует по следующей схеме поведения:

  1. У него есть потребность купить конкретный товар.
  2. Он пользуется поиском для того чтобы найти нужный ему товар.
  3. Он находит необходимый товар и переходит на его страницу.
  4. Он обращает внимание на изображение товара, цену и описание.
  5. Он принимает решение о покупке товара.
  6. Он осуществляет заказ товара.

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


Недостатки:

  1. Дизайн страницы неадаптивный. То что у него заданы минимальная и максимальная ширина имеет значение только для настольных ПК.
  2. По моему мнению в верху страницы бесполезная  для покупателя  информация (он пойдет в эти разделы если столкнется с проблемами):  For Buers,  For Suppliers, Safe Trading Guide, About Alibaba Group. Данные разделы можно было бы поместить в футер и на главную. Раз уж так необходимо чтобы они были на всех страницах.
  3. При клике на Sign In | Join Free – я ухожу с этой страницы на другую… Зачем? Форма входа или регистрации не настолько огромна чтобы не поместить ее в лайтбокс.
  4. Функционал «Get Quotations» встречается в нескольких местах на странице, что подсказывает о важности данного элемента. Да и непонятно для новичка – что это такое.
  5. Размещение Multi-Language Sites – это костыль. В верху страницы все места заняты, поэтому разместили данный раздел на уровне с хлебными крошками. Могу предположить, что проектировщики не рассчитывали, что данный сайт будет на нескольких языках.
  6. Цена товара никак не выделена и идет общим списком с условиями поставки. По мне картинка + название + цена – являются наиважнейшими побуждающими факторами к покупке.
  7. Картинка открывается на новой странице, что пугает и напрягает (ведь новая страница должна прогрузиться по новой). Нет привычного лайтбокса. Я бы поменял функционал галереи. Т.е. размещена картинка одна (без соседних миниатюр). При клике на нее открывается лайтбокс с большим изображением, миниатюрами и стрелками влево вправо.
  8. Я так понял, что связь с продавцом это самое главное в данный момент на странице. И то что в отличиях форм связи при нажатии на кнопку «Связаться с продавцом» и формы связи внизу страницы скрыт особый смысл. Почему формы разные я не понял. Быть может нужно сделать одну форму связи. Ведь разные интерфейсы одного и того же ухудшают удбство.
  9. К недостаткам могу отнести приляпанные кнопочки начать покупку товара, добавить в корзину, добавить в закладки. Т.е. сейчас это выглядит так: - «Мы боимся что вы начнете покупку товара. Боимся потому что неуверены в удачном окончании операции. Поэтому пообщайтесь сначала с продавцом».
  10. Правая колонка на странице имеет меньшее значение чем левая (исходя из фокусов внимания), а информация о продавце имеет важное значение при покупке товара. Особенно когда это проверенный продавец. Блок продавца повышает доверие.  Да и блок «You May Like» из за своего размещения повышает количество отказов от страницы. Зашел на страницу посмотреть товар и увидел красивую картинку другого товара. Ушел туда. Тот товар не понравился, перешел на следующий. В итоге ничего не заказал. Я бы убрал правую колонку, а блоки переместил в другие места. При прокрутке вниз блок  «You May Like» становится симпатичным и маленьким. Вопрос как три миниатюрки могут мне понравится? Ответ – никак. Т.е. эффективность данного блока ненужна. Пускай висит для красоты ну и для любителей понажимать на кнопки – влево – вправо.
  11. Таб «Product Details» - верстка и размещение оставляет желать лучшего. «Quick Details» - скучено и трудно читается. Блок «Specifications» стоит вынести в отдельный таб по причине его наполненности огромным количеством информации. Сейчас он просто делает нерабочими и маловостребованными блоки, расположенные под ним.
  12. Корзина практически незаметна. И иконка глазастого лука не понятна. Поблуждав по сайту и посмотрев на футер я понял, что это «Trade Manager». Мое мнение надо менять иконку. Я бы не хотел общения с синим луком да еще с глазами.
  13. Не совсем понятны цели блока «Sourcing Products & Suppliers on Alibaba.com». Т.е. я зашел на страницу – покликал по всем кнопкам и теперь мне говорят: - «Enter the product you are looking for in the Search Bar and click Search». Кликаю на заголовок «Search Products» и неожиданно попадаю на страницу «Help», а рассчитывал на страницу поиска… Стоит подумать об отказе от данного блока, либо о более понятных заголовках.
  14. А где же отзывы и оценки товара? Оценки продавца? – повышающие доверие покупателя элементы.  А нету… Зато есть иконка вопросика под иконкой переместится «наверх». Вроде там вопросы по поставщику и странице товара. Так как исходя из выявленных недостатков портал нелюбит пользователей, о добьем их еще огромной опросной формой, которую спрячем так чтобы пользователь ее поискал.
  15. Блоки "Related Searches" и "You may also be interested in " оставил бы для создания перекрестных ссылок. Для пользователя особой ценности в них не вижу.

Ругать почему-то получается лучше, чем хвалить, но у данной страницы есть и плюсы:

  1. Классный поиск. Могу ограничить поиск по определенным фильтрам. Появляется окно – «популярные запросы». Правда можно сделать умнее. Почему в этом окне не выводить запросы из "Related Searches" и "You may also be interested in". Это же логично. Я же платье искал. Зачем мне смотреть запросы, не соответствующие моей цели.
  2. Могу посмотреть на изображение товара. Очень хорошо что количество изображений не ограничивается – 2-3-мя.
  3. Могу посмотреть максимально полную информацию о товаре.
  4. Есть информация о поставщике и могу сделать вывод о том доверят ему или нет.
  5. Если меня данный товар не устроил, то мне подсказывают сходные товары, чтобы я не разочаровался и не ушел с данного сайта.
  6. Табы! Если бы они отсутствовали, то было бы очень тяжело ориентироваться на странице.
  7. Корзина доступна из любого места страницы.
  8. Связаться с поставщиком могу в любой момент. Всегда есть заветные кнопки на которые можно кликнуть.
  9. Могу оставить отзыв о товаре.
  10. Могу совершить покупку, поместить в корзину, отложить в закладки.

Мой вариант решения вышеуказанных проблем:

Представляю Вам обновленную страницу товара портала www.alibaba.com.

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

Самый верхний элемент «English site» показывает, что мы находимся на английской версии, а галочка вниз говорит о том, что можно переключится на другие версии сайта.

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

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

Исходя из полезности блока «Get Quotations» решил отрекламировать его по полной и обратить внимание пользователя на данный функционал.  Элементы в данном блоке сдвигаются после небольшой задержки влево на один.

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

Сделал более удобные табы. Вынес в отдельный таб «Specifications». Добавил таб «Reviews». Пользователи хотят читать отзывы и обзоры о товаре. Это им помогает определится с покупкой товара

Старая верстка в «Product Details» никуда не годилась. Сложно было прочитать и разобрать что либо. Поэтому сделал в одну колонку и удобней.

Блок «You May Like» разместил именно на том месте, где он должен быть. Логика проста. Если пользователь добрался до самого низа страницы, значит товар его не зацепил, и он не уверен, что хочет его купить. Поэтому данный блок может задержать его на сайте.

Блоки "Related Searches" и "You may also be interested in” оставил от старой страницы. Востребованность их по моему мнению (нет статистики кликов на данные блоки) не очень высокая, но для перекрестных ссылок подойдет.

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

Теперь необходимо адаптировать страницу под разрешение 768px по ширине. Это необходимо для хорошего отображения на планшетах.

Опишу адаптивность блока.

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

Кнопки «Мой Алибаба», «Вход» и корзина смещаются на строчку ниже и выравниваются по правому краю.

Блок «Get Quotations» масштабируется по горизонтали. Масштабируется его центральная часть. Так как в центральной части запрограммирован сдвиг на один элемент, функциональность блока менять ненужно.

Хлебные крошки не меняются.

При адаптивности блок названия и цены не масштабируется (размеры шрифтов не меняются), а выравниваются по левому краю.

Картинка выравнивается по центру и уменьшается по ширине и высоте. Под картинкой появляется залитый фоновым цветом блок.

Условия поставки и продавец располагаются под картинкой и выравниваются по левому краю. Шрифты и отступы и размеры элементов не меняются.

Табы превращаются в разворачивающиеся списки, что удобно при использовании планшетов и телефонов. По умолчанию все списки свернуты.

Блок «You May Like» уменьшается до 3-х видимых элементов. Так как изначально дизайн данного блока был рассчитан под адаптивность, проблем с масштабированием не возникло. Просто скрыли два элемента.

Блоки "Related Searches" и "You may also be interested in” рассчитаны на пять колонок при разрешении 1280. 3 колонки отлично вписываются в разрешении 768. Так что 2-ве оставшиеся смещаются влево и выстраиваются под тремя первыми колонками.

Футер тоже слегка изменяется. Уменьшаются горизонтальные отступы между элементами. Подписка смещается на уровень ниже.

А так изменится верхний тулбар:

Спасибо за внимание!