HCI midterm

Requirement Analysis

Developing a system requires initial research, which must be conducted thoroughly from a user perspective. Requirements analysis basically establishes the goal for the development of a system from the viewpoint of the target users.

User Analysis

This design process reinforces the original requirements analysis to satisfy potential system use more comprehensively. This also prioritizes user experience and usability standards. Its results will always reflect to the original requirements, which could identify supplementary user interface (UI) requirements.

Scenario and Task Modeling

This design process is the most important part of interaction modeling. It involves the identification of the application task structure and the sequential relationship between the different elements of the program or a system. Beginning with a simple task model, it is easier to draw a more detailed scenario of how the system would be utilized. With this, developers and designers can assess both the appropriateness of the system and the feasibility of the given requirements. The process of storyboarding can be used in scenario and task modeling, which allows designers to create a rough visual profile of the interface.

Interface Selection and Consolidation

Software interface components (e.g., search fields and widgets), interaction techniques (e.g., voice and facial recognition), and hardware specifications (e.g., sensors and display monitors) will be made in this design process. Note that the chosen individual interface components need to be consolidated into a practical package because not all interface components may be available on a working platform (e.g., desktop and smartphone). However, adjustments can be made for numerous reasons besides platform requirement, such as constraints in budget, time, personnel, etc.

Hardware Platforms

The design configuration of a hardware interaction platform greatly depends on the characteristics of the application that requires a certain operating environment.

Software Interface Components

These are the integrated parts of a system or an application interface. These components are the means to break the complexity of a software by providing an easy interaction to the user. Sometimes, software interface components are referred to as user interface components.

WIMP (windows, icon, menu, and pointer). WIMP interfaces have significantly contributed to the propagation of computer technologies.

Windows/Layers – These provide the working area of an application, which pertains to the user interface.

Icons – These are simple, interactable, and intuitive objects that can be visually represented as a compact and small pictogram.

An earcon serves as an icon for people with special needs.

new type of icon called tile that can dynamically change its appearance with useful information related to what the icon is supposed to represent.

Menus – These allow activations of commands and tasks through selection. These can be organized as a one-dimensional list or a two-dimensional array of items.

Direct Interaction Through Pointer – Before the mouse era, human-computer interaction was in the form of keyboard inputting of text commands. The mouse made it possible for users to apply a direct metaphoric “touch” to the target objects.

GUI Components for User Input – In considering the interactive interface options of an application

o Text box – This is used for making short to medium alphanumeric input.

o Toolbar – This is a small group of frequently used icons or functions organized horizontally or vertically for a quick and direct access.

o Forms – This is a mixture of menus, buttons, and text boxes for long and interrelated input.

o Dialog box – This is a mixture of menus, buttons, and text boxes used for short and mixed- mode input.

o Combo box – It is a drop-down list box that includes an option to the user to either choose an option from the list or type in their own option in the text box.

3D Interface – It is described as “an image that provides the perception of depth”

Wire-framing is a way to design a website or an application service at a structural level. A wire-frame is commonly used to layout content and functionality on a page which considers the users’ needs and experience.

A user interface (UI) - is a channel between human and computer interaction, where a user interacts with and controls a computer or machine to complete tasks effectively and efficiently

application programming interface (API) - is a set of routines, protocols, and tools for building software applications

window manager - is a software utility found in most GUI-based software and applications that manage the overall alignment and layout of graphical windows. It defines and controls the appearance and positioning of the application interface of windows

Types of User Interface (UI)

Natural Language Interface – This requires the user to enter responses to questions asked by the computer. The questions are displayed on a virtual device unit (VDU), commonly a monitor, and the answer are entered via the keyboard. It is called “natural language” interface because the computer and the user seem to have a conversation as their mode of interaction

Menu-Based Interface – This provides the user with an on-screen list of available selections, although the options displayed are limited.

Form-Based Interface – It consists of on-screen forms or Web-based forms displaying fields containing data items or parameters that need to be communicated to or solicited from the user.

Command Line Interface (CLI) – It allows the user to control the application with a series of keystrokes, commands, phrases, or some sequence of these three (3) methods

Graphical User Interface (GUI) – Most interfaces today are already graphical. This type of interface is expected to be available in a multi-tasking environment or an application that involves a considerable degree of complexity

Input - pertains to any information or data that is sent to a computer for processing. Input or user input is directed to a computer using an input device like keyboard, mouse, and microphone.

Output - refers to any information that was processed by and sent out from a computer or any electronic device. Anything that can be viewed on a screen, such as typed words and images, can be considered as an output

Interrupt - is a signal to the processor indicating that an I/O event has occurred and must be handled.

event-driven program - structure in which programs are developed in terms of events, such as mouse clicks, gestures and keyboard input, and their corresponding handlers.

Parts of Event-Driven Programming

• Event – This object in Java is created when something changes within a GUI. An event is triggered, and a relevant event object is created when a user clicks on a button, clicks on a combo box, types characters into a text field, etc. This behavior is part of Java’s event handling mechanism and is included in the Swing GUI library, which is supported by several Java packages like java.util, jawa.awt, and java.awt.event.

• Event Source – It refers to the object that is triggered in an event. In other words, even the source is an object that generates an event.

• Event Listener – It is a program code that listens for changes, additions, user interaction, etc. When an event listener is performed, it does the specified task(s) based on the event.

Event Classes

ActionEvent - This occurs when a graphical element is clicked, such as a button or an item in a list.

ContainerEvent - This represents an event that occurs to the GUI’s container itself—for example, a user adds or removes an object from the interface.

KeyEvent - This occurs when the user presses, types, or releases a key in the keyboard.

WindowEvent - This represents an event relating to a window—for example, when a window is activated and closed.

MouseEvent - This represents any related mouse action, such as clicking, pressing, and dragging.

TextEvent - This is generated when the value of textarea or textfield is changed.

ComponentEvent - This is generated when the component is hidden, moved, or resized.

AdjustmentEvent - This is generated when the scroll bar is used.