1. CS3205: HCI in SW Development More on Detailed Design: Layout

2. Readings
Duck book Chapter 4 on “Basics of Page Layout:”
Tog on Fitts’ Law:
Gestalt Principles and UI Design:

3. Combining UI Elements in a Design
Hardware and SW elements together make up a UI
Layout: How elements are combined

4. Principles of Good Layout
Create natural groupings
Separate currently active components
Emphasize important components
Use “white space” effectively (or: separate components when appropriate)
Make controls visible
Balance aesthetics and usability
(See next slides for more on each of these.)

5. Comments on Layout Principles
Create natural groupings
Both commands/controls and information displayed
Is there a natural structure?
Use color, fonts, separators etc.
Separate Currently Active Components
Help user focus on what they're doing now.
Can pick back up if interrupted
Make things prominent by color, placement,…

6. Comments on Layout Principles
Emphasize important components
Use color, type, animations, etc.
Be selective
Use “white space” effectively (or: separate components when appropriate)
White-space in GUIs, physical space on physical devices
Alternative to lines, colors
Supports grouping for perception
In physical devices, supports physical usability
For selectable items, improves safety

7. Example Tabs in browser window (Firefox 48.0.1) on OS X 10.9.5
Note how current tab is made visible
In contrast to other tabs
We might want to click and drag to either
Move the whole window (left arrow), or
Pull a tab to put it in its own new window (right window)
Easy to do the wrong one!
(BTW, Fitts' Law applies here too.)

8. Comments on Layout Principles
Make controls visible
Support recognition over recall
Control must be obvious, but also the controls function
Consider conventions, consistency, …
Balance aesthetics and usability
Some say: “Looking pretty is half the battle”
How important? What trade-offs?

9. Gestalt Principles Gestalt psychologists: layout principles Proximity
Users will associate things that are close together
Similarity
If two things have same shape, size, color, orientation, then users will associate them
Continuity
We want to see things aligned into continuous lines and curves
Closure
We want to see simple closed forms (blocks, lines) rather than random, distinct items
Symmetry
We see regions bounded by symmetrical borders as a coherent thing

10. From: http://start.eegspectrum.com/News/feb09.htm

11. HCI Examples (from article on website)
Law of Proximity
Separation of oragnizers (top left) from sponsors (bottom right)
Proximity and separation with words and white space results in two groupings

12. HCI Examples (see article on website)
Proximity: Your mind doesn't like the one on the right, does it?

13. HCI Examples (see article on website)
Law of Closure: our mind wants to see things as complete forms and not
as random sets of things. We complete “open” objects to make them “whole”. IBM logo: our minds turns lines into letters, filters out white space

15. Something's wrong here

16. Fitts' Law (Paul Fitts 1954)
The law predicts that the time to point at an object using a device is a function of the distance from the target object & the object's size Time = a + b log (Dist/Size + 1)
The further away & the smaller the object, the longer the time to locate it and point.
Useful for evaluating systems for which the time to locate an object is important such as handheld devices like mobile phones

17. Why oh why? What's wrong with Windows 2000's start button?
Why are Mac apps menu bars on the top of the screen? (next slide)

19. Interesting article on Fitts' Law
Visit Tog's website and do Tog's quiz, designed to give you fitts!
Note this point: Screen edges effectively have “infinite” depth. No need to slow down. Corners…

20. Understand Fitts' Law?
Is there a benefit to having a label under the icon on the Windows desktop?
If you have an auto-hidden Taskbar on Windows, how can this be irritating? Does this confirm something about Fitts' Law?
Tweaking hierarchical pull-down menus – how could this be done? Why an improvement?
How would Fitts' law impact your layout of buttons, fields, etc. in a dialog box?

21. Imagine Exercise You're Tom Cruise in Minority Report!!!
You have a BIG display and hand/pen inputs
Got any clever ideas that use Fitts' Law to improve the interface?

23. Next: “Softer” UI Components Guidance, guidelines
Lots we could talk about here
We'll cover text and color
Guidance, guidelines
“Guidance” means: rules, policies, standards

24. Using Text Well Goal: legibility Font is typeface + size
Factors to consider
Sans serif better than serif on screen
Not too big, not too small
10 or 12 point is smallest
Extended chunks of bold or italic harder to read
Spacing between lines
Too much and lines don't group in user's mind

25. Using Text Well (2) Underlining: a web-link or emphasis?
Consistency
Common issue on web-pages
Background / font-color combinations
Black on white
Lighter on darker (e.g. presentations in large rooms)
Relative luminance (function of RGB values)
Some you should avoid?
Can you read this easily?
Can you read this easily?
Can you read this easily?

26. No one really does that, do they?
Reservation calendar for very fancy hotel in Richmond

27. Web Issues and Text Keep text to a minimum
50% of what you'd had in printed form
Lists not paragraphs
Help users scan for information
Good headings and subheadings
Highlight important things
Good organization
Divide long blocks into sections or pages

28. UI Elements: Color Reasons for using color: The physics of color
To draw attention
To show status
To make information clearer (like legibility)
To make the UI more attractive
The physics of color
Saturation, brightness
Differs on screen
See text or other texts

29. Color Connotations Colors have connotations Cultural conventions
What's red mean in your culture?
Danger?
Joy, luck?
Red state vs. blue state in US? Labour vs. Conservative in Britain?
Other colors:
Green: nature or jealous, inexperienced
Yellow: light/bright or caution

30. Color for Information Representation
Need to convey information?
Color for emphasis
Color for grouping
Areas of the screen may have different background etc.
Color coding (status)
Perspective
Dark/dim for background, brighter for foreground
Layering: if data falls into layers
Example: Look at simple apps like Microsoft Windows' calculator
What colors are there? Why?

31. Calculator Examples What matters for calculator users?
Efficiency
Safety
Let’s talk about layout, use of color, etc.

32. Apple II; Windows 95; CDE 1.5 (Solaris UNIX)

33. OS X 10.9.5 widget; OS Panther 10.3; Windows 10; RealCalc (Android)

34. Class Exercise Information visualization
measure something by unit in a larger thing
E.g. word-frequency by chapter in a novel
Goal: quickly see patterns of high/low frequency
Question: how could color be used?
Issues, problems, ?

36. Guidance for UI Design Other than textbook's, other guidance
Guidelines for physical design
Nielsen's heuristics
Shneiderman's eight golden rules
Styles guides: commercial, corporate
decide ‘look and feel’ for you
widgets prescribed, e.g. icons, toolbar

37. Usability principles (Nielsen 2001)
Visibility of system status
Match between system and the real world
User control and freedom
Consistency and standards
Help users recognize, diagnose and recover from errors
Error prevention
Recognition rather than recall
Flexibility and efficiency of use
Aesthetic and minimalist design
Help and documentation

38. Shneiderman's 8 Golden Rules
Strive for consistency
Enable frequent users to use shortcuts
Offer informative feedback
Design dialogs to yield closure
Offer error prevention and simple error handling
Permit easy reversal of actions
Support internal locus of control
Reduce short-term memory load

39. Other Guidance Commercial vendors guidelines See Web site for links
Apple Macintosh
Microsoft Windows
Community: Java, OSF
See Web site for links
Also, international usability standards