IT-технологии не стоят на месте, а вместе с ними развиваются и меняются тенденции в веб-дизайне и компьютерной графике. Именно благодаря стараниям программистов пользователи смартфонов и современного программного обеспечения могут наслаждаться качественными, удобными и многофункциональными приложениями.
У каждого стиля есть свое предназначение и задачи, которые он решает. Так, например, скевоморфизм, о котором пойдет речь в данной статье, был призван облегчить процесс перехода пользователей из реального в мир виртуальный.
Удалось ли ему справиться с этой задачей и почему он так стремительно потерял популярность, разберемся вместе.
Что такое скевоморфизм?
В последние годы эстетика пользовательских интерфейсов следовала доминирующей идеологии, имитирующей реальный мир. Философия, которая легла в основу большинства современных пользовательских интерфейсов, называется скевоморфизмом (от греческого «skeuos» – сосуд или инструмент и «morph» – форма) [Fast Company, 2012].
Скевоморфизм – термин, наиболее часто используемый в дизайне графического пользовательского интерфейса для описания объектов, которые имитируют внешний вид и образ своих реальных аналогов. Данные изображения максимально точно передают, как человек может с ними взаимодействовать.
Сам скевоморфизм является производным объектом, который сохраняет декоративные элементы конструкции, необходимые в оригинале. Этот термин может применяться как к физическому, так и к цифровому творению. Часто скевоморфный дизайн заимствует определенные образы из прошлого, пытаясь тем самым добавить реалистичности в те или иные объекты.
Другими словами, это означает копирование формы и материальных качеств чего-то, что больше не является необходимым по своей сути. Все это делается с целью придания новым дизайнам комфортных и знакомых черт.
Применительно к пользовательскому интерфейсу логика состоит в том, что это сделает его более интуитивным и удобным благодаря имеющимся знаниям об аналоговом объекте из реального мира [Fast Company, 2012].
Дизайнеры используют технологии, градиенты, хром и текстуры, чтобы сделать цифровое программное обеспечение похожим на объекты реального мира, которые они должны заменить. Иконки, используемые в сквеморфизме, максимально приближены к реальным изображениям за счет объема, мягких линий и игры теней.
Скевоморфизм касается концептуального моделирования объектов окружающего мира. При этом не требуется, чтобы эти объекты выглядели точно так же, как их физические аналоги. Кроме того, он может присутствовать в чем угодно, от тактильной обратной связи до дизайна звуковых эффектов.
В программном обеспечении скевоморфы находятся повсюду. Это и приложение-календарь в виртуальном кожаном переплете или приложение для подкастов, которое выглядит как древний магнитофон с кассетой. Папки рабочего стола выглядят как физические папки для хранения файлов, корзина для мусора – как корзина для бумаг, а кнопка «сохранить» – как дискета. [Fast Company, 2014].
В качестве примера скевоморфизма можно также привести звуки, имитирующие звуки затвора пленочных фотоаппаратов или переворачиваемые страницы в приложениях для чтения, похожие на страницы реальных книг.
В реальном мире скевоморф – это декоративная версия чего-то, что в более раннем продукте было функциональной необходимостью: ложные звуки затвора в цифровых камерах, поддельные свечи в электрических люстрах, искусственная кожа или мех [Scientific American, 2013].
«Это слово использовалось в технологической индустрии всего несколько лет, но его значение изменилось», – говорит Дэн О’Хара, академик из Бирмингемского городского университета. «Скевоморфы – это не совсем то, что можно создать», – говорит он. «Они возникают непреднамеренно, когда эстетические стили передаются не задумываясь» [BBC News, 2013].
По его словам, изначально моторы устанавливались в передней части автомобилей, потому что лошади тащили телеги спереди. Слово «лошадиные силы» само по себе является скевоморфом, оставшимся после того, как лошади как вид транспорта, потеряли популярность [BBC News, 2013].
Применение скевоморфизма в дизайне, чтобы сделать интерфейсы более привычными и, следовательно, более простыми в использовании уходит корнями в 1980-е годы – в ранние дни компьютерных и мобильных вычислений. Одним из первых его сторонников был основатель компании Apple Стив Джобс.
Идея предпринимателя была предельно ясна: сделать компьютерные интерфейсы интуитивно понятными для пользователей. Джобс считал, что компьютеры должны быть настолько легкими в использовании, чтобы даже новичок мог освоить их только на основе инстинкта. Он отстаивал стиль дизайна, в котором цифровые элементы напоминали объекты реального мира, знакомые абсолютно каждому [BBC News, 2013].
Например, ранние версии мобильной операционной системы iOS, используемой компанией Apple, часто применяли скевоморфизм в пользовательском интерфейсе (например, фотографии с белыми полями, похожие на реальные фотографии). Скевоморфизм в iOS широко рассматривался как одна из причин, по которой он был настолько интуитивно понятным в использовании людьми, которые никогда раньше не видели сенсорные смартфоны.
Конечно, эстетика влияет на работу как в хорошем, так и в плохом смысле. Визуальное оформление пользовательского интерфейса может вызвать эмоции, которые сделают продукт более привлекательным и полезным в использовании. Но именно скевоморфизм помог целому поколению в процессе обучения вступить в цифровую эру.
Плюсы и минусы скевоморфизма
Скевоморфизм хорошо справлялся с обучением людей использованию новых технологий. По мнению исследователей, использование скевоморфного дизайна в iPhone было хитрым и одновременно очень эффективным решением сложной проблемы: сделать так, чтобы современные технологии, которые пользователи могли видеть только в научно-фантастических фильмах, казались им таким же нормальными и дружелюбными, как их повседневные действия [Fast Company, 2014].
Данная методика принесла свои плоды: люди быстро привыкли к удобному и реалистичному дизайну телефонов. Однако после того, как они научились использовать смартфоны по максимуму, скевоморфизм утратил свою полезность. Никому больше не было необходимо видеть обтянутые кожей приложения-календари, чтобы понять, как ими пользоваться.
Скевоморфизм идеально справился с задачей обучить пользователей новым технологиям за счет устойчивых ассоциаций с объектами из реального мира. Но иногда возникают ситуации, когда на давно ставшие привычными процессы необходимо взглянуть по-новому, чтобы раскрыть их с новой стороны (да, кстати, наша онлайн-программа «ТРИЗ на практике» простыми словами расскажет о сложных вещах. Пройдя ее, вы сможете, развить свои творческие способности и находить нестандартный подход к любым задачам и проблемам).
Помимо очевидного плюса, скевоморфизм все же внес определенный хаос и смуту. Скевоморфный дизайн привел к огромному беспорядку на рабочем столе, привнеся в компьютеры слишком много бесполезных деталей, которые лишь перегружали интерфейс.
Противники скевоморфизма утверждают, что естественно выглядящие объекты могут сделать интерфейс телефона или сайта слишком загроможденным. Они также убеждены, что некоторые элементы, имитирующие реальные, устарели и бессмысленны для пользователей. Например, дискета для компьютерной команды «Сохранить» потеряла свою актуальность так же, как реальные дискеты перестали использоваться с появлением электронных носителей нового поколения.
Заимствуя образы реальных предметов, скевоморфный дизайн зачастую заимствует и их недостатки. Ярким тому примером является одна строка в приложении «Калькулятор», которое переняло данную особенность от своего настоящего прототипа.
При грамотном воплощении и разумном подходе скевоморфизм способен вызвать сильные ассоциации компьютерных элементов с их реальными образами. Но иногда данные ассоциации проявляются настолько сильно, что могут стать препятствием на пути улучшения уже существующих программ и приложений. К тому же, некачественно воплощенный в реальность, он может отталкивать своим перегруженным и безвкусным дизайном [TNW, 2015].
Если бы скевоморфизм был просто уродливым визуальным стилем прошлого, никто бы про него не вспоминал. Но есть более структурная функция скевоморфизма, связанная с обучением пользователей использованию новых технологий [Gizmodo, 2014]. Сторонники концепции утверждают, что люди никогда не смогут так привыкнуть к цифровому миру, как к миру физическому, поэтому простой скевоморфизм будет по-прежнему полезен.
В 1970-х годах экологический психолог Джеймс Дж. Гибсон описал «Теорию финансовых возможностей». Он утверждал, что люди воспринимают окружающую среду как серию «аффордансов» или объектов, которые предлагают некоторые ключи к разгадке их потенциального использования или действия. Они помогают понять, что то или иное действие возможно в окружающей среде [Gizmodo, 2014].
В реальном мире ручка на двери – это доступность. В цифровом мире кнопка, которая выглядит так, будто ее можно сдвинуть, является аффордансом. Люди воспринимают эти визуальные подсказки об окружающем мире и действуют в соответствии с ними.
Каждое использование скевоморфизма представляет собой то, что американский учёный в области когнитивистики, дизайна и пользовательской инженерии, преподаватель и автор книги «Дизайн повседневных вещей» Дональд Норман описывает как «предполагаемые возможности». Данные возможности говорят пользователю, что на экране электронного устройства возможно совершить определенную операцию [Gizmodo, 2014].
Воспринимаемые аффордансы не имеют абсолютно ничего общего с минимализмом, беспорядком или господствующим стилем. Они помогают пользователю понять, на что способно конкретное устройство, кнопка или приложение, так же интуитивно, как понятно предназначение ручки на двери [Gizmodo, 2014].
Поэтому прежде чем критиковать скевоморфизм за излишнюю загруженность дизайна, стоит принять во внимание, что часто человеческому мозгу для правильного восприятия нужны эти «дверные ручки» – предполагаемые возможности. Исследователи полагают, что они не потеряют своей актуальности и значимости спустя десятилетия.
Скевоморфный дизайн определенно играет важную роль. Он особенно полезен, когда пользователь изменяет способ выполнения известной задачи. Например, если он переходит от создания заметок в реальном блокноте к созданию их на экране. Именно скевоморфизм помогает человеку мысленно подготовиться к этому за счет схожести приложения на экране, необходимого для создания заметок, и обычного блокнота [Forbes, 2013].
Простыми словами, скевоморфизм – это концепция дизайна, согласно которой предметы должны представлять объекты реального мира. Благодаря ему пользователи могут лучше понять элемент интерфейса, если он ведет себя, как реальный аналог. Связано это с тем, что живут они в реальном мире, а не в виртуальной реальности.
Эта идея полностью подтверждается когнитивной наукой. Если вы знаете, как пользоваться выключателем света дома, то вы легко разберетесь, как сделать это на своем телефоне при условии, что второй будет максимально похож на первый [Prototypr.io, 2018].
Немецкий промышленный дизайнер Дитер Рамс разработал 10 принципов хорошего дизайна, среди которых есть и пункт о том, что дизайн должен делать продукт понятным. Скевоморфизм отлично подходит для этих целей [Prototypr.io, 2018].
Хотя люди могут знать, как пользоваться выключателем света в реальном мире, в какой-то момент им нужно было узнать, как это сделать в телефоне. Всегда есть пользователи, которые плохо знакомы с технологиями или новинками в устройствах, а переключатели света по-прежнему встречаются гораздо чаще, чем iPhone.
Смерть скевоморфизма
Скевоморфизм пережил несколько этапов. Сначала он был очень полезной и распространенной концепцией среди дизайнеров, но когда приложения достигли «пика скевоморфизма», специалисты начали думать иначе. Они утверждали, что пользователи выросли в понимании графических интерфейсов до такой степени, что отпала необходимость имитировать физические объекты [Prototypr.io, 2018].
Скевоморфизм проявлялся в самых разных формах: графический дизайн, дизайн взаимодействия, дизайн тактильной обратной связи, слуховой дизайн и т.д. Вскоре желание избавиться от ярких, реалистичных текстур привело к тому, что данный стиль был вытеснен. По мере того как негативная реакция на скевоморфизм усугублялась, дизайн пользовательского интерфейса становился все более запутанным и менее понятным.
В 2007 году журнал Forbes объявил о смерти эпохи скевоморфизма. Apple (а вскоре за ними и Google) остановились на новой форме – плоском дизайне или flat design [Interaction Design Foundation, 2020]. Компания объявила о радикальном пересмотре подхода к визуальной составляющей своего программного обеспечения на ежегодной конференции разработчиков в Калифорнии. Представители Apple заявили, что их новая мобильная операционная система откажется от визуальных метафор реального мира в пользу урезанного минималистского подхода.
Индустрия приветствовала смерть скевоморфизма и провозгласила плоский дизайн новым королем. Поступая так, специалисты отказались от принципов, которые помогли бы сделать их приложения понятными, и соединили имитацию реального мира с языком графического дизайна.
Компанией, активно продвигающей тренд плоского дизайна, стал компьютерный гигант Microsoft. Отчасти данный стиль возник из-за того, что они активно противопоставляли себя Apple, а потому старались сделать максимально отличающийся продукт.
Операционные системы Microsoft работали в противоположном направлении. Их интерфейс был полностью цифровым, без каких-либо ссылок на физический мир. Дизайнеры компании были четко убеждены, что для передачи функций программного обеспечения им больше не нужна «имитация древесины и зеленого войлока» [Scientific American, 2013].
Плоский дизайн требовал, чтобы графические пользовательские интерфейсы были освобождены от беспорядка. Не было необходимости в скошенных краях, градиентах, отражениях и скевоморфизме, а визуальная четкость была поставлена во главу угла. Теперь вместо максимально реалистичных фигур и элементов пользователи стали наблюдать минималистичный дизайн с плоскими фигурами и крупным шрифтом.
Дизайнеры Apple также начали избавляться от реалистичности своих приложений и предпочли простоту и чистоту моделированию. Градиенты и текстуры были исключены из приложений и сочтены безвкусными. Бывший главный директор по дизайну компании Apple Джони Айв сказал, что реализм iPhone больше не нужен [Prototypr.io, 2018].
Однако не все остались довольны данным решением – некоторые все же сожалели о закате скевоморфизма. Мэтт Уэбб, руководитель дизайнерской компании, считает, что именно скевоморфизм улучшает понимание продукта. «Технологии становятся настолько сложными, что нам придется найти способы, чтобы люди поняли, на что они способны, не имея возможности, чтобы объяснить это», – говорит он [BBC News, 2013].
Так зачем же все-таки отходить от скевоморфизма, если данная концепция действительно полезна? Отчасти это было просто предпочтением дизайна: многие любят чистоту и функциональность больше, чем яркость и перегруженность визуальными элементами.
Возможно, это было связано с эффективностью: старые детали действительно снижали производительность операционной системы.
Еще одной причиной отказа от скевоморфизма в веб-дизайне стала растущая зрелость потребителей. Рынок смартфонов в целом начал развиваться только в 2007 году с появлением оригинального iPhone. С тех пор он стал технологией с самым быстрым распространением в истории человечества.
Причиной, по которой компания Apple отдала предпочтение скевоморфизму, была визуальная привлекательность реальных изображений. Сегодня, например, анимация, имитирующая переворачивание страниц в электронном приложении для чтения, кажется нам чем-то обыденным и не вызывает особого восторга. Но во времена, когда iPhone только начали внедрять подобный дизайн в свою продукцию, это не могло не впечатлить пользователей.
Кроме того, iPhone был абсолютно непривычным и новым устройством для большинства людей. Именно поэтому так важно было установить связь между реальным миром и современными технологиями с помощью реалистичного дизайна. Он позволял людям чувствовать себя уверенно и комфортно при использовании новых устройств.
За счет своей наглядности и сходства с предметами реального мира скевоморфизм упростил процесс понимания компьютеров. Однако сейчас существует целое поколение, которое никогда не знало мира без компьютеров. Следовательно, визуальная метафора больше не нужна.
Эти конструктивные особенности, как утверждают критики, больше не помогают новичкам совершить переход от реального мира к миру компьютерных технологий. Пользователям больше не нужны неприглядные бумажные листы, чтобы понять, что они пользуются календарем. Анимация, имитирующая перелистывание страниц, просто замедляет читателя ради ненужной демонстрации. По мнению критиков, зависимость от визуальных метафор реального мира может сдерживать более творческий, компактный или понятный дизайн [Scientific American, 2013].
Скевоморфизм представляет собой переходный дизайн, который помогает пользователям преодолеть барьер от старых способов к изучению чего-то нового. Однако сейчас почти все перешли этот рубеж. На развитых рынках, в богатых странах все взрослые, которые когда-либо могли купить смартфон, уже купили его. [Forbes, 2013].
Важно понимать, что визуальный стиль – всего лишь один из способов в достижении цели. В дизайне, в отличие от точных наук, не бывает правильных или неправильных ответов. Каждый дизайнер вправе создавать свой собственный стиль, руководствуясь исключительно внутренним мироощущением и чувством красоты. Осознание, какой именно стиль будет уместен в том или ином дизайне, приходит с опытом и благодаря постоянным экспериментам и поискам собственного почерка.
Заключение
Скевоморфизм в программном обеспечении занимает особенное место и играет важную роль. При правильном использовании и разумном подходе он может облегчить жизнь с новой программой и передать функции с помощью простых визуальных метафор (ведь приложения камеры всегда будут иметь значки камеры).
Но, как и с любой концепцией дизайна, здесь можно зайти слишком далеко. В тот момент, когда скевоморфизм делает программное обеспечение менее приятным в использовании, кто-то должен его сдержать.
Хотя дизайнерам больше не нужно возвращать текстуры 2008 года в текущее десятилетие, они не должны забывать о преимуществах привнесения знакомого, адаптивного реального мира в свои дизайны.
