Как я сайт «лепил» для ASUS
Этим летом с коллегами запустили проект ASUS.STUDIO. С помощью него мы хотели объединить контент-криэйторов и дать российской аудитории полезные видеоуроки по разным направлениям: фото, видео, дизайн, 3D-моделирование, моушн-дизайн, мультипликация и аудио.
Вот так выглядела первая версия нашего сайта.
На создание и оптимизацию ушло всего два дня. Делал все на Tilda. Никакие макеты не использовал - просто собирал элементы и все. Никакого анализа, пользовательского опыта и фокус-групп тут не было.
Не надо так делать.
Результат вроде всем понравился. Красиво и работает - класс. Не сказать, что мы прям эксперты по созданию сайтов, поэтому всем было ок. Мне тоже :)
Вот тут можно посмотреть первую версию сайта.
Декабрь 2020
В личном портфолио 7 сайтов. Все +- похожи, что-то явно пошло не так. Я решил всерьез научиться создавать «правильные» и красивые сайты, поэтому записался на курс «Профессия UX/UI-дизайнер с нуля до PRO» от скилбокса. Посмотрел первые 12 уроков и понял, в чем мои главные ошибки (осталось посмотреть ещё 443 урока🙃). Все мои сайты были без полезного функционала и имели много лишнего.
Сразу же я решил обновить сайт нашего проекта.
Анализ.
Я посмотрел статистику просмотров каждой страницы и какой путь совершает человек. Путь был в большинстве случаев такой:
Главная -> Раздел с уроками -> Нужная категория.
То есть большинству людей не интересен сам сайт - им нужны уроки на этом сайте. Поэтому для главной нужен был блок, где человек мог бы выбрать нужную ему категорию сразу. Всего у нас 7 направлений, но на главную решил вынести только 6 самых популярных. Все равно дальше их будет больше и уместить все не выйдет.
На новой главной решил применить Z-паттерн (или подобие его). Теперь посетитель сайта может сразу выбрать нужную ему категорию уроков и посмотреть все доступные. После идет блок, где можно узнать про ускорение приложений и выбрать ноутбук для эффективной работы в «тяжелых» приложениях.
В это меню собрал 5 основных страниц, которые есть у нас: главная, раздел с уроками, раздел с криэйторами, раздел с приложениями и страничка с ноутбуками, где про них можно узнать больше или купить. Тут руководствовался тем, что люди акцентируются на первых и последних элементах. Поэтому наиболее важные для нас пункты назначения стоят по бокам. (В мобильной версии оставили только кнопки: Главная, Уроки и Инструменты).
После главного экрана идет блок с новыми уроками (обновляю все вручную, занимает максимум минуту времени) и выбор ноутбуков. Большинство людей переходило в раздел «Уроки» только для того, чтобы посмотреть на свежие уроки, которые вышли у нас (публикуем почти каждый день. Только иногда есть паузы). Для таких людей собрали 5 самых новых уроков прямо на главной, чтобы не приходилось переходить дальше. Раздел с ноутбуками был у нас не очень популярен, поэтому вынесли его тоже на главную. В будущем посмотрим, будет ли больше переходов на сайт продукта. (Очень хотелось бы).
Далее идут все профессионалы, которые записывают уроки в рамках этого проекта. Тут логика, примерно, как с ноутбуками. Мало людей переходило на страницы криэйторов внутри сайта, основные переходы были с других платформ (YouTube и Instagram).
В раздел «О проекте» переходило очень мало людей, поэтому его тоже вынесли на главную страницу. Раньше в этом разделе можно было оставить обратную связь: подсказать идею для видео (мы прислушиваемся к каждому сообщения и просим создавать уроки по темам, которые предлагают сами пользователи) и оставить контакты для сотрудничества.
Эти формы по поместили в самый низ. Будем продвигать их через рекламу, чтобы люди оставляли свои идеи и вдобавок находили новых творческих людей. Запускали рекламу в этом квартале и пришло 7 новых заявок от креативных людей ещё со старого сайта. Посмотреть этот раздел можно тут.
В прошлой форме для сотрудничества мы спрашивали только имейл и коммерческое предложение. Их нам оказалось мало и приходилось запрашивать дополнительную информацию, что отнимало достаточное количество времени. Сейчас мы разместили сразу все поля, которые нас интересуют, надеемся, что так станет проще.
Все скриншоты выше относятся к новой главной. Далее расскажут про раздел с уроками.
Самое главное - добавили фильтр по категориям, программам и авторам. Последнее время нам в комментариях писали, что было бы удобно сделать фильтр по программам, т.к. если люди, которым нужен определенный пул программ и все. Вот так это выглядит:
Раньше можно было выбрать только категорию и все. Уроков стало много (сейчас более 70) и людям сложнее стало находить нужные им видео, поэтому оставлять этот раздел без изменений было нельзя.
Сейчас стало гораздо удобнее и многие в комментариях написали нам «Спасибо».
Это так приятно😄
Старых разделов больше видеть не хотелось.
У нас оставался ещё один тип страниц, которые тоже нужно было обновить, а именно - страницы авторов. На этой странице была основная информация об авторе, чем он занимается, ссылки на его соцсети и записанные уроки.
Вот такая длинная страница была, посмотрите:
Целых 5 скриншотов мне пришлось сделать, чтобы вам её показать. Было принято решение упростить эту страницу, чтобы не приходилось много листать и у нас это вышло, причем, очень даже классно (С - скромность)
Удалось уместить всю информацию из старой версии более компактно. Основная информация сразу видна при открытии страницы.
Если пролистнуть чуть вниз, то можно посмотреть на уроки только от этого автора. И все. На этом страница автора закончилась. Длинный скролл в 5 экранов удалось уместить в 1.5 экран.
Итоги
Результат в этот раз понравился всем, и мы спешили переехать на новую версию сайта. Я сам не ожидал, что такое возможно.
Конечно, скорее всего, я поменяю этот сайт ещё ни один раз. После просмотра новых уроков есть идеи, как можно сделать сайт ещё лучше. Но менять сейчас его не хочется. Хотим посмотреть на путь пользователя и клики.
Я впервые писал такую статью, поэтому не судите строго. Извиняюсь, если где-то допустил ошибки. В будущем буду делиться новыми своими работами, пока не стану профессиональным UX\UI дизайнером.
Всем спасибо за внимание. Жду ваших комментариев, будет очень интересно почитать.
Комментарий недоступен
Ахахах, никто))
Пожалуйста, просмотри уроки / примеры сильных брендов как делать контактные формы.
Посмотрю)) Будет классно, если напишешь на чьи уроки ориентироваться
1. Стили input, select и button условно одинаковые. 141414 0f0f0f и 000000 не каждый монитор настолько откалиброван что бы увидеть разницу.
2. Бордюры в 1 пиксель на мониторах с большой плотностью пикселей будет выдавать фактически 1.5 пикселя а с формами которые на сайте имеют размер 2 пикселя не особо будут отличаться.
3. Нашел третий цвет кнопок сверху 181818. чем собственно 141414 не угодил.
4. 5 стилей кнопок на одной странице. + 2 стиля инпутов.
Кажется стоило не заканчивать просмотр уроков а досмотреть до конца, редизайн бы подождал и собрали бы больше статистики. А так если прям по хорошему то нужно третий раз садится и править стили.
Спасибо большое за развернутый ответ. Учту его при новом редизайне. Просто понимал, что самый первый вариант не очень и лучше его поменять. Курс по дизайну рассчитан на 12 месяцев, там очень много уроков, но если заниматься каждый день, учитывая рабочую нагрузку, то через месяца 3 реально его закончить. Новая версия, на мой взгляд, значительно лучше первой и хочется теперь по ней собрать статистику и после полного обучения сделать редизайн.
А какое количество стилей кнопок допустимо на одной странице?
Аккуратнее сделать совсем никак?