Лучшие практики дизайна пользовательского интерфейса и распространенные ошибки

Послушайте аудиоверсию этой статьи.

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

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

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

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

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

Пять наиболее распространенных ошибок в дизайне пользовательского интерфейса:

1. Дизайнеры пользовательского интерфейса стали одержимы правилами.
2. Сетка ограничивает творческий процесс дизайнеров пользовательского интерфейса.
3. Дизайн пользовательского интерфейса был стандартизирован с помощью шаблонов.
4. Шрифты трагически неправильно поняты.
5. Контраст не панацея дизайна.

Распространенная ошибка № 1: Дизайнеры пользовательского интерфейса стали одержимы правилами

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

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

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

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

Будьте осторожны с «10 лучшими» правилами дизайна

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

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

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

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

Советы и списки «10 лучших» следуют предсказуемым тенденциям

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

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

Распространенная ошибка № 2: сетка ограничивает творческий процесс дизайнеров пользовательского интерфейса

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

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

Избегайте использования сетки в качестве модного инструмента

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

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

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

Не используйте сетку по умолчанию в качестве рабочего процесса

Дилан Фракарета, преподаватель Школы дизайна Род-Айленда (RISD) и директор журнала PIN-UP Magazine, отмечает, что «большинство людей начинают с сетки из 12 столбцов… потому что из нее можно получить 3 и 4». Опасность здесь в том, что дизайнеры сразу предопределяют свою работу.

Чтобы предотвратить это, Fracareta использует инструмент перемещения только с заданными количествами, а не физически размещает объекты на линии сетки. Это имеет двойной эффект: установление порядка и возможность неожиданных результатов.

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

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

Распространенная ошибка № 3: Дизайн пользовательского интерфейса был стандартизирован с помощью шаблонов

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

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

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

Дизайнеры не должны использовать шаблоны в качестве продуктов

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

Является ли использование шаблона оправданным?

Дизайнеры говорят себе, что F-шаблон существует в результате того, как люди читают в Интернете. Эспен Брунборг отмечает, что, возможно, люди читают так из-за чрезмерного использования нашего F-шаблона. «Какой смысл иметь веб-дизайнеров, если все, что они делают, это следуют рецепту?» — спрашивает Брюнборг.

Распространенная ошибка № 4: шрифты трагически неправильно понимаются

Многие дизайнерские списки «Быстрые советы» предлагают жесткие и быстрые правила для шрифтов. Каждое правило религиозно провозглашается: «Только одно семейство шрифтов! Моноширинные шрифты мертвы! Избегайте тонких шрифтов любой ценой!» Это не более чем горячий воздух.

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

Удобочитаемость шрифта превыше всего

Шрифты передают смысл и влияют на удобочитаемость. Из-за всех дискуссий о правилах удобочитаемости на устройствах дизайнеры забывают, что шрифт предназначен для того, чтобы наполнить текст эстетической чувственностью. Четкость имеет решающее значение — это не подлежит сомнению, — но это действительно должно быть очевидной целью. Иначе зачем нам что-то кроме Helvetica или Highway Gothic?

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

Избегать тонких шрифтов любой ценой неразумно

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

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

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

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

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

Шрифты требуют вариации для установления иерархии

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

Слишком большое разнообразие подрывает иерархию

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

Распространенная ошибка № 5: Контраст не панацея дизайна

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

Использование высокой контрастности по умолчанию — это небрежно

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

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

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

Заключение

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

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

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

Мы должны экспериментировать. Мы должны играть.

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