1

1

Design ofGraphical User Interfaces

Graduate SchoolCourse IT 2

Prof. Astrid Beck

2

2

Contact information

Mail: Astrid.Beck@fht-esslingen.de

WWW: http://www.it.fht-esslingen.de/~asbeck

Office: F1.353 Level 3a. Office Hours: Tues 13pm-15pm or by appointment

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

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.

5

5

Topics

Introduction and motivationProgramming GUIs with Java SwingBasic techniques: typo, design, colourUsabilityUser centered design

Lab 1 Java MVCLab 2 Internet project

6

6

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

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

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/

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

11

11

Window systems

� WIMP - Windows, Icons, Menus and Pointing device

� Direct manipulation

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

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

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

15

15

16

16

17

17

18

18

19

19

20

20

21

21

22

22

23

23