Принципы красивого веб дизайна

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

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

Ключевые особенности поведения интернет-пользователей:

– Они ценят качественный и полезный контент. Вот почему сайты с устаревшим дизайном, но ценным содержанием, не теряют поклонников.

– Они не читают, а сканируют. Пользователь цепляется за несколько «якорей», по которым и составляет свое мнение о материале. Взгляд при этом двигается слева направо и сверху вниз – по F-схеме:

– Они нетерпеливы и хотят немедленного результата.

– Они не стремятся к оптимальному выбору. Скорее остановятся на первом разумном варианте.

– Они любят интуитивно понятные вещи. Поэтому наглядное изображение часто лучше текста.

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

Принцип первый: не заставляйте пользователей думать

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

Пример от компании Beyondis:

Контрастные цвета, крупные заголовки, ничего лишнего. Но как насчет ясности?

Напомним – пользователь сканирует страницу по F-схеме. И, судя по всему, создатели сайта это знали. Но что в итоге видит пользователь? Верхнее меню со стандартными пунктами – Главная, О нас, Решения, Продукты и так далее. И крупный заголовок: «Вне каналов. Вне продуктов. Вне распространения». Игра слов, конечно, впечатляет. Но что бы это могло значить?

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

Принцип второй: не испытывайте терпение пользователей

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

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

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

Принцип третий: фокусируйте внимание пользователя на важных для вас вещах

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

Впрочем, прибегать к этой «тяжелой артиллерии» не обязательно. Пример сайта Humanized: слово «Бесплатно» сразу бросается в глаза, при этом страница сделана в спокойном, информативном стиле.

Принцип четвертый : сразу показывайте, какие функции доступны пользователю

Современный веб-дизайн часто критикуют за директивность: пользователя буквально ведут за руку – сделайте шаг 1, шаг 2, шаг 3. Структурированные списки, крупные кнопки СТА. С точки зрения юзабилити все это очень эффективно. Это облегчает пользователю процесс взаимодействия с сайтом. Он сразу понимает, какие действия ему доступны и как ему достичь цели.

В качестве примера можно привести страницу личного кабинета в Ягле. На одном экране пользователю предлагается сразу три возможности:

Принцип пятый: используйте сильные тексты

Мало кто будет читать с экрана «простыню» сплошного текста – без подзаголовков, иллюстраций, маркированных списков.

И говорить стоит только по делу. Если текст ориентирован на клиентов – избегайте заумных слов, жаргонизмов, маркетинговых терминов. Больше конкретики. К примеру, надпись «Зарегистрироваться» куда более эффективна, чем расплывчатое «начните прямо сейчас!»

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

Пример от Eleven 2: «У нас есть планы от 6 долларов в месяц». Сразу к делу, без лишних слов.

Принцип шестой: стремитесь к простоте

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

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

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

Принцип седьмой: не бойтесь пустого пространства

Его не надо бояться – его надо использовать. «Воздух» на странице уменьшает информационную нагрузку и фокусирует внимание на важных элементах. А также эффективно разделяет информацию на смысловые блоки.

Принцип восьмой: используйте визуализацию по максимуму

Три правила эффективной визуальной коммуникации:

• Структурированность. Четкая, последовательная подача информации;
• Экономичность. Минимум текста и визуальных элементов для решения задачи. Простота, ясность, однозначность всех элементов;
• Простота восприятия. Разборчивость, читабельность, наглядность. Используйте на странице не более чем три вида шрифтов и не более чем трех размеров. Оптимальная длина строки – 50-80 символов.

Принцип девятый: шаблоны – наши друзья.

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

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

Принцип десятый: тестируйте раньше, тестируйте чаще

Лучше протестировать сайт хотя бы на одном пользователе, чем не тестировать вообще. И лучше тестировать на одном пользователе, но в самом начале разработки, чем на 50, но ближе к концу. Потому что чем позже всплывут недостатки, тем дороже будет их устранить;

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

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

Программисты знают – бесполезно давать программный код на проверку самому автору. То же самое и с веб-дизайном. Обязательно нужен свежий взгляд.

Вместо заключения

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

Источник

Как сделать дизайн сайта? 8 базовых принципов

1. Совместите визуальную привлекательность с бизнес-целью

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

Возьмем следующие примеры:

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

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

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

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

Как разработать сайт, чтобы этого избежать?

Ответ сведем к следующим шагам:

• Запишите цель вашего сайта. Это может быть генерация потенциальных клиентов, увеличение продаж или более высокая вовлеченность.
• Запишите нишу вашего сайта. Например, товары для спорта, мода и красота, здоровье, домашние животные или продукты для электронной коммерции.
• Выберите цвета вашего логотипа, фона, кнопок, баннера и текста соответственно. Для логотипа, баннера и фона сайтов про моду и красоту наиболее эффективны мягкие цвета: светло-голубые или розовые.
• Для еды и напитков наиболее подходящими являются красный и желтый (McDonald’s и Hungry Jacks — отличные примеры).
• И последнее, но не менее важное: разместите на своем веб-сайте информацию о вашей бизнес-цели.

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

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

А. Визуальная иерархия

Этот закон гласит, что чем больше размер объекта на веб-сайте, тем важнее он воспринимается и, следовательно, чем больше внимания он привлекает. И наоборот.

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

Instagram у себя отлично реализовал этот закон.

Первое, что привлекает внимание, это фирменный знак «Instagram» в черном и стильном шрифте на простом белом фоне. Это также говорит о том, что это бренд о творчестве.

Следующий элемент для привлечения внимания это большая картинка на iPhone слева. Благодаря своим размерам и зеленому цвету, она не только привлекает внимание, но и успокаивает.

Следующий элемент, который привлечет внимание — это синяя кнопка с надписью «Войти через Facebook». Они могли бы легко вставить туда кнопку «Зарегистрироваться», но не сделали этого.

Это потому, что вам не нужно заполнять форму и напрямую входить в систему, используя свои учетные данные Facebook. И это помогает.

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

B. Золотое сечение

Золотое сечение — это метод дизайна, созданный в древние времена и до сих пор используемый современными дизайнерами! Этот принцип проверен временем и является надежным правилом для подражания.

Используя некоторую сложную математику, в которую вдаваться не будем, мы получим следующее изображение золотого сечения:

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

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

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

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

C. Правило третей

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

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

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

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

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

D. Закон подобия

Даже если вы никогда не слышали этого термина, это принцип, о котором ваше подсознание хорошо осведомлено, так как наш мозг настроен на группировку похожих объектов. Вот как разработчик программного обеспечения Slack реализовал этот закон:

Три бренда Slack выделены красными горизонтальными линиями. Все они были помещены вместе в прямоугольник и равномерно распределены.

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

2. Сделайте так, чтобы сайт загружался быстрее

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

Если быть точным, ваш контент «выше сгиба» (до прокрутки) должен загружаться в течение 3 секунд (максимум) при нажатии или вводе в браузере.

• Если загрузка вашего веб-сайта занимает на 100 миллисекунд дольше, чем обычно, коэффициент конверсии может снизиться на 7%.
• На страницах со временем загрузки 5 сек. коэффициент отказов примерно в пять раз выше, чем на страницах с временем загрузки 2 сек.
• 73% мобильных пользователей сталкиваются с веб-сайтами, которые загружаются слишком долго.

HostingTribunal, компания, которая специализируется на оценке сетевого хостинга, сообщила, что для интернет-магазина, приносящего 100 000 долларов ежедневного дохода, задержка в 1 секунду может потенциально привести к 2,5 миллионам долларов в год пропущенного дохода.

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

3. Сделайте так, чтобы ваш сайт было легко найти

Ваш сайт должен быть легко доступен с помощью Google (или любой другой поисковой системы).

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

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

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

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

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

Социальные сети могут включать в себя страницы в Facebook, Twitter, LinkedIn и Instagram, так как число пользователей социальных сетей достигло 3,5 миллиарда к 2019 году.

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

4. Соблюдение формальных правил, правил конфиденциальности и Cyber Security

Готовьтесь к довольно пугающим новостям . согласно недавнему открытию Cybint:

• В среднем хакерские атаки происходит каждые 39 секунд.
• Малые предприятия испытывают примерно 43% всех кибератак.
• Компании заплатят сумму, превышающую 2 триллиона долларов из-за киберпреступности в 2019 году.
• С 2013 года около 4 миллионов записей были украдены из-за ежедневной утечки данных.

Чтобы защитить данные вашего бизнеса и клиентов от таких атак, правительства по всему миру внедрили официальные правила и положения. Среди них — GDPR (Общее положение о защите данных), касающееся защиты данных и конфиденциальности для всех лиц.

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

Если вам интересно, соответствует ли ваш текущий сайт требованиям GDPR, вы можете легко проверить его. В конце концов, лучше быть осторожным, чем потом сожалеть!

Популярный и доступный способ обезопасить себя — это инвестировать в SSL-сертификат. SSL означает Secure Sockets Layer и является эквивалентом личной защиты для любых сетевых соединений между браузерами и сервером, на котором размещен ваш сайт.

Они хотят то, что у вас есть. Не давайте им это и не позволяйте им это брать!

4. Добавьте социальные доказательства или отзывы

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

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

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

5. Обеспечьте доступность

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

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

Примерно 1 из 7 человек в мире страдает от мигрени.

Это составляет около 1,03 миллиарда человек, а около 80% страдающих мигренью страдают от фотофобии!

Это 80% людей, которых ваш сайт может оттолкнуть с первого взгляда. Таким образом, хотя яркие элементы могут направлять внимание людей, не страдающих от этого состояния, они могут быть очень болезненным для тех, кто страдает!

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

6. Сделайте фокус на удобстве использования

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

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

Вот некоторые факторы обзора юзабилити:

• Как сайт реагирует на клики пользователей?
• Различима ли ваша основная информация?
• Является ли навигация интуитивно понятной?
• Содержит ли макет только один элемент в фокусе пользователя?
• Есть ли опция «живого чата»?
• Постоянно ли видна панель поиска?
• Есть ли на нем другие валюты? (для электронной коммерции)
• Являются ли цвета естественными для глаз?
• Является ли содержание явным и простым для понимания?
• Хорошо ли используется пустое пространство?
• Есть ли у него актуальные и качественные картинки?

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

7. Убедитесь, что ваш сайт масштабируемый

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

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

Ваша клиентская база сошла бы с ума (и это преуменьшение)! Многие из клиентов могут сообщить о вашем магазине как о мошеннике и перейти к конкурентам. Не говоря уже о негативных отзывах, которые теперь останутся на вашем сайте и в социальных сетях!

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

8. Обеспечьте простоту обслуживания

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

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

Если вы используете систему управления контентом (CMS), такую как WordPress или Joomla, то это изменение не проблема. Все, что вам нужно сделать, это войти в свою CMS и отредактировать свой сайт так, как считаете нужным.

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

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

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

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

Источник