Scribd
Upload
9 views

Step 13

The document provides guidelines for organizing and laying out windows, pages, and web pages. It discusses general principles like using logical sequences and minimizing movements. It also provides specific guidelines for elements like controls, groups, sections, and navigation.

Uploaded by

Jayraj Menon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
9 views

Step 13

The document provides guidelines for organizing and laying out windows, pages, and web pages. It discusses general principles like using logical sequences and minimizing movements. It also provides specific guidelines for elements like controls, groups, sections, and navigation.

Uploaded by

Jayraj Menon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 42

ORGANIZE & LAYOUT

WINDOWS & PAGES


GENERAL GUIDELINES
 Amount of information
◦ Not too less, not too much

 Organizaton
◦ Logical, sequential, rhythmic
◦ Minimizes pointer-eye movement

 Control Placement
◦ Most frequently used and important on top-left
◦ Top-to-bottom & left-to-right flow
◦ Command buttons at the bottom

 Navigation
◦ Minimal cursor & pointer travel
◦ Minimize no. of times hand travels between keyboard & mouse
 Aesthetics
◦ Visually pleasing composition using white-space,
balance, groupings, element alignment

 Visual Clutter
◦ Avoid visual clutter by low screen density,
distinctiveness of elements

 Focus and emphasis


◦ Importance to important screen elements, data,
information

 Consistency
ORGANIZATIONAL GUIDELINES

Creating Groupings
 Provide groupings of associated elements
 Adequate separation of groupings by using

white space (eg: around groupings, between


grouping and borders)
 Provide section/ sub-section headings
 Enhance groupings by incorporating borders
Borders
 Control borders

◦ Thin single-line border around elements of selected


control
◦ Leave one line space above and below elements for
vertical spacing
◦ For horizontal spacing,
 Leave 2 character positions between border & left side
of element
 Leave 2 character position between border & right side
of longest element
◦ Caption at upper left of box
 Section borders

◦ Thick single line boundary around groups of related


entry or selected controls
◦ Section caption in the top border indented 2
character positions from the left
◦ For vertical spacing, one line space between top
and bottom row of the elements
◦ For horizontal spacing, 4 character positions to the
left and right of longest entry
Dependent Controls
 Conditional controls to the right of or below
the control to which it relates
 Conditional controls may either be displayed
in a grayed out manner or kept invisible till
the information it relates to is set
 Use an arrow between the selected and its

dependent control
Aligning Screen Elements
Minimize alignment points on a window.
-- Vertically.
-- Horizontally.

It helps reduce the complexity and also is


more aesthetically pleasing.

Eye and pointer movement obvious and


reduce distance between them.
• Radio buttons/check boxes:
— Left-align choice descriptions
Text boxes:
— Left-align the boxes.
— Captions may be left- or right-
aligned.
 Elements and information should be
organized vertically (top to bottom) as well.
 Two, and sometimes three, columns of

controls and fields may occasionally be


created.
 When multiple columns are presented and no

section borders are used, column separation


and downward flow may be emphasized
through line borders.
Multicolumn controls with a separation
border.
Horizontal Orientation and Vertical Alignment

Radio buttons/check boxes selection


controls:
— Align leftmost radio buttons and/or
check boxes.
— Field captions may be left- or right-
aligned.
Horizontal alignment
Section Alinment
Balancing Elements
Create balance by:
• Equally distributing controls, spatially, within
a window.
• Aligning borders whenever possible.
Individual control border
 More than one control with a border is
incorporated within a column on a screen
 With multiple groupings and multiple
columns
Section borders:
— If more than one section with borders is
incorporated within a column on screen:
• Align the left and right borders of all groups.
• Establish the left and right border positions
according to the spacing required by the
widest element within the groups.
Control Navigation
 Tab/arrow keys:
-- Tab to move between operable window
controls, in the logical order
 Radio buttons:

-- Use arrow keys to move through radio


buttons within a single control.
 Check boxes:
--Use the Tab key to move between, when they
are independent controls.
-- Within a border or group box, use arrow keys
to move between the check boxes
 Keyboard equivalents:

--Use keyboard equivalents (mnemonics) for


direct access to each control, whenever
possible.
-- Mnemonic designations must be unique
within a window.
Window Guidelines
Organization:
— Organize windows to support user tasks.
— Present related information in a single
window whenever possible.
— Support the most common tasks in the most
efficient sequence of steps.
 Use:
o Primary windows to:

— Begin an interaction and provide top-level


context for dependent windows.
— Perform a major interaction.
o Secondary windows to:

— Extend the interaction.


— Obtain or display supplemental information
related to the primary window.
o Dialog boxes for:

— Infrequently used or needed information.


— “Nice-to-know” information.
 Size:
— Provide large enough windows to:
o Present all relevant and expected information

for the task.


o Not hide important information.
o Not cause crowding or visual confusion.
o Minimize the need for scrolling.
o Less than the full size of the entire screen.
Number:
— Minimize the number of windows needed to
accomplish an objective.

 If a window is too large, determine:


o Is all the information needed?
o Is all the information related?
WEB PAGE GUIDELINES

PAGE LAYOUT
 General:
Provide layout that is-
-Efficient
-Logical
-Consistent
-Self-explanatory
Strike a proper balance between
-Text
-Graphics
-Links
 Layout grid
 Elements:
Not more than seven
 Size:
Page length
Page breaks
Horizontal scrolling
 Organization:
Locating information
 Positioning elements
Reducing complexity
 Formatting:
White spaces
Length of textual lines
Horizontal spacing

 Multiple Audiences:
Provide information formatted for each audience

 Platforms:
Design for different platforms and screens
 Specify an image-safe area
 Frames:
Use frames with caution
Consider them for global elements

 Fixed versus fluid layout:


Use a fluid layout

 Change:
Change the site and page organization and
structure only when significant benefits exist
Layout Grid
HOME PAGE
 Limit to one screen
 Identify content and purpose
 Elements to include:
• Masthead, name or logo of Web site owner and tagline
• Web site name
• Brief description of Web site
• Summary of the key informational content
• Navigation links to major sections
• Site overview or map
• Summary of the latest news or promotions
• Search facility

You might also like