Design of Graphical User Interfaces

1
Design of Graphical User Interfaces
Daniel Ortiz-Arroyo http//www.cs.aue.auc.dk/do
do_at_cs.aue.auc.dk
2
My Background

• PhD, EE and CS Department Oregon State
  University, USA
• Academic Experience
• Assistant Professor, CS and Engr. Department
  Aalborg University, Esbjerg since October 2003
• Adjunt Professor, Nat. Inst. Astrophysics Optics
  and Electronics, and also in University of
  Puebla, Mexico
• Experience in Industry
• Software development, Robust Decisions Inc.USA
• Software development, NCR, RD Department, Mexico
  
• Consulting designing/developing hardware and
  software systems for several companies

3
Today

• Presentation
• Course Issues
• Introduction to GUI, HCI and usability
• Tools for the course

4
Books

• Textbook
• Dan Olsen, Developing User Interfaces, Morgan
  Kaufmann Publishers ISBN 1-558604-189.
• Other references
• Ben Shneiderman, Designing the User Interface,
  Addisson-Wesley, ISBN 0-201-69497-2, 1998.
  Focused on HCI.
• K. Walrath, M. Campione, JFC Swing Tutorial A
  guide to constructing GUIs. Addison Wesley, ISBN
  0201433214. Practical description of how to build
  GUI using Java.
• A. Shalloway, J. R. Trott, Design Patterns
  Explained A new perspective on object oriented
  design. Addison Wesley, ISBN 0201715945. Good
  introduction to design patterns.
• J. Johnson, GUI Bloopers Don'ts and Do's for
  Software Developers and Web Designers, Morgan
  Kaufmann Publishers ISBN 1-55860-582-7, 2000.
  Practical recommendations on how to design better
  GUIs.
• Jakob Nielsen, Designing Web Usability, New
  Riders, ISBN 1-56205-810-X, 2000. Focused on
  Usability of Web pages.

5
Internet References

• Applehttp//developer.apple.com/techpubs/macosx/E
  ssentials/AquaHIGuidelines/
• Sun Java http//java.sun.com/products/jlf/
• Creating a GUI with JFC/Swing http//java.sun.com/
  docs/books/tutorial/uiswing
• Jakob Nielsen http//www.useit.com
• Course http//www.cs.ubc.ca/cs544/PUB/schedule.s
  html
• Course http//www.cs.drexel.edu/salvucci/Courses
  /cs680-w04/

6
Tentative Class Schedule
7
Requirements/class issues

• I assume you
• Know already
• Java and OOAD
• Data structures and algorithms
• Understand UML diagrams
• Have little experience with
• JFC (Swing)
• XML and Parsing Techniques
• Design patterns
• Ill cover very briefly most topics you have
  little experience with, but youre responsible to
  look into the details

8
Exercises

• Assignments will be given
• Mostly programming in Java
• I recommend installing j2sdk 1.4.2 and Netbeans
  (www.netbeans.org)
• Read/discuss one or two related papers
• Presentation of your projects topics

9
What this course is about

• Oriented to GUI developers. We will cover at
  different levels of detail the following topics
• Software architecture and design for reusability
• Computer graphics in 2D
• Event driven programming
• Concurrency issues in GUI
• GUI toolkits (JFC)
• HCI and usability
• Advanced GUI

10
What this course is not about

• Web page design
• But some of the design issues we will discuss
  will apply also to HTML based forms
• Graphic design
• Focused on HCI and/or Usability
• But we will discuss some important issues giving
  practical suggestions to improve the user
  experience with GUI

11
Introduction

• GUI dictionary definition
• A user interface based on graphics (icons and
  pictures and menus) instead of text uses a mouse
  as well as a keyboard as input devices.

• It is more than that graphs, multimedia,
  virtual reality etc.

12
Why GUIs are important?

• May be the cause for the success or failure of
  software products
• In many applications represent 50 or more of
  total code
• Increasingly complex (LF, internationalization,
  multithreading, 3D, animation,support for special
  interface devices, multimedia, distributed shared
  spaces etc)

13
Why studying GUI design?

• GUIs are everywhere
• Many are poorly designed
• GUI design/development provides opportunities to
• Be creative
• Apply knowledge from other CS courses (OOAD, Data
  structures Algorithms, Software systems, OS
  etc.)
• Are useful for your AUE projects and future
  career as CS graduate

14
GUI Features

• Main features of GUIs these days
• 2D, 3D (CAD, games, simulation)
• Multiple windows
• Icons representing different options
• Menus
• Graphics mixed with text
• Keyboard and pointing devices (mouse, pen)
• Hypertext
• Multimedia Video, Sound, Animation
• ....

15
Applications of GUIs

• Desktop software applications
• Operating Systems
• WebPages
• Handheld Devices
• Control devices
• Others
• Automobile (GPS)
• Household devices

16
GUI related diciplines
Human Computer Interaction
Social issues
Usability
17
Course focus
Course will focus mostly on CS-related topics
Psychology Sociology
Human Computer Interaction
Social issues
Visual Ergonomic Design
Computer Science
Usability
18
Human Computer Interaction-HCI

• A discipline concerned with
• design
• evaluation
• implementation of interactive computing systems
  for human use
• The study of major phenomena surrounding the
  interaction of humans with computers
• HCI is a research area in CS

19
Why HCI is important?

• Can determine who becomes the next president of
  USA

20
Usability

• The effectiveness, efficiency, and satisfaction
  with which users can achieve tasks in a
  particular environment of a product.
• High usability means a system is easy to learn
  and remember efficient, visually pleasing and
  fun to use and quick to recover from errors.

21
GUI Actors ideally
Graphic Designer
Designer/ Developer
Usability Engineer
User
GUI especification, design, development
22
GUI Actors
Graphic Designer
Usability Engineer
Designer/ Developer
User
GUI especification, design, development
23
Who is the user?

• Is not the designer/developer
• Except in software tools for software
  designer/developers
• Is not the graphic designer
• Except in software tools for graphic designers
• Skill and education level?
• Which tasks user wants to accomplish through the
  GUI?

24
GUI role models
Match
User Application Model
Designer, Developer Application Model
Task
25
User interactive cycle
Evaluates and understands the display
Updates the display
User
Data Model for the application information
Human/computer interface
Formulates goals and actions actions, Generates
inputs
Interprets input events to make changes
26
Issues in user interactive cycle

• Gulf of evaluation
• User interpretation of what he sees
• Hard to read text, low contrast colors
• Gulf of Execution
• User determines what to do to accomplish his goal
• Inadeaquate feedback

27
Main software tools for the course

• Java, latest SDK (j2sdk1.4.2 www.javasoft.com)
  which includes
• JFC
• JAXP (for XML processing)
• Netbeans (or similar) IDE
• Ant

28
Java Foundation Classes (JFC)

• Consisting of
• Swing (UI components)
• Java2D (includes printing)
• Drag and Drop
• Look and Feel

29
AWT and Swing

• AWT Abstract Windowing Toolkit (heavyweight)
• import java.awt.
• Swing new with Java2 JFC (lightweight)
• import javax.swing.
• Extends AWT
• Improved components
• Standard dialog boxes, tooltips,
• Look-and-feel, skins
• Event listeners
• APIhttp//java.sun.com/j2se/1.4.2/docs/api/index.
  html

30
GUI Component API

• Every GUI component is a class
• with
• Properties
• Methods
• Events

JButton
31
Using a GUI Component

• Create it
• Instantiate object JButton b new
  JButton(Press me)
• Configure it
• Properties b.text Press me
  avoided in java
• Methods b.setText(Press me)
• Add it
• panel.add(b)
• Listen to it
• Events Listeners

Press me
32
Anatomy of an Application GUI
Internal structure
JFrame
JPanel
JFrame
containers
JButton
JPanel
GUI
JLabel
JButton
JLabel
33
Using a GUI Component 2

• Create it
• Configure it
• Add children (if container)
• Add to parent (if not JFrame)
• Add Listeners of events

importance
34
Swing class hierarchy
Component
paint()
Container
JComponent
paintComponent()
JPanel
JAbstractButton
JLabel
JTextComponent
JButton
JToggleButton
JTextField
JCheckBox
JRadioBox
35
Containers
Swing Containers
36
JFrame as a container
37
Building a GUI
Listener

• Create
• Frame
• Panel
• Components
• Listeners
• Add
• listeners into components
• components into panel
• panel into frame

JButton
JLabel
JPanel
JFrame
38
Application Code
press me

• import javax.swing.
• class Hello
• public static void main(String args)
• JFrame f new JFrame(Hello World)
• JPanel p new JPanel()
• JButton b new JButton(press me)
• p.add(b) // add button to panel
• f.getContentPane().add(p) // add panel to
  frame
• f.show()

39
Layout Managers

• Automatically control placement of components in
  a panel
• Used as templates to ease GUI component layout
• Keep appearance when resizing

40
Layout Manager Heuristics
FlowLayout
GridLayout
null
Left to right, Top to bottom
none, programmer sets x,y,w,h
GridBagLayout
BorderLayout
CardLayout
n
c
One at a time
JButton
e
w
s
41
BoxLayout
BoxLayout.X_AXIS
BoxLayout.Y_AXIS
42
JFC new layout
Spring layout
43
Combinations
JButton
JButton
JTextArea
44
Combinations
JButton
JButton
JFrame
North JPanel BorderLayout Center
JPanel FlowLayout
JTextArea
45
XML

• XML extensible markup language
• XML was designed to describe data and carry
  data. Focus is on what data is.
• Allows developers to create their own labeled
  structures for storing information.
• Parsing is well-defined and widely-implemented.
  Java j2sdk1.4 provides support for parsing (JAXP)
• SAX (simple API for XML)- event based
• DOM (document object model) constructs whole
  tree in memory

46
XML Tags
47
Parsing XML - JAXP DOM
48
JAXP DOM
Add these lines to import the JAXP APIs you'll be
using import javax.xml.parsers.DocumentBuilder i
mport javax.xml.parsers.DocumentBuilderFactory
import javax.xml.parsers.FactoryConfigurationErro
r import javax.xml.parsers.ParserConfigurationEx
ception Add these lines for the exceptions
that can be thrown when the XML document is
parsed import org.xml.sax.SAXException import
org.xml.sax.SAXParseException Add these lines
to read the XML file and identify errors import
java.io.File import java.io.IOException
Finally, import the W3C definition for DOM
exceptions import org.w3c.dom.Document import
org.w3c.dom.DOMException
49
Procesing XML

• ltframe size"640,480" titleFrame"gt
• ltpanel namepanel1"gt  
• lt/panelgt
•  ltpanel namepanel2"gt  
• lt/panelgt
• lt/framegt

Parsing tree
frame
Parsing node
pane1
panel
50
Example

• DocumentBuilderFactory
• factoryDocumentBuilderFactory.newInstance()
• try
• DocumentBuilder
• builderfactory.newDocumentBuilder()
• document builder.parse( new File(FileName)
  )
• // process the tree
• ...
• catch (Exception e) // exception code
• Full example code at
• http//java.sun.com/xml/jaxp/dist/1.1/docs/tutoria
  l/dom/1_read.html

51
Summary

• GUIs are important
• GUI design must consider HCI and usability issues
• We briefly covered JFC, XML (more on XML next
  time)
• For a more detailed coverage of these topics go
  to
• http//java.sun.com/xml/jaxp/dist/1.1/docs/tutoria
  l/dom/1_read.html
• http//java.sun.com/docs/books/tutorial/uiswing
• http//ant.apache.org/manual/