BACKGROUND
Human Computer Interaction (HCI) is the process and study of building various
computer interfaces and establishing their usability while keeping the predicted user's thinking in
mind. It hence establishes a strong relationship between the computer and the human beings,
mutual understandings of the humans, and an evolution of computer system software that will
simplify the work of the user on such computer systems, boosting the morale of the humans to
use the interface and should be able to boost their ability to use the computer interfaces
designed. The human computer interaction is made up of three pieces, as implied by the name:
the human, the computer, and the interaction. This focuses on the mental models in HCI and
the benefits and drawbacks of designing human computer interfaces in mental models. The hCI
components will also be explored in this paper and the many methodologies that may be utilized
to develop the HCI. Nowadays, technology has permeated our daily lives and has an impact on
them. One does not require to own or use a smartphone or computer to experience HCI
technology. People come direct contact with HCI when they use an ATM, an item of food
vending machine, or a snack vending machine. This is in part because of the significance of HCI
in creating the interfaces of such systems that make them helpful and efficient.
What exactly is an interface? Interfaces are tools and concepts used by technology
developers to connect hardware and software components. They let all system components to
communicate with one another via an input-output system and precise protocols while also
allowing them to operate independently. In addition, it defines interaction, control, and
communication. It is a vital component of technology that allows users and technologies to
interact. As a result, different types of interfaces exist, including user interfaces (UI). A program's
or device's user interface (UI) affects how users interact with it and how information is shown on
a screen. Many of these tools have shown considerable productivity increases for programmers
and have grown into key commercial products. UI page and app elements include buttons, text,
pictures, scroll bars, form fields, and page layout. As a result, new forms of User Interface (UI)
have emerged, each with its own definition, such as Graphical User Interface (GUI), which is a
digital interface in which a user interacts with graphical components such as icons, buttons, and
menus. The visuals in the user interface of a GUI transmit information relevant to the user as
well as actions that they can take. Second, the Form fill-in style for gathering information from a
structured screen that includes a sequence of controls or fields into which the user either types
information or selects an option, or options, from a list of possibilities. Finally, Menu Driven
Interface refers to a set of options or choices from which a user must select. On screens, the
user selects a choice with a pointing device or keystroke. These three user interfaces will be
linked to Amazon, our well-known website or app.
As we all know, Amazon (Amazon.com) is the world's largest online retailer as well as a
renowned cloud service provider, hosting cloud computing based infrastructure and platform
services for customer companies using their own data centers and computational resources.
Amazon began as an online bookselling service and has since evolved into an internet-based
business operation primarily focused on offering e-commerce, cloud computing, digital
streaming, and artificial intelligence (AI) services. This company has a massive product
selection and inventory, allowing customers to purchase almost everything, including clothing,
beauty products, gourmet cuisine, jewelry, books, movies, electronics, pet supplies, furniture,
toys, garden supplies, and household goods. Thus, Amazon displays the user interface to allow
purchasers to explore the items and services, read the descriptions and reviews, and decide
whether or not to purchase the items. As stated in the second paragraph, each part of those
three interfaces, which are Graphically User Interface (GUI), Form-fill Interface, Menu Selection
Interface occurs on each section of Amazon websites.
MOTIVATION
Due to the numerous qualities, researching the interface and matching it to common
apps such as Amazon is challenging. To begin, the user interface must be thoroughly examined
to discover the components.
Each of the three user interfaces mentioned has its own set of components, and it'll
begin with the first, the Graphic User Interface (GUI). A graphical user interface (GUI) displays
objects that transmit information and represent actions that the user can perform, and the
objects change colour, size, or visibility when the user interacts with them. Every GUI contains a
set of graphics, shapes, and colours that have been coded to accomplish specific tasks. These
graphics are frequently chosen to be straightforward for consumers to understand. The Amazon
logo, for example, is in the shape of a lowercase alphabet " a " with an arrow styled like a
smile.The first GUI component that has been focused on is input control, which includes a
button on the display screen that has been tapped or clicked. When a user attempts to use a
mouse button to explore seller images, click a research box, add something to their basket, or
make a purchase on an Amazon app or website, they must click a button given on such apps or
websites. The same applies for touch screen buttons, where the user must tap the button to
look where they are interested. However, there are some issues with this component because it
can be unfriendly to the user if the button is not tapped or clicked. In other words, it is stuck and
will not proceed to the next section. This button has significance to all apps and websites since
it functions to fulfil the needs of the user. The second component to be focused on in GUI is
informational components, which provide the user with information on the status of a task or
other system information. Amazon, for example, will send a notification icon or progress bar to
maintain tracking and updating the Items so that the user is aware of the status of their items.
However, there may be some issues with this component because a few notification icons do
not appear on Amazon apps because the item number is not tracked.
Form-fill, also known as a form-based consider and input/output forms, is the next user
interface. As we all know, forms for display screens are designed to show what information
should be entered and where it should be entered. There are two sorts of forms: single-scrolling
screen forms and multiple linked page forms. The form is frequently a facsimile of a paper form
that the user is already familiar with. According to this study, form-fill interface might refer to
Amazon applications or websites since users who want to buy things from Amazon must
complete out a form. They must fill out forms such as payment forms, which need them to enter
account numbers, bank types, payment methods, and vouchers for discounts. A form-fill
interface is vital to a user because if they do not complete out the forms, they will be unable to
purchase the things they desire caused by a lack of payment information. However, the Form fill
interface can be a problem if the fill in space is insufficient, as well as any typos or mistakes
cannot be corrected and the user need to restart the process. As a result, it is important for the
user to complete the forms in order to receive what they have purchased. Aside from that, the
form fill can be found under Amazon's section delivery information, where there will be a form to
fill out the address, city name, postcode, country, and personal information such as phone
number and name. The user must complete these forms in order for the things to be delivered
smoothly and without incident. It becomes more difficult when the form fill interface cannot
detect punctuation. For example, some users have the apostrophe on they name section.
Finally, the menu-based interface shows users Menu-driven interfaces provide users
with a series of hierarchical menus containing lists of functions. Most menus differ from a few
basic types, such as single and sequential. Menus can be configured using a keyboard, light
pen, touch screen, or mouse entry. Users can identify selections using a number, letter, or
keyword, or they can use a mouse to click on a selection.As a result, Amazon applications and
websites employ a menu-based interface to allow users to select any products they desire.
When users click the objects, a menu with options for colour, size, material, height, weight, and
quantity will appear. However, when you hover over our menus, the menu-based design takes
up a lot of space on the website, making it difficult to view other material. Some menus are too
small to read, and others have difficult-to-see fonts. It has significance to have simple menus so
that users of Amazon websites or applications easily select what they want.
LITERATURE REVIEW
Difference between UI and UX
In the computer world, the phrases user interface (UI) and user experience (UX) are
sometimes used interchangeably. What is the distinction between a user interface and a user
experience? The user interface (UI) refers to the panels, buttons, toggles, icons, and other
visual elements with which you interact when using a website, app, or other electronic device.
Meanwhile, user experience (UX) refers to the process of improving a product's usability and
accessibility in order to increase user fulfilment. The design of the product's interface, on the
other hand, is what the user sees when engaging with the product.
UI and UX designers both play important parts in the product development lifecycle. UX
designers concentrate on the user's interaction with a product. The goal is to create things that
are useful, easy to use, and entertaining to use. While the phrase "user experience" is
commonly associated with digital products, it can also be applied to non-digital products and
services. A UX designer's typical activities may include doing user research to determine any
goals, wants, behaviours, or pain spots associated with a product interaction. Second, create
user personas based on target clients, followed by user testing to validate design decisions and
uncover problems.
Following that, UI designers build the graphical components of mobile apps, websites, and
devices—the elements with which a user directly interacts. Unlike UX, which can refer to almost
any product or service, UI is limited to digital items. A UI designer strives to create visually
appealing apps and websites that are also simple to use. A UI designer's typical activities
include organising page layouts, selecting colour palettes and fonts, and developing interactive
elements such as buttons, scrollers, text fields, toggles, and drop-down menus.
Principles Of User Interface (UI)
According to Lucy Lockwood's usage-centered method of design. Usage-centered
design is a method of designing user interfaces that focuses on user intents and usage patterns.
It analyses users' roles in relation to systems and applies abstract (essential) use cases for task
analysis.
To begin, structure principles refer to design principles that must specifically display the
user interface in practical and significant ways based on clear, consistent models that are clear
and recognisable for users, putting related things together and dividing unrelated things, and
making similar things resemble one another. The structural principle is concerned with the user
interface's general architecture. Aside from that, the simplicity principle refers to the design
making simple, common tasks effortless, communicating simply and clearly in the user's own
language, and providing good shortcuts that are meaningfully related to longer procedures to
ensure user understanding.Next, The feedback principles. It refers to the design's responsibility
to keep users informed about actions or interpretations, changes in status or condition, and
errors or exceptions that are relevant and of interest to the user by employing concise, clear,
and unambiguous language that is familiar to the user. Finally, the tolerance principle states that
the design should be flexible and tolerant, lowering the cost of errors and misuse by allowing
ruining and redoing, while avoiding errors wherever possible by tolerating varied the inputs and
sequences and interpreting all reasonable actions as reasonable.
RESEARCH QUESTIONS
1. Tell us what you thought about the overall Amazon application or website and the
content layout
2. How long was the gap between finding out about Human Computer Interaction (HCI)
relates with User Interface (UI) ?
3. Does Graphical User Interface ( GUI ) are important in software and hardware
development?
4. What does the difference between User Interface (UI) and User Experience (UX) ?
5. How would you compare Command-line interface and Menu-driven interface ?
6. If you could change one thing about Amazon application or websites, what would it be ?
7. How does Graphical User Interface ( GUI ) be unfriendly user?
8. What makes the Form-fill interface is important to every websites or apps?
9. What are the difference between software and hardware?
10. What is the difference between application software and an application platform?
MATERIAL
Software
Software is a type of programme that allows a user to do a specific task or is utilised to
operate a computer. It tells all peripheral devices on a computer system what to do and how to
do it. Then, software acts as a bridge between the user and computer hardware. In general,
software is a set of instructions or programmes that teach a computer to perform a given
task.Software is everything that "runs" on a computer, from an operating system to a diagnostic
tool, video games, or apps. Microsoft Office, Multimedia Player, and Apple IOS are examples of
software creation.
As a result, various types of software exist, the first of which is system software. It is the
software that is required to run the computer's hardware as well as other application software,
and it acts as an interface between the hardware and user applications. The primary or alpha
software of a computer system is the systems software, which handles the majority of the
running hardware. This system software is further classified into four major types, the first one
which is the operating system,responsible for the operation of all physical components and their
interoperability to complete tasks successfully. Second, the programming language refers to the
language processor that is employed in the communication of computer instructions. In the
domain of human-machine interaction, there are three sorts of languages: machine-level
languages that only recognise digit signals or binary codes, and binary languages that consist of
strings of 0's and 1's. Second, assembly-level language is a low-level programming language
for a computer or other programmable device that is specific to a given computer architecture.
Finally, high-level language employs English-like statements and code that is simple to read and
understand in the human world. Java, HTML, PHP, Python, and other programming languages
are examples.
Finally, the application software. There are two categories, the first of which is
General Purpose Software. These are the forms of application software that are pre-built and
manufactured by a corporation or human. For example, Microsoft Excel, for example, is used to
create spreadsheets, and Adobe Photoshop is utilized for design and animation. The second
form of application software is Special Purpose Software, which is highly adjustable and
typically utilised in a real-time or corporate setting, such as a ticket reservation system or a hotel
reservation system.
Hardware
Hardware is best defined as any physical component of a computer system that has a
circuit board, integrated circuits (ICs), or other electronics. The screen on which you are
perusing this is an excellent example of hardware. It is hardware, whether it be a display, tablet,
or smartphone. A machine would not exist without hardware, and the user would be unable to
use software. Computer hardware is classified as either internal or external components.
Internal hardware components are those required for the computer to function effectively, yet
external hardware components are those connected to the device to add or enhance
functionality.
To begin, external hardware components, also known as peripheral components, are
things that are frequently attached to a computer and run either input or output operations.
These hardware devices are intended to either send instructions to the programme (input) or to
display the results of its execution (output). A mouse, for example, is a hand-held pointing
device that moves a cursor across a computer screen and allows interaction with things on the
screen. It could be either wired or wireless. A microphone, on the other hand, is a device that
converts sound waves into electrical signals and helps computer-based audio communications.
Finally, a memory card is a portable external storage media device, such as a CompactFlash
card, that is used to store media or data files. Aside from that, there is a camera, a touchpad, a
keyboard, and a USB flash drive.
The second component of hardware is internal hardware. Internal components jointly
process or store the instructions provided by the programme or operating system (OS).
Consider a motherboard as an example. This is a printed circuit board that holds the central
processor unit (CPU) and other critical internal hardware and serves as the primary
communication hub for all other hardware components. The word "hard drive" refers to physical
storage devices, such as hard disc drives, that retain both permanent and temporary data in
various formats. Programmes, operating systems, device files, and images are all examples of
data. Finally, a network interface card, also known as a network adapter or local area network
adapter, is a circuit board or chip that allows a computer to connect to a network. It normally
supports connectivity to an Ethernet network.
ADVANTAGES AND DISADVANTAGES
As previously stated, the sorts of interfaces that have been focused on include graphical
user interfaces (GUI), form-fill interfaces, and menu-based interfaces. When it comes to
software development, each of them offers advantages of their own. One example of software is
the Amazon application and website which is under the types of applications software.
There are two categories of applications software, one is general purpose software and
second is specific purpose software. The term "general-purpose software" refers to forms of
application software that a corporation or human build and manufacture, even though it relates
to Amazon apps. As an example, Amazon.com facilitates global online shopping. Software is
defined as a collection of data, programmes, procedures, instructions, and documentation that
performs preset tasks on a computer system. It allows users to interact with computers. The
question is how successfully does the software Amazon connect with the users? It can connect
with people by opening websites or applications on devices such as computers, tablets, or
smartphones and fulfilling all of the users' needs by scrolling the display on devices, clicking or
tapping, reading the description, and deciding whether or not to buy it. Aside from that, Amazon
has made allowances for different users, such as using a voice-interface to allow special
people, such as blind people, to navigate on it by accessibility shortcuts (voice activated when
touch or tap the menu) so that they can enjoy everything on Amazon.com.
i) Graphical user interface ( GUI )
GUI is the interface that allows users to interact with electronic devices, such as
computers, smartphones, laptops or tablets through graphical elements. It’s a valuable part of
software applications programming in regards to human computer interaction. In other words,
GUI lets the user control the devices with a clicked or even with touchscreen.
Although GUI systems make jobs more accessible to the general public, combining a
keyboard with a mouse or any form of touchscreen might be difficult when the same action can
be completed without taking one's hands away from the keyboard. Those who write code are
aware of the command codes that must be provided and are hesitant to waste time pointing and
clicking when it is unnecessary.
The advantages of this applications in GUI is that symbols may be recognised faster than
text. For example, we know that the Amazon.com logo is in the shape of a lowercase letter " a "
with an arrow shaped like a smile. Aside from that, GUI makes use of visual features to depict
the now-hidden lines of command. To invoke the relevant function, users just click a button,
hover text, or icon. The ease of use of GUIs has enabled the general population, regardless of
expertise or knowledge, to access all types of systems for everyday usage. Finally, it enables
shortcuts to reduce strokes. The usage of two keys instead of numerous actions saves the user
time and enhances productivity. For example, on Amazon.com has the a list of option
information that saves the users time.
One of the most prominent drawbacks of GUIs is the presence of buttons. The various
buttons can cause the software to slow down and take a long time to complete effectively. For
example, the searching portion of Amazon.com is unavailable owing to a bug in which a button
did not respond in order to move the user to the next sections. Following that are the
informational components, which occasionally fail to notice an error or mistake made by the
users. For example, if Amazon.com fails to retain user data information, it may generate a
variety of issues such as delayed delivery or acceptance by the wrong users. To address this
issue, the GUI must be more efficient and prioritise the demands of the users.
ii) Form-fill interface
As we all know, form-fill interfaces are form for display screens that show which data
should be entered and where it should be submitted.
The form-fill interface has an added benefit of making it simple for users to view the
available alternatives. Amazon, for example, has a form fill that requires a large number of
options to be occupied and some sections offer alternatives by clicking or tapping on it, or it
requires customers to fill out forms such as name, address, or phone number.
The form-fill interface has the disadvantage of failing to notice some errors. For example, if
Amazon.com has a blank that needs to be filled in with a number, some users may forget or be
clumsy when filling it in, and then the information fails to detect due to incorrect information.
Aside from that, Amazon's form-fill interface occasionally fails to recognise punctuation. For
example, some user names are not identified because they contain punctuation such as an
apostrophe. When this problem occurs, it can make it more difficult for the user to do what they
want.
iii) Menu-driven interface
A menu-driven interface provides menu options that allow a user to navigate from one
area inside a website or software programme to another. A menu-driven interface is a form of
graphical user interface with many advantages and disadvantages.
A menu-driven interface has the advantage of providing step-by-step instructions, which
eliminates the need for the user to remember anything. On the first pages of Amazon.com, a
range of menus will be displayed on the taskbar at the top of Amazon.com. For example, a
menu for new user registration or an information menu with multiple item categories.
One of the drawbacks of a menu-driven interface is that it can be difficult for a user to
access a command if he does not know where it is situated in the menu. This is especially true
for more complicated systems with several options. Another disadvantage of a menu-driven
interface is that commands can be difficult to find if they are buried within several menus. When
this happens, users must navigate through many menus in order to perform a single command.
CONCLUSION
Each user interface has its own definition and set of attributes. Structure, user
manipulation, and communication are all aspects of UI Design.
GUI is commonly used in all graphical applications to display all buttons, text, and
images. Visual acuity, the limits of absolute memory, and information grouping are the three
fundamental human variables that directly effect GUI design. The Gestalt principle of information
grouping appears to benefit in information processing. To assist the user, information on the
screen must be sequenced. The order in which information is presented to the user should be
followed. Common information should be kept in the same places across windows and GUI. The
most significant information should come first, followed by the less important information. The
most frequently used information or commands should be placed in the most visible spot. The
generic items should come before the specialised items. If no other option is available,
alphabetize. When creating a GUI, it is important to keep the GUI's objectives in mind and to
prevent unnecessary complexity.Avoid unnecessary innovation and focus on enhancements that
boost performance. Future GUI trends include voice recognition and hypertext format language.
The hypertext trend enables users to travel straight from data and concepts in one application to
data and concepts in another. These developments will eliminate the GUI as an impediment
between the user and the work.
