On  The  Evolu,on  of  User   Interfaces Mar$n  Dostál Honeywell  Interna-onal Aerospace  Advanced  Technology  Europe  Human  Centered  Systems November  2012 Friday, December 7, 12 File NumberHoneywell About  Me •Mar$n  Dostál •Ph.D.  in  computer  science •Human  Factors  Scien$st  at  Honeywell – UI/HMI  valida$ons  and  studies,  sta$s$cs  and  data   analysis,  eyetracking,  UI/HMI  design  and  meta-­‐design,   mentoring   •10+  years  in  academia  (UPOL);  human-­‐ computer  interac$on,  soUware  development,   machine  learning  and  ar$ficial  intelligence 2 Friday, December 7, 12 Honeywell File Number Outline •history  and  evolu$on  as  a  background •demonstra$on  of  the  most  influen$al  systems •iden$fy  and  explore  principles  behind  modern  graphical  user   interfaces •what  cons$tute  graphical  user  interfaces  these  days •quick  look  at  some  great  ideas  not  present  in  GUIs  these  days •we  are  faced  with  opera$onal  blindness 3 Friday, December 7, 12 Friday, December 7, 12 What is the essence of graphical user interfaces? Friday, December 7, 12 Honeywell File Number Before  the  rise  of  personal  computers •direct  control •metaphors  versus  technical  implementa$on •no  interac$vity •character  I/O,  punch  cards... •system-­‐centered  design 5 Friday, December 7, 12 Memex Friday, December 7, 12 File NumberHoneywell Memex •Memex  (Memory+Index) •Vannevar  Bush •„As  We  May  Think”,  1945 •a  concept  „only” •a  desk  with  peripherals •data  oriented •hypertext,  searching,  data   associa$on •image  processing 7 source: http://maidig.wordpress.com Friday, December 7, 12 Sketchpad Friday, December 7, 12 File NumberHoneywell Sketchpad •1963,  Ivan  Sutherland •first  interac$ve  system •first  object  oriented  system •first  graphics  oriented  system •CAD  (Computer  Aided  Design)   archetype 9 Friday, December 7, 12 Honeywell File Number Sketchpad •canvas  as  a  paper  metaphor •elements  as  prototype  objects •system  controlled  by – bugons  (ac$ons) – light  pen  (objects) •intelligent  interpreta$on  of  user  input •vector  based •object  manipula$on 10 Friday, December 7, 12 Video: www.youtube.com Friday, December 7, 12 Video: www.youtube.com Friday, December 7, 12 On-­‐Line  System  (NLS) Friday, December 7, 12 File NumberHoneywell NLS •Douglas  Engelbart,1968 •human  augmenta$on •text  oriented •canvas  in  a  full  screen  window •one  window  at  $me •vector  oriented •hypertext •groupware •three  bugon  mouse •cursor •chord  keyboard 13 Friday, December 7, 12 Honeywell File Number NLS 14 Friday, December 7, 12 XEROX Friday, December 7, 12 File NumberHoneywell Xerox  Alto •Xerox  Parc,  1978 •inspired  by  NLS,  but  many  new   ideas •first  bitmap  oriented  system   (606x808) •Ethernet 16 Friday, December 7, 12 Honeywell File Number Xerox  Alto •office  system   •task  oriented •could  be  considered  as  first  system  with  GUI,  but  without  consistent  user   interface •mul$  window  system •both  graphical  and  textual  interfaces •WYSIWYG  output •modal  control 17 Friday, December 7, 12 Honeywell File Number Xerox  Alto  -­‐  soHware 18 Friday, December 7, 12 Honeywell File Number Xerox  Star •1981,  17.000  $,  dedicated  for  office  usage   •highly  innova$ve  in  terms  of  user  interfaces •document-­‐centric  system •desktop  metaphor •object  oriented  at  user  level •consistent  graphical  user  interface •controlled  by  keyboard  and  two  bugon  mouse App-centric vs. document centric approach 19 Friday, December 7, 12 Video: www.youtube.com Friday, December 7, 12 Video: www.youtube.com Friday, December 7, 12 Video: www.youtube.com Friday, December 7, 12 File NumberHoneywell Xerox  Star •physical  keyboard  -­‐  object   manipula$on •virtual  keyboard •drag-­‐and-­‐drop  archetype •minimalist  approach •split  windows •progressive  disclosure •modal  cursor •object  oriented,  object-­‐ac$on   paradigm •property  sheets  (overlapping) •pull-­‐down  menu  archetype 22 Friday, December 7, 12 File NumberHoneywell Xerox  Star •first  applica$on  of  user-­‐centered   design – „design  then  code” – prototyping – task  models  and  analysis – itera$ve  approach •user  studies •user  interface  design  with  strong   visual  considera$ons 23 Friday, December 7, 12 Apple Friday, December 7, 12 File NumberHoneywell Apple  II •Apple  II  (1977) •personal  computer •no  GUI  in  modern  sense •games,  simple  office  soUware 25 Friday, December 7, 12 Honeywell File Number Apple  Lisa •developed  from  1979 •on  market  1983,  10.000  $ •Lisa  Office  System •system  opened  for  third  party  applica$ons,  but  ... •strongly  influenced  by  Xerox •commercial  disaster 26 Friday, December 7, 12 Honeywell File Number Apple  Lisa  –  innova,ons •freeform  windows •pull-­‐down  menu,  disabling  menu  items •drag-­‐and-­‐drop •trash •one  bugon  mouse •double-­‐click  :( 27 Friday, December 7, 12 File NumberHoneywell Apple  Lisa •document  centric •applica$ons  at  sideline  (no  „Quit”,   but  “Set  Aside”  instead,  no  “New”  –   Sta$onery  Pad) •direct  manipula$on •modality  minimiza$on •OS  X  dashboard 28 Friday, December 7, 12 Honeywell File Number Macintosh •Macintosh,  1984,  2.500  $ •personal  computer •commercial  success •UI  based  on  Lisa •technical  implementa$on   completely  different  from  Lisa •no  mul$tasking  un$l  1987 •Macintosh  Human  Interface   Guidelines  -­‐  first  HIG  (1992) 29 Friday, December 7, 12 Honeywell File Number Macintosh source: Jef Raskin, "Design Considerations for an Anthropophilic Computer" (28-29 May 1979)-- in "The Macintosh Project: Selected Papers from Jef Raskin (First Macintosh Designer), Circa 1979," document 4, version 1. Location: M1007, Apple Computer Inc. Papers, Series 3, Box 10, Folder 1 [This document was written before the Macintosh project was operating under that name, and was still called "Annie". This note was written as an observer at that time not directly involved in the project. (Comments in brackets have been added on Oct. 11 79)] This is an outline for a computer designed for the Person In The Street (or, to abbreviate: the PITS); one that will be truly pleasant to use, that will require the user to do nothing that will threaten his or her perverse delight in being able to say: "I don't know the first thing about computers," and one which will be profitable to sell, service and provide software for. You might think that any number of computers have been designed with these criteria in mind, but not so. Any system which requires a user to ever see the interior, for any reason, does not meet these specifications. There must not be additional ROMS, RAMS, boards or accessories except those that can be understood by the PITS as a separate appliance. For example, an auxiliary printer can be sold, but a parallel interface cannot. As a rule of thumb, if an item does not stand on a table by itself, and if it does not have its own case, or if it does not look like a complete consumer item in [and] of itself, then it is taboo. If the computer must be opened for any reason other than repair (for which our prospective user must be assumed incompetent) even at the dealer's, then it does not meet our requirements. Seeing the guts is taboo. Things in sockets is taboo (unless to make servicing cheaper without imposing too large an initial cost). Billions of keys on the keyboard is taboo. Computerese is taboo. Large manuals, or many of them (large manuals are a sure sign of bad design) is taboo. Self- instructional programs are NOT taboo. There must not be a plethora of configurations. It is better to offer a variety of case colors than to have variable amounts of memory. It is better to manufacture versions in Early American, Contemporary, and Louis XIV than to have any external wires beyond a power cord. And you get ten points if you can eliminate the power cord. Any differences between models that do not have to be documented in a user's manual are OK. Any other differences are not. It is most important that a given piece of software will run on any and every computer built to this specification. There must be no differences between machines whether in terms of I/O, speed, memory size, configuration, or possible accessories. 30 Friday, December 7, 12 IBM  PC Friday, December 7, 12 File NumberHoneywell IBM  PC  plaMorm •cheap  and  open  plasorm •late  rise •boglenecks •textual  interfaces,  MS-­‐DOS 32 Friday, December 7, 12 Honeywell File Number VisiOn •VisiCorp,  1983 •first  GUI  environemt  for  PC •MS  DOS  app •mul$tasking •CGA  graphics  (640x200) •resources  demanding •office  apps  (VisiCalc  –  first  spreadsheet) 33 Friday, December 7, 12 Honeywell File Number VisiOn •consistent  GUI •widnows •more  text  at  the  expense  of  graphics 34 Friday, December 7, 12 Honeywell File Number MicrosoH  Windows •developed  since  1981 •announced  1983 •introduced  1985,  99  $ •consistent  GUI •mul$tasking •file  oriented  vs  object  oriented •applica$on  centric  approach 35 Friday, December 7, 12 Honeywell File Number Windows  1.01 •strong  text  orienta$on •split  windows •no  desktop  (un$l  Win95) •no  standard  dialogs... 36 Friday, December 7, 12 Honeywell File Number Windows •Windows  2.0 – overlapping  windows •Windows  3.1  (3.0.,  3.1.  NT) – system  dialogs •Windows  95 – files  as  icons,  s$ll  not  objects – long  file  names – desktop •Windows  Vista – Ribbon  Interface  (Office  2007) •Windows  8 – Metro,  Tiles 37 Friday, December 7, 12 File NumberHoneywell Opera,ng  system  for  Macintosh/Mac •Mac  OS  (1984-­‐2001) – System  7  (1991)  colorized  UI •Mac  OS  X  (since  2001) – completely  new  OS – NextStep – similar,  but  not  the  same  interface 38 Friday, December 7, 12 Lessons  learned? Friday, December 7, 12 mar,ndostal@me.com hVp://dostal.wserver.cz Friday, December 7, 12