Design of Graphical User Interfaces Graduate School Course IT 2 Prof. Astrid Beck 1 1 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 2 2 The user interface Users often judge a system by its interface rather than its functionality A poorly designed interface can cause a user to make fatal errors Poor user interface design is the reason why so many software systems are not used effectively or never used at all 3 3 Usability Extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use. ISO 9241-10 4 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. 4 Topics Introduction and motivation Programming GUIs with Java Swing Basic techniques: typo, design, colour Usability User centered design Lab 1 Java MVC Lab 2 Internet project 5 5 6 6 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 7 7 History 1 1945: Memex, Vannevar Bush „As you may think“ Hypertext „Consider a future device ... in which an individual stores all his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speed and 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 8 8 History 2 1965: Douglas Engelbart‘s most famous invention is the computer mouse, developed in the 1960s, but not used commercially until the 1980s 1974: Vint Cerf (known to some as the "father of the Internet"), along with Bob Kahn, wrote a new protocol, TCP (Transmission Control Protocol) 1981: Xerox Star, PARC bitmapped screens, windows, a mouse-driven interface, and icons http://xeroxstar.tripod.com/ 9 9 History 3 1979: Alan Kay was one of the key members at Xerox to develop prototypes of networked workstations using the progr. language Smalltalk. These inventions were later commercialized by Apple. 1983: Apple Lisa Macintosh 1984: MIT starts to develop X X Windows is the standard graphical interface on Unix operating systems, and is available for most other modern operating systems. X provides the basic framework for a GUI environment: drawing and moving windows on the screen and interacting with a mouse and keyboard 10 10 Window systems WIMP - Windows, Icons, Menus and Pointing device Direct manipulation 11 11 History 3 1981: Microsoft MS-DOS 1981: Sun Microsystems Java platform 1985: Atari, Amiga, Commodore: affordable windows systems 1985: Microsoft releases Windows 1.0 and is initially sold for $100.00. 1989: FhG Institute Erlangen, Germany the Fraunhofer Institut was granted a patent for MPEG Audio Layer III (MP3) 1990: Microsofts Windows 3.x later: Windows95/NT 12 12 History 4 1990: Tim Berners-Lee: Hypertext Transfer Protocol (HTTP) 1993: Marc Andreesen: Mosaic browser 130 websites exists online 1994: Netscape 1995: Internet Explorer 1.0 1995: Sun launches Java programming language 1996: Google 2001 Windows XP 13 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 13 Requirements for design of user interfaces Requirements for design of user interfaces increase with more experienced users Users are accustomed to graphical user interfaces and multimedia Software must be usable, fun and useful for learning This results in high demands on the programming process Example Carl Zeiss... 14 14 15 15 16 16 17 17 18 18 19 19 20 20 21 21 22 22 23 23.