Статьи

Топ 5 Peeves плохого веб-дизайна

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

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

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

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

Эти мозоли можно условно разделить на две большие категории:

  1. Расширение возможностей пользователя
  2. Запрещение зверского дизайна и типографики

Давайте прямо в них:

1. Музыка с самого начала

(АКА: Если я узнаю, где ты живешь … )

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

Снимок экрана с двумя окнами браузера Google Chrome под Mac OS X с множеством вкладок, открывающих вкладку, выделенную как страница, воспроизводящая музыку.

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

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

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

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

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

Связанная жалоба, которая все еще сохраняет популярность, — это вульгарное использование target="_blank" Как отмечает Якоб Нильсен :

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

(Акцент мой.)

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

3. Домашняя страница «Launch»

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

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

Флэш-сайты абсолютно печально известны этим, и по большей части я просто не буду беспокоиться; Прощай; Ctrl + W.

4. Плохая разборчивость и читабельность

Не так раздражает, как предыдущие два, но пассивно разочаровывает, потому что мы ничего не можем прочитать — по крайней мере, неудобно и долго. Общие примеры:

  • Слишком маленький: вероятно, самый распространенный из всех типографских ошибок — здесь текст слишком мал, чтобы его можно было прочитать, не вызывая напряжения. К счастью, тенденция установки текста с глупо маленькими размерами в основном была изменена, и она была ухудшена в прежние дни Internet Explorer, поскольку он не мог изменить размер текста страницы, если он был установлен в пикселях (который был и остается распространенный метод определения размеров в сети).
  • Совсем мало или вообще нет: линии кажутся плавными в другую из-за скудного, если не из-за полного отсутствия вертикального промежутка — невероятно трудного для чтения.
  • Слишком длинные или слишком короткие меры: либо мера слишком длинная, и глаз не может найти следующую строку, либо он быстро зигзагообразно опускается вниз по столбцу после нескольких слов. Чтобы преодолеть это, пользователь должен изменить размер окна браузера или увеличить размер шрифта, и это может не произойти, в зависимости от размера.
  • Плохой контраст: это широко распространено на сайтах, где дизайнер решил, что светло-серый текст на ярко-белом фоне выглядит гладким или «современным»; даже «лучше», если на 10 пикселей, по-видимому. Это очень хлопотно для многих пользователей, потому что это не так легко исправить, если нажать Ctrl и + для увеличения размера шрифта — для изменения цвета шрифта на отображаемой странице необходимо использовать плагины веб-разработки.

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

Но как насчет шрифтов?

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

5. Плохая или не видимая иерархия

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

Пример относительно простого текста в стилизованной типографской иерархии.

Цвета могут быть на отметке, текст может быть разборчивым, а CSS и разметка могут быть допустимыми, но содержимое все равно может быть отображено с небольшим разграничением или без разграничения между различными типами содержимого на странице; blockquote выглядит как соседние ссылочные абзацы, заголовки просто выглядят как выделенная жирным шрифтом или выделенная курсивом строка и так далее.

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

закрытие

Конечно, есть еще много неприятностей (разбивка контента на несколько «страниц», вообще не загружать текстовое содержимое, если не разрешен JavaScript, полное отсутствие пробелов, вопиющее нарушение основных соглашений дизайна, веб-сайты только для Flash, отсутствие контекстного «клика» здесь »ссылки, бессмысленная настройка Comic Sans,…), но при быстром размышлении вышеизложенное, вероятно, будет моей пятеркой.

Каковы ваши лучшие пять мозгов в веб-дизайне?

Приложение по JavaScript

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

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

Если вам интересны плагины и тому подобное, я написал о том, как я просматриваю интернет .