Web Design Historical Perspective The Graphical User Interface, the Web and the Psychology of Design

1
Web DesignHistorical Perspective - The
Graphical User Interface, the Web and the
Psychology of Design
2
Introduction

• History of the Graphical User Interface
  evolution of the desktop
• The World Wide Web
• Human-Computer Interaction
• The Psychology of Design
• Conclusions
• Are websites converging with the desktop?
• Can the study of the psychology of design help
  with website construction?

3
History of the graphical user interface (GUI) - 1

• As We May Think - Vanavar Bush, 1945
• Widely regarded as one of the most influential
  articles for the GUI, hypertext and the world
  wide web
• Describes the memex, a complicated
  electro-mechanical desk using microfilms that
  would automatically generate trails of
  information
• In many ways foresaw hypertext and the world wide
  web
• Doug Engelbarts Augmentation of Human
  Intellect project at Standford Research
  Institute
• Published Augmenting Human Intellect A
  Conceptual Framework, 1962
• The On Line System - an implementation of
  Engelbarts ideas including a mouse-controlled
  cursor and multiple windows
• By 1970 included the Journal - a primitive
  implementation of hypertext

4
History of the graphical user interface (GUI) - 2

• Xerox PARC (Palo Alto Research Centre)
• Many NLS project workers joined Xerox PARC,
  taking with them their knowledge of the window
  and mouse paradigm
• Further work resulted in the Xerox Alto computer
  system, the first to use a graphical user
  interface, 1973
• Technology commercialised
• Xerox 8010 Star Information System (1981)
• Considered a commercial failure
• System of 3 units and a printer up to 100,000
• Ironically, undermined by SGML - forerunner of
  HTML!

5
(No Transcript)
6
History of the graphical user interface (GUI) - 3

• Commercial success
• Apple
• Lisa and Macinstosh (1984)
• System 7 (1991)
• OS X (2001)
• IBM PC
• Desqview (1985)
• GEM (1985)
• Microsoft Windows 1.0 (1985)
• Microsoft Windows 3.0 (1990)
• Microsoft Windows 95, NT, 2000, XP, Vista
• Unix
• X Windows (1984)
• KDE
• Gnome
• etc

7
(No Transcript)
8
(No Transcript)
9
The World Wide Web

• Early internet technologies
• eg email (1971), telnet (1972), usenet news
  (1979), many others
• all used a text based interface, even if accessed
  with an operating system with a GUI
• Tim Berners-Lee
• 1980 proposed a hypertext system for sharing and
  updating information, built a prototype called
  ENQUIRE whilst working at CERN
• 1989 proposed a system that would incorporate
  hypertext over TCP/IP and wrote the first browser
  and server
• 1991 first website published at CERN
• World Wide Web Consortium (W3C) founded by
  Berners-Lee 1994
• open standards - no patents or royalties,
  everyone free to develop
• development of internet detailed at Hobbess
  Internet Timeline http//www.zakon.org/robert/int
  ernet/timeline/
• lots of fascinating information, eg the Queen
  sent an email in 1976!

10
Human-Computer Interaction (HCI)

• Contributes to many areas
• physical characteristics of computer use
• design of input and output devices
• QWERTY keyboard - typewriter designed to be slow
  to use!
• workstation layout - height of chair desk
  display screen
• design of software functionality
• consequences of mistakes - undo actions in case
  of error, critical systems such as power stations
• design of the operating system and application
  system interface
• research on new technologies - virtual reality,
  cybernetics, brain control, ?
• Draws on various disciplines
• Ergonomics - study of body and environment
• Computer Science and Engineering
• Cognitive Science - study of the mind and brain
• Psychology of Design - emerging as a field in its
  own right

11
Psychology of Design - 1

• Aims to identify psychological principles which
  can guide us to design devices that are well
  suited to use by human beings
• George Miller (1956)
• The Magical Number Seven, Plus or Minus Two
  Some Limits on our Capacity for Processing
  Information available from http//psychclassics.y
  orku.ca/Miller/
• noticed that there seemed to be a limit on the
  number of chunks of information that can be
  processed
• describes a few coincidences where the number
  shows up - in particular resolving physical
  ranges
• suggested that there may be an underlying
  mechanism that results in limitations on
  resolution, short term memory, judgement of
  quantities, etc
• Millers work, and that of other researchers,
  might guide us when choosing how to present
  choices on web pages
• divide choices into groups - chunks
• navigation menus - limit lists to seven items or
  less

12
Psychology of Design - 2

• Donald Normans User Centred approach
• The Psychology of Everyday Things (1988)
• also published as The Design of Everyday Things
  - the word psychology was putting people off
  buying it!
• Ideas expanded in The Invisible Computer (1999)
  - pervasive computing
• application to web site design - growth of
  browser interface - email, systems
  administration, mobile phones, traditional
  applications like word processors
• Google - gmail, Google apps, storing and
  examining your personal data
• Latest book The Design of Future Things (2007) -
  looks at the future of smart devices that try
  to anticipate what we want, rather than provide
  what we ask
• eg web sites like ebay - correct your spelling

13
Psychology of Design - 3

• Summary of Normans design principles - 1
• Use conceptual models where possible
• Desktop, waste paper bin
• Make controls visible
• Menus rather than keystrokes
• Use controls to constrain the range of behaviours
• Greying out commands that dont work
• Objects should offer clues to what they do
• Icons
• Standardising within and between designs
• File, Edit, View, etc

14
Psychology of Design - 3

• Summary of Normans design principles - 2
• Provide feedback to the user
• Egg timer icon
• Use natural mappings
• Multiple desktops
• Hierarchies should be shallow
• Limit the number of submenus
• If errors are possible it should be possible to
  recover
• Undo
• Use knowledge in the world to relieve the
  burden of learning
• Drag and drop

15
Psychology of Design - 4

• A glimpse of the next couple of years?
• Google Apps
• Clear direction of progress over the last few
  years
• Massive scale
• http//www.google.co.uk/about.html
• Click through to the video on youtube

16
Conclusions

• The graphical user interface has taken more than
  40 years to reach its current state
• Limitations of hardware, market forces, poor
  design and poor engineering have slowed
  development
• Latest technology still leaves a lot to be
  desired, however
• good design principles are emerging.
• World Wide Web has developed over the last 15
  years from specialist system for scientists into
  ubiquitous facility for everyone
• A good website must provide an effective
  interface to the information it contains
• An understanding of HCI and the Psychology of
  Design might be used to improve the design of
  websites so that they are easy to use, reliable
  and secure, and assist users as they interact
  with the site

17
Further information

• As we May Think http//www.theatlantic.com/doc/1
  94507/bush
• Text of Vanavar Bushs original article
• Augmentation of Human Intellect
  http//www.bootstrap.org/augdocs/friedewald030402/
  augmentinghumanintellect/ahi62index.html
• Text of Englebarts paper
• Description of the Alto http//www.guidebookgall
  ery.org/articles/thexeroxaltocomputer
• from Byte magazine, 1981
• GUIdebookgallery http//www.guidebookgallery.org/
  articles/
• Comprehensive list of GUIs with detailed
  information about each
• Cognitive Science Society http//www.cognitivesci
  encesociety.org/
• past issues of the Journal of Cognitive Science
  are available to non members up to 2004 vast
  resource
• What is cognitive science? http//ls.berkeley.edu
  /ugis/cogsci/major/about.php
• introduction from Berkelys department of
  cognitive science
• Ergonomics Society http//www.ergonomics.org.uk/
• lots of interesting information on the field
• Discussion on the QWERTY keyboard layout
  http//eh.net/encyclopedia/article/puffert.path.de
  pendence
• from an economics perspective
• Donald Normans website http//www.jnd.org/index.
  html
• Essays and other information about design in
  general