SlideShare a Scribd company logo
PRINCIPLES OF USER INTERFACE DESIGN
• An interface must really be just an extension of a person.
– This means that the system and its software must reflect a
person's capabilities and respond to his or her specific needs.
• It should be useful, accomplishing some business objectives
faster and more efficiently than the previously used
method or tool did.
• It must also be easy to learn, for people want to do, not
learn to do.
• Finally, the system must be easy and fun to use, evoking a
sense of pleasure and accomplishment not tedium and
frustration.
• The interface itself should serve as both a connector and a
separator:
– a connector in that it ties the user to the power of the
computer, and a separator in that it minimizes the possibility of
the participants damaging one another.
Principles for the Xerox STAR
• The design of the Xerox STAR was guided by a set of principles
that evolved over its lengthy development process. These
principles established the foundation for graphical interfaces
• Visual order and viewer focus:
– Attention must be drawn, at the proper time, to the important and
relevant elements of the display.
– Effective visual contrast between various components of the screen
is used to achieve this goal.
– Animation is also used to draw attention, as is sound.
– Feedback must also be provided to the user.
– Since the pointer is usually the focus of viewer attention, it is a useful
mechanism for providing this feedback (by changing shapes).
• Revealed structure:
– The distance between one's intention and the effect
must be minimized.
– Most often, the distance between intention and effect
is lengthened as system power increases.
– The relationship between intention and effect must
be, tightened and made as apparent as possible to the
user.
– The underlying structure is often revealed during the
selection process.
• Consistency:
– Consistency aids learning.
– Consistency is provided in such areas as element
location, grammar, font shapes, styles, and sizes,
selection indicators, and contrast and emphasis
techniques
• Appropriate effect or emotional impact:
– The interface must provide the appropriate
emotional effect for the product and its market.
– Is it a corporate, professional, and secure business
system? Should it reflect the fantasy, wizardry, and
bad puns of computer games?
• A match with the medium:
– The interface must also reflect the capabilities of
the device on which it will be displayed.
– Quality of screen images will be greatly affected
by a device's resolution and color-generation
capabilities
General Principles
• Aesthetically Pleasing
Provide visual appeal by following these presentation and graphic design
principles:
• Provide meaningful contrast between screen elements.
• Create groupings.
• Align screen elements and groups.
• Provide three-dimensional representation.
• Use color and graphics effectively and simply.
• Clarity
The interface should be visually, conceptually, and linguistically clear,
including
• Visual elements
• Functions
• Metaphors
• Words and Text
• Compatibility
Provide compatibility with the following:
- The user
- The task and job
- The Product
Adopt the User’s Perspective
• Configurability
Permit easy personalization, configuration, and
reconfiguration of settings.
- Enhances a sense of control
- Encourages an active role in understanding
• Comprehensibility
A system should be easily learned and understood:
A user should know the following:
- What to look at
- What to do
- When to do it
- Where to do it
- Why to do it
- How to do it
The flow of actions, responses, visual presentations, and information should be in a sensible
order that is easy to recollect and place in context.
• Consistency
>> A system should look, act, and operate the same throughout.
Similar components should:
- Have a similar look.
- Have similar uses.
- Operate similarly.
>> The same action should always yield the same result
>> The function of elements should not change.
>> The position of standard elements should not change
• Control
>>The user must control the interaction.
- Actions should result from explicit user requests.
- Actions should be performed quickly.
- Actions should be capable of interruption or termination.
- The user should never be interrupted for errors
>>The context maintained must be from the perspective of the user.
>>The means to achieve goals should be flexible and compatible with the user's
skills, experiences, habits, and preferences.
>>Avoid modes since they constrain the actions available to the user.
>>Permit the user to customize aspects of the interface, while always providing a
Proper set of defaults
• Directness
>> Provide direct ways to accomplish tasks.
- Available alternatives should be visible.
- The effect of actions on objects should be visible.
• Efficiency
>> Minimize eye and hand movements, and other control actions.
- Transitions between various system controls should flow easily and freely.
- Navigation paths should be as short as possible.
- Eye movement through a screen should be obvious and sequential.
>> Anticipate the user's wants and needs whenever possible
• Familiarity
>>Employ familiar concepts and use a language that is familiar to the user.
>> Keep the interface natural, mimicking the user's behavior patterns.
>> Use real-world metaphors.
• Flexibility
>> A system must be sensitive to the differing needs of its users, enabling a level and type
of performance based upon:
- Each user's knowledge and skills.
- Each user's experience.
- Each user's personal preference.
- Each user's habits.
- The conditions at that moment.
• Forgiveness
>>Tolerate and forgive common and unavoidable human errors.
>>Prevent errors from occurring whenever possible.
>> Protect against possible catastrophic errors.
>> When an error does occur, provide constructive messages
• Predictability
>>The user should be able to anticipate the natural progression of each task.
- Provide distinct and recognizable screen elements.
- Provide cues to the result of an action to be performed.
>>All expectations should be fulfilled uniformly and completely.
• Recovery
>> A system should permit:
- Commands or actions to be abolished or reversed.
- Immediate return to a certain point if difficulties arise.
>> Ensure that users never lose their work as a result of:
- An error on their part.
- Hardware, software, or communication problems
• Responsiveness
>> The system must rapidly respond to the user's requests.
>> Provide immediate acknowledgment for all user actions:
- Visual.
- Textual
- Auditory.
• Transparency
>> Permit the user to focus on the task or job, without concern for the
mechanics of the interface.
- Workings and reminders of workings inside the computer should be invisible
to the user.
• Simplicity
>>Provide as simple an interface as possible.
>> Five ways to provide simplicity:
- Use progressive disclosure, hiding things until they are needed
- Present common and necessary functions first
- Prominently feature important functions
- Hide more sophisticated and less frequently used functions.
- Provide defaults.
- Minimize screen alignment points.
- Make common actions simple at the expense of uncommon actions being made harder.
- Provide uniformity and consistency.
• Transparency
– Permit the user to focus on the task or the job, without the concern for the
mechanics of the interface.
– Workings and the reminders of workings inside the computer should be
invisible to the user.
• Trade-offs
– Final design will be based on a series of trade-offs balancing often-conflicting
design principles
– People’s requirements always take precedence over technical requirements.

More Related Content

Similar to USER INTERFACE DESIGN - unit-1 last part.ppt (20)

PPTX
Game interface design part 2
Durgesh Pandey
 
PPTX
HCI Unit 3.pptx
Raja980775
 
PDF
CSE 5930 Assignment 2 Documentation
Salocin Dot TEN
 
PPTX
Designing user interface module 4
DBPMCF
 
PPTX
UX Principles and Practice
IBM
 
PPTX
golden rules of user interface design
gadige harshini
 
PPTX
Module 1
raghu katagall
 
PPTX
User Interface Analysis and Design
Saqib Raza
 
PPTX
The Golden Rules by Theo Mandel - Software Engineering
Amit Baghel
 
PPT
Design rules and usability requirements
Andres Baravalle
 
PDF
Design Theory - Ankur Sharma - Presentation
MobileNepal
 
PPTX
Usability Evaluation
Saqib Shehzad
 
PPTX
user interface design software engineering
letheyabala
 
PDF
82_PHOTOLAB-----Project PPT.pdfhejeenejsn
shivam003d
 
PPTX
Design process design rules
Preeti Mishra
 
PDF
Accessibility Support with the ACCESS Framework
Michael Heron
 
PPT
Lecture 11.pptHuman Computer Interaction
MuhammadAbubakar114879
 
PPTX
User interface design elements.pptx fyiiyyj
MohammadIdrees57
 
DOCX
Neilsen Design heuristics
HafizMImran1
 
PPT
Usability Engineering General guidelines
REHMAT ULLAH
 
Game interface design part 2
Durgesh Pandey
 
HCI Unit 3.pptx
Raja980775
 
CSE 5930 Assignment 2 Documentation
Salocin Dot TEN
 
Designing user interface module 4
DBPMCF
 
UX Principles and Practice
IBM
 
golden rules of user interface design
gadige harshini
 
Module 1
raghu katagall
 
User Interface Analysis and Design
Saqib Raza
 
The Golden Rules by Theo Mandel - Software Engineering
Amit Baghel
 
Design rules and usability requirements
Andres Baravalle
 
Design Theory - Ankur Sharma - Presentation
MobileNepal
 
Usability Evaluation
Saqib Shehzad
 
user interface design software engineering
letheyabala
 
82_PHOTOLAB-----Project PPT.pdfhejeenejsn
shivam003d
 
Design process design rules
Preeti Mishra
 
Accessibility Support with the ACCESS Framework
Michael Heron
 
Lecture 11.pptHuman Computer Interaction
MuhammadAbubakar114879
 
User interface design elements.pptx fyiiyyj
MohammadIdrees57
 
Neilsen Design heuristics
HafizMImran1
 
Usability Engineering General guidelines
REHMAT ULLAH
 

Recently uploaded (20)

PPTX
Accounting Skills Paper-I, Preparation of Vouchers
Dr. Sushil Bansode
 
PDF
Federal dollars withheld by district, charter, grant recipient
Mebane Rash
 
PPTX
ASRB NET 2023 PREVIOUS YEAR QUESTION PAPER GENETICS AND PLANT BREEDING BY SAT...
Krashi Coaching
 
PPTX
Mrs Mhondiwa Introduction to Algebra class
sabinaschimanga
 
PPTX
CBSE to Conduct Class 10 Board Exams Twice a Year Starting 2026 .pptx
Schoolsof Dehradun
 
PPTX
Nutrition Month 2025 TARP.pptx presentation
FairyLouHernandezMej
 
PPTX
Presentation: Climate Citizenship Digital Education
Karl Donert
 
PPTX
How to Define Translation to Custom Module And Add a new language in Odoo 18
Celine George
 
PPTX
How to Configure Access Rights of Manufacturing Orders in Odoo 18 Manufacturing
Celine George
 
PPTX
How to Configure Prepayments in Odoo 18 Sales
Celine George
 
PPTX
Pyhton with Mysql to perform CRUD operations.pptx
Ramakrishna Reddy Bijjam
 
PDF
Zoology (Animal Physiology) practical Manual
raviralanaresh2
 
PDF
1, 2, 3… E MAIS UM CICLO CHEGA AO FIM!.pdf
Colégio Santa Teresinha
 
PPTX
classroom based quiz bee.pptx...................
ferdinandsanbuenaven
 
PPTX
ROLE OF ANTIOXIDANT IN EYE HEALTH MANAGEMENT.pptx
Subham Panja
 
PPTX
How to Configure Storno Accounting in Odoo 18 Accounting
Celine George
 
PPTX
The Human Eye and The Colourful World Class 10 NCERT Science.pptx
renutripathibharat
 
PPTX
CONVULSIVE DISORDERS: NURSING MANAGEMENT.pptx
PRADEEP ABOTHU
 
PPTX
Capitol Doctoral Presentation -July 2025.pptx
CapitolTechU
 
PPTX
Blanket Order in Odoo 17 Purchase App - Odoo Slides
Celine George
 
Accounting Skills Paper-I, Preparation of Vouchers
Dr. Sushil Bansode
 
Federal dollars withheld by district, charter, grant recipient
Mebane Rash
 
ASRB NET 2023 PREVIOUS YEAR QUESTION PAPER GENETICS AND PLANT BREEDING BY SAT...
Krashi Coaching
 
Mrs Mhondiwa Introduction to Algebra class
sabinaschimanga
 
CBSE to Conduct Class 10 Board Exams Twice a Year Starting 2026 .pptx
Schoolsof Dehradun
 
Nutrition Month 2025 TARP.pptx presentation
FairyLouHernandezMej
 
Presentation: Climate Citizenship Digital Education
Karl Donert
 
How to Define Translation to Custom Module And Add a new language in Odoo 18
Celine George
 
How to Configure Access Rights of Manufacturing Orders in Odoo 18 Manufacturing
Celine George
 
How to Configure Prepayments in Odoo 18 Sales
Celine George
 
Pyhton with Mysql to perform CRUD operations.pptx
Ramakrishna Reddy Bijjam
 
Zoology (Animal Physiology) practical Manual
raviralanaresh2
 
1, 2, 3… E MAIS UM CICLO CHEGA AO FIM!.pdf
Colégio Santa Teresinha
 
classroom based quiz bee.pptx...................
ferdinandsanbuenaven
 
ROLE OF ANTIOXIDANT IN EYE HEALTH MANAGEMENT.pptx
Subham Panja
 
How to Configure Storno Accounting in Odoo 18 Accounting
Celine George
 
The Human Eye and The Colourful World Class 10 NCERT Science.pptx
renutripathibharat
 
CONVULSIVE DISORDERS: NURSING MANAGEMENT.pptx
PRADEEP ABOTHU
 
Capitol Doctoral Presentation -July 2025.pptx
CapitolTechU
 
Blanket Order in Odoo 17 Purchase App - Odoo Slides
Celine George
 
Ad

USER INTERFACE DESIGN - unit-1 last part.ppt

  • 1. PRINCIPLES OF USER INTERFACE DESIGN • An interface must really be just an extension of a person. – This means that the system and its software must reflect a person's capabilities and respond to his or her specific needs. • It should be useful, accomplishing some business objectives faster and more efficiently than the previously used method or tool did. • It must also be easy to learn, for people want to do, not learn to do. • Finally, the system must be easy and fun to use, evoking a sense of pleasure and accomplishment not tedium and frustration. • The interface itself should serve as both a connector and a separator: – a connector in that it ties the user to the power of the computer, and a separator in that it minimizes the possibility of the participants damaging one another.
  • 2. Principles for the Xerox STAR • The design of the Xerox STAR was guided by a set of principles that evolved over its lengthy development process. These principles established the foundation for graphical interfaces • Visual order and viewer focus: – Attention must be drawn, at the proper time, to the important and relevant elements of the display. – Effective visual contrast between various components of the screen is used to achieve this goal. – Animation is also used to draw attention, as is sound. – Feedback must also be provided to the user. – Since the pointer is usually the focus of viewer attention, it is a useful mechanism for providing this feedback (by changing shapes).
  • 3. • Revealed structure: – The distance between one's intention and the effect must be minimized. – Most often, the distance between intention and effect is lengthened as system power increases. – The relationship between intention and effect must be, tightened and made as apparent as possible to the user. – The underlying structure is often revealed during the selection process. • Consistency: – Consistency aids learning. – Consistency is provided in such areas as element location, grammar, font shapes, styles, and sizes, selection indicators, and contrast and emphasis techniques
  • 4. • Appropriate effect or emotional impact: – The interface must provide the appropriate emotional effect for the product and its market. – Is it a corporate, professional, and secure business system? Should it reflect the fantasy, wizardry, and bad puns of computer games? • A match with the medium: – The interface must also reflect the capabilities of the device on which it will be displayed. – Quality of screen images will be greatly affected by a device's resolution and color-generation capabilities
  • 5. General Principles • Aesthetically Pleasing Provide visual appeal by following these presentation and graphic design principles: • Provide meaningful contrast between screen elements. • Create groupings. • Align screen elements and groups. • Provide three-dimensional representation. • Use color and graphics effectively and simply. • Clarity The interface should be visually, conceptually, and linguistically clear, including • Visual elements • Functions • Metaphors • Words and Text
  • 6. • Compatibility Provide compatibility with the following: - The user - The task and job - The Product Adopt the User’s Perspective • Configurability Permit easy personalization, configuration, and reconfiguration of settings. - Enhances a sense of control - Encourages an active role in understanding • Comprehensibility A system should be easily learned and understood: A user should know the following: - What to look at - What to do - When to do it - Where to do it - Why to do it - How to do it The flow of actions, responses, visual presentations, and information should be in a sensible order that is easy to recollect and place in context.
  • 7. • Consistency >> A system should look, act, and operate the same throughout. Similar components should: - Have a similar look. - Have similar uses. - Operate similarly. >> The same action should always yield the same result >> The function of elements should not change. >> The position of standard elements should not change • Control >>The user must control the interaction. - Actions should result from explicit user requests. - Actions should be performed quickly. - Actions should be capable of interruption or termination. - The user should never be interrupted for errors >>The context maintained must be from the perspective of the user. >>The means to achieve goals should be flexible and compatible with the user's skills, experiences, habits, and preferences. >>Avoid modes since they constrain the actions available to the user. >>Permit the user to customize aspects of the interface, while always providing a Proper set of defaults
  • 8. • Directness >> Provide direct ways to accomplish tasks. - Available alternatives should be visible. - The effect of actions on objects should be visible. • Efficiency >> Minimize eye and hand movements, and other control actions. - Transitions between various system controls should flow easily and freely. - Navigation paths should be as short as possible. - Eye movement through a screen should be obvious and sequential. >> Anticipate the user's wants and needs whenever possible • Familiarity >>Employ familiar concepts and use a language that is familiar to the user. >> Keep the interface natural, mimicking the user's behavior patterns. >> Use real-world metaphors.
  • 9. • Flexibility >> A system must be sensitive to the differing needs of its users, enabling a level and type of performance based upon: - Each user's knowledge and skills. - Each user's experience. - Each user's personal preference. - Each user's habits. - The conditions at that moment. • Forgiveness >>Tolerate and forgive common and unavoidable human errors. >>Prevent errors from occurring whenever possible. >> Protect against possible catastrophic errors. >> When an error does occur, provide constructive messages • Predictability >>The user should be able to anticipate the natural progression of each task. - Provide distinct and recognizable screen elements. - Provide cues to the result of an action to be performed. >>All expectations should be fulfilled uniformly and completely.
  • 10. • Recovery >> A system should permit: - Commands or actions to be abolished or reversed. - Immediate return to a certain point if difficulties arise. >> Ensure that users never lose their work as a result of: - An error on their part. - Hardware, software, or communication problems • Responsiveness >> The system must rapidly respond to the user's requests. >> Provide immediate acknowledgment for all user actions: - Visual. - Textual - Auditory. • Transparency >> Permit the user to focus on the task or job, without concern for the mechanics of the interface. - Workings and reminders of workings inside the computer should be invisible to the user.
  • 11. • Simplicity >>Provide as simple an interface as possible. >> Five ways to provide simplicity: - Use progressive disclosure, hiding things until they are needed - Present common and necessary functions first - Prominently feature important functions - Hide more sophisticated and less frequently used functions. - Provide defaults. - Minimize screen alignment points. - Make common actions simple at the expense of uncommon actions being made harder. - Provide uniformity and consistency. • Transparency – Permit the user to focus on the task or the job, without the concern for the mechanics of the interface. – Workings and the reminders of workings inside the computer should be invisible to the user. • Trade-offs – Final design will be based on a series of trade-offs balancing often-conflicting design principles – People’s requirements always take precedence over technical requirements.