Это второй выпуск новой рубрики. Первый вы можете посмотреть по ссылке.
Напоминаю, что суть ее в том, что я мониторю сайты, нахожу интересные решения и делюсь ими с вами.
Сегодня у нас очередная подборка.
1. Бренды по алфавиту в меню.
Интересное решение в магазине косметики.
Есть такая модель поведения в интернет-магазинах, когда покупатели ищут не просто товары, а товары определенного бренда.
Здесь алфавит выведен в главное меню. При наведении появляется выпадающий список с названиями.
Еще она примечательная штука. Туда же добавили ссылками основные категории. Причем сделано так, что сразу очевидно назначение средств. Которые появятся при переходе.
2. За сайтом важно следить.
Это исключительно в качестве примера. Встретил сразу несколько сайтов, где сделана грубейшая ошибка - недоступны изображения. В примере она возведена в степень, так как из-за нее не видно названий продуктов.
3. Оформление шагов "Как мы работаем".
При клике на соответствующий пункт появляется анимация, показывающая связи между элементами.
Тут, конечно, тоже есть что усилить. Например, я бы добавил стрелки. Иначе не сразу очевидно что именно означает закрашивающая полоска.
4. Стрелка с видео на форму.
Хороший пример оформления призыва к действию.
В заголовке призыв, справа на экране элементы, которые явно указывают, что человек получит видеоинструкцию. И стрелка, которая указывает на кнопку "Смотреть видео".
Получился цельный блок с понятным действием.
5. Нарушение расположения элементов.
В прошлом выпуске показывал уже что-то подобное. Здесь еще одна разновидность ошибки.
Пункты идут слева вверх. Но человек читает слева направо и вниз.
Из-за этого пункты вообще не воспринимаются.
Возможно хотели показать нечто вроде растущего графика, но получилось не очень.
6. Непонятные стрелки.
Еще один пример, где наблюдается проблема с тем, чтобы сделать блок понятным.
Эти стрелки не несут никакой смысловой нагрузки. Почему-то верхняя ведет в обратную сторону. Это нелогично. Человек воспринимает самый первый элемент сверху как главный. И начинает свое движение с него.
При этом сами стрелки никак не отличаются. Можно было бы сделать, например, нижние пунктиром. Или за анимировать их появление.
7. Пункты как истории в соцсетях.
Сам первый экран сделан плохо. Добавил сюда, чтобы показать. Как можно сделать слайдер в том же стиле, что и истории в Вконтакте или Инстаграме.
8. Оригинальное появление слайда.
Интересное решение по появлению первого слайда на экране. С эффектом рисования. Выглядит необычно и нестандартно.
9. Нечитаемый первый экран.
Хочу один раз это показать и больше не возвращаться к вопросу. Очень уж часто встречается подобное в самых разных видах.
Белый текст на светлой картинке не читабельный. Приходится напрягать глаза и всматриваться.
А решение напихать сюда блоков с разными никак не выделенными визуально изображениями перегружает восприятие. Неясно куда смотреть и за что можно взглядом зацепиться.
10. Календарь на первом экране.
Я не знаю что тут задумывалось. Это тупо календарь, которые показывает текущую дату.
Допускаю, что там могло быть какое-то расписание. Но об этом история умалчивает. Так как никого сообщение, намекающего на подобное нет.
Это пример того как нерационально использовать самый просматриваемый блок на сайте.
11. Выбор продукта по вопросам и возражениям.
Обратите внимание как придумали показывать продукт, исходя из понимания целевой аудитории.
Сверху на кнопках написано что человек хочет, а снизу его возражения. Когда кликаешь на кнопку создается эффект персонального подбора продукта. С характерным эффектом.
Стоит отметить, что на кнопке появляется галочка. Она исключает ситуацию, когда пользователь выбрал пункт, но забыл какой.
12. Креатив есть, смысла нет.
Наткнулся на попытку сделать креативный сайт, где когда колесика мыши крутишь - переключение между блоками выглядит как вертикальный слайдер.
В результате получилось вот такое решение.
Бессмысленный заголовок, который написан крупно и ни о чем нам не говорит. И подзаголовок, подразумевающий наличие какого-то списка. Об этом говорит двоеточие в конце.
Но, ничего нет.
Выглядит так, как будто сайт недоделан. И в нем не хватает информации.
Спойлер: все пункты находятся на трех последующих слайдах. Сделаны не лучше.
13. Фото со стрелками.
А вот так можно показать где находится ваш офис. Очень простое решение. Фотографируете путь и рисуете стрелками куда идти.
Правда, тут есть недоработка. На последней фотографии стоило тоже однозначно показать что это именно та дверь. Вроде и понятно, но из общего ряда выбивается.
14. Бредовое решение на странице контактов.
Скорее всего просто кого-то бездумно скопировали.
Мало того, что на карте непонятно где они находятся. Так и расположение заголовка с телефоном не дают нормально ей воспользоваться, перекрывая центральную часть.
Или там задумывалось, что посмотреть можно будет с края экрана?
15. Падающий человек.
Напоследок забавное решение на странице контактов.
Не до конца понял идею, правда. Предполагаю, задумывалось сделать так, как будто персонаж летит на землю. Но если это так - ни разу не очевидно.
Есть идеи что это могло бы значить?
На сегодня все.
П.С. Нашел в настройках как сделать чтобы отображался курсор. В следующих выпусках видео-примеры будут чуточку понятнее.
Подписывайтесь, чтобы не пропустить: https://zen.yandex.ru/id/5b85138ba459c800a931083b