Адаптивные вкладки товара (табы)

Предложение по юзабилити. Адаптивные вкладки (табы).

В десктопной версии карточки товара у нас есть табы (вкладки) http://prntscr.com/opg1nr 1 Это наглядное, простое и понятное людям решение.
Почему бы не сделать тоже самое в мобильной версии?

Почему это удобнее?
Сейчас вкладки товара на мобильных открываются аккордеоном.
Бывает, что контента на вкладке много, например, текст большой или характеристик у товара много.

Переключаться между вкладками неудобно и вот почему.
Давайте представим, что человек хочет посмотреть весь контент на вкладке. Он нажимает на ссылку “Больше” (http://prntscr.com/opfcku) и открывается скрытый контент.
При этом другие вкладки товара уходят из поля зрения человека и вероятность того, что он перейдет на них, сильно снижается.
Чтобы перейти на другие вкладки, человек должен либо свернуть текущую вкладку, либо доскролить вниз до конца, где увидит остальные вкладки.
Еще момент. Когда человек в таком режиме знакомится с контентом одной вкладки, он скорее всего, не будет помнить какие еще вкладки здесь есть.
Как его заставить скролит вниз, чтобы перейти на другие вкладки товара?
Такая ситуация сильно снижает просматриваемость каждой отдельной вкладки.

Вот хороший пример вкладок в мобильном виде (смотреть на смартфоне): https://ruseller.com/lessons/les2635/demo/index.html
Так сделано во многих мобильных приложениях. Например, Google Play или моб. приложениях банков.
Если табы в мобильном виде сделать прилипающими к верху экрана, это еще больше улучшит юзабилити и кликабельность каждой отдельной вкладки.
Улучшится поведенческий фактор.

Вариант отображения №2
Оставить вкладки в мобильной версии такими же как на десктопе http://prntscr.com/opisgx

5 лайков

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

organizer