SlideShare a Scribd company logo
1 of 14
HUMAN COMPUTER
INTERACTION: INTERFACE
DESCRIPTION
AIMAN AL-HAKIM 13DDT16F2030
Command line interface
 Way of expressing instructions to the computer directly
- function keys, single characters, short abbreviations, whole words, or a combination
 suitable for repetitive tasks
 better for expert users than novices
 offers direct access to system functionality
 command names/abbreviations should be meaningful!
Typical example: the Unix system
menus
 Set of options displayed on the screen
 Options visible
- less recall - easier to use
- rely on recognition so names should be meaningful
 Selection by:
- numbers, letters, arrow keys, mouse
- combination (e.g. mouse plus accelerators)
 Often options hierarchically grouped
- sensible grouping is needed
 Restricted form of full WIMP system
menus
 Choice of operations or services offered on the screen
 Required option selected with pointer
 problem – take a lot of screen space
 solution – pop-up: menu appears when needed
File Edit Options
Typewriter
Screen
Times
Font
Natural language
 Familiar to user
 speech recognition or typed natural language
 Problems
- vague
- ambiguous
- hard to do well!
 Solutions
- try to understand a subset
- pick on key words
Wimp interface: windows, icon, menus &
pointers
 WIMP interface
Windows
Icons
Menus
Pointers
… or windows, icons, mice, and pull-down menus!
• default style for majority of interactive computer systems, especially PCs and desktop
machines
Wimp interface: windows, icon, menus &
pointers
 WINDOWS
• Areas of the screen that behave as if they were independent
- can contain text or graphics
- can be moved or resized
- can overlap and obscure each other, or can be laid out next to one another (tiled)
• scrollbars
-allow the user to move the contents of the window up and down or from side to side
• title bars
describe the name of the window
Wimp interface: windows, icon, menus &
pointers
 ICON
• small picture or image
• represents some object in the interface
- often a window or action
• windows can be closed down (iconised)
- small representation fi many accessible windows
• icons can be many and various
- highly stylized
- realistic representations.
Wimp interface: windows, icon, menus &
pointers
 MENUS
• Set of options displayed on the screen
• Options visible
- less recall - easier to use
- rely on recognition so names should be meaningful
• Selection by:
- numbers, letters, arrow keys, mouse
- combination (e.g. mouse plus accelerators)
• Often options hierarchically grouped
- sensible grouping is needed
• Restricted form of full WIMP system
Wimp interface: windows, icon, menus &
pointers
 POINTERS
• important component
- WIMP style relies on pointing and selecting things
• uses mouse, trackpad, joystick, trackball, cursor keys or keyboard shortcuts
• wide variety of graphical images
Form-fills and spreedsheet
 Primarily for data entry or data retrieval
 Screen like paper form.
 Data put in relevant place
 Requires
- good design
- obvious correction
facilities
Point & click interfaces
 used in ..
- multimedia
- web browsers
- hypertext
 just click something!
- icons, text links or location on map
 minimal typing
3D interfaces
 virtual reality
 ‘ordinary’ window systems
- highlighting
- visual affordance
- indiscriminate use just confusing!
 3D workspaces
- use for extra virtual space
- light and occlusion give depth
- distance effects
Web navigation
 Web navigation refers to the process of navigating a network of information resources in the World Wide
Web, which is organized as hypertext or hypermedia. The user interface that is used to do so is called a web
browser.
 A central theme in web design is the development of a web navigation interface that maximizes usability.
 A website's overall navigational scheme includes several navigational pieces such as global, local,
supplemental, and contextual navigation; all of these are vital aspects of the broad topic of web navigation.[3]
Hierarchical navigation systems are vital as well since it is the primary navigation system. It allows for the user
to navigate within the site using levels alone, which is often seen as restricting and requires additional
navigation systems to better structure the website.The global navigation of a website, as another segment of
web navigation, serves as the outline and template in order to achieve an easy maneuver for the users
accessing the site, while local navigation is often used to help the users within a specific section of the site. All
these navigational pieces fall under the categories of various types of web navigation, allowing for further
development and for more efficient experiences upon visiting a webpage.

More Related Content

Similar to POLITEKNIK MALAYSIA

Hci lecture set_03_00
Hci lecture set_03_00Hci lecture set_03_00
Hci lecture set_03_00
rizwanaabassi
 

Similar to POLITEKNIK MALAYSIA (20)

ch3-interaction.ppt
ch3-interaction.pptch3-interaction.ppt
ch3-interaction.ppt
 
E3 chap-03
E3 chap-03E3 chap-03
E3 chap-03
 
ch3-interaction.pdf
ch3-interaction.pdfch3-interaction.pdf
ch3-interaction.pdf
 
ch3-interaction.pdf
ch3-interaction.pdfch3-interaction.pdf
ch3-interaction.pdf
 
e3-chap-03.power point presentaion on interst rate
e3-chap-03.power point presentaion on interst ratee3-chap-03.power point presentaion on interst rate
e3-chap-03.power point presentaion on interst rate
 
e3-chap-03.ppt
e3-chap-03.ppte3-chap-03.ppt
e3-chap-03.ppt
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
Interaction.pptx
Interaction.pptxInteraction.pptx
Interaction.pptx
 
e3-chap-03 (1).ppt
e3-chap-03 (1).ppte3-chap-03 (1).ppt
e3-chap-03 (1).ppt
 
Interaction
InteractionInteraction
Interaction
 
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
 
Hci lecture set_03_00
Hci lecture set_03_00Hci lecture set_03_00
Hci lecture set_03_00
 
SDA-lecture-F5.pptx
SDA-lecture-F5.pptxSDA-lecture-F5.pptx
SDA-lecture-F5.pptx
 
Imk pertemuan-4
Imk pertemuan-4Imk pertemuan-4
Imk pertemuan-4
 
Wimp interface
Wimp interfaceWimp interface
Wimp interface
 
CSE 5930 Assignment 2 Documentation
CSE 5930 Assignment 2 DocumentationCSE 5930 Assignment 2 Documentation
CSE 5930 Assignment 2 Documentation
 
lecture-3-1523011494 Lecture #3).pptx
lecture-3-1523011494 Lecture #3).pptxlecture-3-1523011494 Lecture #3).pptx
lecture-3-1523011494 Lecture #3).pptx
 
User interface design
User interface designUser interface design
User interface design
 
ISDD User Interface
ISDD User InterfaceISDD User Interface
ISDD User Interface
 

More from Aiman Hud

More from Aiman Hud (20)

POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 

Recently uploaded

Corporate_Science-based_Target_Setting.pptx
Corporate_Science-based_Target_Setting.pptxCorporate_Science-based_Target_Setting.pptx
Corporate_Science-based_Target_Setting.pptx
arnab132
 
Joka \ Call Girls Service Kolkata - 450+ Call Girl Cash Payment 8005736733 Ne...
Joka \ Call Girls Service Kolkata - 450+ Call Girl Cash Payment 8005736733 Ne...Joka \ Call Girls Service Kolkata - 450+ Call Girl Cash Payment 8005736733 Ne...
Joka \ Call Girls Service Kolkata - 450+ Call Girl Cash Payment 8005736733 Ne...
HyderabadDolls
 

Recently uploaded (20)

Vip Salem Call Girls 8250092165 Low Price Escorts Service in Your Area
Vip Salem Call Girls 8250092165 Low Price Escorts Service in Your AreaVip Salem Call Girls 8250092165 Low Price Escorts Service in Your Area
Vip Salem Call Girls 8250092165 Low Price Escorts Service in Your Area
 
Call Girls in Banswara { 9332606886 } VVIP NISHA Call Girls Near 5 Star Hotel
Call Girls in Banswara { 9332606886 } VVIP NISHA Call Girls Near 5 Star HotelCall Girls in Banswara { 9332606886 } VVIP NISHA Call Girls Near 5 Star Hotel
Call Girls in Banswara { 9332606886 } VVIP NISHA Call Girls Near 5 Star Hotel
 
Russian Escort Dubai 0503464457 Dubai Escorts
Russian Escort Dubai 0503464457 Dubai EscortsRussian Escort Dubai 0503464457 Dubai Escorts
Russian Escort Dubai 0503464457 Dubai Escorts
 
Introduction to heat waves and Heatwaves in Bangladesh.pptx
Introduction to heat waves and Heatwaves in Bangladesh.pptxIntroduction to heat waves and Heatwaves in Bangladesh.pptx
Introduction to heat waves and Heatwaves in Bangladesh.pptx
 
Corporate_Science-based_Target_Setting.pptx
Corporate_Science-based_Target_Setting.pptxCorporate_Science-based_Target_Setting.pptx
Corporate_Science-based_Target_Setting.pptx
 
Call Girls in Tiruppur 9332606886 ust Genuine Escort Model Sevice
Call Girls in Tiruppur  9332606886  ust Genuine Escort Model SeviceCall Girls in Tiruppur  9332606886  ust Genuine Escort Model Sevice
Call Girls in Tiruppur 9332606886 ust Genuine Escort Model Sevice
 
Call Girls Chikhali ( 8250092165 ) Cheap rates call girls | Get low budget
Call Girls Chikhali ( 8250092165 ) Cheap rates call girls | Get low budgetCall Girls Chikhali ( 8250092165 ) Cheap rates call girls | Get low budget
Call Girls Chikhali ( 8250092165 ) Cheap rates call girls | Get low budget
 
Deforestation
DeforestationDeforestation
Deforestation
 
Joka \ Call Girls Service Kolkata - 450+ Call Girl Cash Payment 8005736733 Ne...
Joka \ Call Girls Service Kolkata - 450+ Call Girl Cash Payment 8005736733 Ne...Joka \ Call Girls Service Kolkata - 450+ Call Girl Cash Payment 8005736733 Ne...
Joka \ Call Girls Service Kolkata - 450+ Call Girl Cash Payment 8005736733 Ne...
 
Bhubaneswar Call Girl Service 📞90000000📞Just Call Inaaya📲 Call Girls In Odish...
Bhubaneswar Call Girl Service 📞90000000📞Just Call Inaaya📲 Call Girls In Odish...Bhubaneswar Call Girl Service 📞90000000📞Just Call Inaaya📲 Call Girls In Odish...
Bhubaneswar Call Girl Service 📞90000000📞Just Call Inaaya📲 Call Girls In Odish...
 
Fuel Cells and Hydrogen in Transportation - An Introduction
Fuel Cells and Hydrogen in Transportation - An IntroductionFuel Cells and Hydrogen in Transportation - An Introduction
Fuel Cells and Hydrogen in Transportation - An Introduction
 
Russian Call girl Dubai 0503464457 Dubai Call girls
Russian Call girl Dubai 0503464457 Dubai Call girlsRussian Call girl Dubai 0503464457 Dubai Call girls
Russian Call girl Dubai 0503464457 Dubai Call girls
 
Call Girls in Shadnagar / 8250092165 Genuine Call girls with real Photos and ...
Call Girls in Shadnagar / 8250092165 Genuine Call girls with real Photos and ...Call Girls in Shadnagar / 8250092165 Genuine Call girls with real Photos and ...
Call Girls in Shadnagar / 8250092165 Genuine Call girls with real Photos and ...
 
Hertwich_EnvironmentalImpacts_BuildingsGRO.pptx
Hertwich_EnvironmentalImpacts_BuildingsGRO.pptxHertwich_EnvironmentalImpacts_BuildingsGRO.pptx
Hertwich_EnvironmentalImpacts_BuildingsGRO.pptx
 
High Profile Call Girls Service in Udhampur 9332606886 High Profile Call G...
High Profile Call Girls Service in Udhampur   9332606886  High Profile Call G...High Profile Call Girls Service in Udhampur   9332606886  High Profile Call G...
High Profile Call Girls Service in Udhampur 9332606886 High Profile Call G...
 
Mira Road Comfortable Call Girls ,09167354423,Mira Road Model Call Girls .
Mira Road  Comfortable Call Girls ,09167354423,Mira Road Model Call Girls .Mira Road  Comfortable Call Girls ,09167354423,Mira Road Model Call Girls .
Mira Road Comfortable Call Girls ,09167354423,Mira Road Model Call Girls .
 
Call Girls in Dattatreya Nagar / 8250092165 Genuine Call girls with real Phot...
Call Girls in Dattatreya Nagar / 8250092165 Genuine Call girls with real Phot...Call Girls in Dattatreya Nagar / 8250092165 Genuine Call girls with real Phot...
Call Girls in Dattatreya Nagar / 8250092165 Genuine Call girls with real Phot...
 
Call Girls in Gachibowli / 8250092165 Genuine Call girls with real Photos and...
Call Girls in Gachibowli / 8250092165 Genuine Call girls with real Photos and...Call Girls in Gachibowli / 8250092165 Genuine Call girls with real Photos and...
Call Girls in Gachibowli / 8250092165 Genuine Call girls with real Photos and...
 
A Review on Integrated River Basin Management and Development Master Plan of ...
A Review on Integrated River Basin Management and Development Master Plan of ...A Review on Integrated River Basin Management and Development Master Plan of ...
A Review on Integrated River Basin Management and Development Master Plan of ...
 
Russian Call girls in Dubai 0508644382 Dubai Call girls
Russian Call girls in Dubai 0508644382 Dubai Call girlsRussian Call girls in Dubai 0508644382 Dubai Call girls
Russian Call girls in Dubai 0508644382 Dubai Call girls
 

POLITEKNIK MALAYSIA

  • 2. Command line interface  Way of expressing instructions to the computer directly - function keys, single characters, short abbreviations, whole words, or a combination  suitable for repetitive tasks  better for expert users than novices  offers direct access to system functionality  command names/abbreviations should be meaningful! Typical example: the Unix system
  • 3. menus  Set of options displayed on the screen  Options visible - less recall - easier to use - rely on recognition so names should be meaningful  Selection by: - numbers, letters, arrow keys, mouse - combination (e.g. mouse plus accelerators)  Often options hierarchically grouped - sensible grouping is needed  Restricted form of full WIMP system
  • 4. menus  Choice of operations or services offered on the screen  Required option selected with pointer  problem – take a lot of screen space  solution – pop-up: menu appears when needed File Edit Options Typewriter Screen Times Font
  • 5. Natural language  Familiar to user  speech recognition or typed natural language  Problems - vague - ambiguous - hard to do well!  Solutions - try to understand a subset - pick on key words
  • 6. Wimp interface: windows, icon, menus & pointers  WIMP interface Windows Icons Menus Pointers … or windows, icons, mice, and pull-down menus! • default style for majority of interactive computer systems, especially PCs and desktop machines
  • 7. Wimp interface: windows, icon, menus & pointers  WINDOWS • Areas of the screen that behave as if they were independent - can contain text or graphics - can be moved or resized - can overlap and obscure each other, or can be laid out next to one another (tiled) • scrollbars -allow the user to move the contents of the window up and down or from side to side • title bars describe the name of the window
  • 8. Wimp interface: windows, icon, menus & pointers  ICON • small picture or image • represents some object in the interface - often a window or action • windows can be closed down (iconised) - small representation fi many accessible windows • icons can be many and various - highly stylized - realistic representations.
  • 9. Wimp interface: windows, icon, menus & pointers  MENUS • Set of options displayed on the screen • Options visible - less recall - easier to use - rely on recognition so names should be meaningful • Selection by: - numbers, letters, arrow keys, mouse - combination (e.g. mouse plus accelerators) • Often options hierarchically grouped - sensible grouping is needed • Restricted form of full WIMP system
  • 10. Wimp interface: windows, icon, menus & pointers  POINTERS • important component - WIMP style relies on pointing and selecting things • uses mouse, trackpad, joystick, trackball, cursor keys or keyboard shortcuts • wide variety of graphical images
  • 11. Form-fills and spreedsheet  Primarily for data entry or data retrieval  Screen like paper form.  Data put in relevant place  Requires - good design - obvious correction facilities
  • 12. Point & click interfaces  used in .. - multimedia - web browsers - hypertext  just click something! - icons, text links or location on map  minimal typing
  • 13. 3D interfaces  virtual reality  ‘ordinary’ window systems - highlighting - visual affordance - indiscriminate use just confusing!  3D workspaces - use for extra virtual space - light and occlusion give depth - distance effects
  • 14. Web navigation  Web navigation refers to the process of navigating a network of information resources in the World Wide Web, which is organized as hypertext or hypermedia. The user interface that is used to do so is called a web browser.  A central theme in web design is the development of a web navigation interface that maximizes usability.  A website's overall navigational scheme includes several navigational pieces such as global, local, supplemental, and contextual navigation; all of these are vital aspects of the broad topic of web navigation.[3] Hierarchical navigation systems are vital as well since it is the primary navigation system. It allows for the user to navigate within the site using levels alone, which is often seen as restricting and requires additional navigation systems to better structure the website.The global navigation of a website, as another segment of web navigation, serves as the outline and template in order to achieve an easy maneuver for the users accessing the site, while local navigation is often used to help the users within a specific section of the site. All these navigational pieces fall under the categories of various types of web navigation, allowing for further development and for more efficient experiences upon visiting a webpage.