«Где кнопка?!» Как я потратил 16,5 дней на макет сайта и почему идеальный дизайн может бесить?
Это лого «Пятерочки» в одном из современных жк в Москве. Вроде бы обычная картина, но к чему он здесь? Посмотрите внимательнее, откройте панораму и оглянитесь вокруг🧐.
Здесь в стильном и продуманном районе нет места ярким цветам - красному и зеленому, только стильный хай -тек.
Когда идешь по стильной улице, создается определенное ощущение удобства и комфорта(или уюта - кому как угодно). Однако если видишь что-то резко выдающееся, то это триггерит.
В вывеске этой «Пятерочки» есть очень важный смысл - она не выбивается из общего стиля жк, в котором находится, при этом не теряет своей узнаваемости. Это довольно простой, но емкий смысл, который мы сегодня попробуем на вкус⬇
🔥Совсем скоро вы увидите почему «красиво» — не значит «удобно», а также почему это можно опровергнуть...
🖐Привет, это Денис из NIXELE™! И сегодня вы узнаете
📱Насколько в создании веб-дизайна не важен макет и почему на самом деле инструкцию придмуали дебилы?
🌭Из-за чего бутылка кетчупа это самый главный феил в дизайне, почему красивая картинка решает, а удобство и визуал – не первое о чем стоит думать в веб-дизайне
📊Посмотрим исследования японцев по дизайну, самостоятельно покрутим некоторые рабочие веб-ресурсы и наконец таки узнаем ответ на вопрос:
💯Кто он, этот ваш идеальный дизайн сайта?
📌Что же получается, «Пятерочка» осознает важность визуальной эстетики?
Все так, красивый визуал смотрится выигрышно и человек в большинстве случаев не станет жаловаться на трудности поиска данного магазина.
Поэтому здесь использовали простой цветной логотип без яркой подложки. Это делает магазин чуть менее узнаваемым издалека, но более привлекательным в окружающей обстановке, согласитесь.
Однако есть ошибки в дизайне, которые уже будет сложно простить.
К примеру, такой же полностью белый логотип того же магазина на темном фасаде сбивает с толку и становится сложно узнаваемым. Это касается как раз и веб-дизайна тоже.
📌Когда веб-дизайнеры ставят эстетику на первое место
Стиль, приятный глазу и стоящий выше удобства, заставляет пользователя забыть про практическую суть, что вовсе нехорошо. А что это означает для веб-дизайна?🧐
- Пользователь, открывая сайт, получает эстетическое удовлетворение с первой же секунды его открытия
- Совершает желаемое действие без каких либо проблем
- Как бы получает дозу дофамина(выполненная задача, закрытая ачивка).
🔹Эта успешная комбинация - эстетическое впечатление + легко совершонное плановое действие, мотивирует пользователя на следующий шаг и приводит к целевому действию, а также мотивирует к повторному посещению сайта.
А вот если четкой структуры сайт не имеет, практическая чать, а именно макет, - «на нуле», то пользователь теряется и с большей долей вероятности уйдет с него, затем и количество целевых действий упадет.
🔑Что такое UI/UX дизайн. Аналогия.
К вам в руки попал кубик рубика в красивых матовых, но не слишком ярких цветах, приятный на ощупь. Однако постоянно заедает механизм поворота его граней – это пример физического объекта с хорошим UI(визуалом) и плохим UX(возможность быстро и приятно провзоимодействовать)
Странный пример, и совсем не сложно догадаться, что данную картинку сгенерировала нейросеть)
🤷♂Создание макета сайта это действительно бесполезное занятие?
Этим вопросом задались япониские эксперты Масааки Куросу и Каори Кашимура в дизайн-центре компании Hitachi
👉292-ух студентов факультета дизайна и психологии попосросили оценить 26 сайтов
Pезультаты показали положительные результаты в сторону эстетики дизайна: визуально более стильные и красивые сайты выбирали чаще
🔹Эстетика как никогда важна, она приоритетнее макета, НО ключевое — смог ли пользователь выполнить нужное ему действие.
📌Если у вас айфон, то вы продуктивнее...— Что?
В Швейцарии Андрес Сондереггер и Юрген Саверапровели из Бернского университета прикладных наук провели иссследование под названием «Влияние эстетики дизайна при тестировании юзабилити», в результате которого выяснили, что пользователи, использующие более привлекательную модель телефона, смогли более продуктивно работать.
Еще один аргумент в пользу визуальной составляющей(UI).
👟Простыми словами - кроссовки должны быть стильными и соответствовать трендам, но самое главное — они должны быть удобными!
Кажется, что каким бы неудобным ни был макет(UX), всегда будет важна эстетика(UI) - тяга человека к идеальному невероятно велика! Но всегда ли это так?
Кстати, буду намеренно «ужирнять» сокращения UI и UX, а также относящиеся к ним слова-синоноимы, чтобы вам было проще разбираться с аналогиями и понимать их значение
🎉Поздравляю!
Вы уже добались до отметки в 5513(4738 без пробелов) символов в этой статье! Именно такой номер имеют часы Rolex Submariner 5513, разработанные специально для дайверов.
Это означает, что пришло время погружаться глубже в нашу тему. Поэтому совсем скоро в совсем следующем абзаце вы узнате «какой он, этот ваш самый идеальный дизайн сайта?»
Перед вами сайт-собрание советов для дизайнеров по UX-компановке и созданию пользовательских интерфейсов, «Законы UX»
🔹Все просто: знакомые геометрические объекты, пастельные цвета, не вызывающие дискомфорта. И даже если вы не любили геометрию в школе - эстетика правильной формы возмет над вами верх!
Это то, что от природы всегда привлекало человека, интуитивно понятный и простой дизайн: «Открыл — Увидел — Понял» — просто, как «Раз — Два — Три»...ничего лишнего🔥
Казалось бы, идеальный сайт - найдено✔
📌А почему вам он не нравится?
Факт! Эта «красотень» зайдет далеко не всем, ведь у каждого свои вкусы и это нормально.
Но ведь речь немного о другом - правильные геометрические формы смотрятся уместно и интуитивно понятны. В этом плане мне очень импонирует айдентика Московского политеха
Подробнее ознакомится с некоторыми дизайнерскими элементами их стиля вы можете здесь. Этот стиль «символизирует движение, энергию и постоянное обновление — неотъемлемые составляющие деятельности успешного вуза...»
🎏Визуал по-разному привлекает разные категории людей
Похоже что в нашем расследовании есть распутье - идеальный дизайн сайта пока в розыске. Нельзя сделать «супер» и «мега» и для всех сразу «в одном флаконе».
Посмотрите, главное, что мы должны осознать из исследования Hitachi – это не то, что планирование элементов взаимодействия придумали дебилы и вообще, они тратят много времени на дизайн-макеты сайтов зря — нет!
Эстетика может улучшить восприятие эргономичности даже если функциональность остается неизменной.
Воу! Эргономичность, - сложное слово, кажтся мы можем обойтись и без него. Само слово означает приспособление предметов труда для комфортной и эффективной работы Вы никогда не сможете нормально использовать новый телефон, пока не настроите размер значков, язык клавиатуры, уведомления и подсказки таким образом, как удобно именно вам для лучшей продуктивности
Юзабилити - слово-близнец эргономики, крайне важна, но ее польза зависит напрямую от первого впечатления, формируемого визуалом UI.
Но как угодить всем — невозможно!? Как настроить юзабилити для такого объекта как веб-сайт. Кажется, нужно перенять кое-что у японцев и самим понять как укротить это понятие
📊Мы проведем свой анализ здесь и тут и сейчас!
Только не нужно собирать сотни человек, как для социального экспреримента. Мы не будем оценивать эргономику сайта целиком, но выясним какой из...
✔Внимание, вы только что стали участником тестирования, теперь вы моя целевая аудитория, которую я буду изучать. Но разумеется только с вашего соглашения👌
⚡А уже в следующей статье я проведу краткий анализ и отвечу на вопрос: «Кто вы и чего хотите на самом деле?»
📜Есть ли универсальный рецепт?
Гипотеза: стоит сделать правильное соотношение UI и UX, акцентируя внимание на визуальной составляющей UI.
Юзабилити и визуал неразраывно связанны, но:
- Из-за «слишком креативного» визуала(UI) юзер может не найти интересующую его информацию о товаре и отнесет деньги конкурентам, перейдя на их сайт
- С другой стороны «слишком пресный» UI несет за сообой ущерб бренду в виде плохой окупаемости и уменьшения потока клиентов
Рецепт точно есть, но он кроется не в конкретных числах, а в анализе, который мы уже проводили.
— Стоп! А для чего и почему мы вообще его проводили? — Чтобы узнать ваши потребности и какой вы конструктор лего))
🙌Немного терпения, сейчас все станет понятно
🌓Нужна золотая серединка, но как ее найти?
Представьте: вы собираете конструктор «Лего-техник», то есть механизм, из подвижных деталей(UX) и обычных блоков, создающих визуальную часть(UI).
В вашем распоряжении любые детальки лего, но использовать можно конечное их число - это 100%-ный объем. И для каждого человека в данном фиксированном объеме будет свое идеальное и уникальное сочетание практичности и визуальной эстетики «шестеренок» и «обычных блоков».
🔹Ключевое на чем нужно сосредоточиться при разработке дизайна сайта – не UI и не UX составляющие, даже не их сочетание. Самое важное – понять что именно ожидает увидеть пользователь. Потому что от его потребностей и зависит правильное сочетание UI/UX.
«Если между ожиданиями клиентов от продуктов или услуг и их реальным дизайном существует большая разница, то мы вынуждены вступать в неравный бой, пытаясь заставить клиентов пересмотреть их устоявшиеся представления»
Тесты, тестирование, тестики🔥
Знаете почему программирование и веб-дизайн одно и то же? — Потому что это все IT? — спросите вы — Да, скорее всего вы правы! — Но почему? Potomu chto никогда не знаешь кто он, этот твой пользователь))
Это теплова карта сайта Guardian Unlimited
Подобная функция в «Яндекс метрике» называется «Вебвизор». Она помогает понять куда чаще нажимают пользователи и как работает визуальная часть сайта. Это не дает полного представления поведения пользователя, так как засчитываются любые клики на странице, котрые могут оказаться случайными. Но все же это необходимый шаг при аналитике уже на этапе сопровождения сайта.
Я бы хотел познакомится с вами ближе, поэтому предлагаю посмотреть то, куда вы чаще нажимаете когда заходите на сайт, куда направлен ваш взгляд
⏰Время прохождения ~ 1-2мин.
💡Важно тестировать свои программы, методы статьи, рефераты и другие работы, чтобы осозновать их недочеты. И веб-дизайн тому не исключение.
Это наглядное представление того, из чего состоит разработка веб-дизайна
Красивый дизайн способствует тому, чтобы пользователь прощал незначительные проблемы с удобством использования.
🔹Как вы видите работа над анализом аудитории это не только тестирование после создания дизайна/кода, но и аналитика потребностей ца перед началом работы - фундамент и неотъемлемая часть создания любого продукта.
Визуальную часть UI также важно качественно прорабатывать. При этом важно не забывать про удобство испольования UX. Порой пользователи могут вести себя странно и нестандартно, тогда и понимаешь в чем нуждается твой дизайн и почему он не был успешен.
👽Важно не просто создавать дизайн, опираясь на тенденции эстетики и тем более тренды, но и тестировать потенциальную аудитрию, даже стараться не ограничиваться только ей.
Ведь цель дизайна сайта, не только замотивировать потенциального покупателя купить авто именно здесь, но и привести к целевому действию пользователья, "случайно" попавшего на ваш сайт.
🔹Изучить реакцию ца, ваших знакомых, их настроение при посещении данных сайтов - отточите пользу дизайна до степени "взгляд — искра — буря — безумие".
Провести за ручку и показать где купить - это наша цель.
В мире множество примеров того, как люди путем анализа потребностей ца находили верные решения.
Так например, когда в печеньках oreo мало начинки. Возникает потребность ее увеличить. Так и получается новая упаковка oreo "c двойной начинкой".
🔹Поэтому как ни крути в конечном счете необходимо, чтобы UX и UI (форма и содержание) работали вместе. Но и не просто действовали вместе, а покрывали потребности пользователя целевой аудитории. Ведь именно его «хотелки» формируют образ конечного продукта😇
📌Как вы думаете, что вам может рассказать одна бутылка кетчупа?
Вроде бы ничего особенного, только если это не бутылка Heinz. Знакомтесь — мем, посвященный именно ей
Важная мысь невероятно проста: не пытайтесь изобрести бутылку кетчупа заново, научитесь использовать ее правильно в зависимости от человека. С одной стороны - она выглядитт правильно и привлекательно в вертикальном положении, но ведь ее используют вверх ногами и это практично с точки зрения UX.
📌То есть я зря потратил 16,5 дней на макет сайта?
Да, как бы ужасно это не звучало - макет, это необходимая, но недостаточная часть хорошего веб-дизайна. Это выглядло очень страшно и пугающе
Рисовать и кнопки расставлять нужно еще уметь, как мы убедились в прошлой статье, но в певую очередь нужно опрашивать свою целевую аудиторию.
Эталона идеального дизайна сайта не существует, но существует план, который может помочь.
⚡8 советов от NIXELE™ по созданию идельного дизайна сайта
- Чаще соприкасайтесь с прекрасным но не утопайте в нем - подбирайте референсы, но не зацикливайтесь на них: выделите на подбор примеров только час, разбейте их по группам и оттолкнитесь от чего-то одного
- Стройте здание, начиная с фундамента, но не израсходуйте весь материал — составляйте макет не на свое усмотрение, сравнивайте его со схемой построения успешных сайтов, но не крутите одну кнопку сликом долго, возможно уже пора порисовать=)
- Проверенные решения на то и провренные, они работают — выбирайте цветовые решения, основываясь не только на собственных «хотелках», изучайте теорию и психологию, используйте нейросети и выбирайте с умом то, на чем будет посторен UI/UX дизайн.
- Нет ничего страшного в том, чтобы спросить у девушки или мамы какие цветы она любит - общайтесь с целевой аудиторией напрямую, чтобы узнавать предпочтения и ожидания своих «любимчиков»
- Будьте открытее к общению — опрашивайте не только ца, но и своих друзей и знакомых. Порой люди, совсем далекие от темы, могут натолкнуть на интересные мысли
- Не бойтесь сносить здание под корень — иногда бывает, что утопаешь в потоке информации и красоты, забывая про главную задачу. Но необходимо дать целевой аудитории то, что она ожидает увидеть. Поэтому важно не бояться начать все с начала, даже если всю работу придется стереть
- Ставьте широкие видовые окна — делайте дизайн «прозрачным» в первую очередь понятным и доступным, и только потом красивым.
- Любите себя — прощайте себе даже крупномасштабные косяки и умейте найти силы на то, чтобы вернуться к работе, даже когда много правок
Теперь есть понимание того, что сначала неодходимо проводить качетсвенный обзор того, над чем планируешь «взять высоту».
Сейчас моя работа начинается с гугл формы и опросников и это не просто дополнительная опция в разработке веб-дизайна — нет! Наоборот — это серьезность и ответственность.
Конечно же все вышеперечисленное это монолитный и важный процесс. Но чем дальше, тем больше коварностей можно встретить. Важно правильно уметь их ликвидировать.
Например: производительность резко возрастает, когда компьютер и его пользователи взаимодействуют с такой скоростью (<400 мс), которая гарантирует, что ни одному из них не придется ждать другого.
Знакомтесь, Порог Доэрти из уже знакомого нам «идеального дизайна сайта» - «Законы UX»
Я отрисовал обложку из статьи с нашего псевдоидеального сайта и анимировал ее. Как вы счиатете
Если соблюден Порог Доэрти, то пользователь ускоряется в соображении и быстрее совершает целевое действие. Это не совсем правильная визуализация, она представлена через анимацию. Но она поможет вам быстрее понять этот закон.
Это и многие другие аспекты, такие как закон Фиттса, закон Якоба, закон Хика влияют на итоговую конверсию сайта. Охота нырнуть в изучение всей этой теории с головой🔥
А если вы лично хотите онакомится с данными статьями о законах UX, то рекомендую посетить канал со статьями Кати Григорьевой — Старший ментор на курсах графический и коммуникационный дизайнер Яндекс Практикума
📌Так что же получается - идеального веб-дизайна не существует?
Да, но есть сводка правил, по которому к нему можно стремится, можно лишь заставить пользователя принять свою точку зрения и сказать как правильно, а это долгий и упорный труд.
Но качественный дизайн нужен уже сейчас — горит дедлайн и качество нужно уже на следующей неделе во вторник к 12:00.
— Что же делать? — Начинайте разговаривать, берите все в свои руки и анализируйте.
Никогда не поздно узнать у целевой аудитории то, в чем она действительно нуждается
🔹Красивый дизайн способствует тому, чтобы пользователь прощал незначительные проблемы с удобством использования. Главное — он должен быть простым. Простым и прозрачным настолько, чтобы за короткое время смог понравиться пользователю. Поэтому визуальную часть (или UI дизайн) важно вкачивать по полной. Но при этом, стоит также учитывать и то, что эффект эстетики удобства использования имеет свои пределы.
🔹Визуал и практичность работают вместе, полагаясь на потребности пользователя. Знакомтесь: формула которую мы вывели
На самом деле - выбор за вами, и только вам решать каким будет ваш идеальный дизайн, но ключики к этому лежат через вашу чуткость, талант и усердный труд.
И кстати, без помощи тяжело потом что-либо искать по это статье. Поэтому для вас, ключевые тезисы я отметил вот так 🔹
🙌Спасибо за прочтение данной статьи, ваша активность помогает скорейшему выходу нового материала
👉Всегда рад обратной связи — не забывайте про чек-поинты в виде опросов выше и по ссылке)
Увидимся в следующей статье, где совсем скоро вас ждет ответ на вопрос: кто же вы на самом деле😉