Differences Between Good and Bad Interface Design

There are not a few UI design principles on the web, but the top golden rules for UI design will be the 4E’
in the following. Also, this can be the standard to judge whether it’s a good UI design:
- Error-free.
- Easy to use.
- Easy to understand.
- Effective for the end goal or product.
Graphical user interface

User interfaces nothing but collection of interacting objects these object communicate with user.
Example for objects:- Radio Buttons , Check Boxes , Text field, Buttons ,capcha ……
Properties of objects

Object need to interact or heard or felt and easily understand by the user.
Object not dependent on another objects.
Different objects need to show different functionality.
Objects operating means we can give input data to objects and objects can hold and send to another page to that data
also need to save that data.

Example :- Registration page

Popularity/Popular of graphics (popularity means liked by many people)

A Older screens not have effective interaction with user
Older text-based screen have
 One dimensional look
 Text oriented form.
Older text-based screen are replaced by new popular screens
New screens have
Three dimensional appearance on graphical screen look text oriented form.

1. Graphic screens assumed a three-dimensional look.

2. Controls appeared to rise above the screen and move when activated.
3. Information could appear, and disappear, as needed.
4. Text could be replaced by graphical images called icons.
5. These icons could represent objects or actions
6. Selection fields such as radio but-tons, check boxes, list boxes, and palettes coexisted with the
7. More sufficient textarea entry fields with attached or drop-down menus of.
8. Objects and actions were selected through use of pointing mechanisms.
 9. Increased computer power .
10. User's actions to be reacted to quickly, dynamically, and meaningfully.

Concept of Direct manipulation interface

Direct manipulation is a human–computer interaction style
Which involves continuous representation of objects with rapid, reversible, and incremental actions and feedback. 

Example is dragging a file from a folder to another one in order to move it.

In command-line interfaces, the user must remember the file names & location for a desired action, and type it in
together with the names for the objects of the action.
Direct-manipulation is resizing a graphical shape, such as a rectangle, by dragging its corners or edges with a mouse. ...
For example, direct manipulation concepts can be useful to interfaces for blind or vision-impaired users, using a
combination of tactile and sonic devices and software.

Continuous View of Objects and Actions

Objects are seen continuously.
The prompt of actions to be actions are to performed by the user.
Commands are changed into easier labeled buttons.

Fast Increasing Actions Producing Visual Rsults

Results are not planed.
But they are instantly shown on the screen.

Reverse of incremental Actions

Incorrect or undesired actions can be simple undone.

Graphical System
The graphical system provides interface
That allows users to interact with electronic devices
Through graphical icons and audio indicator such as primary notation, instead of text-based user interfaces,
typed command labels or text navigation.

Graphical user interface plays an important role in computing.

Whether it is a mobile app or any electronic or mechanical device we use, we see GUI (Graphical User
Interface) all over in our daily life.
If you use operating system then you may get alert window opens up on any error or for notification which is a
type of user interface.

Advantages of graphical system:-

Easiness for non-technical people:-

 For non-technical people or for beginners good GUI’s make easiness.

  For example with few clicks on buttons user can easily make his work done.
 Software in shops for calculation of products sold and inventory can be managed by an even non-technical guy.
 Similarly listening songs in the car is easy for everyone.

Drag and drop feature:-

 In most of the software, we have drag and drop functionality by which complex tasks are managed easily.
 Like dragging and dropping folders.
 And in mobile games, it is also nice to use.
 In much graphical software, drag and drop are awesome.

Looks nicer than text interface:-

 In text interface, we have limited options to choose from and navigation is difficult.
 For non-educated people, text interface is difficult to understand and use.
 In GUI user can use any tool by detecting symbols or buttons.

Hotkeys usage:-

(Hot keys are sometimes called shortcut keys. Hot keys are supported by many operating system and applications.
hot key is a key or a combination of keys on a computer keyboard )
 Sometimes we want a multiple functionality performed by single click then we use hotkeys.
 Like we see some buttons or mouse clicks/movements by which a couple of actions performed.
 This is very handy for speeding up tasks.

User-friendly:-

 A user can easily navigate to the system without knowing a lot of details.
 Easy setup and ready to start working are awesome.
 Most of the software hides the complexity of actions from the users and display only required information is
key to good interface.
Disabled people:-
In modern science, we can detect eyes movement and finger movement which is helpful for disabled people.
Now, most of the software use this functionality to make life easier for disabled people.
They can use software and websites easily with a few actions

Disadvantages of graphical user interface:-

Difficult to develop and high cost:-

Nice looking designs are difficult to make and may also cost extra hardware support.
Like high-quality games consume a lot of device space and memory and it also required very skilled people to develop.
Slower than command line tools:-
In command line tools like MS dos, we perform some commands which do the work quickly.
But if we do the same task in GUI then it takes extra time to complete the task.
 Extra attention required:-
If we are driving a car then controlling music/radio in the car requires attention which makes our driving disturbed.
Using flat screen:-
Some graphical things do not display accurately on flat screens.
This makes the limitation of GUI.
Time consumption:-
It takes a lot of time to develop and design a good looking interface.
If some bad interface builds then it makes difficult for the user to understand and use.
Memory resources:-
I see a lot of good GUI’s consuming lot of memory resources which make system/device slow to perform.
Implementation:-
Testing and implementation take a lot of time. Like we may require extra software for running GUI’s
Examples of GUI:-
Microsoft Windows, Mac OS

Interaction styles/types
The method by which the user and a computer system communicate with one another
- Command line
- Menu selection
- Form fill-in
- Direct manipulation
Anthropomorphic

Command line Menu selection

Form fill-in Direct Manipulation

Anthropomorphic  Spoken natural language

Hand gestures
Characteristics of good graphical user interface:
Characteristic Description

Windows Multiple windows allow different information to be displayed simultaneously on the user's screen.

Icons Usually icons represent files (including folders and applications), but they may also stand for processes
(e.g., printer drivers).

Menus Menus bundle and organize commands (eliminating the need for a command language).

Pointing A pointing device such as a mouse is used for command choices from a menu or indicating items of
interest in a window.

Graphical Graphical elements can be commands on the same display.

Advanced visual presentation

A visual presentation gives an idea about content to be seen on the interface by the user.
The graphical system is advanced characteristics by adding following feature.
1) Possibility of displaying more than 16 million colors.
2) Animation & representation of photographs & motion colors.
3) Graphical System provides meaningful visual elements
I. Windows(Primary,secondary or dialog boxes)
II. Menus(Menu bar, pull down, pop-up, cascading)
III. Files arevdenoted by icons
IV. Assorted screen based controls(text boxes, list boxes, combination boxes, settings sacroll bars and buttons).

What is “Web User Interface”

1. A Web refers to a pool of information where user can access unlimited amount of data by useing of web interfaces.
2. Designing web interface for presenting the data in much understandable way which is easily accessible to user.
3. Menus ,Content ,Linked documents or graphics give a correct interface design which makes easier for user to view
the information and for analysis it.

2nd UNIT
Design Process
Before designing, designer need to focus on below areas.
1. Understand Obstacles (difficulties) and pitfalls (unsuspected difficulties) in development path.
2. In designing nobody ever gets it right for the first time.
3. Development is chock (strangle) full of surprises.
4. Good design requires so many changes.
5. Designers need good tools.
6. Goal is “Good design”.
7. People may make mistakes while using a good system also
8. Common pitfalls (difficulties)
9. No early analysis and understanding the user’s needs and expectations.
10. Need to focus on design features or components.
11. Avoid Poor communication with client.
12. Common usability problems
13. Avoid Ambiguous (confusion) menus and icons.
14. Languages that permit only single direction movement through a system.
15. Input and direct manipulation limits.
16. Avoid Complex linkage in design.
17. Need to give option to user for enough feedback.
18. Need of design assumetion.
19. Inadequate error messages.( Need to show perfect error messages for wrong inputs)
20. Avoid Irritating characters
21. Need visual order.
22. Impaired information readability
23. Incomprehensible components
24. Annoying distractions.
25. Avoid Confusing navigation.
26. Avoid inefficient operations
27. Avoid inefficient page scrolling.
28. Avoid Information overload
29. Estimate Design team
30. Estimate Development
31. Human factors
32. Visual Design
33. Usability assessment
34. Give training through Documentation/ Training

Human interaction with computers

Designer need to understand “How People Interact with Computers”
Characteristics of computer systems, past and present, that have caused, and are causing, people problems.
We will then look at the effect these problems have -
 Why people have trouble with computers
 Responses to poor design
 People and their tasks
Human Characteristics & considaration:-
Perception = The ability to see/ hear, or
Aware or getting knowledge of something through the senses from environment.
  Perception means awareness/ understanding objects from environment
Through the physical sensation of our various senses, including sight, sound, smell.

Other perceptual characteristics include the following:

(a)Proximity. (Means relationship between two things)
Proximity= relationship/ work together
Humans have this proximity character our eyes and mind see objects as belonging
together.
What eyes can see mind also sense.

(b)Similarity :- Our eyes and mind see objects as belonging together if they share a
common visual property, such as color, size, shape, brightness, or orientation.

(c)Matching patterns:-
Human respond similarly to the same shape in different sizes.
The letters of the alphabet, for example, possess the same meaning, regardless of
physical size.
 Human can see and easier to remember object based on shape.
 (d)Closure:-
If something does not quite close itself, such as a circle, square, triangle, or word, we
see it as closed anyway.
(e) Unity:- Objects that are all in single shapes then human can identified this looks
like a group. 

Balance:- Human desire stable viewing environment. Vertical,

horizontal, are the most visually satisfying and easiest to look.

 Expectation:- (hoping for something)

Expectations influenced perception.
Context:- Context, environment, and surroundings also influence individual perception.

Human Interaction Speeds

Human use various communication methods to communicate with computer.
After number of researches.
Human interaction speed varies from one user to another user.
The following, are summarized as table below.
Reading   Speed of Human reading capability and average reading time is different from one to another.
 Human can reading text on paper: 200 words per minute.
Reading text on a monitor: 180 words per minute.
Human can speak text: 250–300 words per minute.
Listening:150–160 words per minute.
Speaking to a computer: 105 words per minute.
After recognition corrections: 25 words per minute.
Keying Typewriter        
Fast typist:          150 words per minute and higher.
 Average typist:   60–70 words per minute.
Computer
Arranging words :33 words per minute.
Composition:19 words per minute.
Two finger typists
Memorized text:  37 words per minute.
Copying text:      27 words per minute.
Two-finger typists, sometimes also referred to as "hunt and peck" typists

Hand printing
Memorized text:  31 words per minute.
Copying text:      22 words per minute.

Understanding Business Junctions:-

If you want Methods for Gaining an Understanding of Users
1. The following kinds of techniques to gain an understanding of users, tasks and needs, the organization where
they work, and the environment where the system may be used.
2. Visit user locations, particularly if they are unfamiliar to you, to gain an understanding of the user’s work
environment.
3. Talk with users about their problems, difficulties, wishes, and what works well now. Establish direct contact;
4. Avoid mediators.
5. Observe users working or performing a task to see what they do, their difficulties, and their problems.
6. Users working or performing a task to illustrate and study problems and difficulties.
7. Learn about the work organization where the system may be installed.
8. Understanding users think & uncover details that may not otherwise be solicited (asking/ try to know something).
9. Try the job yourself. It may expose difficulties that are not known, or expressed, by users.
10. Prepare surveys and questionnaires to obtain sample of user opinions.
11. Establish target goals to give in the application
12. What progress has been made and what is still required.

Human Consideration in Design:-

 Human consideration in Design means.
 Before design we need to analyze about human capability.
 And how user can understand & work with our application.
User Knowledge & Experience
Before design we have to consider the user knowledge & experience.
Designing interface depends on User Knowledge & Experience.
We have to consider/analyze the fallowing things before design.
1) User’s System literacy.
2) User’s Computer experience for all levels in application.
3) Similar application experience.
4) User’s Job experience.
5) Usage of other system.
6) Educational level.
7) Reading Level.
8) Typing Skill.
9) Native language and civilization.

System literacy:-
 System literacy is the knowledge and ability to use computer & technology efficient.
 Computer literacy can also refer to the comfort level someone has with using computer programs.
 System literacy is about knowing how computer work & operate.
 A highly technical user such as a programmer is highly experienced.
 A moderate user is comparatively less experienced than an expert.
 A new user who is facility to only the basic computer terms & concepts is least experienced.
System Experience:-
Experience nothing but knowledge.
Humans have 3 types of System Experiences.
 High Experience,
 Moderate
 Low knowledge of a particular system and its methods of interaction.
 knowledge of similar systems.
Task Experience - Other Level of knowledge of job and job tasks.
Systems Use - Frequent or infrequent use of other systems in doing job.
Education - High school, college, or advanced degree.
Application Experience - High, moderate, or low
Reading Level - Less than 5th grade, 5th-12th, more than 12th
grade
Typing Skill –
Expert Skill (135 Words Per Minute),
Skilled Skill (90 Words Per Minute),
Good Skill (55 Words Per Minute),
Average Skill (40 Words Per Minute),
Hunt and Peck Skill (10 Words Per Minute)
Native Language or Culture:-
English, another, or several.

Consider JOB/TASK/NEED
Before design we need to consider/analysis application is for JOB/TASK/NEED & below points.
 Type of System Use -Mandatory or non-mandatory use of the system.
  Frequency of Use -Continual, frequent, occasional, or once-in-a- lifetime use of system
 Task or Need importance - High, moderate, or low importance of the task being performed
 Task Structure - Repetitiveness or predictability of tasks being automated, high, moderate, or low
 Social Interactions - Verbal communication with another person required or not required
 Primary Training - Extensive or formal training, self-training through manuals, or no training
 Turnover Rate - High, moderate, or low turnover rate for jobholders
 Job Category- Executive, manager, professional, secretary, clerk
 Lifestyle - For Web e-commerce systems, includes hobbies, recreational pursuits, and economic status

Consider PSYCHOLOCICAL CHRACTERISTICS:

Attitude - Positive, neutral, or negative feeling toward job.
Motivation - Low, moderate, or high due to interest or fear.
Patience - Patience or impatience expected in accomplishing goal
Expectations - Kinds and reasonableness
Stress Level - High, some, or no stress generally resulting from task performance.
Cognitive Style - Verbal or spatial, analytic or intuitive, concrete or abstract.
Age- Young middle aged or elderly
Gender- Male or Female
Handness- Left, right or ambidextrous
Disabilities- Blind, defective vision, deafness, handicap.

Understand the Business Function:

1. Business definition and requirements analysis 2. Determining basic business functions

 Direct methods  Developing conceptual modes
 Indirect methods  Understanding mental models
 Requirements collection guidelines  User’s new mental model

3. Design standards or style guides 4. System training and documentation

 Value of standards and guidelines  Training
 Document design  Documentation
 Design support and implementation

DIRECT METHODS
 Individual Face-to-Face Interview
 Telephone Interview or Survey
 Traditional Focus Group
 Facilitated Team Workshop
 Observational Field Study
 User-Interface Prototyping Card Sorting for Web Sites
 Usability Laboratory Testing Using cards & show on dashboard
 Card Sorting for Web Sites
 A technique to establish groupings of information for Web sites

INDIRECT METHODS
Interact with user using
 Paper Surveyor using some question paper to user.
 Electronic Surveyor using some question paper to user
 Electronic Focus Group
  Marketing and Sales
 Support Line
 E-Mail or Bulletin Board
 Competitor Analyses
 System Testing

Determining Basic Business Functions

Basic business functions means, Determine what is basic input & what is basic output in our application.
And Major system functions are listed and described, including critical system inputs and outputs.
A flow-chart of major functions is developed.
The process the developer will use is summarized as follows:
Complete understanding of the user's mental model based upon:
 Understand what is user's needs and the user's profile?
 Understand user task analysis?

Understanding the User's Mental Model

 A mental model is nothing but understanding of something about client.

 This phase in interface design is to describe user’s current tasks.
 Understand the user requirements.

Performing a Task Analysis

User’s Task Analysis means get awareness about user activities.
In task analysis
Divide user's activities to the individual task level.
Identified major work goals;
Prepare complete description of all user tasks.
And review on user activities
Prepare list of the user's current tasks.

UNDERSTAND THE BUSINESS FUNCTION

• Business definition and requirements analysis
Direct methods
Indirect methods
Requirements collection guidelines
• Determining basic business functions
Developing conceptual modes
Understanding mental models
Users new mental model
• Design standards or style guides
Value of standards and guidelines
Document design
Design support and implementation
• System training and documentation
Training
Documentation
 Screen designing
Avoid the fallowing things in screen design.

1. Unclear captions
2. Improper type and graphic emphasis
3. Misleading headings
4. Irrelevant and unnecessary headings
5. Inefficient results
6. Clustered and cramped layout
7. Poor quality of presentation
8. Legibility
9. Appearance
10. Arrangement
11. Visual inconsistency(Visually un stable )
12. Lack of design features
13. Over use of 3D presentations
14. Overuse of too many bright colors
15. Bad typography(styles)
Web screens also present to the user Variety of distractions (divertion):
(Because of these below points user attention will divert)
1. Numerous audio and visual interruptions
2. Extensive visual clutter (random )
3. Poor information readability
4. In comprehensible screen components
5. Confusing and inefficient navigation
6. Inefficient operations
7. Excessive or inefficient page scrolling
8. Information overload
9. Design inconsistency
10. Outdated information

What screen users want:

1. User want appearance in order.
2. An indication of what is being shown and what should be done with it.
3. Expected information located where it should be.
4. A clear indication of what relates to what.
5. Plain and simple English.
6. A simple way of finding out what is in a system and how to get it out.
7. 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:
 The task may be including activities such as:
 Enter this data from this form into the system to make a reservation or registration.
 Or answer a specific question.
 Or collect the necessary information

Screen Design goals:

Goals of a well- designed screen are as follows.
User easily to understand screen for register/login/interact with user.
 User will easily perform his task without any confusion.
All screen elements are in order and relative and non- repeated elements.
Fulfill all business functionalities and design.
Reduce visual work
Reduce intellectual work
Reduce memory work
Reduce mentor work
Eliminate burdens or instructions

Screen meaning and Purpose:

Each screen element. . .
Every control
All text
Screen organization
All emphasis
Each color
Every graphic
All screen animation
All forms of feedback Must
Have meaning to screen users
Serve a purpose in performing tasks
All elements of a screen must have meaning to users and serve a purpose in per-forming tasks or
fulfilling needs. If an element does not have meaning, do not include it on the screen because it is
noise

Screen planning and Purpose:

Designed screen must have planning & purpose.

All elements of a screen must have meaning & purpose in per-forming tasks & fulfilling user needs.
If an element does not have meaning, do not include.

Each screen element. . .

Every control
All text
Screen organization
All emphasis
Each color
Every graphic
All screen animation
All forms of feedback
Must have meaning to screen users & purpose in performing tasks.

Organizing screen elements clearly and meaningfully:

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 multiple reasons:

 Consistency in design (Stable in design),

 Visually pleasing composition
  Logical and sequential ordering,
 Presentation of the proper amount of information,
 Groupings, and
 Screen items alignment.

Consistency in Design:-

User observe the same way and rules for all screens then it is called Consistency design
All screen Working ways, and Cultural ways are equal.
Provide internal consistency.
And application or web site screens have same type of operations and navigation
And visual identity or theme

Ordering of Screen Data & Content(content images or input fields )

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.
Ordering tables need to include
Sequence of use
Frequency of use
Function
Importance
General to specific
Form groups that cover all possibilities.
Information is visible.
Screen show only information relative to task is presented on screen.
Upper -Left Starting Point.
User Eyeball looking at displays of information, usually
One’s eyes move first to the upper-left center of the display.
And then quickly move through the display in a clockwise direction.

Screen Navigation and Flow

Navigation flow is a feature that allows users to navigate from one screen to another as per the business flow in the
sequence specified after transaction is done in each screen.
Generally the navigation flow is role based.
(Customer is one role, Clerk is one role, Manager is one role, in bank application).
Different roles have different flows.
For example:
If we add a navigation flow in the order of – New Customer,
Customer Registration Screen
New Order,
New Bill,
New Payment:

when customer registered in the user is directed to 'New Order' screen

And once the order is booked, user is directed to 'New Bill' screen
And after bill is generated, user is directly taken to 'New Payment' screen.

In our application the processes using navigation flow are - Customer Registration,
Order booking,
Invoice generation,
Payments,
Debit Note,
And Credit Note.

Visually pleasing composition

Visually pleasing (satisfying) composition (combination of few things)
Provide visually pleasing composition with the following qualities –
Balance
Symmetry
Regularity
Predictability
Sequentiality
Economy
Unity
Proportion
Simplicity
Groupings

Balance:
Create a screen balance means an equal weight of screen elements left, right, top
and bottom.
Balance can be explained in the figure as follows.

Symmetry:
 Create symmetry by replicating elements left and right of the screen
center line
Elements made up of exactly similar parts facing each other or
around an axis.
Regularity:
  1) Create regularity by establishing standard and consistency spaced horizontal and
vertical alignment points
  2) Also use similar elements sizes, shapes, colors and spacing.

Predictability:
Create Predictability by Being Consistent and following conventional
orders or arrangements.

Sequentiality:
 Provide sequentiality by arranging elements to guide the eye through the
screen in an obvious, logical, rhythmic and efficient manner
2)Eye tends  to  be  attracted  to
          a)A  bright  element before  one  less  bright
          b)isolated   elements  before  elements  in  a  group
          c)graphics  before   text
          d)color  before   black   and  white  
          e)highly  saturated  colors  before those less saturated
          f)dark  areas before  light  areas
          g)a big element  before  a  small  one
          h)an   shape before  a usual one
          i)big  objects  before  little  objects

Economy:
1) Provide economy by using as few styles,
display techniques and colors as possible.
 Unity:
1) Create unity by
a) Using similar sizes, shapes, or colors for related information
b) Leaving less space between elements of a screen than the space
left at the margins

Simplicity:
1) Optimizes the number of elements on a screen,
within limits of a clarity
2) Minimize the alignment points, especially
horizontal or vertical

Amount of Information on screen (Sufficient Information on Screen)

Adequate Amount of information:

 Adequate (satisfactory) amount of information should be on screen.
 If unnecessary information on the screen is create confusion to user.
 And insufficient information makes difficult to user to take some decisions.

Availability of Necessary Information:

 Information on the screen is useful to perform a task by user.
 Single task need to show in single screen
 If single task information divided into multiple screens it difficult to understand & perform task by
user.
 Only required information is displayed without any extra information.

Density of a screen:
Density is a measure of “ How much ” is to be presented on the screen.
Density defined as the amount of information or characters to be displayed.
Both density & complexity are directly proportional to each other.
Rise & fall together and follow the same measure as well.

FOCUS AND EMPHASIS

Emphasis= special importance, value, or prominence given to something.

Using fallowing techniques we can focus and emphasis screen elements.
Visually emphasize the
• Highlight most prominent (famous)elements.
• Highlight most important elements using some colors brightness.
De emphasize less important elements
• To ensure that
• Too many screen elements are emphasized(special importance).
• Screen elements disorder.
• Using too many emphasize techniques
To provide emphasis use techniques such as :
• Higher brightness
• Reverse polarity
• Larger and distinctive font
• Underlining
• Blinking
• Line rulings
• Contrasting colors
• Larger size
• Positioning
• Isolation
• Distinctiveness
• White space

Presentation information simply and meaningfully

Screen components include

1) Screen title
2) Information displayed on the screen.
3) Headin

Presentation Of information simply & meaningfully

Presentation Of information should simply & meaningfully means screen components includes
below,

1) Screen's title.
2) Information displayed on the screen.
3) Headings and headlines.
4) Instructional information.

Screen's Title
The following are the guidelines for title of screen.
 1)Each screen must be identified with the help of titles.
2)The titles must be clearly spelled out so that they are easily understandable to the user.
3)Th e y mu st b e p r e s e n t e d i n b r i g h t n e s s o r i n t e n s i t y .
4)T h e y m u s t h a v e a m i x e d - c a s e f o n t .
5)Each title must be different from one another so that they can be identified easily.

Information Displayed on the Screen

.

The rules for presenting information simply and meaningfully on the screen are,

1) Understandability:

The elements on the screen must be clear and understandable by the users.
There should be an appropriate difference between its text and the background.

2) Readability:

The information should be easy, clear and simple to be read by the viewer’s interference.
While reading it is not the individual letter but the shape of words that are recognized

3) Usability :

The displayed information should be usable to user for fulfilling the task on application.
The data represented in the form of text and w o r d f o r m a t .
The information on the screen must be presented in its direct usa b le p a t te r n.
Ther e sho uld be no r eq uir ement for c hec k ing a nd reference to documentation.

4) Contrasting Display Features: (Contrasting = different)

The contrasting/different display features are used to attract the users.
Such features like color, style and size of a letter.
Features on the screen useful to hold user’s attention and fulfill task fast and quickly.

5)Visual Lines :
 Visual Lines & Control alignments, data and
whitespace guide user to horizontally or
vertically flow over the screen.

To present large amount of information on

a single screen, based on the visual lines
user can fulfill task.

6)Consistency :

Information should be consistent means complete and meaningful .

Headings and Headlines

V ari ous t yp es o f h ea din gs ca n be in cl ud ed on s cr ee ns a s fo ll ow s,

1) Control Section Headings: The following are the guidelines for control section
headings.

Fig:- Control Section Heading

i) A meaningful heading specifying all the relationships between the controls (text field
radio buttons, etc..)must be provided.

ii)Section headings must be positioned above their controls , leaving one space line. They
may also be positioned inside the border placed on the upper-left corner.

iii)Right indentation must be done on the control captions.

iv) They must be fully spelled out and must be written in an uppercase font.

v) They must be displayed in normal intensity. And if a distinct font size or style appears then a
mixed case font with the heading style must be used to present the heading.

2) Control Subsection (or) Row Headings :

 The following are the guidelines for row headings,

i)A meaningful heading specifying all the relationships between the controls.

ii)The row headings must be positioned at the left of the controls or must be placed
at the topmost row of a group of related fields.

iii)By using a symbol (for example, greater than symbol or a filled in arrow), the row
heading must be separated from its caption.

iv)The symbol must be separated from heading and caption by a single and at
least three spaces respectively.

v ) W e m e nt io ne d r ow h ea di ng s ri gh t o r le ft .

vi)Th ey must be fully spelled out and written in an uppercase font.

vii)They must be displayed in normal intensity style. And , if a separate font size or
style appears then a mixed-case font along with the headline style must be
used so as to present the heading.

3) Field Group Headings :

The following are the guidelines for field group headings.

Clear and meaningful heading specifying all the relati onship
among the controls must be provided.
Field group headings must be positi oned at the center of the
window.
And above the related capti ons.
A solid line is used to show the relati onship between the fi eld
group heading & capti ons.
They must be fully Spelled out & writt en in uppercase font.

Web Page headings :-

Based on the hierarchy we mention font sizes and styles.

Information Retrieval on Web:-

Scanning =Read & understanding every part of something.

Examine in inside.
Scanning is easier to perform for that page.
Organization, Layout, Location, Typography & color and some techniques makes scanning easier.

Organization:-
 Alignment of webpage elements.
 And providing clear flow of links and pages.
 And organize the contents of pages in distinct manner.
 These are easy to understand and scan web page easily.

Layout:- (Layout means Meaningful titles &subtitles)

 Need to provide meaningful title for page.
 Based on this headings user can easily scan the web page.
Write the page text briefly
The text of the web page should be very clear then user can understand very easy.
Numbered & Bulleted Lists:
Lists Breaks long text into small paragraph by highlighting the important points.

3) Presentation
Presentation of Information contain keywords, words that separate page from another page.
Colors, Increased brightness, fonts & underlines create attractive presentations.

Searching:-
User searching for some information.
It is important to know what user requirement is and what he searches.
What is user knowledge & capabilities?
 Statistical Graphics

 The graphical representation of data is called as statistical graphics which Is also

referred as a chart or a graph.
 Graph shows the complicated ideas related with clarity, efficiency and with large
number of ideas in a short span of time,
 Possible with less confusion provided to the viewer.
 It provides the meaningful information that avoids confusion from difficult
information.

Components of a Statistical Graphics

The guidelines for displaying graphic components on the screen are,

1) Data representation.
2) Axes.
3) Scales and Scaling.
4) Proportion.
5) Lines.
6) Labeling.
7) Title.
8) Aiding Interpretation of Numbers.
 Data Representation
It is an alphanumeric display and an essential part of graphics display.

Reduce Non-data Elements, Focus on Data

The non-data elements like

Decoration,
Grid lines elaboration, words,
Detailed extensive labeling
Non data elements attract the user's attention but it hides the data.
Therefore, non-data elements should be reduced and
User's attention should be towards the required data.

2) Surplus (or) Unnecessary Data :

The repetition of same value again and again for a specific information should be
reduced or eliminated.
Therefore surplus or unnecessary data should be used only if it is necessary. '

3) Variation of Data :

So graphic should be show the changes in data need not to highlight change on graphics.
 What is “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
- we can show the data in rich, complex or difficult.

Graphs contain - Scales- Scales Contain -- Tick Marks

Liner Scale
Marking Scale
Begin the Scale at origin
Minimize the scale Digits
-

Data Presentation

 Perfectly showing data.

 Minimize non data elements(graphics)
 Minimize repeated data
 Fill the graph’s available area with data.
 Show data variation(Changes in data)
 Provide proper context for data interpretation.

Scales and Scaling

What is a scale in graph?
In math, a scale in can be defined as the system of
marks at fixed ,
which define the relation between the units
being used
and their representation on the graph.

Here, scale of the graph is 1 interval being

equal to 10 units

Scaling is the process of measuring data with quantity.

For example, a scaling technique might involve estimating individuals' levels or quality of
products. 
  Scaling is has set of markers or measurements points.
 Scaling is placing of data in measurements.
 Standard scale has both X-axis and Y-axis.

Scaling in has fallowing things like

 Tick marks
 Linear Scale
 Marking Scale
 Begin the Scale at origin
 Minimize Sale Design
 Consistency
 Labeling
Tick mark useful to determine the position.

Linear scaling means results obtained with the single input file. 

Consistency
Need Consistency between two or more related graphics
Should use same scaling and graphics.
Labeling
Labeling of scale should be done in the traditional left to right orientation with complete description of
values along with measurement units.

Beginning the scale at origin

Begin the scale from the origin as it visual comparison
Where zero is assumed as a starting point

Minimize the scale digits:-

As smaller numbers are easy to understand.
So the number of digits on scale should be kept minimum.

Technological Considerations in Interface Design

Physical components of the device and device internal software affects the screen interface design.

Graphics compatibility & Screen design must be depends on the following system components:

 System power.
 Screen size.
 Screen resolution.
 Display colors.
 Other display features.
 Development and implementation tools being used.
 System platform being used.
 Platform style guide being used.

System power/Configuration:- Less Configurations like Less RAM memory & processor & cache.
Gives less loading speed so it gives improper alignments for some time And shows less
graphics .User needs more time to understand the screens.

Screen Size:-Screen size vary from 13 to 21 inches & 17 inches is screen being most common.
21 inches screen completes the task compare to 15,17, 19 inches.
Large screens perform 26 % faster from small screen.

Screen Resolution:-

It is a function of monitor & different screen resolution has capabilities & video card.
Poor resolution may not produce real, sharp drawing images.
So proper resolution is necessary to achieve to show graphics.

Here are typical resolutions for some popular screen sizes:

 19-inch screen (standard ratio): 1280 x 1024 pixels.

 20-inch screen (standard ratio): 1600 x 1200 pixels.
  22-inch screen (widescreen): 1680 x 1050 pixels.
 24-inch screen (widescreen): 1900 x 1200 pixels.

Other display features:-Screen need to display the different display features like.
 Higher Brightness
 Blinking
 Underlining Boxes,
 White Spaces
 Lines

Implementation & Development Tool Compatibility:-

 At time of screen development developer user many tool kits to implement

 Menu, Button, Scroll Bars, etc…
 Updated browser only support for this type code & displayed screen graphics properly.

Software Tools
A software tool is programmatic software used to create, maintain, or otherwise support other programs
and applications.
Some of the commonly used software tools in HCI are as follows −
Specification Methods − The methods used to specify the GUI.
Even though these are lengthy and ambiguous methods, they are easy to understand.

Grammars Tool − Provide confirmations for completeness and correctness from Written Instructions or Expressions.
That a tool can understand instruction and send error message.

Transition Diagram Tool −Set of nodes and links that can be displayed in text, link frequency, state diagram, etc.
They are difficult in evaluating usability, visibility, modularity and synchronization.
Statecharts − Chart methods developed for simultaneous user activities and external actions. They provide link-
specification with interface building tools.

Interface Building Tools − Design methods that help in designing command languages, data-entry structures, and
widgets.
Interface Mockup Tools − Tools to develop a quick sketch of GUI. E.g., Microsoft Visio, Visual Studio .Net, etc.
Software Engineering Tools − Extensive programming tools to provide user interface management system.
Evaluation Tools − Tools to evaluate the correctness and completeness of programs.

Keyboard
A keyboard can be considered as a primitive device known to all of us today.
Keyboard uses an organization of keys/buttons that serves as a mechanical device for a computer.
Each key in a keyboard corresponds to a single written symbol or character.

This is the most effective and ancient interactive device between man and machine
That has given ideas to develop many more interactive devices as well as has made advancements in itself
Such as soft screen keyboards for computers and mobile phones.
 4th Unit
New and Navigation Schemes(Plan)
 A menu is used to perform tasks in the application.
 There are different types of menus and to use the best type of menu,
following factors must be considered.

1. The items that are available in menu.

2. The menu that is used frequently.
3. The content of menu that is frequently changed.

Menus are a mainly used for navigation .

Types of menus

1) The structures of menus. 2) The functions of menus.

3) The content of menus. 4) Formatting menus.

5) Writing menus. 6) Navigation using menus.

7) Web site navigation and links . 8) Ty pes of graphical m enus.

Menu's Structure
The structure of menus useful to user to performing a particular task.

Structure varies from a simple structure to very complex structure.

Menus basically consist of small dialog boxes in which the user is allowed to choose from a
set of alternations.

Single Menu
 In this, a single window is displayed to get user's input.
 For example, while playing a game, the different choices are simple, intermediate or
hard.
 The user is concerned only with the immediate consequence of selected item from this
single menu
 And no additional system menus require user choices.
 When repeated single menu is presented, the user should re-enter an input data.
Sequential Menus

 The goal of sequential menu is to identify a parameter to enter input data.

 All menus in a sequential menu must be displayed in a specific direction whose order is
set in advance.
 These menus are on separate menu screens that have only one direction with a preset
order.
 Every menu in the system should be answered by the user in some or other fashion.

Parallel Menu:-
Parallel menu are presented on same screen with all the menu available in parallel.
Parallel menu also denote the relationships and dependence between the menu choices.

Hierarchical Menus

 It is a top down process in which branches are increase from top to down.
 When many relationships exist between menu alternatives, and
 Some menu options are depending upon a previous menu selection,
 A hierarchical structure is the best solution.
 Common examples hierarchical design today are found in menu bars with their
associated pull-downs, and in Web sites with their navigation links.

Interconnected Menus
Advantage of interconnected menu is that complete control over navigation flow at any time.
Define input data

User selection defines the input data or parameters .

Which is in the s