Главная » Хабрахабр » [Перевод] Столетний холивар: креативность против юзабилити

[Перевод] Столетний холивар: креативность против юзабилити

«Я художник, я так вижу!»

«Интернет страдает от отсутствия разумной стандартизации.»

Подключаемся к холивару. А вы за кого?

image

Почему все веб-сайты выглядят одинаково? Недавно на Medium было опубликовано мое противоречивое эссе. Эссе «хайпануло». (aka «О визуальной усталости паутины»). 300 хлопков и 60 комментариев. Пока я пишу это, оно получило более 55 000 просмотров, 27 000 просмотров, 11. Я, очевидно, нервничал.

Приятно начинать оживленные дебаты. Итак — спасибо за отзывы. Обратная связь, которую я получил, разнообразна, и комментарии на Medium и Twitter довольно противоречивы. Но мне трудно адресовать каждое замечание индивидуально. Не вдаваясь в подробности, большая часть обсуждения сводится к известному аргументу «творчество против юзабилити».

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

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

1) Шаблоны должны работать для дизайна

Шаблоны являются частью текущего веба. Одно полемическое эссе не изменит этого.

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

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

2) Форма — Содержание

Позвольте мне процитировать самого себя:

Одним из основополагающих принципов дизайна является глубокая и содержательная связь между формой и контентом; форма должна отражать и формировать контент.

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

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

3) Веб-страница как книга в “мягкой обложке”

Если мы проведем аналогию между Вебом и миром книг, то мы находимся в эпоху “мягкой обложки” веб-страниц.

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

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

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

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

Текст противоречивой статьи:

Почему все сайты выглядят одинаково

(https://medium.com/s/story/on-the-visual-weariness-of-the-web-8af1c969ce73)

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

image

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

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

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

И все же, даже веб-сайты для дизайнеров основаны на контейнерах в контейнерах в контейнерах.

image

Самые популярные порталы для объявлений в Интернете — Dribbble и Behance — настолько фундаментально скучны, что они в основном взаимозаменяемы.

Почему это случилось?

Технологические фреймворки, такие как системы управления контентом (CMS) и платформы для ведения блогов, такие как WordPress, основаны на шаблонах. Есть несколько причин. Шаблоны не являются спроектированным дизайном. Веб-страницы этих фреймворков не создаются индивидуально, а генерируются «на лету», объединяя различные типы медиа, такие как изображения, заголовки, основной текст и видео. Помимо шаблона, эти платформы обычно не дают возможности влиять на внешний вид страницы. Скорее, это правила для объединения связанных типов данных. То, что вы видите, это то, что вы влили в шаблон.

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

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

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

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

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

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

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

Ретро Веб-дизайн

Я разработал свой первый веб-сайт около 23 лет назад в группе исследований и разработок в Университете искусств в Бремене, Германия. В то время создание веб-страниц было в новинку. Интернет был молод. Страницы будоражили мое воображение.

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

От Jan Chchichold Die Neue Typographie в двадцатые годы до компьютерных макетов от April Greiman в восьмидесятые годы, дизайнеры бросили вызов статус-кво и попытались найти визуальный язык, который представлял идеи и революции их эпох. В то же время экспериментальная типографика взрывалась. Вы могли видеть это в работе Ирма Бум, Дэвида Карсона, Паулы Шер, Невилла Броуди и многих других. К середине 90-х годов необычная комбинация технологических и культурных достижений позволила создать очень радикальное поколение графического дизайна.

(Web Design Museum очень хорошо это показывает.) Однако, по сравнению с визуальным взрывом мира графического дизайна, ранние веб-страницы все еще были довольно хромыми.

Не было представления о том, как должна была выглядеть веб-страница. Мы хотели сделать графический дизайн в браузере, но никто не знал, как — или какие ошибки могут случиться. Не было ни CMS (почти), ни CSS, ни JS, ни видео, ни анимации. Стандартов не было.

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

Посмотрите на 2018 год, мы можем сделать в браузере все. От массивных макетов до микротипографики, анимации и видео. И что мы делаем с этими невероятными возможностями? Контейнеры в контейнерах в контейнерах. Гигабайты визуально схожих мобильных страниц, загрязненных JavaScript. Общие шаблоны, которые следуют тем же визуальным правилам. Если бы мой младший я мог видеть состояние веб-дизайна через 23 года, он был бы очень разочарован.

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

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

Каждой команде было предложено разработать редизайн для существующего веб-сайта. В 2017 году я провел курс веб-дизайна по теме дизайна интерфейсов в Потсдаме, Германия. Использовать технологический потенциал современных веб-технологий как инструмент для вашего творчества. Задание было очень четким: представлять браузер как пустой холст и создавать выразительные, образные визуальные впечатления. Иметь свою позицию. Не ограничивать себя вопросами удобства использования, удобочитаемости и гибкости. переводчика “соответствие ожиданиям пользователей”). Не принимать во внимание Erwartungskonformität (прим.

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

1. ZKM Фредерика Хааза и Джонаса Кепфера

image

Очень подходящий выбор, поскольку ZKM является одним из самых известных выставочных площадок для медиа-искусства в Германии, но сайт ZKM довольно стандартный. Фредерик и Йонас выбрали веб-сайт Zentrum für Kunst und Medien (ZKM) в качестве отправной точки для своих экспериментов и исследований. Он функциональный, но ему не хватает авангардного утверждения, которое представлено художественными работами на выставках.

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

Просмотрите редизайн ZKM.

2. Streem Дарьи Тис, Белы Курек и Лукаса Фогель

image

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

Просмотрите редизайн Streem.

3. Medium Амели Кирхмайер и Фабиана Шульц

image

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

Просмотрите редизайн Medium.

4. Hacker News Фабиана Динклажа и Флориана Зии

image

Сайт социальной сети — это агрегатор новостей, ориентированный на компьютерную науку и информационные технологии. Фабиан и Флориан превратили Hacker News в интерактивную визуализацию. Фабиан и Флориан взяли существующую структуру и превратили ее в типографическое пространство временных линий и сетей. Его дизайн — голые кости, но он имеет сложную функциональность для голосований и обсуждений. Они также связали свой дизайн с API Hacker News, поэтому вы можете использовать его для чтения сайта. Визуальное представление основано на последовательности и связях новостей и комментариев.

Просмотрите редизайн Hacker News.

***

Мы должны применить этот совет к текущему состоянию веб-дизайна. Дэвид Карсон однажды сказал: «Не путайте коммуникацию с четкостью» (don’t confuse communication with legibility). Но они не должны определять и ограничивать свой визуальный репертуар. Четкость, удобство использования, отзывчивость и, в особенности, доступность являются важными качествами современного Web’a. Если вы приравниваете стереотипы к юзабилити, вы не понимаете ни визуального дизайна, ни ориентированного на человека дизайна.

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

Перевод выполнен при поддержке компании EDISON Software, которая профессионально занимается разработкой для web и недавно сделала редизайн своего сайта.

P.S.

Приведу полезные комментарии хабрачитателей к прошлой публикации противоречивой статьи

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

Интернет страдает от отсутствия разумной стандартизации.
Я как пользователь хочу зайти на сайт и не продираться сквозь поток «творчества» дизайнера.
— eugene_bb

Были сайты, сделали нечто под девизом «я художник, я так вижу».
Как заметил выше vlreshet выше, сайты создаются для взаимодействия людьми, а не для воплощения фантазий дизайнера. Чё-т это не редизайны, а дичь какая-то. Сайт это инструмент, которым в первую очередь должно быть удобно пользоваться, а фантазия дизайнера должна быть далека от первого места(а в таком проявлении, как в ваших «редизайнах» ей даже и последнего места нельзя давать).

Интернет страдает от недостатка воображения

Уже сейчас некоторые фантазии дизайнеров выливаются в мегабайты загружаемых на сайт шрифтов и изображений.
Для выплеска фантазии – это в промо сайты, которые пачками публикуют на awwwards: фантазия на всю катушку, местами круто, очень редко полезно, но в общем своей массе бессмысленно.
В обычном вебе для людей такой фантазии не место
— Ashot Он наоборот уже страдает от излишка фантазии.

Дизайнеры такие дизайнеры…
— berezuev Зачем они сделали из Медиума Упячку?

Ах да, их же ещё и читать нужно! Почему все книги выглядят одинаково?

Ах да, они же ездить должны! Почему все автомобили выглядят одинаково?

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

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

Дизайнеры не так уж и плохо решили поставленную задачу. Комментаторы — внимательнее читайте статью. Обратите внимание, что в постановке задачи сказано: «Забейте на пользователей, они все равно ни черта не понимают»:).

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


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

[Перевод] Интервью с Дэвидом Гобелем

Дэвид любезно согласился дать LEAF очень интересное интервью. Дэвид Гобель – изобретатель, филантроп, футурист и ярый сторонник технологий омоложения; вместе с Обри де Греем он известен как один из основателей Methuselah Foundation и как автор концепции Longevity Escape Velocity (LEV), ...

10 долларов на хостинг: 20 лет назад и сегодня

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