Недостатки дизайна, которые могут навредить вашему сайту

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

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

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

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

1. Плохой контраст

Это в последнее время стало модным. Удивительно, что это может быть так, учитывая повторяющиеся сообщения, которые нам неоднократно приходили домой за последние 25 годы, что мы должны избегать плохого контраста. Предшественником этой моды, кажется, являются Twitter и Bootstrap, но они, в свою очередь, могли быть вдохновлены кем-то другим. Давайте посмотрим на пример:

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

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

Ссылки не в стандартном оттенке синего, они в «Twitter Blue», очень бледном оттенке, который плохо контрастирует с белым фоном.

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

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

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

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

2. Плохая кодировка

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

Выглядит как обычный случай, когда кто-то забывает установить кодировку UTF-8, верно? За исключением того, что это не так, потому что кодировка для этой страницы установлена ​​в UTF-8. Дизайнер сайта сделал все правильно, даже пройдя крайнюю длину перехода от всех апострофов в метаданных к объектному символу 39, даже если это даже не требуется. Проблема возникла со вставкой контента в дизайн, потому что то, что, очевидно, произошло здесь, - это неправильно закодированный текст, содержащий умные кавычки MS Word, который был вставлен в раздел контента, таким образом гарантируя, что он будет отображаться неправильно в каждом браузере, потому что страница настроена на UTF-8, а содержимое не кодируется в UTF-8.

В то время как большинство людей будет хотеть упускать из виду небольшой вопрос об умных апострофах, представляемых как…, это очень раздражает, и еще хуже, когда ошибка появляется в заголовке. Суть в том, что вы должны убедиться, что ваш контент отображается правильно, когда вы публикуете его в Интернете, и вы всегда должны убедиться, что вы использовали правильное кодирование (для большинства целей будет UTF-8 или UTF-16). Помните, что веб-сайты в основном о первых впечатлениях, и это не очень хорошо, если первое впечатление о вашем бизнесе у кого-то «небрежное» или «ленивое».

3. Использование Flash

Просто нет причин делать это больше. У Флэша был свой день, но тот день закончился. Тем не менее, многие сайты, и в особенности сайты, посвященные азартным играм (там, где это наименее целесообразно), все еще используют Flash. Кроме того, некоторые из самых крупных и успешных сайтов в Интернете широко используют Flash в самых разных контекстах. Так что, если это достаточно хорошо для них, почему это не будет достаточно хорошо для вас?

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

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

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

4. Автозапуск видео

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

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

Если так много пользователей описывают это поведение как раздражающее и фактически спрашивают, как его отключить, оно должно быть действительно раздражающим. И да, мы знаем, что на самом деле пользователям Firefox, Chrome и Chromium довольно просто полностью отключить автозапуск, но скольким пользователям действительно удобно копаться в: config или установке плагина, чтобы блокировать поведение, которое не должно быть эксплуатируется в первую очередь?

Обратите внимание, что мы говорили об эксплуатации там? Это потому, что создатели HTML 5 не сделали ничего плохого, включив возможность автозапуска. Просто они не ожидали, что люди используют это неправильно, как это.

5. Бесконечная прокрутка

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

Но еще раз, результаты поиска рассказывают историю. Смотрите этот пример:

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

6. Создание всплывающих окон или всплывающих окон, когда они не нужны

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

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

  • обмануть аналитику показателя отказов Google
  • чтобы заставить вас подумать, если вы отскок

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

7. Раздражающие наложения

Это не «Международный день Bash TripAdvisor» (пока), но, поскольку они так щедро приводят примеры отвратительного поведения веб-страниц, было бы по-настоящему искать в подарок лошадь, чтобы игнорировать это. Итак, вот что TripAdvisor только что показал минуту назад, когда я настраивал этот скриншот:

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

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

Это в основном вопрос здравого смысла (возможно, поэтому маркетологи терпят неудачу)

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

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

изображение заголовка любезно предоставлено Дэн Драгомир

Богдан Рэнца

Богдан является одним из основателей Inspired Mag, накопив за этот период почти 6-летний опыт. В свободное время он любит изучать классическую музыку и изучать изобразительное искусство. Он тоже одержим исправлениями. У него уже есть 5.