Roling 21 мар 2016 в 13:39

Дизайн кейс: Coral Order e-commerce сайт

4 мин

22K

Веб-дизайн*Интерфейсы*Usability*

Recovery Mode

Комментарии 39

dom1n1k 21 мар 2016 в 15:59

Вы же понимаете, что все эти экстралайт-шрифты смотрятся ужасно на экранах обычного разрешения (не ретине)?

-2

Roling 21 мар 2016 в 16:03

Мы тестили на ретине и на обычных мониторах (DELL), читается нормально вроде

BaxTepXuTep 21 мар 2016 в 16:49

В картинке над товарами есть какой-нибудь практический смысл? Или просто «для красоты»?

Roling 21 мар 2016 в 18:39

Хороший вопрос :) Если вы имеете ввиду баннеры, то да. Это баннеры которые означают наличие акций у заказчика. Это было обязательным требованием со стороны заказчика.

damat 21 мар 2016 в 18:29

господа, я ни в коем разе не придираюсь, но:
— ссылки на dribble найти не удалось
— подчеркнутые подписи под картинками, которые не ссылки — это жесть
— https://dl.dropboxusercontent.com/s/0bzq9va9jelamc8/shot_160321_162202.png
— https://dl.dropboxusercontent.com/s/ohks0j4ryh906up/shot_160321_162405.png

-1

Roling 21 мар 2016 в 18:45

Дмитрий, спасибо за ваш комментарий. Тут проблема в том что я не нашел функционала который делает подписи под картинками, как например это функция реализованна на Medium. Если у вас есть идеи как правильно подписать картинки, буду рад их выслушать :)

damat 21 мар 2016 в 20:02

А что мешает просто… добавить в подпись ссылку?.. =)

Roling 21 мар 2016 в 20:14

Не на все фотки ссылки есть :)

damat 21 мар 2016 в 22:52

Вы видели ссылки в моем комментарии? Сделаны с помощью CloudShot, который мы сами делаем: cloudshot.com
Я уж не говорю, что можно и просто выложить в облако или себе на сайт

Roling 22 мар 2016 в 00:43

У таких скриншотов есть свойство удалятся когда происходят переделки на сайте

damat 22 мар 2016 в 10:45

открою вам страшный секрет: вот у нас есть сайт про валюту navaril.ru и его брат-близнец prodolbal.ru
все фоны на них залиты на imgur и уже более года никуда не деваются и отлично работают
а ссылки, которые я давал вам выше — это постонные ссылки в dropbox-е. Уже несколько нет они не протухают

-1

timmaxim 21 мар 2016 в 20:25

Как по мне, так старый чисто внешне — приятнее. В новом тёмные элементы какие-то депрессивные…

Nekto_Habr 22 мар 2016 в 12:15

Заметный недостаток материального дизайна — внешне он какой-то «недушевный». Но пользоваться им очень удобно, как дизайнерам/разработчикам (в гайде всё разжевано и логично), так и пользователям (интерфейс получается очень простой, а для большинства — просто уже привычен), ИМХО.

ArtBelecky 22 мар 2016 в 12:04

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

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

Объясните, пожалуйста, зачем вы сделали этот пост? В нем нет ни ссылки на работающий продукт, ни одной фотки интерфейса в 100% отображении. По факту — я не получил удовольствия от разглядывания вашей работы. А так как полезной инфы, со статистикой и кардинальными решениями нет — картинки это основа этого поста.

Вы бы привели статистику конверсии старого и нового сайта. Или что-то в этом роде.

Roling 22 мар 2016 в 12:12

Артур, благодарю за ваш комментарий. Как я писал ранее это наш первый кейс по дизайну который мы сделали.

По поводу карточки выслушал бы ваши развернутые комментарии «очень много сомнительных решений» весьма расплывчатое описание.

Пост сделали для того чтобы делать хорошие кейсы и получить конструктивный фидбек :)

ArtBelecky 22 мар 2016 в 12:32

http://prntscr.com/aiepu7
Тут я подумал о том, что лишь эта часть о товаре (выделенная красным квадратом). И если где купить я понял после небольших усилий, то на том, где найти описание товара, пришлось потратить больше сил. Вот эти разделения на блоки одного товара, мне кажутся излишеством. Да, выглядит круто, а есть ли какие-то реальные цифры того, что такой вариант лучше работает? В общем по смыслу вы разбили один товар на три блока которые ни чем не связаны.
http://prntscr.com/aierpt
Комплексного заказа в вашем скриншоте я не увидел. Но, предполагаю что было бы очень удобно и полезно для магазина разместить его справа. То есть вместо цены сделать что-то типа блока "Этот товар лучше всего комбинировать с этими товарами" или что-то в этом роде. Более развернутую мысль выдать не могу и могу очееееень ошибаться в своем высказывании — но это связано лишь с тем, что информации для анализа в вашем превью мизерно мало.
http://prntscr.com/aierwb
Использование пространства в данном месте достаточно сомнительное. Перебор с воздухом (хотя лично я очень любу просторные сайты). Так как это интернет-магазин и по-мимо красоты он все же должен работать и продавать — я не понимаю по какому принципу тут расположены элементы.
http://prntscr.com/aietlh
Что означает эта иконка? Скопировать ссылку на товар в буфер? Или что? Если так — то тогда ей место наряду с кнопка репоста в соц.сети.

P.S. Я прочитал эту статью в надежде найти что-то ценное или интересное. Но я даже толком не могу оценить вашу работу, так как все картинки уменьшены и не полноценны. От чего я, как ваша ЦА, не получил то, чего искал.

Roling 22 мар 2016 в 12:57

Артур, благодарю, за конструктивные коментраии, обязательно учту их в будущих кейсах

4ertovo4ka 22 мар 2016 в 15:49

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

Roling 22 мар 2016 в 17:16

Благодарю :) Ох уж эти ошибки…

gusakovm 22 мар 2016 в 16:56

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

http://www.coralclubsakhalin.ru/

Roling 22 мар 2016 в 17:21

Мда, зато они старались :) Ну мы делали старую и новую версию, претензий со стороны заказчика пока не было :)

MikeKosulin 22 мар 2016 в 17:23

Иконки не стали добавлять в меню, чтобы не захламлять?

Roling 22 мар 2016 в 17:27

Михаил, здравствуйте.

Не могли бы вы уточнить что вы имеете ввиду?

OstaninKI 23 мар 2016 в 15:21

Я так понимаю, что он имел в виду иконки для пунктов меню, что ныне крайне популярно.

Roling 23 мар 2016 в 15:23

У нас там два меню, одно закрытое, другое раскрытое. В обоих есть иконки :)

madegg 22 мар 2016 в 17:53

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

Roling 22 мар 2016 в 17:55

Артем, благодарю :)

evocatus 22 мар 2016 в 18:27

Честно говоря, прочитав этот пост и комментарии мне показалось, что я в каком-то другом мире. Который гораздо ближе к менеджерскому, чем к техническому. И ужасно далёк от нормальных клиентов. Мир, где попугаи продают попугаям попугаи.

Позвольте задать несколько наводящих вопросов и высказать свои соображения.

1) У вашего заказчика "целая армия разработчиков, маркетологов и дизайнеров которые круглосуточно мониторят сайт и знают все его проблемы и недочеты". Тем не менее "сайт не продаёт". Здесь может быть несколько причин:

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

2) Проблема с теми данными, которые вам дали.

метрики вебвизора — неинформативны. Большинство пользователей не возят мышкой по экрану когда анализируют открытый сайт. Они просто смотрят. И если видят что-то не то — закрывают сайт. О том что такое "не то" я напишу подробнее ниже.
данные соц опросов среди клиентов — если клиент после пары секунд закрывает непонравившийся или непонятный сайт, он не станет тратить время на девочку из колл-центра.

фидбек по сайту от постоянных пользователей — им же интересно почему сайт не продаёт больше после того как стал открытым? Значит фидбек от постоянных пользователей просто не имеет к этому никакого отношения.

ссылки на сайты конкурентов — интересно, у них также глухо с продажами?

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

3) Самая важная характеристика сайта — как быстро он загружается (привет JS-фреймворкам, которые не тормозят в лабораторных условиях на макбуках)

4) Очень важно как быстро сайт работает. Если у человека не экране начинается слайд-шоу (а обычно люди открывают минимум 10 вкладок, ещё и приложения в фоне), он устраняет проблему в виде лагающего сайта. Опять привет JS-фреймворкам, суперсложной разметке и кастомным элементам управления.

5) Людям до одного места на все эти ваши градиенты, тени и материал-дизайны, которые оценят только коллеги по цеху — плата за них жуткие тормоза. Вы не представляете как много людей недовольны редизайном сервисов Яндекса. Некоторые уже начали потихоньку мигрировать на другие альтернативы (если они есть).

6) Мобильные платформы. Для мобильных платформ сайт должен быть не адаптивным, а иметь мобильную версию. А это значит работать на медленном браузере на 512 МБ памяти и слабом микроконтроллере. А это значит как можно более простая CSS, никакой бесконечной прокрутки и т.д. и т.д. Когда браузер крэшится из-за превышения потребления памяти — это неприятно и ставит крест на том сайте, который это вызвал.

Roling 22 мар 2016 в 19:02

Благодарю за ваш комментарий

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

javist 22 мар 2016 в 23:25

Мне кажется или ваш сайт сделан на Material Design Lite (http://getmdl.io) от Google?
Если так, то MDL поддерживает только текущую и предыдущую версию браузеров, в итоге в большинстве браузеров этот вреймворк не работае :(