Chapter 4

Screen Design

Mrs. Ashwini Patil

WHAT IS SCREEN DESIGN?

• Screen design refers to the graphic design and layout of user interfaces on displays
• Screen design includes a wide variety of applications where screens or displays can
be used as part of human-machine interaction
• Screen design is not only used for websites, mobile websites or apps for smartphones,
but also in many other applications or devices which have user interaction on different
screen sizes
Important factors it include,
 how much information is presented
 how the information is organized,
 what language is used to communicate to the user
 how distinctly the components are displayed
 what aesthetics are used
 how consistent a screen or page is with other screens or pages.
POOR DESIGN

 Poor information readability

 Confusing and inefficient navigation
 Design inconsistency
 Incomprehensible screen components
 Overuse of too many bright colors
 Information overload
 Outdated information
 Poorly designed icons
 Visual inconsistency in screen
 Not-responsive design

WHAT SCREEN USERS WANT

• 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 of what relates to what.
• Plain and simple language
• A clear indication of when an action can make a permanent change in data
DESIGN GOALS OF SCREEN DESIGN

• Reduce visual work

• Reduce intellectual work
• Reduce memory work
• Reduce mentor work
• Eliminate burdens or instructions.
SCREEN PLANNING AND PURPOSE
■ Each element
■ Every control
■ All text
■ The screen organization
■ All emphasis
■ Each color
■ Every graphic
All screen animation
■ Each message
■ All forms of feedback
■ Must
— Have meaning to users.
— Serve a purpose in performing tasks
SCREEN PLANNING AND PURPOSE
Signal and Noise:
Noise is useless information. Signals are useful information

The objective in design is to minimize noise and maximize signals. Present

information efficiently, simply, clearly, concisely, and appropriately. Remove
all unnecessary elements.

So need to Organizing Elements Clearly and Meaningfully

SCREEN PLANNING AND PURPOSE
Organizing Elements Clearly and Meaningfully
Clarity is influenced by a multitude of factors:
 Consistency in design
 A visually pleasing composition
 A logical and sequential ordering
 The presentation of the proper amount of information
 The groupings, and alignment of screen items.
 ORDERING OF SCREEN DATA AND CONTENT
 Divide information into units those are logical, meaningful, and sensible
 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 information that must be compared is visible at the same time
 Ensure that only information relative to the users tasks or needs is presented on the screen
 An organizational scheme’s goal is to keep to a minimum the number of information
 Provide an obvious starting point in the screen’s upper-left corner.
 ORDERING OF SCREEN DATA AND CONTENT
Ordering Web Pages:
■ Establish levels of importance: Establish a high to low level of importance for items of
information to appear on the Web site.
■ Place critical information near the top of the Web site.: Critical information should
be placed as near to the top of the Web site as possible for visibility purpose
■ Place important items at the top of a page.: All important information should be placed high
on the page so it can be quickly found.
■ Organize information clearly. : Provide a clear and logical organizational structure that
reflects the user’s needs
■ Place important items consistently.: Provide consistency in item location throughout all Web
pages.
■ Facilitate scanning.: Desired information can be easily found
■ Structure for easy comparison.: Pages should be structured for easy comparison of
important related components.
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 f
 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
 SCREEN NAVIGATION AND FLOW
When groups of related information must be broken and displayed on separate screens, provide breaks at
logical 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 to focus a person’s attention.
• Maintain top to bottom, left to right through 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.
 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.
VISUALLY PLEASING COMPOSITION

Provide visually pleasing composition with the following qualities

 Balance
 Symmetry
 Regularity
 Predictability
 Sequentiality
 Economy
 Unity
 Proportion
 Simplicity
 Groupings
VISUALLY PLEASING COMPOSITION
 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.
VISUALLY PLEASING COMPOSITION
 Regularity: Create regularity by using consistently spaced column and row starting points for
widgets. Also use elements similar in size shape, color and spacing.

 Predictability: Create predictability by being consistent and following conventional orders or

arrangements.
VISUALLY PLEASING COMPOSITION
 Sequentiality: Provide sequentiality by arranging elements to guide the eye through the screen in
an obvious, logical, rhythmic, and efficient manner.

 Economy: Provide economy by using as few styles, display techniques, and colors as possible.
 VISUALLY PLEASING COMPOSITION
 Unity: Create unity by using similar sizes, shapes, or colors for related information. Also by leaving
less space between elements of a screen than the space left in the margins.

 Proportion: Create windows and groupings of data or text with aesthetically pleasing proportions.
 Simplicity: Optimize the number of elements on a screen, within the limits of clarity. Minimize the
alignment points, especially horizontal and vertical.
 VISUALLY PLEASING COMPOSITION
 Groupings: GROUPING USING BORDERS
• Provide functional groupings
• Create spatial groupings
• Provide meaningful titles for each grouping
• Incorporate line borders
• Do not exceed three-line thickness
• Create lines consistent in height and length
• For adjacent groupings with borders wherever possible
• Use rules and borders sparingly
 FOCUS AND EMPHASIS
To provide emphasis use techniques such as:
Visually emphasize the:  Higher brightness.
 Most prominent element.  Reverse polarity or inverse video.
 Most important elements.  Larger and distinctive font.
 Central idea or focal point.  Underlining.
 Blinking.
 Line rulings and surrounding boxes or frames.
 Contrasting color.
In Web page design:  Larger size.
 Call attention to new or changed content.  Positioning.
 Ensure that page text is not overwhelmed  Isolation.
by page background.  Distinctive or unusual shape.
 White space.
 FOCUS AND EMPHASIS

Presenting Information Simply and Meaningfully:

Provide legibility(सुवाच्यता)
 Information is noticeable and distinguishable.
Provide readability.
 Information is identifiable, interpretable, and attractive.
Present information in usable form.
 Translations, transpositions, and references to documentation should not be required to interpret
and understand information.
Utilize contrasting display features.
 To attract and call attention to different screen elements.
Create visual lines.
 Implicit and explicit, to guide the eye.
Be consistent.
 In appearance and procedural usage.
FOCUS AND EMPHASIS

Typography:
 Font Types and Families
 Font Size
 Font Styles and Weight
 Font Case
 FOCUS AND EMPHASIS
Control Captions/Data Fields
1) Control Caption/Data Field Justification
First Approach
- Left-justify both captions and data fields.
- Leave one space between the longest caption and
the data field column.

Second Approach
- Left-justify data fields and right-justify captions to
data fields.
- Leave one space between each.
 FOCUS AND EMPHASIS

Control Section Heading:

Provide a meaningful heading that clearly describes the relationship of the grouped
controls.

Headings may be located within a border

Locate section headings above their
surrounding a grouping, justified to the upper-
related screen controls
left corner.
 FOCUS AND EMPHASIS

Data Representation
Provide visual emphasis to the data.
Give the data a meaningful structure.
- Spell out any codes in full.
- Include natural splits or predefined breaks in displaying data.
 FOCUS AND EMPHASIS

Data Display
Consider not displaying data whose values are none, zero, or blank

Consider creating “data statements,” in which the caption and data are combined
 FOCUS AND EMPHASIS

Data Justification
Left-justify text and alphanumeric formats.

Right-justify lists of numeric data

INFORMATION RETRIEVAL

 Systems should aim to get people closer to the information they need
 Systems should support tuning by end users and especially by information
professionals who add value to information resources
 Systems should have flexible architectures so they may evolve and adapt to
increasingly more demanding and knowledgeable installed bases of users over time.
 Systems should be engaging and fun to use.
 IR is finding material, documents that satisfy the information need within larger
collection

GUI for effective document retrieval should:

a) provide informative and explanatory feedback to user;
b) capture user selective relevance feedback;
c) provide functionalities for both novice and expert users.
 INFORMATION RETRIEVAL
 User Interface Techniques for IR
During the user interface design process, the primary focus is on who the users are and what the tasks are.
The main role of the system is to support user in their tasks
1) Query Formulation and Query Reformulation
search engines – Keyword Based.
Most search engines support query reformulation features such as: spelling suggestions, spelling
corrections, and automatic query term reformulation
2) Browsing
Traditional user interfaces of information retrieval systems have been geared toward analytical searching
rather than browsing
Browsing involves broad query terms and scanning in a relatively unstructured manner. larger sets of
information
3) Faceted Search and Navigation
Faceted Search decide how they will move from a category to its subcategories, and at the same time decide
the order in which the categories are presented
Faceted navigation guides users by showing them available categories without requiring them to browse
through hierarchies that may not suit their needs or way of thinking
 INFORMATION RETRIEVAL
 User Interface Techniques for IR
4) Lookahead :some web applications automatically complete query terms and suggest popular searches

5) Relevance Feedback : Relevance feedback enables users to guide an IR system by indicating whether
they consider particular results to be more or less relevant. Relevance feedback modifies an existing query.
6) Summarization, Analytics and Visual Presentation
Summarization can be considered to encompass any means of aggregating or compressing the query results
into a form that is less likely to lead to information overload on the part of the user
The representation of summarization or analytics can be presented using appropriate information
visualization techniques.