Сайт Идеи Подарков www.idei-podarkov.ru.
Классный сайт. Масса удачных решений и огромный простор для улучшения внешнего вида и юзабилити.
Без дизайнера верстать на бутстрапе - решение правильное. Однако к вопросу адаптивности нужно подходить более внимательно. На главной страничке карусель занимает лишь часть отведённого ей места (ширина экрана 1440), но если сжать окно до тысячи, то каруселька не влезает. Планшетная ширина - и уже на карусельку наползает форма поиска. В версии для смартфонов и каруселька, и форма, вылезают из своих рамок, да и вовсе за пределы страницы. Кстати, обязательно это обилие рамок вокруг элементов? И ещё о карусельках: http://getbootstrap.com/2.3.2/javascript.html#carousel - эта требует минимума действий, только разметку по правилам сделать, и описанных выше ошибок не будет. Да и в условиях подключенного на проекте bootstrap.js это было бы логичнее. Ничего такого easySlider не делает, чего не умеет бутстраповская каруселька.
Ещё об адаптивности: http://storage6.static.itmages.ru/i/13/1105/h_1383610329_7147273_98f18559d0.png
Видим, что на такой ширине плитка смотрится не так красиво, как могла бы. Перегруженность страницы рамками начинает уже бросаться в глаза. Это место могло быть использовано с большей пользой.
Обилие плашек тоже бьёт по глазам. Можно избавиться от перегруженности, убрав например кнопку "подробнее". Вместо неё сделать ссылкой на детальную страницу картинку и название товара. Показывать галерею по нажатию на картинку - не самое удачное решение. Но если даже и показывать, то хотя бы дать посетителю из галереи перейти к понравившемуся товару.
Цену дайте увидеть! Во-первых, опять же не надо её делать на плашке. Она выглядит так каким-то мусором и плохо читается. В самой цифре не нужен ноль после запятой. Он затрудняет понимание. Цен с копейками нет. А если бы и были, в рубле сто копеек, значит и знаков после запятой должно быть в таком случае две. А вот тысячи пробелом отбить нужно. Делается элементарно фильтром |intcomma.
В постраничке не хватает пункта "все". А когда товаров на странице мало и постраничка не нужна, плашку, на которой размещалась постраничка, тоже можно убрать. Хотя её можно убрать безусловно, будет от этого только чище.
Поиск не работает. Это плохо. Вероятно, вам кажется, что он работает, но наберите ключевое слово и нажмите enter. Именно так пользуется формами значительное количество пользователей. Поиск по точному совпадению это тоже не очень хорошо. Например, зная, что есть товар "торт в синих тонах", я не могу найти его по запросу "торты", "торт в тонах", но могу найти по запросу "орт в си". Технически понимаю, почему так, но все ли посетители магазина будут думать об sql-запросах, выбирая подарки в этом магазине?
Кстати, ещё о поиске и об ajax. Вряд ли смысл аякса в том, чтобы делать два запроса к серверу вместо одного. Как сейчас сделано: запрашивается json, и если в нём приходит информация о том, что есть результат поиска, то скриптом редиректится на этот самый результат. На мой взгляд абсурд. Абсурд венчается тем, что при любом раскладе поле поиска очищается, а в адресной строке поисковый запрос обозначен ничего не значащим для пользователя идентификатором, а не словом. Кстати, почему адрес страницы поиска /search1/, а не более традиционный /search/? Это несколько неожиданно. А ещё более неожиданно было увидеть 404 даже по адресу /search1/. Но это лирика. Об аяксе: метод $.getJSON() чуть короче, удобнее и понятнее, чем комбинация .post() и .parseJSON(), но даже это мелочи. Есть отличное решение для работы с формами аяксом: http://malsup.com/jquery/form/ , рекомендую.
А почему поиск и фильтр разнесены? Ведь по сути они выполняют одну и ту же работу. Их даже вообще объединить стоит. И опять форма очищается. Это неудобно. Даже несмотря на то, что там всего четыре галочки и два поля, а когда их придётся в третий раз набирать, чтобы уточнить результат поиска, мысли в адрес магазина будут уже достаточно матерными. Кстати, многократные попытки воспользоваться фильтром будут намного чаще, чем в том случае, когда бы кнопка "искать" была более яркой, чем "сброс". Есть замечательный класс btn-link, который бы отлично подошёл для кнопки "сбросить". И да, кнопки лучше поближе к полям сделать, не отбивая их текстом, который никто не будет читать. Кстати, а почему в списке каталога 12 товаров на странице, а в результатах поиска 50? Особенно странно то, что товары располагаются по 4 в ряд, а 50 на 4 нацело ну никак не делится.
Вот объединить бы фильтр с поиском, разместить их над списком товаров, и не очищать форму, пока пользователь сам не нажмёт "сбросить". А ещё, знаете, пользователь нынче пошёл балованный, привык к тому, что цена в фильтрах выбирается слайдерами-ползунками. Это несложно. http://jqueryui.com/slider/#range - рекомендую. С таким слайдером сразу видны максимальная и минимальная цены в каталоге, за пределы допустимого не выйдешь. Да и некорректных значений не ввести. А то ввожу я в поля цены значения "мало" и "много". И что вижу? Вот то-то и оно. Вряд ли среднестатистический посетитель магазина будет этот 502 ответ ловить http-анализатором, скорее он просто решит: тут ничего не работает.
Ничего не работает. Даже заявленная аяксовая корзина. Почему я такую ересь несу, когда она на самом деле работает? Потому что смотрю в код и на результаты работы разными глазами. В код - глазами программиста. На результаты работы - глазами недалёкой гламурной барышни. И вам рекомендую. Итак, описываю процесс, как его видит недалёкая гламурная барышня: хотим купить что-то, находим товар, нажимаем кнопку "в корзину". Да, кнопка исчезает, меняется на надпись "в корзине". Но дальше что? Вылезает справа сверху уведомление. Круто! Дайте перейти в корзину! Но это уведомление не кликается. Беда. А нет, не беда! Над ним какая-то стрелочка есть. Она вылезает, и на ней какие-то непонятные надписи. А уведомление скрылось, и под ним написано: "корзина (0)". Что? Не добавилось? И кнопки больше нет, не добавить никак. Вот теперь беда-печаль!
Чтобы не складывалось такого впечатления, цифра в корзине должна измениться, уведомление должно быть информативным и позволять перейти в корзину. В идеале всплывашка должна содержать полную информацию о составе корзины с элементами управления, позволяющими удалить или изменить количество. Пересчёт должен быть на месте. "Оформить 0 руб" - простите, а что оформлять? Кстати, перейти в корзину можно только со второго клика, с первого вообще никак. Не лишайте покупателя его страстного желания как можно скорее отдать вам деньги.
Заявленная авторизация через соцсети не работает. По крайней мере авторизация через Google+ выдаёт 502 ошибку.
Ну да ладно. Предположим, что очень-очень-очень хочется что-то у вас купить. Есть возможность без всей этой соцъерунды ввести имя и емайл. Вводим. Поле email позволяет ввести некорректные данные. Отлично, вводим таковые. Мне сообщают время оформления заказа с точностью до секунды и без локализации, но ни номера заказа, ни информации о доставке, ни перехода к оплате... А как, собственно? Что дальше-то? А дальше сайт начисто отказывается мне показывать корзину. Даже если добавить в неё что-нибудь. Только если по прямой ссылке зайти. Ура! Есть корзина и товар. Больше не шалим и вводим корректный адрес. Но реакция сайта такая же, как и на прежний адрес. Почти такая же. Теперь попытка зайти в корзину по прямому адресу приводит к редиректу на странный адрес /catalog/?next=/basket/. Тут я уже теряюсь. Вроде и понимаю, как такого можно добиться. Но зачем? И почему? Какими-то правдами и неправдами всё-таки попадаем в корзину, повторяем оформление заказа, но указываем уже не только корректный, но и реально существующий почтовый адрес. Выжидаем приличное время. Писем нет. Странно. Было бы логично выслать подтверждение заказа. Хотя наверно ничего страшного. В шапке сайта появился мой адрес ссылкой. Это явно личный кабинет. Нажимаем на ссылку... и этой ссылки больше нет, как нет и корзины в шапке. Но почему? Повторяем эксперимент и случайно замечаем адрес "/logout/" в этой ссылке. Вот это да! Есть у меня хобби: заявляться к отцу на работу (в веб-студию) и проверять там работу тестировщиков. Сколько всяких было нетривиальных ошибок, неочевидного поведения! Настолько странного, что тестировщики не находят. Казалось бы, ничем уже не удивить. Но такое мне даже в голову не пришло. Не надо ссылку выхода из аккаунта вешать на приветствие. Кстати, где посмотреть сделанные заказы, так и не стало понятно. В большинстве магазинов по клику на своё имя (или логин или емайл) переходим в личный кабинет.
Пребывая в шоке, идём статьи почитать. А то тут есть статьи, но почему-то в интернет-магазинах их никто не читает. Сеошники говорят, что в последнее время даже яндекс их не читает. Несправедливо! Не надо статьи обижать. Пойду почитаю. И ... понимаю, почему не читают. Подбор цветов ожесточённый. Зато время размещения с точностью до секунды. Внешний вид стоит упростить. Можно например так: http://getbootstrap.com/2.3.2/components.html#media . Но обязательно в процессе стоит подумать, действительно ли люди приходят в магазин за статьями. Кстати, ведь может в них быть информация действительно интересная для посетителей. Но тогда стоит назвать раздел не столь заунывно. Например "Советы по выбору подарка". Это будет уже интереснее.
Контактная информация. На фоне того, что процедура оформления заказа вызывает больше вопросов, чем уверенности, личного кабинета нет, а уведомления на почту не приходят, контактная информация на сайте является ключевой информацией, даже более важной, чем товары в каталоге. Хорошо, что она есть на каждой странице, но плохо, что на специализированной странице контактная информация дана экстремально мелким шрифтом. Хорошо написаны телефоны. Со смартфонов под управлением android, ios, wp8 номера телефонов набираются по клику и передаются в набор номера в корректном виде. А будет ещё лучше, если основной номер телефона разместить в шапке крупным шрифтом, чтобы все и всегда знали, как с вами связаться.
На смартфонах, кстати, на всех трёх надписи в подвале налезли друг на друга.
Вот ещё как-то случайно получилось: http://storage7.static.itmages.ru/i/13/1105/h_1383618432_5352352_73d3e22fa1.png - отзыв на фоне заявления о том, что "отзывов пока нет". В этом отзыве ссылка на имени, которая никуда не ведёт. Там же звёздочки, позволяющие кликнуть их несколько раз и несколько раз оценить товар, в результате чего получается достаточно странное значение оценки. И явное указание на глюк в скрипте отзывов.
И да: я понимаю, что это был только беглый поверхностный взгляд, но, к сожалению, батарейка у ноутбука садится, да и конечная станция уже скоро. Если интересно, можно будет позже разобрать сайт более детально.
