Каталог товаров

Мнение: Скевоморфизм и пользовательский интерфейс

Категории
18.12.2012
В продолжение темы скевоморфизма не менее интересно узнать, что думают сами разработчики таких приложений. Например, свое отношение к скевоморфизму как явлению не так давно высказал дизайнер Кристофер Давнар из Realmac Software, которая выпускает популярные программы Courier, RapidWeaver, LittleSnapper, Analog и Clear. Далее — прямая речь.

В продолжение темы скевоморфизма не менее интересно узнать, что думают сами разработчики таких приложений. Например, свое отношение к скевоморфизму как явлению не так давно высказал дизайнер Кристофер Давнар из Realmac Software, которая выпускает популярные программы Courier, RapidWeaver, LittleSnapper, Analog и Clear. Далее — прямая речь.

Скевоморфизм — это что-то такое, к чему пользователи привыкли в приложениях для iPhone, iPad и даже для Mac. Он очень узнаваем, и именно Apple ответственна за возвращение симулякров (симулякр — «копия», не имеющая оригинала в реальности — прим. ред.) в дизайн пользовательского интерфейса iOS, а затем и в настольные системы OS X Mountain Lion. Давайте начнем с разбора самых распространенных ошибок, связанных с этой терминологией, которых сейчас довольно много.

Что это такое?

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

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

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

Что не является скевоморфизмом?

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

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

Почему Apple это сделала, чего она пыталась добиться? Ну конечно, уникальный интерфейс выгодно выделяет приложение на любом iPhone или iPad. Оно хорошо узнаваемо и расчитано на рядового пользователя. Это простое в использовании приложение, которое выглядит дружественно и имеет мягкие, светлые, теплые цвета. Возможно, именно эти критерии были основными в разработке программы, и дизайнеры решили, что наиболее близко им отвечает именно кожа, — кто знает. К сожалению, этот факт так и останется одной из жизненных тайн, как и многие другие сомнительные варианты интерфейсов, появившихся на свет на Infinite Loop, 1 за последние несколько лет.

Являясь новым модным трендом, скевоморфизм, тем не менее, не новое явление. Самый ранний пример реализма в интерфейсе, на мой взгляд, это «калькулятор», который поставлялся вместе с Macintosh в 1984 году. Даже сейчас на Mac и в iOS его дизайн по-прежнему такой же, как у реального объекта. Примерно так же появилось и понятие рабочего стола — благодаря аналогии с местом, на котором можно разместить папки, документы и файлы. Причина этого проста — помочь новым пользователям освоить новые технологии. Сейчас мы находимся на этапе, когда постоянно разрабатываются и внедряются новые технологии, но неужели мы все еще должны придерживаться мнения, будто чем релистичней выглядит объект, тем проще он в использовании, или мы можем придумать что-то более умное?

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

Что здесь хорошего?

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

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

При продаже приложений через App Store важно помнить две вещи:

  • Клиенты будут судить о вашем приложении по его иконке.
  • Клиенты будут судить о вашем приложении по вашим скриншотам.

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

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

Почему это может не работать?

Итак, скевоморфизм не так уж плох, если он помогает людям понять, как работают новые продукты и приложения. Но, к сожалению, дела не всегда обстоят так хорошо, как в iBooks. Давайте взглянем на «Контакты» в iPad и OS X.

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

Apple решила реализовать одинаковые «Контакты» в iPad, веб-интерфейсе iCloud и на Маках с целью визуальной согласованности, сохраняя интерфейс сенсорных устройств и в настольных системах. Такой подход ломает всю наработанную парадигму пользовательского интерфейса на Mac, добавляя элементы, в которых не используются системные шрифты, детали окон, которые имеют другой процент заполнения, нестандартные рамки, иное позиционирование поискового окна, а также много других нюансов.

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

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

С точки зрения эстетики

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

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

Сравните картинки iBooks и «Контакты». Первая программа точно имитирует вид книги, если на нее смотреть сверху вниз, в то время как вторая программа выглядит плоско и нереалистично. С другой стороны, точной детализации недостаточно: приложение должно мудро взаимодействовать с пользователем, как уже упоминалось ранее. Мы в Realmac очень заботимся о хорошем дизайне и являемся приверженцами идей, изложенных Дитером Рамсом в книге «Десять принципов хорошего дизайна» и используем их в разработке интерфейсов. Не секрет, что Джони Айв и его команда в Apple тоже разделяют эти идеи, и много людей ожидают воплощения подобной дизайнерской этики в iOS и OS X, особенно после недавних кадровых перестановок в Купертино.

Вдохновение от реальности

Чего многие, возможно, не заметили — в Apple есть несколько приложений, напоминающих продукты Braun, которые разработал Рамс. Музыка на iPad напоминает проигрыватель Braun SK 4, а калькулятор смахивает на знаменитый Braun ET 66.

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

Учитывая изложенные мысли, я считаю, что скевоморфизм в приложениях не является чем-то плохим. Просто разработчикам следует проверять, все ли  сделано правильно. Ведь невозможно полностью избежать любых скевоморфных деталей, каким бы ни был графический стиль приложения, но они должны быть знакомы пользователю, оставлять у него ощущение, что приложение использует ту же логику, что и операционная система, будь то iOS или OS X. Ведь очень легко перейти из одной крайности в другую, и у нас есть опыт обоих, сначала с Courier, а потом с Clear, когда мы поняли, что одна из главных вещей, которые нужно учитывать при разработке приложения, — это его характер. Минималистичный чистый интерфейс Clear рисковал выглядеть холодным и стерильным, но добавив ему настроения в виде цвета и звука без излишних трюков, мы получили веселое приложение и не ощущали необходимости украшать его бессмысленными текстурами.

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

Источник: блог Realmac Software.

Вас также может заинтересовать: купит iphone.

Читать дальше...