1 / 39

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

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

ddahlen
Télécharger la présentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CS3205: HCI in SW DevelopmentMore on Detailed Design:Layout

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

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

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

  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

  14. Something's wrong here

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

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

  17. 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…

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

  19. 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?

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

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

  22. 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?

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

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

  25. UI Elements: Color • Reasons for using 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

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

  27. 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?

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

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

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

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

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

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

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

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

More Related