Популярный интернет-магазин ROZETKA специализируется на продаже электроники и компьютерных комплектующих населению Украины. Проводился быстрый тест сайта магазина. Отчёт следует ниже.
Блоки на главной
Рассмотрим общее расположение блоков на главной странице.
Изображение недоступно
Что сразу бросается в глаза?
1. Не понятно, зачем практически одинаковые по смыслу блоки (выделены синим цветом) «Новинки», «Лучшее», «Акции» и «Последнее» понадобилось разводить по разным частям страницы? Все они имеют одинаковое функциональное значение — заинтересовать посетителей лучшим, что может предложить магазин и дать ссылки на эти товары. Одних, не самых богатых, клиентов интригуют выгодными предложениями, большинство посетителей — самыми популярными на сегодня товарами, постоянных клиентов магазина и искушенных покупателей — последними новинками.
В такой форме, как сейчас, кажется, что это совершенно разные блоки. Они оформлены по-разному, имеют разный стиль заголовков, по-разному дают ссылку на товар. Это бы имело смысл, если блоки функционировали по-разному. Но ведь это не так: все блоки просто дают набор ссылок на товары, выбранные по одному из признаков.
Кроме того, центральные блоки излишне растянуты по всем направлениям. Чтобы посмотреть блок бестселлеров, посетителю нужно прокрутить страницу вниз! Между тем, бестселлеры — это самый важный блок! Так как по определению показывает самые лучшие предложения магазина.
Если перенести все подобные блоки в центральную часть (предварительно приведя их к одному виду и немного сжав нынешние центральные), это не только упростит ориентацию пользователей на сайте, но и позволит гораздо проще создавать заметные тематические категории. Например, почему бы самой верхней категорией сейчас не поставить «Лучшие подарки к Новому году»? Это то, что нужно людям в ближайшее время.
2. «Поиск» — это один из важнейших элементов на таких больших сайтах. Неужели пользователю, для того, чтобы узнать, есть ли у вас конкретная модель монитора, придётся выискивать эту модель среди сотен других? Нужно сильнее акцентировать внимание на форме поиска. Самое просто решение — перенести её вверх. Чтобы на страницах, подобных этой, пользователю не приходилось эту форму долго искать.
3. Внизу левой колонки расположен блок-ассорти (счётчики, ссылки, почему-то кнопка добавления RSS в Google Reader). Не нужно объединять настолько разные вещи вместе и размещать их в заметном месте страницы. Это смотрится непрофессионально, а интернет-магазин должен всеми средствами казаться серьёзным местом. Иначе ему не будут доверять.
4. Блок «Подписка» совершенно не понятен. Подписка на что? Если на новости вообще, то почему не под соответствующим блоком? Если на новости магазина, то нужно так и написать. Но и тогда расположение блока нелогично.
5. Рекламный блок сторонних вещей в интернет-магазине — это очень вредно. Дело в том, что интернет-магазины, в идеале — конечные точки Сети. Сюда приходят с чётко сформулированным желанием: посмотреть, что есть, и если понравиться — купить. Любые внешние ссылки с магазинов вредят уровню продаж, так как заставляют пользователей рассматривать магазин не как конечную точку, а как очередную, проходную.
6. Блоки новостей и статей заброшены в самый дальний угол. Где воспринимаются они как что-то, размещённое по необходимости или небрежности. По важности, как блок-ассорти слева.
7. Блок корзина не должен располагаться в САМОМ краю страницы. Дело в том, что это — привычное место для элемента закрытия окна и поэтому некоторой частью пользователей САМЫЙ угол привычно игнорируется. Исправить это очень просто — достаточно немного отодвинуть корзину от края.
Как могло бы выглядеть усовершенствованное расположение блоков на главной?
Изображение недоступно
Сравните с оригинальной раскладкой: всё стало концентрированней, логичней и менее фрагментировано.
Отдельные блоки
1. Блок навигации.
Проблемы: слишком маленький шрифт, как для меню, плохое визуальное выделение активного раздела, активного пункта, активного товара. Шрифт нужно увеличить, а активные места выделять не шрифтом, а фоном. Также, для удобства пользователей, при таком большом количестве вариантов выбора следует использовать подсвечивание элемента, на котором сейчас находится курсор мыши.
2. Подписка.
При подписке через этот блок не происходит ничего. Просто перенаправляет на главную. Понять пользователю, что произошло — невозможно.
3. Корзина.
«нал. 5.09 б/н 5.30» — это информация для бухгалтеров, а не обычных пользователей! Им её можно дать и в другом месте. А пиктограммы под способами оплаты настолько маленькие и не к месту размещённые, что пользоваться ими просто невозможно.
4. Лучшие товары.
Наглядный пример, как «заблудить» пользователя в трёх соснах. На огромном пространстве элементы расположены хаотично. Нижний синий текст — это ссылка. Верхний синий — нет. Это невозможно узнать, не проверив. Взгляд так и бегает. Атрибуты тега title не прописаны. Неужели найдётся пользователь, который вот так, прямо сходу, кликнет «Купить», не посмотрев большую фотографию, не прочитав спецификацию, не сравнив с другими моделями? Таких пользователей будет очень мало, а остальным ссылка «Купить» в этом блоке не нужна. Верхняя надпись, если она всё равно не кликабельна, тоже лишняя. Нижняя имеет слишком мелкий текст, как для названия.
Как можно сделать лучше. Да очень просто!
Изображение недоступно
Если нельзя дописать тип товара в его название, можно сделать так.
Изображение недоступно
Только тогда название категории обязано быть кликабельным.
5. Акции.
Зелёный текст не воспринимается как горячий, активный, чем-то особенный. Т. е. пользователю может быть непонятно, в чём, собственно, заключается акция? Нужно либо показать старую цену зачёркнутой, либо, хотя бы, выделить цену красным цветом.
6. Блоки новостей и статей.
Почему заголовки блоков не кликабельны + вообще нет ссылок на все новости/статьи в блоках? Ещё раз подтверждаем пользователю, что эта информация дана для галочки.
Отдельные моменты
1. 404 страницы нет. В случае, если пользователь ошибся адресом, его просто перенаправляют на главную страницу. Например, если кто-то даст ссылку на товар в своём блоге и случайно в ней ошибётся в одном символе, никто не поймёт, что произошло. Подумают, что товар просто убрали.
2. Кнопка онлайн-помощи вверху ведёт на страницу контактов, где нет даже банального номера ICQ. В чём же выражается онлайновость? Пользователи будут разочарованы.
3. Что произойдёт при клике на изображение товара на странице товара? Там нигде не написано, что оно будет увеличено, а пользователь до этого кликнул на изображение, чтобы собственно попасть сюда. Возможность увеличения далеко не прозрачна, нужно дописать и дать понятную пиктограмму («Увеличительное стекло»).
4. Заголовки в Title страниц написаны не для пользователей, а для поисковых систем: надписи в них дублируются. Это хорошо для сайта Васи Пупкина, но для серьёзного интернет-магазина… В закладки их в таком виде и добавлять прикажете?
5. Тексты ужасно отформатированы. Во-первых, междустрочное расстояние слишком мало для комфортного чтения. Во-вторых, наблюдается поразительное безразличие в отношении типографики: отсутствуют пробелы после абзацев, присутствуют точки в заголовках, сами заголовки сложно отличить по размеру от текста, а по стилю — от ссылок. Понятно, что о длинных тире никто не знает, а со списками редакторы знакомы очень плохо. На странице обзоров вообще всё криво: почему в одних случаях текст наклонён, а в других нет — не представляет возможности разобраться. Заголовки не держат линию, главный заголовок набран всеми заглавными буквами… Сюда пользователей лучше не пускать, это похоже делается для галочки. Но таково положение вещей везде. Особенно удручает небрежность в отношении заглавных букв: то заголовок начнётся с маленькой («подписка на новости», «корзина»), то его наберут всеми заглавными («БЕСТСЕЛЛЕРЫ ИНТЕРНЕТ-МАГАЗИНА», прочитать бегло очень сложно).
6. Определение текущего местонахождения затруднено. Например, страница «О нас» — это подраздел страницы о компании. На самой странице это не выделено никак. Также, возьмём для примера «Архив» — мало того, что само назначение раздела не понятно (архив чего?), но ещё и активность этого пункта в верхнем меню не отображена никак.
7. Шрифты в IE 6.0 не масштабируются, люди с неидеальным зрением воспользоваться вашим сайтом не смогут. Более того, в IE 6.0 невозможно просто выделить текст!
8. Логотип слева имеет непонятный серый угол. Как можно допускать такую небрежность? Вкупе со снежинками смотрится это просто дёшево.
9. Сайт по адресу http://www.rozetka.ua/ имеет ссылку на логотипе на адрес http://www.rozetka.com.ua/. Нужно стандартизировать этот момент, чтобы не путать пользователей.
10. Что именно вы рекомендуете здесь?
Изображение недоступно
11. Вы уверены, что здесь есть хоть какой-то смысл в кнопке очистки?
Изображение недоступно
Кроме того, в этой форме не помешало бы поле «E-mail», по которому пользователю можно выслать на электронную почту сообщение о появлении ответа на его вопрос. Нет будет же он каждый день заходить сюда проверять, не появился ли ответ?
12. Ссылки — одна сплошная проблема. Ссылок, неотличимых от текста, не должно быть в принципе: это просто неуважение к пользователю, заставлять его проверять — что ссылка, а что нет.
13. При клике на кнопку корзины по умолчанию ничего не происходит. Это воспринимается просто как глюк и это ещё вопрос, не уйдёт ли пользователь с такого глючного сайта сразу.
14. На странице контактов не помешала бы ссылка на карту в Google Maps, если уж основная иллюстрация взята именно оттуда.
15. Почему все URL-адреса содержат элемент ru? А как тогда выбрать другой язык?
16. © Copyright Rozetka.com.ua 2001-2005. А что случилось в 2005 году? Может вы уже закрылись, а сайт так — по инерции живёт?
17. В смысле Киев?
Изображение недоступно
Не зайдёшь туда — не поймёшь, что это. Таких странных ссылок быть не должно.
Покупка
1. Реализация всего процесса покупки в отдельном окне — это ужасно. Такие важные операции не должны происходить в дополнительном окне, только в основном. Почему?
- При малейшей проблеме реакция пользователя очевидна — закрыть окно и больше его не открывать.
- Если понадобится прочитать дополнительную информацию, будет проблема с открытием новых ссылок.
- Читать большое количество информации в маленьком окне неудобно.
- Пользователи доверяют происходящему в стороннем окне меньше, чем в основном.
2. Часто нельзя вернуться на шаг назад — приходится начинать всё сначала. Например, вдруг пользователь решил всё же изменить список покупок — что ему делать в этом окне?
Изображение недоступно
3. Собственно, видео покупки, которая закончилась плачевно по не понятным причинам.
Видео недоступно
4. Все данные по профайлу, заказам и корзине открываются в новом окне, что заставляет относиться к ним, как к сторонним по отношению к системе.
5. Иногда система ставит в тупик.
Изображение недоступно
Какое поле отмечено светло-оранжевым?
Рекомендации
- Больше внимания к мелочам. Когда этих «мелочей» так много и все они настолько плохо сделаны, от сайта в целом может остаться впечатление жуткого непрофессионализма.
- Удалите все лишние кнопки, разделы и надписи — у вас очень много лишнего и непонятного. Более того, никогда не размещайте блоки на странице просто «чтобы были» — каждый элемент страницы должен быть продуман.
- Глюк в IE 6.0, когда элементарно невозможно выделить текст, нужно исправить как можно скорее.
- Меньше всплывающих окон, если хотите, чтобы пользователи были уверены в своих действиях.
- Добавьте возможность комментирования и оценивания товаров.
Результат
Спасибо за проделанную работу :).
Руководитель проекта, Владислав Чечёткин.
Автор: Роман Настенко.
Комментарии:
Владислав
Роман спасибо за проделанную работу :).
Ну буду по порядку обсуждать все пункты. Хочу разделить кртику на 3 части.
Первая часть - это проблемы вёрстки и откровенные пропуски по типу “провыткал”.
Сайту почти 3 года и за это время он много раз переделывался при этом лезут глюки.
Сюда относится: не возможность выделить текст, не правильное расположение кнопок счётчиков, форматирование текста, кнопка “Очистить” и т.п.
Тут нечего комментировать - нужно чистить.
Вторая часть - покупка онлайн.
Да это давняя проблема :(. Будем переделывать без всплывающих окон. Но никак не додавлю разработчиков. Надеюсь сделают в январе.
Хочу в этом вопрос попросить помощи у читателей. Пожалуйста приведите примеры удачных на Ваш взгляд магазинов с удобной формой онлайн заказа.
Третья часть - расположение блоков на странице. Меню сайта.
Здесь я не согласен с твоим мнением по поводу расположения блоков новостей - статей. Всётаки это в магазине вторично по этому расположено не в самом “жирном” месте. Твой вариант расположения с рзнесением статей и новостей в разные места - мне кажется не правильным.
Блоки на главной странице - новинки, бестселееры и акция это принципиально разные вещи. Как тут правильно расставить акценты?
Так же я вижу у себя много проблем на странице товара: ***
Здесь вопрос как заметно для пользователя выводить сопутсвующие товары? Хочу добавить рейтинги и обсуждение товаров. Не понятно куда это засунуть.
И на странице категории: ***
Основную проблему я вижу здесь в юзабельности “Подбор по параметрам”. Нужно сделать заметным для пользователя но куда этот блок деть…
enej
1.Категории и список продуктов по производителю нельзя свернуть. Неудобно, потому как открыв категорию Ноутбуки>Acer получаем километровый список, который необходимо прокрутить чтобы попасть к следующему производителю или категории.
2.Возле товаров в меню не понятные точки, которые при детальном изучение оказалось указывают на наличие товара. Добавить подпись к картинке “есть на складе” значительно упростит вопрос понимания.
3.Хлебный крошки вообще не рабочие, мало того что они не верно отображают информацию, скрывая производителя товара, так еще и запутывает, особенно пункт меню “продукты” который если мы находимся в разделе “Компьютерные комплектующие” видет на пустую страницу.
3.Просмотрел несколько товаров, но так и не понял почему так много пустого места возле картинке товара(при просмотре одного товара). Можна в это пространство опустить пункты купить и сравнить(иконки которых надо заменить на более выразительнее и по-больше).
4.Рейтинг сразу под изображением товара при любом отображение.
5.Обсуждение пункт в меню товара между “изображения” и “кредит”.
6.Авторизацию можна реализовать модальным окном или как оно там называется, такое как у i.ua, а баннер убрать или опустить ниже, это даст необходимое место для “подбора по параметром” которое стоит переделать, сделав варианты списком(дропдаун).
7. Подвал надо утихомирить, а то скачет вечно.
enej
Забыл про главное меню …
Раздел “Компьютерные комплектующие”
-пункт каталог приводит на пустую страницу
-пункт архив ведет на пустую страницу
-подпункт mnm в пункте архив)))))))))
В разделе “Электроника” пункт архив также ведет на пустую страницу, возникает логичный вопрос, а нади ли пункт “Архив” который не куда не ведет?
likeaboy
Роман, прошу меня простить, но мне было лень читать ваши замечания/рекомендации к проекту, поэтому возможны повторения.
Верстку и другие тех. моменты я во внимание не беру, потому что это отдельный разговор. Все мысли излагаю в случайном порядке, без структурирования. И ещё, пробежался только по главной.
1. Вся структура очень банальная и до жути неудобная.
2. Левая колонка неоправданно широкая, я бы ее урезал как минимум на треть. Размер кегль без комментария.
3. Блок «Вход для клиентов» я бы скрыл, сделал его, к примеру, как на Яндексе — раскрывающимся. Ото он занимает неоправданно много места.
4. Меню в шапке («Каталог», «Архив» и т. д.) я бы попробовал перенести куда-нибудь в правую колонку, к примеру, на место нынешнего блока «Вход для клиентов». Кстати, над названиями разделов не мешало бы немного подумать, потому что мне лично, слово «Архив» ни о чем не говорит, тем более когда рядом есть ссылка «Каталог». Какой архив мне предлагают посмотреть? Про выпадающее меню из пункта «О магазине» лучше вообще промолчать.
5. Корзина — убогая. Неужели нельзя вывести хотя бы информацию о количестве товаров в корзине?
6. Караул, который творится под ссылкой «Корзина», нужно вообще разогнать. Я конечно понимаю, что ассоциативно, пиктограммы платежных систем тянуться к корзине, но не так же. Тем более корзина — не всегда ассоциируется с понятием «Заплатить».
7. Центральная колонка не под стать просторная. 4 товара на экран (если взять 1024?768) это конечно роскошь.
8. Кстати, а почему ссылки не подчеркнуты? Сегодня так модно?
9. До сих пор не знаю как правильно писать $103 или 103 $. А вообще, мы же русские люди =)), давайте поддержим рубль, тем более лебедевцы ему не плохой символ придумали.
10. Ой, совсем забыл про поиск. Его конечно же переносим на место меню в шапке.
11. И вообще, блоки как-то не пойми как расставлены. «Акции» в полной попе, «Бестселлеры» там же.
12. Подписка на новости почему-то под блоком статей, а не под новостями.
13. FAQ, в шапке, и «Часто задаваемые вопросы», в подвале, как я понял — один и тот же раздел, только почему-то называют его везде по-разному. Странно.
14. Номера телефонов гораздо проще бы читались если бы имели вид: 537-02-22.
15. Про ссылки на самого себя уже надоело говорить. Я думаю, Роман в своём анализе отметил этот момент.
16. © Copyright
17. «Бестселлеры интернет-магазина», «Новинки интернет-магазина» — это для тупых? Как вы думаете, сколько человек не сообразит при виде ссылок «Купить», что он находится на странице интернет-магазина?
18. Блок «Последние добавленные» я вообще не понял.
Все, хватит на сегодня. Надеюсь никого не обидел, все вышесказанное, как это модно сегодня говорить, — имхо.
enej
Как можно улучшить, то чего я еще не называл.
9. Я бы убрал из навигации производителей и соотвественно их товары. При просмотре конкретной категории мы итак имеем возможность фильтровать по производителю. Сделать только фильтр выразительней.
10. Также выразительней должна быть цена на товар, она просто должна бросаться в галаза.
11. Функцию “подбора” надо значительно доработать, выбор должен быть по всем параметрам. Например я сейчас ищу коммуникатор, мне нужно что бы он был на виндоус мобайл, с вайфаем и экранам 3,5?, а мне предалагаеться выбрать только процессор, GPS приёмник, и срок гарантии(((
12. Добавить краткую характеристику на страницу “Описание”, это очень важный пункт, потому как я не однократно заходил в ваш магазин и каждый раз жутко нервничал из за того что я не мого быстро ознакомиться с товаром((((
13. Было бы полезным добавить к каждому товару пиктограмму (большую и яркую) указывающую на возможности присутствующие в данном товаре. Например для комуникаторв, это иконки вайфая, блутуса, ик, вин. моб или палм, едж, юсб …
Это бы дало возможность бысто определить для покупателя что представляет собой данная модель, что повлекло бы за собой благоприятное мнение о компании;)
enej
Никак не мог уснуть))
Вот сделал набросок, того как можна улучшить.
Роман Настенко
enej, надо было сразу междустрочный интервал увеличить, чтобы показать, что нынешний недостаточный :)
VS
1. У сайта существуют проблемы с поиском. В частности, проблема возникает когда хочется найти товар в определенном интервале цены с какими-то определенными параметрами (к примеру не хочет искать ноутбук в интервале 600-800у.е. с 1Гб памяти).
2. В разделе hard.rozetka.com.ua периодически попадаются товары , у которых описание или картинка совпадает с реальностью. А находясь в том же гугле на первом месте, при поиске комплектующих на первом месте естессно “розетка”. Начинаешь смотреть параметры, и выясняется что не всё так просто…
Владислав
Ща буду читать - смотреть комментировать по пунктам!
А пока хочу обратить внимание. Баннер справа должен быть в первом окне. Т.е. убрать я его не могу могу немного подвинуть вверх или вниз.
Ну и смотреть на сайт нужно в разрешении 1024. Сейчас будем делать “оптимизацию” под 1280 то же но пока его растягивает и получается слишком много места гуляет.
Павел
критика критики :)
Ку:…”9. Я бы убрал из навигации производителей и соотвественно их товары. ”
Несогласен, например, при выборе ноутбука, вопрос производителя является очень “религиозным”. Часто покупатели по своим убеждениям специально игнорируют некоторых производителей, даже не рассматривая товар определённого бренда (напр.: куплю только Делл и ни в коем случае не Самсунг).
Ку:…”13. Было бы полезным добавить к каждому товару пиктограмму (большую и яркую)”
Тогда описание товара будет выглядеть как “большой и яркий” набор пиктограмм, в котором разобраться будет гораздо сложнее.
По поводу расположения блоков новостей - статей полностью согласен с Владиславом.
Кнопку поиск, однозначно, нужно выносить вверх страницы.
creativeweb
Комментарии к ***
всерху вниз:
-зачем название НТС слева и справа?
-оценку товара(и текущий рейтинг) лучше под названием, а под фото как раз “лупу”
- если текста справа от картинки будет хотябы в 2 раза больше?
- блок цена-купить-сравнить добжен быть самым заметным, на уровне фото товара. Вообще яркие пятна тут должно быть три: название-фото-цена\купить, а вы “засерили” это неоправданно. Цена очень маленькая.
-описание поделили на блоки с картинками - хорошо. +
- толстая зеленая рамка зачем? вполне 1 пиксель хватит. да и сама рамка ненужна - достаточно зеленой поломы под меню - любому понятно, что ниже - относиться к выделенному зеленому пункту.
- внизу набор пиктограмок. пиктограмки как идея - ОК. место нахожденияи размеры пиктограмок НЕОК. почему такие большие и в самом низу?
- аксесуары к модели лучше бы вооще не рисовали, чем так: цена на зеленой бирке не в тему сайта, она привлекает к себе больше внимания, чем само фто аксессуара. Для мобилки есть разные типа ыксессуаров и тут надо продумать мудрый вывод: пару флешек к модели(+ возможность посмотреть все флешки), пару блютузов к модели (+ возможность посмотреть все), пару фрахэндов….зарядок и т.д.
—-
Единственное полезное так это разбивка на блоки с картинкой в “описании”, да и то вы ошиблись - это раздел “характеристики”.
enej
Роман, я хотел показать в первую очередь идею.
Владислав, тогда нужно убрть форму авторизации, поднять баннер вверх, сразу после баннера вставить блок “подбора по параметрам”. Блок надо сделать заметным потому как его будет видно только кусочек, для это можна изменить фон, а также заголовок блока должен быть хорошо различаемый и побуждающий к действию. Но это если этот блок будет доработан и переработан, в том виде что он сейчас его лучше не трогать, пусть там внизу валяется.
Павел, там дальше был важный аргумент “При просмотре конкретной категории мы итак имеем возможность фильтровать по производителю. Сделать только фильтр выразительней.” Кроме того блок подбора по параметрам, если он будет нормально сделан пользы от него будет намного больше. А так получаем дублирование функций, при этом в навигации эта функция самая бесполезная. Как я уже говорил “Неудобно, потому как открыв категорию Ноутбуки>Acer получаем километровый список, который необходимо прокрутить чтобы попасть к следующему производителю или категории.” Кроме того убив производителей и товары в навигации, а также подняв поиск, получим место для еще одного блока до сгиба.
Что касается иконок я же специально для этого сделала набросокв котором явно видно что разобраться в характеристиках стало намного проще. Вообще врать не буду, идея не моя, когда то так было на сайте киевстара, а сейчас на сайте евросети. Считал и считаю что иконки упрощают ознакомление с товаром.
Andrew
Кратко:
корзина:
- не работает покупка за WebMoney (RoboxChange пишет, что магазин login неактивен)
- нельзя вернуться назад (уже писали)
- если я логинюсь и, к примеру, хочу поменять номер квартиры в адресе, то надо вводить все данные заново
Каталог
- сортировка по-умолчанию не сильно удобная. Наверное стоит сортировать по цене и выводить несколько лучших предложений в топ. Ниразу за все время не воспользовался дефолтной сортировкой
- Нужно ли столько вкладок на странице товара? Описание обычно короткое и тех. характеристики легко поместятся под ним. Картинки будут нормально смотреться справа от большой фотки товара, ну а кредит - да, лучше в отдельную вкладку - это сравнительно мало людей смотрит. Ну это конечно если по каким-то причинам не надо по возможности увеличивать количество просмотров на сайте.
Это те моменты которые реально мешают пользоваться сайтом.
enej
creativeweb, это набросок и его складовые я практически не перерисовывал, а просто поменял местами. Поэтому прошу смотреть на картину в целом, а не на детали. Что касается добавленных мною элементов, то логотип потому как я все люблю воспринимать визуально, кроме того не все товары имеют в название производителя, а так быстро и понятно кто автор!
-Ценник в аксессуарах, рисовал быстро и грубо, и один раз. Потому как хотел просто показать идею, а не рисовать все за дизайнера;)
-Согласен что надо поставить рейтинг над картинкой, а под ней лупу.
- Если текст от картинки будет в два раза больше его надо будет сделать в два раза меньше.
- согласен что блок цена-купить должен быть самый-самый, сам даже про это писал. Сдесь же просто переместил элементы в более удобное место. Сами кнопки и ценник менять однозначно!
- Рамка нужна и должна быть тонкая. Потому как сейчас линия под меню идет некуда и неоткуда.
Большие потому как веб 2.0 и все такое (удобнее так), внизу потому как довольно яркие и поместив их до сгиба они будут бороться за внимание пользователя с другими элементами, а проще говоря отвлекать.
- я показал где вывести аксессуары
Это раздел краткие характеристик которыми я предлагаю заменить раздел описание.
snow_wons
1. В списке товаров отсутствующие и присутствующие идут вперемежку. Это весьма неудобно. Нужно чтобы товары которые можно сразу купить были вверху, а те которые заказывать - под ними.
2. Появляетмя горизонтальная прокрутка в SeaMonkey.
3. Рекламу хорошо бы убрать. Всё таки вы продаёте свой товар, а рекламируются у вас другие магазины. К томуже складывается впечатление что сайт не особо приносит доход, раз владелец на контекстной/баннерной рекламе зарабатывает. К тому же клик по рекламе (ну пусть он будет стоить 1$) = 1 потенциальный клиент. Который принесёт намного больше купив что-то в магазине.
4. Правая колонка слишком широкая. Это хорошо заметно возле баннера.
5. В блоке “Последние добавленные” хорошо бы сделать категории ссылками.
6. Иконки под корзиной не имеют title. Не понятно что они обозначают
7. Цена : $ - (0.00грн.) Нет в наличии. На ***. Лучше заменить такую цену чем нибудь типа “Новинка” или “Ожидается поступление”
8. Очень широкая левая колонка
9. Реклама гугля прямо рядом с картинкой товара!? Это просто ужасно. Это допустимо для каталога который зарабатывает на партнёрках и реклама, но не для магазина. У магазина вообще не должно быть рекламы на посторонние продукты. И, кстати, это запрещено правилами Гугла
10. В описании товара хорошо бы пользоваться списками, а не ставить “-”
11.Сравнить товары получилось не с первого раза.
Ну вот и всё.
creativeweb
Подведем промежуточный итог.
Пока полезное, на мой взгляд:
1) Поиск вверх, и я бы сделал заметнее с возвожностью искать отдельно по товарам или новостям\статьям
2) Подписку я бы тоже разбил на 3 опции: подписка на новые товары, на новости, на статьи и индивидумальная подписка на “уведомить о наличии” или “изменении цены”
3) под изображением лупу
4) добавить рейтинги и комменты
5) корзинку и логонку совместить и писать сколько товаров в корзинке и на какую суму. Нажимая на иконку возле товаров”столько-то” - аяксом выпадать краткий перечень товаров с возможностью удалить(крестик). Аякс хорош, для того, чтобы посмотреть список и удалить лишнее не переходя при это на страницу корзины с товарами.
6) првью товара - согласен с “«заблудить» пользователя в трех соснах” продумать и переформатировать вывод.
7) ссылки подчеркивать или выделить для них отдельный цвет.
8) копирайты полюбому уже 2008 можно смело писать. Для устрашения конкурентов я бы написал 2100.
9) 404 страницы нет - Артемий нервно подергивает веком. надо поддержать ег и сделать 404.
10) Онлайн помощь подразумевает таки чат с клиентом, а не асю. или поставить чат или поменять название.
11) процесс покупки в корзине и правда мутный. надо упростить и прояснить.
12) 17. В смысле Киев? - да лучще написать “доставка” или “ваш регион” - а там уже выбор
13) Глюк в IE 6.0, когда элементарно невозможно выделить текст нужно исправить как можно скорее. - надо исправить
14) Возле товаров в меню не понятные точки - тоже не понял - хотябы галочку туда.
15) Хлебный крошки вообще не рабочие, мало того что они не верно отображают информацию - есть такое, надо исправлять.
16) с подбором по параметрам надо что-то делать.
17) Было бы полезным добавить к каждому товару небольшую но понятную пиктограмму указывающую на возможности присутствующие в данном товаре.
18) междустрочный интервал - возможно 50\50. (тем не менее в “полезные добавил”)
19) Нужно ли столько вкладок на странице товара? Описание обычно короткое и тех. характеристики легко поместятся под ним. Картинки будут нормально смотреться справа от большой фотки товара, ну а кредит - да, лучше в отдельную вкладку - это сравнительно мало людей смотрит. Ну это конечно если по каким-то причинам не надо по возможности увеличивать количество просмотров на сайте. - и впрямь стоит задуматься об усеньшении закладок.
20) 1. В списке товаров отсутствующие и присутствующие идут вперемежку. Это весьма неудобно. Нужно чтобы товары которые можно сразу купить были вверху, а те которые заказывать - под ними. - однозначно товары без цены в конец списка.
21) 7. Цена : $ - (0.00грн.) Нет в наличии. - цена 0 конечно не годиться.
creativeweb
Развеем пару мифов заодно(т.к. пишут разные люди одно и тоже):
1) Миф о то, что ненужно ставить чужую рекламу на интернет мазагине продающем разные бренды.
Этот миф правильный только для магазинов, продающих свой бренд и не допускающий баннеры конкурентов у себя на сайте.
В данном случае это магазин продающий разные бренды и разные типы товаров.
Если юзер зашел с целью выбрать ноутбук, то поверьте он не уйдет по баннеру “компании МТС”(даже если уйдет то откроет в новом окне и ноут он таки выьерет). А вот если он не найдет ничего, а нажмет на баннер, то хозяин сайта хоть так поимееет что-то от этого юзера.
Кроме того эти рекламы неплохо оплачиваются.
Так что не пытайтесь отговорить хозяина зарабатывать лишние деньги - неполучиться :)
2) Блок “последние добавленные” - для поисковиков больше.
3) Очень широкая левая колонка.
Кто вам сказал? А может быть еще и узковатая? ***
Владислав
2:snow_wons
Магазин украинский. Реклама Гугля - украинцам не показывается. Знаю что выглядит плохо - но договориться с кем то из русских магазинов пока не удалось.
Подскажи пожалуйста что ты имеешь в виду пункт 10. В описании товара хорошо бы пользоваться списками, а не ставить “-”
Слава
Хочу в этом вопрос попросить помощи у читателей. Пожалуйста приведите примеры удачных на Ваш взгляд магазинов с удобной формой онлайн заказа.
Мне понравилось оформление заказа в новой версии интернет-магазина Киевстар
Что касается рекламы гугла - она показывается для некоторых укртелекомовских IP, скорее всего разработчики взяли только UA-IX сети.
В любом случае сделать по-настоящему удобный магазин часто не так просто из-за технологических ограничений движка. Кто работал с osCommerce или MelbisShop меня поймет.
Natallia Sakharova
Оговорюсь, что предыдущих комментаторов не читала
1) Левая колонка меню: ссылка стоит только на названии категории, а не на всем прямоугольнике пункта меню (подведи и попади).
2) Верхнее меню в шапке не перекликается с нижним в футере: вверху “faq”, а внизу - “часто задаваемые вопросы”, внизу есть такие полезные ссылки как “покупка”, “доставка”!!!, “гарантия и поддержка”!!!, “контакты”!. А! оказывается, что менюшка “о магазине” выпадающая (никогда бы не подумала, т.к. остальные - нет).
3) Не согласна про курсы валют: для меня это полезная информация при принятии решения в какой валюте оплачивать (про нал), при сравнении цен от разных магазинов, но эта информация действительно не к месту расположена, к тому же, не указано что это USD в гривнах, а на сайт мало телепатов ходит.
4) Очень много не понятных пустот: перед рекламой, на странице со списком товаров перед списком.. Если баннеров на странице нет, то почему не исчезает место под них? Остается уродливая пустая дырка. (***)
5) на странице “Ноутбуки” блок с рекламными ссылками-баннерами перекочевал из левой колонки в правую. Зачем-то.
6) url rozetka.com.ua есть не только на логотипе, но и при путешествии по сайту, но уже в строке адреса. волшебное преображение.
Далее пройдемся по спискам товаров.
7) А что происходит с сортировкой товаров? По-моему, они должны быть отсортированы по цене и по наличию, сейчас же все модели, в любой ценовой категории и в любом состоянии наличия вперемешку. Зачем мне сразу показывать того, чего у вас нет???? Покажите то, что есть! Хоть какую-нибудь сортировку из имеющихся применили бы.
Сортировка по цене приводит к тому, что первые - самые дорогие. Какой кошмар. Пока до дешевых доберешься (перелистывая по 4 страницы, пункты которых показываются), то и покупать расхочется. Вверху нет номеров страниц с постраничным вводом.
Изучая сайт нашла особенность: если второй раз кликнуть “отсортировать по цене”, то первыми в выборке будут дешевые. КАК я могла просто об этом узнать??? Но проблема того, что ноутбуки в наличии и “нет в наличии” всеравно не отсортировать.
Сортировку по диапазону цен лучше было бы перенести вверх над списком.
8) еще по сортировке: отсортировала по производителю, а потом еще по одному параметру. Решив, изменить второй параметр, обнаружила, что надо начинать сортировку с самого начала, потому что “откатить” выбранные параметры не представляется возможным. В таком случае сортировку по параметрам лучше сделать формой с выпадающими списками.
9) Из пункта 7 вынесла то, что пейджинг при постраничном выводе никуда не годится: мало страниц показывается, приходится много листать. Вместо стрелок лучше бы все страницы показали.
10) при выборе конкретной модели с левым меню происходит нечто: оно разрождается длиннющей вереницей моделей. Мое мнение, что это все надо свернуть в аккуратный список на 10 видимых пунктов с вертикальной прокруткой и поместить этот список в правую колонку. Над баннерами.
Natallia Sakharova
пункт 8 заменило на смайлик. Ну не чудо ли? :)
Natallia Sakharova
Слава, посмотри store.artlebedev.ru, oz.by
likeaboy
Вы меня извините, но я просто не могу не оставить без комментария следующие пункты сказанные другими людьми:
enej писал:
10. Также выразительней должна быть цена на товар, она просто должна бросаться в галаза.
Глупости! Выразительней должен быть товар, а не его цена.
Уважаемый enej, ничего личного, но по-моему ваш набросок полное Г.
Кто-то писал:
17. Было бы полезным добавить к каждому товару небольшую но понятную пиктограмму указывающую на возможности присутствующие в данном товаре.
Нафиг это не нужно! В каталоге Евросети ещё куда ни шло, но не здесь. Хотя этот пункт спорный, потому что я не лазил по каталогу и и не смотрел что вообще они продают.
creativeweb писал:
3. Очень широкая левая колонка.
Кто вам сказал? А может быть еще и узковатая?
Я вам сказал! Кстати, спасибо за вот эту ссылку: ***. По-моему полнейший бред так оформлять каталогизатор. Левую колонку на этой странице можно вообще убрать нафиг, юзабилити из-за это не пострадает, а даже наоборот.
Кто-то говорил про рекламу на страницах интернет-магазина. Так вот. Слабые продажи, а я уверен что они очень слабые, потому что магазин жутко неудобный и лично мне не внушает доверия, нужно хоть как-то окупить, поэтому и adsense на каждом шагу.
Natallia Sakharova пишет:
Слава, посмотри store.artlebedev.ru, oz.by.
Хорошие примеры!
Владислав
2:likeaboy
По пводу рекламы - посмотри пожалуйста мой коммент №19.
Продажи скажем так средние…
Хочется больше по этому я и парюсь!
snow_wons
2: Владислав - 19
Я имею ввиду что нужно пользоваться тегами <ol></ol><ul></ul><li></li>
Александр@WP-web
мои заметки-рекомендации:
Общее:
1. При нахождении в категории товара происходит перенос малых банеров из левой колонки в правую — пользователь может не понять ;)
2. при 800х600 длинные названия в меню могут налезать друг на друга (в опере - так точно)
Удобство использования:
3. Сортировка по параметрам: выбор по отдельным критериям может и раздражать - пока человек выберет раз 5 нужные параметры с перезагрузками страницы - может многое случится ;) Возможно стоит вынести такой выбор на отдельную страницу (лучший выбор что я видел в рунете у яндекс-маркета), оставив при этом сортировку по цене и названию и бренду.
4. Форма подписки: возможно стоит поднять повыше, чтобы увеличить количество подписчиков: подписанный пользователь как минимум лояльный пользователь и потенциальный клиент, ну а е-мейл маркетинг вообще отдельная песня.
Общий концепт:
5. Оригинальный зеленый колобок - это красиво, но не создает вам дополнительной узнаваемости. Перед тем как зайти на сайт я ожидал увидеть что-то наподобие этого колобка, но в виде розетки и почему то в красных тонах. Я это не увидел и моя возможная ассоциация с красивым именем rozetka.ua не состоялась. А могла бы еще более закрепить в памяти ваш магазин.
Успехов!
likeaboy
Владислава писал:
Продажи скажем так средние…
Хочется больше по этому я и парюсь!
Это очень похвально! Но мне кажется недостаточно исправить видимые баги и недочеты на сайте. Кстати, зачастую бывает гораздо проще сделать все с нуля, чем переделывать что-то уже имеющееся.
Позволю себе дать небольшой совет, извините если кого-то задену. Обратитесь к хорошему информационному дизайнеру, который умеет работать с контентом и не по наслышке знаком с юзабилити, он все вам сделает. И никакие анализы нафиг будут не нужны.
Обратите внимание на www.oz.by, ребята сделали легкие, но очень полезные и важные изменения!
enej
Я не знаю как хто лазит по магазинам, но я следущим образом.
1. Сначала захожу в категорию нужного мне товара. Я знаю только некторые х-ки товара который мне нужен, конкретную модель я не знаю. По-этому мне не нужен километровый список производителей и их товаров мне нужен в первую очередь подбор по-параметром, а также сортировка.
2. У меня есть список товаров что мне подходят под мои параметры и я отсортировал его по цене, а также отметил опцию показывать только товары присутствующие на складе. Теперь я попытаюсь понять чем эти модели отличаются, так как времени много не бывает я хочу это сделать быстро. В этом мне могли бы помочь пиктограммы функций и сравнение товаров. Цена которую не нужно искать глазами также здорово помогла принять решение.
3. Я перехожу к просмотру конкретной модели. Я ожидаю увидеть, полный тех. характеристики, дополнительные фото, комментарии и большую кнопку купить.
Все эти пункты я более подробно описал в своих предыдущих комментариях, в этом я попытался обосновать свое мнение.
Для тех хто еще не понял набросок это лишь визуализация моей идее (ее части с “иконками функций”), а не шедевр дизайнерской мысли.
likeaboy
Владислав, прошу меня извинить за опечатку в вашем имени, буковка «а» в конце лишняя.
Сейчас обратил внимание на предлагаемую Романом Настенко схему расположения элементов на главной странице (это где полно разноцветных прямоугольников). Мне кажется это далеко не идеальный вариант. Поиск, меню, корзина, авторизация — очень спорное расположение. Центральная колонка лично мне не понятна. Повторюсь, переставить несколько блоков местами, как мне кажется, не есть решение проблемы.
Владислав
2: likeaboy
OZ.by по моему клон Озона. Сайт приятный - но мне кажется что это плагиат.
Сейчас собираю мысли по полной переделке Розетки. Но есть наработки которые всё же хочется оставить. Например левое меню - большинство пользователей торчит от него. Правда всё равно есть вопрос как его переработать и улучшить…
Владислав
2: Александр@WP-web
Спасибо за советы!
п1 - завтра изменим.
п2 - нужно переделывать сайт. Переделывать под 800 точек сейчас не целесообразно с коммерческой точки зрения :(. Есть идеи сделать сайт для мобильных устройств - но это пока переспектива не близкая.
п3 - хочу сделать 2 варианта подбора. По самым основным понятиям и глубже детальный подбор типа Яндекс Гуру.
п4 - спасибо уже понял нужно переделать окно и изменить местоположение.
п5 - в зелёного колобка вложено достаточно много сил уже. Да и в Украине есть свои сильные игроки с красными кругами и красными лого. Т.е. красный колобок на Украине скорее потеряется среди конкурентов.
Владислав
2: Natallia Sakharova
п1 Мне кажется что так удобнее. Если всё меню будет ссылкой - будет путаница а тот ли пункт меню нажал?
п2 Спасибо. Пункты меню делались ещё 3 года назад. После этого я к ним не возвращался. Завтра же буду переделывать!
п3 Подумую как изменить надпись на более информативную.
п4 Уточни пожалуйста. Что ты имееш в виду пустоты перед списком? Дырка вместо баннера скорее всего тебе так “повезло”. Баннер справа есть на всех страницах. Возможно у рекламщиков были какие то сложноти с каналом и баннер не загрузился.
п5 Все обратили внимание. Спасибо завтра же изменю.
п6 Пе понял по поводу урла. Ты по поводу переключения с rozetka.ua на rozetka.com.ua?
п7 Сейчас по умолчанию товары сортируются по популярности. При чём если товара нет в наличии его популярность делится на 2. Видимо нужно делить на 10. Сортировка по цене - дейстивтельно нужно давать какую то подсказку пользователю.
С сортировками у меня дилема. Если даже основные сортировки перенести вверх списка - будет вот такая проблема: *** . Мне кажется что такой вид страницы это не правильно.
п8 Спасибо. Обязательно учту! Если получится у разработчиков переделать малой кровью - сделаем быстро. Если нет то сделаем в комплексе с полной переделкой сортировок.
п9 Тут будет очень много страниц внизу. Видимо нужно стрелки как то переделать на аяксовую менюшку или чтото такое.
п10 Прокуртка списка моделей мне кажется вызовет больше проблем. Да и будет эффект неуловимого меню. То слева то справа… В общем передо мной стоит задача как улучшить навигацию по моделям в левом меню. Пока умных мыслей нет :)
П.С. А мы знакомы? :)
likeaboy
Владиславу:
Да, ОЗОН и oz.by похожи, но все же они разные.
Левую колонку нужно просто немного сделать аккуратнее, не стоит изобретать велосипед. А вообще, есть два варианта того, как ее можно реализовать: ***.
1 вариант — то, как она реализована у вас сейчас. Единственное, не нужно делать ее 4-х уровневой, а ограничиться только 3-мя: Электроника | Ноутбуки | Apple, без продолжения в виде модификаций.
Кстати, производителей можно тоже убрать из левой колонки. А модификации пускать в основной колонке.
2 вариант — этот вариант мы реализуем сейчас для своего магазина. Я его называю горизонтальной лесенкой. Расписывать и раскрывать все его особенности и преимущества я не буду, кому надо, тот сам все увидит.
Кстати, возможность просмотра каталога как таблицей так и списком была бы не лишней.
enej
Не нужно в левом меню не товара, не производителя. Производителей вынести в фильтр. Пример фильтра можна подсмотреть на сайте КПІ сервіс.
Как получить более $800, известность и другие ценные призы? | Web разработка, IT новости, технологии, дизайн, блоггинг, SEO, заработок в интернете, п
[…] самого полезного отзыва. Следует заметить, что текста там накопилось на несколько страниц А4. Шансы призрачны:( А […]
enej
Нет страницу для печати. Не все люди готовы сразу совершить покупку, многим нужно время на принятие решения. Предоставляя покупателям возможность напечатать страницу сравнения товаров или страницу характеристик, вы повышаете вероятность покупки именно в вашем магазине.
Владислав
2: 36
Предлагаю сегодня в 18:00 подвести итоги?
+ Подумаю как изменить условия чтобы участинкам было интересно продолжение!
Роман Настенко
Акция завершена, призы в процессе доставки :)
Natallia Sakharova
Владислав, очень сомневаюсь, что мы знакомы.
По поводу урла: ваш адрес - это ваш брэнд. Народ не будет обмениватся “Купи на Розетке!”. Не все знают, что есть Розетка, но если скажут “Купи на Розетка.УА!”, то тут намного понятнее. Это очень хорошо, что вы перешли на домен первого уровня, но недостаточно, т. к. старый домен не редуцирован до простого редиректа. Надо бы почистить бренд :)
По поводу пустот: я сделаю скриншот и вышлю на меил :) Ведь это вы Владислав Ч…? :)
По поводу сортировки по популярности: а где написано, что товары по популярности отсортированы? А всем ли нужно сразу по популярности? У вас есть опросник? Да - спросите! Нет - спросите! Для меня наиболее комфортно, когда идет сортировка по цене. У вас ведь есть ссылки на дополнительные опции, мое мнение, что “по популярности” - место там :) А отсутствующие товары вообще всегда в хвосте должны быть… Покупатель покупать пришел, а не на мертвые деши смотреть :)
Мне нравится ваш магазин. Поэтому я поучаствовала. Просто хочется, чтобы он стал удобнее. Мне для себя хочется :)
Natallia Sakharova
по поводу пустот апдейт:
у меня на работе нет возможности смотерть рекламу от гугла и она просто не показывается :)
Дома увидела, что там что-то есть :)
Павел
Я, возможно, где-то повторюсь.
По главной странице :
1. при разрешении 1280 есть горизонтальная прокрутка (что же будет при меньшем?), из-за которой я не могу сразу войти в личный кабинет (кнопка “войти” наполовину скрыта), не могу нормально читать весь правый столбец.
2. меню “о магазине” - при наведении на ссылку в выпадающем меню ее фон сливается с фоном страницы - сделайте хотя бы рамку у всего списка.
Список категорий (при выборе “ноутбуки -> ноутбуки”):
1. чудовищно большое расстояние между названием товара и ценой, ценой и кратким описанием;
2. вертикали заголовков описания и самого описания лучше совместить (сейчас вертикаль пиктограммы совпадает с вертикалью описания);
3. убрать кнопку подробнее (заголовок товара уже ссылка на более подробный рассказ);
4. листалку страниц выделить более явно;
5. фильтры по параметрам (сейчас это цена и прочие характеристики) нужно вынести в отдельную форму, а не оставлять ее в самом низу страницы огромным несуразным списком);
Описание товара:
1. совершенно не понятно, что эдСэнс делает там, где по идее должно идти описание;
2. создается впечатление, что эдСенс специально смешен с описанием - посетитель долго будет разбираться, что же ему читать;
3. список аксессуаров к модели смещен вниз и вправо от самой модели - редкий пользователь его заметит и что-нибудь выберет;
Каталог:
1. кажется смесью картинок брендов, только потом понимаешь, что группировка по категориям товаров все же есть, но подписи почему-то права - мы не в Японии;
2. многие проблемы наследуются из предыдущих разделов;
Новости:
1. убрать кнопку “далее” и показать, что заголовок-название - это ссылка;
2. многие проблемы наследуются из предыдущих разделов;
FAQ:
1. логичнее было бы разместить вопрос и ответ в одном месте (сначала вопрос, после него - ответ), сделать поиск по FAQ;
Общие моменты:
1. убрать где есть кнопки “далее” и “продолжить”, сделав заголовки похожими на ссылки;
2. избавится от некачественных изображений на сайте;
3. у тех заголовков, которые отличаются от текста только жирностью (раздел “о нас”), увеличить размер шрифта - на то они и заголовки;
4. ссылки должны быть подчеркнуты всегда и везде;
5. убрать из адресов страниц index.html - это лишние 10 символов в адресной строке;
6. желательно писать все слова (за исключением названий брендов) по русски.
Вывод:
На сайте внесены визуально красивые элементы, которые расположены неграмотно. Наряду с ними явные косяки в оформлении, нет внимания к форматированию и типографии, нет понимания правил оформления сайтов (ссылки и заголовки), авторы не уделили должного внимания текстам, навигации и расположению смысловых блоков, заострив свое внимание на “вебдванольных” визуальных аспектах.
Ammoretro
А зачем на части разбивать? Факт в том, что при заходе на сайт возникают рвотные порывы. Вот и вся критика.