Подскажите как улучшить карточку товара ИМ

[sonicm]

Подскажите пожалуйста, что можно улучшить в юзабилити карточки товара. Возьмем для примера произвольную карточку нашего магазина, скажем эту (вы можете выбрать другую)

В первую очередь интересуют вопросы:
1) Мешают ли кнопки социальных сетей, стоит ли их опустить куда-нибудь по ниже?
2) Должны ли быть вместе (рядышком) цена на товар и кнопка В КОРЗИНУ?
3) Хорошо ли видны (и удобны к использованию) вкладки с описанием/ характеристиками / отзывами к товару?
4) Заметна ли кнопка "Показать все расцветки"?

Так же приветствуются любые другие ваши комментарии и рекомендации по улучшению юзабилити карточки товара данного магазина.
Бужу очень признателен за ваши отзывы!

 

[Arcvi]

Я бы сделал так
Для просмотра ссылки Войди или Зарегистрируйся

 

[sonicm]

Я бы сделал так

Про расположение блоков вашу идею понял. А что вы думаете по вопросам 3 и 4?

 

[shuran]

Согласен что кнопку лучше перенести ближе к цене. Понимаю что сайт использует приглушенные тона, но может быть основную кнопку сделать чуть ярче?
"Показать все расцветки" - замечаешь не сразу, сначала прокрутил все расцветки и только потом ее заметил, когда стал икать подробное описание. Имеет смысл сделать ее просто кнопкой и поместить правее.
ОПИСАНИЕ-ХАРАКТЕРИСТИКИ_ОТЗЫВЫ - этот блок (заголовки) не растягивать на 100% а сделать уже, так будет более понятно что это закладки.

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

И чисто мое субъективное мнение - очень частое использование градиентов в серых тонах - все сливается.

 

[Arcvi]

Про расположение блоков вашу идею понял. А что вы думаете по вопросам 3 и 4?

про "показать все расцветки" я бы перенес её наверх, чтобы не снизу было, при раскрытии списка приходиться листать вниз чтобы закрыть, а так при раскрытии если она будет наверху то она останется под мышкой. да и когда она наверху так привычнее вроде, возможно субъективное мнение.
Стоило бы прописать этим кнопкам, включая "описание, характеристики, отзывы" font-weight: bold; . Сделать жирным

 

[sonicm]

Понимаю что сайт использует приглушенные тона, но может быть основную кнопку сделать чуть ярче?

Хорошее предложение - подумаем над этим!

ОПИСАНИЕ-ХАРАКТЕРИСТИКИ_ОТЗЫВЫ - этот блок (заголовки) не растягивать на 100% а сделать уже, так будет более понятно что это закладки.

На сколько уже? 80% от доступной ширины или сколько?
Сейчас сложно понять, что это закладки?

И чисто мое субъективное мнение - очень частое использование градиентов в серых тонах - все сливается.

Согласен. Контраста не хватает.

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

Есть товары у которых 80 и более фото - в этом случае вам все равно придется пролистывать сайт и кнопка уйдет с экрана.

Стоило бы прописать этим кнопкам, включая "описание, характеристики, отзывы" font-weight: bold; . Сделать жирным

Будет слаться с заголовками таблицы в характеристиках. Там и так уже bold. Мне кажется не стоит так делать.

На основе ваших рекомендация собрал новый прототип. Посмотрите. Что скажете?

 

[shuran]

Очень радикальное решение, не пугает что под это придется весь дизайн переделать? В целом пока конечно смотрится сыровато, но если по сути:

1. расцветка и кнопка - стало лучше
2. кнопка все цвета - стало лучше (может стоит попробовать сделать ей бледненький голубенький фон, или серенький)
3. закладки - гораздо лучше, понятнее однозначно

Не нравится комбинация справа от картинки (выбор параметров + купить + цены) - надо думать над этим блоком. Кстати Arcvi вполне приемлемый вариант предлагал. Я когда не знаю как сделать, лезу в интернет-магазины раскрученные, при чем предпочитаю отечественные, и смотрю как народ там делает, они как правило достаточно много могут себе позволить все интерфейсы тестировать и вылизывать - можно много чего подцепить интересного!

Вот несколько стоящих
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся - этот вариант считаю ооооочень хорошим, поменять местами характеристики и блок заказа и просто конфетка!

 

[cesah]

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

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

 

[sonicm]

Очень радикальное решение, не пугает что под это придется весь дизайн переделать?

Ну это же не дизайн я прикрепил, а прототип из omni graffle, т.е. дизайн менять конечно не будем - только расположение блоков. Возможно будут введены новые блоки (типа ПОДАРКИ и тп).

Не нравится комбинация справа от картинки (выбор параметров + купить + цены) - надо думать над этим блоком.

полностью с вами согласен. Этот блок (справа) нужно еще дорабатывать.

shuran, отдельное спасибо вам за ссылки на магазины.

Для просмотра ссылки Войди или Зарегистрируйся - этот вариант считаю ооооочень хорошим, поменять местами характеристики и блок заказа и просто конфетка!

Весьма неплохой вариант, все кучно и влазит в 1 экран. У нас слишком много характеристик - так сгрупировать не выйде.

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

cesah, если в обратили внимание на новый прототип станицы, то из него видно, что этот момент уже учтен.
Кстати, я думал над этим вопросом. Дело в том что не все магазины ставят цену и кнопку рядом. К примеру amazon так не делает... Для просмотра ссылки Войди или Зарегистрируйся Но пока что я склоняюсь к варианту, поставить их рядом.

 

[sonicm]

Коллеги! Родил новую версию прототипа страницы. Какие будут комментарии?