Преза Юрия Ветрова.

1. Всемирная история
интерфейсов
1001 продукт, повлиявший
на сегодняшние технологии
© 2011 Юрий Ветров
www.uimodeling.ru

2. О чем и зачем этот рассказ?
Читать о том, как возникали и развивались
ключевые современные цифровые
продукты и интерфейсы – всегда
увлекательно. И тем более полезно, если
вы хотите поучаствовать в создании
следующей технической революции.
В этой презентации – 10 таких историй из
большой коллекции событий.
2

3. Основа оконных интерфейсов:
Xerox Star
3

4. В июле 1945 Vannevar Bush описал Memex –
систему хранения знаний и работы с ними. По сути,
персональный компьютер на основе микрофильмов.
4

5. Идея вдохновила Douglas Engelbart. Его команда
подготовила в 1968 году презентацию системы NLS (oN-Line
System) – она совмещала мышь, GUI, гипертекст, растровую
графику, средства совместной работы, видео-конференции,
email, текстовый редактор и прообраз интернета.
5

6. Работа лаборатории Xerox PARC стала бесконечным источником
современных компьютерных технологий – от GUI и лазерных
принтеров до объектно-ориентированного программирования и
электронной бумаги. Первым результатом стал Xerox Alto в 1973
– он представил метафору рабочего стола, WYSIWYG- и
графический редактор, сетевые игры.
6

7. Их первый крупный коммерческий продукт, Xerox Star, собрал
вместе массу инноваций, которые являются основой
современных компьютеров – оконный GUI с парадигмой WIMP,
папки документов, локальную сеть и файловые серверы,
лазерную печать, чекбоксы и радио-кнопки. Правда, продажи не
пошли – это было дорого и медленно.
7

8. Зато модель Apple 1984 года Macintosh стала супер-
хитом и первым коммерчески успешным компьютером
с графическим интерфейсом и управлением мышью. А
также первой платформой для Microsoft Word и Excel,
Lotus 1-2-3, Adobe Photoshop и Illustrator.
8

9. Несмотря на то что Apple сама позаимствовала ключевые
идеи из Star, в 1989 году она подала в суд на Microsoft за
копирование концепции оконного интерфейса. Xerox сразу
подключился к процессу, обвинив в том же Apple. В итоге суд
отклонил иск Xerox за истечением срока давности, а Apple не
смогла доказать кражу.
9

10. Оптимизация производительности:
Системы бронирования билетов
10

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

12. В 1939 в офисах American Airlines были поставлены
специальные табло, которые сигнализировали о
продаже 75% билетов на рейс. С помощью этого
организационно-интерфейсного решения удалось
значительно сократить количество звонков.
12

13. Мощным рывком стали системы Reservisor 1946 года,
Magnetronic Reservisor 1952 и Reserwriter 1958 –
специальный терминал на столе у каждого
менеджера, который развивал принцип первых табло.
13

14. В 1964 году запущена первая полностью
компьютеризированная система бронирования
SABRE (Semi-Automatic Business Research
Environment) от IBM.
14

15. В 1976 году American Airlines предоставила доступ к
системе сторонним агентствам и скоро выяснила – в
92% случаев они выбирает первый результат в списке.
Компания начала «подкручивать» поисковую выдачу с
тем, чтобы ее рейсы оказывались первыми.
15

16. В 1996 году запущены сайты Travelocity (SABRE) и
Expedia (Microsoft), которые позволили покупать
билеты в интернете. За почти сотню лет процесс
превратился из утомительно-сложного в доступную
повсеместно услугу.
16

17. Долгий поиск подходящего формата:
iPad
17

18. Планшетам уже больше сотни лет – еще в 1888 году
Teleautograph позволял передавать рукописные
заметки на расстоянии, будучи по сути
предвестником факса.
18

19. В 1968 году Alan Kay из вездесущей лаборатории
Xerox PARC описал концепцию Dynabook. Хотя идея
так и не была реализована, она здорово повлияла на
появление ноутбуков, планшетов и ридеров
электронных книг.
19

20. 1980е ознаменовались активным развитием распознавания
почерка и управления стилусом. Первая версия PDA от Palm
вышла в 1993 году, одновременно с Apple Newton, но оба
изначально провалились. В Palm пересмотрели задачу и
через несколько лет стали продавать свой хит Palm Pilot.
20

21. Толчок рынку более производительных планшетов
дала Microsoft, представив бренд “Tablet PC”.
Несмотря на ранний старт и многочисленные
наработки, явление не стало массовым.
21

22. Зато iPad быстро стал хитом. Правда, рано говорить
о том, подкосят ли планшеты рынок настольных
компьютеров и ноутбуков – конкурирующие
компании заметных успехов не добились.
22

23. Все компоненты системы важны:
Радарные станции
23

24. В 1930х британское авиационное министерство
услышало про «луч смерти» Nicholas Tesla. На деле
их не оказалось, зато ученые пришли к выводу, что
идею можно использовать для определения целей.
24

25. Создатели сети радаров быстро поняли, что основные
проблемы человеческие – огромная перегрузка
информацией. Реорганизация операторов позволила
заметно улучшить работу социо-технической системы.
25

26. Важным нововведением стал экран с движущейся по
часовой стрелке линией – Plan-Position Indicator. Его
подключение вместо осциллографов еще заметнее
снизило нагрузку – отслеживать цель стало проще.
26

27. Третьей составляющей этой социо-технической
системы были истребители. Установка мини-радаров
на борту «замкнула» систему – теперь все участники
могли всегда координировать свои действия.
27

28. Сразу после войны появилась более развитая версия
системы – SAGE (Semi-Automatic Ground Environment).
Она снимала значительную часть работы с оператора
– оставалось только выбрать цели из предложенных.
28

29. SAGE положил основу многим наработкам в
интерактивных интерфейсах, коммуникациям в
реальном времени, был одной из первых онлайн-
систем, послужил прототипом для системы
бронирования билетов SABRE.
29

30. Двигатель массовой компьютеризации:
Microsoft Excel
30

31. Во второй половине 1970х, когда персональные
компьютеры только появились, поводов для их
использования было в основном два – обучение и
бизнес. Первый из них активно поддерживался
школами и небольшим количеством домохозяйств.
31

32. Второй повод был обязан программе VisiCalc – первой
электронной таблице, да еще и не требовавшей
мощных компьютеров. Многие компании покупали
компьютеры исключительно ради нее.
32

33. Быстро начали появляться конкуренты и самым
успешным из них был Lotus 1-2-3 – запущенный в 1983
году, он тут же обошел своего предшественника в
продажах. Кроме того, добавил к таблицам графики и
диаграммы.
33

34. Два удачных решения – быстрый механизм пересчета
значений связанных ячеек и переход к GUI – помогли
переименованному в Excel приложению Multiplan
вырваться вперед и стать одним из главных
источников дохода Microsoft на долгие годы.
34

35. Любителей холиваров позабавит тот факт, что первая версия
Excel вышла для компьютеров Apple Macintosh. Но благодаря
сравнительно недорогой цене этой платформы, Excel стал
одной из главных причин для покупки компьютеров семьями
и компаниями малого бизнеса.
35

36. Самое масштабное перепроектирование:
Microsoft Office Ribbon
36

37. В первой версии MS Word для Windows, вышедшей в 1989
году, было около 40 пунктов меню и всего 2 панели
инструментов. К появлению Office 2003 количество пунктов
перевалило за 250. Часто пользователи просили добавить в
продукт функции, которые там уже давно присутствовали.
37

38. В 1997 году в офисных приложениях появился «Скрепыш»,
который подсказывал пользователю об интересных
функциях. Он реализовал парадигму социальных
интерфейсов, провозглашенную тогда как «замену WIMP»,
но в итоге стал одним из самых ненавистных персонажей.
38

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

40. При создании Office 2007 проведена масса исследований
того, как используются продукты – какие команды
применяются чаще, каковы типичные цепочки действий.
Собрали 10 000 часов видео работы пользователей и
записали информацию о 352 миллионах кликов.
40

41. Оказалось, что в среднем пользователи MS Office
проводят в нем больше времени наедине, чем со
своей второй половиной, а 5 наиболее используемых
команд (вставить, сохранить, копировать, отмена,
полужирное выделение) отвечают за 32% всех кликов.
41

42. Новый интерфейс значительно упростил обучение для новых
пользователей и стал эффективнее, хотя навлек на себя
массу негатива со стороны опытных. Спустя несколько лет
ситуация успокоилась – около 90% пользователей довольны
Ribbon и соглашаются, что эффективность работы с ним
заметно выше.
42

43. Похожие подходы использовались ранее в продуктах Allaire
HomeSuite, Lotus eSuite, Autodesk Maya, Borland Delphi. Но
Microsoft удалось сделать хорошее сбалансированное
решение, основанное на детальном изучении привычек и
особенностей работы пользователей.
43

44. После выхода Office 2010 появилось дополнение Ribbon
Hero. Оно в игровой форме рассказывает о возможностях
продуктов линейки и стимулирует активнее пользоваться
ими. Пользователь собирает достижения за открытие новых
функций и соревнуется в этом с друзьями.
44

45. Опыт хранения данных:
Пакетная обработка
45

46. Первыми механическими устройствами, умеющими
считывать данные, стали ткацкие станки Basile
Bouchon в 1725 году. Программа задавалась с
помощью записанных на перфолентах алгоритмов.
46

47. Другой популярно сферой применения стали музыкальные
инструменты середины 19 века – шарманки, пианолы,
оркестрионы и другие механизмы. Обычно они использовали
другой способ хранения произведения – металлические
ролики с выступающими частями.
47

48. В 1889 Tabulator от основателя IBM Herman Hollerith
впервые применил перфокарты в компьютерной
технике для программирования. С этого продукта,
кстати, и начался прообраз будущей компании IBM.
48

49. В середине 1940х годов перфокарты и перфоленты
стали основным способом ввода данных в первые
электронные цифровые компьютеры. Позже их
заменили подключаемые телетайп-терминалы для
ввода команд напрямую.
49

50. Появление интерактивности:
Игра Pong
50

51. Первой домашней игровой приставкой стала
Magnavox Odyssey 1972 года. Но настоящим хитом
стала игра Pong, которую Atari позаимствовала у
Magnavox – простейший теннис, доступный в виде
телеприставки и игровых автоматов.
51

52. Известный проектировщик Jeffrey Veen вспоминает,
насколько шокирующим было ощущение
интерактивности – впервые они получили
возможность не просто смотреть телевизор, но и
взаимодействовать с ним.
52

53. На волне успеха игры поднялись многие компании,
создававшие клоны Pong. Например, производитель
игральных карт Nintendo смог собрать хорошую
финансовую «подушку» для экспансии в новую
индустрию аркадных игр.
53

54. Дальше началась гонка технологий и конкурирующих
брендов, росли мощность и качество графики, но
основные принципы управления не менялись до
появления Nintendo Wii и Kinect для Xbox 360.
54

55. Чемодан без ручки:
Клавиатура QWERTY
55

56. Первой печатной машинкой считается Typowriter 1829
года, который использовал диск для выбора букв – не
самый удобный и быстрый способ. Еще хуже то, что
оператор не видел текста во время печати.
56

57. Сначала перешли к клавишам как у пианино – идею
позаимствовали у телеграфных аппаратов. В 1867
была запатентована одна из первых раскладок
клавиатуры от Scholes и Glidden:
13579NOPQRSTUVWXYZ
2468.ABCDEFGHIJKLM
57

58. Вскоре начался процесс оптимизации клавиатуры с
тем повысить эффективность печати. Изучали
наиболее часто встречающиеся пары букв, что
помогло сделать раскладку лучше.
23456789-
AEI.?YUO,
BCDFGHJKLM
ZXWVTSRQPN
58

59. Хотя использовались эти знания не всегда во благо
– авторы разнесли буквы из часто встречающихся
комбинаций далеко друг от друга, чтобы уменьшить
количество заеданий из-за быстрой печати.
23456789-,
QWE.TYIUOP
ZSDFGHJKLM
AX&CVBN?;R
59

60. Последняя версия была еще раз скорректирована с
тем чтобы поменять местами символы "." и "R" – так
продавцы печатной машинки могли впечатлить
клиента, написав фразу "TYPE WRITER" с
использованием только кнопок верхнего ряда.
23456789-,
QWERTYIUOP
ZSDFGHJKLM
AX&CVBN?;.
60

61. К 1910 произошла стандартизация на основе QWERTY. Но
были и альтернативные раскладки – например, «идеальная
клавиатура» Blickensderfer, которая использовала
последовательность букв “DHIATENSOR” в верхнем ряду – из
них можно составить 70% слов английского языка.
Z X K G B V Q J
P W F U L C M Y
D H I A T E N S O R
61

62. Компоновка QWERTY-клавиатуры была во многом
обусловлена техническими ограничениями механизмов – с
другой раскладкой ввод текста был бы быстрее. В то же
время ее повсеместное распространение и устоявшиеся
привычки людей делают замену нерациональной. Например,
раскладка Дворака:
1 2 3 4 5 6 7 8 9 0 ] =
" < > P Y F G C R L ?
A O E U I D H T N S _
: Q J K X B M W V Z
62

63. Начало комплексных потребительских продуктов:
Экосистема iPod + iTunes + Store
63

64. Настоящую революцию в компактных развлекательных
устройствах совершил в 1979 году плеер Sony Walkman.
Kane Kramer пошел еще дальше – он создал прообраз
цифровых плееров с чипом памяти на 3,5 минуты музыки и
возможностью загружать новые песни по телефону.
64

65. Спустя 20 лет компания Apple активно искала новые
направления. Им приглянулся стремительно растущий рынок
персональных развлекательных устройств, на котором
предложение аудио-плееров было невразумительным, во
многом благодаря «бесконечно уродливым» интерфейсам.
65

66. В 2001 представлен iPod, скоро занявший
доминирующее положение на рынке. Драйвером
продаж стал музыкальный магазин iTunes Store. Он
объединил составляющие в единую экосистему –
устройство, программное обеспечение и контент.
66

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

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

69. Это также позволяет находить новые направления – сеть
партнеров и разработчиков дает невоспроизводимую силами
самой компании скорость инноваций. Это касается и
«железок» – сформировалось множество производителей
аксессуаров и подключаемой техники.
69

70. В продолжение истории…
200 иллюстрированных слайдов с
хронологией основных событий –
скоро в публикации на
www.jvetrau.com.
Методы ввода и вывода
информации, основные
платформы и парадигмы, социо-
технические системы, тренды и
интересные кейсы, описание
процесса создания.

71. Было приятно видеть вас! Вопросы?
Юрий Ветров
www.jvetrau.com
twitter.com/jvetrau
www.uimodeling.ru
facebook.com/uimodeling
Все иллюстрации, использованные в данной презентации, принадлежат их уважаемым владельцам. В случае, если вы являетесь их
правообладателем и против размещения этих иллюстраций – напишите, пожалуйста, письмо по адресу jvetrau@gmail.com и я уберу их из слайдов.