Слайд 2What is UI?
UI design is a subset of HCI
Part of a computer
![What is UI? UI design is a subset of HCI Part of](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/373389/slide-1.jpg)
& its software that people can see, hear, understand, etc.
Two components: input & output
IO devices?
Слайд 3Is Good Design Important?
UI is the most important part of any computer
![Is Good Design Important? UI is the most important part of any](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/373389/slide-2.jpg)
system!
Over 50% of code devoted to UI
Users’ productivity improved 25 to 40%.
A company saved $20 000 !
Слайд 4What comprises good design?
PEOPLE:
How we see, understand, and think
INFORMATION:
Enhance human acceptance
Ease eye
![What comprises good design? PEOPLE: How we see, understand, and think INFORMATION:](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/373389/slide-3.jpg)
& hand movements
HARDWARE & SOFTWARE:
Capabilities & limitations of HCI
Слайд 5The Goals of UI Design
To make working with a computer
EASY
PRODUCTIVE
ENJOYABLE
![The Goals of UI Design To make working with a computer EASY PRODUCTIVE ENJOYABLE](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/373389/slide-4.jpg)
Слайд 6Examples
Interface screen of Text Properties
Text Editor
Class registration form (lab #1)
![Examples Interface screen of Text Properties Text Editor Class registration form (lab #1)](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/373389/slide-5.jpg)
Слайд 1114 steps
Know Your User
Understand the Business Function
Understand the Principles of Good ID
Develop
![14 steps Know Your User Understand the Business Function Understand the Principles](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/373389/slide-10.jpg)
System Menus
Select the Proper Kinds of Windows
Select the Proper Interaction Devices
Choose the Proper Screen-Based Controls
Слайд 1214 steps (cont.)
8) Write Clear Text
9) Provide Effective Feedback
10) Provide Effective Accessibility
11)
![14 steps (cont.) 8) Write Clear Text 9) Provide Effective Feedback 10)](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/373389/slide-11.jpg)
Create Meaningful Graphics
12) Choose the Proper Colors
13) Organize Windows
14) Test
Слайд 13History of HCI
Movements & gestures
Spoken language
Written language
Typewriter
Computers: QA, Menu selection, Form fill-in
![History of HCI Movements & gestures Spoken language Written language Typewriter Computers:](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/373389/slide-12.jpg)
(Speech & handwriting recognition)
Introduction of GUI
Слайд 14What is GUI?
Pronounced “gooey”
A graphical user interface (GUI) is a type of
![What is GUI? Pronounced “gooey” A graphical user interface (GUI) is a](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/373389/slide-13.jpg)
user interface) is a type of user interface which allows people to interact with electronic devices such as computers; hand-held devices such as MP3 Players, Portable Media Players or Gaming devices; household appliances and office equipment with images rather than text commands. (Wikipedia)
Слайд 15History of HCI (cont)
1963, Ivan Sutherland, MIT. Sketchpad program. Lines, circles, and
![History of HCI (cont) 1963, Ivan Sutherland, MIT. Sketchpad program. Lines, circles,](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/373389/slide-14.jpg)
points could be drawn on a screen using a light pen.
Слайд 16History of HCI (cont)
1970s, Xerox’s Palo Alto Research Center, Altus & STAR
![History of HCI (cont) 1970s, Xerox’s Palo Alto Research Center, Altus &](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/373389/slide-15.jpg)
systems. Mouse (pointing & selecting).
Слайд 17History of HCI (cont)
1974, Xerox. Today’s mouse.
![History of HCI (cont) 1974, Xerox. Today’s mouse.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/373389/slide-16.jpg)
Слайд 18History of HCI (cont)
1984, Apple. Macintosh
1985, Microsoft. Windows 1.0
1987, Apple. Macintosh II.
![History of HCI (cont) 1984, Apple. Macintosh 1985, Microsoft. Windows 1.0 1987,](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/373389/slide-17.jpg)
The first color Macintosh.
IBM. System Application Architecture and Presentation Manager. Graphics OS replacement for DOS.
1988, NeXT. NeXTStep, 3-d Screen simulation.
UNIX-based GUIs.
Слайд 19The Blossoming of the World Wide Web
1960s, Licklider, MIT. Proposed a global
![The Blossoming of the World Wide Web 1960s, Licklider, MIT. Proposed a](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/373389/slide-18.jpg)
network of computers & moved to DARPA.
1969. ARPANET. 4 major universities.
1974, Bolt, Beranek, & Newman. Telnet. Commercial version of ARPANET.
1970s. TCP/IP. Common language of all Internet computers.
1982. “Internet”
Слайд 20The Blossoming of the World Wide Web (cont.)
1991, Gopher, University of Minnesota.
![The Blossoming of the World Wide Web (cont.) 1991, Gopher, University of](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/373389/slide-19.jpg)
First really friendly interface.
1989, European Laboratory for Particle Physics. Hypertext protocol. HTML (Hypertext Markup language).
1991, Berners-Lee. World Wide Web.
Слайд 21Web vs. Internet
Global information space in which people can read & write
![Web vs. Internet Global information space in which people can read &](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/373389/slide-20.jpg)
using computers connected to the Internet.
The Web is a service that operates over the Internet, just as e-mail operates over the Internet (Wikipedia.org, 2006).
Слайд 22The Blossoming of the World Wide Web (cont.)
1993, NCSA at Univ. of
![The Blossoming of the World Wide Web (cont.) 1993, NCSA at Univ.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/373389/slide-21.jpg)
Illinois. Mosaic. First popular graphics-based hypertext browser.
1994. Netscape Navigator
1995, Microsoft. Internet Explorer
1994. NSF stopped support. W3C formed to promote & develop standards for the Web.
2003, Apple. Safari 1.0
2004. Mozilla Firefox
Слайд 23A Brief History of Screen Design
1970s, IBM. 3270 cathode ray tube text-based
![A Brief History of Screen Design 1970s, IBM. 3270 cathode ray tube text-based terminal](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/373389/slide-22.jpg)
terminal
Слайд 25A Brief History of Screen Design (cont.)
1970s screens
Cryptic & unintelligible captions
Always had
![A Brief History of Screen Design (cont.) 1970s screens Cryptic & unintelligible](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/373389/slide-24.jpg)
to remember what to type
Ambiguous messages
Monochromatic, green text on black background
Слайд 27A Brief History of Screen Design (cont.)
1980s
Grouping & alignment
Clear captions
Command list (+
![A Brief History of Screen Design (cont.) 1980s Grouping & alignment Clear](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/373389/slide-26.jpg)
function keys)
Instructions had to be inscribed