UNIT-3

SCREEN
DESIGNING

Design goals – Screen planning and purpose, organizing screen

elements, ordering of screen data and content – screen navigation and
flow – Visually pleasing composition – amount of information – focus
and emphasis – presentation information simply and meaningfully –
information retrieval on web – statistical graphics – Technological
consideration in interface design.
HUMAN COMPUTER INTERFACE UNIT-3 DANISH AHMAD KHAN

Screen Design:
 Screen Design describes the design of GUI.
 It includes a wide variety of applications where screens or displays can be
used as part of human computer interaction.
How to Distract the Screen User:
 Unclear captions
 Improper type and graphic emphasis
 Misleading headings
 Irrelevant and unnecessary headings
 Inefficient results
 Clustered and crushed layout
 Poor quality of presentation
 Appearance
 Arrangement
 Visual inconsistency
 Lack of design features
 Over use of 3D presentations
 Overuse of too many bright colors
 Bad typography
What Screen Users wants:
 An orderly clean clutter free appearance
 An obvious indication of what is being shown and what should be done
with it.
 Expected information located where it should be.
 A clear indication
 Plain and simple language
 A clear indication of when an action can make a permanent change in data
What screen Users do:
 Identifies a task to be performed or need to be fulfilled.
 Decides how the task will be completed or need fulfilled.
 Manipulates the computers controls.
 Gathers necessary data.
 Forms judgments resulting in decisions relevant to task.

2
HUMAN COMPUTER INTERFACE UNIT-3 DANISH AHMAD KHAN

Design Goals:
 Reduce visual work
 Reduce intellectual work
 Reduce memory work
 Reduce motor work
 Eliminate and minimize burdens or instructions.
Screen and its Purpose:
 Each screen element (Every control, all text, screen organization, all
attention, each color, every graphic, all screen animation, each message,
all forms of feedback) must have meaning to screen users and serve a
purpose in performing tasks
 If an element doesn’t have meaning, then do not include it in on the screen.
Organizing Screen Element:
 Visual clarity is achieved when the display elements are organized and
presented in meaningful and understandable ways.
 A clear and clean organization makes it easier to recognize screen’s
essential elements and to ignore its secondary information when
appropriate.
 Clarity is influenced by a multitude of factors such as consistency in
design, a visually pleasing composition, a logical and sequential ordering,
the presentation of the proper amount of information, groupings, and
alignment of screen items.
Ordering Of Screen Data & Content:
 Divide information into units that are logical, meaningful and sensible.
 Organize by interrelationships between data or information.
 Provide an ordering of screen units of elements depending on priority.
 Possible ordering schemes include
 Conventional
 Sequence of use
 Frequency of use
 Function
 Importance
 General to specific.
 Form groups that cover all possibilities.
 Ensure that information is visible.

3
HUMAN COMPUTER INTERFACE UNIT-3 DANISH AHMAD KHAN

 Ensure that only information relative to task is presented on screen.

 Organizational scheme is to minimize number of information variables.
 Upper left starting point
 Provide an obvious starting point in the screen’s upper left corner.
Screen Navigation and Flow:
 Provide an ordering of screen information and elements that:
 is rhythmic guiding a person’s eye through display
 encourages natural movement sequences.
 minimizes pointer and eye movement distances.
 Locate the most important and most frequently used elements or controls
at top left.
 Maintain top to bottom, left to right flow.
 assist in navigation through a screen by
 Aligning elements
 Grouping elements
 Use of line borders
 Through focus and emphasis, sequentially, direct attention to items that are
 Critical
 Important
 Secondary
 Peripheral
 Tab through window in logical order of displayed information.
 locate command button at the end of the tabbing order sequence,
 when groups of related information must be broken and displayed on
separate screens, provide breaks at logical or natural points in the
information flow.
 In establishing eye movement through a screen, also consider that the eye
trends to move sequentially, for example –
 From dark areas to light areas
 From big objects to little objects
 From unusual shapes to common shapes.
 From highly saturated colors to unsaturated colors.
 These techniques can be initially used o focus a person’s attention
 Maintain top to bottom, left to right throgh the screen. This top to bottom
orientation is recommended for information entry for the following reasons
 Eye movements between items will be shorter.
 Control movements between items will be shorter.

4
HUMAN COMPUTER INTERFACE UNIT-3 DANISH AHMAD KHAN

 Groupings are more obvious perceptually.

When one’s eyes moves away from the screen and then back, it returns
to about same place it left, even if it is seeking next item in sequence
 Most product style guides recommend a left to right orientation.
 Our earliest display screens reflected this left to right entry orientation.
 Top to bottom orientation is also recommended for presenting displays of
read only information that must be scanned.
Visually Pleasing Composition:
 Provide visually pleasing composition with the following qualities.
 Balance

 Symmetry

 Regularity

5
HUMAN COMPUTER INTERFACE UNIT-3 DANISH AHMAD KHAN

 Predictability

 Sequentially
o The eye trends 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

6
HUMAN COMPUTER INTERFACE UNIT-3 DANISH AHMAD KHAN

 Economy

 Unity

7
HUMAN COMPUTER INTERFACE UNIT-3 DANISH AHMAD KHAN

 Proportion

 Simplicity

 Groupings.

8
HUMAN COMPUTER INTERFACE UNIT-3 DANISH AHMAD KHAN

Grouping Using Borders:

 Provide functional groupings
 Create spatial groupings
 Provide meaningful titles for each grouping
 Incorporate line borders
 Do not exceed three-line thick ness
 Create lines consistent in height and length
 For adjacent groupings with borders where ever possible
 Use rules and borders sparingly
Focus And Emphasis:
 Visually emphasize the most prominent element Central idea or focal point
Deemphasize less important elements to ensure that too many screen
elements are emphasized.
 Screen clutter Using too many emphasize techniques to provide emphasis
use techniques such as:
o Higher brightness
o Reverse polarity
o Larger and distinctive font
o Underlining
o Blinking
o Line rulings
o Contrasting colors
o Larger size
o Positioning
o Isolation
o Distinctiveness
o White space
Information Retrieval on Web:
 The most sought-after web commodity is content.
 Behaviour is often goal driven.
 Reading is no longer a linear activity.
 Impatience.
 Frequent switching of purpose.
 Web users access site for different reasons: a focused search for a piece of
information or an answer less focused for browsing or surf.

9
HUMAN COMPUTER INTERFACE UNIT-3 DANISH AHMAD KHAN

 High tech capabilities, fancy graphics do not compensable for inefficient

or poor content.
 Initial focus on attention
 Page perusal
 Scanning guidelines
 Browsing
 Browsing guidelines
 Searching
 Problems with search facilities
 Search facility guidelines
 Express the search
 Progressive search refinement
 Launch the search
 Present meaningful results
Scanning Guidelines:
 Organization:
 Minimize eye movement
 Provide groupings of information
 Organize content in a logical and obvious way.
 Writing:
 Provide meaningful headings and subheadings.
 Provide meaningful titles
 Concisely write the text.
 Use bullets/ numbers
 Array information in tables
 Presentation:
 Key information in words or phrases
 Important concepts
Browsing Guidelines:
 Facilitate scanning
 Provide multiple layers of structure
 Make navigation easy
 Respect users desire to leave
 Upon returning help users reorient themselves.
 Users can browse deeply or simply move on.
 Provide guidance to help reorientation

10
HUMAN COMPUTER INTERFACE UNIT-3 DANISH AHMAD KHAN

 Understand terms to minimize to need for users to switch context.

Problems With Searching:
 Not understanding the user.
 Difficulties in formulating the search.
 Difficulties in presenting meaningful results.
 Identify the level of expertise of user.
Know The Search User:
 Plan for user’s switching purposes during search process.
 Plan for flexibility in the search process.
 Anticipate
 Nature of every possible query
 Kind of information desired
 How much information will result the search.
Statistical Graphics:
 A statistical graphic is data presented in a graphical format.
 A well-designed statistical graphic also referred to as chart or graph.
 Use of statistical graphics reserve for material that is rich, complex or
difficult.
 Data Presentation
 emphasize the data
 Minimize non data elements
 Minimize redundant data
 Fill the graph’s available area with data.
 Show data variation
 Provide proper context for data interpretation
 Scales and shading
 place ticks to marks scales on the outside edge of each axis.
 employ a linear scale.
 mark scales at standard or customary intervals
 Start a numeric scale at zero.
 display only a single scale on axis.
 provide aids for scale interpretation.
 clearly label each axis.
 Provide scaling consistency
 consider duplicate axis for large scale data.

11
 HUMAN COMPUTER INTERFACE UNIT-3 DANISH AHMAD KHAN

 Proportion
 Lines
 Labelling
 Title
 Interpretation of numbers
Types of statistical graphs:
 curve and line graphs
 Single graph
o Four or five maximums
o Label identification
o Legend
o Tightly packed curves
o Important or critical data
o Comparing actual and projected data
o Data differences
 Surface charts
o Ordering
o Coding schemes
o Labels
 Scatter plots
o two dimensions
o Consistent intervals
o multiple data sets
o Significant points
 Bar graphs
o consistent orientation
o Meaningful organization
o Bar spacing
o Differentiation
o Important or critical data
o Related bar ordering
o Reference index
o Labelling
 Segmented or stacked bars.
o Data category ordering
o Large segments
o Coding schemes
o Labelling

12
HUMAN COMPUTER INTERFACE UNIT-3 DANISH AHMAD KHAN

 Flow charts
o Order of steps
o Orientation
o Coding conventions
o Arrows
o Highlighting
o One decision at each step
o Consistently order and word all choices
 Pie chart
Technological Consideration -Interface Design:
Graphical systems
 Screen design must be compatible with the capabilities of the system
 system power
 Screen size
 Screen resolution
 Display colors
 Other display features
 Screen design must be compatible with the capabilities of the
 Platform compatibility
 development and implementation
 Platform style guide
 Browser
 Compatibility
 monitor size and resolution
 fonts
 Color
 Bandwidth
 Version
 other considerations
 Downloading
 Currency
 Page printing
 Maintainability

13