cs3205 hci in sw development more on detailed design layout hardware choices n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
CS3205: HCI in SW Development More on Detailed Design: Layout Hardware Choices PowerPoint Presentation
Download Presentation
CS3205: HCI in SW Development More on Detailed Design: Layout Hardware Choices

Loading in 2 Seconds...

play fullscreen
1 / 43

CS3205: HCI in SW Development More on Detailed Design: Layout Hardware Choices - PowerPoint PPT Presentation


  • 171 Views
  • Uploaded on

CS3205: HCI in SW Development More on Detailed Design: Layout Hardware Choices. 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'CS3205: HCI in SW Development More on Detailed Design: Layout Hardware Choices' - deva


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
cs3205 hci in sw development more on detailed design layout hardware choices

CS3205: HCI in SW DevelopmentMore on Detailed Design:LayoutHardware Choices

combining ui elements in a design
Combining UI Elements in a Design
  • Hardware and SW elements together make up a UI
  • Layout: How elements are combined
principles of good layout
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
comments on layout principles
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 principles1
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
comments on layout principles2
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?
comments on layout principles3
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,…
gestalt principles
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
fitts law paul fitts 1954
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
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
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
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
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?
note for exam 1
NOTE for Exam 1!
  • Slides to cover for Exam 2 end here.
  • We’ll do the remainder of theseafter Exam 2.
hardware for interaction
Hardware for Interaction
  • Do you really have choices here?
    • Maybe you’re just writing for a PC’s windowed interface
    • Maybe you’re designing a handheld device
      • General or for specialized users
  • Still… you may have choices here
    • Choice of typing vs. mouse movement
    • Touchscreens, Tablet PCs
    • Handhelds: wheels, buttons, etc.
    • Motion (Wiimote, Kinect)
input devices keyboards
Input Devices: Keyboards
  • Keyboards
    • Traditional computer keyboard not designed for efficiency
    • Alternatives: Dvorak, chord, kids, etc.
      • See textbook for examples
  • More interesting: smaller handhelds
    • Do you need a keyboard?
    • Can you use “soft-keys” instead?
    • Size of buttons
    • Layout
input devices pointing devices
Input Devices: Pointing Devices
  • Continuous input devices
    • Moving, dragging
    • Keyboards are discrete input devices
  • Indirect: mouse, joystick, trackball
  • Direct: touch-screen, pen
  • You may have choices:
    • Example: touch-screen in kiosk etc.
    • Must re-think ideas of buttons, menu, etc.
      • Freed from many PC WIMP conventions
are there real differences
Are There Real Differences?
  • See info on devices from p. 236 in UIDE text
    • But read the caveats for this
    • How would you evaluate different devices?
  • Questions to ask:
    • How important is learnability?
    • How important is accuracy?
    • How important is efficiency?
    • Environment: when and where used?
    • How much space is there?
    • User characteristics? Dexterity etc.
tablet pc issues
Tablet PC Issues
  • Tablet PCs offer a familiar interface
    • But with an fairly un-common input device
  • Pen used for pointing, selecting, dragging
    • Some examples next
  • Ink input used for data-entry
    • nothing on this today
  • Article on website: The Challenge of Designing Interfaces for the Tablet PC
parallax
Parallax
  • Parallax
    • Glass and display not in same plane
    • Your eye not always properly aligned
  • Consequence? Solutions?
    • Tell me.
issues with tablets and menus
Issues with Tablets and Menus
  • Is it an issue if your user is left- or right-handed?
  • For tablet PCs, can’t see through your hand!
slide28
Next:
  • Guidance, guidelines
    • “Guidance” means: rules, policies, standards
  • “Softer” UI Components
guidance for ui design
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
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
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
Other Guidance
  • Commercial vendors guidelines
    • Apple Macintosh
    • Microsoft Windows
    • Community: Java, OSF
  • See Web site for links
  • Also, international usability standards
ui elements text and color
UI Elements: Text and Color
  • Lots we could talk about here
    • We’ll cover text and color
using text well
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
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
No one really does that, do they?
  • Reservation calendar for very fancy hotel in Richmond
web issues and text
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
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
color connotations
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
class exercise
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, ?
color for information representation
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?