SlideShare a Scribd company logo
1 of 32
User Interface
A user interface is the way in which the user interacts with and gives
commands to the computer.
HCI – Human Computer Interface
Command Line Interface (CLI)
User interacts with the computer by typing commands.
This was the only way to interact with computers up until the 1990s. Some
users still prefer to interact with computers in this way.
Users had to know the exact commands, and the order they had to be
entered.
Can be faster for expert users.
Can run multiple commands in a script file.
Command Line Interface (CLI)
User interacts with the computer by typing commands.
Menu Drive Interface
User interacts with the computer by selecting options from a menu.
Graphical User Interface (GUI)
User interacts with the computer by pointing at and selecting icons which
represent a real world object.
WIMP
A WIMP interface is a type of GUI which uses:
Windows – Icons – Menus - Pointers
Other User Interfaces
 Touch screen
 Voice controlled / voice recognition
 Screen reader
 Head wand
 Braille keyboard
 VR
Design - Users
When designing a user interface, it is important to consider the type of user e.g.
Child
Adult (inexperienced user)
Adult (skilled / experienced user)
Person with a disability or learning difficulty
Type of input / output devices (touch screen, braille keyboard, speakers etc)
Design - Users
When designing a user interface, it is important to consider the type of user.
Design - Users
When designing a user interface, it is important to consider the type of user
Good Design Principles
Good interface design is important. Consider:
Colour - stylish, pleasing on the eye
Layout - simple, clean, uncluttered
Text – break into smaller paragraphs, headings
Font - readable, good size
Consistency – similar look and feel on all screens, menu items in the same
place
Appropriate selection options – menus, search, buttons, image buttons, links
Good Design Principles
Good interface design is important. Consider:
Devices – mobile, desktop, portrait, landscape
Feedback – useful and meaningful messages
Intuitive – where possible the user should be able to work out what to do
Customisable – the user can set their own interface, changing colours,
adapting the layout in order to be able to access frequently accessed
components
Interactivity – button responses, quizzes, animations, sounds etc.
Good Design Principles
Colour - stylish, pleasing on the eye
Layout - simple, clean, uncluttered
Good Design Principles
Colour - stylish, pleasing on the eye
Layout - simple, clean, uncluttered
Good Design Principles
Text – break into smaller paragraphs, headings
Font - readable, good size
Good Design Principles
Consistency – similar look and feel on all screens, menu items in the same
place
Good Design Principles
Consistency – similar look and feel on all screens, menu items in the same
place
Good Design Principles
Devices – mobile, desktop, portrait, landscape
Good Design Principles
Feedback – useful and meaningful messages
Good Design Principles
Customisable colour schemes
Good Design Principles
Customisable layouts
Good Design Principles
Appropriate selection options – menus, search, buttons, image buttons, links
Navigation
Navigation is the means of getting from one screen/page to the next
The navigation structure of a program or information system can be linear,
hierarchical or a combination of both.
Navigation
Linear navigation
Navigation
Hierarchical navigation
Accessibility
Accessibility means that programs and information systems should be designed
so that they can be used by people with or without disabilities.
Accessibility
Physical disability
For someone with a physical disability, the mouse can be difficult to use. It is
possible to:
Slow the speed of movement
Change the double click response time
Use the number keypad as a means of moving the mouse
Use TAB key to cycle between options
Use keyboard shortcuts to access menus
Accessibility
Physical disability
For someone with a physical disability, the keyboard can be difficult to use.
Voice recognition software can help as an alternative
Specialist input devices can be used
Accessibility
Visually impaired (poor vision)
Users with poor vision can:
Magnify areas of the screen
Increase the size of fonts and icons
Accessibility
Visually impaired (colour blind)
Users with colour blindness can:
Change the combination of colours and screen contrast
Accessibility
Visually impaired (blind)
Blind users can:
Use voice recognition software
Use braille keyboards
Use a screen reader to read content from the screen out loud

More Related Content

What's hot

Human Computer Interaction Unit III Part 2
Human Computer Interaction Unit III Part 2Human Computer Interaction Unit III Part 2
Human Computer Interaction Unit III Part 2
ashodhiyavipin
 
4. ergonomic of wimp interface
4. ergonomic of wimp interface4. ergonomic of wimp interface
4. ergonomic of wimp interface
Kh Ravy
 
USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPT
vicci4041
 
16 user interfacedesign
16 user interfacedesign16 user interfacedesign
16 user interfacedesign
randhirlpu
 
Interaction design quick tour 2
Interaction design quick tour 2Interaction design quick tour 2
Interaction design quick tour 2
Laili Farhana M.I.
 

What's hot (13)

Efficient Memorable Satisfactory
Efficient Memorable SatisfactoryEfficient Memorable Satisfactory
Efficient Memorable Satisfactory
 
Human Computer Interaction Unit III Part 2
Human Computer Interaction Unit III Part 2Human Computer Interaction Unit III Part 2
Human Computer Interaction Unit III Part 2
 
4. ergonomic of wimp interface
4. ergonomic of wimp interface4. ergonomic of wimp interface
4. ergonomic of wimp interface
 
USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPT
 
CSE 5930 Assignment 2 Documentation
CSE 5930 Assignment 2 DocumentationCSE 5930 Assignment 2 Documentation
CSE 5930 Assignment 2 Documentation
 
Disability software – the benefits of using premium disability software
Disability software – the benefits of using premium disability softwareDisability software – the benefits of using premium disability software
Disability software – the benefits of using premium disability software
 
User interface-design
User interface-designUser interface-design
User interface-design
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
Lesson 1
Lesson 1Lesson 1
Lesson 1
 
16 user interfacedesign
16 user interfacedesign16 user interfacedesign
16 user interfacedesign
 
Interaction design quick tour 2
Interaction design quick tour 2Interaction design quick tour 2
Interaction design quick tour 2
 
User Interface Design-Module 4 Windows
User Interface Design-Module 4  WindowsUser Interface Design-Module 4  Windows
User Interface Design-Module 4 Windows
 
Interaction styles
Interaction stylesInteraction styles
Interaction styles
 

Viewers also liked

Viewers also liked (20)

Image Compression
Image CompressionImage Compression
Image Compression
 
ISDD Environmental Impact
ISDD Environmental ImpactISDD Environmental Impact
ISDD Environmental Impact
 
ISDD Standard File Formats
ISDD Standard File FormatsISDD Standard File Formats
ISDD Standard File Formats
 
Audio Compression
Audio CompressionAudio Compression
Audio Compression
 
ISDD Media Types - File Compression
ISDD Media Types - File CompressionISDD Media Types - File Compression
ISDD Media Types - File Compression
 
Technical Implementation: Software
Technical Implementation: SoftwareTechnical Implementation: Software
Technical Implementation: Software
 
ISDD Testing
ISDD TestingISDD Testing
ISDD Testing
 
Technical Implementation: Hardware
Technical Implementation: HardwareTechnical Implementation: Hardware
Technical Implementation: Hardware
 
ISDD Video Compression
ISDD Video CompressionISDD Video Compression
ISDD Video Compression
 
SDD Memory
SDD MemorySDD Memory
SDD Memory
 
Scripting Languages
Scripting LanguagesScripting Languages
Scripting Languages
 
ISDD Networking & Connectivity
ISDD Networking & ConnectivityISDD Networking & Connectivity
ISDD Networking & Connectivity
 
ISDD Back Up Strategies
ISDD Back Up StrategiesISDD Back Up Strategies
ISDD Back Up Strategies
 
N5 Computing Science HTML
N5 Computing Science HTMLN5 Computing Science HTML
N5 Computing Science HTML
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Data Dictionary
Data DictionaryData Dictionary
Data Dictionary
 
Sound & Video File Sizes
Sound & Video File SizesSound & Video File Sizes
Sound & Video File Sizes
 
Web Pages
Web PagesWeb Pages
Web Pages
 
ISDD Cloud and Internet Services
ISDD Cloud and Internet ServicesISDD Cloud and Internet Services
ISDD Cloud and Internet Services
 
ISDD Hacking and Viruses
ISDD Hacking and VirusesISDD Hacking and Viruses
ISDD Hacking and Viruses
 

Similar to ISDD User Interface

User Interface Design
User Interface DesignUser Interface Design
User Interface Design
Jason Hando
 
Edge903 Project
Edge903 ProjectEdge903 Project
Edge903 Project
xyz01
 
User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15
koolkampus
 
The User Interface-Introduction .ppt
The User Interface-Introduction .pptThe User Interface-Introduction .ppt
The User Interface-Introduction .ppt
ssuserb7947f
 
What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction Design
Graeme Smith
 
12 Designing Mobile Applications For All: Accessible Contact Manager
12 Designing Mobile Applications For All: Accessible Contact Manager12 Designing Mobile Applications For All: Accessible Contact Manager
12 Designing Mobile Applications For All: Accessible Contact Manager
AEGIS-ACCESSIBLE Projects
 

Similar to ISDD User Interface (20)

UI.docx
UI.docxUI.docx
UI.docx
 
UI.docx
UI.docxUI.docx
UI.docx
 
Human computer interaction chapter 2 interaction Styles.pptx
Human computer interaction chapter 2 interaction Styles.pptxHuman computer interaction chapter 2 interaction Styles.pptx
Human computer interaction chapter 2 interaction Styles.pptx
 
Ni week 2018_ux_lab_viewcandothat
Ni week 2018_ux_lab_viewcandothatNi week 2018_ux_lab_viewcandothat
Ni week 2018_ux_lab_viewcandothat
 
User Interface Design
User Interface DesignUser Interface Design
User Interface Design
 
Edge903 Project
Edge903 ProjectEdge903 Project
Edge903 Project
 
Design for Accessibility
Design for AccessibilityDesign for Accessibility
Design for Accessibility
 
ui
uiui
ui
 
user interface.pptx
user interface.pptxuser interface.pptx
user interface.pptx
 
Topic 3 Human Computer Interaction
Topic 3 Human Computer InteractionTopic 3 Human Computer Interaction
Topic 3 Human Computer Interaction
 
User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15
 
Slide 4 - User Interface Design.pptx interface rather than its functionality ...
Slide 4 - User Interface Design.pptx interface rather than its functionality ...Slide 4 - User Interface Design.pptx interface rather than its functionality ...
Slide 4 - User Interface Design.pptx interface rather than its functionality ...
 
The User Interface-Introduction .ppt
The User Interface-Introduction .pptThe User Interface-Introduction .ppt
The User Interface-Introduction .ppt
 
The User Interface-Introduction .ppt
The User Interface-Introduction .pptThe User Interface-Introduction .ppt
The User Interface-Introduction .ppt
 
HCI 3e - Ch 3: The interaction
HCI 3e - Ch 3:  The interactionHCI 3e - Ch 3:  The interaction
HCI 3e - Ch 3: The interaction
 
HCI - Chapter 3
HCI - Chapter 3HCI - Chapter 3
HCI - Chapter 3
 
What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction Design
 
12 Designing Mobile Applications For All: Accessible Contact Manager
12 Designing Mobile Applications For All: Accessible Contact Manager12 Designing Mobile Applications For All: Accessible Contact Manager
12 Designing Mobile Applications For All: Accessible Contact Manager
 
UX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data VisualizationsUX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data Visualizations
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun Babajide
 

More from Forrester High School

More from Forrester High School (20)

Program Design
Program DesignProgram Design
Program Design
 
Database Evaluation
Database EvaluationDatabase Evaluation
Database Evaluation
 
Testing SQL
Testing SQLTesting SQL
Testing SQL
 
SQL
SQLSQL
SQL
 
Database Query Design
Database Query DesignDatabase Query Design
Database Query Design
 
Data Dictionary
Data DictionaryData Dictionary
Data Dictionary
 
Compound Keys
Compound KeysCompound Keys
Compound Keys
 
Entity Occurrence Diagrams
Entity Occurrence DiagramsEntity Occurrence Diagrams
Entity Occurrence Diagrams
 
Entity Relationship Diagrams
Entity Relationship DiagramsEntity Relationship Diagrams
Entity Relationship Diagrams
 
Database Analysis
Database AnalysisDatabase Analysis
Database Analysis
 
Software Evaluation
Software EvaluationSoftware Evaluation
Software Evaluation
 
Software Testing
Software TestingSoftware Testing
Software Testing
 
Standard Algorithms
Standard AlgorithmsStandard Algorithms
Standard Algorithms
 
File Handling
File HandlingFile Handling
File Handling
 
Python Predefined Functions
Python Predefined FunctionsPython Predefined Functions
Python Predefined Functions
 
Python Substrings
Python SubstringsPython Substrings
Python Substrings
 
Variable Scope
Variable ScopeVariable Scope
Variable Scope
 
Sub-programs
Sub-programsSub-programs
Sub-programs
 
Records in Python
Records in PythonRecords in Python
Records in Python
 
Parallel arrays in python
Parallel arrays in pythonParallel arrays in python
Parallel arrays in python
 

Recently uploaded

The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
KarakKing
 

Recently uploaded (20)

How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
Philosophy of china and it's charactistics
Philosophy of china and it's charactisticsPhilosophy of china and it's charactistics
Philosophy of china and it's charactistics
 
Plant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptxPlant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptx
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
OSCM Unit 2_Operations Processes & Systems
OSCM Unit 2_Operations Processes & SystemsOSCM Unit 2_Operations Processes & Systems
OSCM Unit 2_Operations Processes & Systems
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptx
 
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptxOn_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 

ISDD User Interface

  • 1.
  • 2. User Interface A user interface is the way in which the user interacts with and gives commands to the computer. HCI – Human Computer Interface
  • 3. Command Line Interface (CLI) User interacts with the computer by typing commands. This was the only way to interact with computers up until the 1990s. Some users still prefer to interact with computers in this way. Users had to know the exact commands, and the order they had to be entered. Can be faster for expert users. Can run multiple commands in a script file.
  • 4. Command Line Interface (CLI) User interacts with the computer by typing commands.
  • 5. Menu Drive Interface User interacts with the computer by selecting options from a menu.
  • 6. Graphical User Interface (GUI) User interacts with the computer by pointing at and selecting icons which represent a real world object.
  • 7. WIMP A WIMP interface is a type of GUI which uses: Windows – Icons – Menus - Pointers
  • 8. Other User Interfaces  Touch screen  Voice controlled / voice recognition  Screen reader  Head wand  Braille keyboard  VR
  • 9. Design - Users When designing a user interface, it is important to consider the type of user e.g. Child Adult (inexperienced user) Adult (skilled / experienced user) Person with a disability or learning difficulty Type of input / output devices (touch screen, braille keyboard, speakers etc)
  • 10. Design - Users When designing a user interface, it is important to consider the type of user.
  • 11. Design - Users When designing a user interface, it is important to consider the type of user
  • 12. Good Design Principles Good interface design is important. Consider: Colour - stylish, pleasing on the eye Layout - simple, clean, uncluttered Text – break into smaller paragraphs, headings Font - readable, good size Consistency – similar look and feel on all screens, menu items in the same place Appropriate selection options – menus, search, buttons, image buttons, links
  • 13. Good Design Principles Good interface design is important. Consider: Devices – mobile, desktop, portrait, landscape Feedback – useful and meaningful messages Intuitive – where possible the user should be able to work out what to do Customisable – the user can set their own interface, changing colours, adapting the layout in order to be able to access frequently accessed components Interactivity – button responses, quizzes, animations, sounds etc.
  • 14. Good Design Principles Colour - stylish, pleasing on the eye Layout - simple, clean, uncluttered
  • 15. Good Design Principles Colour - stylish, pleasing on the eye Layout - simple, clean, uncluttered
  • 16. Good Design Principles Text – break into smaller paragraphs, headings Font - readable, good size
  • 17. Good Design Principles Consistency – similar look and feel on all screens, menu items in the same place
  • 18. Good Design Principles Consistency – similar look and feel on all screens, menu items in the same place
  • 19. Good Design Principles Devices – mobile, desktop, portrait, landscape
  • 20. Good Design Principles Feedback – useful and meaningful messages
  • 23. Good Design Principles Appropriate selection options – menus, search, buttons, image buttons, links
  • 24. Navigation Navigation is the means of getting from one screen/page to the next The navigation structure of a program or information system can be linear, hierarchical or a combination of both.
  • 27. Accessibility Accessibility means that programs and information systems should be designed so that they can be used by people with or without disabilities.
  • 28. Accessibility Physical disability For someone with a physical disability, the mouse can be difficult to use. It is possible to: Slow the speed of movement Change the double click response time Use the number keypad as a means of moving the mouse Use TAB key to cycle between options Use keyboard shortcuts to access menus
  • 29. Accessibility Physical disability For someone with a physical disability, the keyboard can be difficult to use. Voice recognition software can help as an alternative Specialist input devices can be used
  • 30. Accessibility Visually impaired (poor vision) Users with poor vision can: Magnify areas of the screen Increase the size of fonts and icons
  • 31. Accessibility Visually impaired (colour blind) Users with colour blindness can: Change the combination of colours and screen contrast
  • 32. Accessibility Visually impaired (blind) Blind users can: Use voice recognition software Use braille keyboards Use a screen reader to read content from the screen out loud