Всемирная история интерфейсов

© 2011 Юрий Ветров

www.uimodeling.ru

1001 продукт, повлиявший на сегодняшние технологии

2

О чем и зачем этот рассказ?

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

В этой презентации – 10 таких историй из большой коллекции событий.

3

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

Xerox Star

4

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

5

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

6

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

7

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

8

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

9

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

10

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

Системы бронирования билетов

11

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

12

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

13

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

14

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

15

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

16

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

17

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

iPad

18

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

19

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

20

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

21

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

22

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

23

Все компоненты системы важны:

Радарные станции

24

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

25

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

26

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

27

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

28

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

29

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

30

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

Microsoft Excel

31

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

32

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

33

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

34

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

35

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

36

Самое масштабное перепроектирование:

Microsoft Office Ribbon

37

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

38

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

39

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

40

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

41

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

42

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

43

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

44

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

45

Опыт хранения данных:

Пакетная обработка

46

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

47

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

48

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

49

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

50

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

Игра Pong

51

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

52

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

53

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

54

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

55

Чемодан без ручки:

Клавиатура QWERTY

56

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

57

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

1 3 5 7 9 N O P Q R S T U V W X Y Z2 4 6 8 . A B C D E F G H I J K L M

58

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

2 3 4 5 6 7 8 9 - A E I . ? Y U O ,

B C D F G H J K L MZ X W V T S R Q P N

59

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

2 3 4 5 6 7 8 9 - ,Q W E . T Y I U O PZ S D F G H J K L MA X & C V B N ? ; R

60

Последняя версия была еще раз скорректирована с тем чтобы поменять местами символы "." и "R" – так продавцы печатной машинки могли впечатлить клиента, написав фразу "TYPE WRITER" с использованием только кнопок верхнего ряда.

2 3 4 5 6 7 8 9 - ,Q W E R T Y I U O PZ S D F G H J K L MA X & C V B N ? ; .

61

К 1910 произошла стандартизация на основе QWERTY. Но были и альтернативные раскладки – например, «идеальная клавиатура» Blickensderfer, которая использовала последовательность букв “DHIATENSOR” в верхнем ряду – из них можно составить 70% слов английского языка.

Z X K G B V Q JP W F U L C M Y

D H I A T E N S O R

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

63

Начало комплексных потребительских продуктов:

Экосистема iPod + iTunes + Store

64

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

65

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

66

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

67

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

68

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

69

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

В продолжение истории…200 иллюстрированных слайдов с хронологией основных событий – скоро в публикации на www.jvetrau.com.

Методы ввода и вывода информации, основные платформы и парадигмы, социо-технические системы, тренды и интересные кейсы, описание процесса создания.

Было приятно видеть вас! Вопросы?

Юрий Ветровwww.jvetrau.comtwitter.com/jvetrau

www.uimodeling.rufacebook.com/uimodeling

Все иллюстрации, использованные в данной презентации, принадлежат их уважаемым владельцам. В случае, если вы являетесь их правообладателем и против размещения этих иллюстраций – напишите, пожалуйста, письмо по адресу jvetrau@gmail.com и я

уберу их из слайдов.