На самом деле, мне нравится UI всей эпохи с 3.0 по 2000. В первую очередь я использую в качестве примера Windows 2000, потому что она хорошо работает на QEMU/KVM, позволяя легко делать скриншоты.
Экскурсия по UI
Что-то из перечисленного ниже может показаться абсолютно банальным, но мне кажется, об этом стоит упомянуть.
При первом успешном запуске Windows 2000 пользователь видел следующее:
(Да, у меня версия на немецком, но в контексте поста это ни на что не влияет.)
Ниже мы подробнее поговорим об этом диалоговом окне, а пока скажу, что у нас тут есть:
Не отвлекающий от интерфейса чистый сплошной цвет фона.
Значки с подписями на рабочем столе.
Панель задач с кнопкой «Start», несколько значков быстрого запуска, несколько значков в области уведомлений и часы.
Чёткий рендеринг шрифтов. (На ЭЛТ-дисплее он выглядел намного сглаженнее, но всё равно был довольно неплох.)
Кнопка внизу называется «Start» («Пуск»), а это значит, с её помощью можно что-то запустить. Возможно, программы? При нажатии на неё открывается меню «Пуск»:
Обратите внимание, что внешний вид кнопки «Start» поменялся: она стала «утопленной», как при нажатии на реальную кнопку. Это даёт понять, что она активирована. Наверняка пользователь уже сталкивался с кнопками в реальной жизни, например, с кнопкой включения PC, поэтому ему вполне знакома эта концепция.
Можно заметить, что маленькие стрелки сообщают нам, что некоторые пункты меню, возможно, чем-то отличаются. При наведении на них курсора мыши открывается другое меню (на них можно нажимать, но это не обязательно). При наведении курсора мыши на пункты без такой стрелки появляется подсказка, сообщающая, что эти пункты делают.
Стоит отметить, что визуально меню «Start» отражает его древовидную структуру. Отдельные части не открываются вместо других, заставляя запоминать, откуда пользователь пришёл: путь к текущему пункту чётко виден.
Значки разноцветные и сильно отличаются друг от друга. И да, это действительно значки. Значки облегчают работу мозга: читать текст сложнее, чем распознать приблизительную форму и цвет значка, поэтому они помогают пользователю найти нужный элемент.
Откроем Windows Explorer (Проводник):
Должен сказать, что я не большой поклонник этого вида по умолчанию. (Кстати, я считаю, что сокрытие расширений файлов — один из смертных грехов в истории компьютеров.) По крайней мере, можно поменять его на такой:
В удобной таблице справа сначала перечислены папки, а затем файлы. Значками обозначены типы файлов, и они одинаковы во всех частях операционной системы. Дерево слева обеспечивает быструю и удобную навигацию — оно почти чистое и не замусорено «Библиотеками», «Местами» и другими несуществующими виртуальными папками. Впрочем, в этом отношении Проводник Windows 95 был немного лучше, см. ниже.
Давайте взглянем на любое приложение из базовой системы, например, на WordPad:
Обратите внимание, что всё (почти), с чем может взаимодействовать пользователь, чётко обозначено: элементы или представлены в виде кнопки или маркера, или находятся на белом фоне (или синем, если они уже выбраны), что выделяет их на фоне немного оранжевато-серого цвета остальной части окна. Всё это становится очевидно не сразу (почему и как различается поведение некоторых цветов?), но, разобравшись, пользователь запомнит всё, и будет сталкиваться с этим паттерном везде.
Заметьте, что эти цвета не сделаны близкими оттенками, они очевидно различаются. В то же время, вся цветовая схема очень хорошо сбалансирована: нет ни ярко-белого, ни кромешно-чёрного, цвета не слишком близки друг к другу, контрастность подобрана правильно.
Однако, WordPad, по сути, остался таким же, что и в Windows 95. Если бы эту программу писали для Windows 2000, то выглядела бы она немного иначе.
Давайте откроем, например, настройки рабочего стола:
Мы снова видим тот же согласованный стиль UI и те же согласованные визуальные подсказки. Например, вкладки в верхней части диалогового окна тоже имеют эффект 3D-рельефа, поэтому логично предположить, что на них тоже можно нажимать.
Обратите внимание, что на всех показанных выше скриншотах видимы полосы прокрутки, если область можно прокручивать. Например:
Каждая полоса прокрутки всегда видима, они никуда не прячутся (хотя в то время вполне всё ещё привычным было разрешение 800x600). Благодаря этому пользователи всегда знали, что возможна прокрутка.
Видите область посередине?
Если бы в ней не было полосы прокрутки, можно было бы справедливо допустить, что в ней отображается всё содержимое. Но нет, её можно прокручивать, и в этом нет никаких сомнений —это сразу видно без наведения курсора мыши и нажатий:
Параметры программ соблюдали предсказуемый паттерн — открывалось новое окно с вкладками:
Обратите внимание, что даже внутри одной вкладки связанные друг с другом параметры сгруппированы во «фрейм», и это сразу видно пользователю:
Сравните это с современными диалоговыми окнами параметров — связь разных параметров можно отследить, только сравнивая размеры шрифтов:
Давайте оценим скорость:
Немного тормозит, правда? Да и загружается довольно долго. Однако этим вполне можно пользоваться, не хуже, чем среднестатистическим современным веб-сайтом. Я думаю участвовать на этой машине в следующем Advent of Code.
Но вот что важно: это Windows 2000 SP4, работающая на Pentium 133 с 64 МБ ОЗУ и жёстким диском, потому что это единственный «старый» PC, который у меня есть. И при этом это практически буквально минимальные требования:
Если запустить систему на Pentium 2 или 3 (последний был выпущен в 1999 году), то всё начнёт летать. Когда выпустили Windows 2000, Pentium 133 уже было примерно 4-5 лет, а для той эпохи это очень долгий промежуток времени.
Примечание: я только что нашёл свои старые заметки: 6 декабря 1999 года я купил Pentium 3 с частотой 500 МГц и 64 МБ ОЗУ, которые проапгрейдил до 128 МБ 16 октября 2000 года. Это гораздо более реалистичная машина для Windows 2000. Один из читателей сообщил, что в одном посте на jmmv.dev автор рассказывал, как запустил её на AMD K7-600, который вполне сравним с моим P3: всё работало очень быстро.
Разумеется, для получения хорошей производительности на медленных системах приходится разбираться и идти на жертвы.
Кроме того, Windows 2000 выпустили до появления активации продуктов: она работает полностью офлайн и можно без каких-либо проблем пользоваться ею и сейчас. Если вам приходится использовать проприетарное ПО, то это единственный приемлемый способ.
Итак, у нас есть довольно быстрая операционная система с ядром NT, чёткий и лаконичный UI и продукт, который мы купили (не подписка).
С этой эпохи мы наблюдали постоянные изменения стиля UI. Первые признаки этого можно заметить в диалоговом окне «Welcome», которое мы видели выше:
Заметили, что у кнопок «Jetzt registrieren» («Регистрация») и «Windows entdecken» («Учебник по Windows») нет 3D-рельефа? Это просто текст. Обратите внимание, что «Beenden» («Закрыть») уже выглядит не как кнопка и она стала плоской. Оглядываясь назад, можно сказать, что это чёткие признаки «Нового стиля». Угадать, что «Jetzt registrieren», вероятно, интерактивна, можно только по подчёркнутой «J», обычно обозначающей горячую клавишу, а они используются только для интерактивных элементов.
Или сравните панель инструментов Проводника Windows 2000 и Проводника Windows 95:
В Windows 95 эти значки панели инструментов всё ещё остаются кнопками. В Windows 2000 их можно опознать как кнопки при активации, но в их состоянии по умолчанию они так не выглядят, и пользователю приходится наводить на них курсор:
Эта тенденция постепенного избавления от визуальных подсказок продолжилась, и сегодня мы больше понятия не имеем, какие элементы на экране могут быть интерактивными.
Однажды у меня состоялся такой разговор:
Я: «Мне не нравятся UI смартфонов. Они плоские, ничто не говорит о том, можно ли коснуться элемента. Приходится произвольно пробовать нажимать всё на экране».
Ответ не сильно знакомого с технологиями человека: «Ну да, конечно, и нужно всё пробовать. Иначе как это всё будет работать?»
Сама мысль о существовании чётких, согласованных визуальных подсказок утеряна. Никто, кроме старых технарей, их больше не ждёт.
Хотелось бы, чтобы мы не избегали так сильно фасок, рельефов, линий и фреймов только потому, что «это стиль Windows 95».
Имитация реальных объектов — это тоже хорошо: например, у меня дома нет ни одного устройства, похожего на «ползунки» Android, так почему бы не превратить их во флажки? Дома я часто рисую галочки ✔️ на бумаге:
Вокруг меня много кнопок и ручек. Реальных, физических, поэтому они бы отлично подошли в качестве метафоры UI.
Дополнения/ответы на комментарии
Про кнопку «Пуск»
Читатели задали вопрос, а действительно ли меню «Пуск» было настолько очевидным для новых пользователей. Например, Microsoft показалось необходимым добавить небольшую анимацию: при запуске из правой части панели задач появлялась стрелка и двигалась в направлении кнопки; кажется она немного отскакивала и появлялся текст наподобие «Нажмите, чтобы начать». Я не смог воспроизвести это в своей VM с Windows 95, но выглядело это примерно так:
(Возможность включения/отключения этой функции вроде бы можно настраивать в TweakUI, но в моём случае этот флажок постоянно снимался.)
Так что даже Microsoft не была полностью уверена, что предназначение кнопки «Пуск» будет понятно. Впрочем, компания хотя бы добавила эту анимацию.
Лично я помню эту анимацию, но, кажется, она была довольно ненадёжной — иногда отображалась, иногда нет.
Что касается самой кнопки «Пуск», то я читал в журналах о новом меню «Пуск» задолго до того, как увидел Windows 95 вживую, так что не могу сказать, насколько «интуитивно» она воспринималась.
«Сокращённые меню» Windows 2000
Да, это определённо была антифича. Windows скрывала из меню «Пуск» некоторые элементы, когда ими долго не пользовались. Это была одна из первых функций, которые я отключил. Мне хотелось организовывать меню так, как это нравится мне.
Можно даже считать это ещё одним признаком ухудшения UI: алгоритмы пытаются умничать, но не справляются, они всегда включены (но пока ещё не в Win2k), не позволяя пользователю взять управление на себя.
Комментарий david_chisnall
Процитирую его полностью:
Обратите внимание, что всё (почти), с чем может взаимодействовать пользователь, чётко обозначено: элементы или представлены в виде кнопки или маркера, или находятся на белом фоне (или синем, если они уже выбраны), что выделяет их на фоне немного оранжевато-серого цвета остальной части окна.
Но и это ещё не всё: они с большим мастерством использовали имитацию 3D. На плоском слое содержалось всё информационное, с чем невозможно взаимодействовать, а всё интерактивное имело рельеф, чтобы казаться трёхмерным. Кнопки и подобные элементы, выполнявшие действия при нажатии или перетаскивании, выделялись на фоне остальных. Радиокнопки, текстовые поля, флажки и всё, куда можно было вводить данные, утапливалось вниз как отверстие, которое можно чем-то заполнить.
Тем, кто пользовался UI, не приходилось об этом задумываться, потому что после пары выполненных действий эти паттерны распознавались подсознательно.
Посмотрите на скриншот WordPad из статьи:
Основная текстовая область утоплена. Сюда вводится текст.
Значки панели инструментов приподняты. Их мы нажимаем.
Указатель отступа приподнят. На него можно нажимать/перетаскивать его.
Линейка утоплена, можно нажимать на неё, чтобы устанавливать позиции табуляции.
Последний пункт особенно важен. Предыдущие элементы UI пользователь в основном уже видел где-то ещё, но благодаря эффекту утопленности на линейке становится сразу же очевидно, что с ней можно взаимодействовать и это не просто какой-то индикатор размера страницы.
Позже UI Microsoft растерял большинство этих тонкостей.
Базовые элементы UI были схожи с элементами современной MacOS, но некоторые аспекты были лучше, в частности:
Нормой были непосредственные манипуляции, перетаскивание работало гораздо надёжнее. В том числе и заместители файлов в панели заголовка или окнах документов: можно было взять файл и перетащить его куда-нибудь (например, распечатать на конкретном принтере, просто перетащив заместитель файла из заголовка окна на нужный принтер).
В диалоговых окнах кнопка возврата размещалась слева, а кнопка продолжения — справа.
На кнопках диалоговых окон были написаны глаголы, а не OK/Отмена.
Про «ползунки» Android и выключатели света
Читателей удивило, что я не нашёл реальных объектов, напоминающих эти ползунки Android:
Я удивлён не меньше них: такие штуки сильнее распространены в других странах? Хм...
Очевидно, источником вдохновения для переключателя GTK4 стали выключатели света, которые выглядят, как ползунок Android. Я прошёлся по своей квартире и поискал все выключатели и переключатели, которые смог найти. В Европе почти все выключатели света выглядят примерно так:
Выключатель на лампе выглядит так:
Выключатели питания на моих принтерах (Oki Microline 3390, Epson AcuLaser C1100N) выглядят похоже:
Самое близкое к ползунку Android в моём доме — это... выключатель тостера:
Или переключатель питания на нетбуке (2011 года), но он не остаётся на месте после активации, а всегда возвращается в исходную позицию (очень странное поведение, которое мало распространено):
О, постойте, ещё есть регуляторы на педали для баса Darkglass Microtubes X7:
Но они ведут себя не так, как ползунок в Android. Они выполняют плавный переход от одного крайнего положения до другого, это не двоичные переключатели.
Вот! Наконец-то я хоть что-то нашёл! Украшение-снеговик. Для его включения используется ползунок, как в Android:
Фух!
Мне сказали, что выключатели света в США больше походят на ползунок: по крайней мере, они немного походят на элементы UI:
Ещё один читатель рассказал о старых усилителях, у которых иногда действительно были переключатели, сильно похожие на элементы UI. (У меня дома часто встречались плоские переключатели, как у Yamaha CA-1000. Но да, они тоже похожи.)
tl;dr: да, согласен, что в реальном мире есть объекты, напоминающие ползунки UI, их просто мало в моей жизни.
