Почему важно понимать и ценить исторические наработки пользовательского интерфейса. Экскурс в историю дизайна. Борис Мюллер и Фрэнк Рауш
Студенты традиционно изучают искусство и дизайн, исследуя мастеров, анализируя, делая наброски и интерпретируя великие идеи прошлого. При этом они понимают идеи, концепции и мотивы, стоящие за визуальной формой.
В дизайне пользовательского интерфейса эта практика, как ни странно, отсутствует. Мало того, что мы, как профессиональные дизайнеры интерфейсов, испытываем недостаток в осознании истории дизайна, мы также высокомерно предполагаем, что с каждой новой технологией старые дизайны устаревают. Но это не так.
Когда мы думаем о старых компьютерах (сейчас «старые» значит старше двух лет), мы обычно думаем об ограничениях и недостатках. Меньшие экраны, меньшее разрешение, меньшая вычислительная мощность. Но идеи, определявшие дизайны их интерфейсов, часто не зависели от технических ограничений. Сегодня они все еще могут дать нам важные и актуальные идеи.
В течение многих лет UI дизайн был слишком новым, чтобы иметь какие-либо исторические примеры. Первые UI дизайнеры пришли из других дисциплин, таких как промышленный дизайн, типографика, дизайн коммуникаций и принесли примеры дизайна из своих областей.
Дизайн пользовательского интерфейса постепенно становился все более устоявшимся. Однако он никогда не развивал изучение собственных достижений и исторических шедевров. Все современное, передовое, перспективное. Дизайны постоянно заменяются и обновляются. Поскольку с каждой итерацией технология улучшается, логично предположить, что дизайн также улучшается.
Это, как уже упоминалось, не соответствует действительности. Великолепные дизайны иногда заменяются пресными идеями. Замечательные интерфейсы забыты или устарели – иногда после одного обновления. Это вызывает сожаление, поскольку интерфейсы являются не только «функциональными», но и культурными сущностями.
Пользовательские интерфейсы – это культурные артефакты
В нашем понимании, графические пользовательские интерфейсы являются объектами дизайна. Они являются визуальной и культурной силой, которая доминирует и которую не замечают. Всякий раз, когда Facebook меняет свой интерфейс, это влияет на общение миллионов людей. В этом смысле интерфейсы являются культурными артефактами. Кроме того, мы считаем, что, когда вы учитесь, как проектировать интерфейс, вам следует изучить не только самые последние рекомендации, но также историю и основные моменты проектирования интерфейса.
По сравнению с другими дисциплинами дизайна, дизайн интерфейса эфемерен. Вы все еще можете купить кресло для отдыха, которое было спроектировано Рэем и Чарльзом Имзами в 1956 году. Но мы не можем наслаждаться прекрасным приложением Calcbot 2010 года на текущем iPhone, потому что последняя версия операционной системы просто не запустит старые приложения.
Проектирование экранов и взаимодействий – это проектирование мимолетных моментов. Давайте сравним дизайн интерфейса с постановкой оперы: после окончания сезона вы сможете оценить производительность только в репродукции. Сама репродукция – лишь бледная имитация реального опыта, но она позволяет запоминать, документировать и воспроизводить его. И, в конце концов, опера по праву считается королевой драматического искусства.
В любом случае, UI дизайн достиг точки, когда взгляд в прошлое может дать вдохновение и понимание нашей деятельности. Мы можем учиться на прошлом – на ошибках и на достижениях. Это осознание прошлых достижений должно быть частью как учебной программы, так и практики проектирования.
Промышленные дизайнеры знают о работах Дитера Рамса, Рэя Имза и Этторе Соттсасса. Дизайнеры коммуникаций знают о работах Паулы Шер, Отла Айхера и Эйприл Грейман. Поэтому имеет смысл, чтобы дизайнеры пользовательского интерфейса знали о работах Корделла Рацлаффа, Сьюзен Кэр и Кая Краузе.
Чем мы руководствовались
Чтобы внести свой вклад в изучение истории нашей отрасли, мы составили список классиков интерактивного дизайна. Наша цель состояла в том, чтобы включить примеры, которые мы считаем вдохновляющими и проницательными – что было очень сложно, поскольку мы хотели создать краткий список. Поэтому мы решили сосредоточиться на специализированном программном обеспечении – в очень широком смысле – и упорядочить дизайны в хронологическом порядке. Мы не рассматривали интерфейсы игр, веб-сайтов или художественных проектов, иначе список был бы действительно слишком длинным.
Прежде чем мы перейдем к нашему списку классики дизайна интерфейса, хотим сделать несколько замечаний касательно нашего выбора:
- Наш список состоит из дизайнов, внесших значительный вклад в развитие UI дизайна. Мы не говорим о «красивом программном обеспечении». Если вы спросите программиста о красивом софте, он неизбежно назовет такие примеры, как TeX, Git или компилятор C, но это далеко от нашей темы.
- Мы считаем, что важно указывать автора. В большинстве творческих дисциплин обычно упоминается команда дизайнеров проекта или ведущий дизайнер. Те же правила должны применяться к дизайну пользовательского интерфейса. Если мы понимаем пользовательские интерфейсы, как культурные артефакты, мы должны выделить дизайнеров, которые их создали. Поэтому, где было возможно, мы отдавали должное отдельным дизайнерам интерфейсов. Если мы где-то ошиблись или вы хотите предложить больше имен – пишите в комментариях!
- Вы заметите, что многие дизайнеры, о которых мы говорим – белые мужчины. Это отсутствие разнообразия расстраивает; но важно отметить, что сообщество меняется! Есть много женщин, которые оказали и оказывают сильное и инновационное влияние на разработку в мире интерактивного дизайна и дизайна пользовательского интерфейса: Джой Маунтфорд, Бренда Лорел, Терри Ирвин, Джиллиан Крэмптон Смит, Фиона Раби, Геше Джуст, Лиза Страусфельд, Хизер Мартин, Ирен Ау, Симона Маски, Венди Марч, Кэти Перл, Элизабет Черчилль, Кристина Водтке, Джули Чжуо, Кэтрин Кураж – это лишь некоторые из них. Если вы считаете, что мы упустили важный вклад женщин в сферу дизайна, будем рады услышать ваши отзывы!
- Последнее, но не менее важное: примеры в нашем списке предназначены для оценки, анализа и интерпретации, а не для подражания. Нет смысла подражать дизайну Microsoft Bob, но мы считаем, что вы все еще можете найти много идей из дизайн-решений, которые привели к созданию Bob.
Итак, хотя многие из приведенных ниже примеров визуально и концептуально прекрасны, мы сознательно включили ряд проектов, которые сегодня выглядят странно и даже абсурдно. Спорные и необычные проекты являются частью дискурса дизайна и часто оказывают большее влияние, чем пресные и скучные дизайны.
Цель этого списка – продемонстрировать, что краткая история UI дизайна полна удивительных визуальных идей, интригующих концепций и замечательных дизайнов, которые все еще актуальны сегодня.
Итак, представляем вам список классики дизайна пользовательского интерфейса!
NLS / oN-Line System (1968)
Источник: YouTube
С этого все началось – презентация «Mother of All Demos» Дугласа Энгельбарта и его команды, представленная в 1968 году.
Странное чувство возникает при просмотре демоверсии NLS или «On-Line System». Она кажется невероятно старой и невероятно современной одновременно. Пятьдесят два года назад в этой короткой презентации Дуглас Энгельбарт постулировал и предсказал, как в 2020 году мы будем работать дома на карантине. Люди будут сидеть за экранами и компьютерами, подключенными к сети, будут использовать клавиатуру и мышь, писать и организовывать файлы и общаться с другими люди через видеосвязь. Это похоже на пророчество из фантастического фильма в стиле ретро.
Количество изобретений, которые представил Энгельбарт, ошеломляет. Мышь, аккордовая клавиатура, гипертекст, видеоконференцсвязь, ПО для рабочих групп, управление версиями, средства управления визуализацией – и последовательный, универсальный пользовательский интерфейс. Называть NLS революционным и инновационным – значит не сказать ничего.
Но важность NLS заключается не только в технологических достижениях. Удивительно то, что NLS имел отличный интерфейс. Это не беспорядочное сочетание функций, это согласованная и продуманная визуальная и интерактивная система. Это интерфейс, который хочет, чтобы его использовали. NLS уже является полноценным офисным пакетом.
Энгельбарт понимал важность дизайна, повествования, вариантов использования и умения привлечь внимание. Это демо – почти театральное представление, которое посредством интерфейса оживляет программное обеспечение.
И оно содержит лучшие оговорки по Фрейду в истории вычислений (2:18):
«Что, если бы […] вам, как интеллектуальному работнику, предоставили дисплей и компьютер, который был бы для вас живым весь день и который был бы мгновенно ответственным – хм... отзывчивым...?
Xerox Star (1981)
Интерфейс Xerox Star – также называемый ViewPoint (Источник: The Xerox ‘Star’: A Retrospective)
Интерфейс Xerox Star является одним из самых важных, влиятельных и в то же время забытых дизайнов XX века. Созданный Дэвидом Кэнфилдом Смитом и его командой, он определил и до сих пор определяет, как миллионы людей представляют себе работу компьютера. А благодаря концепции «метафоры рабочего стола» Xerox Star единолично сформировала то, что мы сейчас называем дизайном пользовательского интерфейса.
В то время как NLS выглядит немного архаично, интерфейс Xerox Star очень современный. Даже, если вы не знакомы с этой системой, легко понять, что означают элементы интерфейса. Вы можете сразу определить рабочий стол, окна, иконки, кнопки, меню и десктопные приложения. С Xerox Star компьютер стал интерфейсом, а интерфейс стал компьютером.
Одним из основных принципов интерфейса Xerox Star было представление о том, что пользователи имеют дело с файлами данных, а не с приложениями. Идея «документа» была необходима для дизайна Star. Документы визуально и концептуально очень заметны и отображаются в виде символов.
В последующие годы более успешные операционные системы, такие как Windows и macOS, отошли от этого строгого, ориентированного на документы подхода. Но сегодня влияние Xerox Star все еще заметно на миллионах настольных ПК.
Apple Macintosh / MacOS (1984)
Набор иконок для первого Macintosh (Источник: Susan Kare)
Скорее всего, вы читаете этот текст на компьютере, на котором установлена последняя версия macOS. Спустя тридцать шесть лет после своего первого появления в 1984 году, Macintosh живет и здравствует.
Первый Macintosh был вдохновлен Xerox Star. Тем не менее, в то время как Star была предназначена для серьезных бизнес-пользователей – и по соответствующим ценам – Macintosh был настоящим персональным компьютером. Меньше, дешевле, проще – и все же более универсальный. Он стал первым коммерчески успешным компьютером с графическим интерфейсом пользователя. Многие концепции и идеи, лежащие в основе NLS и Star, наконец-то достигли широкой аудитории.
В то время, как Ларри Теслер и Билл Аткинсон разрабатывали дизайн взаимодействия, Сьюзен Кэр отвечала за дизайн иконок, шрифтов и многих элементов интерфейса – особенно панели управления, которая во многих отношениях является выдающимся интерфейсом.
Панель управления первого Macintosh довольно плотная. Она имеет фиксированный макет без текстовых меток; визуально представляет язык (увеличение и уменьшение громкости); и использует крошечные иконки зайца и черепахи, чтобы указать скорость. Каждый аспект панели тщательно спроектирован и создан. Размер панели управления составляет всего 315 на 158 пикселей, но она характеризует эстетические качества и общий дизайн Macintosh.
Уровень визуальной и концептуальной согласованности первого Macintosh до сих пор не имеет себе равных. И это не случайно. Руководство «Macintosh User Interface Guidelines», изначально написанное и скомпилированное Джоанной Хоффман, стало первым систематическим описанием пользовательского интерфейса и сыграло важную роль в успехе Macintosh.
MacPaint (1984)
MacPaint от Apple Computer, 1984 (Источник: Wikipedia)
Без компьютеров современный графический дизайн был бы другим. Инструменты цифрового дизайна, которые мы используем сегодня, следуют принципам взаимодействия, которые можно проследить вплоть до MacPaint – палитры инструментов, которая переводит курсор в различные режимы взаимодействия, и имеет настройки для выбранного в данный момент инструмента – например, средства выбора паттернов в MacPaint. Это позволяет увеличивать изображение для более точного редактирования.
Эти рабочие процессы возникли не случайно, их тщательно создали дизайнер Сьюзен Кэр и разработчик Билл Аткинсон. Технологические достижения (MacPaint был невероятно быстрым для скромных вычислительных мощностей того времени) были такими же инновационными, как эстетика и эргономика экранной графики и взаимодействий.
Power Tools другие интерфейсы от Кая Краузе (1992–1999)
Photo Soap (1997) Следует отметить, что интерфейс изначально практически пуст. Состояние, которое вы видите на этом изображении, является результатом многочисленных взаимодействий.
Источник: Matthias Müller-Prove
Странно и замечательно. Для современных глаз все выглядит незнакомым и нетрадиционным. Но в то же время интерфейсы Кая Краузе не имеют аналогов в истории дизайна интерфейсов. Они с радостью игнорировали правила, стандарты и руководящие принципы – и они базировались на простой идее: не разделяйте инструменты и имидж.
За причудливыми и игривыми интерфейсами лежит идея, которую следует открыть заново: Кай Краузе понял, что графический интерфейс пользователя – это в основном просто изображение. Пиксель – это пиксель; меняется лишь семиотика.
Кай подвергает сомнению концептуальное разделение между вводом и выводом, между инструментом и средой, между кистью и холстом. В этом смысле экран является открытым и плавным пространством для манипуляций и взаимодействия. Наличие инструментов на панели инструментов – это просто общественная норма, воображаемое разделение, ограничивающее вашу свободу.
Интерфейс и среда не должны быть разделены. Когда кисть касается холста в физическом мире, они взаимодействуют в материальном смысле. Когда вы рисуете, они становятся единым целым. Интерфейсы Кая Краузе хотят передать тот же опыт, когда вы взаимодействуете с компьютером.
Сейчас скевоморфизм не в моде, но мы уверены, что он вернется. И, надеемся, с хорошей дозой изобилия и радости, которые Кай Краузе представил миру софта.
Magic Cap (1994)
Источник: guidebookgallery.org
Magic Cap была мобильной вычислительной платформой, созданной двумя бывшими инженерами Macintosh, Энди Херцфельдом и Биллом Аткинсоном. Платформа состояла из двух частей: (i) операционная система, предназначенная для работы на карманных девайсах с монохромными дисплеями, и (ii) серверная инфраструктура для координации программных «агентов», которые могли быть отправлены в сеть для выполнения задачи, и вернуться на девайс с результатами.
Операционная система Magic Cap была буквальной копией метафоры рабочего стола, с подробными иллюстрациями реального рабочего стола. Она даже расширила идею рабочего стола, добавив «комнаты», похожие на Microsoft Bob. Вокруг виртуального рабочего стола был офис, и даже прихожая, и другие комнаты. Magic Cap не была коммерчески успешной, но многие из ее идей были концептуальными, и многие из предложенных вариантов использования были идеальными. 15 лет спустя iPhone доказал, что основной принцип карманного компьютера не просто жизнеспособен, но и способен изменить мир.
Information Landscapes (1994)
«Financial Viewpoints» Лизы Страусфельд (Изображение было масштабировано; Источник: ACM и YouTube)
В 1994 году Мюриэль Купер представила радикальный взгляд на будущее. За год до запуска Windows 95 она полностью поставила под сомнения фундаментальные правила UI дизайна. В своей презентации «Information Landscapes», она и ее команда аспирантов предложили радикально открытые пространства, динамичные и гибкие информационные системы, прозрачность, одновременность, красоту и выразительность. Типографика больше не была заключена в прямоугольник; она плавала в многомерном, интерактивном пространстве. Ее концепция заставляет задуматься. Речь идет не о решении конкретных проблем интерфейса; речь идет о побеге из двухмерного мира и задаче воспроизведения аналоговых правил на экране.
Пока что концепт Мюриэль Купер не воплощался в реальном продукте. Но в глубине души мы все знаем, что именно так должны выглядеть компьютерные интерфейсы. Когда-нибудь так и будет.
BeOS (1995)
Источник: IconArchive, Wikipedia и guidebookgallery.org
BeOS никогда не была коммерчески успешной и, с точки зрения интерфейса, она не была радикальным отходом от таких предшественников, как Windows 3.0 и Mac OS 7, но она была визуально очень хорошо организована и удачно использовала различные оттенки серого для указания фокуса и структуры.
А еще были иконки, которые действительно выделялись. Они были невероятно четкими, понятными и привносили на компьютер стиль постмодернистского дизайна конца 80-х - начала 90-х годов. Подобно компании Alessi в мире кухонной посуды, иконки BeOS имели такое же значение для дизайна интерфейса. По словам Жан-Луи Гассе, они были созданы в 1991 году неизвестной и ныне несуществующей дизайнерской компанией под названием Palo Alto Design.
Иконки BeOS основаны на изометрической сетке и очень согласованной цветовой палитре. Доминирующий цвет синий (тот же цвет, что и у оборудования BeOS), различные оттенки оранжевого в качестве дополнительного контраста, ярко-серые и ярко-красные цвета. Псевдо 3D иконки были и до этого (особенно на NeXTSTEP), но никогда прежде не обладали подобной степенью согласованности и элегантности.
Mac OS 8 последовала примеру, добавив более яркие цвета и псевдо 3D. Irix добавил объемность и имел плавающие иконки. У Windows XP были яркие цвета. Но общее качество дизайна иконок BeOS по-прежнему намного выше конкурентов. Это настоящая классика дизайна.
Microsoft Bob (1995)
Источник: Microsoft
Когда в 1995 году был выпущен Microsoft Bob, его встретили с волнением; он пытался стать радикальным отходом от всех вычислительных философий, которые были до него. Bob приветствовал пользователя в дружественном виртуальном доме, использовал знакомые метафоры реального мира и имел индивидуальность. (На самом деле, у него было несколько личностей, которые вы могли выбрать).
Bob страдал от нескольких проблем, как на концептуальном уровне, так и в реализации. Концепция помощника работала не очень хорошо, потому что не было никакой симуляции интеллекта: персонаж виртуального помощника просто показывал листы с множественным выбором. Графика была детской, а неуклюжие рабочие процессы казались снисходительными. Не был предусмотрен вариант, что начинающие пользователи могли стать более опытными. Пользователь сталкивался с сильным контролем со стороны системы! Спустя всего год Microsoft Bob был снят с продажи. Пресловутый персонаж Clippy и его коллеги выжили и стали придирчивыми помощниками-маскотами в Microsoft Office, но позже были осмеяны аудиторией и, в конце концов, убиты.
Несмотря на его недостатки, крайне важно, что этот концепт был реализован в реальном продукте. Это показало, что идея, имеющая смысл в теории, может стать никому не нужной на практике. Единственный верный способ узнать это – реализовать ее.
Windows 95 (1995)
Источник: guidebookgallery.org
Windows 95 была, вероятно, самой раскрученной и самой ожидаемой версией операционной системы в компьютерной истории. Даже без широкого доступа в Интернет и задолго до появления социальных сетей всемирная маркетинговая кампания вывела Windows 95 на первую полосу всех изданий и даже в выпуски вечерних новостей. Его фирменный элемент управления интерфейсом, кнопка «Пуск», был в центре маркетинговой кампании вместе с треком Rolling Stones «Start Me Up».
Помимо всей этой шумихи, в плане юзабилити Windows 95 действительно стала шагом вперед по сравнению со старыми версиями Windows. Хотя, не все работало, как обещала реклама (Plug & Play?). Windows 95 была известна частыми аварийными сбоями, и, конечно же, технология не была настолько продвинутой, как OS/2 – но кто помнит OS/2? Все использовали Windows 95, и это определило, внешний вид десктопного программного обеспечения до конца 1990-х годов: скошенные серые прямоугольники, источник света в верхнем левом углу. Даже классическая Mac OS скопировала серый и скошенный вид, когда в 1997 году была представлена цветовая схема Platinum для 8-й версии ОС.
Macromedia Director (1996)
Для этой статьи мы выбрали Macromedia Director 6.0, так как он имел самый отточенный интерфейс. (Скриншоты сделаны авторами)
До Macromedia Director существовала Apple HyperCard. Идея о том, что начинающие пользователи могут создавать свои собственные интерактивные гипермедиа-приложения, восходит к 1987 году – за три года до изобретения Всемирной паутины. Разработчиком HyperCard был не кто иной, как Билл Аткинсон, создатель MacPaint.
Интерфейс HyperCard был довольно наглядным для своего времени, но Macromedia Director поднял идею создания интерактивных приложений на новый уровень. В интерфейсе Macromedia Director было что-то определенно очаровательное. Названия и элементы интерфейса были запоминающимися и визуальными. У вас был актерский состав, сцена, саундтрек и сценарий. Создание интерактивного контента не было простой задачей, но интерфейс говорил вам, что делать. Возможность создавать собственные интерактивные приложения, руководствуясь интерфейсом, была большим достижением Director.
Winamp (1997)
Источник: y2kaestheticinstitute
История Winamp начинается с нового файлового формата – MP3. Он был создан, чтобы сжимать высококачественное аудио в файлы приемлемых размеров. Вместе с растущими объемами жестких дисков и доступностью дисководов CD-ROM «копирование» компакт-дисков и передача музыкальных коллекций на персональный компьютер стало привлекательным. Так возросла популярность нелегального обмена файлами между пользователями. Winamp был создан для воспроизведения этих сжатых аудиофайлов, которые внезапно появились на каждом компьютере.
Дизайн интерфейса Winamp определил, внешний вид и работу цифровых музыкальных плееров. С выпуском 2-й версии в 1998 году Winamp стал площадкой для экспериментов с интерфейсом музыкального проигрывателя. Он популяризировал создание скинов. Внешний вид Winamp был в высшей степени настраиваемым, как и набор функций. Подключаемый интерфейс позволял экспериментировать с генеративными музыкальными визуализациями.
Музыкальный софт: ReBirth (1998) и Reason (2019)
ReBirth (выпущен в 1998 году) и Reason 9 (выпущен в 2016 году) – Источник: Reason Studios
Музыкальное программное обеспечение является одним из последних оплотов скевоморфного дизайна: интерфейсы имитируют внешний вид аналоговых кнопок, ползунков и кабелей. Даже Logic Pro X от Apple до сих пор использует много скевоморфных элементов, занимая особое место в программном ландшафте Apple. Примеры, показанные в этой статье – это ReBirth (1998) и Reason (2019), спроектированные и разработанные Reason Studios (ранее известная как Propellerhead).
Использование скевоморфизма в музыкальном софте иногда подвергалось критике, но это своего рода свидетельство любви, которую по-прежнему испытывают музыканты, к стойкам, ползункам, переключателям и кабелям. Традиции поддерживаются путем эмуляции аппаратных интерфейсов. Инструмент должен быть виден, чтобы быть услышанным.
В некотором смысле, музыкальный софт является одним из немногих примеров в дизайне интерфейса, где визуальный стиль важнее юзабилити. Это выражение любви – и мы должны ценить тот факт, что такой софт, как Reason, существует. Музыка – это эмоциональный бизнес, поэтому приятно видеть, что эмоции по-прежнему формируют интерфейс.
Transmit (1998–2020)
Среди независимых компаний-разработчиков Panic является одной из старейших, самых успешных и самых любимых. Их флагманский продукт Transmit – это две вещи: солидный образец технологии и урок маркетинга цифровых продуктов. Впервые выпущенный в 1998 году, он остался квази-стандартной программой передачи файлов для Mac. За эти 22 года культовая эмблема грузовика во многих итерациях всегда оставалась свежей. Проверенный временем интерфейс был первоначально спроектирован Кабелем Сассером (версии 1–3) и обновлен Невеном Мрганом начиная с версии 4.
Рассказы о продукте и компании сделали Transmit импульсивной покупкой для нескольких поколений веб-дизайнеров и разработчиков. Это популярное приложение с оригинальным брендингом.
Источник: Twitter
iPod Classic (2001)
iPod 2001 и 2005 годов (Источник: Apple)
В 2001 году MP3-плееры были очень простыми в использовании. У них было мало места для хранения музыки и много кнопок. Затем появился оригинальный iPod. Его ключевыми составляющими были компактный жесткий диск, сенсорное колесо с обратной связью и горизонтальные иерархические списки. Эта комбинация позволила просто перемещаться по огромным музыкальным библиотекам.
Макет трехмерных списков («Miller Columns») использовался для управления файлами в NeXTSTEP и позже в его преемнике, Mac OS X Finder. Их адаптация к небольшому экрану и оригинальный принцип iPod «один список за раз», сегодня можно найти практически в любом приложении для iPhone.
Mac OS X (2001)
Слева: Mac OS X Developer Preview 3 (2000). Обратите внимание на логотип Apple в центре строки меню. (Источник всех изображений: guidebookgallery)
Оригинальный iMac 1998 года был революционным снаружи, оказав влияние на промышленный дизайн за пределами компьютерной индустрии. Но программное обеспечение, шедшее с ним в комплекте – Mac OS 8 – было технологией 1980-х годов в оболочке интерфейса середины 90-х. Несоответствие между физическим внешним видом и виртуальным внутренним пространством продукта требовало редизайна.
Apple купила NeXT в 1997 году, чтобы адаптировать операционную систему NeXTSTEP в будущую Mac OS. (Соглашение также вернуло в Apple Стива Джобса, что, вероятно, не было счастливым совпадением). Его проверенная технология жила под капотом, а пользовательский интерфейс был полностью переработан для Mac OS X.
Новый внешний вид, спроектированный Корделлом Рацлаффом и Басом Ордингом, был пропитан ДНК Mac, но с совершенно новой подачей, отражавшей эстетику аппаратного обеспечения, на котором ОС работала почти фотореалистично, с тяжелым блеском, полупрозрачность, полосками и тенями. Строка меню находилась в привычном месте вверху экрана, но окна выглядели и работали совсем не так, как в классической Mac OS. Новая панель Dock в нижней части экрана стала футуристичным демо, плавно и без усилий выделяя фотореалистичные иконки.
Mac OS X идеально соответствовала преобладавшей с 2000 года Y2K эстетике, в которой сочетаются футуристический глянцевый пластик, стекло, пробелы, металлические отражения, 3D-рендеринг и пастельные тона.
iOS / iPhoneOS 1.0 (2007)
Источник: Apple
iPhoneOS – операционная система, известная сегодня как iOS, была первой полнофункциональной операционной системой декстопного класса, которая могла работать на карманном компьютере. Это был первый потребительский продукт, который использовал мультитач и жесты свайпа для навигации по виртуальному пространству. Это был первый массовый продукт, в котором двумя пальцами можно было изменять масштаб изображения и совершать естественные движения для пролистывания виртуальных страниц. Было много небольших изобретений, таких как иерархии раскрывающихся списков с текстовой кнопкой «Назад» в верхнем левом углу, эффект резиновой ленты в конце списков, чтобы почувствовать, что он закончился, и многие другие мелкие детали, которые сегодня мы считаем само собой разумеющимися в смартфонах.
iPhone OS 1.0 не запускал сторонних приложений, поэтому все было создано дизайнерами и разработчиками Apple, что привело к очень последовательному, уверенному и отточенному опыту.
Weightbot и Convertbot от Tapbots (2008)
Источник: Cult of Mac
Tapbots выпустили свои первые приложения в 2008 году вскоре после открытия iOS App Store. Weightbot был трекером веса тела, а Convertbot был конвертером единиц измерения. Количество конкурирующих приложений в этих жанрах быстро росло, но продукты Tapbots не потеряли своей привлекательности. Они продемонстрировали мастерство в дизайне и реализации. В меру милая, маркетинговая схема дружественных роботов-помощников была хорошо реализована: от лица робота на иконках приложений до рекламного текста на сайте.
Дизайнер Марк Жардин соединил скевоморфные метафоры, чтобы напомнить о механических роботах или ретро-футуристических гаджетах, со сдвижными панелями и писком ЭВМ. Иконки приложений были миниатюрными представлениями основных интерфейсов приложений.
В этих простых инструментах было так много индивидуальности. Стало трудно найти служебное приложение, которое может создать подобную мгновенную эмоциональную связь, в основном благодаря своему внешнему виду.
Tweetdeck (2008)
Скриншот сделан авторами статьи
Удивительно, что в 2020 году обширность и динамика социальных сетей по-прежнему представлены скучной последовательностью контейнеров текста и изображений. Мы всегда предполагали, что в тот или иной момент появится визуальное представление и удивительный интерфейс, учитывающий бесконечные потоки и сети, информационную перегрузку и большую скорость, и объемы общения в социальных сетях.
Но поскольку такого приложения не существует, мы должны довольствоваться Tweetdeck. Он далек от совершенства. Сейчас ему 12 лет, и он не сильно изменился с момента своего появления.
Его главной особенностью является возможность создавать бесконечное количество столбцов с различными фидами Twitter. Вы можете просматривать любое количество каналов, уведомлений, действий, списков, коллекций или трендов. Он по-прежнему основан на столбцах с текстовыми и графическими контейнерами, но интерфейс позволяет получить представление о синхронной, сетевой и хаотической природе социальных сетей.
Tweetdeck являет собой небольшой пример периферийного зрения для виртуального мира вокруг нас.
Path (социальная сеть, 2010)
Источник: YouTube
Path был одной из первых социальных сетей, которые были доступны только на мобильных телефонах. Целью Path было создание личного и интимного приложения для общения с друзьями и семьей. Изначально вам было разрешено добавить в свою сеть только 50 человек. Вы не могли публиковать ссылки, поэтому вам пришлось создавать контент самостоятельно.
Path был очень красивым приложением с невероятным вниманием к деталям. Главный дизайнер, Дастин Мерау, создал интерфейс, который был игривым, инновационным и по-настоящему восхитительным. Path использовал идею временной шкалы в буквальном смысле. Тонкая линия всегда была видна на заднем плане, а точки, указывали на сообщения или обновления статуса. Когда вы прокручивали события, очаровательные маленькие часы рядом с полосой прокрутки указывали период времени, который вы просматривали фид. Path также впервые применил эмодзи в стиле стикеров – то, что мы в настоящее время считаем само собой разумеющимся.
Главное меню было спроектировано в соответствии с теми же идеями. Это был ранний пример радиального всплывающего меню на мобильном телефоне. Анимация меню была на высоте и забавна в использовании.
Path закрыли в 2018 году. У них было несколько скандалов с данными – хотя сегодня они кажутся тривиальными по сравнению с Cambridge Analytica. Path по-прежнему существует в лучшем мире, не только из-за своего внимательного подхода к социальным сетям, но в основном из-за красивого интерфейса.
Windows Phone (2010)
Источник: Microsoft
Много лет у Microsoft была плохая репутация в мире дизайна. Windows 3.0 был визуальной шуткой, Windows 95 – серой пустошью, Bob инфантильным, а XP – коробкой конфет ассорти. Компания Microsoft также ответственна за шрифты Arial, Comic Sans и Trebuchet. Поэтому очень трудно передать удивление в мире дизайна, когда в 2010 году появился Windows Phone 7 и язык дизайна Metro.
В то время, как компания Apple по-прежнему превозносила искусственную кожу и 3D-иконки, Metro стал первым действительно графическим и типографическим языком дизайна для мобильного телефона. За годы до того, как «плоский дизайн» стал де-факто стандартом интерфейсов, команда дизайнеров Microsoft под руководством Джеффа Фонга представила свое радикальное видение интерфейсов мобильных девайсов: геометрическую, но гибкую сеточную систему, модную цветовую схему, Swiss типографику, плавную анимацию и переходы, живые плитки, минималистские и красивые шаблоны дизайна интерфейса.
Microsoft уже экспериментировала с Metro на медиаплеере Zune, но, применив его к Windows Phone 7, превратила его в сложную дизайн-систему.
Вызывает глубокое сожаление тот факт, что Windows Phone не имел коммерческого успеха. Причины этого разнообразны: это был неправильный визуальный язык для обычного пользователя Windows XP; он опоздал на три года; не было разработки сторонних приложений; интеграция с десктопной версией Windows была слабой; и перенос идей Metro UI в Windows 8 оказался неудачным.
Но Metro и Windows Phone 7 внесли большой вклад в UI дизайн, и мы считаем, что они глубоко изменили культуру дизайна в самой Microsoft. Начиная с Windows Phone 7, Microsoft постоянно улучшала свою репутацию в области дизайна.
iA writer (2011)
Источник: ia.net
До iA Writer, стандартным приложением для писателей и журналистов был Microsoft Word. В течение многих лет он страдал от увеличивающегося количества ненужных функций и подавляющего визуального беспорядка.
В разнообразии текстовых редакторов, таких как Блокнот в Windows, LaTeX для математиков, InDesign для графических дизайнеров и Microsoft Word для всех остальных, Оливер Райхенштейн из Information Architects (iA) увидел возможность: создать инструмент, позволяющий пользователю сосредоточиться на своих мыслях. Этот инструмент, iA Writer, обещал радикальную простоту. Не было загадочной панели инструментов, не было никаких настроек. Просто хорошо сбалансированный типографический макет и синий курсор. Можно сосредоточиться на текущем предложении, и ни на что не отвлекаться. iA Writer научил авторов использовать Markdown разметку, отдавая предпочтение семантике, а не расширенному форматированию текста.
Android 5.0 / Material Design (2014)
Источник: Google
Google становится лучше в плане дизайна, но вы можете почувствовать, что его сердце не в этом. В первые годы интерфейс Android был на грани дисфункциональности; затем он начал подражать iOS, когда в 2014 году, наконец, обрел собственный голос с помощью Material Design, придуманным Матиасом Дуарте и его командой.
Material Design сам по себе является хорошим визуальным языком, но отсутствие дизайн-амбиций проявляется, когда вы сравниваете концепцию и идеи в руководстве с приложениями, которые они поставляют. Дизай-портал Google представляет множество интересных идей, которые так или иначе никогда не превращаются в отличный продукт.
Жаль, ведь Material Design очень хорошо делает одну вещь: определение и использование уровней возвышения (elevation). Это звучит как довольно неясная проблема, но она фундаментальна для работы интерфейсов на Android. Кроме того, это то, что многие другие дизайнерские группы, в том числе Apple Design, на самом деле не поняли.
Организация элементов интерфейса вдоль виртуальной оси Z и использование света и теней для точного указания положения каждого элемента – один из самых сильных аспектов дизайна Android.
Домашний экран Apple watchOS 1.0 (2014)
Источник: Apple (слева), скриншот сделанный авторами статьи (справа)
Первые Apple Watch появились на рынке слегка рано: большинство приложений казалось необычайно медленными, многие интерфейсы не реагировали на запросы. Технология процессоров и аккумуляторов не совсем учитывала тот опыт, который Apple намеревалась создать.
Хотя в самом первом релизе WatchOS они идеально сделали одну вещь: домашний экран с круглыми иконками приложений, которые сжимались, пока не исчезали по краям экрана, как будто стекло было волшебной линзой. Они были расположены, как пыльцы, вокруг иконки часов, которая красиво переходила в полноэкранный циферблат.
Things 3 (iOS / Mac)
Источник: Things Website
Приложение Things популярно в магазинах приложений iOS и MacOS уже более 10 лет. Это продукт премиум-класса по премиальной цене – по крайней мере, по сравнению с большинством других приложений в своей категории.
Things – это просто список дел, но это очень хороший список дел! Он хорошо спроектирован и хитро продан. И, конечно же, он имеет сказочно хороший интерфейс, спроектированный Кристианом Крэмером.
Дизайнеры восхищались обновлением Things 3, когда оно было выпущено в 2017 году. Все еще простое и доступное, оно подняло внимание к деталям на новый уровень. У него были приятные пружинящие анимации интерфейса, но они не раздражали. У него был ярко-белый интерфейс с большими мягкими тенями. Он содержал смелые и нестандартные дизайн-решения, такие как инвертированные темные контекстные меню.
И, несмотря на сильно кастомизированный пользовательский интерфейс, этот опыт показался мне знакомым и учитывающим опыт использования iOS и MacOS. В то время, Things 3 казался превью будущей, лучшей версии iOS.
Panic Code Editor (2019)
Источник: iOS App Store
Традиционная разработка программного обеспечения – написание кода для создания компьютерных программ – в настоящее время все еще выполняется в основном на компьютерах. Написание сложных алгоритмов просто невозможно на смартфонах. Большинство «настоящих» программ привязано к устройствам с физическими клавиатурами и большими экранами, поскольку они обеспечивают более удобную среду для взаимодействия с текстом.
Но это не означает, что небольшие исправления в существующем коде или веб-сайтах не могут быть сделаны на мобильных устройствах. Именно здесь появляется редактор Panic Code Editor для iOS (ранее известный как Coda iOS 1.5, выпущенный в 2015 году). Это мобильный текстовый редактор, который не похож на компромисс или обходной путь; скорее он использует возможности портативного устройства с сенсорным экраном. Это хорошо продуманный, удивительно эффективный и приятный инструмент. Code Editor был спроектирован Невеном Мрганом. Десктопный аналог Coda для Mac был спроектирован Кабелем Сассером.
Ссылки и статьи по теме
- Bill Moggridge: Designing Interactions, MIT Press, 2007
- Bill Moggridge: Designing Media, MIT Press, 2010
- Andy Hertzfeld: Revolution in The Valley: The Insanely Great Story of How the Mac Was Made, O’Reilly & Associates, 2004
- Christian Wurster: Computer — Eine illustrierte Geschichte, Taschen, 2002
- Jan Distelmeyer: Machtzeichen: Anordnungen des Computers. Berlin, Bertz + Fischer, 2017
- guidebookgallery
- computerhistory
- DigiBarn Computer Museum
- folklore
- webdesignmuseum
- WebDesignMuseum
Перевод статьи medium.com
Топ коментарі (0)