Плохой дизайн: Про хороший и плохой дизайн для недизайнеров / Хабр

Хороший и плохой дизайн — что это вообще такое? — Дизайн на vc.ru

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

872 просмотров

Это условие необходимое, но не достаточное.

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

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

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

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

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

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

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

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

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

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

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

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

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

Джаред Спул, американский писатель, исследователь и эксперт по юзабилити, как-то сказал: «Хороший дизайн незаметен. Только плохой бросается в глаза».

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

Нет времени читать статью? Найдите ее в нашем телеграм-канале и сохраните себе в «Избранном» на будущее.

Содержание статьи

1. Информационная перегрузка
2. Навигация по «таинственному мясу»
3. Добавление трения к действиям пользователя
4. «Умный» дизайн, игнорирующий юзабилити
5. Излишняя анимация
Заключение

1. Информационная перегрузка

Плохо: знаки парковки в Лос-Анджелесе

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

Просто посмотрите на этот пример из 2010-х: 

Парковочные знаки в Лос-Анджелесе

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

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

Хорошо: знак парковки дизайнера Никки Силиантенг

Разработка вывески, отображающей всю необходимую информацию, но при этом простой для понимания, звучит как невыполнимая задача. Однако бруклинскому дизайнеру Никки Силиантенг (Nikki Sylianteng) удалось это сделать.

Расписание парковки. Предложенный Никки знак парковки в конечном итоге был использован в Лос-Анджелесе

Одна из причин успеха этого дизайна заключается в том, что он ориентирован на пользователя: Никки поняла, что водители просто хотят понять, могут ли они припарковаться в определенном месте. Да или нет — все, что хотят знать люди, и именно это (и ничего больше) и показывает знак парковки.

Для передачи информации Никки использовала иконки вместо текста. В итоге получилась интуитивно понятная вывеска: зеленый означает «да» (парковка разрешена), красный — «нет» (парковка запрещена). Благодаря полосам схема также подходит дальтоникам.

Увидев такой знак, сразу становится понятно, что в 9 утра во вторник парковка запрещена.

Полосы делают информацию очевидной с одного взгляда.

Выводы:

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

Читайте также: ТОП-5 ошибок UX-дизайна, которые кочуют из года в год

2. Навигация по «таинственному мясу»

Плохо: LazorOffice.com

Придуманный в 1998 году Винсентом Фландерсомиз Web Pages That Suck термин «навигация по таинственному мясу» (Mystery Meat Navigation, MMN) описывает те случаи, когда адрес ссылки не виден до тех пор, пока пользователь не кликнет по ней или не наведет на нее курсор.

Термин «таинственное мясо» — отсылка на мясо, подаваемое в столовых американских школ, которое настолько обработано, что невозможно сказать, что это за мясо.

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

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

Домашняя страница LazorOffice.com

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

«Кликни, чтобы узнать!» никогда не было хорошим решением для UX. Скорее всего, пользователи откажутся от изучения вашего сайта и найдут альтернативное решение на сайте конкурента.

Хорошо: карточки курсов на сайте Interaction Design Foundation

К счастью, проблемы MMN легко решаемы. Все, что требуется, — это давать ссылкам четкие названия. Простая надпись «Просмотреть проект» при наведении курсора мыши улучшит юзабилити страницы Lazor Office.

Карточки курсов, как и ссылки, совершенно «прозрачны»

У карточек курса Interaction Design Foundation есть не только надпись «Просмотреть курс» внизу каждой карточки, чтобы указать действие, которое произойдет, но также текст при наведении курсора «Перейти к курсу». Многие сайты поступают аналогично, чтобы максимально повысить юзабилити сайта.

Вывод

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

Читайте также: Как создать идеальный призыв к действию: 11 примеров эффективных CTA

3. Добавление трения к действиям пользователя

Плохо: iFly50.com

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

Один из примеров — сайт iFly50.com, созданный KLM к годовщине журнала iFly. iFly 50 — сайт с вертикальной прокруткой, демонстрирующий 50 туристических направлений. Некоторые из направлений содержат внизу кнопку (как в приведенном ниже примере), предлагающую пользователям нажать и удерживать ее в течение нескольких секунд, чтобы просмотреть больше фотографий.

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

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

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

Хорошо: эластичная прокрутка на iOS

Интересно, что осознанное добавление трения к действиям пользователя способно сотворить отличный дизайн. Одним из самых популярных изобретений Apple в их мобильной операционной системе iOS является создание эластичной прокрутки, когда в определенных ситуациях (как, например, в конце страницы) прокрутка становится сложнее.

В эластичной прокрутке iOS в некоторых ситуациях преднамеренно добавляется трение

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

Вывод

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

Читайте также: Что такое UX-исследование: привычки пользователей, или как бизнесу понять своих клиентов

4. «Умный» дизайн, игнорирующий юзабилити

Плохо: Bolden.nl

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

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

Взять, к примеру, сайт голландской студии стратегического дизайна и разработки Bolden: 

Чтобы прочитать сообщение здесь, вам необходимо переместить курсор в угол страницы

Это пример «умного» и при этом плохого дизайна

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

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

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

Хорошо: CultivatedWit.com

Сайт Cultivated Wit — отличный контрпример того, как умный дизайн не осложняет юзабилити.

На домашней странице Cultivated Wit изображена иллюстрация совы

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

Сюрприз! При наведении курсора мыши на сову, она вам подмигивает. Обратите также внимание на разумное распределение свободного пространства

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

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

«Комедия может существовать в новых формах. Технология может быть интереснее. Текст домашней страницы может быть раздражающе ясен. Присоединяйтесь к нашему email-клубу»

В тексте (разборчивом и контрастном) использован юмор — точно так же как и в дизайне Bolden — без ущерба для юзабилити сайта.

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

Вывод

Умные проекты всегда должны быть максимально надежными и/или проверены на реальных пользователях. Иногда умный дизайн может иметь неприятные последствия и навредить юзабилити.

Читайте также: Юзабилити сайта: что это такое, инструменты для тестирования

5. Излишняя анимация

Плохо: концепция чека PayPal на Dribbble

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

Концепция анимации Владислава Тызуня для электронного чека PayPal, размещенная на Dribbble, — пример неправильной анимации.

Анимация красивая, но лишняя. В общей сложности для просмотра деталей транзакции требуется целых 3,5 секунды. Более элегантным и быстрым по времени решением было бы простое постепенное появление чека

По состоянию на 2016 год анимация Владислава набрала более 500 лайков и 8000 просмотров. Это показывает ошибочное отношение дизайнеров к анимации ради анимации.

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

Хорошо: анимация оплаты заказа на сайте Stripe

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

Stripe использует анимацию, чтобы процесс казался быстрее, чем он есть на самом деле. Пользователи получают обновления (например, «Отправлено»), даже если они еще не получили SMS. Им не нужно ждать, и они могут быть уверены в том, что SMS вот-вот придет

Рэйчел Наборс, приглашенный эксперт W3C по веб-анимации, рассказывает о 5 принципах при разработке анимации:

1. Анимируйте обдуманно: прежде чем создать анимацию, тщательно ее продумайте.
2. Требуется больше 12 принципов: 12 принципов анимации от Дисней работают для фильмов, но не обязательно для сайтов и приложений.
3. Полезно и необходимо, а потом уже красиво: эстетика должна отойти на второй план перед UX.
4. Идите в 4 раза быстрее: хорошая анимация ненавязчива, а значит, работает быстро.
5. Установите аварийный переключатель: для больших анимаций, таких как эффекты параллакса, создайте кнопку отказа.

Вывод

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

Читайте также: GIF-анимация: сервисы для создания, недостатки и советы по использованию

Заключение

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

1. Определите, что нужно вашим пользователям, а затем дайте им эту информацию.
2. Если вам нужно передать много информации, используйте изображения вместо текста.
3. Всегда именуйте свои ссылки. Пользователи не любят таинственных ссылок.
4. Избегайте добавления трения к действиям пользователя, если только нет задачи отговорить от какого-либо действия.
5. Тестируйте свои умные дизайны и включайте их с осторожностью.
6. Анимация сродни ругательствам. Если злоупотребить ей, она потеряет все свое влияние.

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

Высоких вам конверсий! 

По материалам: interaction-design.org. Автор: Teo Yu Siang.

11-07-2022

11 забавных примеров плохого дизайна

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

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

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

1. Писсуар на двоих, пожалуйста

Источник: Райан Каверман

Я имею в виду, я думаю, если бы это действительно была чрезвычайная ситуация…

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

2. Худшая игра Scrabble

Источник: Джефф Висаски

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

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

3. Просто бросить… школу?

Источник: Джефф Висаски

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

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

Обратите внимание: мы ценим образование в Lucidpress и не рекомендуем бросать школу.

Почему нет стандартной стороны бензобака? Если вы едете на незнакомой машине, вы можете попасть в такую ​​ситуацию:

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

5. «Попался!» Карточка Мисс Вселенная

Источник:  Джон Гавел

Бедный Стив Харви. Это ситуация, когда плохой дизайн испортил день двум людям. И Стив, и Мисс Колумбия были публично смущены, потому что макет открытки сбивал с толку. Шрифт и расположение текста должны были облегчить, а не усложнить задачу.

6. УР выстрелил!

Источник: Джефф Висаски

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

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

Источник:  Джефф Висаски

«Поздравляем! Лучшая рыба с жареным картофелем в… Ага.» На первый взгляд, это гладкая, хорошо продуманная реклама. Выглядит профессионально и привлекательно. Но плохой дизайн может ударить где угодно и когда угодно. Самая большая ошибка здесь заключается в редактировании текста, но, кроме того, кажется, что они пытались создать свободную, неформальную атмосферу, не полностью привязываясь к ней.

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

8. «Это ловушка!»

Источник:  Имгур

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

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

9. Я ясно выразился?

Источник:  Имгур

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

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

10. «Черт возьми, я проткнул эту штуку!»

Источник:  Имгур

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

Забавно представить, что к этому привело. Я вижу, что это происходит примерно так:

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

Режиссер фотосессии: Думаю, нам придется просто сделать зеленый экран… Нет, подождите минутку. Я понял. (хватает ножницы) Да, мы просто проделаем маленькую дырочку прямо здесь. Какой у тебя размер обуви? 10? Отлично, это должно сделать это.

11.

Студенты любят пиццу, верно?

Со всеми этими обвинениями пора нам внимательно взглянуть на самих себя. Возьмем, к примеру, этот постер, который мы использовали на рекрутинговом мероприятии:

Мероприятие проходило в университете, и мы решили, что поскольку студенты любят бесплатную еду, было бы неплохо взорвать часть плаката «БЕСПЛАТНАЯ ПИЦЦА». Неправильный. Как видите, это выглядит ужасно и умаляет наш бренд.

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

Благодаря блокировке шаблона дизайнер группы может создать шаблон, а затем заблокировать части, которые не следует изменять (например, текст «БЕСПЛАТНАЯ ПИЦЦА»), чтобы убедиться, что они остаются в правильном положении и не раздуты. в 10 раз больше их нормального размера. Блокировка шаблонов вовлекает в творческий процесс людей, не являющихся дизайнерами, без ущерба для качества и согласованности бренда.

Узнайте, как бесплатные шаблоны и простой инструмент дизайна Lucidpress могут защитить ваш бренд от плохого дизайна.

19 примеров плохого дизайна веб-сайтов в 2022 году [+ Что они сделали не так]

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

Интернет прошел долгий путь с веб-дизайном с 90 с. Помните Apple в 1998 году? Или Амазон в 1999 году? Оглядываясь назад на Yelp в 2005 году, чувствуешь себя как в машине времени. Тем не менее, даже спустя десятилетия, все еще существуют загроможденные, трудные для просмотра веб-сайты с проблемами доступности, которые точно демонстрируют, почему необходим хороший дизайн сайта.

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

• Что делает дизайн сайта плохим?
• Плохой дизайн веб-сайта: электронная торговля
• Плохой дизайн веб-сайта: фильмы
• Плохой дизайн сайта: новости
• Плохой дизайн веб-сайта: образование
• Плохой дизайн веб-сайта: сообщество
• Плохой дизайн веб-сайта: Искусство
• Витрина «плохих» веб-сайтов

Что делает дизайн сайта плохим?

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

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

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

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

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

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

Примеры неудачного дизайна веб-сайта

1. ZARA
2. Путь
3. eBay
4. Липтон
5. Мадуэлл
6. Источник бумаги
7. Комната
8. IMDb
9. Фанданго
10. Yahoo!
11. Си-Эн-Эн
12. Ежедневная почта
13. Йельская школа искусств
14. NYU
15. Университет Луизианы
16. Craigslist
17. Новости хакеров
18. Камерный оркестр «Новый век»
19. ODC/Танец

1.

ЗАРА

В чем ошибка: Нетрадиционная навигация

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

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

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

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

2. Путь

В чем ошибка : Отсутствие визуальной иерархии

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

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

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

3. eBay

В чем ошибка : Сложные страницы продуктов

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

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

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

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

4. Lipton

В чем ошибка : Изображения с низким разрешением

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

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

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

5. Madewell

Что пошло не так : Непонятная мобильная навигация

Только во втором квартале 2022 года мобильный трафик составил почти 59% мирового веб-трафика. Поэтому наличие удобного мобильного сайта является необходимостью. Тем не менее, эти сайты представляют собой проблему дизайна: вы хотите предоставить все возможности навигации и информацию, необходимую посетителю, не загромождая интерфейс. Мобильный сайт Madewell не совсем соответствует этому балансу. Он чистый и гладкий, но в нем отсутствуют некоторые важные функции, которые негативно сказываются на пути пользователя.

Например, вы вошли в систему и хотите изменить свой пароль. Вы можете щелкнуть желтый значок пользователя и увидеть всплывающее меню. Возможно, вы понимаете, что можете нажать «Мои заказы», ​​«Мое избранное» или «Выйти», но это не даст возможности изменить ваш пароль. Чтобы обновить пароль, нажмите «Привет, [ИМЯ]». Эта нечеткая навигационная метка, вероятно, помешает некоторым клиентам завершить этот пользовательский процесс и изменить свой пароль, что является большой проблемой и угрозой безопасности.

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

6. Источник бумаги

Что не так : Устаревший дизайн

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

Как улучшить: Paper Source необходимо пересмотреть дизайн своего веб-сайта. Слишком много информации на главной странице приводит к параличу пользователей и заставляет их выбирать веб-сайты с более простым и менее запутанным дизайном. Уменьшив беспорядок на целевой странице, Paper Source может сделать ее визуально более привлекательной.

Плохой дизайн веб-сайта: фильмы

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

7. Комната — Официальный сайт фильма

Что пошло не так : Отсутствие доверия

Может ли Веб-сайт Комнаты быть по иронии судьбы плохим? Может быть? Какими бы ни были намерения, у него есть несколько проблем с UX, многие из которых способствуют отсутствию доверия.

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

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

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

8. IMDb

Что пошло не так : Беспорядочный макет

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

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

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

9. Fandango

Что пошло не так : Нет четких CTA

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

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

Плохой дизайн веб-сайта: новости

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

10. Yahoo!

В чем ошибка : Пробелы

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

Одна проблема — пробелы. В то время как над сгибом почти слишком много свободного места (по крайней мере, в настольной версии), его слишком мало, когда вы начинаете прокручивать. Это, в сочетании с маленьким размером шрифта, влияет на читабельность главной страницы. Различные объявления также способствуют ощущению клаустрофобии и растерянности. В результате вместо того, чтобы просматривать другой контент на сайте, пользователи могут решить выйти и перейти на другой новостной сайт.

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

11. CNN

Что пошло не так : Медленная загрузка

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

Однако страница тяжелая и загружается медленно. Настолько медленный, что он включен в список самых медленных сайтов в Интернете по версии Speedmonitor.io. Поскольку время загрузки имеет важное значение для пользовательского опыта и рейтинга в поисковых системах, CNN, вероятно, теряет посетителей и позиции на страницах результатов поисковых систем (SERP) из-за своей скорости.

Как улучшить: Обширная библиотека контента CNN отягощает его и замедляет загрузку. Сайт может ускорить загрузку за счет уменьшения количества текста, изображений и видео.

12. The Daily Mail

Что пошло не так : Слишком много рекламы

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

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

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

Плохой дизайн веб-сайта: образование

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

13. Йельская школа искусств

В чем ошибка : Несоответствие

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

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

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

14. Нью-Йоркский университет

В чем ошибка : Цвет

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

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

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

15. Университет Луизианы

В чем ошибка : Сложная раскрывающаяся навигация

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

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

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

Плохой дизайн веб-сайта: сообщество

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

16. Craigslist

Что не так : Неотзывчивый дизайн

Craigslist печально известен своим плохим дизайном сайта (хотя есть и сторонники, которые его защищают). Хотя это некрасиво, оно позволяет пользователям просматривать, продавать, искать что-то конкретное и подключаться.

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

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

17. Hacker News

Что пошло не так : Проблемы с читабельностью

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

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

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

Плохой дизайн веб-сайта: Искусство

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

18. Камерный оркестр «Новый век»

Что пошло не так : Непоследовательный брендинг

Камерный оркестр New Century имеет удивительный логотип трех цветов: розовый, синий и желтый. Эти цвета появляются по всему сайту, но в разных оттенках. Например, заголовки, форма подписки по электронной почте и нижний колонтитул на главной странице окрашены в разные оттенки синего (ни один из них не соответствует синему цвету логотипа). По всему сайту есть кнопки CTA неоново-розового, желтого и синего цвета.

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

19. ODC/Dance

Что пошло не так : Проблемы доступности

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

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