16,5 дней на макет сайта - Кто он, этот ваш идеальный веб-дизайн?
🖐Привет, это Денис из NIXELE™! И сегодня вы узнаете
🔥Почему «красиво» — не значит «удобно», а также почему это можно опровергнуть...
📱Насколько в создании веб-дизайна не важен макет и почему на самом деле инструкцию придумали дебилы (или нет)?
🌭Из-за чего бутылка кетчупа это самый главный феил в дизайне, почему красивая картинка решает, а удобство и визуал – вообще не первое о чем стоит думать в веб-дизайне и наконец таки узнаем ответ на вопрос:
💯Кто он, этот ваш идеальный дизайн сайта?
Я решил начать с прогулки: свежий воздух и окружающая атмосфера натолкнули на одну интересную мысль когда я проходил мимо нового жилищного комплекса…
Смотрите, это логотип «Пятерочки» в одном из современных жк в Москве. Вроде бы обычная картина, но посмотрите внимательнее, можете открыть панораму и оглянуться вокруг🧐
«Пятерочка» в одном из домов современного жк на юго-востоке Москвы
Здесь в стильном и продуманном районе нет места ярким цветам - красному и зеленому, только стильный хай -тек. Однако если видишь что-то резко выдающееся, то это триггерит.
В вывеске этой «Пятерочки» есть очень важный смысл - она не выбивается из общего стиля жк, в котором находится. При этом не теряет своей узнаваемости. Это довольно простой, но емкий смысл, который мы сегодня попробуем на вкус⬇
📌Что же получается, «Пятерочка» осознает важность визуальной эстетики?
Все так, красивый визуал смотрится выигрышно и человек в большинстве случаев не станет жаловаться на трудности поиска данного магазина, если такие трудности действительно возникнут.
А это визуализация различия вывески на разном фоне(фасаде).
Поэтому здесь использовали простой цветной логотип без яркой подложки. Это делает магазин чуть менее узнаваемым издалека, но более привлекательным в окружающей обстановке, согласитесь. В конце концов это выглядит стильно.
Тогда я осознал, что проектирование не всегда самое важное и тратить на дизайн 16,5 дней точно не стоит. Визуальная составляющая зачастую имеет куда более важное значение перед планом. Получается все мои эти наброски не нужны были?
Мой почти семнадцатидневный макет. Все равно его потом переделывал…
🔹Эстетика как никогда важна, она приоритетнее макета, НО ключевое — смог ли пользователь выполнить нужное ему действие. Разберемся подробнее.
🤷♂Создание макета сайта это действительно бесполезное занятие?
Я сразу побежал домой изучать взаимосвязь макета и эстетики в веб-дизайне и вот что нашел:
Японские эксперты Масааки Куросу и Каори Кашимура в дизайн-центре компании Hitachi попросили оценить 26 сайтов 292-ух студентов факультета дизайна и психологии. Pезультаты показали положительные результаты в сторону эстетики дизайна: визуально более стильные и красивые сайты выбирали чаще, даже когда навигация ставила в тупик.
Это график кореляции удобства использования UX(левая шкала) и визуала дизайна сайта UI(нижняя)
Все же визуальная эстетика цепляет больше - она на первом плане. Я стал разбираться дальше: если сайт не имеет четкой структуры, то неудачный опыт использования сайта может обернуться тем, что юзер никогда больше не зайдет на данный веб-ресурс.
Об Этом уже говорит работа Флориана Гейгля и Кристины Лерман под названием «Оценка влияния смещения кликов и вставки ссылок в Интернете на навигацию».
В этом исследовании авторы анализировали, как визуальные акценты на ссылках (например, размещение в верхней части страницы) и добавление новых ссылок влияют на поведение пользователей при навигации по веб-сайтам.
Они пришли к выводу, что такие изменения могут существенно изменить маршруты пользователей, что подчеркивает важность продуманной навигационной структуры для эффективного взаимодействия с сайтом
🧐Именно поэтому дизайн может бесить. Красивый, но совершенно непригодный для удобного использования интерфейс может раздражать.
🔹Нужна успешная комбинация - эстетическое впечатление + легко совершенное плановое действие(визуал UI + макет UX). Вместе они подталкивают пользователя на следующий шаг и приводят к целевому действию, а также мотивируют к повторному посещению сайта.
👟Простыми словами - кроссовки должны быть стильными и соответствовать трендам, но самое главное — они должны быть удобными!
Кажется, что каким бы дискофмортым ни был макет(UX), всегда будет важна эстетика(UI) - тяга человека к идеальному невероятно велика!
🔑От сложного к простому - что такое UI/UX дизайн. Аналогия.
Представьте: вы собираете конструктор «Лего-техник», то есть механизм, из подвижных деталей(UX) и обычных блоков, создающих визуальную часть(UI).
Поворотные механизмы в виде шестеренок, троса и колес консруктора(UX) дополняет стильное сочетание желтого и черного(UI)
В вашем распоряжении любые детальки лего, но использовать можно конечное их число - это 100%-ный объем. И для каждого человека в данном фиксированном объеме будет свое идеальное и уникальное сочетание практичности и визуальной эстетики «шестеренок» и «обычных блоков».
👉Кстати, буду намеренно «ужирнять» сокращения UI и UX, а также относящиеся к ним слова, чтобы вам было проще разбираться с аналогиями и понимать их значение
С заботой - NIXELE™
Происходит наращивание новых нейронных связей и мы пониманием, что важно правильно сочетать UI и UX составляющие дизайна.
🎏Визуал по-разному привлекает разные категории людей
Все не так однозначно, нельзя сделать «супер» и «мега» и для всех сразу «в одном флаконе».
Дизайн-завод «Флакон» — креативное пространство в Москве, торгово-выставочный и офисный комплекс
Посмотрите, главное, что мы должны осознать из исследования Hitachi – это не то, что планирование элементов взаимодействия придумали дебилы и вообще, они тратят много времени на дизайн-макеты сайтов зря — нет! Эстетика может улучшить восприятие эргономичности даже если функциональность остается неизменной.
Воу! Эргономичность, - сложное слово, кажется мы можем обойтись и без него! Само слово означает приспособление предметов труда для комфортной и эффективной работы
Вы никогда не сможете нормально использовать новый телефон, пока не настроите размер значков, язык клавиатуры, уведомления и подсказки таким образом, как удобно именно вам для лучшей продуктивности
Юзабилити - слово-близнец эргономики, крайне важна, но ее польза зависит напрямую от первого впечатления, формируемого визуалом UI. Получается, часть времени из более чем двухнедельной работы стоило потратить на анализ аудитории, для которой делаю дизайн сайта.
Пример хорошего UI/UX дизайна(мое мнение)
🔹Ключевое на чем нужно сосредоточиться при разработке дизайна сайта – не UI и не UX составляющие, даже не их сочетание. Самое важное – понять что именно ожидает увидеть пользователь. Потому что от его потребностей и зависит правильное сочетание UI/UX.
«Если между ожиданиями клиентов от продуктов или услуг и их реальным дизайном существует большая разница, то мы вынуждены вступать в неравный бой, пытаясь заставить клиентов пересмотреть их устоявшиеся представления»
Из книги Джона Уэлена «Дизайн пользовательского опыта»
Тесты, тестирование, тестики🔥
— Знаете почему программирование и веб-дизайн одно и то же?
— Потому что это все IT? — спросите вы
— Да, скорее всего вы правы! — Но почему?
Potomu chto никогда не знаешь кто он, этот твой пользователь))
Поэтому необходимо знать погоду сайта, дизайн которого создаешь. А осадки на ней - это user flow. Смотите, так выглядит погодный циклон на сайте:
Это тепловая карта сайта Guardian Unlimited
Подобная функция в «Яндекс метрике» называется «Вебвизор». Она помогает понять куда чаще нажимают пользователи и как работает визуальная часть сайта
Именно такую карту наша команда использовала при запуске тестовой версии сайта хоккейной лиги чемпионата кхл 3на3. На тепловой карте мы с командой отчетливо видели какие элементы привлекают пользователя и работают так, как и было задумано, а какие остаются без внимания и требуют UI/UX доработки.
При помощи user flow, составленного на старте разработки проекта, можно на этапе запуска также отследить путь пользователя, например до страницы покупки билетов.
В нашем случае, наносить на user flow метки, показывающие, где пользователь проходит целую страницу до покупки билетов на матчи, вместо того, чтобы найти кнопку покупки билетов вверху главной.
📌Как повлияло на разработку веб-дизайна
Сейчас моя работа начинается с гугл формы и опросников и это не просто дополнительная опция в разработке веб-дизайна — нет! Наоборот — это серьезность и ответственность. Я осознаю важность первичного анализа потребностей не только клиента, но и целевой аудитории.
Моя гугл-форма для работы с клиентами
💡Важно тестировать свои программы, методы статьи, рефераты и другие работы, чтобы осозновать их недочеты. И веб-дизайн тому не исключение.
🔹Но работа над анализом аудитории это не только тестирование после создания дизайна, но и аналитика потребностей ца перед началом работы - фундамент и неотъемлемая часть создания любого продукта.
👽Важно не просто создавать дизайн, опираясь на тенденции эстетики и тем более тренды, но и тестировать потенциальную аудиторию, даже стараться не ограничиваться только ей.
Ведь цель дизайна сайта, не только замотивировать потенциального покупателя купить авто именно здесь, но и привести к целевому действию юзера, «случайно» попавшего на ваш сайт.
📌Как вы думаете, что вам может рассказать одна бутылка кетчупа?
Вроде бы ничего особенного, только если это не бутылка Heinz. Знакомтесь — мем, посвященный именно ей:
Слева - UI интерпретация кетчупа, а справа - UX
Важная мысь невероятно проста: не пытайтесь изобрести бутылку кетчупа заново, научитесь использовать ее правильно в зависимости от человека. С одной стороны - она выглядитт правильно и привлекательно в вертикальном положении, но ведь ее используют вверх ногами и это практично с точки зрения UX.
Эталона идеального дизайна сайта не существует, но существует план, который может помочь.
⚡8 советов от NIXELE™ по созданию идельного дизайна сайта
Чаще соприкасайтесь с прекрасным но не утопайте в нем - выделите на подбор примеров только час, разбейте их по группам и оттолкнитесь от чего-то одного
Стройте здание, начиная с фундамента, но не израсходуйте весь материал — сравнивайте макет со схемой построения успешных сайтов, но не крутите один элемент сликом долго
Проверенные решения на то и провренные, они работают — изучайте теорию и психологию, используйте нейросети и выбирайте с умом то, на чем будет посторен UI/UX дизайн
Нет ничего страшного в том, чтобы спросить у девушки или мамы какие цветы она любит - общайтесь с целевой аудиторией напрямую, чтобы узнавать предпочтения и ожидания своих «любимчиков»
Будьте открытее к общению — опрашивайте не только ца, но и своих друзей и знакомых. Порой люди, совсем далекие от темы, могут натолкнуть на интересные мысли
Не бойтесь сносить здание под корень — не бойтесь начать все с начала, даже если работу полностью придется стереть
Ставьте широкие видовые окна — делайте дизайн «прозрачным» в первую очередь понятным и доступным, и только потом красивым
Любите себя — прощайте себе даже крупномасштабные косяки и умейте найти силы на то, чтобы вернуться к работе, даже когда много правок
Теперь есть понимание того, что сначала необходимо проводить качественный обзор того, над чем планируешь «взять высоту».
🔹Визуал и практичность работают вместе, полагаясь на потребности пользователя. Знакомтесь: формула которую мы вывели
UI - визуал; UX - пользовательский опыт; TA - целевая аудитория; DS - дизайн
На самом деле - выбор за вами, и только вам решать каким будет ваш идеальный дизайн, но ключики к этому лежат через вашу чуткость, талант и усердный труд.
И кстати, без помощи тяжело потом что-либо искать по это статье. Поэтому для вас, ключевые тезисы я отметил вот так 🔹
С любовью и заботой - NIXELE™
🙌Спасибо за прочтение данной статьи, ваша активность помогает скорейшему выходу нового материала
👉Всегда рад обратной связи — не забывайте про чек-поинты в виде опросов выше и по ссылке) Увидимся в следующей статье😉
