Download to read offline
unit 5-Screen based controls-USER INTERFACE DESIGN
- 1. MODULE 5 SCREEN BASED CONTROLS Referred TextBook: The Essential Guide to User Interface Design (Second Edition) Author: Wilbert O. Galitz
- 2. Screen-based controls, oftensimply called controls or widgets, are the elements of a screen that represent the properties or operations of other objects. A control may: • Permit the entry or selection of a particular value. • Permit the changing or editing of a particular value. • Display only a particular piece of text, value, or graphic. • Cause a command to be performed. • Possess a contextual pop-up window. SCREEN-BASED CONTROLS
- 3. Topics to becovered 1. Operable control 2. Text control 3. Selection control 4. Custom control 5. Presentation control 6. Windows Tests-prototypes 7. Kinds of tests.
- 4. 1. OPERABLE CONTROL •Operable controls are those that permit the entry, selection, changing, or editing of a particular value, or cause a command to be performed. • It mainly includes “Buttons” : A square or rectangular-shaped control with a label inside that indicates action to be accomplished. • Styles/ Types of Buttons 1. Command buttons 2. Toolbar buttons without labels. 3. A symbol button.
- 5.
- 6. 1. Command Buttons Commandbutton guidelines include the following: 1. Usage 2. Structure 3. Size
- 7. 4. Labels 7.Location and Layout 5. Number 6. Expansion Buttons
- 8.
- 9.
- 10.
- 11. 14. Button Activation 13. KeyboardEquivalents and Accelerators
- 12. 2. Toolbar Buttons Toolbarsare compilations of commands, actions, or functions, usually graphical in structure but sometimes textual, grouped together for speedy access. Toolbar button guidelines include the following: 1. Usage 2. Structure
- 13.
- 14. 5. Location 6. Active Items 7.Customization
- 15. 8. Keyboard Equivalentsand Accelerators 9. Button Activation
- 16. OTHER OPERABLE CONTROLS 1.Tabs 2. Slider 3. Date-Picker 4. Tree Views 5. Scroll Bars 1. Tabs
- 17. Guidelines to usetabs are following: 1. Section and Pages 2. Location, Size and Labels 3. Command Buttons
- 18.
- 19. Guidelines to useslider are following: 1. Caption and Labels 2. Scale 3. Slider Arm 4. Slider Buttons 5. Detents 6. Proportions
- 20.
- 21.
- 22. 5. Scroll Bar ScrollBar Design Guidelines
- 23. 2. TEXT ENTRY/READ-ONLYCONTROLS • A Text Entry/Read-Only control contains text that is exclusively entered or modified through the keyboard. • It may also contain entered text being presented for reading or display purposes only. • There are two types of Text Boxes: Single-Line and Multiple-Line Text Boxes.
- 24.
- 25.
- 26.
- 27. 3. SELECTION CONTROLS •A selection control presents on the screen all the possible alternatives, conditions, or choices that may exist for an entity, property, or value. • Selection controls include: 1. Radio buttons 2. Check boxes 3. List boxes 4. Drop-down/pop-up list boxes 5. Palettes.
- 28.
- 29. Radio button guidelinesinclude the following: 1. Choice Descriptions 2. Size 3. Default
- 30.
- 31. 6. Related Control 7.Keyboard Equivalents
- 32.
- 33. 9. Selection Methodand Indication
- 34.
- 35. Check boxes guidelinesinclude the following: 1. Choice Descriptions 2. Size 3. Default
- 36. 4. Choice Descriptions 5.Organization
- 37. 6. Related Control 7.Keyboard Equivalents
- 38.
- 39. 9. Selection Methodand Indication
- 40.
- 41. List box guidelinesinclude the following: 1. Selection Descriptions 2. List Size 3. Organization
- 42. 4. Box size 5.Organization
- 43.
- 44. 7. Disabling 8. SelectionMethod and Indication
- 45.
- 46. 1. Selection Descriptions 2.List Size 3. Box Size Drop-down/pop-up list boxes guidelines include the following:
- 47. 4. Organization 6. Captions 5.Layout and Separation
- 48. 7. Defaults 9. SelectionMethod and Indication 8. Disabling
- 49.
- 50. Palettes guidelines includethe following: 1. Graphical Representations 2. Size 3. Layout
- 51. 4. Organization 5. SelectionMethod and Indication
- 52.
- 53. 4. CUSTOM CONTROL •Many toolkits and interface builders provide the ability to create custom controls; implement them with caution. • The addition of custom controls increases system complexity. • If custom controls must be developed and implemented, make their look and behavior as different as possible from the standard controls. This will avoid confusion between the various controls.
- 54. 5. PRESENTATION CONTROL •Presentation controls are purely informational. • They provide details about other screen elements or controls, or assist in giving the screen structure. • Common presentation controls are: 1. Static text fields 2. Group boxes 3. Column headings 4. ToolTips 5. Balloon tips 6. Progress indicators 7. Sample box 8. Scrolling tickers
- 55. 1. Static TextFields
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63. 6. WINDOWS TESTS-PROTOTYPES •A prototype is a simulation of an actual system that can be quickly created. • A prototype may be a rough approximation, such as a simple hand-drawn sketch, or it may be interactive, allowing the user to key or select data using controls, navigate through menus, retrieve displays of data, and perform basic system functions. • Various kinds of prototypes are: 1. Hand Sketches and Scenarios 2. Interactive Paper Prototypes 3. Programmed Facades 4. Prototype-Oriented Languages
- 64. 1. Hand Sketchesand Scenarios
- 65. 2. Interactive PaperPrototypes
- 66.
- 67.
- 68. 7. KINDS OF TESTS •A test is a tool that is used to measure something. The “something” may be: Conformance with a requirement. • Conformance with guidelines for good design. • Identification of design problems. • Ease of system learning. • Retention of learning over time. • Speed of task completion. • Speed of need fulfillment. • Error rates. • Subjective user satisfaction. • Various kinds of windows tests are: 1. Guidelines Review 2. Think-Aloud Evaluations 3. Cognitive Walkthroughs 4. Heuristic Evaluation 5. Usability Test 6. Focus Groups 7. Classic Experiments
- 69. 1.Guidelines Review 3.Cognitive Walkthroughs 2. Think-Aloud Evaluations
- 70.
- 71. 5. Usability Test 7.Classic Experiments 6. Focus Group End of Module 5