southern cross university 1 cadui'96 - 5-7 june 1996 - fundp namur investigating layout...

Southern Cross University 1 CADUI'96 - 5-7 June 1996 - FUNDP Namur

Investigating Layout ComplexityInvestigating Layout Complexity

Tim ComberDr. John Maltby

Centre of ComputingSouthern Cross University

LISMORE ( Australia)


The importance of screen designThe importance of screen design

• Acceptance and performance influenced by presentation

• Successful screen design is essential to most interactive systems

• Most new computer systems use some form of GUI.

• Few empirical studies relating to modern, bit-mapped screens


Guidelines say:Guidelines say:• Keep the interface simple and well-organised

– Does this apply to a GUI?

– Are simple interfaces the most usable?

– And, how can the designer know that a simple interface has been achieved?


Shannon’s FormulaShannon’s Formula

• K = a positive constant

• n = number of event classes

• pi = probability of occurrence of the ith event class

C K p pn

n

m

n1

2log


The communication process:The communication process:

• Consists of n classes of event• An event is the transmission of a specific “unit” of

information.• If letters of the alphabet are the communication

units then:– n = 26


EntropyEntropy

• entropy is a measure of the disorder of a system– identical to that of entropy in statistical mechanics

H p p q q ( log log )


Entropy in the case of two possibilities Entropy in the case of two possibilities with probabilities, p and (1 - p) with probabilities, p and (1 - p)

0

0.1

0.2

0.3

0.4

0.5

0.6

0.7

0.8

0.9

1

1.1

0.0

0.1

0.2

0.3

0.4

0.5

0.6

0.7

0.8

0.9

p

H B

ITS

Entropy is a maximum if events in all classes occur with equal probability. ie when there is most uncertainty

Entropy is zero when one class of event becomes certain, ie when there is no uncertainty


Implications of the theoryImplications of the theory• communication includes

speech music ballet

•Information can be defined as:–a measure of the freedom of choice when selecting a binary event to send down a communication channel.


Diagram of a GUI communication Diagram of a GUI communication systemsystem

CPU Monitor Eyes Brain

Noise

Message GUI Image Message

A GUI can be viewed as a communication system between CPU and user


InformationInformation

• Information is proportional to log2 of the possible meanings


Information and entropyInformation and entropy

• Entropy describes the amount of uncertainty in the progress of a message.

• When the user begins, – any interaction object can be chosen,

– then probability can be used to indicate the next choice

– dependent on the order of prior objects in the sequence.

• In a highly organised transmission the amount of information (entropy) is low and there is little randomness or choice.


RedundancyRedundancy

• Redundancy is given by:– R = 1 - H/HMAX

• where– H = entropy

• R is the amount of the message that is determined by the statistical rules of the message language and is not due to free choice.


Redundancy and the English languageRedundancy and the English language

• Weaver points out that about 50% of the English language is redundant,

• 1. Omit much words make text shorter.• 2. Thxs, wx cax drxp oxt exerx thxrd xetxer, xnd

xou xtixl maxagx prxttx wexl.• 3. Thng ge a ltte tuger f w alo lav ou th spce.


Redundancy and interfacesRedundancy and interfaces

• A command language interface is a low entropy

interface much like the third example for the

English language.

• In contrast, GUI’s have a much higher redundancy.


Applied to typography - Applied to typography - BonsiepeBonsiepe

• Entropy is a measure of the disorder of the system.

• System order: – objects classified by common widths and common heights

• distribution order:– objects classified by distance from the top and left of page.

• The proportion of objects in each class determines the complexity of the layout.


TechniqueTechnique

• Compared two versions of a printed catalogue.• It was found that the new version was 39% more

ordered than the original version.• Offers a justification for grid based layout.


Applied to computer screens - Applied to computer screens - Tullis

• Structured layout (minimising layout complexity):– increases the user’s ability to predict the location of items

– thus improves the viewer’s chance of finding the desired information.

• A useful usability metric?– Did not predict time to find information.

– but, Important predictor of users’ rating of the usability of screens.


Aim of the researchAim of the research

• Develop a metric for evaluating object placements in a graphical user interface based on complexity theory

• “Where is the best place to put things”. • Provide immediate feedback on the layout quality

of the GUI.


Optimum Complexity

Usability

Complexity

It is hypothesised that there is a trade off between usability (U) and complexity C with a relationship of the form U = f(C) where U is a maximum for some intermediate value of C


Initial investigationInitial investigation

• Apply Bonsiepe’s technique to thirteen different Microsoft Windows applications

• Large variation in complexity figures for the thirteen displays

• Possible to apply manually but not efficient or accurate


23.68

173.35

285.61

1571.98


Screen complexity and user preferenceScreen complexity and user preference

• Bonsiepe and Tullis indicated that less complex is better– User’s should agree

– Subjects were asked to sort the screen prints from best design to worst design, with no ties.

• Results– Subjects had a common interpretation of “goodness” of

design.

– However, the distribution of the results was unexpected.

– A greater preference for the more complex screens.


Evaluating usability of screen designsEvaluating usability of screen designs

• Usability consists of:– effectiveness, learnability, flexibility, and attitude

• Visual Basic (VB): – Information about the dimensions and positions of

objects.

– Track the user’s progress with a task, keeping a record of each event and time taken.

• Pilot application, Launcher


Screen LayoutsScreen Layouts

• Four different screen layouts were designed, each with a different complexity score


Screen 1 - Complexity equals 156Screen 1 - Complexity equals 156


ProcedureProcedure

• Subjects were requested to complete the same task for each screen.

• Asked to indicate their preferences for the different screens.

• Recorded:– Time it took users to complete each step in a task

– Any errors.


SummarySummary

Usability Scr. 1 Scr. 2 Scr. 3 Scr. 4

Complexity 156 170 186 228

Error-free 36% 79% 86% 71%

Time 354 290 276 293

Rating 4 7 16 0


Conclusions from pilot Conclusions from pilot

• Differences in usability between screens differing in complexity.

• VB proved useful tool for:– calculating complexity

– collecting data about the user’s interaction


Implications for GUI designImplications for GUI design

• There are two groups that require a method of evaluating GUI applications. 1.Designers choosing between competing layouts.

2.Comparing different applications for design quality.

• Give feedback to the designer during design: – layout complexity metric

– Kim’s symmetry and balance

– Sear’s layout appropriateness

• Designers can modify their design “on-the-fly”


Extensions to LauncherExtensions to Launcher

• More screens• More tasks• Wider cross-section of users • Extra metrics will also be added

– including Sear’s “layout appropriateness”

– percentage white space

– Kim’s balance

southern cross university 1 cadui'96 - 5-7 june 1996 - fundp namur investigating layout...

Documents