ACS 367  Interface Design Introduction
Importance of  Good Screen Design <ul><li>Screen design code more than 50% of application’s code </li></ul><ul><li>Package...
Why Bad Design? <ul><li>Don’t care </li></ul><ul><li>Lack common sense </li></ul><ul><li>Don’t have time </li></ul><ul><li...
Benefits of Good Design <ul><li>Seconds Years per 4.8 Million Screens </li></ul><ul><li>  1   .7  </li></ul><ul><li>  5   ...
Benefits (cont.) <ul><li>More white space  ( Dunsmore):   </li></ul><ul><ul><li>20% increase in  productivity </li></ul></...
Student Objectives  <ul><li>Understand the many considerations that apply to design process </li></ul><ul><li>Understand r...
Student Objectives (2) <ul><li>Be able to identify components of web pages </li></ul><ul><li>Be able to design & organize ...
Brief History <ul><li>Early research  </li></ul><ul><ul><li>SRI in 1960s </li></ul></ul><ul><ul><ul><li>The very system th...
 
Knee Positioning Device (1967)
Joystick, Grafacon, and Mouse
Basic Interactions <ul><li>The now ubiquitous direct manipulation interface, where visible objects on the screen are direc...
SketchPad <ul><li>SketchPad supported the manipulation of objects using a light-pen, including grabbing objects, moving th...
AMBIT/G <ul><li>It employed, among other interface techniques, iconic representations, gesture recognition, dynamic menus ...
ICONS <ul><li>David Canfield Smith coined the term &quot;icons&quot; in his 1975 Stanford PhD thesis on Pygmalion </li></u...
Direct Manipulation <ul><li>The concept of direct manipulation interfaces for everyone was envisioned by  Alan Kay  of Xer...
Windows <ul><li>Multiple tiled windows were demonstrated in Engelbart's NLS in 1968.  </li></ul><ul><li>Early research at ...
Windows (Continue) <ul><li>The Cedar Window Manager from Xerox PARC was the first major tiled window manager (1981), follo...
 
Application Types <ul><li>Drawing Programs </li></ul><ul><ul><li>Suteherlands’ SketchPad (1963) </li></ul></ul><ul><li>Tex...
<ul><li>HyperText </li></ul><ul><ul><li>The idea for hypertext is credited to Vannevar Bush's famous MEMEX idea from 1945....
Development of Guidelines <ul><li>Designers of Lisa & Macintosh  </li></ul><ul><ul><li>importance of good user interface d...
Development of Guidelines <ul><li>Most important guidelines were the design principles -- universal </li></ul><ul><li>Desi...
 
 
Upcoming SlideShare
Loading in …5
×

Lecture (Interface Design Introduction)

623 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
623
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Lecture (Interface Design Introduction)

  1. 1. ACS 367 Interface Design Introduction
  2. 2. Importance of Good Screen Design <ul><li>Screen design code more than 50% of application’s code </li></ul><ul><li>Packages include style guides </li></ul>
  3. 3. Why Bad Design? <ul><li>Don’t care </li></ul><ul><li>Lack common sense </li></ul><ul><li>Don’t have time </li></ul><ul><li>Don’t know what makes good design </li></ul>
  4. 4. Benefits of Good Design <ul><li>Seconds Years per 4.8 Million Screens </li></ul><ul><li> 1 .7 </li></ul><ul><li> 5 3.6 </li></ul><ul><li>10 7.1 </li></ul><ul><li>20 14.2 </li></ul>
  5. 5. Benefits (cont.) <ul><li>More white space ( Dunsmore): </li></ul><ul><ul><li>20% increase in productivity </li></ul></ul><ul><li>Redesign (Keister & Gallaway): </li></ul><ul><ul><li>25 % increase in productivity </li></ul></ul><ul><ul><li>25% decrease in errors </li></ul></ul>
  6. 6. Student Objectives <ul><li>Understand the many considerations that apply to design process </li></ul><ul><li>Understand rationale & rules for effective screen design methodology </li></ul><ul><li>Be able to identify components of graphical screens </li></ul><ul><ul><li>windows </li></ul></ul><ul><ul><li>menus </li></ul></ul><ul><ul><li>controls </li></ul></ul>
  7. 7. Student Objectives (2) <ul><li>Be able to identify components of web pages </li></ul><ul><li>Be able to design & organize screens </li></ul><ul><ul><li>fastest & most accurate comprehension & execution </li></ul></ul><ul><ul><li>incorporate features that meet a ccessibility guidelines/regulations </li></ul></ul><ul><li>Be able to choose appropriate colors </li></ul><ul><li>Be able to design/select appropriate icons </li></ul><ul><li>Be able to utilize/apply GUI and web design process </li></ul>
  8. 8. Brief History <ul><li>Early research </li></ul><ul><ul><li>SRI in 1960s </li></ul></ul><ul><ul><ul><li>The very system that I am using to access this information has its intellectual roots in the &quot;Augmented Human Intellect Center&quot; that Doug Engelbart set up at SRI in the 60's </li></ul></ul></ul><ul><ul><ul><li>Engelbart invented the multi-window display, the mouse, and groupware. His demonstration of these capabilities at the Fall Joint Computer Conference in San Francisco in 1968 started the process of development that led, via Xerox PARC and Apple, to the system you are using today. </li></ul></ul></ul>
  9. 10. Knee Positioning Device (1967)
  10. 11. Joystick, Grafacon, and Mouse
  11. 12. Basic Interactions <ul><li>The now ubiquitous direct manipulation interface, where visible objects on the screen are directly manipulated with a pointing device, was first demonstrated by Ivan Sutherland in Sketchpad, which was his 1963 MIT PhD thesis. </li></ul>Ivan Sutherland (left) receives the 1996 Smithsonian ComputerWorld Award
  12. 13. SketchPad <ul><li>SketchPad supported the manipulation of objects using a light-pen, including grabbing objects, moving them, changing size, and using constraints. It contained the seeds of myriad important interface ideas. </li></ul>
  13. 14. AMBIT/G <ul><li>It employed, among other interface techniques, iconic representations, gesture recognition, dynamic menus with items selected using a pointing device, selection of icons by pointing, and moded and mode-free styles of interaction. </li></ul><ul><ul><li>(Implemented at MIT's Lincoln Labs, 1968, ARPA funded.) </li></ul></ul>
  14. 15. ICONS <ul><li>David Canfield Smith coined the term &quot;icons&quot; in his 1975 Stanford PhD thesis on Pygmalion </li></ul><ul><li>Smith later popularized icons as one of the chief designers of the Xerox Star. </li></ul><ul><li>Many of the interaction techniques popular in direct manipulation interfaces, such as how objects and text are selected, opened, and manipulated, were researched at Xerox PARC in the 1970's. </li></ul><ul><ul><li>In particular, the idea of &quot;WYSIWYG&quot; </li></ul></ul>
  15. 16. Direct Manipulation <ul><li>The concept of direct manipulation interfaces for everyone was envisioned by Alan Kay of Xerox PARC in a 1977 article about the &quot;Dynabook&quot; </li></ul><ul><li>The first commercial systems to make extensive use of Direct Manipulation were the Xerox Star (1981), the Apple Lisa (1982) and Macintosh (1984). </li></ul><ul><li>Ben Shneiderman at the University of Maryland coined the term &quot;Direct Manipulation&quot; in 1982 and identified the components and gave psychological foundations. </li></ul>
  16. 17. Windows <ul><li>Multiple tiled windows were demonstrated in Engelbart's NLS in 1968. </li></ul><ul><li>Early research at Stanford on systems like COPILOT (1974) and at MIT with the EMACS text editor (1974) also demonstrated tiled windows. </li></ul><ul><li>Alan Kay proposed the idea of overlapping windows in his 1969 University of Utah PhD thesis and they first appeared in 1974 in his Smalltalk system at Xerox PARC </li></ul>
  17. 18. Windows (Continue) <ul><li>The Cedar Window Manager from Xerox PARC was the first major tiled window manager (1981), followed soon by the Andrew window manager by Carnegie Mellon University's Information Technology Center (1983). </li></ul><ul><li>The main commercial systems popularizing windows were the Xerox Star (1981), the Apple Lisa (1982), and most importantly the Apple Macintosh (1984). </li></ul>
  18. 20. Application Types <ul><li>Drawing Programs </li></ul><ul><ul><li>Suteherlands’ SketchPad (1963) </li></ul></ul><ul><li>Text Editing </li></ul><ul><ul><li>In 1962 at the Stanford Research Lab, Engelbart proposed, and later implemented, a word processor with automatic word wrap, search and replace, user-definable macros, scrolling text, and commands to move, copy, and delete characters, words, or blocks of text. </li></ul></ul><ul><li>Spreadsheets </li></ul><ul><ul><li>The initial spreadsheet was VisiCalc which was developed by Frankston and Bricklin (1977-8) for the Apple II while they were students at MIT and the Harvard Business School. </li></ul></ul>
  19. 21. <ul><li>HyperText </li></ul><ul><ul><li>The idea for hypertext is credited to Vannevar Bush's famous MEMEX idea from 1945. </li></ul></ul><ul><ul><li>Ted Nelson coined the term &quot;hypertext&quot; in 1965. </li></ul></ul><ul><ul><li>Engelbart's NLS system at the Stanford Research Laboratories in 1965 made extensive use of linking… </li></ul></ul><ul><li>CAD </li></ul><ul><li>Video Games </li></ul><ul><ul><li>The first graphical video game was probably SpaceWar by Slug Russel of MIT in 1962 for the PDP-1 including the first computer joysticks. </li></ul></ul>
  20. 22. Development of Guidelines <ul><li>Designers of Lisa & Macintosh </li></ul><ul><ul><li>importance of good user interface design </li></ul></ul><ul><ul><li>publish ideas to others </li></ul></ul><ul><ul><ul><li>development of set of human interface guidelines </li></ul></ul></ul>
  21. 23. Development of Guidelines <ul><li>Most important guidelines were the design principles -- universal </li></ul><ul><li>Design principles not tied to platform </li></ul><ul><ul><li>based on human abilities and psychology </li></ul></ul><ul><ul><li>not dependent on conventions of a particular platform </li></ul></ul>

×