Четыре правила оформления сайтов – создаем простую и понятную страницу сайта

Создав свой сайт, каждый владелец хочет сделать его популярным. Верстка, сделанная с иголочки, современный дизайн — работы проделано много, но ее может оказаться недостаточно если не учитывать несколько правил оформления сайтов. В чем секрет притягательного сайта, на который так и хочется вернуться?

Правила оформления сайтов

Ясность и простота – вот красота!

Заходя на сайт, любой пользователь хочет решить свою проблему. Сейчас на первое место выходит только его проблема и возможность быстро ее решить. С Вашей помощью или нет, это зависит от подачи самой информации.

Простота подачи информации – это главное правило оформления сайта.

Если посетителю Вашего сайта не придется тонуть в куче всплывающих окон, читать обрывки текста между огромными блоками рекламы, то он обязательно останется на вашем ресурсе. Интернет-пользователи не хотят думать, им нужен готовый продукт. Если при первом взгляде на ваш ресурс они не увидят решение своего вопроса, не станут тратить время на тщательные поиски и просто закроют страницу.

Посещая страницы сайта, пользователь должен ясно видеть решение своего вопроса. Если ему предоставить такую возможность, то он станет постоянным посетителем вашего ресурса.

Если не знайте что писать на главной станице сайта, тогда вам может быть полезна эта статья.

Важен графический баланс

При создании своего ресурса необходимо помнить, что важной составляющей является правильно подобранная графика. Расположение элементов должно быть интуитивно понятно. Помните, что расположенные рядом элементы автоматически принимаются за группу.

Не забывайте о правильном подборе цветовой гаммы. К классическим черному и белому добавьте свежие цвета (зеленый, синий, розовый). Они способны освежить ресурс и побуждают пользователей к действию.

Удачный и не удачный пример оформления сайта

Использование более 3 цветов (и их полутонов) не рекомендуется т.

к. будите отклоняться от правил оформления сайтов . Ваш ресурс должен быть приятен глазу, а не выглядеть как взрыв конфетной фабрики. Подбор изображений также является важной частью. Они привлекают внимание, но большое их количество отвлекает от текста и способно запутать пользователя.

Контент – то, за чем пришел пользователь

Качество и достоверность информации являются основой любого ресурса. Но без правильного оформления сайта и его подачи, никто этой информации значения не придаст.

Пункты, которые важно соблюдать:

• Цепляющий заголовок. Его роль состоит в завлечении пользователя. Хороший заголовок интригует и возбуждает внимание. Обязательно хочется узнать, что за ним скрывается.
• Подзаголовки, различные выделения текста, списки. Своеобразные полочки, на которых лежит материал. При просмотре страницы, пользователь обязательно обратит внимание на структурированную таким образом информацию.
• От меньшего к большему или «принцип пирамиды». Основная мысль статьи должна быть кратко изложена вначале. Далее идет ее объяснение и аргументирование.

Свободу попугаям!

Каждый хочет контролировать ситуацию и брать все в свои руки. Дайте пользователям эту возможность. Кнопки «Вверх» и «Назад» должны находиться в поле зрения. Возможность закрывать всплывающие окна является важной для многих пользователей. Чат техподдержки – заметный, но не мешающий самостоятельно изучить представленный материал.

Стабильно высокие посещения Вашего ресурса — это то, что вы получите при грамотном оформлении и постоянном тестировании своего сайта.

8 правил оформления главной страницы сайта

2023-06-16 0 ∞

Главная страница сайта — это лицо компании.  Она  получает больше просмотров, чем любая другая страница ресурса. Поэтому нужно тратить больше времени на ее разработку.

• Что должно быть на главной странице?
• Используйте визуальную иерархию
• Не добавляйте слишком много текста
• Не будьте слишком креативными
• Поймите свою аудиторию
• Создайте простой и понятный дизайн
• Используйте негативное пространство
• Быстрая загрузка
• Не теряйте контроль

Она должна включать в себя следующее:

• Призыв к действию.

Это самый важный элемент, который поможет вам увеличить продажи.

• Раскрывать тему сайта.

Главная страница должна раскрывать тематику сайта, чтобы пользователи могли понять, что именно предлагает ваша компания.

• Брэндинг и другие вспомогательные элементы.

Продуманный логотип и соответствующая цветовая палитра помогают пользователям узнавать бренд.

• Будущие цели сайта.

Нужно отобразить цели и планы компании на главной странице.  Людям нравится честность, поэтому предоставляйте только достоверную информацию.

• Панель навигации.

Наличие панели навигации на главной странице является обязательным условием. Она позволяет пользователям быстро и просто получать доступ к другим страницам сайта и возвращаться на главную.

• Контактная информация.

Главная страница сайта должна содержать адрес электронной почты, номера контактных телефонов, местоположение и т.д. Благодаря этому клиенты смогут быстро связаться с вами.

• Кнопки социальных сетей.

Добавьте их на главную страницу. Это увеличит охват аудитории.

• Отзывы.

Добавление отзывов от реальных клиентов повысит доверие к вашему сайту. Большинство людей формирует свое мнение о бренде, опираясь на опыт других пользователей.

Теперь изучим восемь правил оформления главной страницы сайта, которых стоит придерживаться.

Отображайте данные в порядке приоритета и актуальности контента.  Разместите наиболее важную информацию вверху, а второстепенную — в конце страницы. Группируйте связанный контент и используйте различную типографику для заголовков и подзаголовков. А также для обозначения значимости некоторых элементов. Например, можно выделить панель навигации и призыв к действию жирным шрифтом.

Старайтесь избегать длинных абзацев, сжимайте информацию и создавайте эффективный однострочный текст. Это подчеркнет привлекательный контент, уменьшит визуальный шум и сделает главную страницу сайта более компактной.

Некоторые элементы дизайна являются традиционными для всех сайтов, и их не стоит изменять. Пользователи должны понимать, для чего предназначен тот или иной элемент простые элементы, скорее всего, они покинут сайт, независимо от отличного интерфейса.

Для выделения ссылок используйте классическое оформление ссылки. Форму авторизации разместите в верхнем правом углу, а панель навигации – сверху. Важно найти правильный баланс между креативностью и удобством использования сайта.  Чтобы достичь этого, создайте базовый макет со стандартными элементами, а затем добавьте креативные компоненты.

Перед разработкой дизайна сайта изучите интересы и потребности своей аудитории. Для этого проанализирует конкурентные площадки. Это поможет получить общее представление о нужной цветовой схеме, функционале и стиле, который понравится вашим пользователям.

Сфокусируйте внимание пользователей на CTA-кнопке, а не на других элементах главной страницы. Постоянно улучшайте используемый дизайн, чтобы сделать его простым в использовании. Используйте обратную связь от пользователей, чтобы внести необходимые изменения.

Пустое пространство предоставляет глазам пользователей место для отдыха. Оно также выделяет разделы, представленные на главной странице.

Негативное пространство также обеспечивает достаточное место между заголовками, подзаголовками и контентом.

Правильно скроенная главная страница сайт должна загружаться не более 3 секунд. Если загрузка занимает больше времени, высока вероятность того, что пользователи покинут ваш сайт.  Используйте адаптивные изображения. Это позволит ускорить загрузку сайта без ущерба для качества изображений. Есть несколько способов сделать изображения адаптивными.

Каждый элемент главной страницы должен иметь цель и соответствовать интересам вашей аудитории. Для этого изучите сайты конкурентов и отзывы о них пользователей.

При разработке главной страницы сайта нужно учитывать ее назначение и создать собственный уникальный стиль. Можно использовать контрастные цвета, чтобы выделить некоторые элементы.

Дизайн главной страницы сайта не должен следовать определенному набору правил.  Главные страницы сайтов в смежных областях могут иметь схожие элементы, но все они отличаются друг от друга.  Старайтесь сочетать стандартные элементы с оригинальными, чтобы обеспечить удобство использования вашего сайта.

Вадим Дворниковавтор-переводчик статьи «8 Website Homepage Design Rules You Should Never Break»

Пожалуйста, оставьте ваши комментарии по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, подписки, дизлайки, отклики, лайки!

9 Принципы хорошего веб-дизайна

Эффективный дизайн веб-сайта должен выполнять свою намеченную функцию, передавая свое конкретное сообщение и одновременно привлекая посетителя. Несколько факторов, таких как согласованность, цвета, типографика, изображения, простота и функциональность, способствуют хорошему дизайну веб-сайта.

При разработке веб-сайта существует множество ключевых факторов, влияющих на его восприятие. Хорошо разработанный веб-сайт может помочь завоевать доверие и побудить посетителей к действию. Чтобы создать отличный пользовательский опыт, необходимо убедиться, что дизайн вашего веб-сайта оптимизирован для удобства использования (форма и эстетика) и насколько прост в использовании (функциональность).

Ниже приведены некоторые рекомендации, которые помогут вам при рассмотрении вашего следующего веб-проекта.

1. НАЗНАЧЕНИЕ ВЕБ-САЙТА

Ваш веб-сайт должен соответствовать потребностям пользователя. Наличие простого четкого намерения на всех страницах поможет пользователю взаимодействовать с тем, что вы предлагаете. Какова цель вашего веб-сайта? Вы делитесь практической информацией, такой как «Как направлять»? Это развлекательный веб-сайт, такой как спортивное освещение, или вы продаете продукт пользователю? У веб-сайтов может быть много разных целей, но есть основные цели, общие для всех веб-сайтов;

1. Описание опыта
2. Создание репутации
3. Привлечение потенциальных клиентов
4. Продажи и послепродажное обслуживание

2. ПРОСТОТА

Простота — лучший способ рассмотреть пользовательский опыт и удобство использования вашего веб-сайта. Ниже приведены способы достижения простоты с помощью дизайна.

Цвет

Цвет способен передавать сообщения и вызывать эмоциональные реакции. Поиск цветовой палитры, которая подходит вашему бренду, позволит вам влиять на поведение ваших клиентов по отношению к вашему бренду. Ограничьте выбор цвета менее чем 5 цветами. Дополнительные цвета работают очень хорошо. Приятные цветовые сочетания повышают вовлеченность клиентов и заставляют пользователя чувствовать себя хорошо.

Типографика играет важную роль на вашем сайте. Он привлекает внимание и работает как визуальная интерпретация голоса бренда. Шрифты должны быть разборчивыми и использовать на веб-сайте не более 3 разных шрифтов.

Образы

Образы — это все визуальные аспекты, используемые в коммуникациях. Это включает в себя фотографии, иллюстрации, видео и все формы графики. Все изображения должны быть выразительными, отражать дух компании и служить воплощением индивидуальности бренда. Большая часть первоначальной информации, которую мы потребляем на веб-сайтах, является визуальной, и для первого впечатления важно, чтобы использовались высококачественные изображения, чтобы сформировать у посетителей впечатление о профессионализме и доверии.

3. НАВИГАЦИЯ

Навигация — это система навигации, используемая на веб-сайтах, где посетители взаимодействуют и находят то, что ищут. Навигация по сайту является ключом к удержанию посетителей. Если навигация по сайту сбивает с толку, посетители сдадутся и найдут то, что им нужно, в другом месте. Важно, чтобы навигация была простой, интуитивно понятной и единообразной на каждой странице.

4. F-ОБРАЗНОЕ ЧТЕНИЕ ШАБЛОНА

F-образный шаблон — наиболее распространенный способ, которым посетители просматривают текст на веб-сайте. Исследования с отслеживанием взгляда показали, что большая часть того, что люди видят, находится в верхней и левой частях экрана. Раскладка в форме буквы F имитирует нашу естественную схему чтения на Западе (слева направо и сверху вниз). Эффективно разработанный веб-сайт будет работать с естественной схемой просмотра страницы читателем.

5. ВИЗУАЛЬНАЯ ИЕРАРХИЯ

Визуальная иерархия – это расположение элементов в порядке их важности. Это делается либо по размеру, цвету, изображениям, контрасту, типографике, пробелам, текстуре и стилю. Одна из наиболее важных функций визуальной иерархии — установить фокус; это показывает посетителям, где находится самая важная информация.

6. СОДЕРЖАНИЕ

Эффективный веб-сайт сочетает в себе отличный дизайн и отличное содержание. Используя привлекательный язык, отличный контент может привлечь посетителей и повлиять на них, превратив их в клиентов.

7. МАКЕТ НА ОСНОВЕ СЕТКИ

Сетки помогают структурировать дизайн и упорядочивать содержимое. Сетка помогает выравнивать элементы на странице и содержать ее в чистоте. Макет на основе сетки упорядочивает контент в виде чистой жесткой сетки с колонками и разделами, которые выстраиваются в линию и выглядят сбалансированными и наводят порядок, что приводит к эстетически приятному веб-сайту.

8. ВРЕМЯ ЗАГРУЗКИ

Ожидание загрузки веб-сайта приведет к потере посетителей. Почти половина веб-посетителей ожидают, что сайт загрузится за 2 секунды или меньше, и они потенциально покинут сайт, который не загружается, в течение 3 секунд. Оптимизация размеров изображений поможет быстрее загрузить ваш сайт.

9.

ПОДДЕРЖКА МОБИЛЬНЫХ УСТРОЙСТВ

Все больше людей используют свои телефоны или другие устройства для просмотра веб-страниц. Важно рассмотреть возможность создания вашего веб-сайта с адаптивным макетом, чтобы ваш веб-сайт мог адаптироваться к различным экранам.

Наша команда вдохнет жизнь в ваш веб-сайт и расскажет вашу историю. Мы — «семейная» команда творческих практиков в области дизайна, маркетинга и технологий. Свяжитесь с нами, чтобы узнать больше.

Услуги веб-дизайна, ориентированные на результат

Убедитесь, что ваш следующий веб-сайт ориентирован на рост. Привлеките больше посетителей и увеличьте число конверсий

15 принципов веб-дизайна для создания удобного для клиентов веб-сайта

Представьте, что вы идете в розничный магазин в поисках новой рабочей одежды. Оглядываясь вокруг, вы замечаете пятна на полу, беспорядочные полки и странный запах. Вы бы остались в магазине и купили бы у продавца?

Дизайн магазина влияет на поведение покупателей — то же самое относится и к веб-сайтам.

Опрос 612 человек, проведенный Clutch, показал, что 83 % участников замечают, когда дизайн веб-сайта эстетичен и актуален. В качестве альтернативы, 50% участников навсегда покинут веб-сайт, если посчитают, что контент неактуален или не соответствует их потребностям.

Итак, как создать веб-сайт, который понравится клиентам?

Вот о чем эта статья. Мы покажем вам, почему хороший веб-дизайн так важен, и поделимся 15 принципами веб-дизайна, которые вы можете использовать для создания высококачественного веб-сайта.

Посмотрите наше видеоруководство по принципам веб-дизайна

Почему важен хороший веб-дизайн?

Средний веб-дизайнер зарабатывает 57 000 долларов США в год — примерно на 8 000 долларов США больше, чем младшие веб-разработчики, которые в среднем получают 44 000 долларов США в год. Дизайнеры получают достаточно хорошее вознаграждение по уважительной причине: их работа жизненно важна.

Когда новый потенциальный клиент посещает ваш веб-сайт, он производит первое впечатление, которое формирует его будущее взаимодействие с вашим брендом. Именно в этот момент у них складывается первое мнение о вас.

Ваш веб-сайт также отражает индивидуальность, видение и положение вашего бренда в отрасли. Если у вас есть близкие конкуренты с аналогичным продуктом, веб-сайт, который заставляет людей говорить «вау», сделает вас более запоминающимся и повысит узнаваемость вашего бренда по сравнению с конкурентами.

Кроме того, сильный веб-сайт может повысить эффективность поисковой оптимизации (SEO).

Поисковые системы учитывают реакцию людей на веб-сайты при ранжировании их в результатах поиска. Если у вас низкий показатель отказов и люди часто посещают несколько страниц вашего сайта, поисковые системы, скорее всего, будут ранжировать вас выше, чем конкурента с высоким показателем отказов.

Техническое SEO также важно здесь. Веб-сайты с хорошо продуманными заголовками, структурой страниц и ссылками более доступны. Таким образом, поисковые системы и клиенты предпочитают их. Давайте рассмотрим некоторые важные принципы веб-дизайна.

Создаете новый сайт? ✨ Сначала прочтите это… 👀Нажмите, чтобы твитнуть

15 Принципов эффективного веб-дизайна

Когда мы говорим о «принципах веб-дизайна», мы имеем в виду общие правила проектирования текстурных и визуальных элементов веб-сайта или веб-страницы. Каждый бренд использует принципы веб-дизайна по-своему — некоторые из них соответствуют лучшим практикам, а другие — нет.

Чтобы помочь вам создать отличный веб-сайт, вот 15 принципов веб-дизайна (плюс примеры веб-сайтов, которые эффективно их используют):

1. Навигация по страницам должна быть легкой

Неудивительно почему. Если пользователь поисковой системы заходит на ваш сайт в поисках информации о «мобильном дизайне» и не может ее найти, следующим естественным шагом будет нажать «Назад» и попробовать другой сайт.

Как вы относитесь к хорошо спланированной навигации? Черпайте вдохновение на веб-сайте The Cool Club.

Когда вы заходите на главную страницу Cool Club, макет веб-сайта предельно ясен. Вы можете перейти к ключевым разделам продукта (таким как «карточные игры» и «список желаний») с помощью кнопок слева, а на страницы «о нас» и «контакты» — с помощью кнопок справа.

The Cool Club

Навигация по страницам товаров The Cool Club также очень удобна. В настоящее время у бренда есть интерактивная колода карт с 54 крутыми вариациями и соответствующими страницами. Вы просто прокручиваете вниз и нажимаете на карточку, которую хотите увидеть больше.

Веб-сайт The Cool Club интерактивен.

Чтобы создать такой же эффективный веб-сайт, рассортируйте содержимое по четким категориям для верхних и нижних колонтитулов и дайте им описательные заголовки. Затем упорядочите свои страницы по темам, чтобы люди могли легко перемещаться между похожими темами.

Кроме того, сделайте верхний и нижний колонтитулы одинаковыми на всем веб-сайте.

2. Всегда используйте свободное пространство

Негативное пространство (или «белое пространство») — это область вокруг элементов страницы, будь то изображения, видео, текст или кнопки.

Многие энтузиасты-маркетологи спешат заполнить все свободное место на странице, надеясь, что предоставление посетителям дополнительной информации повысит их заинтересованность. Однако это часто приводит к перегруженности и запутанности страниц.

Вот тут-то и появляется негативное пространство. Использование негативного пространства подчеркивает наиболее важные элементы каждой страницы, поскольку отсутствие цвета привлекает внимание посетителей к более ярким областям.

Конечно, «использовать пустое пространство» не означает «создать скучный белый веб-сайт». Вместо этого вы можете использовать пространство, используя цвета вашего бренда, как это делает Garoa.

Garoa использует негативное пространство для создания атмосферы

Домашняя страница Garoa использует кремовую палитру для создания атмосферы, в то же время используя негативное пространство. В результате вы обращаете внимание на вводный контент в разделе «Осенний уход за кожей» в центре, а не на менее важные части.

Не забудьте использовать пустое пространство для демонстрации иерархии на вашем собственном веб-сайте.

3. Страницы должны быть последовательными, но привлекательными

Когда вы читаете названия таких брендов, как «Cadbury», «Hershey’s» или «Nike», вам сразу же приходят в голову их логотипы, шрифты и стили дизайна. В этом сила последовательного брендинга.

При разработке веб-сайта создавайте страницы с последовательными элементами, чтобы придать вашему бренду четкую визуальную индивидуальность. Это означает:

• Использование одинаковых шрифтов, стилей и цветов в заголовках
• Сохранение одинаковых промежутков между визуальными элементами между страницами
• Использование цветовых палитр вместо случайных цветов
• Настройка макета для длинного контента, такого как новости и сообщения в блогах
• Использование шаблона веб-сайта для всех страниц

Согласованные страницы не обязательно должны выглядеть абсолютно одинаково. Вместо этого вы можете сбалансировать согласованность и вовлеченность, смешивая элементы.

Например, вы можете использовать разные шрифты и цвета для заголовков h2, h3 и h4. Или вы можете изменить макет разных типов страниц, чтобы все смешать.

4. Используйте дополнительные цвета

Дополнительные цвета — это пары цветов, которые можно смешивать, не делая ваш дизайн громоздким и уродливым.

Способ отображения цветов на экране соответствует цветовой модели красного, зеленого и синего (RGB), а не модели голубого, пурпурного, желтого и черного (CMYK), используемой при печати. Художники также часто используют цветовую модель Red-Yellow-Blue (RYB), в которой дополнительными цветами считаются красно-зеленый, сине-оранжевый и желто-фиолетовый.

Независимо от того, какую модель вы предпочитаете, использование дополнительных цветов позволяет достичь той же цели, что и черный и белый. Дополнительные цвета обеспечивают акцент и создают четкую визуальную идентичность вашего бренда.

Вы можете увидеть это на веб-сайте Swab The World.

На снимке экрана ниже благотворительная организация по борьбе с раком крови использует зеленый и оттенки пурпурного. Эти цвета меняются на другие дополнительные цветовые комбинации, когда вы посещаете разные разделы веб-сайта (хотя все цвета имеют одинаковую насыщенность, поэтому брендинг остается неизменным).

Дополнительные цвета на веб-сайте Swab The World.

Дополнительные цвета — это простой принцип, который можно использовать в дизайне. Если вы хотите, чтобы все было просто, выберите два дополнительных цвета и добавьте их к контрастным элементам (например, к h3 и основному тексту). Или используйте несколько оттенков каждого цвета на каждой странице.

5. Дизайн с учетом вашей целевой аудитории

Если вы посмотрите на веб-сайты The Cool Kids, Garoa и Swab The World, вы заметите, что каждый веб-сайт имеет уникальное «ощущение». Это ощущение возникает из-за адаптации дизайна веб-сайта к аудитории.

Конечная цель здесь — персонализация. Большинству из нас нравится покупать товары и услуги у брендов, с которыми мы чувствуем себя связанными и представляемыми. На самом деле, исследования показывают, что 72 % потребителей ценят покупки у компаний, которые «соответствуют их убеждениям и ценностям». Таким образом, если кто-то посещает ваш веб-сайт и видит там отражение своих ценностей, целей и приоритетов, он с большей вероятностью купит у вас.

Чтобы персонализировать дизайн веб-сайта для вашей аудитории, рассмотрите:

• Какие изображения резонируют с вашим целевым рынком, особенно
• Какой тон подходит вашей аудитории (например, профессиональный, минималистичный, игривый и т. д.)
• Какие темы ваша целевая аудитория посещает ваш сайт, чтобы увидеть
• Как вы можете передать позиционирование своего бренда с помощью веб-дизайна
• На какие призывы к действию (CTA) реагирует ваша аудитория (и куда вы должны их поместить, чтобы оптимизировать рейтинг кликов (CTR))

Бонусные баллы, если вы можете использовать автоматизацию веб-сайта для предоставления личного опыта на основе профиля пользователя и предыдущих взаимодействий с вашим брендом.

Возможно, будет полезно черпать вдохновение у конкурентов или брендов, которые продают разные товары вашей целевой аудитории.

6. Шрифты должны быть удобочитаемыми и доступными

Шрифты, которые вы используете на своем веб-сайте, определяют, смогут ли ваши посетители прочитать то, что вы написали, или нет. Можно с уверенностью сказать, что они очень важны.

Первое, на что следует обратить внимание при выборе шрифта, — это веб-безопасность. Веб-шрифты поддерживаются операционными системами и веб-браузерами, поэтому они будут работать на большинстве устройств.

Также необходимо учитывать доступность. Доступные шрифты должны быть четкими и легко читаемыми в больших и малых размерах. Например, курсивные шрифты не очень доступны, в то время как Times New Roman довольно доступен.

Кроме того, при выборе шрифта следите за трендами шрифтов на других веб-сайтах. В 2021 году специалист по данным Майкл Ли проанализировал шрифты на более чем 1000 веб-сайтов.

Он обнаружил следующие тенденции:

• 85% шрифтов не используют засечки (небольшие добавленные линии к буквам в газетном шрифте)
• В пятерку лучших шрифтов входят Sans Serif, Arial, Helvetica, Helvetica Neue и Roboto
• Заголовки h2 с вероятностью 58 % не содержат засечек (по сравнению с 93 % для текста абзаца)
• Два наиболее распространенных размера шрифта абзаца: 14 пикселей и 16 пикселей

Вы можете принять во внимание эту информацию, чтобы выбрать стиль шрифта, соответствующий тому, что люди ищут на веб-сайтах. Или вы можете сделать что-то другое.

Virgin — бренд, выбравший второй вариант. На скриншоте ниже Virgin использовала как минимум пять шрифтов. Эти шрифты разделяют разделы страницы и делают их привлекательными.

Virgin использует четкие, удобочитаемые и привлекательные шрифты

7. Следуйте закону Фитта и закону Хика

Психолог Пол Фиттс впервые разработал закон Фитта в 1954 году, но он по-прежнему актуален в веб-дизайне и в 2022 году. Закон Фитта утверждает, что размер цели влияет на то, сколько времени потребуется человеку, чтобы ее достичь.

В контексте веб-дизайна или взаимодействия с пользователем (UX) это означает, что людям потребуется меньше времени, чтобы нажимать кнопки большего размера, или больше времени, чтобы нажимать кнопки меньшего размера. Таким образом, чтобы использовать закон Фиттса, вы должны сделать кнопки CTA очень большими и заметными, чтобы на них было легче нажимать.

«Легко» здесь имеет решающее значение. Закон Хика, разработанный британским психологом Уильямом Эдмундом Хиком и американским психологом Рэем Хайманом, гласит, что люди устают каждый раз, когда принимают какое-то решение.

Таким образом, чем больше решений вы попросите посетителя веб-сайта принять, тем больше шансов, что он будет слишком утомлен, чтобы выполнить его.

8. Используйте инвариантность для выделения ключевой информации

Когда что-то является «инвариантным», оно выделяется как уникальный вариант среди нескольких очень похожих вариантов. Самый очевидный пример неизменности — это выделение в планах на страницах с ценами, подобных этому в Box.

Инвариантность на странице цен Box

Но это не единственный способ использовать инвариантность. Неизменность может помочь вам установить визуальную иерархию на ваших страницах, чтобы выделить ключевую информацию и привлечь людей к важным частям вашей страницы.

Например, посмотрите, как Музей Франса Хальса использовал инвариантность для создания визуальной иерархии на своей домашней странице:

Музей Франса Хальса использует визуальную иерархию

Иерархия на этом изображении следующая: знак «Добро пожаловать», изображения, знак «Купить билеты», знак «Все выставки», затем остальное содержимое.

Чтобы использовать неизменность для создания собственной иерархии, расположите элементы страницы в порядке важности. Затем настройте размер, цвет и расположение каждого элемента, пока глаза посетителей не перейдут к каждому элементу в нужном вам порядке.

9.

В CTA: используйте понятный язык, на который люди захотят нажимать

Мы уже говорили о том, как важно делать кнопки большими и удобными для нажатия, но размер — не единственное, что следует учитывать при создании кнопок.

Кнопки, на которые можно нажать, являются описательными и убедительными одновременно. Они вызывают у посетителя любопытство к тому, на что ссылается кнопка, и дают им повод пойти туда.

Один из способов сделать это — использовать подробный текст кнопки, например «нажмите здесь, чтобы прочитать наш блог», «узнайте здесь наши маркетинговые секреты» или «вот наш отчет за 2022 год». Другой способ — сделать ваши кнопки визуально захватывающими или уникальными.

Защитник тропических лесов использовал оба подхода. Rainforest Protector позволяет вам перемещаться по тропическим лесам Амазонки, посещая разные места. Кнопка каждой локации содержит изображение и действие, например «посетить деревню».

10. Используйте шаблон F или шаблон Z

Более 13 лет исследователи из Nielsen Norman Group (NN Group) использовали айтрекинг, чтобы увидеть, как более 500 людей взаимодействуют с контентом. Это привело их к разработке шаблона F, который гласит, что первое, что люди делают, — это просматривают страницу вниз, а затем читают строки слева направо. Например:

F-шаблон, которому люди следуют на веб-сайтах

Вы можете использовать F-шаблон на своем веб-сайте, структурируя свой контент вокруг него или альтернативной модели.

Facebook широко использует Z-образный шаблон на своей домашней странице. Когда вы посещаете страницу, ваш взгляд останавливается на логотипе «Facebook», затем на кнопке «Войти», затем на изображении слева и, наконец, на кнопке «Создать учетную запись».

Домашняя страница Facebook Z-шаблон

11. Хорошие веб-сайты быстрые и удобные для мобильных устройств

По состоянию на четвертый квартал 2021 года 54,4 % трафика веб-сайтов во всем мире приходилось на мобильные устройства. Таким образом, если ваш сайт не оптимизирован для мобильных устройств, вы можете сократить трафик вдвое.

Скорость также влияет на органический трафик сайта. Исследования Google показывают, что 53% людей покидают веб-сайт, если он загружается более трех секунд.

Самый простой способ сделать свой веб-сайт удобным для мобильных устройств или быстрым — выбрать быструю тему веб-сайта, созданную опытными дизайнерами. Или, если вы хотите больше участвовать в дизайне своего веб-сайта, вы можете создать адаптивный веб-сайт на заказ.

Именно так поступили дизайнеры фильма 1917  . Веб-сайт 1917 предлагает захватывающий опыт, чтобы привлечь внимание людей к фильму. Он специально разработан для мобильных устройств, так как вы можете использовать свой палец, чтобы перемещаться в окопах Первой мировой войны.

Веб-сайт 917 разработан для мобильных устройств.

Если вы наблюдательны, то заметите, что веб-сайт 1917 также использует шаблон F.

12. Разбивайте текст на небольшие фрагменты

Подумайте вот о чем: вы ищете «интеллектуальные игры» и находите веб-страницу, которая кажется многообещающей. Однако, когда вы нажимаете на нее, вы перегружены большими кусками текста, которые трудно читать.

Как и многие люди, вы можете покинуть веб-сайт (независимо от того, насколько многообещающим является его содержание!).

Исследование слежения за взглядом, проведенное Университетом науки и технологий штата Миссури, показывает, что посетители веб-сайта тратят на чтение текста в среднем 5,59 секунды. Так что, если люди не смогут прочитать ваш текст в этот промежуток времени, маловероятно, что вы заинтересуете их должным образом.

Устраните эту проблему, разделив текст на небольшие фрагменты. Дополнительно:

• Используйте короткие предложения
• Держитесь подальше от разговорных выражений
• Дайте определения для любых отраслевых слов, которые вы используете
• Избегайте «фиолетовой прозы» (ненужных метафор, наречий и прилагательных)

13. Используйте сетки

Когда мы говорим «использовать сетки», мы не имеем в виду, что вы должны сделать свой веб-сайт похожим на таблицу Excel. Вместо этого разделите свой веб-сайт на отдельные разделы, которые служат определенной цели, чтобы посетители могли быстро находить контент.

Для этого не нужно использовать линии сетки. Вместо этого создайте различия между пространствами сетки с помощью цвета, негативного пространства и затенения, как это сделал Атласон. На домашней странице Atlason представлены новые и самые продаваемые продукты в сетках. Поскольку посетители, скорее всего, ищут эти продукты, сетки помогают им найти их за считанные секунды.

Atlason использует сетку для каждого продукта.

Один из самых простых способов использования сеток на вашем веб-сайте — выбрать тему WordPress, в которой они используются. Примеры включают Gridframe, Masonry Grid и Shuttle Grid.

14. Помните о балансе

В контексте веб-дизайна «баланс» относится к тому, как элементы дизайна расположены по отношению друг к другу и отражают ли элементы гармонию. Есть много способов создать баланс на вашем веб-сайте, включая некоторые из следующих принципов веб-дизайна:

• За счет симметрии (включая двустороннюю, радиальную или трансляционную симметрию)
• Использование дополнительных или контрастных цветов
• Использование элементов сходных форм и размеров
• Использование повторяющихся шаблонов

Вы можете увидеть баланс в действии на сайте Woven. На этом веб-сайте используется сбалансированная цветовая палитра: черный и белый цвета для создания контраста в тексте и симметрия для привлечения внимания посетителей к содержимому.

Веб-сайт Woven использует симметрию, чтобы привлечь внимание

15. Обращайте внимание на детали

Теория гештальта гласит, что люди воспринимают что-то как единое целое, прежде чем смотреть на отдельные элементы. Или, как сказал Курт Коффка: «Целое существует независимо от частей». Хотя люди обычно ссылаются на теорию гештальта в психологии, она применима и к веб-дизайну.

Обратите внимание на мелкие детали на своем веб-сайте, чтобы ваш дизайн выглядел безупречным и законченным. При разработке чего-либо легко сосредоточиться на важных элементах, таких как заголовки, изображения и CTA, и забыть о других вещах, таких как:

• Значки нижнего колонтитула и заголовка
• Кнопки социальных сетей
• Насколько эффективно вы преобразовали свой веб-сайт в WordPress (если применимо)
• Расстояние между текстом
• Опечатки и грамматические ошибки
• Совместимость с браузером
• Размер изображения

Дважды проверьте эти элементы, прежде чем нажать «Опубликовать», и убедитесь, что ваш веб-сайт демонстрирует профессионализм. Вы можете не заметить мелкие недостатки, но посетители — нет.

Кроме того, будьте в курсе новых тенденций и концепций в принципах веб-дизайна. Добавьте их на свой веб-сайт, чтобы он выглядел новым, свежим и привлекательным.

Когда дело доходит до веб-дизайна, то ничего не получится 😅 Ознакомьтесь с этими рекомендациями, чтобы убедиться, что ваш новый сайт удобен для клиентов 💪Нажмите, чтобы твитнуть

Резюме

Хорошо спроектированный розничный магазин повышает качество обслуживания клиентов, в то время как плохой магазин может навсегда оттолкнуть покупателей от вашего бренда. То же самое и с веб-дизайном.

Создание визуально привлекательного веб-сайта — это больше, чем просто забавный проект. Это может помочь вам:

• Продемонстрировать профессионализм
• Завоюйте доверие посетителей
• Выделитесь среди конкурентов
• Привлечение органического трафика из поисковых систем

Используйте принципы веб-дизайна, изложенные в этой статье, для создания веб-сайта, который заставит посетителей сказать «вау».