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

Readings Duck book Chapter 4 on “Basics of Page Layout:” http://re5qy4sb7x.search.serialssolutions.com/log?L=RE5QY4SB7X&D=DRU&J=TC_007700263&U=http%3A%2F%2Fproquest.safaribooksonline.com%2F9781449379711 Tog on Fitts’ Law: http://www.asktog.com/columns/022DesignedToGiveFitts.html Gestalt Principles and UI Design: https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/gestalt-principles-of-form-perception

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

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

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,…

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

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

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?

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

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

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 https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/gestalt-principles-of-form-perception

HCI Examples (see article on website) Proximity: Your mind doesn't like the one on the right, does it? http://conferences.computer.org/stc/2014/papers/5034a062.pdf

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

Something's wrong here

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

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)

Interesting article on Fitts' Law Visit Tog's website and do Tog's quiz, designed to give you fitts! http://www.asktog.com/columns/022DesignedToGiveFitts.html Note this point: Screen edges effectively have “infinite” depth. No need to slow down. Corners…

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?

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?

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

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

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?

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

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

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

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

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?

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

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

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

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

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

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

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

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