Интерфейс начинается с ограничения

Акт I. Компьютер учится разговаривать с человеком

Почему старые интерфейсы выглядят такими ебанутыми?

Что на слайде

Коллаж:

• терминал;
• Xerox Star;
• Nokia 7110;
• PalmPilot;
• Windows Mobile;
• Sony Ericsson P900;
• iOS 6;
• Windows Phone.

Заголовок:

Почему умные люди проектировали вот это?

Подзаголовок:

Потому что они решали проблемы, которых у нас больше нет.

Что рассказывать

Когда мы смотрим на Windows Mobile с полосой прокрутки шириной пять пикселей или телефон, где под экраном физические кнопки, значение которых меняется от экрана к экрану, возникает естественная реакция: интерфейсы раньше были плохими.

Но это неверная рамка.

Большинство странных паттернов прошлого были совершенно рациональными ответами на ограничения своего времени:

• мало пикселей;
• нет мыши;
• нет touchscreen;
• touchscreen слишком неточный;
• клавиатура не помещается;
• процессор медленный;
• сеть медленная;
• пользователь ещё не знает, что такое swipe;
• разработчики ещё не договорились, как должно работать приложение.

Поэтому дальше у нас будет не «история красивых экранов», а история ограничений.

---

Сначала интерфейса почти не было

ОГРАНИЧЕНИЕ: чтобы пользоваться компьютером, надо знать язык компьютера

На экране

Терминал.

Например:

C:\> COPY A:\REPORT.TXT C:\WORK
C:\> DIR
C:\> DEL OLD.TXT

Рядом огромным:

Recall, not recognition

Рассказ

Ранний массовый способ взаимодействовать с компьютером — команды.

Чтобы сделать что-то, человек должен:

1. знать, что нужная операция вообще существует;
2. помнить её название;
3. помнить синтаксис;
4. правильно его набрать.

Функциональность компьютера практически невидима.

Это очень важная исходная точка всей истории UI:

проблема не в том, что текст некрасивый; проблема в том, что пользователь обязан хранить интерфейс у себя в голове.

GUI потом сделает радикальную вещь: вынесет возможные действия из памяти человека на экран.

---

Xerox: а что если показать пользователю вещи?

РЕШЕНИЕ: превратить команды в предметы

1981 — Xerox 8010 Star

На экране

Настоящий Star:

• документы;
• folders;
• in/out baskets;
• file drawers;
• printer;
• trash;
• окна;
• pointer.

Вот шикарный архив реальных экранов Xerox Star:

DigiBarn — 1981 Xerox Star screenshots

И CHM с оригинальной формулировкой Xerox:

Computer History Museum — Xerox Star

Фактура

В рекламной брошюре Xerox 1981 года компании буквально приходилось объяснять людям слово mouse:

hand-held pointer, or “mouse”

И объяснять, что iconographic symbols обозначают folders, in/out baskets, file drawers и другие предметы, составляющие то, что Xerox называла “electronic desktop”. (CHM)

То есть desktop metaphor возникла не потому, что дизайнеры любили рисовать папочки.

Они решали проблему:

как объяснить человеку абсолютно новую абстрактную машину через мир, который он уже понимает?

Главный вывод

Первая великая UI-революция — не графика. Это перенос знаний из головы человека на экран.

Вместо:

DELETE REPORT.TXT

ты видишь документ и корзину.

Можно действовать с объектом напрямую.

---

Иконка — это по сути инструкция, которую не надо читать в мануале

Здесь я бы остановился отдельно.

Показываем

Xerox Star крупно:

• folder;
• document;
• printer;
• trash.

Рассказ

В Xerox Star графическая образность использовалась сознательно, чтобы уменьшить количество typing and remembering. А physical-office metaphor должна была сделать компьютер менее чужим. (Guidebook Gallery)

Это ключевая линия, которая потом повторится снова:

1981

папка выглядит как папка

↓

2007

кнопка выглядит как кнопка

↓

2010-е

пользователю уже не обязательно ничего объяснять настолько буквально.

То есть скевоморфизм iPhone — не какая-то историческая аномалия.

Он является продолжением идеи Xerox:

новую цифровую сущность легче объяснить через знакомую физическую.

---

Macintosh: GUI выходит из лаборатории

ОГРАНИЧЕНИЕ: Xerox придумал язык — но его ещё нужно сделать массовым

1984 — Macintosh

Визуал

Оригинальный Mac рядом с GUI.

Очень хороший официальный музейный источник:

Computer History Museum — The Mac at 40

Фактура

Macintosh 1984 года:

• GUI;
• mouse;
• icons;
• 9" monochrome display;
• 512×342 в ранней линейке;
• единый графический environment.

CHM формулирует главный эффект довольно прямо: вместо memorized commands человек получает icons и images. (CHM)

А одна из рекламных формул Apple:

“If you can point, you can use Macintosh.”

Это почти идеальная формулировка всей революции.

Мысль

Обрати внимание на глагол:

не learn.

А point.

Компьютер впервые пытается подстроиться под уже существующий человеческий навык.

---

Акт II. Теперь запихните этот компьютер в карман

Большой GUI невозможно просто уменьшить

ОГРАНИЧЕНИЕ: экран стал в десять раз меньше, а мышь и клавиатура исчезли

Заголовок

Desktop metaphor победила. Теперь попробуйте засунуть desktop в ладонь.

Что происходит

На PC:

• большой монитор;
• клавиатура;
• мышь;
• точный pointer;
• много одновременно видимых объектов.

На handheld:

• экран несколько дюймов;
• крошечное разрешение;
• нет mouse;
• иногда вообще нет keyboard;
• устройство нужно держать одной рукой;
• ввод должен работать на ходу.

Computer History Museum хорошо формулирует этот исторический момент: маленькие экраны и tiny/non-existent keyboards потребовали полностью переосмыслить интерфейс. (CHM)

Переход

И индустрия не знала правильного ответа.

Следующие примерно пятнадцать лет — огромный публичный эксперимент:

чем заменить мышь и клавиатуру?

---

Первая ставка: ручка

РЕШЕНИЕ: если мышь не помещается — дадим человеку перо

Историческая линия

1989 — GRiDPad 1993 — Newton 1993/94 — IBM Simon 1996 — PalmPilot

Логика

Ручка кажется идеальным input device:

• человек уже умеет ей пользоваться;
• она тонкая;
• точнее пальца;
• позволяет писать;
• позволяет указывать на мелкие элементы.

В конце 80-х и начале 90-х вокруг pen computing действительно возник целый технологический тренд. CHM отмечает, что GRiDPad 1989 года стал одним из первых успешных коммерческих tablets и использовал handwriting recognition Джеффа Хокинса. (CHM)

Вывод

Stylus изначально был попыткой сохранить точность desktop pointer, но сделать его мобильным.

---

Newton: пусть компьютер научится читать человека

ОГРАНИЧЕНИЕ: писать рукой легко — понимать человеческий почерк компьютеру сложно

Apple Newton MessagePad — 1993

Показываем

Newton + рукописный ввод.

Фактура

Newton был pen-based PDA и одним из устройств, определивших будущую категорию handheld computing.

Но его handwriting recognition стала знаменитой именно из-за ошибок.

CHM пишет, что recognition была широко высмеяна за неточность; Newton в итоге так и не стал тем коммерческим успехом, на который рассчитывала Apple. (CHM)

Концептуальный конфликт

Newton пытается решить задачу так:

машина должна научиться понимать человека.

Но вычислительные технологии 1993 года пока не справляются достаточно хорошо.

И буквально через три года появляется совершенно обратное решение.

---

Какие слайды я бы ДОБАВИЛ в уже существующую историю

PalmPilot prototype, ~1995 — «Сначала симулируй продукт деревяшкой»

Ставить рядом с PalmPilot, но сделать самостоятельным.

Это та самая история, которую обязательно надо сохранить: Джефф Хокинс сделал деревянный брусок размером с будущий Palm, использовал chopstick вместо stylus, носил его с собой, изображал запись заметок на встречах и считал количество шагов для обычных задач.

Это прекрасный ранний пример interaction prototyping: ещё нет работающего UI, но уже можно оптимизировать flow.

CHM хранит сам деревянный prototype. (CHM) PalmPilot wooden model — Computer History Museum

---

Palm: нет, пусть человек немного научится компьютеру

РЕШЕНИЕ: Graffiti

PalmPilot — 1996

Визуал

Palm + Graffiti alphabet.

Оригинальный музейный артефакт:

CHM — Simplified alphabet for Palm Graffiti

Фактура

Palm делает почти анти-AI решение.

Вместо:

мы поймём любой ваш почерк

Palm говорит:

вы выучите наш специальный упрощённый алфавит.

Graffiti сознательно ограничивал формы букв, повышая точность recognition.

CHM пишет, что это был настоящий gamble: пользователи должны были научиться писать иначе; опытные пользователи доходили примерно до 40 слов в минуту. (CHM)

Ещё шикарный факт

Джефф Хокинс носил деревянный макет PalmPilot и использовал chopstick вместо stylus.

Он изображал реальные действия и считал количество шагов, нужных для выполнения обычных задач. (CHM)

Вывод

Newton: обучим машину человеку.
Palm: немного обучим человека машине.

Обе стратегии потом ещё много раз повторятся в UI.

---

Palm понимает ещё одну вещь: мобильный компьютер не обязан быть маленьким PC

ОГРАНИЧЕНИЕ: попытка перенести весь PC в ладонь делает устройство сложным

Что сделал Palm

PalmPilot сознательно не пытался стать полноценным desktop replacement.

Он был:

• contacts;
• calendar;
• notes;
• to-do;
• быстрый запуск;
• быстрый sync с компьютером.

CHM прямо называет одной из причин успеха Palm то, что он был спроектирован как complement to the PC, а не replacement. Стартовая цена была $299. (CHM)

Вывод

Это ещё один фундаментальный принцип mobile design:

маленький экран не требует уменьшить desktop. Он требует заново выбрать, что вообще должно быть на экране.

Позже Windows Mobile на некоторое время пойдёт почти в противоположную сторону.

---

Акт III. Телефоны: software живёт внутри физического пульта

Телефон — ещё более жёсткое ограничение

ОГРАНИЧЕНИЕ: экран меняется, физические кнопки — нет

Показываем старый Nokia

У телефона есть:

• экран;
• числовая клавиатура;
• несколько управляющих кнопок.

Но software становится всё сложнее:

• calls;
• contacts;
• SMS;
• calendar;
• settings;
• games;
• WAP.

Как дать одной физической кнопке сотни функций?

---

Soft keys: экран начинает перепрограммировать железо

РЕШЕНИЕ: contextual soft keys

Показываем Nokia 7110

На экране:

┌────────────────┐
│    Services    │
│                │
│ Select    Back │
└────────────────┘
    ▬        ▬

Фактура из настоящего Nokia UI guide

Nokia буквально описывала UI браузера так:

• display для text/graphics;
• two selection keys with function name displayed above;
• scroll через roller или up/down;
• select через roller press / send / menu;
• left selection key — execute / menu;
• right selection key — cancel / back. (STL)

Главная идея

Физическая кнопка больше не означает конкретную команду.

Она означает:

«выполни действие, которое software сейчас подписал прямо над мной».

Это очень важный промежуточный этап:

hardcoded hardware → contextual software.

По сути soft key — предок современной contextual action.

---

Интернет тоже не помещается

ОГРАНИЧЕНИЕ: Web создан для монитора, mouse и keyboard

1999.

У тебя:

• узкий экран;
• медленная мобильная сеть;
• кнопочная навигация;
• нет keyboard;
• очень мало памяти.

Но люди хотят Internet.

Вопрос

Как засунуть Yahoo в Nokia?

Ответ сначала будет не responsive design.

Ответ:

сделать другой интернет.

---

Nokia 7110 — «Производитель уже пишет HIG для мобильного веба»

Это я бы добавил отдельно от слайда про сам Navi Roller.

Потому что документ Nokia WAP Browser Designer’s Guide, 2000 — просто находка.

Nokia буквально объясняет разработчику, из каких primitives состоит mobile UI:

• display для text and graphics;
• две selection keys;
• подпись функции над каждой;
• scrolling roller'ом или up/down;
• roller press = select;
• левая кнопка = execute/menu;
• правая = cancel/back.

И в документе прямо нарисована Nokia 7110 с подписями:

Header text Vertical scroll roller with push to select Left and Right Selection key operation Keypad for number and text entry

То есть это фактически мобильный design system до design systems. (STL)

Nokia WAP Browser Designer’s Guide — PDF

---

Nokia 3210 — отдельный слайд про T9

T9 в текущей версии есть концептуально, но по твоему правилу его надо привязать к одному продукту.

Nokia 3210 подходит отлично: 1999 год, монохромный экран 84×48, пять строк, numeric keypad и predictive text. (Wikipedia)

Особенно хорош официальный manual.

Nokia объясняет пользователю новую mental model:

нажимай каждую клавишу только один раз для каждой буквы;

и даже предупреждает:

не обращай особого внимания на слово во время набора — оно будет меняться после каждого нажатия.

То есть человека буквально надо было переучить не пытаться контролировать каждую букву и довериться prediction. (ManualsLib)

Это очень сильная рифма с AI.

Nokia 3210 manual — predictive text section

---

Как написать текст на двенадцати кнопках?

ОГРАНИЧЕНИЕ: 12 физических клавиш, а символов сотни

Показываем

2 ABC
3 DEF
4 GHI
...

И:

C = 222

Рассказ

SMS превращает телефон из устройства для цифр в устройство для текста.

Но hardware уже выпущен.

У нас по-прежнему:

0–9 + * + #

Multi-tap решает задачу прямым mapping:

• 2 → A;
• 22 → B;
• 222 → C.

Работает.

Но требует огромного количества физических нажатий.

---

T9: если hardware тупой, software должен догадаться

РЕШЕНИЕ: predictive text

На экране

Multi-tap:

44 33 555 555 666

против

T9:

4 3 5 5 6

→ HELLO

Что произошло

T9 делает каждую клавишу неоднозначной:

2 = ABC

Но использует словарь для определения вероятного слова.

То есть пользователь выбирает не букву.

Он сообщает телефону последовательность групп букв.

Телефон додумывает остальное.

Отличный вывод

Когда невозможно добавить hardware controls, интерфейс начинает становиться умнее.

Это очень хорошая параллель с AI-интерфейсами сегодня.

Уже в документации P900 T9 объяснялся именно как сопоставление последовательности keypresses с database возможных слов.

---

Маленький экран заставляет интерфейс становиться глубоким

ОГРАНИЧЕНИЕ: на экране помещается несколько строк

На экране

Нарисовать:

Menu
 ↓
Messages
 ↓
Inbox
 ↓
Message
 ↓
Options
 ↓
Delete

Рассказ

На desktop можно держать:

• toolbar;
• sidebar;
• document;
• menu;
• status.

На старом телефоне одновременно помещается условно четыре-шесть строк.

Поэтому пространство компенсируется временем:

если нельзя показать десять функций одновременно, показываем две сейчас, ещё две после следующего click.

Отсюда невероятная глубина меню feature phones.

Вывод

Недостаток площади экрана превращается в количество шагов.

Это вообще прекрасная формула для доклада.

---

Scroll становится главным способом увидеть то, чего нет на экране

РЕШЕНИЕ: списки + scrolling + position indicators

Что рассказать

Маленький экран принципиально не способен показать весь набор данных.

Поэтому мобильный UI становится viewport.

Ты видишь маленькое окно в большой информационный мир.

На разных устройствах появляется:

• стрелка вниз;
• вертикальный scrollbar;
• position indicator;
• scroll keys;
• roller;
• later kinetic scrolling.

Это важная линия:

история mobile UI во многом является историей того, как мы научились перемещать viewport по большому content space.

Позже iPhone сделает радикальную вещь: вместо управления scrollbar человек начнёт двигать сам content.

---

Кнопками листать длинный мир очень медленно

ОГРАНИЧЕНИЕ: ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑

По мере появления:

• contacts;
• SMS;
• web pages;
• music;
• files;

нажимать ↓ двадцать раз становится невыносимо.

Нужен input, который передаёт не одиночное discrete действие, а скорость/продолжительность движения.

---

Nokia 7110: появляется колесо

РЕШЕНИЕ: Navi Roller

Nokia 7110 — 1999

Показываем

7110 крупно.

Особенно:

• Select;
• Back;
• roller между ними.

Nokia design guide прямо рисует его как:

Vertical scroll roller with push to select. (STL)

Что хорошего в roller

Одна control surface умеет:

• вращение вверх;
• вращение вниз;
• нажать.

Для длинных списков это существенно быстрее repeated keypress.

Переход

Начинается очень интересная эпоха:

производители десятилетие ищут идеальную замену mouse:

• scroll keys;
• D-pad;
• roller;
• joystick;
• thumbwheel;
• trackball;
• stylus.

Победитель пока совершенно не очевиден.

---

Joystick: делаем курсор, но без курсора

Nokia 7650 — 2002

На экране

Главное menu Nokia 7650.

Фактура

Центральный joystick позволяет:

• up;
• down;
• left;
• right;
• press to select.

В официальной логике UI он используется практически повсюду: перемещаем selection, нажимаем joystick — открываем выбранный объект. (ManualsLib)

Что происходит концептуально

Cursor при этом зачастую не рисуется.

Вместо свободного pointer интерфейс использует focus:

сейчас выбран этот элемент.

То есть interaction становится дискретным:

item → item → item

а не:

x/y coordinate.

Вывод

Без pointer дизайн должен заранее определить все возможные места, куда пользователь способен попасть.

Touch потом это радикально меняет.

---

Акт IV. Экран становится красивее раньше, чем input становится лучше

Сначала цвет почти ничего не изменил

ОГРАНИЧЕНИЕ: монохромный экран плохо передаёт визуальную иерархию

Siemens S10 — 1997

Визуал

Mobile Phone Museum — Siemens S10 с фотографиями

Фактура

S10 считается первым мобильным телефоном с цветным display.

Но «цветной экран» здесь означает очень скромную вещь:

• red;
• green;
• blue;
• white background;
• до шести строк text;
• 97×54 pixels. (Mobile Phone Museum)

То есть:

цвет появляется раньше полноценной графической революции.

Хороший визуальный переход

monochrome text

→

colored text

→

colored icons

→

photos

→

Retina

---

Ericsson T68: теперь цвет уже реально меняет язык интерфейса

РЕШЕНИЕ: icons, themes, wallpaper

2001 — Ericsson T68

Фактура

При анонсе T68 Ericsson особенно выделяла:

• large color display;
• восемь строк;
• 256 colors;
• GPRS;
• WAP;
• Bluetooth;
• MMS. (Presseportal)

И появляются новые категории UI:

• color themes;
• wallpapers;
• images;
• richer icons.

Но

Навигация всё ещё:

joystick + buttons.

Это важный сюжет:

display совершил революцию раньше input.

Человек уже смотрит на довольно богатый graphical UI, но взаимодействует с ним языком feature phone.

---

Чем больше умеет телефон, тем сложнее становится пульт

ОГРАНИЧЕНИЕ: capabilities растут быстрее, чем количество удобных controls

К 2002–2004 в телефон уже хотят положить:

• camera;
• browser;
• email;
• music;
• calendar;
• notes;
• files;
• third-party apps;
• MMS;
• games.

Но обычный keypad совершенно не масштабируется.

И на несколько лет индустрия начинает делать устройства, выглядящие как эволюционный эксперимент.

---

Sony Ericsson P900: давайте поставим вообще все способы ввода

РЕШЕНИЕ: гибрид всего со всем

P900 — 2003

Вот здесь я бы сделал один из лучших слайдов доклада.

Показываем официальный white paper

PDF:

Sony Ericsson P900/P908 White Paper — December 2003

У P900 одновременно есть

• большой touchscreen;
• built-in stylus;
• 5-way Jog Dial;
• физический numeric keypad/flip;
• handwriting recognition;
• multitap;
• T9;
• on-screen keyboard.

Официальное описание буквально говорит:

flip closed — fast one-handed operation;
flip open — large touchscreen sophistication. (Alte Handys)

Это прекрасный исторический объект

P900 будто говорит:

мы пока вообще не знаем, какой input победит. Поэтому поддержим их все.

---

Колёсико P900 — интерфейс для одной руки

ОГРАНИЧЕНИЕ: touchscreen хорош, но телефон нужно использовать на ходу одной рукой

Jog Dial

P900 переработал Jog Dial именно для better single-handed operations.

Он умел:

• rotate up → scroll;
• rotate down → scroll;
• press inward → select;
• press backward → previous screen/dismiss;
• additional direction → contextual navigation. (Alte Handys)

Sony Ericsson отдельно писала:

stylus в одной руке + Jog Dial в другой создают “powerful combination”. (Alte Handys)

Мысль

Это очень хорошо показывает недостаток stylus UI:

• стилус точный;
• но его надо достать;
• нужно часто использовать две руки.

Поэтому hardware navigation остаётся нужна даже на touchscreen.

---

BlackBerry выбирает другую специализацию

ОГРАНИЧЕНИЕ: кому-то важнее не Web и графика, а писать сотни писем

BlackBerry решает другую задачу

RIM делает ставку не на stylus.

А на:

thumb keyboard + wheel.

Предыстория

Inter@ctive Pager 950, 1998:

• 132×65 monochrome display;
• 31-key QWERTY;
• scroll wheel;
• email;
• calendar;
• address book;
• tasks. (York University Computer Museum)

А BlackBerry 5810 в 2002 уже прямо рекламируется через:

• thumb-typing keyboard;
• navigation trackwheel;
• integrated email;
• phone. (BlackBerry)

Вывод

Важно не сказать:

BlackBerry был плохим iPhone.

Это исторически бессмысленно.

BlackBerry — великолепная оптимизация под другой job:

много текста, высокая скорость ввода, tactile feedback.

---

Иногда лучший интерфейс — специализированное железо

BlackBerry против stylus

Очень классно поставить рядом:

Pocket PC

• stylus;
• touchscreen;
• virtual controls.

и

BlackBerry

• QWERTY;
• wheel;
• no touch.

Smithsonian прямо описывает BlackBerry как устройство с thumb keyboard and wheel for navigation, as opposed to using a stylus like its competitors. (National Museum of American History)

Вывод

Универсальность touchscreen ещё не победила.

В начале 2000-х хороший hardware control для конкретной задачи часто быстрее и понятнее software.

---

Акт V. Тупик desktop-in-a-pocket

Windows Mobile: а что если всё-таки уменьшить Windows?

ОГРАНИЧЕНИЕ: бизнес-пользователь хочет возможности PC в кармане

Решение Microsoft

Pocket PC / Windows Mobile получает:

• Start;
• menus;
• checkboxes;
• dropdowns;
• ListView;
• TreeView;
• tabs;
• calendar;
• horizontal scrollbar;
• vertical scrollbar.

Это не гипербола.

В документации Microsoft для Pocket PC 2003 перечисляются буквально desktop-style controls:

Button, RadioButton, DataGrid, ListBox, ComboBox, ListView, TreeView, TabControl, MonthCalendar, HScrollBar, VScrollBar... (Microsoft Download Center)

И это рационально

Потому что у Pocket PC есть stylus.

Ты способен попасть в tiny control.

---

Stylus фактически становится мышью

РЕШЕНИЕ, которое одновременно создаёт следующую проблему

Модель взаимодействия

Mouse:

• click;
• drag;
• right click.

Stylus:

• tap;
• drag;
• tap-and-hold.

Даже tap-and-hold используется как analog context/right-click.

На экране

Скрин старого Pocket PC:

• scrollbar справа;
• tiny X;
• dropdown;
• menus.

Главная мысль

Windows Mobile touch UI фактически был desktop pointer UI, где stylus заменил mouse.

Отсюда и странный современному человеку visual density.

---

Почему пальцем этим невозможно нормально пользоваться

ОГРАНИЧЕНИЕ: stylus и finger физически являются разными pointing devices

Вот тут надо дать немного HCI-фактуры.

Mouse/pen дают довольно точную координату.

Finger:

• покрывает площадь;
• закрывает объект;
• touch point не очевиден;
• нет hover;
• намного ниже precision.

Microsoft в современных touch guidelines прямо разделяет mouse/pen как high-precision input и touch, где contact area может включать множество координат и палец перекрывает интерфейс. (Microsoft Learn)

Это важнейший переход

Нельзя просто:

вынуть stylus и сказать пользователю нажимать пальцем.

Нужно перепроектировать всю геометрию интерфейса.

---

WAP и i-mode: сначала mobile web был отдельным миром

РЕШЕНИЕ: урезать сам Web под ограничения телефона

На экране

i-mode bookstore / WAP screen.

Отличная картинка прямо у CHM:

CHM — i-mode phone and mobile web

Фактура

NTT DoCoMo запустила i-mode в Японии в 1999 году.

К 2002 году система имела более 34 млн пользователей.

Протоколы использовали упрощённый HTML, специально рассчитанный на:

• small screens;
• limited buttons;
• no keyboard. (CHM)

Вывод

Первоначальный ответ на constraint был:

не адаптировать интерфейс к Web — адаптировать сам Web к интерфейсу.

iPhone потом попробует обратную стратегию:

показывать обычный Web и дать человеку масштабировать его пальцами.

---

Акт VI. Параллельно из мобильного текста рождается новый письменный язык

Текстового SMS человеку оказалось недостаточно

ОГРАНИЧЕНИЕ: мобильное сообщение очень короткое и эмоционально бедное

Япония, конец 90-х

На крошечных устройствах люди массово общаются текстом.

Но plain text плохо передаёт:

• эмоцию;
• интонацию;
• визуальные сигналы;
• быстрые бытовые состояния.

В 1999 emoji становятся доступны на японских мобильных телефонах. (Unicode)

Я бы не говорил

«Shigetaka Kurita invented the first emoji ever»

Это слишком упрощённая версия истории.

Лучше:

японские мобильные экосистемы конца 90-х превратили pictographs в массовую часть телефонного общения.

---

Emoji сначала были feature конкретной сети

РЕШЕНИЕ: картинка становится символом текста

Важная штука

Emoji — это не просто набор JPEG.

Они существуют внутри text stream.

И поэтому могут:

• стоять между словами;
• копироваться;
• отправляться;
• храниться как characters.

Это почти новый слой письменности.

Но возникает следующая проблема

У японских операторов:

• DoCoMo;
• KDDI;
• SoftBank

были собственные, частично пересекающиеся наборы.

И свои proprietary encodings.

То есть:

😄 одного оператора ≠ 😄 другого оператора.

---

Apple добавляет emoji не для всего мира — а потому что приходит в Японию

iPhone OS 2.2 — 2008

Визуал

Вот реальный интерфейс:

Фактура

Apple Emoji впервые появляется в iPhone OS 2.2 21 ноября 2008 года.

Но keyboard первоначально ограничена Японией и совместима с SoftBank — партнёром Apple на японском рынке. (Emojipedia - The Latest Emoji News)

Очень хорошая формулировка на слайд:

Emoji попали в iPhone не потому, что Apple решила изменить мировой язык. Apple просто пришлось адаптировать iPhone к японскому мобильному рынку.

А потом feature утекла наружу и стала глобальной.

---

ОГРАНИЧЕНИЕ: emoji ломаются между телефонами

Разные операторы фактически говорят на разных диалектах emoji

Unicode описывает эту проблему очень конкретно.

Vendor sets были несовместимы.

Компании строили cross-mapping tables.

А символ, которого не было на принимающем устройстве, мог отображаться как:

〓 GETA MARK

или просто потеряться / повредиться. (Unicode)

Это прекрасный интерфейсный сюжет

Emoji кажется декоративной feature.

Но следующая проблема становится infrastructure problem:

как стандартизировать значение визуального языка между миллиардами устройств?

---

Unicode превращает operator feature в универсальный язык

РЕШЕНИЕ: стандартизировать character, а не картинку

Timeline

1999 — emoji массово появляются на японских телефонах.

2000 — одно из ранних предложений добавить DoCoMo emoji в Unicode.

2009 — первые Unicode characters, специально предназначенные для emoji, появляются в Unicode 5.2.

Для interoperability был определён union из 722 characters японских операторов:

• 114 уже находились в Unicode;
• оставшиеся 608 добавили в Unicode 6.0 в 2010. (Unicode)

Это важно

Unicode стандартизирует не конкретную Apple-картинку.

Он стандартизирует:

semantic identity символа.

Apple, Google, Microsoft и Samsung могут рисовать его по-разному.

---

Акт XIII. Emoji окончательно выходит из Японии

2011: Apple превращает emoji из японской compatibility feature в global UI

iOS 5

В iOS 5 emoji keyboard становится keyboard option за пределами Японии.

Больше не нужны hacks или японская SIM. (Emojipedia)

Timeline на слайде

1999 — Japanese mobile emoji

↓

2008 — Apple, Japan/SoftBank

↓

2009–2010 — Unicode

↓

2011 — global iOS keyboard

↓

позже emoji становится default everyday input.

Вывод

Это удивительно похожий паттерн на все остальные истории:

сначала локальный workaround → потом standard → потом человек перестаёт думать, что это вообще когда-то было отдельной feature.

---

Акт VII. iPhone меняет не экран — он меняет motor model

2007: а что если stylus вообще не нужен?

iPhone

На экране

Оригинальный iPhone.

Главное

Touchscreen до iPhone уже существовал много лет.

Поэтому нельзя рассказывать:

Apple изобрела touchscreen phone.

Даже IBM Simon в 1993-м использовал touchscreen для dialing и text.

Реальная смена парадигмы в другом.

Apple заявляет:

“We are all born with the ultimate pointing device — our fingers.” (Apple)

То есть stylus больше не является заменой mouse.

Finger становится первичным input.

---

Сам контент становится control

РЕШЕНИЕ: direct manipulation

До

Чтобы прокрутить страницу:

найди scrollbar → схвати thumb → двигай.

Чтобы увеличить:

нажми Zoom +.

Чтобы двигаться по списку:

стрелка вниз.

После

двинь сам content.

Apple описывает три базовых действия первого iPhone:

• tap;
• flick;
• pinch. (Apple)

Это концептуально радикально

Пользователь больше не управляет control, который управляет объектом.

Он управляет самим объектом.

scrollbar перестаёт быть основным органом прокрутки, потому что вся поверхность страницы становится scroll control.

---

iPhone решает mobile Web противоположным способом

WAP: уменьшим Web. iPhone: оставим Web и дадим zoom

Поставить рядом:

Nokia / WAP

маленькая специализированная страница.

Safari

полноценная desktop-like web page.

Apple в 2007 рекламировала Safari именно тем, что пользователь может увидеть страницу так, как она была задумана, а затем tap/zoom нужный участок. (Apple)

Очень хороший historical loop

1999:

устройство слабое → content подстраивается под устройство.

2007:

устройство стало мощнее → interaction подстраивается под content.

---

Но палец создаёт новые ограничения

ОГРАНИЧЕНИЕ: finger — очень плохая мышь, но очень хорошая рука

Плохо

• нет pixel precision;
• закрывает target;
• нет hover;
• нет right-click;
• нельзя сделать сотню tiny controls.

Хорошо

• естественно двигается;
• умеет flick;
• несколько пальцев одновременно;
• удобно manipulating objects;
• всегда с пользователем.

Отсюда новый дизайн:

• larger targets;
• spacing;
• gesture;
• kinetic scrolling;
• direct manipulation;
• contextual controls.

Современный Apple HIG рекомендует minimum comfortable touch target порядка 44×44 pt. Это уже не историческая цифра 2007 года, а хороший показатель того, насколько архитектура UI изменилась из-за пальца.

Вывод

iPhone не сделал stylus UI удобнее пальцем. Он сделал интерфейс, которому stylus больше не нужен.

---

Виртуальная клавиатура: hardware наконец становится software

ОГРАНИЧЕНИЕ: touchscreen забрал место у physical keyboard

iPhone рискует.

BlackBerry имеет великолепную tactile QWERTY.

Apple её убирает.

Что получает взамен?

Dynamic keyboard

Она может:

• появляться только когда нужна;
• исчезать;
• менять layout;
• показывать numbers;
• показывать URL keys;
• менять language;
• использовать prediction/autocorrection.

Apple уже при первом анонсе подчёркивала soft QWERTY и predictive software. (Apple)

Фундаментальный trade-off

Physical keyboard:

хороший tactile input, но занимает место всегда.

Virtual keyboard:

хуже tactile feedback, зато hardware area становится programmable surface.

Это тот же переход, что soft keys у Nokia — только доведённый до конца.

---

Акт VIII. Теперь надо научить человека новой магии

ОГРАНИЧЕНИЕ: пользователь 2007 года ещё не родился со знанием swipe

И вот здесь появляется очень важная когнитивная проблема.

Touchscreen теперь может всё.

Но на экране не видно, что:

• страницу можно drag;
• объект можно swipe;
• фотографию можно pinch;
• элемент можно tap.

Mouse GUI хотя бы имел cursor.

Physical buttons имели форму.

Touchscreen — просто стекло.

---

РЕШЕНИЕ: интерфейс должен выглядеть знакомым

Скевоморфизм как onboarding

Показываем ранний iOS / iOS 6

• Notes = бумага;
• Calendar = календарь;
• Game Center = игровой стол;
• Books = bookshelf;
• кнопка = выпуклая кнопка;
• switch = физический switch.

Важная оговорка

Не надо утверждать:

«Apple официально придумала skeuomorphism для обучения touch».

Это скорее полезная HCI-интерпретация.

Но исследования affordances хорошо объясняют механизм: знакомые mappings и physical metaphors уменьшают объём знаний, который человеку приходится запоминать.

Главный тезис

Скевоморфизм — не просто декоративная любовь к коже. Это один из способов дать новой цифровой системе старые знакомые affordances.

И это рифмуется с Xerox Star.

---

Xerox 1981 и iPhone 2007 решают одну и ту же проблему

Вот я бы сделал почти без текста.

Слева:

Xerox folder icon

Справа:

iOS Notes / Calendar

Посередине:

“Use what people already know.”

Xerox

Новая концепция:

file system.

Метафора:

physical office.

iPhone

Новая концепция:

touch software object.

Метафора:

physical thing.

Вывод

Когда технология новая, интерфейс заимствует meaning из старого мира.

Это очень красивая арка доклада.

---

Акт IX. Теперь приложения взрываются

2008: iPhone превращается из продукта в платформу

App Store

Фактура

В первый weekend App Store:

• более 800 native applications;
• более 10 млн downloads за три дня. (Apple)

Через девять месяцев:

• 1 млрд downloads;
• более 35 000 apps;
• 77 стран. (Apple)

Почему это UI-событие

Пока интерфейс делает Apple, можно контролировать каждую кнопку.

Когда interfaces начинают делать десятки тысяч third-party developers, возникает новое ограничение:

consistency.

Пользователь не может каждый раз заново учиться:

где Back?
как выглядит button?
как работает list?
что значит swipe?

---

Новое ограничение больше не hardware

ОГРАНИЧЕНИЕ: один человек использует сотни приложений

Это важный structural transition.

1999

Проблема:

экран 96×65.

2009

Проблема:

на одном устройстве 35 000 возможных interfaces.

То есть constraint постепенно перемещается:

hardware complexity

↓

interaction complexity

↓

ecosystem complexity

И поэтому следующие великие UI-инновации — уже не столько hardware.

Это:

• common patterns;
• HIG;
• standardized navigation;
• design languages;
• design systems.

---

Акт X. Параллельная линия: интерфейс перестаёт изображать физический мир

Zune: а обязательно ли кнопка должна выглядеть как кнопка?

Zune HD — 2009

Это очень важный слайд.

И полноценный walkthrough:

TechCrunch — Zune HD UI full tour

Что видно

Большие слова:

music videos pictures radio social internet

Практически нет:

• bezel;
• fake material;
• visual button chrome.

И это было реально непривычно

Современный обзор 2009 года замечал, что часть людей может испытывать learning curve именно потому, что text-type interface не выглядит как conventional button-type UI. (Techolo)

Это идеальный исторический момент.

Интерактивный объект впервые начинает позволять себе не выглядеть нажимаемым.

---

Zune превращает экран из страницы в пространство

Motion начинает объяснять hierarchy

Engadget очень хорошо описывал Zune HD:

• huge typography;
• swipe между областями;
• layers;
• fluidity;
• ощущение, что пользователь zooming into a region интерфейса, а не просто открывает следующий список. (Engadget)

Microsoft manual тоже очень показателен

Zune HD пользователю объясняли:

• tap-and-hold;
• Quickplay;
• jump-to-letter;
• swipe unlock;
• virtual back;
• double-tap zoom. (Microsoft Download Center)

Вывод

Motion перестаёт быть decoration. Оно начинает показывать spatial relationship между состояниями.

Позже это станет одной из центральных идей и Metro, и Material.

---

Zune хорошо показывает новую проблему: невидимые действия

ОГРАНИЧЕНИЕ: когда убрал кнопку — убрал и подсказку

Это прекрасная контрарка.

Flat/digital-native UI выглядит чище.

Но:

что здесь нажимается?

Например, Zune HD мог использовать большой plain text как interactive target.

И reviewer прямо отмечал learning curve: некоторые люди привыкли, что clickable thing выглядит как button. (Techolo)

Вывод

Каждое упрощение чего-то стоит.

Chrome даёт clutter, но одновременно даёт affordance.

Это потом станет огромным спором эпохи flat design.

---

Акт XI. Microsoft делает из Zune полноценную философию

Windows Phone: интерфейс как аэропорт

2010 — Metro

Визуал

Windows Phone 7:

• PEOPLE
• MESSAGING
• PICTURES
• MUSIC
• huge Segoe typography;
• tiles;
• cropped headings.

И вот твоя ассоциация с аэропортом — буквально исторически правильная

Microsoft описывала Metro как design language, основанный на:

street and airport signage.

Цель:

• clean;
• simple;
• user friendly;
• меньше clutter;
• negative space;
• typography показывает content. (Microsoft Learn)

Это великолепная противоположность iOS 6

Apple:

показать знакомый физический объект.

Microsoft:

убрать объект вообще и оставить information.

---

Почему аэропорт — прекрасная метафора интерфейса

ОГРАНИЧЕНИЕ: человек должен мгновенно понять интерфейс, не изучая его

В airport signage нельзя рассчитывать, что человек:

• прочитает manual;
• десять минут изучает меню;
• знает дизайн системы.

Нужны:

• сильная hierarchy;
• крупная typography;
• predictable spatial layout;
• minimum ornament.

Microsoft сформулировала Metro principles как:

• Clean, Light, Open and Fast
• Celebrate Typography
• Alive in Motion. (Microsoft Learn)

Особенно важно

Microsoft писала, что motion должна давать clues about context.

То есть animation уже является частью information architecture.

---

Cropped text — не ошибка, а affordance

Очень хороший отдельный визуальный слайд.

Показываем Windows Phone Panorama:

например:

peop...

следующая колонка видна кусочком.

Логика

Экран не показывает отдельную прямоугольную страницу.

Он показывает viewport в большую горизонтальную поверхность.

Кусочек следующего раздела говорит:

здесь есть продолжение → swipe.

Это интереснейший момент:

сам layout обучает gesture.

Не отдельная стрелочка.

Не tutorial.

Пространственная композиция.

---

Windows Phone был не «слишком красивым для своего времени», а радикально digital-native

Вот здесь я бы поправил твою исходную формулировку.

Можно сказать:

Windows Phone выглядел как интерфейс из будущего

но не:

«он умер, потому что был слишком передовой».

Для этого слишком много других причин: ecosystem, apps, timing, platform transitions и т. д.

Зато точно можно сказать:

Microsoft раньше Apple массово отказалась от literal skeuomorphism и сделала typography + content + motion центральными элементами mobile OS.

И визуально это действительно предвосхищает многие вещи следующих лет.

---

Hardware тоже тихо убирает ограничения

Retina — 2010

iPhone 4

Фактура

Экран:

• 3.5";
• 960×640;
• 326 ppi;
• в четыре раза больше pixels, чем iPhone 3GS. (Apple)

Apple тогда сравнивала качество текста с fine printed page.

Почему это UI history

Не надо говорить:

Retina вызвала flat design.

Это слишком сильная причинность.

Но она делает возможными:

• тоньше typography;
• маленькие детали;
• sharp iconography;
• более тонкие visual separators;
• отказ от части грубого pixel-era chrome.

Общая мысль

Visual language зависит не только от дизайнерской моды. Он ограничен физикой display.

---

Акт XII. Android пытается решить другую проблему: fragmentation

Android: свобода создаёт хаос

ОГРАНИЧЕНИЕ: один Android выглядит по-разному на разных телефонах

У Android огромная сила:

• разные manufacturers;
• разные screen sizes;
• разные hardware;
• разные themes.

Но у developer возникает проблема:

что вообще увидит пользователь?

Google позже прямо писала, что до Android 4.0 variance системных themes между устройствами затрудняла создание одного predictable look and feel. (Android Developers Blog)

---

Honeycomb: hardware buttons начинают превращаться в software

2011

Android 3.0 Honeycomb.

Новое

Google называет его новым:

virtual and “holographic” UI

для tablets. (Android Developers)

Особенно важны:

System Bar

• Back;
• Home;
• status;
• notifications;

как soft navigation buttons.

Action Bar

стандартное место:

• navigation;
• contextual options;
• actions;
• overflow. (Android Developers)

Большая историческая линия

Помни Nokia:

physical button → software назначает ей функцию.

Теперь следующий шаг:

сама button становится software.

---

Физическая Menu button начинает умирать

2012

Google публикует буквально:

“Say Goodbye to the Menu Button”

Почему

Некоторые Android devices уже не имеют dedicated hardware Menu key.

Действия должны мигрировать в Action Bar.

Google говорит разработчикам:

• Android больше не требует dedicated Menu button;
• используйте Action Bar;
• common actions нужно делать видимыми. (Android Developers Blog)

Какая красивая арка

1990-е:

hardware defines UI

↓

2000-е:

UI labels hardware

↓

2010-е:

UI replaces hardware

---

Holo: Google начинает стандартизировать сам визуальный язык

РЕШЕНИЕ: predictable system theme

Android 4.0.

Google делает unmodified Holo theme compatibility requirement для устройств с Android 4.0/Android Market.

Это означает: developer теперь может рассчитывать, что стандартный Holo widget будет выглядеть одинаково независимо от manufacturer's skin. (Android Developers Blog)

Почему это важнее, чем «Holo красивый»

Проблема теперь:

не как нарисовать button.

А:

как гарантировать один mental model на сотнях devices.

Design начинает становиться infrastructure.

---

Акт XIV. Человека уже не надо так сильно учить touchscreen

К 2013 году произошло что-то фундаментальное

ОГРАНИЧЕНИЕ ИСЧЕЗЛО: touchscreen перестал быть новой технологией

Шесть лет после первого iPhone.

Сотни миллионов пользователей уже знают:

• tap;
• scroll;
• swipe;
• pinch;
• app icon;
• tabs;
• Back;
• notification;
• virtual keyboard.

И теперь возникает обратная проблема.

Все визуальные подсказки, необходимые новичку 2007 года, превращаются в:

visual noise.

Вот этот тезис я бы выделил огромным

Интерфейс может убрать объяснение только после того, как пользователь выучил правило.

---

iOS 7: пользователь уже знает, что кнопка является кнопкой

РЕШЕНИЕ: снять часть scaffolding

2013

Слева iOS 6.

Справа iOS 7.

Apple сама говорит

iOS 7:

• completely redesigned;
• subtle motion;
• refined typography;
• translucency;
• functional layers.

Jony Ive:

simplicity, clarity, efficiency
и не просто отсутствие ornamentation, а bringing order to complexity. (Apple)

И при этом Apple подчёркивала:

новый interface остаётся instantly familiar сотням миллионов пользователей. (Apple)

Вот это очень важно.

Можно позволить себе abstraction, потому что базовый interaction language уже знаком.

---

Flat design — не причина, а симптом

Вот здесь я бы специально сломал популярный рассказ.

Не:

«в 2013 всем надоели текстуры».

А:

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

Это намного интереснее.

Было

Кнопка должна доказать:

я нажимаюсь.

Стало

Пользователь уже предполагает:

этот текст может быть interactive.

И поэтому interface получает возможность стать visually quieter.

---

Но flat создаёт старую проблему заново

ОГРАНИЧЕНИЕ: если всё плоское, что здесь вообще interactive?

Это можно связать обратно с Zune.

Когда убираешь:

• bevel;
• border;
• shadow;
• texture;
• obvious control chrome;

исчезает часть affordance.

Поэтому в 2010-х появляются споры о:

• ghost buttons;
• low contrast;
• hidden navigation;
• hamburger menus;
• discoverability.

Вывод

UI history — не линейное движение к минимализму. Это маятник между clarity и simplicity.

---

Google Kennedy — «Почему вообще понадобился Material»

Вот это обязательно добавить перед Material 2014.

Ты прав насчёт унификации Google, только формулировку можно сделать намного фактологичнее.

В 2012 дизайнер Zach Gibson пришёл в Google в Art Department из шести человек, который поддерживал около 200 продуктов в компании из 35 000+ человек.

До Material у Google уже был design refresh Kennedy:

• typography hierarchy;
• buttons;
• iconography;
• whitespace.

Но Kennedy покрывал в основном top-tier web products.

Затем Art Department объединился с UXA, чтобы протащить общий visual language через desktop и mobile — из этого и вырос Material. (Google Design)

А официальный анонс Material в 2014 формулирует проблему ещё шире: Google и Android выходят на новые form factors, поэтому нужен один consistent design для mobile, desktop and beyond. (Google Developers Blog)

То есть Material надо рассказывать так:

Ограничение больше не “экран маленький”. Ограничение — у Google сотни продуктов и всё больше типов устройств, и они не должны каждый раз говорить на новом UI-языке.

Google Design — история создания Material

Оригинальный анонс Material, 25 июня 2014

---

Акт XV. Material: Google понимает, что «просто flat» недостаточно

Google столкнулась не с одним продуктом, а с сотнями

ОГРАНИЧЕНИЕ: как сделать один Google из сотен interfaces

В 2012 году дизайнер Zach Gibson пришёл в Google в шестичленную Art Department, поддерживавшую около 200 products в компании из более 35 000 человек. (Google Design)

До Material существовал проект Kennedy:

• typography hierarchy;
• consistent buttons;
• icons;
• whitespace.

Но в основном для топовых web products.

Следующий вопрос:

как унифицировать desktop + mobile + Android + новые device categories?

---

Material Design — 2014

РЕШЕНИЕ: проектировать не интерфейс, а систему интерфейсов

Google анонсирует Material 25 июня 2014.

И формулирует проблему очень прямо:

mobile когда-то означал:

• less screen;
• slower connection;
• fewer features.

Но devices стали мощнее.

Google расширяется на новые form factors.

Поэтому нужен:

“one consistent design that spans devices across mobile, desktop, and beyond.” (Google Developers Blog)

Вот это и есть исторический сдвиг.

Не новый skin.

Design system.

---

Material — это не просто flat design

Это обязательно отдельный слайд.

Skeuomorphism

объект выглядит как paper/notebook/leather.

Flat

объект избавляется от literal physical representation.

Material

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

Google говорит:

• tactile surfaces;
• surface;
• shadow;
• structure;
• what can be touched;
• what can move;
• meaningful motion. (Google Developers Blog)

Очень хороший headline

Skeuomorphism копировал внешний вид физического мира. Material копирует его причинность.

---

Почему design system становится неизбежным

Новое ограничение: scale

К 2014 interface должен работать:

• phone;
• tablet;
• laptop;
• desktop;
• TV;
• watch;
• car.

Google прямо описывала Material как multi-screen system и адаптивный язык. (Android Developers Blog)

Старый способ

дизайнер рисует один screen.

Новый

дизайнер определяет rules.

Например:

• type scale;
• spacing;
• elevation;
• surfaces;
• components;
• touch feedback;
• motion;
• responsive layout.

Вывод

Когда продуктов становится слишком много, главным интерфейсным артефактом становится не экран — а система правил.

---

Google буквально делала UI из бумаги

Бумага как physics engine

Вот здесь отличная фактура.

Команда Material действительно:

• делала physical paper prototypes;
• изучала реальные shadows;
• складывала paper icons;
• смотрела, как листы должны появляться и двигаться;
• затем переносила эти правила в code. (Google Design)

Google позднее сформулировала:

Motion carries meaning.

То есть motion имеет строгую задачу:

• объяснить hierarchy;
• показать origin;
• сохранить continuity;
• сообщить пользователю причинно-следственную связь.

---

Ранний Material можно буквально разобрать как физическую конструкцию

Google I/O 2014 app

Визуал:

Оригинальный подробный разбор:

Google — Material Design in the 2014 I/O app

Там невероятно интересная фактура

Команда буквально спорит:

этот shadow означает, что здесь два листа бумаги или три?

Один вариант отвергается, потому что layering становится физически нелогичным.

Другой вариант создаёт отдельную surface для title, которая поднимается над content во время scroll. (Android Developers Blog)

Это идеальная иллюстрация

Material — это не:

давайте сделаем красивые карточки.

Это:

давайте дадим всему UI единый набор физических законов.

---

Что обязательно добавить ПОСЛЕ Material

Вот здесь у нас пока настоящая дыра.

iPhone X — 2017: исчезает Home button

Очень важный слайд, потому что он завершает огромную линию:

physical button → soft key → software button → gesture.

iPhone X убирает Home button.

Apple прямо пишет: iOS 11 replaces the Home button with gestures; свайп снизу теперь означает Home. (Apple)

Это можно связать с Nokia двадцатилетней давности:

Nokia пыталась заставить одну физическую кнопку иметь разные функции.

А теперь:

физической кнопки больше вообще нет.

Apple — iPhone X launch

---

Samsung Galaxy Fold — 2019: экран теперь меняет форму во время использования

Очень хорошее новое физическое ограничение.

До этого responsive означал:

разные устройства имеют разные экраны.

Fold говорит:

один и тот же экран меняет размер прямо во время работы приложения.

Samsung пришлось придумать App Continuity: открыл телефон — текущее приложение должно продолжиться на большом дисплее с того же места.

Плюс Multi-Active Window — до трёх apps одновременно. (Samsung Global Newsroom)

Samsung — Galaxy Fold UI / App Continuity

---

Android 12 / Material You — 2021: дизайн перестаёт быть одинаковым для всех

Это очень важное продолжение Material.

Material 2014:

унифицировать продукты.

Material You:

теперь внутри единой системы дать пользователю индивидуальность.

Wallpaper → color extraction → palette автоматически распространяется на:

• lock screen;
• notifications;
• settings;
• widgets;
• apps.

Google прямо писала, что Material You должен unify software and hardware ecosystems under a single design language. (Google Blog)

Это следующий маятник:

consistency

→ стала слишком одинаковой →

personalization within consistency.

---

iPhone 14 Pro — 2022: Dynamic Island

Вот этот слайд идеально попадает в твою исходную тему.

Ограничение:

в экране физически торчат камеры и sensors.

Обычно задача UI:

как спрятать hardware hole.

Apple:

давайте превратим hardware defect/constraint в interface surface.

Dynamic Island расширяется, показывает live state, взаимодействует с Live Activities и буквально геометрически построен вокруг TrueDepth camera. (Apple Developer)

Это очень красивая современная версия:

ограничение железа не маскируют — оно становится частью языка интерфейса.

---

И тут начинается AI-линия

ChatGPT — 2022: вместо поиска функции можно сказать, чего ты хочешь

Вот это надо добавить обязательно.

Потому что история внезапно возвращается к тексту.

Но теперь это не CLI.

CLI:

человек обязан знать язык компьютера.

ChatGPT:

компьютер пытается понять обычный человеческий язык.

При запуске 30 ноября 2022 OpenAI специально подчёркивала dialogue format, follow-up questions и conversational interaction. (OpenAI)

Получается красивая арка:

CLI

человек учит язык машины

↓

GUI

машина показывает возможности

↓

AI

машина снова принимает текст — но теперь пытается говорить на языке человека.

---

Apple Vision Pro / visionOS — 2024: экрана больше нет

Очень важный новый interaction frontier.

Ограничение:

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

Input:

• eyes;
• hands;
• voice.

И отсюда появляется настоящий glass UI, причём здесь стекло не декоративное.

Apple объясняет: opaque windows в spatial environment перекрывали бы surroundings и ощущались тяжёлыми; glass позволяет видеть мир за UI, адаптируется к освещению, а highlights/shadows показывают scale и положение window в пространстве. (Apple Developer)

Это надо поставить до Liquid Glass, потому что иначе стеклянный iPhone возникает из ниоткуда.

---

ChatGPT / GPT-4o — 2024: интерфейс начинает видеть и слышать

Следующий этап AI.

ChatGPT больше не требует:

переведи всё происходящее вокруг тебя в текст.

GPT-4o проектировался как единая multimodal модель для text, audio, image и video; OpenAI прямо называла это шагом к более естественному human-computer interaction. (OpenAI)

Очень сильная линия:

keyboard → mouse → touch → voice → camera/context.

---

Gemini Live — 2025: контекст становится input

Можно отдельным продуктом.

В 2025 Gemini Live получает camera + screen sharing.

Теперь вместо:

«опиши мне, что у тебя на экране»

можно:

«вот мой экран — посмотри сам».

Или навести камеру на physical world и разговаривать о том, что модель видит. (Google Blog)

Это принципиальный UI-сдвиг:

часть interface input больше вообще не требует explicit user action по кодированию информации.

---

Android 16 / Material 3 Expressive — 2025: индустрия устала от стерильной одинаковости

Это очень хороший современный визуальный слайд.

История Material делает ещё один поворот.

Google рассказывает, что исследование началось с вопроса примерно:

почему все приложения стали выглядеть одинаково и скучно?

M3 Expressive создавался три года:

• 46 исследований;
• более 18 000 участников;
• десятки design iterations.

Новый язык усиливает:

• color;
• shape;
• size;
• containment;
• springy motion;
• responsive components;
• emphasized typography. (Google Design)

То есть современный тренд уже не:

«ещё меньше decoration».

А:

после десятилетия систематизации вернуть интерфейсам эмоциональность, не потеряв usability.

Это важно.

---

iOS 26 — 2025: тот самый «стеклянный телефон»

Да — Liquid Glass.

И история оказывается ещё лучше, чем просто «Apple опять сделала стекло».

Apple официально говорит, что дизайн inspired by the depth and dimensionality of visionOS. (Apple)

Liquid Glass:

• refracts underlying content;
• reacts на движение;
• имеет specular highlights;
• morphs;
• адаптируется к light/dark context;
• применяется к buttons, sliders, tabs, toolbars, icons.

И главное: это первый новый Apple design, одновременно протянутый через iOS, iPadOS, macOS, watchOS и tvOS, чтобы дать экосистеме больше визуальной гармонии. (Apple)

То есть тут неожиданно повторяется ровно Material 2014:

Google:

слишком много surfaces → общий Material.

Apple:

слишком много platform languages → общий Liquid Glass.

А Apple на WWDC вообще сама выстраивает его lineage:

Aqua → iOS 7 blur → iPhone X → Dynamic Island → visionOS → Liquid Glass. (Apple Developer)

Это точно надо в доклад.

---

ChatGPT agent — 2025: пользователь перестаёт управлять интерфейсом сам

Следующий большой сдвиг.

До этого UI отвечает:

куда нажать?

Agent:

не нажимай — скажи мне результат, я сам нажму.

ChatGPT agent получил virtual computer и способен:

• ходить по websites;
• заполнять forms;
• работать с connected sources;
• анализировать;
• редактировать spreadsheets;
• выполнять многошаговые tasks. (OpenAI Help Center)

И появляется совершенно новое ограничение:

не discoverability, а trust.

Теперь UI должен объяснять:

• что агент сейчас делает;
• что собирается сделать;
• когда просит permission;
• где пользователь должен подтвердить;
• как остановить;
• как исправить ошибку.

Это очень хорошая точка для будущего интерфейсов.

---

Gemini 3 — 2025: интерфейс больше не обязан быть заранее нарисован

Вот это я бы точно добавил ближе к самому концу.

Google в ноябре 2025 прямо ввела термин generative interfaces.

Gemini может генерировать UI под конкретный запрос:

• visual layout;
• dynamic view;
• interactive modules;
• layouts tailored to the query. (Google Blog)

И тут происходит очень сильный исторический переход:

Material

дизайнер заранее определяет систему компонентов.

Generative UI

модель в runtime решает:

какой interface сейчас лучше всего объяснит именно этот ответ.

Это потенциально огромная следующая эпоха.

---

Google intelligent eyewear / Android XR — 2026: интерфейс начинает исчезать

Это хороший текущий финал.

В мае 2026 Google показала intelligent eyewear, которое должно начать выходить осенью 2026.

Есть:

• camera;
• microphones;
• speakers;
• Gemini;
• варианты с in-lens display.

Можно:

• спрашивать о том, что видишь;
• получать directions;
• отправлять messages;
• получать summaries;
• видеть live translation;
• выполнять задачи hands-free. (Google Blog)

И это логически приводит к красивому современному вопросу:

Если система видит то же, что видишь ты, понимает речь, знает контекст и может сама действовать — сколько interface вообще должно остаться?

Это уже почти противоположность Xerox Star.

Xerox когда-то пришлось нарисовать максимум объектов, чтобы сделать компьютер понятным.

AI-интерфейс потенциально пытается сделать обратное:

убрать объекты и оставить намерение пользователя.

---

Финальный слайд

Поставить:

Windows Mobile scrollbar → Nokia soft key → Palm stylus → iOS leather button → Metro text → Material card

И огромный текст:

Не спрашивайте: “Почему старый интерфейс такой странный?”

А ниже:

Спросите: “Какое ограничение этот странный интерфейс решал?”

И финальная формулировка:

**Интерфейсы не становились минималистичнее сами по себе.
Из них исчезали объяснения, controls и метафоры, которые больше не были нужны.**

---

# Дополнительные общие выводы и приколюхи

Акт XVI. Вся история складывается

1981–2014: ограничения постепенно меняют природу

Я бы сделал здесь большую таблицу.

| Эпоха | Ограничение | Ответ | | ---------------------- | --------------------------------- | ------------------------- | | CLI | человек должен помнить команды | GUI | | Xerox | компьютер слишком абстрактный | physical metaphors | | Handheld | нет места для mouse/keyboard | pen | | Newton | машина плохо понимает handwriting | Palm Graffiti | | Feature phone | hardware buttons фиксированы | soft keys | | Tiny screen | мало одновременно видимого | hierarchy + scrolling | | Numeric keypad | 12 keys для всего языка | multi-tap / T9 | | Mobile Web | desktop web не помещается | WAP / i-mode | | Long lists | repeated keypress медленный | roller / joystick | | Rich mobile OS | controls не масштабируются | touchscreen / stylus | | Email | нужен быстрый text input | BlackBerry keyboard | | Windows Mobile | desktop UI слишком мелкий | stylus as pointer | | Emoji | plain text недостаточно | pictographs | | Emoji networks | proprietary encodings | Unicode | | Finger touch | нет precision | large controls + gestures | | Touch unfamiliar | user не знает affordances | skeuomorphism | | App ecosystem | тысячи UI | common patterns | | Digital maturity | chrome создаёт noise | Metro / iOS 7 | | Android fragmentation | unpredictable platform | Holo | | Multi-device ecosystem | сотни продуктов | Material / design systems |

---

Очень важный слайд: каждый новый интерфейс сначала требует обучения

Я бы нарисовал такую последовательность:

Mouse

1981:

приходится объяснять само слово “mouse”.

↓

Через несколько лет:

естественная часть computing.

Graffiti

1996:

пользователь учит новый alphabet.

↓

исчезает вместе с pen-first PDA.

Soft keys

пользователь учится смотреть на подпись над hardware button.

T9

не смотри на буквы — доверься prediction.

Swipe

в 2007 новый gesture.

↓

сегодня двухлетний ребёнок делает его без tutorial.

Emoji

Japanese carrier feature.

↓

часть мировой письменности.

Вывод

“Intuitive” часто означает не “естественное”, а “мы это уже когда-то выучили”.

Очень сильная штука.

---

Интерфейс постоянно переносит работу с человека на машину

Можно сделать как отдельную ось.

Command line

человек знает command

↓

GUI

машина показывает command

↓

T9

машина угадывает слово

↓

Touch

машина интерпретирует gesture

↓

Responsive / Material

машина адаптирует layout

↓

AI сейчас

машина пытается угадать intention

То есть можно закончить неожиданно современно:

История UI — это ещё и история того, как computation постепенно забирает на себя работу, которую раньше выполнял пользователь.

---

Вторая ось: hardware постепенно растворяется в software

Сделать визуально:

Physical key

MENU

↓

Soft key

physical button + software label

↓

Touch button

всё software

↓

Gesture

даже button исчезает

↓

Voice / AI

может исчезнуть и explicit control.

Исторические примеры

Nokia:

software меняет значение hardware.

Honeycomb:

software уже рисует navigation hardware.

iPhone:

keyboard становится software.

Zune/Metro:

button visual может исчезнуть.

Вывод

Чем более универсальной становится поверхность, тем меньше интерфейс определяется формой устройства.

---

Третья ось: интерфейс сначала показывает больше подсказок — потом учится их скрывать

Нарисовать:

explicit

[ SAVE ]

↓

button with icon

↓

icon

↓

gesture

↓

prediction / automatic action

implicit

Но снизу добавить:

каждый шаг вправо требует больше shared knowledge между человеком и системой.

Это прекрасно объясняет, почему:

• старые UI кажутся verbose;
• новые — clean;
• но новый UI иногда менее discoverable.

---

Почему к 2014 всё выглядит «плоско» — но это не рассказ про flat design

Вот так я бы сформулировал итог вместо «к 14 году все разобрались».

2010–2014

2010 — Windows Phone / Metro

typography + content + motion

2011 — Honeycomb / Holo

system-level digital UI + consistent action patterns

2013 — iOS 7

less ornament, layers, typography, motion

2014 — Material

systemized surfaces + motion + multi-device consistency

Общая причина

Уже исчезла необходимость каждый раз объяснять:

• что экран touch;
• что item нажимается;
• что screen scrollable;
• что app icon запускает приложение.

Но

Это не означает, что все выбрали одинаковый flat style.

Material, например, сознательно использовал depth and shadows.

Правильный вывод

К 2014 индустрия в основном перестаёт объяснять цифровой интерфейс через буквальное изображение физического мира и начинает создавать собственные цифровые языки.

---

Я бы именно так строил ритм доклада

У тебя получается несколько повторяющихся мини-историй:

«Надо помнить команды» → Xerox показывает objects.

«GUI не помещается в карман» → stylus.

«Recognition не работает» → Palm заставляет человека выучить Graffiti.

«Кнопок мало» → soft keys.

«Экран маленький» → hierarchy и scroll.

«12 кнопок мало для языка» → T9.

«Web не помещается» → WAP/i-mode.

«Нажимать ↓ слишком долго» → roller/joystick.

«Функций уже слишком много» → touchscreen/P900.

«Нужно много писать» → BlackBerry.

«Desktop UI мелкий» → Windows Mobile + stylus.

«Текст эмоционально бедный» → emoji.

«Emoji несовместимы» → Unicode.

«Stylus неудобен» → finger-first iPhone.

«Finger неточный» → large controls + direct manipulation.

«Touch непонятен» → familiar physical metaphors.

«Люди touch уже знают» → Metro / iOS 7.

«Android слишком разный» → Holo.

«Продуктов слишком много» → Material / design systems.

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

И ещё важная вещь: выше получилось 76 номеров не потому, что я предлагаю реально делать 76 содержательных слайдов — часть из них можно склеить по два. Я бы для master-версии собрал примерно 40–45 настоящих слайдов, а уже для доклада оставил 25–30. Но я бы сначала ничего не выкидывал: Xerox → Palm → Nokia → T9 → WAP → Roller → color → P900 → BlackBerry → Windows Mobile → emoji → iPhone → skeuomorphism → App Store → Zune → Metro → Retina → Holo → iOS 7 → Material — это уже очень цельная история.

---

Да. И теперь я бы не трогал основную историю до Material, а точечно добавил недостающие продуктовые слайды и затем продолжил хронологию до 2026-го.

И правило фиксируем: один слайд = один продукт / одна OS / одна design system. Один и тот же продукт может занимать два слайда, если там две хорошие истории.

Что из твоего исходного запроса уже покрыто

| Тема | Статус | | ------------------------------------------------------------- | ----------------------------------------------- | | CLI → Xerox Star → icons / desktop metaphor | ✅ есть | | Macintosh / массовый GUI | ✅ есть | | Newton / stylus | ✅ есть | | Palm Graffiti — специальный язык, которому учился человек | ✅ есть | | Деревянный PalmPilot + палочка вместо stylus | ⚠️ упомянуто, нужен отдельный слайд | | Ч/б телефоны / мало строк | ✅ есть | | Nokia: подписи Select / Back прямо над физическими кнопками | ✅ есть | | Nokia WAP: рекомендации разработчикам, как строить интерфейс | ⚠️ есть кусочком, нужен отдельный слайд | | T9 | ✅ да, писал; лучше привязать к конкретной Nokia | | Nokia Navi Roller | ✅ есть | | Nokia joystick | ✅ есть | | цветные кнопочные телефоны | ✅ есть | | P900 Jog Dial / stylus / flip / несколько способов ввода | ✅ есть | | BlackBerry QWERTY + wheel | ✅ есть | | Windows Mobile: stylus + мелкие controls + scrollbar сбоку | ✅ есть | | emoji: Japan → SoftBank → iPhone → Unicode | ✅ есть | | первый iPhone | ✅ есть | | skeuomorphism | ✅ есть | | Zune | ✅ есть | | Windows Phone / Metro / аэропортовая навигация | ✅ есть | | Retina | ✅ есть | | Holo | ✅ есть | | iOS 7 | ✅ есть | | Material 2014 | ✅ есть, но причину создания надо усилить |

И да: про Nokia с текстом над кнопками и про T9 уже есть. Более того, про Nokia нашёлся замечательный почти первичный документ 2000 года: Nokia прямо пишет для WAP UI — “Two selection keys with function name displayed above”, scrolling либо roller, либо up/down keys, select через roller press. Это один из лучших источников всей презентации. (STL)

---

Итого: чего сейчас не хватает в master timeline

После нынешнего Material-блока я бы точно добавил хронологически:

2017 — iPhone X / gesture replaces Home button 2019 — Galaxy Fold / screen continuity 2021 — Material You / personalized system 2022 — iPhone 14 Pro / Dynamic Island 2022 — ChatGPT / natural language as interface 2024 — Vision Pro / eyes + hands + spatial glass 2024 — GPT-4o / multimodal interaction 2025 — Gemini Live / camera + screen context 2025 — Material 3 Expressive / reaction against sterile sameness 2025 — iOS 26 Liquid Glass / universal Apple design language 2025 — ChatGPT agent / delegation instead of navigation 2025 — Gemini 3 / generative interfaces 2026 — Android XR intelligent eyewear / ambient AI interface

А до Material я бы добавил/выделил всего четыре вещи:

Palm wooden prototype, Nokia WAP Designer’s Guide, Nokia 3210/T9, Google Kennedy → Material.

Это уже закроет почти все вещи, которые ты перечислил, и даст продолжение истории до сегодняшнего дня без ощущения, что после 2014 дизайн просто закончился.

И мне кажется, появился очень хороший последний акт доклада: после 2014 ограничением становится уже не размер экрана. Сначала — количество устройств, потом — необходимость персонализации, затем — экран меняет форму, исчезает в spatial computing, а сейчас AI вообще начинает ставить под вопрос необходимость заранее нарисованного интерфейса.

---

# Все исходные ссылки

zune HD

bienvenido a zune HD

setu"