INTERACTIVE SYSTEM

AND INTERFACE
DESIGN EXAMPLES
Interactive Systems
• Interactive Systems is the next level of Human Computer Interaction (HCI), which allows people to
interact with computers more naturally.

• Interactive systems are computer systems characterized by significant amounts of interaction

between humans and the computer

Examples

• Editors

• CAD-CAM (Computer Aided Design-Computer Aided Manufacture) systems

• data entry systems , games and simulations, web browsers

• 90 percent of computer technology development effort is now devoted to enhancements and
innovations in interface and interaction

• To improve efficiency and effectiveness of computer software, programmers and designers not
only need a good knowledge of programming languages, but a better understanding of human
information processing capabilities as well.

• They need to know how people perceive screen colors, why and how to construct unambiguous
icons, what common patterns or errors occur on the part of users, and how user effectiveness is
related to the various mental models of systems people possess.
Interface Design
• User interface (UI) design is the process designers use to build interfaces in software or
computerized devices, focusing on looks or style.

• Designers aim to create interfaces which users find easy to use and pleasurable.

• UI design refers to graphical user interfaces and other forms—e.g., voice-controlled interfaces.
EXAMPLES SUCH AS WORD PROCESSORS

• A word processor is a program designed for creating and editing business and personal
documents that are primarily text-based.

• Most modern word processors enable you to customize fonts and formatting - and they often
include images and other multimedia files - such as videos and audio clips.

• The most popular word processing program is Microsoft Word, but other options such as Google
Docs, LibreOffice Writer and Apple Pages
Understanding Word Processing Programs:

• Word processing software is used to create and edit text documents, including business reports,
student homework and even creative works such as novels, poems and screenplays.

• Essentially, all word processing programs in use today enable you to use a diverse variety of font
and text-formatting options, including multi-colored text, document headers, as well as footers
and the ability to choose different text size and spacing options. Earlier examples of word
processor software had fewer options.
Using Microsoft Word:

• First released in 1983, Microsoft Word has become the most popular word processing tool in the
world. It is available for Microsoft Windows, Apple macOS and for smart phones and tablets
running Apple iOS, plus Google's Android operating system. It's generally considered the standard
word processing tool in fields that range from law to education.

• An online version is also available as part of Microsoft Office 365, which enables users to
collaborate remotely on documents and then to store them on Microsoft's cloud servers.
Understanding Google Docs:

• One of the biggest rivals to Microsoft Word is Google Docs, which is an online word processing
program developed by Google. It was one of the first word processing tools to enable real-time
online collaboration, and it's available to use for free, gaining a strong loyal following among
many users.

• There are also paid versions of Google Docs available with more features designed for businesses
and sharing documents within companies as part of Google's G Suite productivity suite, which is
essentially Google's rival to Microsoft Word.
Free and Open Source Tools:

• The open source community, which creates software that's free to use and even to modify, has
come up with a number of word processors. Others are simply available for free. Probably the
most well-known are LibreOffice Writer and OpenOffice Writer, part of two related suites of
productivity software designed for compatibility with Microsoft Word. They're largely compatible
with Microsoft Word.
Word Processors and Text Editors:

• There are also programs called text editors that allow for editing of text but provide little or no
formatting options at all, besides things like line breaks and punctuation. They output raw text
files with no fonts or other data.

• They're frequently used by programmers looking to edit code and configuration files and by
anyone who needs to quickly edit a plain text file. Examples include Notepad and NotePad++ on
Windows, TextEdit on the Mac and cross-platform rival open source tools Emacs and Vim.
3.2 SPREADSHEETS, HYPERTEXT SYSTEMS
Spreadsheets:
Lotus 1-2-3:
• Lotus 1-2-3 was a spreadsheet program developed by Lotus Software, which is now part of IBM,
and was first released on January 26, 1983
• A spreadsheet if you look at it closely is pretty similar to a millimeter or grid paper
Interaction design in spreadsheet is faster than you think
• A Spreadsheet is like a graph paper
• a spreadsheet does not provide high-level visual design and prototyping tools (typography,
vectors, color profiles, etc.)

• This is not a tool for design like Sketch or Illustrator — but instead, it has a scripting engine that
can help manipulate and generate data, make calculations, do conditional formatting with ease,
and a lot more than a design software doesn’t have.

Examples:

• Spreadsheet-like-data-integration: Using spreadsheet-like interfaces to enable end-users to do

data integration. Examples: dashdash and Actiondesk. Supermetrics
• Spreadsheet-to-API: Enabling API access to data in existing spreadsheets. - Example: sheetlabs

• Spreadsheet-as-CMS: Using spreadsheets to edit and control web site content. - Example:
sheet2site

• Spreadsheet-to-app: Low-code / no-code ways for turning spreadsheets into web or mobile
applications. - Examples: glide, AppSheet, Open as App, Appizy , SpreadsheetWEB, Molnify,
SheetSu
Hypertext Systems:

• Information is obtained by searching through some kind of index.

• Hypertext systems allow for non-sequential, or non-linear, reading. This is the

underlying idea of a hypertext system.

• The result is a multidimensional document that can be read by following

different paths.

• In this section we will look into the application of hypertext in computer systems,
mainly the World Wide Web hypertext system.
• The main use of hypertext is in information retrieval applications. The ease of
linking different pieces (fragments) of information is an important aspect of
hypertext information retrieval.

• The information can be of various media: it may be fragments of textual

documents, structured data from databases, or list of terms and their definitions.
Any of these, or a mixture thereof, can make up the contents of a hypertext
document.
Therefore, in a hypertext system it is possible to:
• link with a term that represents aspects of the content of a document
• connect two related documents
• relate a term to a fragment containing its definition and use
• link two related terms
• a hypertext system can store a large collection of textual and multimedia documents.

• Such a hypertext system gives the end-user access to a large repository of knowledge for
reading, browsing, and retrieving.

• This is a "database" of sorts and is the reason why such a hypertext system is called a digital
library.

• The Web started as an extensively large digital library. As it has grown in popularity, it has
offered the possibility of interactive applications and commerce on the Internet, making it
much more than a digital library.
 3.3 PROGRAMMING ENVIRONMENTS, ATMS’S,
VOICE
• Though there have been advances in end-user programming,* complex applications still
need professional developers.

• This inspired look at the future of creating complex software explores the shift from
programming environments to design environments, discussing environments.

• It helps developers satisfy end-users’ cognitive needs and helps deal with contextual issues
such as the aesthetic, practical, and social properties of the application and the users.

• A strong case is made that design environments will need to provide robust support for
communication between developers and end users.
ATM: Automated Teller Machine
• HCI Technology application in ATM:

• Human computer interface (HCI) is a term used to describe the interaction between
users and computers; in other words, the method by which a user tells the computer
what to do, and the responses which the computer makes.

• HCI is about designing computer systems to support people’s use so that they can carry
out their activities productively and safely.

• All of this can be summarized as “to develop or improve the safety, utility, effectiveness,
efficiency, and usability of systems that include computers”
• If ATMs were more usable then they would become more effective and efficient machines,
then users would find it easier to use them.

• It would help the users to spend less time using the machines and to carry out more
efficient transactions.

• To produce a good ATM system with good usability HCI specialists strive to understand the
factors that determine how people operate and make good use of the ATM effectively and
develop tools and techniques to help designers ensure that ATMs are suitable to achieve
efficient, effective and safe interaction both in terms of individual and group interactions.
The ATM User Interface:

• In the design of the ATM, the most important is the man-machine interface,
namely the user interface.

• The ATM’s user interface remains consistent for each ATM, which includes the
main screen, the selection keys, the keypad, and several slots.

• Figure 1 is a real ATM. However, we often use the simulator ATM interface in the
research.
Fig: The general ATM’S operation panel
The ATM Interface Function-ATM simulator interface
design
• As shown in Figure 2, either side of the ATM screen has four selection keys, which
enable users to Select the functions from the menu.
• There are also some other keys: the ”Insert Card” will be used to insert the ATM
card into the machine;
• the ”Print Transaction Slip” is used to print the receipt of this operation;
• users can use the ”Export Cash” export to get the cash.
• The keypad contains the digits 0-9 and the keys ”Cancel”, ”Clear” and ”Enter” are
standard for all the various types of ATMs investigated in this research.
• In the General ATM, the click event is triggered when the”Enter” key is clicked in the ATM.

• To select an option from the menu, the user simply clicks on the select key adjacent to the
menu option displayed on screen.

• It is the same when using an ATM in reallife;

• the user only presses the selection key with their finger.

• The user can only move onto another menu screen after an input when choosing an
option.
ATM’s general using steps:

• Insert card

• Enter PIN (General 6 digits)

• Choose transaction option (Withdraw cash)

• Select/Enter amount of cash to be withdrawn

• Take cash

• Receipt? (Yes/No)

• Print receipt (Choose No will leap over this step)

• Ejected Card? (Yes/No)

• Card ejected from ATM (Choose Yes)

• Back to Main Menu (Choose No)

• Enter PIN

• Choose the transaction option (Balance Enquiry)

• Return card
ATM Menu Tree Structure
The Improvement of ATM:

• ATM is among the most commonly used public kiosks.

• During these years, bank institutions have been challenging a service innovation
opening new channels for providing their services.

• They have also enhanced their terminals by adding a wide range of services.

• However, despite their importance and an increasing number of functions, ATM

interface often show usability defects and the user experience could be
frustrated.
Mechanism of users thinking model

• To the user the interface is the product, a frustrating experience and

usability problem will have consequences on ability of users to
achieve their goals.
• We will list several important cases to introduce the improvement of
ATM’s design.
• ATM manufacturers have also demonstrated several different technologies which
haven’t yet gained worldwide acceptance.

•  Biometrics for security purposes - the authorization of transactions is based on

the scanning of fingerprints, the eye, face etc.

•  Ability to print “items of value” such as traveler’s cheques.

•  Customers’ specific advertising on the ATM.

The approach no card operation design for ATM:

• Many advanced ATM machines offer an abundance of additional services

including cash and cheque deposits, ability to pay bills at terminal, top-up pay as
you go mobile phone and purchasing tickets such as train or concert tickets.

• For these process of using ATM, many users will forget to take their card, which
will cause some loss and bring a lot of inconvenience for the user.

• In some studies, the researchers also found the problem, thus designed a no card
operation ATM system.
Remove card before operation:

• Portable ATM’s or Independent Convenience Cash Dispensers work in a different manner:

• User inserts card.

• Card is read and user is instructed to remove card.

• User enters PIN and carries out transaction required.

• This method enables customers to be offered another transaction after withdrawing cash.
Customers could withdraw cash and then will appear a prompt which said if users want to do
another transaction. Once the customer takes their cash, it is not possible to forget their card-as
they already took it before they began their transaction. However, this creates a security problem
on its own.
• If the user just takes their cash and walks off without responding to the
prompt, could the next user simply use the previous users account and
withdraw cash? To solve this problem, a fail-safe would be in place to
ensure the safety of the transaction. If the user does not respond within
a given time period e.g. 5 seconds, the session ends. In fact this fail-safe
would be in place whenever a user is using the ATM at any given time.