Веб-дизайн – это очень сложная вещь.
У людей есть разные мнения по поводу того, что является хорошим веб-дизайном, а что – плохим.
Некоторым кажется, что ваш сайт должен быть очень быстрым и обладать современным дизайном, чтобы привлечь внимание. Другие верят. что веб-дизайн не обязательно значит так много и что вам просто нужен сайт, который работает и позволяет людям делать то, что хотят, как, например, Craigslist.
Оба ответа правильны, в зависимости от того, о какой индустрии или типе бизнеса вы говорите. Но как понять, что нужно именно вам? И как убедиться, что вы не совершите ошибок?
Этот пост рассказывает о семи смертных грехах дизайна, которые вам не стоит совершать на своем ресурсе. Хорошая новость – это все простые постулаты, которым должен следовать каждый вебсайт. Так что независимо от того, современный у вас дизайн или нет, вам все равно нужно знать эти принципы дизайна и то, как их применить на вашем сайте.
Также вы можете использовать эти принципы, чтобы удостоверитьсЯ, что ваш веб-дизайнер знает, что делает. То, что кто-то является хорошим дизайнером, еще не значит, что этот кто-то является хорошим веб-дизайнером. И только потому, что кто-то создает сайты, еще не значит, что этот кто-то сделает хорошо конвертируемый веб-сайт. Обратите внимание на принципы, обозначенные в этом посте, и используйте их как необходимо, чтобы убедиться, что ваш дизайнер разработает сайт, который оптимизирован под необходимые вам результаты.
Ошибка #1: Слишком маленькие шрифты
Типичная ошибка новичка – создать сайт с очень маленькими шрифтами.
Основная причина этого в том, что раньше большинство сайтов имело маленькие шрифты. Стандартными были шрифты в примерно 12 px, и почти все следовали этому стандарту.
Но со временем люди стали понимать, что кегль в 12 px становится тяжело читать. Когда экран находится на расстоянии 50 см от глаз, мелкие шрифты становится очень трудно воспринимать.
Также люди начали понимать, что у вас есть только ограниченное количество времени, что завлечь посетителей и дать им понять, что они попали по адресу. Одно исследование показало. что средняя продолжительность концентрации внимания в 2013 году составляла 8 секунд, на одну секунду меньше, чем таковая у золотой рыбки. Это же исследование показало, что люди читают только 28% слов на веб-сЧтранице.
Чтобы получить внимание посетителя сразу, вам нужно сделать следующее:
1. Создать хорошие заголовки, которые бы привлекли читателя.
2. Написать интересный контент, который хотелось бы читать больше, чем на 28% написанного.
3. Использовать привлекающие внимание шрифты заголовков с большим размером.
4. Убедиться, что основной текст имеет шрифты достаточно большие, чтобы посетители не уставали от чтения.
По вышеназванным причинам, размеры шрифтов увеличивались в течении последних нескольких лет до такой степени, что размер 14 px стал считаться самым минимальным, и многие сайты используют 18 px как минимальный, особенно если те содержат много текста.
Суть в том, чтобы помнить, что даже если текст хороший, его не обязательно прочтут. Когда вы платите писателю хорошие деньги или скрупулезно пишите контент лично, вы хотите, чтобы его прочли и он не был скрыт за мелким шрифтом, затрудняющим чтение.
Также нужно помнить, что не свсе шрифты имеют одинаковый размер. 16 px Arial может быть меньше, чем 16 px версия другого шрифта. Всегда помните об этом, выбирая размер шрифта, поэтому не стоит просто выбирать 19 px только потому, что другой сайт так сделал, ведь у него может быть другой шрифт.
Помните, что шрифты в футере моут быть поменьше, как и шрифт дополнительного текста, но если вы хотите, чтобы что-то написанное вами прочли, используйте 16 px как минимум.
Ошибка #2: Слайдеры
Я до сих пор не понимаю, почему столько сайтов используют слайдеры.
Эффективны ли они? Улучшают конвертирование на сайте? Являются ли лучшим способом донести информацию до пользователя?
В большинстве случаев, нет.
Peep Laja написал статью для ConversionXL, в которой он цитировал Криса Говарда и Тима Эша: “Мы много раз тестировали слайдеры и убедились, что это плохой способ презентовать контент домашней страницы”; “Слайдеры являются абсолютным злом и должны быть немедленно уничтожены”.
Laja также упомянул два исследования, в котором доказано, что слайдеры не являются эффективными.
Первым было исследования гуру юзабилити Джейкоба Нильсена. Он спросил посетителя, предлагает ли Siemens какие-то особые сделки на стиральные машины на сайте. На самом деле, те писали 98 шрифтом, что покупатели могли гарантированно получить денежные бонус за покупку бытовой техники. К сожалению, пользователь не обратил внимание на акцию, так как та была скрыта движущимся слайдером и в итоге не была замечена вовсе.
Это рождает теорию в рядах экспертов по конверсии, согласно которой слайдеры отвлекают от контента также, как и обычная реклама. Люди привыкли к глупой рекламе по краям страницы, поэтому игнорируют ее. Этот принцип, по всей видимости, применяется и к слайдерам.
Второе исследование было проведено в университете Нотр-Дама. Было обнаружено, что только 1% посетителей кликал на слайдер, а 84% кликов было по первому слайду в ротации.
Зачем вообще держать слайдер на сайте, если только 1% людей кликают по нему, когда он занимает большинство полезного места на вашей странице, особенно когда 84% все равно переходит по ссылке с первого слайда? Зачем раздражать людей анимацией, которую не очень просто прочитать? Почему бы просто не дать им возможность выбора, если все равно кликают на самое первое изображение?
Итак, почему так много людей использует слайдеры, несмотря на то, что они так неэффективны?
Лучшая версия, к которой я могу прийти – это выглядит как очень крутая и современная фича на сайте, которую легко внедрить. Основываясь на этих двух факторах, бизнесмены говорят, “Эй, я тоже хочу себе такую штуку”, и веб-дизайнеры повинуются, потому что это выглядит “круто” и это не так сложно сделать.
Но владельцы сайтов должны сами решать, хотят они быть эффективными и стоит ли послушать экспертов в этом плане.
Чтобы решить эту проблему, спросите себя, как лучше преподнести информацию, вместо копирования чужого дизайна с их здоровским слайдером на главной странице.
Я использовал такой подход, когда несколько лет назад сайт моему другу, владельцу Genesis Tutoring.
Он и его бизнес-партнер связались со мной и сказали, “Мы хотим создать сайт, и нам нужен слайдер, содержащий вот эту информацию”, и затем показали мне буклет, которые они раздавали в школах, чтобы рекламировать свои услуги. Буклет был очень красивым, хорошо преподносил информацию, и, конечно, в нем не было слайдера.
Так что я предложил, “Почему бы тебе просто не дублировать брошюру, которая уже работает, на свою главную страничку, и просто не добавить возможность контакта с телефоном и электронной почтой.” Мы попробовали, и у нас получилось. Сайт выглядел превосходно, в нем не было чертового слайдера, и он имел высокую конвертацию. Чем не пример?
Когда дело доходит до создания своего сайта, следуйте этим инструкциям, чтобы прийти к таким же результатам:
1. Никогда не добавляйте слайдер просто потому, что все так делают (даже если ваш дизайнер вам его настойчиво рекомендует).
2. Постарайтесь придумать, как вам лучше презентовать вашу информацию на вашей странице, вместо слепой копирки у конкурентов.
3. Выберите одно важное предложение, которое вы будете пиарить в основном блоке главной страницы, и только одно. Всегда будут другие вещи, которые вы захотите продвигать, но они могут быть пониже на главной или на другой странице. Выберите одну сделку, сделайте ее основной, и дайте сайту работать дальше.
4. И чтобы совсем закрепить предыдущий пункт: подумайте о главной цели вашего сайта. Сфокусируйтесь на ней и делайте необходимое для ее поддержания.
Ошибка #3: Плохо контрастирующие шрифты
Еще одна большая ошибка – использование плохо контрастирующих шрифтов.
Низкий контраст – значит светлый шрифт на светлом фоне или темный шрифт на темном фоне. Я не уверен, хорошо или это выглядит на бумаге, но в сети это всегда выглядит плохо.
Всегда старайтесь, чтобы контент можно было легко прочесть. Статья из Smashing Magazine говорит, что в 40 лет в глаза проходит только половина света по сравнению с 20 годами. К 60 годам это количество уменьшается на 20%.
Учитывая эти данные, подумайте, действительно ли вы хотите усложнить жизнь ваших читателей, особенно после того, сколько труда вы вложили, чтобы привлечь их?
Эту проблему можно решить, всегда используя высококонтрастные шрифты. Если фон темный, шрифт должен быть светлым, а если фон светлый, шрифт должен быть темным.
Редко случается, чтобы вам нужно было использовать иные цвета для шрифтов, помимо черного или белого. Иногда дизайнеры выбирают светло-серый шрифт на белом фоне или светло-голубой шрифт на темно-синем фоне.
Почему? Действительно ли такой текст легче прочесть, или это все для эстетического удовольствия? Книги используют черный шрифт на белом фоне не просто так – так легче читать. Веб-сайтам тожен стоит следовать их примеру.
Запомните, что шрифты всегда должны хорошо контрастировать с фоном за ними. Если вам кажется, что текст тяжело прочесть, и вы чувствуете, что ему необходимо больше контраста, дайте знать вашему дизайнеру об этом. Ваш сайт не дизайн-выставка. Это место, где вы зарабатываете и увеличиваете популярность.
Высокий контраст важен, но вы не должны часто использовать инвертированные цвета – например, белый по черному вместо черного по белому.
Вообще, Дэвид Огилви, один из величайших специалистов интернет-рекламы, говорил, что рекламу никогда нельзя пускать в инвертированных цветах. Колин Вилдон, редактор крупнейшего австралийского автомобильного издания, проверил эту теорию. Результаты были поражающими.
Согласно исследованию приведены уровни распознавания для разных цветов шрифтов и фонов:
-Черный текст на белом фоне: 70% хорошо, 19% сносно, 11% плохо
-Белый текст на черном фоне: 0% хорошо, 12% сносно, 88% плохо
-Белый текст на фиолетовом фоне: 2% хорошо, 16% сносно, 82% плохо
-Белый текст на синем фоне: 0% хорошо, 4% сносно, 96% плохо
Разве это не удивительно? Результаты с черным текстом на белом фоне по сравнению с белым текстом на цветном фоне являются почти противоположными!
Приведенные выводы:
-Всегда используйте хорошо контрастирующие шрифты, но также…
-Не увлекайтесь инвертированными цветами.
Иногда инвертированные цвета выглядят хорошо, но они могут оказать сильное негативное влияние на глаза читателя. Поэтому используйте их только для тех частей сайта, которые не требуют особо интенсивного чтения и не являются очень важными. В итоге, подумайте дважды, перед тем как использовать инвертированные цвета.
Ошибка #4: Плохой межстрочный интервал
Межстрочный интервал текста это то, чем часто пренебрегают. Множество веб-дизайнеров и разработчиков выбирают шрифт, размер, случайно указывают высоту строки и считают, что дело сделано.
Высота строки имеет неожиданно большое значение на общий дизайн сайта и его внешний вид. Неправильно выбранный межстрочный интервал может сделать текст очень сжатым. Он может полностью разрушить ваш дизайн.
Но у талантливого веб-дизайнера всегда наметан на такое глаз, и он подберет для вас хороший интервал. Плохое в том, что у среднестатистического веб-девелопера глаз не наметан и он часто выберет неправильный интервал.
Важно помнить, что такое золотое соотношение. Это пропорция, которая общепринято приятна на вид. Вы можете этого не понимать, но есть причина, по которой некоторые дизайна и комбинации шрифтов выглядят лучше других. Великие дизайнеры знают, как достигнуть золотого соотношения, но вы можете использовать инструменты онлайн для его нахождения – например, калькулятор Стива Пирсона (http://www.pearsonified.com/typography/).
Ошибка #5: Слишком большая длина строки
Еще одна ошибка состоит в том, что строки на вашем сайте могут быть чрезмерно длинными.
Так какова же оптимальная длина строки?
Институт Бэймарда опубликовал статью, которая говорит, что строки от 50 до 60 символов являются оптимальными, а приемлемыми считаются строки до 75 символов.
Причина того, что длина строки столь важна, в том, что длинные строки текста могут отпугнуть посетителя. Если длина строки слишком велика, некоторые люди не будут читать текст, так как он не выглядит очень приятным на вид.
С другой стороны, если длина строки слишком коротка, читатели будут начинать слишком часто перескакивать со строки на строку, что быстро надоедает.
Эта проблема усугублена популярностью отзывчивого дизайна. Если вы не поставите максимальную ширину для контента, вы не сможете понять, какая у пользователя будет длина строки из-за разницы в размерах экранов.
На время написания статьи институт Бэймарда разрешил эту проблему тем, что установил максимальную длину в 516 пикселей, что привело к средней длине в 65 символов в строке с шрифтом размера 18 px. Это создает очень приятный для чтения текст.
Опять же, это деталь дизайна, на которую не все дизайнеры обращают внимание, но теперь, когда вы знаете, что длинные строки текста неудобны для чтения, вы можете направить своих дизайнеров и девелоперов, чтобы убедиться, что они обеспечат максимальный комфорт пользователей.
Ошибка #6: Не акцентировать цвета на действиях
Следующий ошибкой является то, что многие забывают акцентировать цвет. Вот, что я имею ввиду:
Умные интернет-маркетологи знают, что вам нужно правильно акцентировать цвет, чтобы привлечь внимания к разнообразным призывам к действию. Если вы просите кого-то “Купить сейчас” или “Начать бесплатный пробный период”, вам нужно убедиться, что вы используете правильный цвет кнопки, который привлечет внимание человека, чтобы тот кликнул и совершил действие.
Это кажется достаточно простым, но я много раз видел, как дизайнеры неправильно акцентировали цвет для очень важных призывов к действию. Вместо этог они выбирали цвет, который уже используется на сайте для чего-то еще. Это не очень хорошая идея.
Вот простые правила для акцентирования цветов:
1. Цвет должен быть достаточно ярким, чтобы привлечь внимание.
2. Он должен хорошо смотреться с другими цветами на сайте и не выбиваться из стилистики.
3. Цвет должен хорошо контрастировать с фоном, на котором тот расположен. Например, синяя кнопка на синем фоне будет смотреться не очень хорошо.
4. Он должен отвечать за ключевые призывы к действию, чтобы не смешиваться с другими цветами на сайте.
Ошибка #7: Нарушение общих принципов дизайна
Последняя смертельная ошибка заключается в игнорировании основных постулатов дизайна, о чем говорил Стив Круг в своей книге Don’t Make Me Think.
Суть в том, что посетители веб-сайта привыкли находить определенные вещи в определенных местах. К примеру, они привыкли видеть логотип и теглайн в верхнем левом углу страницы, и меню в верхнем правом. Также они привыкли находить страницы “О нас” и “Контакты”, если захотят узнать больше о организации или связаться с ней.
Это значит, что считается хорошим тоном иметь все это на своем сайте, и дважды думать перед тем, как идти против этих правил. Это может казаться очевидным, но так бывает не всегда.
Некоторые владельцы веб-сайтов, к примеру, решают быть очень креативными и создают совершенно иное подход к меню сайта. Вместо того, чтобы показать его сверху, где оно обычно находится, его добавляют в ветки на дереве, которое является частью фонового изображения сайта, или делают еще какие-то креативные вещи, выбивающиеся из общепринятого стандарта.
Иногда этот безумный подход работает, но так бывает нечасто. В большинстве случаев, лучше следовать общим принципам дизайна (чтобы не смутить посетителей), чем выдумывать новый безумный расклад, который может быть креативным, но совершенно неинтуитивным.
