Investigating Layout Complexity

1
Investigating Layout Complexity
Tim Comber Dr. John Maltby Centre of
Computing Southern Cross University LISMORE (
Australia)
2
The 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

3
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?

4
Shannons Formula

• K a positive constant
• n number of event classes
• pi probability of occurrence of the ith event
  class

5
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

6
Entropy

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

7
Entropy in the case of two possibilities with
probabilities, p and (1 - p)
8
Implications 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.

9
Diagram of a GUI communication system
A GUI can be viewed as a communication system
between CPU and user
10
Information

• Information is proportional to log2 of the
  possible meanings

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

12
Redundancy

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

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

14
Redundancy and interfaces

• A command language interface is a low entropy
  interface much like the third example for the
  English language.
• In contrast, GUIs have a much higher redundancy.

15
Applied to typography - Bonsiepe

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

16
Technique

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

17
Applied to computer screens - Tullis

• Structured layout (minimising layout complexity)
• increases the users ability to predict the
  location of items
• thus improves the viewers 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.

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

19
Optimum 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
Usability
Complexity
20
Initial investigation

• Apply Bonsiepes 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

21
23.68
285.61
1571.98
173.35
22
Screen complexity and user preference

• Bonsiepe and Tullis indicated that less complex
  is better
• Users 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.

23
Evaluating 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 users progress with a task, keeping a
  record of each event and time taken.
• Pilot application, Launcher

24
(No Transcript)
25
Screen Layouts

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

26
Screen 1 - Complexity equals 156
27
Screen 2 - Complexity equals 170
28
Screen 3 - Complexity equals 186
29
Screen 4 - Complexity equals 228
30
Procedure

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

31
Summary

• 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

32
Conclusions from pilot

• Differences in usability between screens
  differing in complexity.
• VB proved useful tool for
• calculating complexity
• collecting data about the users interaction

33
Implications 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
• Kims symmetry and balance
• Sears layout appropriateness
• Designers can modify their design on-the-fly

34
Extensions to Launcher

• More screens
• More tasks
• Wider cross-section of users
• Extra metrics will also be added
• including Sears layout appropriateness
• percentage white space
• Kims balance