Choose the Proper Screen-Based Controls

Slides:



Advertisements
Similar presentations
Step 7: Proper Screen-Based Control
Advertisements

Designing a Graphical User Interface (GUI) 10 IST – Topic 6.
Chapter 19 Design Model for WebApps
Principles of design caroline burdett. repetition balance proximity simplicity contrast.
1 Windows CIS*2450 Advancing Computing Techniques.
Graphic Design 1 The “look & feel”. Fall 2002CS/PSY Agenda Principles Examples SHW discuss.
Design & Screen Organization Some Basic Human Characteristics Humans are limited in their capacity to process information. People are always learning.
CMPUT 301: Lecture 25 Graphic Design Lecturer: Martin Jagersand Department of Computing Science University of Alberta Notes based on previous courses by.
Interaction Styles Interface Widgets. What are Interaction Styles?  A Collection of interface objects and associated techniques from which an interaction.
Principles of Graphics Design
© De Montfort University, Principles of Graphics Design Howell Istance School of Computing Technology De Montfort University.
Chapter 12 Designing Effective Input
Level > Next Level > …. > Crumb Trail (Hansel & Grettel) Bread Crumb Trail.
The Principles of Art The principles of art are the rules that govern how artists organize the elements of art. The principles are rhythm, movement,
User Interface Design Chapter 11. Objectives  Understand several fundamental user interface (UI) design principles.  Understand the process of UI design.
Copyright 1999 all rights reserved Human Visual Understanding System n Anything that is seen by our eyes has to be processed n The processing difficulty.
Process of __________, arranging, & ______________ visual elements of art to accomplish or address a particular purpose  Elements of Visual Design 
Color Theory in Web Design Web Design – Sec 2-2. Objectives  The student will: –Have a better understanding of effective use of color on the web. –Be.
CHAPTER 14 Formatting a Workbook Part 1. Learning Objectives Format text, numbers, dates, and time Format cells and ranges CMPTR Chapter 14: Formatting.
William H. Bowers – Designing Look and Feel Cooper 19.
Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.
Multimedia & The World Wide Web winny HCI 201 Multimedia and the www.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
Java Software Solutions Lewis and Loftus Chapter 10 1 Copyright 1997 by John Lewis and William Loftus. All rights reserved. Graphical User Interfaces --
Chapter 8: Writing Graphical User Interfaces Visual Basic.NET Programming: From Problem Analysis to Program Design.
Graphic Design The “look & feel” portion of an interface What someone initially encounters Conveys an impression, mood.
Patterns, effective design patterns Describing patterns Types of patterns – Architecture, data, component, interface design, and webapp patterns – Creational,
Principles of Good Screen Design
Web Development. Presentation Design Visualizing your web site or Visual Design.
Microsoft Visual Basic 2005: Reloaded Second Edition Chapter 2 Creating a User Interface.
Understand the Principles of Good Screen Design. Introduction A well-designed screen: Reflects the capabilities, needs, and tasks of its users. Is developed.
Lecture 5(b), Slide 1 CP2030 Copyright © University of Wolverhampton CP2030 Visual Basic for C++ Programmers v Component 5(b) HCI aspects of VB programming.
Creating visually attractive and appealing publications.
Chapter 7 Creating a Newsletter with a Pull-Quote and Graphics
12.1 CSC 123 Systems Analysis & Design Part IV: The Essentials of Design Chapter 12 Designing Effective Input.
Click on the link to answer questions 1-8. View the examples of each element to help you understand each principle. You will have to scroll down to find.
Designing Web Pages Layout and Composition. Defining Good Design Users are pleased by the design but drawn to the content Design should not be a hindrance.
Arrangement of shapes, colors, elements. What makes an effective design? We know:  typography  colors  graphic elements Sometimes we don’t pay the.
Development and Design of Multimedia. Planning Your Title 1)Develop the concept or idea – a multimedia project starts with an idea that supports a vision.
Color Theory in Web Design Web Design – Sec 2-2. Objectives  The student will: –Have a better understanding of effective use of color on the web. –Be.
User Interface Components Lecture # 5 From: interface-elements.html.
Elements & Principles OF ART 8 TH Grade. ELEMENTS PRINCIPLES Line Shape Color Texture Form Value Space Balance Unity Contrast Emphasis Proportion Movement.
Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:
Selection Controls. A selection control presents on the screen used to select possible alternatives, conditions, or choices, or value. The relevant item.
Posters, Magazines, Websites
Windows layout. During the design process, the individual elements, or building blocks, of screens will have been identified. A logical flow of information.
Chapter 16 Designing Effective Input Systems Analysis and Design Kendall and Kendall Fifth Edition.
Web Interface Design Basic GUI and Web layouts Fig H.12: Basic Layouts of Web and Graphic User Interfaces.
Fakultas Informatika ITTelkom -HTT- Organize and Layout Windows and Pages 1.
GUI Controls for Input Design Introduction –Most new applications being developed today include a GUI. This approach is influenced by a new trend in.
Design Principles Design Elements. Elements vs Principles Principles = affect the arrangement of objects within a composition. Elements = the objects.
Principles of Design Balance b b A. Stability of an arrangement 1. Arrangement appears secure and stable 2. Balance must be both visual and actual.
3461 Laying Out Components Principles of Good Screen Design Galitz, W. O., (2002) The Essential Guide to User Interface Design, 2nd Edition, Wiley Computer.
Printed Reports Analysis questions –Who will use the report? –What is the purpose of the report? –When or how often is the report needed? –Where does the.
 Alignment of text and or graphics on a document.  Illustrating the Principles of Design  ciples/l/aa_pod2.htm.
Thoughts on Design. Never Forget Audience and Purpose Just as the text depends on audience and purpose, so does the design Consider the difference in.
Designing Effective Input. Design input forms for users of business systems Design engaging input displays for users of information systems Design useful.
Microsoft Visual Basic 2005: Reloaded Second Edition
Principles of Good Screen Design
Color Theory in Web Design
Chapter 8: Writing Graphical User Interfaces
User Interface Components
Chap 7. Building Java Graphical User Interfaces
Your Poster Title Here Your Name, Other Names… Your University
HUMAN COMPUTER INTERACTION
Presentation Controls
Step-3: Principles of Good Interface and Screen Design
CIS 376 Bruce R. Maxim UM-Dearborn
Understanding Design Elements
Presentation transcript:

Choose the Proper Screen-Based Controls

Operable Controls Buttons Is developed within the physical constraints imposed by the hardware on which it is displayed. Effectively utilizes the capabilities of its controlling software. Achieves the business objectives of the system for which it is designed.

Text Entry/Read-Only Controls Text Boxes

Selection Controls Radio Buttons 426 Check Boxes 435 Palettes 445 List Boxes 450 List View Controls 459 Drop-down/Pop-up List Boxes

Combination Entry/Selection Controls Spin Boxes 465 Combo Boxes 468 Drop-down/Pop-up Combo Boxes 470

Presentation Controls Static Text Fields 487 Group Boxes 488 Column Headings 489 ToolTips 490 Balloon Tips 492 Progress Indicators 494 Sample Box 495 Scrolling Tickers 496

Selecting the Proper Controls Entry versus Selection—A Comparison 496 Comparison of GUI Controls 499 Control Selection Criteria 502 Choosing a Control Form 502 Examples 506

Organizing Screen Elements Clearly and Meaningfully The display elements Must be organized and presented in meaningful and understandable ways. Consistency: Provide real-world consistency. Reflect a person’s experiences, expectations, work conventions, and cultural conventions. Provide internal consistency. (navigational procedures, Visual identity, Component). Follow the same conventions and rules across all related interfaces. Deviate only when there is a clear benefit for the user.

Ordering of Screen Data and Content Divide information into units that are logical, meaningful, and sensible. Organize by the degree interrelationship between data or information. Provide an ordering of screen units of information and elements that is prioritized according to the user’s expectations and needs. Possible ordering schemes include: — Conventional. — Sequence of use. — Frequency of use. — Function. — Importance. — General to specific. Form groups that cover all possibilities. Ensure that comparable information is visible at the same time. Ensure that only information relative to the users tasks is presented on the screen.

Common information ordering schemes Conventional. Sequence of use. Frequency of use. Function or category. Importance. General to specific. Arranged should be design based on the language: Upper-Left Starting Point

Visually Pleasing Composition Provide visually pleasing composition with the following qualities: — Balance. — Symmetry. — Regularity. — Predictability. — Sequentiality. — Economy. — Unity. — Proportion. — Simplicity. — Groupings.

Balance Create screen balance by providing an equal weight of screen elements, left and right, top and bottom.

Symmetry Create symmetry by replicating elements left and right of the screen centerline.

Regularity Create regularity by establishing standard and consistently spaced horizontal and vertical alignment points. Also, use similar element sizes, shapes, colors, and spacing.

Predictability Create predictability by being consistent and following conventional orders or arrangements.

Sequentially Provide sequentially by arranging elements to guide the eye through the screen in an obvious, logical, rhythmic, and efficient manner. The eye tends to be attracted to: — A brighter element before one less bright. — Isolated elements before elements in a group. — Graphics before text. — Color before black and white. — Highly saturated colors before those less saturated. — Dark areas before light areas. — A big element before a small one. — An unusual shape before a usual one. — Big objects before little objects.

Example

Economy Provide economy by using as few styles, display techniques, and colors as possible.

Unity Create unity by: — Using similar sizes, shapes, or colors for related information. — Leaving less space between elements of a screen than the space left at the margins.

Proportion Create windows and groupings of data or text with aesthetically pleasing proportions.

Simplicity (Complexity) Optimize the number of elements on a screen, within limits of clarity. Minimize the alignment points, especially horizontal or columnar. — Provide standard grids of horizontal and vertical lines to position elements.