Учимся на чужих ошибках: когда веб-дизайн все портит
В гостях встречают по одежке. Поэтому будьте готовы: заглянув на ваш сайт, пользователь первым делом обратит внимание не на цены товаров, бесплатную доставку или последний кейс компании, а на графическое оформление. Издание Instant Shift утверждает: столкнувшись с неудачным дизайном, 94% клиентов не будут доверять бизнесу в целом.
Поэтому сегодня мы посмотрим на самые неудачные белорусские сайты, чтобы никогда не повторять их ошибок. Но в таком деле важна объективность, поэтому сначала давайте определимся, какие факторы влияют на успешность первого впечатления.
Точка опоры
Зайдя на сайт, взгляд пользователя должен четко зацепиться за конкретную точку, от которой он может стартовать. Это может быть графический элемент или текст — неважно. Главное — этот элемент должен привлечь внимание посетителя и дать ему указания к дальнейшим действиям.
Нет хаосу
Как только вы делаете смысловой акцент, другие вещи должны помогать его увидеть, но ни в коем случае не мешать. Хаотично разбросанные элементы — плохой помощник в этом. Особенно это актуально для сайтов-магазинов: если в вашем каталоге нет последовательности, покупатели так и останутся потенциальными.
Умеренная гифизация
Гифок должно быть в меру, потому что их большое количество приводит к рассеиванию внимания. Пользователь пытается сконцентрироваться на всем, а в итоге не уделяет внимание ничему. Это не то, что вам нужно, правда?
Градация цвета
Лучше определить один-два лидирующих цвета и использовать их по всему сайту. Иначе вы рискуете добиться только эффекта «вырви глаз», который заставит пользователей сбежать с сайта еще раньше, чем догрузятся все цвета.
Регулярное обновление
Сайт должен быть актуальным, а этого правила невозможно придерживаться, если в прошлый раз вы занимались им в сентябре 2010. Поэтому важно постоянно актуализировать информацию, следить за тенденциями дизайна, чтобы периодически совершенствовать сайт.
Читабельность контента
Неважно, какие цели у сайта, — продать товар или рассказать о новостях. Самое важное — донести до читателя информацию. А для этого нужно сделать так, чтобы клиент смог ее считать и переварить. Для достижения этой цели существует множество приемов, не пренебрегайте ими. Например, использовать различные подзаголовки, выделения текста, простоту изложения и короткие абзацы: все это зрительно поможет читателю сориентироваться.
Быстрый старт
Читатели не любят ждать загрузки страницы слишком долго. Поэтому если сайт не подгружается через несколько секунд, скорее всего, его закроют. Какое отношение скорость подгрузки имеет к дизайну? А вы видели, как смотрится подвисшая между станциями метро мобильная версия сайта? Как никому не понятный код программиста. Поэтому делайте выводы.
Теперь, когда мы определились, что такое хорошо, можно на примерах разобрать, что такое плохо в белорусском интернете. Возможно, в исследовании есть субъективность, но ведь дизайн — дело гибкое. Если, по вашему мнению, мы незаслуженно обидели какой-то сайт, не стесняйтесь парировать нам в комментариях.
Сайт потребительского общества АРГО в Беларуси (http://argominsk.by/)
Примерно такие сайты мы делали на уроках информатики в 9 классе, когда у тебя под рукой только несколько строк кода из школьного учебника и желание быстрее убежать в столовую. И хотя сайт позиционирует себя «позитивом, здоровьем и успехом», позитивной можно назвать только веру учредителей в то, что подобный сайт будет успешным. Главный минус — цветовое решение, которое хотя и нельзя обвинить в непатриотичности, в целом оставляет кислотное послевкусие. Кроме этого, здесь нет видимого центра композиции: глаза бегают по всей странице, но не находят ничего, кроме сплошных текстов. К слову, тексты тоже оставляют желать лучшего: ни привыкнуть к различным гарнитурам, ни разделить смысловые части, ни разобраться в непонятных аббревиатурах вы не сможете. Кстати, несмотря на то, что название организации официально сокращается до «АРГО», использовать на сайте слово, обозначающее тюремный жаргон, не стоило. Слишком негативные ассоциации вызывает.
Сайт «Белгидромета» (http://www.pogoda.by/)
Этот сайт выкалывает глаза чуть менее предыдущего, но первое впечатление портит обилие слишком разного текста. Он повсюду, окружает единственную иллюстрацию со всех сторон и зажимает посетителя в тиски с первых секунд. Он не знает, куда бежать, поэтому бежит с сайта. К тому же, условные рубрики («Видеопрогноз», «Метеоновости» «Статьи и публикации») никак не выделены графически, поэтому воспринимаются даже слабее заголовков, так как не выделены полужирным. А как раз на них нужно было сделать акцент. Единственное, за что можно похвалить сайт, — верхняя часть стартовой страницы. Спокойный цвет, ссылки на соцсети и логотип предприятия — практически ничего лишнего.
Сайт Diva.by (https://www.diva.by/)
Здесь мы видим еще несколько жестких и частых ошибок: например, слишком отвлекающий фактурный фон и чересчур абстрактные иллюстрации на новостях. Такому сайту не хочется доверять: обрезанный правый край выглядит не воздухом, а дырой; из-за шаблонных картинок блок новостей выглядит скорее рекламными баннерами; а заставка для первой новости (шарики для ванной) выглядят логотипом всего сайта. Это отсутствие единой шапки и стиля на front-page может дорого обойтись предприятию: пользователь не ассоциирует сайт с фирмой, а значит, не запоминает его.
Еnergobelarus.by (https://energobelarus.by/)
Этот сайт повторяет главную ошибку предыдущего: поставив на фоне картинку с энергетическим оборудованием, компания утяжелила его еще больше. Хотя, казалось бы, куда уже? Обилие разнообразных картинок (в отличие от предыдущего сайта, здесь создатели перестарались с графикой), сразу несколько гифок на главной странице и выбор слишком кричащего красного цвета как основного заставляют посетителей плакать такими же кроваво-красными слезами. От такого сайта по-настоящему устаешь, тем более — если начинать разбираться с его структурой. И красный цвет, и энергетическое оборудование на полях преследуют вас на каждой странице, что немного напрягает. Еще больше подбешивает, что каждый экземпляр — кликабельная реклама: немного отвлекся, нажал не туда — и вот ты уже на абсолютно левом сайте. Не надо так.
Сайт унитарного предприятия «Профессиональный бухгалтер» (http://profbuh.by/)
Прекрасную структуру сайта портит цвет: контраст красных блоков рубрик и белых слов на них не дают сосредоточиться на самой информации. Тот же красный цвет кричит со всех заголовков новостей (иногда даже капслоком), что вызывает жгучее желание научиться бухгалтерским премудростям где-нибудь в другом месте. Еще один нюанс: если открыть страницу в первый раз, вместо блока рекламы в верхнем правом углу появляется просьба подключить плагин. Любопытна ли вам информация на этом сайте настолько, чтобы вы нажимали на лишнюю кнопку?
Сайт питомника для собак (http://mops.by/)
Мопсы — прекрасные создания. Но когда гифок с ними слишком много на главной странице сайта, получается еще один смертный грех веб-дизайна. Сразу 6 двигающихся собак, надпись «Добро пожаловать на сайт питомника «Царство Зари-Эос», плавающая туда-сюда, белый шрифт на черном фоне, полный хаос в шрифтах — и вот ваш сайт ненавидят даже самые большие любители собак.
И еще: никогда в жизни не делайте такую выключку! При попытке прочитать хотя бы одну белую строчку на черном фоне человеку становится плохо. И если на главной странице такого текста не очень много (по крайней мере, он не выглядит сплошным), то на всех остальных ситуация еще более удручающая.
К тому же, если вы пишете, что владеете самой прекрасной породой собак, не нужно доказывать обратное подобной версткой сайта.
Сайт дизайн-студии (http://front.by/)
Что называется, сапожник без сапог. Нет, это не недогруженный сайт. Да, он открывается так со всех устройств. Поэтому стоит ли надеяться на качественный дизайн от фирмы, которая не может сделать толковый сайт себе? Возможно, эта дизайн-студия уже давно не функционирует или поменяла сайт. Но этот все так же можно найти в интернете, а значит, он портит имидж компании в целом. Хороший урок: делаешь новый сайт? Удаляй старый. Сворачиваешь компанию? Лучше удалить и сайт, чтобы в будущем он не сослужил плохую службу.
Рекламно-информационный ресурс о технике (https://teploby.com/)
Сайт, вроде, и выглядит хорошо структурированным, да и текста в нем не то, чтобы очень много. Нет цветов «вырви глаз», есть четкая шапка сайта и ассоциация с брендом. Но сайт все равно не цепляет: нет смыслового центра, не расставлены акценты, не привлекают картинки. В общем, у сайта нет изюминки, которая заставила бы задержаться на ресурсе на несколько секунд. А там, гляди, и на побольше. Не запариваться над дизайном и делать подобный сайт есть смысл, только если вы уверены, что ваша целевая группа точно будет заходить на ваш сайт (например, если вы единственный в Беларуси производитель полотенцесушителей). Но согласитесь, вряд ли это так.
Система продажи билетов на автобусы по Беларуси (https://ticketbus.by/)
Возможно, предыдущие сайты были нацелены на не слишком большую аудиторию. Но охват этого сайта действительно огромен: здесь покупают все билеты государственных автомобильных перевозчиков. Сплошная простыня текста — и больше ничего. Привыкшие люди уже научились находить строки, куда нужно вбивать информацию о планируемой поездке, но вот попав на такой сайт впервые, можно знатно растеряться.
После многочисленных жалоб пользователей на интерфейс сайта организация все же выпустила его http://new.ticketbus.by/ новую версию. Однако и она получилась не то чтобы симпатичной.
Женский сайт «Будь в тренде» (http://vtrende.by/)
И хотя этот сайт призывает других быть в тренде, его веб-дизайн явно не придерживается ни одного из них: морально и технически устаревшая верстка, попытки разместить заголовки новостей на лицах героев, разнородность фона и остальных графических элементов явно работают против названия ресурса. Возможно, в 2000-е это было модным, но сейчас вряд ли кто-то из стильных людей воспользуется советами этого сайта.
Кормим грудью (http://am-am.info/)
Абсолютная разнородность элементов сайта по цвету, стилю и гарнитуре шрифтов. Надписи красным цветом режут глаза, также непонятна расстановка акцентов: рубрики написаны менее выделяющимся шрифтом, чем основной текст. Кроме того, непонятно, на какую рубрикацию обращать внимание: на ту, что сверху? Или ту, что идет за блоком с видео?
Минский зональный центр гигиены и эпидемиологии (http://minzchie.by/)
Сайт, который уходит корнями в далекое прошлое. Нет четкого центра, пользователь не может зацепиться ни за один из блоков, сплошная простыня из текста не привлекает внимания. Ресурсу не помешало бы добавить больше иллюстраций и сократить заголовки. Материал «О результатах государственного санитарного надзора за территорией Щомыслицкого сельского совета» привлечет максимум одного читателя: того, кто размещал публикацию на сайте.
Сайт компании «Живкорм» (http://www.zhivkorm.by/)
На этом сайте, кроме отсутствия какого-либо дизайнерского стиля, демонстрируется еще одна проблема — то, как технически можно убить сайт и отвернуть от себя аудиторию. Даже при переходе на русскую версию сайта, открывается его английская версия, которая наполовину состоит из русскоязычных слов, а наполовину — из англоязычных. Пользователь не захочет разбираться во всех перипетиях и уйдет. Кроме того, переходы по ссылкам на новости тоже не работают: открывается все та же главная страница. Хотя год на сайте указан 2019: видимо, работа на нем все же предполагается.
Сайт о туризме (http://zagranica.by/)
И хотя контент на сайте действительно неплохой (например, постоянно появляются новые веб-камеры со всего мира), завернуто это в удивительно непривлекательную обертку. К тому же, не совсем удачно расположены блоки рекламы: они занимают даже больше места, чем блоки с новостями, что не очень располагает к себе людей.
Автокрепеж (http://autokrepezh.by/)
Этот сайт демонстрирует, почему нельзя использовать различный шрифт: от него попросту устают глаза. Посмотрите: разнообразие размеров, подчеркнутый, полужирный, красный, синий, серый, строчные и прописные буквы — все это намешано уже в первом абзаце текста на ГЛАВНОЙ странице. И в расположении этих букв нет никакой логики, отчего взгляду не за что зацепиться. Хотя стоит сказать, после этого идет очень неплохой блок с каталогом: большие иллюстрации позволяют рассмотреть товар лицом и отчетливо понять, что имеется в виду. Но до этого блока пользователь доберется, только если не закроет сайт после стартового описания.
Интернет-магазин одежды (http://ultra.mymarket.by/)
Главная задача интернет-магазина — продавать, а на этом сайте для успешных продаж сделано не больше, чем на Википедии. Безвкусно оформленные товары, кислотные значки и неопрятно сброшенные в кучу блоки на сайте слева. Добавьте сюда нелепые шрифты, шапку сайта с надписью, напоминающей объект Word Art — и вот перед вами антипример стильного магазина.
Беларус-МТЗ. Обозрение (http://www.belarus-mtz.by/)
Сайт газеты одного из белорусских заводов не то чтобы стремился к популярности: не это его основная цель. Но если уж и создавать сайт, то почему такой? Непонятные плагины, которые были актуальны в середине 2000-х (не все из которых работают), сливающиеся в один пласт блоки, новости с одинаковыми нетематическими иллюстрациями, красные заголовки, блок со ссылкой на социальные сети, большая часть которого — это аватарки пользователей… Можно продолжать еще долго, но даже сайты многих районных газет уже перешагнули этот уровень несколько лет назад, а здесь все-таки минское издание.
Белорусское общество радиологов (http://nld.by/)
Кислотные цвета (ярко-красный, ярко желтый) используются для фонов. Щелочной шрифт (ярко синий, фиолетовый) — для заголовков. Верстка сайта тоже состоит из сплошного перечня материалов, хотя тема ведь интересная! Конечно, создатели указывают, что сайт обновляется редко, поскольку журнал больше не выходит, но лицо ведь сохранять нужно… По крайней мере, сделать ему не такой яркий макияж.
Все о рыбалке Беларуси (http://www.ribaku.by/)
Здесь слишком страдает верстка, чтобы перечислять все ее недостатки: взгляните хотя бы на фон и блок слева, который предполагает рубрикацию, но на самом деле вводит пользователя в ступор. Также не совсем понятно, по какой логике размещены блоки новостей, похожие на рекламу, и почему следом за ним идет еще один блок, но уже вертикальный. На сплошные вопросы сайт ответов не дает.
Сайт о праве (http://pravo.levonevsky.org/)
А самый главный вопрос здесь — кто такой Валерий Станиславович Левоневский, имя которого разместили в шапке сайта? В принципе, его ФИО являются единственным иллюстративным элементом на ресурсе, остальное содержание сайта — сплошные названия законодательств и ссылки на разнообразные акты. Кажется, юристам стоит быть чуточку более доступными…
А чтобы наверняка до конца осознать, как дизайном можно испортить сайт, посмотрите на вот этот ресурс(https://www.theworldsworstwebsiteever.com/), который создали ценители толкового веб-дизайна.
Автор: Лилия Гайдаржи
