Історія користувацьких інтерфейсів: від командного рядка до сенсорних екранів
Мало хто замислюється над тим, що кожен елемент користувацького інтерфейсу ПК чи смартфона хтось колись вигадав. Вікна, які можна перетягувати й накладати одне на одне, меню, що випадає з верхнього рядка, кнопка “Пуск”, кошик на робочому столі, плитки, шторка сповіщень і жест “потягнути, щоб оновити” мають власних авторів, а часто й довгу історію запозичень. Одні з цих ідей народилися в дослідницьких лабораторіях і понад десять років чекали на масовий продукт. Інші вигадали незалежні розробники, а вже потім їх підхопила вся галузь.
Командний рядок: точка відліку
До появи графічних інтерфейсів основним способом керування комп’ютером був командний рядок (command-line interface/CLI). Користувач набирав текстову команду, наприклад щоб скопіювати файл чи запустити програму, а система відповідала текстом. На цьому принципі працювали командні оболонки операційних систем того часу. Серед них Unix, перша версія якої вийшла в 1971 р., CP/M для перших мікрокомп’ютерів і MS-DOS, що вийшла в 1981 р. разом з IBM PC. Саме MS-DOS зробила командний рядок стандартом для персональних комп’ютерів на наступне десятиліття.
Головна проблема командного рядка полягала в тому, що він нічого не підказував. На екрані було лише запрошення на кшталт “C:>”, а всі команди, їхні параметри й шляхи до файлів користувач мав пам’ятати. Для інженерів і програмістів це було прийнятно, але для бухгалтера чи секретаря комп’ютер лишався закритою системою.
Тому поверх командного рядка почали будувати оболонки, які показували вміст диска й дозволяли працювати з файлами без набору команд. Такі програми мали текстовий інтерфейс, у якому вікна, меню й рамки малювалися символами псевдографіки. Чи не найвідомішою з них стала Norton Commander, яку написав Джон Соха для компанії Peter Norton Computing. Дві панелі з вмістом різних папок і керування функціональними клавішами виявилися настільки зручними, що цей формат пережив саму MS-DOS у Total Commander і Midnight Commander. Існував навіть популярний український клон NC – Volkov Commander створений київським програмістом Всеволодом Волковим.
Згодом власну оболонку отримала й сама MS-DOS. У версії 4.0, що вийшла в 1988 р., з’явилася DOS Shell з меню, підтримкою миші й переліком програм для запуску.
Але командний рядок лишався основою інтерфейсу користувача на ПК і надалі. Windows 1.0 не була окремою операційною системою. Вона запускалася з командного рядка як графічна оболонка поверх MS-DOS. Так само працювали й наступні версії аж до Windows 3.x. Щоб потрапити до графічного інтерфейсу, користувач спершу бачив запрошення DOS і набирав команду win.
Проте ідея інтерфейсу без набору команд з’явилася не в Microsoft і навіть не в Apple. Ще в 1973 р., за вісім років до IBM PC, у дослідницькому центрі Xerox PARC (Palo Alto Research Center) працював комп’ютер, яким керували мишею, а не командами.
Xerox PARC: де народилися “вікна”
Більшість елементів сучасного користувацького інтерфейсу з’явилися в 1970 роках у дослідницькому центрі Xerox PARC (Palo Alto Research Center). Першою з них була миша. Її створили ще в 1960 роках Дуглас Енгельбарт та інженер Білл Інгліш у Стенфордському дослідницькому інституті (SRI). До PARC вона потрапила разом з дослідниками з групи Енгельбарта.
Мишу отримав персональний комп’ютер Xerox Alto, який у PARC створили в 1973 р. для власних дослідників. Його растровий екран складав зображення з окремих точок, тому міг показувати й текст різними шрифтами, і графіку. На Alto з’явився й принцип “що бачиш, те й отримаєш” (What You See Is What You Get, WYSIWYG). Текстовий редактор Bravo, який розробив Чарльз Симоні, показував документ таким, яким той мав вийти з принтера.
Вікна, що перекривають одне інше, як аркуші паперу на столі, і спливні меню вперше з’явилися трохи пізніше в Smalltalk. Це середовище для Alto розробляла група Алана Кея разом з Деном Інгаллсом і Адель Голдберг.
Іконки й робочий стіл з’явилися вже в комерційному продукті, робочій станції Xerox Star 8010. Концепцію іконок запропонував Девід Кенфілд Сміт, а перші значки документа й папки намалював дизайнер Норм Кокс. Проте Star коштувала $16 595 у цінах 1981 року (майже $60 тис. у 2026 р.) і масовим продуктом не стала.
Масовими ці ідеї зробила Apple, і з цього почалася одна з найвідоміших суперечок в історії комп’ютерів. Наприкінці 1979 р. Стів Джобс домовився, що Xerox зможе купити 100 тис. акцій Apple ще до виходу компанії на біржу. Натомість команда Apple отримала змогу відвідати PARC. Демонстрацію Alto Джобс згодом називав осяянням, а невдовзі Apple переманила з PARC Ларрі Теслера. Права на технології угода не передавала, тому Apple відтоді звинувачують у тому, що вона вкрала графічний інтерфейс у Xerox.
Microsoft потрапила в цю історію через Macintosh. Джобс залучив компанію Білла Гейтса як першого стороннього розробника програм для нового комп’ютера, тож Microsoft побачила інтерфейс Macintosh ще до його виходу. Коли в листопаді 1983 р. Гейтс анонсував Windows, Джобс звинуватив його в копіюванні. Гейтс відповів, що в обох компаній був багатий сусід на ім’я Xerox. За його словами, він заліз до цього сусіда, щоб укpасти телевізор, і побачив, що Джобс уже його вкpав.
У 1985 р. компанії уклали угоду, за якою Microsoft могла використовувати елементи інтерфейсу Macintosh у Windows 1.0 і наступних версіях. Проте після виходу Windows 2.0 з вікнами, що перекривають одне інше, Apple в 1988 р. подала позов проти Microsoft і HP. У ньому вона перелічила 189 елементів інтерфейсу, які, на її думку, скопіювали без дозволу. У 1992 р. суд визнав, що понад 90% цих елементів уже охоплювала угода 1985 р., а решта не підлягала захисту авторським правом. Ця судова тяганина тривала аж до 1995 р., коли Верховний суд США відмовився розглядати апеляцію Apple.
Найбільш іронічний поворот стався в 1989 р. Тоді вже Xerox подала позов проти Apple і вимагала $150 млн за використання своїх розробок у Lisa і Macintosh. Позов відхилили через рік, але суперечка про те, чи справді Apple вкрала інтерфейс, триває й досі. Те, що саме Apple додала до побаченого в PARC, видно на комп’ютерах Lisa і Macintosh.
Робочий стіл для всіх: суперництво Apple і Microsoft
Першим комп’ютером Apple з графічним інтерфейсом став Lisa, що вийшов у січні 1983 р. Він коштував $9 995 і, як і Xerox Star, масовим не став. Ідеї Lisa в спрощеному вигляді перейшли до Macintosh, який у січні 1984 р. надійшов у продаж з цінником у $2 495. Саме Macintosh став хітом та зробив мишу й вікна застосунків доступними для тисяч користувачів.
Основну частину інтерфейсу обох комп’ютерів створив програміст Білл Аткінсон і багато його рішень мали спільну мету: щоб комп’ютером можна було керувати самою мишею. У системах Xerox, щоб вибрати команду з меню, доводилося разом з мишею натискати клавіші. Аткінсон натомість вигадав меню, що випадають з рядка вгорі екрана й відкриваються натисканням кнопки миші. Подвійне клацання для відкриття файлів теж вигадав він. Так само він створив “ласо” для виділення, межі якого позначала рухома пунктирна рамка, яку назвали “мурашками, що біжать”.
Усе це працювало на графічній бібліотеці QuickDraw, яку Аткінсон написав для Lisa і Macintosh. З нею пов’язана одна з найвідоміших історій про розробку. Аткінсон був переконаний, що бачив у PARC, як частково закриті вікна швидко перемальовуються, і вирішив повторити це в Lisa. Так з’явився механізм, який промальовував лише видимі частини вікон. Згодом з’ясувалося, що в PARC такого рішення не було, тож Аткінсон фактично відтворив те, чого насправді не бачив.
“Обличчя” Macintosh створила дизайнерка Сьюзен Кер. Вона намалювала іконки кошика, дискети для збереження файлів і “усміхненого Mac”, який вітав користувача під час завантаження. Також вона розробила перші шрифти системи, серед яких Chicago, що лишався системним шрифтом Mac до 1997 р.
Успіх Macintosh підтвердив, що графічний інтерфейс можна продавати масово, і в наступні роки власні варіанти представили інші компанії. Серед них були VisiOn, GEM від Digital Research і Workbench для комп’ютерів Amiga. Проте головним конкурентом Apple стала Microsoft, яка будувала свої “вікна” поверх MS-DOS.
Windows: від копіювання Mac до кнопки “Пуск”
Перші версії Windows здебільшого наздоганяли Macintosh. Windows 1.0 розміщувала вікна впритул одне до одного, без перекриття. Вікна, що перекривають одне інше, і кнопки “згорнути” та “розгорнути” з’явилися лише в Windows 2.0. Саме через Windows 2.0 Apple і подала позов проти Microsoft.
Масовою Windows стала з версією 3.0. Програми в ній запускали з “Диспетчера програм”, де їхні іконки були розкладені по окремих вікнах-групах. Більшість власників ПК тоді ще не вміли користуватися мишею, тому до системи додали гру Solitaire. Перетягуючи карти, користувачі мимохідь вчилися перетягувати об’єкти на екрані.
Тим часом інші розробники шукали зручніший спосіб запускати програми й перемикатися між ними, ніж вікно з іконками. У 1987 р. британська компанія Acorn випустила для комп’ютерів Archimedes систему Arthur, попередницю RISC OS. Внизу екрана в ній була смуга іконок, де відображалися диски й запущені програми. Згодом схожу смугу отримала й Windows 95. Керівник розробки Arthur Пол Феллоуз і досі охоче нагадує, що ідею Acorn просто запозичили інші.
Інший варіант запропонувала NeXT, компанія, яку Стів Джобс заснував після відходу з Apple. У 1988 р. вона показала систему NeXTSTEP з панеллю Dock. Це був стовпчик іконок біля краю екрана, з якого запускали програми, а іконки вже запущених програм позначалися трьома крапками.
Microsoft поєднала обидві ідеї у Windows 95 і додала власну – кнопку “Пуск”. “Диспетчер програм” поступився місцем меню, що відкривалося з цієї кнопки й містило всі встановлені програми. Унизу екрана з’явилася панель завдань, на якій кожне відкрите вікно мало власну кнопку. Самі вікна отримали кнопки згортання, розгортання і закриття. Цю схему керування Windows розвиває і використовує досі.
Праворуч на панелі завдань розташувалися годинник та іконки фонових програм. Цю частину досі називають системним треєм (tray), хоча офіційно вона завжди мала назву “область сповіщень”. Плутанина пішла від ранніх збірок Windows 95. У них замість панелі завдань унизу екрана був “лоток”, тобто закріплене вікно-папка, куди можна було перетягувати файли.
Windows 95 змінила й роль правої кнопки миші. Сама ідея контекстного меню походить ще зі Smalltalk, але у Windows 3.1 праву кнопку майже не використовували. У Windows 95 контекстне меню за правим клацанням отримала більшість об’єктів на екрані. Apple перейняла цю ідею лише в Mac OS 8 наприкінці 1997 р. Миша Mac в той час мала одну кнопку, тому контекстне меню відкривали клацанням з затиснутою клавішею Control.
Нову кнопку “Пуск” Microsoft обіграла і в рекламі. Компанія купила права на пісню Start Me Up гурту The Rolling Stones. У ЗМІ суму угоди оцінювали від $3 млн до $12 млн, хоча в Microsoft згодом заперечили верхній поріг суми.
“Пуск” і панель завдань на десятиліття стали центром Windows. А Dock з NeXTSTEP повернувся до Apple разом із самим Джобсом і став однією з упізнаваних фіч інтерфейсу Mac OS X.
Стилус і перші сенсорні екрани
Торкатися екрана замість того, щоб рухати мишею, пропонували ще в 1980 роках. HP-150 1983 р. мав навколо екрана рамку з інфрачервоними променями. Коли палець перекривав промені, комп’ютер визначав місце дотику. Проте стандартом для настільних комп’ютерів сенсорний екран так і не став, і наступні кроки зробили вже кишенькові пристрої.
Apple зробила ставку на перо й рукописний текст. Кишеньковий комп’ютер Newton MessagePad мав розпізнавати звичайне письмо, але робив це настільки погано, що з нього сміялися навіть в коміксі Doonesbury і в “Сімпсонах”. У мультсеріалі фраза Beat up Martin перетворилася на Eat up Martha.
Перо стало й головним способом керування першим смартфоном. IBM Simon надійшов у продаж у серпні 1994 р. і мав сенсорний екран, на якому стилусом можна було набрати, вести календар і робити нотатки.
Компанія Palm Джеффа Гокінса пішла іншим шляхом. Вона не вчила пристрій читати звичайний почерк, а вчила людей спрощеного алфавіту Graffiti, кожну літеру якого писали одним рухом. PalmPilot мав успіх, якого не мав Newton: за перші 18 місяців продали близько мільйона пристроїв.
Microsoft пішла третім шляхом і перенесла на кишенькові комп’ютери Pocket PC звичні елементи Windows. Програми там запускали з меню “Пуск”. Замість правого клацання контекстне меню викликався, утриманням стилуса на екрані.
Мультитач тим часом розробляли в кількох місцях. У лютому 2006 р. дослідник Нью-Йоркського університету Джефф Хан показав на конференції TED великий екран, на якому фотографії масштабували, розводячи пальці. Свою технологію він розвивав у компанії Perceptive Pixel, яка робила мультитач-екрани розміром до 82 дюймів. Її екрани використовував CNN під час президентських виборів у США 2008 р., а в 2012 р. компанію купила Microsoft.
Apple тоді вже працювала над мультитачем незалежно від Хана. У 2005 р. вона без розголосу купила компанію FingerWorks, яка випускала сенсорні панелі з керуванням кількома пальцями, і пристосовувала її технологію для сенсорного екрана. Результат цієї роботи Apple показала менш ніж через рік після виступу Хана в першому iPhone.
Палець замість курсора: як сенсорні інтерфейси стали однаковими
iPhone, представлений у січні 2007 р., на наступне десятиліття визначив, як керуватимуть не лише смартфонами, а й планшетами та ноутбуками з сенсорними екранами. Стів Джобс зі сцени висміяв стилус і запропонував замість нього пальці. Зображення в iPhone масштабували, розводячи два пальці, списки прокручували свайпом з інерцією, а телефон розблоковували жестом “Провести для розблокування”. Головний екран став сіткою іконок, і цей принцип досі майже не змінився.
“Потягнути, щоб оновити” запропонував розробник Лорен Брихтер у своєму Twitter-клієнті Tweetie 2: замість того щоб тиснути кнопку оновлення, достатньо було потягнути стрічку вниз. Пізніше Twitter купив Tweetie разом із заявкою на патент на цей жест, а сам жест з’явився в більшості застосунків зі стрічками.
Android з першої версії мав шторку сповіщень, яка опускалася з верхнього краю екрана. У 2010 р. Samsung додала в неї в Galaxy S перемикачі Wi-Fi, Bluetooth і GPS. Apple запозичила обидві ідеї. Центр сповіщень з’явився в iOS 5, а Пункт керування з перемикачами – в iOS 7. Щоправда, спочатку як окрема панель знизу екрана.
Звичний сьогодні спосіб перемикатися між запущеними застосунками з’явився в системі webOS від Palm. Запущені застосунки відображалися як картки, між якими перемикалися, гортаючи вбік, а непотрібні програми закривали, змахуючи картку вгору. Керували цим жестами в спеціальній зоні під екраном. Автор інтерфейсу webOS Матіас Дуарте у 2010 р. перейшов до Google, і згодом картки з’явилися і в Android, і в iOS.
Найсміливішу альтернативу запропонувала Microsoft. У Windows Phone 7 замість іконок були живі плитки, які показували нові повідомлення, погоду чи фото. У Windows 8 компанія перенесла плитки на комп’ютери й замінила ними меню “Пуск”, розраховуючи на планшети й ноутбуки з сенсорними екранами. Користувачі прийняли це погано, і у Windows 10 “Пуск” повернувся, хоча й з плитками всередині.
Тим часом iOS та Android дедалі більше запозичували одна в одної. Шторка сповіщень, віджети на головному екрані й картки багатозадачності стали спільними для обох систем. Після iPhone X, у якому зникла кнопка “Додому”, жести з нижнього краю екрана, як колись у webOS, стали основним способом навігації і в iOS, і в Android.
Коло замкнулося восени 2026 р. Apple, яка роками не додавала сенсорний екран до Mac, 28 жовтня представила перший MacBook Pro із сенсорним дисплеєм. Через сорок із гаком років після HP-150 торкатися екрана комп’ютера може нарешті стати нормою.
Пласкі, матеріальні, скляні: чому інтерфейси змінюються кожні кілька років
Зовнішній вигляд інтерфейсів користувача змінюється хвилями. Перші версії iOS, як і Aqua на Mac до них, імітували реальні предмети. Календар був обтягнутий шкірою з прошивкою, а нотатки нагадували жовтий блокнот. Такий підхід називають скевоморфізмом. За словами колишнього дизайнера Apple, шкіряну текстуру календаря скопіювали з оздоблення приватного літака Стіва Джобса. Знайомі текстури підказували користувачам, які тільки знайомились з новою системою керування пристроєм, що можна зробити з елементом на екрані.
У 2013 р. в iOS 7, створеній під керівництвом Джоні Айва, Apple відмовилася від текстур, блиску й об’єму на користь плаского дизайну. Microsoft прийшла до пласкості ще раніше зі стилем Metro. Google у 2014 р. представила Material Design, у якому пласкі елементи розташовувалися шарами з тінями, як аркуші паперу.
Через десятиліття маятник хитнувся назад. У 2025 р. Apple представила інтерфейс Liquid Glass, напівпрозорий матеріал, що заломлює світло, як справжнє скло. Його створили під впливом інтерфейсу гарнітури Vision Pro, і він став найбільшим візуальним оновленням iOS від часів переходу до плаского дизайну. Так скло повернулося через чверть століття після Aqua і майже через два десятиліття після Aero.
Проте за зміною оформлення майже не змінюються принципи керування. Сітка іконок, жести, шторка сповіщень, масштабування двома пальцями й прокрутка з інерцією працюють так само як і майже двадцять років тому. Нові елементи лише додаються до цієї основи, а не замінюють її. На комп’ютерах так само: “Пуск”, панель завдань, Dock і контекстне меню десятиліттями переживають лише зміни стилю.
Можливо, історія інтерфейсів робить коло. Чат-боти на основі ШІ знову зробили текстову команду вагомим способом керування, тільки тепер її пишуть звичайною мовою, а не за правилами MS-DOS. А Apple Vision Pro винесла вікна з екрана в простір навколо користувача. Втім, навіть там вікна, іконки й жести працюють за принципами, які колись заклали в Xerox PARC.
Дізнатися більше на: mezha.ua