SlideShare a Scribd company logo
1 of 36
Human and Computer Interaction
Menu Based Interface
THEO LUCKITA MILALA
11453105939
Program Studi S1 Sistem Informasi
Fakultas Sains dan Teknologi
Universitas Islam Sultan Syarif Kasim Riau
http://sif.uin-suska.ac.id/
http://fst.uin-suska.ac.id/
http://www.uin-suska.ac.id/
A. Understanding Graphic Interface Components
The graphical interface component is a form of view that can
be seen and is generally fixed that is always used in a computer
application program.
Component graphical interface aims to meet one of the criteria
of interaction between human and computer that is to get the user's
attention to the application program created, of course, an
application program must have a view that attracts the attention of
users.
When a person works with a computer, he will interact with the
computer using certain ways. The common way used is that the user
gives a command to the computer, and the computer responds by
printing or writing the response on the display screen. From the
principle of "input-process-output", users do not know (or do not want to
know) with what (process) is actually happening in the computer
system. In other words, through input and output users and computers
interact with each other.
In order for users and computers to interact with each other,
so that users feel the friendliness of the computer system to him,
required a medium that allows interaction takes place. A simple
example of this interaction is when a user implements a ReadLn
statement to enter data requested by the computer, and a WriteLn
statement that is used as a means to print the results of a process
that has been done by the computer.
MENU
The menu is a list of a limited number of options that are
usually a sentence or set of multiple words. Menu system is the right
choice to show the capabilities and facilities owned by an application
program to the user.
Judging from the appearance techniques options on a menu
system is known two types of menu system:
SINGLE MENU
The single menu allows the user to select one of two
options, or a number of options available. A single menu
can be either pop-ups in an active or permanently available
work area.
Another variation of the single menu is the many
options menu that allows the user to select more than
one option. This type of menu is implemented using an
interaction component in the form of a check box.
FLOOR MENU AND SELECTOR SELECTOR
In 1995, most menu systems still wrote down the options
available using the entire screen. The menu list is usually
written with sentences - long enough sentences. Various menus
like this are called menu lists.
Determination of the options on the flat menu can be done in
two ways, the first way is to use a selector of each option available.
The second way is to move the highlight to an option and then
confirmed by pressing the enter key.
To facilitate the user in making a choice, in each option is
often included a selector that can be a number, letters, or mix
numbers with letters.
If the number of options is equal to or less than 10
pieces, we can use a numerical selector. But if the choice is
more than 10, the use of the numeric selector is less suitable
because the user has to press two buttons to select an option
with 10 or more selector numbers.
Example of the use of a selector
The incompatible selector has advantages and disadvantages
that are the opposite of a compatible connector. There is a very
basic disadvantage of using incompatible selectors, which the
user must memorize again if the sequence or sequence of random
selections. This is what hinders the process of searching options
on the menu is not compatible.
Drag down menu
Is a menu that has many options but because of space
limitations of choice - options that are only visible when the main
menu in the click is usually placed at the top of the window. This type
of menu was first introduced by Xerox star, Apple Lisa, and Apple
Machintosh.
In the list of vertically presented options there are often:
1. Key-quick keys, such as a combination of Mac + K (on a Macintosh)
or Ctrl-K (on Windows). Used to speed up menu selection.
2. The three-point symbol (...) is a sign that clicking will bring up a
new dialog. While there is no point is usually a menu that contains
a direct command.
3. The arrow symbol (>) indicates that the selected menu still has
another sub-option.
MENU BASED ICON AND TOOLBAR
If all the menus are displayed in addition to confusing
the user it also reduces the user's workspace. Thus, in both
types of menu above the designer must provide facilities to
appear eliminate the choice - a particular choice according to
the wishes of the user.
MENU DENGAN PILIHAN PANJANG
There are several ways to display a long menu:
1. Scroll Menu (Scroll Menu)
2. Combo Box (Combo Box)
3. Fish Eye Menu
4. Slider
5. The 2 dimensional menu
MENU AND HOTLINK INSTALLED
In certain circumstances, the choice is often embedded in a
text or photo / image. This is because there is no special location
that can be used to place the options available.
For example in an aerial photograph taken from Google earth. The
available options are symbolized by a small blue balloon and a
description of the place, such as the UGM Technical Commission.
By clicking on the little blue balloon, some important information
will appear.
Embedded links are introduced by the Hyperties system
used on two commercial hyperlink projects (Shiderman 1988;
Shneiderman and Kearsley, 1989), and become the inspiration
for hotlinks on websites. The embedded connection allows the
user to see the options in context and avoid any other annoying
and inconvenient choices on the display screen.
MENU BREADCRUMB
Otter and Johnson (2000), called a phenomenon with the
term disorientation or lost in cyberspace, when users surf in
cyberspace by visiting websites and will feel lost and do not know
what to do. To help users know their current position, the
breadcrumb menu is often used.
example of breadcrumb menu
Nielsen further said that since 1995 he recommended the
breadcrumb menu for several reasons:
1. The breadcrumb menu shows the use of the site's location
to help them understand their position against other parts of
the site.
2. The breadcrumb menu allows "one-click access to higher site
levels" so that it can help users who have already entered too
deep into the menu structure pointing to unwanted sections.
3. The breadcrumb menu never poses a problem in testing (by)
the user; a person may get caught by not looking at these tiny
design elements, but they never blame-imply a breadcrumb trail
or have difficulty in operating it.
4. The breadcrumb menu only requires a narrow place.
MANY COMBINATIONS OF MENU
A number of interrelated menus can be used to guide users using
a number of options. Users see this as a series of linearly sequential
menus.
For example, booking tickets can be made online. The first
time someone orders a ticket, he or she first has to choose
whether the ticket is one-way or go-home, followed by choosing
the flight date, the number of tickets to be purchased (including
whether there are babies or children). After the prospective ticket
buyer will be required to fill out the identity and some relevant
information with prospective passengers, the mode of payment,
up to the electronic ticket printing.
On the menu simultaneously, users will be faced with
an interface that contains various options and users can choose
any menu that exists freely
MENU TRANSLATE TREE
The tree structure is a number of options can easily be
grouped into separate categories with unique distinctions.
Grouping and indexing are complex jobs, and in many situations
there is not a single solution acceptable to everyone.
Menu searches can be done in a few seconds if each level grouping is
made naturally and easily understood by the user, and if the user knows
the target.
Conversely, if the grouping is not clear and users have only a vague
picture of what to look for, they can get lost in the existing menu tree
(Norman and Chin, 1988).
The advantage of a tree structure is being able to display large
amounts of information to the original or inactive users.
Example menu tree structure
SITE MAP
Users will find it increasingly difficult to determine their
position as the menu depth grows so as to experience what is
called the disorientation or get lost in cyberspace (Conklin, 1986).
Basically, according to Conklin, a user is called disoriented or lost
if he:
1. not knowing its position (inside website),
2. not knowing whether there is a desired destination point, and
3. not knowing how to get to the desired destination point.
To solve the problem, the designer adds a sitemap that
contains a sort of summary of the Web site's content.
NETWORKING MENU AND NOT SPOT
The menu web serves to give the user the freedom to move to
the next menu without having to go back to the start menu. When a
user moves from tree to nets the menu does not rotate and the menu
web spins, the chances of getting lost are getting bigger.
Confusion and disorientation are often reported by users of
Web sites that have difficulty navigating large-scale spinning webs
(Shneiderman and Plaisant, 2005).
In the tree structure there is a menu that serves as the
main menu, so penelurusan behind is easier to do. In the net
structure, in order to perform a backward scan, a stack of visited
menus must be created.
In an application often occurs is wrong in using the type of
menu on a system and do not give keseluasan to customers in
doing activities.
THANK YOU

More Related Content

Similar to Slide interaksi manusia dan komputer

Usability Guideline
Usability GuidelineUsability Guideline
Usability Guideline
Duc Ta
 
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
 
Designing user interface module 4
Designing user interface module 4Designing user interface module 4
Designing user interface module 4
DBPMCF
 
Forms and design
Forms and designForms and design
Forms and design
fizahPhd
 

Similar to Slide interaksi manusia dan komputer (20)

Hci user interface-design principals lec 7
Hci user interface-design principals lec 7Hci user interface-design principals lec 7
Hci user interface-design principals lec 7
 
Hci user interface-design principals
Hci user interface-design principalsHci user interface-design principals
Hci user interface-design principals
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
Usability Guideline
Usability GuidelineUsability Guideline
Usability Guideline
 
User Interface Design
User Interface DesignUser Interface Design
User Interface Design
 
System Menu And Navigation
System Menu And NavigationSystem Menu And Navigation
System Menu And Navigation
 
Application Design - Part 3
Application Design - Part 3Application Design - Part 3
Application Design - Part 3
 
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 in Software Engineering SE15
User Interface Design in Software Engineering SE15User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15
 
Chapter 3 - Variety of Dialogue
Chapter 3  - Variety of DialogueChapter 3  - Variety of Dialogue
Chapter 3 - Variety of Dialogue
 
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 ...
 
Designing user interface module 4
Designing user interface module 4Designing user interface module 4
Designing user interface module 4
 
Introduction To Usability
Introduction To UsabilityIntroduction To Usability
Introduction To Usability
 
Forms and design
Forms and designForms and design
Forms and design
 
Application Design - Part 2
Application Design - Part 2Application Design - Part 2
Application Design - Part 2
 
SECh1516
SECh1516SECh1516
SECh1516
 
Chapter 11 designing interfaces and dialogues
Chapter 11 designing interfaces and dialoguesChapter 11 designing interfaces and dialogues
Chapter 11 designing interfaces and dialogues
 
Heuristic evaluation
Heuristic evaluationHeuristic evaluation
Heuristic evaluation
 
Web usability a complete list of ux ui best practices
Web usability a complete list of ux ui best practicesWeb usability a complete list of ux ui best practices
Web usability a complete list of ux ui best practices
 
Mobiles & usbaility
Mobiles & usbailityMobiles & usbaility
Mobiles & usbaility
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Recently uploaded (20)

MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 

Slide interaksi manusia dan komputer

  • 1. Human and Computer Interaction Menu Based Interface THEO LUCKITA MILALA 11453105939 Program Studi S1 Sistem Informasi Fakultas Sains dan Teknologi Universitas Islam Sultan Syarif Kasim Riau http://sif.uin-suska.ac.id/ http://fst.uin-suska.ac.id/ http://www.uin-suska.ac.id/
  • 2. A. Understanding Graphic Interface Components The graphical interface component is a form of view that can be seen and is generally fixed that is always used in a computer application program. Component graphical interface aims to meet one of the criteria of interaction between human and computer that is to get the user's attention to the application program created, of course, an application program must have a view that attracts the attention of users.
  • 3. When a person works with a computer, he will interact with the computer using certain ways. The common way used is that the user gives a command to the computer, and the computer responds by printing or writing the response on the display screen. From the principle of "input-process-output", users do not know (or do not want to know) with what (process) is actually happening in the computer system. In other words, through input and output users and computers interact with each other.
  • 4. In order for users and computers to interact with each other, so that users feel the friendliness of the computer system to him, required a medium that allows interaction takes place. A simple example of this interaction is when a user implements a ReadLn statement to enter data requested by the computer, and a WriteLn statement that is used as a means to print the results of a process that has been done by the computer.
  • 5. MENU The menu is a list of a limited number of options that are usually a sentence or set of multiple words. Menu system is the right choice to show the capabilities and facilities owned by an application program to the user. Judging from the appearance techniques options on a menu system is known two types of menu system:
  • 6. SINGLE MENU The single menu allows the user to select one of two options, or a number of options available. A single menu can be either pop-ups in an active or permanently available work area.
  • 7. Another variation of the single menu is the many options menu that allows the user to select more than one option. This type of menu is implemented using an interaction component in the form of a check box.
  • 8. FLOOR MENU AND SELECTOR SELECTOR In 1995, most menu systems still wrote down the options available using the entire screen. The menu list is usually written with sentences - long enough sentences. Various menus like this are called menu lists.
  • 9. Determination of the options on the flat menu can be done in two ways, the first way is to use a selector of each option available. The second way is to move the highlight to an option and then confirmed by pressing the enter key. To facilitate the user in making a choice, in each option is often included a selector that can be a number, letters, or mix numbers with letters.
  • 10. If the number of options is equal to or less than 10 pieces, we can use a numerical selector. But if the choice is more than 10, the use of the numeric selector is less suitable because the user has to press two buttons to select an option with 10 or more selector numbers.
  • 11. Example of the use of a selector
  • 12.
  • 13. The incompatible selector has advantages and disadvantages that are the opposite of a compatible connector. There is a very basic disadvantage of using incompatible selectors, which the user must memorize again if the sequence or sequence of random selections. This is what hinders the process of searching options on the menu is not compatible.
  • 14. Drag down menu Is a menu that has many options but because of space limitations of choice - options that are only visible when the main menu in the click is usually placed at the top of the window. This type of menu was first introduced by Xerox star, Apple Lisa, and Apple Machintosh.
  • 15. In the list of vertically presented options there are often: 1. Key-quick keys, such as a combination of Mac + K (on a Macintosh) or Ctrl-K (on Windows). Used to speed up menu selection. 2. The three-point symbol (...) is a sign that clicking will bring up a new dialog. While there is no point is usually a menu that contains a direct command. 3. The arrow symbol (>) indicates that the selected menu still has another sub-option.
  • 16. MENU BASED ICON AND TOOLBAR If all the menus are displayed in addition to confusing the user it also reduces the user's workspace. Thus, in both types of menu above the designer must provide facilities to appear eliminate the choice - a particular choice according to the wishes of the user.
  • 17. MENU DENGAN PILIHAN PANJANG There are several ways to display a long menu: 1. Scroll Menu (Scroll Menu)
  • 18. 2. Combo Box (Combo Box) 3. Fish Eye Menu
  • 19. 4. Slider 5. The 2 dimensional menu
  • 20. MENU AND HOTLINK INSTALLED In certain circumstances, the choice is often embedded in a text or photo / image. This is because there is no special location that can be used to place the options available. For example in an aerial photograph taken from Google earth. The available options are symbolized by a small blue balloon and a description of the place, such as the UGM Technical Commission. By clicking on the little blue balloon, some important information will appear.
  • 21.
  • 22. Embedded links are introduced by the Hyperties system used on two commercial hyperlink projects (Shiderman 1988; Shneiderman and Kearsley, 1989), and become the inspiration for hotlinks on websites. The embedded connection allows the user to see the options in context and avoid any other annoying and inconvenient choices on the display screen.
  • 23. MENU BREADCRUMB Otter and Johnson (2000), called a phenomenon with the term disorientation or lost in cyberspace, when users surf in cyberspace by visiting websites and will feel lost and do not know what to do. To help users know their current position, the breadcrumb menu is often used.
  • 24. example of breadcrumb menu Nielsen further said that since 1995 he recommended the breadcrumb menu for several reasons: 1. The breadcrumb menu shows the use of the site's location to help them understand their position against other parts of the site.
  • 25. 2. The breadcrumb menu allows "one-click access to higher site levels" so that it can help users who have already entered too deep into the menu structure pointing to unwanted sections. 3. The breadcrumb menu never poses a problem in testing (by) the user; a person may get caught by not looking at these tiny design elements, but they never blame-imply a breadcrumb trail or have difficulty in operating it. 4. The breadcrumb menu only requires a narrow place.
  • 26. MANY COMBINATIONS OF MENU A number of interrelated menus can be used to guide users using a number of options. Users see this as a series of linearly sequential menus.
  • 27. For example, booking tickets can be made online. The first time someone orders a ticket, he or she first has to choose whether the ticket is one-way or go-home, followed by choosing the flight date, the number of tickets to be purchased (including whether there are babies or children). After the prospective ticket buyer will be required to fill out the identity and some relevant information with prospective passengers, the mode of payment, up to the electronic ticket printing.
  • 28. On the menu simultaneously, users will be faced with an interface that contains various options and users can choose any menu that exists freely
  • 29. MENU TRANSLATE TREE The tree structure is a number of options can easily be grouped into separate categories with unique distinctions. Grouping and indexing are complex jobs, and in many situations there is not a single solution acceptable to everyone.
  • 30. Menu searches can be done in a few seconds if each level grouping is made naturally and easily understood by the user, and if the user knows the target. Conversely, if the grouping is not clear and users have only a vague picture of what to look for, they can get lost in the existing menu tree (Norman and Chin, 1988). The advantage of a tree structure is being able to display large amounts of information to the original or inactive users.
  • 31. Example menu tree structure
  • 32. SITE MAP Users will find it increasingly difficult to determine their position as the menu depth grows so as to experience what is called the disorientation or get lost in cyberspace (Conklin, 1986). Basically, according to Conklin, a user is called disoriented or lost if he: 1. not knowing its position (inside website), 2. not knowing whether there is a desired destination point, and 3. not knowing how to get to the desired destination point.
  • 33. To solve the problem, the designer adds a sitemap that contains a sort of summary of the Web site's content.
  • 34. NETWORKING MENU AND NOT SPOT The menu web serves to give the user the freedom to move to the next menu without having to go back to the start menu. When a user moves from tree to nets the menu does not rotate and the menu web spins, the chances of getting lost are getting bigger. Confusion and disorientation are often reported by users of Web sites that have difficulty navigating large-scale spinning webs (Shneiderman and Plaisant, 2005).
  • 35. In the tree structure there is a menu that serves as the main menu, so penelurusan behind is easier to do. In the net structure, in order to perform a backward scan, a stack of visited menus must be created. In an application often occurs is wrong in using the type of menu on a system and do not give keseluasan to customers in doing activities.