Презентация Юрия Ветрова "Всемирная история интерфейсов. 1001 продукт, повлиявший на сегодняшние технологии" с конференции IT2Days:Usability / User Experience Russia Junior 2011

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

28. Сразу после войны появилась более развитая версия системы – SAGE(Semi-AutomaticGroundEnvironment). Она снимала значительную часть работы с оператора – оставалось только выбрать цели из предложенных. 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. Office2003 собирал информацию о частоте использования функций, в результате чего автоматически изменял набор пиктограмм в панелях инструментов и выпадающих меню. Должен был получиться адаптивный интерфейс, но на практике его поведение было непредсказуемым. 39

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

57. Сначала перешли к клавишам как у пианино – идею позаимствовали у телеграфных аппаратов. В 1867 была запатентована одна из первых раскладок клавиатуры от Scholes и Glidden: 1 3 5 7 9 N O P Q R S T U V W X Y Z 2 4 6 8 . A B C D E F G H I J K L M 57

58. Вскоре начался процесс оптимизации клавиатуры с тем повысить эффективность печати. Изучали наиболее часто встречающиеся пары букв, что помогло сделать раскладку лучше. 2 3 4 5 6 7 8 9 - A E I . ? Y U O , B C D F G H J K L M Z X W V T S R Q P N 58

59. Хотя использовались эти знания не всегда во благо – авторы разнесли буквы из часто встречающихся комбинаций далеко друг от друга, чтобы уменьшить количество заеданийиз-за быстрой печати. 2 3 4 5 6 7 8 9 - , Q W E . T Y I U O P Z S D F G H J K L M A X & C V B N ? ; R 59

60. Последняя версия была еще раз скорректирована с тем чтобы поменять местами символы "." и "R" – так продавцы печатной машинки могли впечатлить клиента, написав фразу "TYPE WRITER" с использованием только кнопок верхнего ряда. 2 3 4 5 6 7 8 9 - , Q W E R T Y I U O P Z S D F G H J K L M A X & C V B N ? ; . 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и я уберу их из слайдов.