1 / 30

ACS 367 Interface Design

ACS 367 Interface Design. Introduction & Text Overview Galitz, Wilbert O. The Essential Guide to User Interface Design. Table of Contents. Part I: Introduction to Screen Design for the Graphical User Interface (GUI) Part II: The GUI Screen Design Process.

charlotte-flynn
Download Presentation

ACS 367 Interface Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ACS 367 Interface Design Introduction & Text Overview Galitz, Wilbert O. The Essential Guide to User Interface Design

  2. Table of Contents • Part I: Introduction to Screen Design for the Graphical User Interface (GUI) • Part II: The GUI Screen Design Process

  3. Introduction to Screen Design for the Graphical User Interface • Importance of Good Screen Design • Characteristics of a Graphical User Interface (GUI)

  4. The GUI Screen Design Process • Step 1: Know your user • Step 2: Understand the business function • Step 3: Understand the principles of good screen design • Step 4: Select the proper kinds of windows • Step 5: Develop system menus • Step 6: Select the proper device-based controls

  5. The GUI Screen Design Process • Step 7: Choose proper screen-based controls • Step 8: Organize & layout windows • Step 9: Choose proper colors • Step 10: Create meaningful icons • Step 11: Provide effective messages, feedback, guidance & language translation

  6. The GUI Screen Design Process • Step 12: Test, Test and Retest

  7. Importance of Good Screen Design • Screen design code more than 50% of application’s code • Packages include style guides

  8. Why Bad Design? • Don’t care • Lack common sense • Don’t have time • Don’t know what makes good design

  9. Benefits of Good Design Seconds Years per 4.8 Million Screens 1 .7 5 3.6 10 7.1 20 14.2

  10. Benefits (cont.) • More white space ( Dunsmore): • 20% increase in productivity • Redesign (Keister & Gallaway): • 25 % increase in productivity • 25% decrease in errors

  11. Student Objectives • Understand the many considerations that apply to design process • Understand rationale & rules for effective screen design methodology • Be able to identify components of graphical screens • windows • menus • controls

  12. Student Objectives (2) • Be able to design & organize screens • fastest & most accurate comprehension & execution • Be able to choose appropriate colors • Be able to design/select appropriate icons • Be able to utilize/apply GUI design process

  13. Brief History • Early research • SRI in 1960s • The very system that I am using to access this information has its intellectual roots in the "Augmented Human Intellect Center" that Doug Engelbart set up at SRI in the 60's • 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.

  14. Knee Positioning Device (1967)

  15. Joystick, Grafacon, and Mouse

  16. 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. Basic Interactions Ivan Sutherland (left) receives the 1996 Smithsonian ComputerWorld Award

  17. 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. SketchPad

  18. AMBIT/G • 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. • (Implemented at MIT's Lincoln Labs, 1968, ARPA funded.)

  19. ICONS • David Canfield Smith coined the term "icons" in his 1975 Stanford PhD thesis on Pygmalion • Smith later popularized icons as one of the chief designers of the Xerox Star. • 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. • In particular, the idea of "WYSIWYG"

  20. Direct Manipulation • The concept of direct manipulation interfaces for everyone was envisioned by Alan Kay of Xerox PARC in a 1977 article about the "Dynabook" • The first commercial systems to make extensive use of Direct Manipulation were the Xerox Star (1981), the Apple Lisa (1982) and Macintosh (1984). • Ben Shneiderman at the University of Maryland coined the term "Direct Manipulation" in 1982 and identified the components and gave psychological foundations.

  21. Windows • Multiple tiled windows were demonstrated in Engelbart's NLS in 1968. • Early research at Stanford on systems like COPILOT (1974) and at MIT with the EMACS text editor (1974) also demonstrated tiled windows. • 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

  22. Windows (Continue) • 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). • The main commercial systems popularizing windows were the Xerox Star (1981), the Apple Lisa (1982), and most importantly the Apple Macintosh (1984).

  23. Drawing Programs Suteherlands’ SketchPad (1963) Text Editing 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. Spreadsheets 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. Application Types

  24. HyperText The idea for hypertext is credited to Vannevar Bush's famous MEMEX idea from 1945. Ted Nelson coined the term "hypertext" in 1965. Engelbart's NLS system at the Stanford Research Laboratories in 1965 made extensive use of linking… CAD Video Games The first graphical video game was probably SpaceWar by Slug Russel of MIT in 1962 for the PDP-1 including the first computer joysticks.

  25. Development of Guidelines • Designers of Lisa & Macintosh • importance of good user interface design • publish ideas to others • development of set of human interface guidelines

  26. Development of Guidelines • Most important guidelines were the design principles -- universal • Design principles not tied to platform • based on human abilities and psychology • not dependent on conventions of a particular platform

More Related