16 user interfacedesign

  • 438 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
438
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
8
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1- M. E. Kabay, PhD, CISSP
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-
  • Copyright © 2003 M. E. Kabay. All rights reserved. 1-

Transcript

  • 1. User-Interface Design
  • 2. Topics
    • Introduction
    • User-Interface Design Principles
    • User Interaction
    • Information Presentation
    • User Support
  • 3. User Interface (UI)
    • UI critically important aspect of software engineering
      • System users often judge system by interface rather than its functionality
        • Why?
      • Poorly-designed interface can cause users to make catastrophic errors
        • How?
    • Poor UI design discourages use of software
  • 4. Graphical UIs (GUIs)
    • Some old systems still use command-line or text-based UIs
    • Most systems today use GUIs
      • Windows: simultaneous views
      • Icons: data, functions
      • Menus: choice of options, memory aids
      • Pointing: trackball, touchpad, mouse, eye
      • Graphics: charts, tables, diagrams
        • Static or dynamic
  • 5. Examples of GUIs (1)
    • The First Commercial GUI:
    • “ Xerox’s Star workstation was the first commercial implementation of the graphical user interface. The Star was introduced in 1981 and was the inspiration for the Mac and all the other GUIs that followed.”
    • This and following screen shots are from the Computer Desktop Encyclopedia .
    • Used with permission.
    • http://www.computerlanguage.com
  • 6. Examples of GUIs (2) Macintosh GUI
  • 7. Examples of GUIs (3)
  • 8. GUI Advantages
    • Easy to learn and use
      • Save time in training
      • Apply skills to new programs
    • Fast task-switching
      • Use different applications concurrently
      • Information can remain visible in its own window
    • Fast, full-screen interaction possible
      • Immediate access to anywhere on screen
      • Make full use of available “real-estate”
      • Supports multi-screen capabilities
  • 9. Topics
    • Introduction
    • User-Interface Design Principles
    • User Interaction
    • Information Presentation
    • User Support
  • 10. User-Centered Design
    • This chapter / lecture focus:
      • Design philosophy and issues
      • Not on implementation of UIs
    • User-centered design
      • Needs of user are paramount
      • Users involved in design process
    • Design UI through prototypes
  • 11. UI Design Process
  • 12. UI Design Principles
    • Determinants: learn about system users’
      • Needs
      • Experience
      • Capabilities
    • Constraints: physical and mental limitations
      • Limited short-term memory
        • 7±2 concepts in mind at one time
      • Mistakes are normal and expected
      • People fall into habits
  • 13. Design Principles: Overview
    • User familiarity
    • Consistency
    • Minimal surprise
    • Recoverability
    • User guidance
    • User diversity
  • 14. User Familiarity
    • Interface should be based on user-oriented terms and concepts
    • Avoid using computer concepts
    • E.g., office system:
      • Use “letters, documents, folders” etc.
      • Don’t use “directories, file identifiers” etc.
  • 15. Consistency
    • Display appropriate level of consistency
    • Commands and menus should have same
      • Format / appearance
      • Command punctuation
      • Layout
      • Abbreviations / keyboard shortcuts
    • Error-messages
      • Same styles / formats from place to place
      • Same location on screen when they appear
  • 16. Minimal Surprise
    • Extend consistency to commands or actions
      • If one command operates in known way,
        • User should be able to predict operation of comparable commands
        • Put the default choice in the same place or sequence on the screen
    • E.g.,
      • Make either YES or NO the default for all commands
      • If keeping a previous file version is default, then don’t make one command delete previous version by default
  • 17. Recoverability
    • Resilience to user errors
    • Allow user to recover from errors
      • Confirmation of destructive actions
      • ‘ Soft' deletes . . . .
      • Undo / redo facility
  • 18. User Guidance (1)
    • Help in same place(s) on all screens
      • Context-sensitive
      • Index
      • Topical
      • Smart questions
    • On-line manuals
    • Tutorials . . . .
  • 19. User Guidance (2)
  • 20. User Diversity
    • Plan for different types of user
    • Experience
      • Casual/novice vs experienced
        • Ease-of-use vs efficiency & speed
    • Physical disabilities
      • Poor eyesight
        • Configurable font sizes
      • Blindness
        • Automated reading programs
      • US: Americans with Disabilities Act
  • 21. US ADA & GUI Design
    • Americans with Disabilities Act of 1992
      • Widespread implications for employment, architectural design and services
      • Applies to private employers with >15 employees, state and local governments, employment agencies & labor unions
    • Web designers have been grappling with requirements
    • Resources
      • http://consumerlawpage.com/brochure/disab.shtml
      • http://academic.evergreen.edu/g/grovesr/acc_class/resources.html
  • 22. Topics
    • Introduction
    • User-Interface Design Principles
    • User Interaction
    • Information Presentation
    • User Support
  • 23. User-System Interaction
    • Key issues
    • Info from user to computer system?
    • Info from computer system to user?
    • UI metaphor helps to make sense of functions
      • “ Desktop” for operating system
      • “ Space invaders game” for typing tutor
      • “ 3D universe” for dataspace (e.g., TRON, Matrix, other sci-fi movies)
  • 24. Interaction Styles
    • Direct manipulation
    • Menu selection
    • Form fill-in
    • Command language
    • Natural language
  • 25. Advantages & Disadvantages
  • 26. Direct Manipulation: Example – PowerPoint
    • Open PowerPoint and study how objects can be
      • Grown
      • Shrunk
      • Flipped
      • Rotated
      • Copied
      • Colored. . . .
      • Through direct manipulation using “tools”
  • 27. Menu Systems
    • Select from lists of possibilities
      • Point and click with mouse
      • Use cursor keys
      • Type name of selection
      • Touchscreens
    • Usually integrate automated help facilities
      • Help cursor
      • Pop-ups
    Pop-up text ?
  • 28. Control Panel Interface
  • 29. Menu Systems: Benefits
    • Easy to learn – no memorization
    • Reduced typing – faster data entry
    • User errors trapped by interface
    • Context-dependent help
  • 30. Menu Systems: Problems
    • Best for small # of choices
      • May have to provide sub-menus for complex situations
    • AND and OR relations hard to represent
    • Slower than command language or keyboard shortcuts
      • So provide those as options
  • 31. Form-Based Interface
  • 32. Command Interfaces
    • User types commands to give instructions to system e.g. UNIX
    • May be implemented using cheap terminals.
    • Easy to process using compiler techniques
    • Commands of arbitrary complexity can be created by command combination
    • Concise interfaces requiring minimal typing can be created
  • 33. Command Interfaces: Problems
    • Users have to learn and remember command language.
      • Unsuitable for occasional/casual users
    • Need to be able to type
    • Users make errors in commands
      • Need good error detection and recovery
  • 34. Natural Language Interfaces
    • User types command in natural language.
    • Vocabulary usually limited
    • Confined to specific application domains; e.g.,
      • Timetable enquiries
      • Medical systems
    • Experienced users: too much typing
    • See ASK JEEVES
  • 35. Ask Jeeves
  • 36. Multiple UIs
  • 37. Topics
    • Introduction
    • User-Interface Design Principles
    • User Interaction
    • Information Presentation
    • User Support
  • 38. Information Presentation {numeric, textual} X {static, dynamic} Information may be
  • 39. Information Display Factors
    • Questions to consider in designing interface
      • Is user interested in precise information or data relationships?
      • How quickly do information values change?
      • Must change be indicated immediately?
      • Must user take some action in response to change?
      • Is there a direct manipulation interface?
      • Is information textual or numeric?
      • Are relative values important?
  • 40. Data Visualization
    • Concerned with techniques for displaying large amounts of information
    • Visualization can reveal relationships between entities and trends in data
    • Examples of data visualization applications:
      • Weather information collected from number of sources
      • State of telephone network as linked set of nodes
      • Chemical plant visualized by showing pressures and temperatures in linked set of tanks and pipes
      • Model of molecule displayed in 3 dimensions
      • Web pages displayed as hyperbolic tree
  • 41. Color Displays
    • Color adds extra dimension to interface and can help user understand complex information structures
    • Can be used to highlight exceptional events
    • Common mistakes in use of color in interface design include:
      • Use of color to communicate non-obvious specific meaning
        • E.g., red may mean “hot” to a chemist but “forbidden” to a driver
      • Over-use of color in display – confusing
  • 42. Guidelines for Effective Use of Color in Displays
    • Don't use too many colors (max 4-5 in window)
    • Don’t use colors as simply as decoration
    • Change of color must imply change of state
    • Use color coding to support tasks
    • Allow users to control color coding
    • Design for monochrome then add color
    • Use color coding consistently
    • Avoid color pairings which clash
    • Use color change to show status change
    • Be aware that color displays usually lower resolution
    • Don’t make large areas of screen BLINK
    Can cause seizures
  • 43. Topics
    • Introduction
    • User-Interface Design Principles
    • User Interaction
    • Information Presentation
    • User Support
  • 44. User Support
    • User guidance includes
      • On-line help
      • Error messages
      • Manuals
      • Tutorials
    • Integrate help with interface: context-sensitive
    • Integrate help and error messages
      • Easy to get explanation, tips, suggestions
    • Advanced help keeps user profile
  • 45. Help and Message System
  • 46. Error Messages
    • Bad error messages can lead users to reject entire system
    • Consider background and experience of users in designing messages
    • Messages should be
      • Polite
      • Concise
      • Consistent
      • Constructive
    • Avoid classic errors
      • Never be rude
      • Don’t try to be funny
      • Don’t condescend to your users
  • 47. Design Factors in Message Wording
    • Context-sensitive
    • Experience – offer verbose / terse modes
    • Skill level – offer beginners / expert modes
    • Style – positive, active (never rude, not funny)
    • Culture – apply localization to avoid offending people in different cultures
  • 48. System and User-Oriented Error Messages
    • System-oriented message
      • Useful for technical staff
      • Detail internal states of system
      • Good for diagnostics and repair
      • Usually complete gibberish for users
    • User-oriented message
      • Useful for user to fix a problem
      • Reassuring
      • Give instructions on whom to contact if appropriate
  • 49. A Friendly, Helpful Message System
    • Encourages more positive attitude towards the operating system, the computer and operations:
    • ENTER USER PASSWORD:
    • vs
    • Please enter user password:
    • UNKNOWN SYNTAX
    • vs
    • Pardon?
    • CAN'T INITIATE NEW SESSIONS NOW
    • vs
    • System Alpha not yet available--try again later
  • 50. A Friendly, Helpful Message System (cont'd)
    • If possible, show what can be done to fix problem
    • Explain WHO can do WHAT to help user in trouble
    • Include telephone numbers
    • OUT OF DISC SPACE (FSERR 46).
    • vs
    • OUT OF DISC SPACE (FSERR 46).
    • Check :FREE for free space
    • Verify :BUILD or :FILE commands for typing error;
    • use 32 extents if possible; check device class;
    • call Ramesh @ (514) 234-5678 X.216 for help
  • 51. A Friendly, Helpful Message System (cont'd)
    • Gives operators critical information fast
    • Especially important when user gets system information
    • DCU LOGGING IN PROGRESS (THIS IS NORMAL)
    • MAKE LDEV 3 ONLINE RIGHT NOW: PRESS UNLOAD/LOAD
    • STREAMS FACILITY NOT ENABLED
    • Call operations for :STREAMS 10
  • 52. Help System Design
    • Help? means ‘Help, I want information”
    • Help! means “HELP. I'm in trouble”
    • Both of these requirements have to be taken into account in help system design
    • Different facilities in help system may be required
  • 53. DISCUSSION