Java Programming: From Problem Analysis to Program Design, 4e Chapter 12 Advanced GUIs and Graphics.
Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing...
Transcript of Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing...
![Page 1: Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing Basic techniques: typo, design, colour ... Lab 1 Java MVC Lab 2 Internet project.](https://reader033.fdocuments.in/reader033/viewer/2022050223/5f6905c6d15bf073d1722eb6/html5/thumbnails/1.jpg)
1
1
Design ofGraphical User Interfaces
Graduate SchoolCourse IT 2
Prof. Astrid Beck
![Page 2: Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing Basic techniques: typo, design, colour ... Lab 1 Java MVC Lab 2 Internet project.](https://reader033.fdocuments.in/reader033/viewer/2022050223/5f6905c6d15bf073d1722eb6/html5/thumbnails/2.jpg)
2
2
Contact information
Mail: [email protected]
WWW: http://www.it.fht-esslingen.de/~asbeck
Office: F1.353 Level 3a. Office Hours: Tues 13pm-15pm or by appointment
![Page 3: Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing Basic techniques: typo, design, colour ... Lab 1 Java MVC Lab 2 Internet project.](https://reader033.fdocuments.in/reader033/viewer/2022050223/5f6905c6d15bf073d1722eb6/html5/thumbnails/3.jpg)
3
3
The user interface
� Users often judge a systemby its interface rather than its functionality
� A poorly designed interface can cause a user to make fatal errors
� Poor user interface design is the reasonwhy so many software systems are not used effectively or never used at all
![Page 4: Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing Basic techniques: typo, design, colour ... Lab 1 Java MVC Lab 2 Internet project.](https://reader033.fdocuments.in/reader033/viewer/2022050223/5f6905c6d15bf073d1722eb6/html5/thumbnails/4.jpg)
4
4
Usability
� Extent to which a productcan be used by specified usersto achieve specified goalswith effectiveness, efficiency and satisfactionin a specified context of use.
� ISO 9241-10
effectiveness:
Accuracy and completeness with which users achieve specified goals.
efficiency:
Resources expended in relation to the accuracy and completeness with which
users achieve goals.
satisfaction:
Freedom from discomfort, and positive attitudes towards the use of the product.
context of use:
Users, tasks, equipment (hardware, software and materials), and the physical and
social environments in which a product is used.
![Page 5: Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing Basic techniques: typo, design, colour ... Lab 1 Java MVC Lab 2 Internet project.](https://reader033.fdocuments.in/reader033/viewer/2022050223/5f6905c6d15bf073d1722eb6/html5/thumbnails/5.jpg)
5
5
Topics
Introduction and motivationProgramming GUIs with Java SwingBasic techniques: typo, design, colourUsabilityUser centered design
Lab 1 Java MVCLab 2 Internet project
![Page 6: Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing Basic techniques: typo, design, colour ... Lab 1 Java MVC Lab 2 Internet project.](https://reader033.fdocuments.in/reader033/viewer/2022050223/5f6905c6d15bf073d1722eb6/html5/thumbnails/6.jpg)
6
6
![Page 7: Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing Basic techniques: typo, design, colour ... Lab 1 Java MVC Lab 2 Internet project.](https://reader033.fdocuments.in/reader033/viewer/2022050223/5f6905c6d15bf073d1722eb6/html5/thumbnails/7.jpg)
7
7
Introduction
� History of graphical user interfaces
A software user interface is simply a way to allow you to use your operating system or application program. Software user interfaces have changed over time.
� Example web relaunch Carl Zeiss
![Page 8: Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing Basic techniques: typo, design, colour ... Lab 1 Java MVC Lab 2 Internet project.](https://reader033.fdocuments.in/reader033/viewer/2022050223/5f6905c6d15bf073d1722eb6/html5/thumbnails/8.jpg)
8
8
History 1
� 1945: Memex, Vannevar Bush
� „As you may think“
� Hypertext
� „Consider a future device ... in which anindividual stores all his books, records, andcommunications, and which is mechanized sothat it may be consulted with exceeding speedand flexibility. It is an enlarged intimate supplement to his memory.“
� 1963: Sketchpad, Dissertation Ivan E. Sutherland
� The first Interactive computer graphics
� MIT
� http://www.sun.com/960710/feature3/sketchpad.html
![Page 9: Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing Basic techniques: typo, design, colour ... Lab 1 Java MVC Lab 2 Internet project.](https://reader033.fdocuments.in/reader033/viewer/2022050223/5f6905c6d15bf073d1722eb6/html5/thumbnails/9.jpg)
9
9
History 2
� 1965: Douglas Engelbart‘s most famous invention is the computer mouse, developed inthe 1960s, but not used commercially until the1980s
� 1974: Vint Cerf (known to some as the "fatherof the Internet"), along with Bob Kahn, wrote anew protocol, TCP (Transmission Control Protocol)
� 1981: Xerox Star, PARC� bitmapped screens, windows, a mouse-driven
interface, and icons
� http://xeroxstar.tripod.com/
![Page 10: Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing Basic techniques: typo, design, colour ... Lab 1 Java MVC Lab 2 Internet project.](https://reader033.fdocuments.in/reader033/viewer/2022050223/5f6905c6d15bf073d1722eb6/html5/thumbnails/10.jpg)
10
10
History 3
� 1979: Alan Kay was one of the key members at Xerox to develop prototypes ofnetworked workstations using the progr. language Smalltalk. These inventions were
later commercialized by Apple.
� 1983: Apple� Lisa
� Macintosh
� 1984: MIT starts to develop XX Windows is the standard graphical interface on Unix operating systems, and is available for most other modern operatingsystems. X provides the basic framework for a GUI environment: drawing and moving windows on the screen and interacting witha mouse and keyboard
![Page 11: Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing Basic techniques: typo, design, colour ... Lab 1 Java MVC Lab 2 Internet project.](https://reader033.fdocuments.in/reader033/viewer/2022050223/5f6905c6d15bf073d1722eb6/html5/thumbnails/11.jpg)
11
11
Window systems
� WIMP - Windows, Icons, Menus and Pointing device
� Direct manipulation
![Page 12: Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing Basic techniques: typo, design, colour ... Lab 1 Java MVC Lab 2 Internet project.](https://reader033.fdocuments.in/reader033/viewer/2022050223/5f6905c6d15bf073d1722eb6/html5/thumbnails/12.jpg)
12
12
History 3
� 1981: MicrosoftMS-DOS
� 1981: Sun MicrosystemsJava platform
� 1985: Atari, Amiga, Commodore:affordable windows systems
� 1985: Microsoft releases Windows 1.0and is initially sold for $100.00.
� 1989: FhG Institute Erlangen, Germanythe Fraunhofer Institut was granted a patent forMPEG Audio Layer III (MP3)
� 1990: Microsofts Windows 3.xlater: Windows95/NT
![Page 13: Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing Basic techniques: typo, design, colour ... Lab 1 Java MVC Lab 2 Internet project.](https://reader033.fdocuments.in/reader033/viewer/2022050223/5f6905c6d15bf073d1722eb6/html5/thumbnails/13.jpg)
13
13
History 4
� 1990: Tim Berners-Lee:Hypertext Transfer Protocol (HTTP)
� 1993: Marc Andreesen: Mosaic browser130 websites exists online
� 1994: Netscape
� 1995: Internet Explorer 1.0
� 1995: Sun launches Java programming language
� 1996: Google
� 2001 Windows XP
References
Internet Pioneers http://www.ibiblio.org/pioneers/
Windows Products and Technologies History
http://www.microsoft.com/windows/WinHistoryIntro.mspx
Apple history http://www.apple-history.com/
History of the Internet
http://www.colombialink.com/01_INDEX/index_tecnologia/04_computing_histo
ry_internet.html
![Page 14: Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing Basic techniques: typo, design, colour ... Lab 1 Java MVC Lab 2 Internet project.](https://reader033.fdocuments.in/reader033/viewer/2022050223/5f6905c6d15bf073d1722eb6/html5/thumbnails/14.jpg)
14
14
Requirements for design of user interfaces
� Requirements for design of user interfacesincrease with more experienced users
� Users are accustomed to graphical user interfacesand multimedia
� Software must be usable, fun and useful for learning
� This results in high demands on the programming process
Example Carl Zeiss...
![Page 15: Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing Basic techniques: typo, design, colour ... Lab 1 Java MVC Lab 2 Internet project.](https://reader033.fdocuments.in/reader033/viewer/2022050223/5f6905c6d15bf073d1722eb6/html5/thumbnails/15.jpg)
15
15
![Page 16: Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing Basic techniques: typo, design, colour ... Lab 1 Java MVC Lab 2 Internet project.](https://reader033.fdocuments.in/reader033/viewer/2022050223/5f6905c6d15bf073d1722eb6/html5/thumbnails/16.jpg)
16
16
![Page 17: Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing Basic techniques: typo, design, colour ... Lab 1 Java MVC Lab 2 Internet project.](https://reader033.fdocuments.in/reader033/viewer/2022050223/5f6905c6d15bf073d1722eb6/html5/thumbnails/17.jpg)
17
17
![Page 18: Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing Basic techniques: typo, design, colour ... Lab 1 Java MVC Lab 2 Internet project.](https://reader033.fdocuments.in/reader033/viewer/2022050223/5f6905c6d15bf073d1722eb6/html5/thumbnails/18.jpg)
18
18
![Page 19: Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing Basic techniques: typo, design, colour ... Lab 1 Java MVC Lab 2 Internet project.](https://reader033.fdocuments.in/reader033/viewer/2022050223/5f6905c6d15bf073d1722eb6/html5/thumbnails/19.jpg)
19
19
![Page 20: Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing Basic techniques: typo, design, colour ... Lab 1 Java MVC Lab 2 Internet project.](https://reader033.fdocuments.in/reader033/viewer/2022050223/5f6905c6d15bf073d1722eb6/html5/thumbnails/20.jpg)
20
20
![Page 21: Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing Basic techniques: typo, design, colour ... Lab 1 Java MVC Lab 2 Internet project.](https://reader033.fdocuments.in/reader033/viewer/2022050223/5f6905c6d15bf073d1722eb6/html5/thumbnails/21.jpg)
21
21
![Page 22: Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing Basic techniques: typo, design, colour ... Lab 1 Java MVC Lab 2 Internet project.](https://reader033.fdocuments.in/reader033/viewer/2022050223/5f6905c6d15bf073d1722eb6/html5/thumbnails/22.jpg)
22
22
![Page 23: Design of Graphical User Interfacesasbeck/gs/lecture1-intro.pdf · Programming GUIs with Java Swing Basic techniques: typo, design, colour ... Lab 1 Java MVC Lab 2 Internet project.](https://reader033.fdocuments.in/reader033/viewer/2022050223/5f6905c6d15bf073d1722eb6/html5/thumbnails/23.jpg)
23
23