/2012

254

18/09/

Quality AssuranceUser Interface Modeling

SO

FTE

NG

User Interface Modeling

eala

nd Part II - Lecture 4

klan

d | N

ew Z

eve

rsity

of A

uck

The

Uni

v

1

Interviewing Methodsf th FBI

/2012

of the FBICognitive interview: method to enhance

254

18/09/

gaccurate recall

1. Context: reinstate the context of the t

SO

FTE

NG

event2. Detail: don’t hold back any details3 Order: recall the event in a different

eala

nd

3. Order: recall the event in a different sequence

4. Perspective: look at the event from

klan

d | N

ew Z

e p fdifferent perspectives Major cause of

project failure:

vers

ity o

f Auc

k

Reference:Geiselman et al. Enhancement of Eyewitness

Memory with the Cognitive Interview American

wrong requirements

The

Uni

v Memory with the Cognitive Interview. American Journal of Psychology , 99(3), 1986.http://www.jstor.org/stable/10.2307/1422492 2

Today’s Outline/2012

y 2

5418/09/

• User Interface ModelingGUI B ild Wi d B ild f E li

SO

FTE

NG

• GUI Builders: WindowBuilder for Eclipse• User Interface Prototypes

(“Click Dummies”)

eala

nd

( Click Dummies )

klan

d | N

ew Z

eve

rsity

of A

uck

The

Uni

v

3

/2012

254

18/09/

SO

FTE

NG

User Interface Modeling

eala

nd

User Interface Modeling

klan

d | N

ew Z

eve

rsity

of A

uck

The

Uni

v

4

Introduction to Modeling/2012

g

• Software is complex;

254

18/09/

phow can we deal with it?

• Common solution: t t s d t ti

SO

FTE

NG

try to use a good representation

• Model: represents certain properties f n bj ct in diff r nt c nt xt

eala

nd

of an object in a different context– Abstraction: reduce complexity

by taking away unnecessary details

klan

d | N

ew Z

e by taking away unnecessary details– Clarity: make interesting properties more visible– Facilitate application of a methodology

vers

ity o

f Auc

k pp gy– Usability (e.g. easy to create, change, understand…)

• Usually many different models conceivable; different

The

Uni

v

5models for different purposes

User Interfaces (UIs)/2012

( )• User interfaces are the interfaces

b h d

254

18/09/ between humans and computers

– Input: “How does the user talk to the system?“

Out

In

SO

FTE

NG

to the system?– Output: “How does the system

talk to the user?“I i i d

In

eala

nd

– Interaction: input and output between human and computer over time (HCI=Human-

klan

d | N

ew Z

e (Computer Interaction)

• The UI is a crucial part of a system

vers

ity o

f Auc

k system– Functionality is useless if

users don‘t know how to use it

The

Uni

v

6– Users won‘t use it if usage is

cumbersome

Usability/2012

yISO 9241 definition:

254

18/09/ "The effectiveness, efficiency, and satisfaction with

which specified users achieve specified goals in particular environments.”

SO

FTE

NG

environments.

Some usability heuristics(b J b Ni l h // i / /h i i )

eala

nd

(by Jacob Nielsen http://www.useit.com/papers/heuristic)• Visibility of system status • Match between system and

klan

d | N

ew Z

e • Match between system and the real world

• User control and freedom

vers

ity o

f Auc

k

• Consistency and standards• Error prevention

H lp us s c niz di n s

The

Uni

v • Help users recognize, diagnose, and recover from errors 7

Screen Diagrams/2012

g• Idea: get UI right through early user feed-back• Use models to discuss UI with users

254

18/09/ • Screen diagrams are a simple informal model for UIs

1. Draw prototypical screens f t hi h l k

SO

FTE

NG

of a system which look like real screens, with real data (graphical details not

eala

nd

(graphical details not important)

2. Draw arrows from the controls of a

klan

d | N

ew Z

e

screen to the screens that follow when the control is used (e g button click)

vers

ity o

f Auc

k (e.g. button click)3. If multiple screens

are connected to same control, insert

The

Uni

v

8

control, insert black square signifying conditional branch

Screen Diagram Example/2012

g pCreate a click dummy for the following system:

254

18/09/ the following system

A lawyer needs a program to manage clients and lawsuits. Wh h th

SO

FTE

NG

When she opens the program, she wants to see a menu with functions for listing all clients,

eala

nd

glisting all lawsuits, and closing the program. The screen that lists all the clients has a

klan

d | N

ew Z

e lists all the clients has a function for showing the details of a client and a function

vers

ity o

f Auc

k

for going back to the main menu. Similarly, the screen that lists the lawsuits has a function for showing

The

Uni

v

9

lawsuits has a function for showing the details of a lawsuit and a function for going back.

/2012

254

18/09/

SO

FTE

NG

GUI Builders:

eala

nd

WindowBuilder for Eclipse

klan

d | N

ew Z

eve

rsity

of A

uck

The

Uni

v

10

Containment Hierarchy/2012

y• Most UI are created by nesting controls (aka widgets/ UI

elements) into other controls (containers)

254

18/09/ • Containment hierarchy: the way the controls of a UI are nested

• Not all controls visible; often invisible internal containers• E.g. for Java Swing:

SO

FTE

NG

g g

Top-Level Container:JFrame (or JDialog or JApplet)

eala

nd

( g pp )

Pane:JContentPane

klan

d | N

ew Z

e JContentPane

Component: Container:

vers

ity o

f Auc

k

JButton JScrollPane

The

Uni

v

11Component:

JList

Creating a JFrame/2012

g

1. Install WindowBuilder with Help -> “Install New Software”

254

18/09/ using the “update site” link for your Eclipse version from here:

http://www.eclipse.org/windowbuilder/download.php(you need all of “Swing Designer” and all “Core” components of

SO

FTE

NG

(y g g p“WindowBuilder Engine”)

2. Add a “JFrame” to your projectusing New > Other > WindowBuilder

eala

nd

using New -> Other -> WindowBuilder -> Swing Designer -> JFrame

3. Choose a package and class name

klan

d | N

ew Z

e

4. Switch between code and UI using the tabs at the bottom of the editor

5 Select “contentPane” in Components view

vers

ity o

f Auc

k 5. Select contentPane in Components view6. In Properties view: set the Layout to

“(absolute)” to allow free placement of controls

The

Uni

v

127. Add components from the Palette view8. Run the application using “Run” as Java app

WindowBuilderUser Interface

/2012

User InterfacePalette of GUI

254

18/09/ of GUI

controlsContain-

SO

FTE

NG

Visual GUI

ment hierarchy

eala

nd

GUI editor

klan

d | N

ew Z

eve

rsity

of A

uck

The

Uni

v

13Properties of selected control

Source code of the GUI

/2012

254

18/09/

SO

FTE

NG

User Interface Prototypes

eala

nd

(“Click Dummies”)

klan

d | N

ew Z

eve

rsity

of A

uck

The

Uni

v

14

Click Dummies/2012

• Bring screen diagrams to life:

254

18/09/

g gUI mockups / UI prototypes / “click dummies”– The user can nevigate between the screens

SO

FTE

NG

– The user can see how input & output is done by the system

eala

nd

– The user can imagine the real system• Very restricted but very easy to create

klan

d | N

ew Z

e

– No functionality implemented – All data is just hypothetical

vers

ity o

f Auc

k

• Very good for early user testing & feedback!!!

The

Uni

v

15

Event Handlers/2012

• When the user does something (click, mouse move, key press,

254

18/09/ etc) an event object is created

• Event handler: method that is called when a particular event occurs

SO

FTE

NG

method that is called when a particular event occurs• In Java:

– Event handler is method in “event listener” object

eala

nd

– For each type of event a particular method of a particular event listener

– Set event handlers with dedicated setter methods in control

klan

d | N

ew Z

e – Set event handlers with dedicated setter methods in control

jButton.addActionListener(new java.awt.event.ActionListener() {

vers

ity o

f Auc

k

public void actionPerformed(java.awt.event.ActionEvent e)

{System out println("You clicked me!!!");

The

Uni

v

16

System.out.println( You clicked me!!! );}

});

Opening and Closing Frames on Button Click

/2012

on Button ClickAdd event handler by right-clicking on component and using menu

254

18/09/

Code for opening new frame (“Frame2”):

SO

FTE

NG

Code for opening new frame ( Frame2 ):Frame2 f2 = new Frame2();f2.setVisible(true);

eala

nd

Code for closing the current frame:// get event source

klan

d | N

ew Z

e // g// and dispose its JFrame((JFrame)

((j t C t) tS ()) // t b tt

vers

ity o

f Auc

k ((java.awt.Component)e.getSource()) // get button.getParent() // get contentPane.getParent() // get JLayeredPanegetParent() // get JRootPane

The

Uni

v

17

.getParent() // get JRootPane

.getParent()) // get JFrame.dispose();

Today’s Summary/2012

y y

• Models try to represent interesting aspects of a

254

18/09/

y p g psystem in a clear and manageable way

• Screen diagrams illustrate the UI of a system

SO

FTE

NG

• GUI builders help to create UIs quickly• UI prototypes (“click dummies”) can be used for

eala

nd

p ypearly user feed-back

klan

d | N

ew Z

e

Friday: lab & lectureAssignment 3 coming out this week

vers

ity o

f Auc

k g g

The

Uni

v

18

Quiz/2012

Q

1. Describe a situation where using a model would be

254

18/09/

guseful, and explain why (give 3 reasons).

2 C t di f i l li i

SO

FTE

NG

2. Create a screen diagram for a simple online music store.

eala

nd

3. What is a click dummy? What is it used for?

klan

d | N

ew Z

eve

rsity

of A

uck

The

Uni

v

19