CS401A's Midterms: Human-Comp. Architect. Module 04 Flashcards
For midterms exams.
The Overall Design Process
Developing a system requires initial research, which must be conducted thoroughly from a user perspective.
Requirement Analysis
The Overall Design Process
In order to optimize the interaction between the system and the user, it is necessary to know the user needs and characteristics, usage context, preceding systems and the competitive system aspects.
(Center for Usability Research and Engineering, n.d.)
Requirement Analysis
The Overall Design Process
For an interactive software or application that focuses on user experience, it is impotant to consider and assess the functions that the user will activate directly through interaction and that are significant in understanding certain aspects of the user experience.
Requirement Analysis
The Overall Design Process
basically establishes the goal for the development of a system from the viewpoint of the target users.
Requirement Analysis
The Overall Design Process
This design process reinforces the original requirements analysis to satisfy potential system use more comprehensively.
User Analysis
The Overall Design Process
This also prioritizes user experience and usability standards.
User Analysis
The Overall Design Process
Its results will always reflect to the original requirements, which could identify supplementary user interface (UI) requirements.
User Analysis
The Overall Design Process
This design process is the most important of interaction modeling.
Scenario and Task Modeling
The Overall Design Process
It involves the identification of the application task structure and the sequencial relationship between the different elements of the program or a system.
Scenario and Task Modeling
The Overall Design Process
With this, developers and designers can assess both the appropriateness of the system and the feasibility of the given requirements.
Scenario and Task Modeling
Scenario and Task Modeling
The process can be used in scenario and task modeling, which allows the designers to create a rough visual profile of the interface.
of storyboarding
The Overall Design Process
Software interface components, interaction techniques, and hardware specifications will be made in this design process.
Interface Selection and Consolidation
The Overall 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)
Interface Selection and Consolidation
Interface Selection Options
The design comfiguration of a hardware interaction platform greatly depends on the characteristics of the application that requires a certain operating environment.
Hardware Platforms
Platform && Mode of Operation
Tasks
Office-related tasks, time-consuming or crucial tasks, and multitasking
Task/Platform Examples
Documentation and research
Desktop
stationary
Platform && Mode of Operation
Tasks
Simple and short tasks, special tasks
Task/Platform Examples
Calling and messaging
Smartphones/Handheld
mobile
Platform && Mode of Operation
Tasks
Simple, mobile and short tasks which require a relatively larger screen
Task/Platform Examples
Sales pitch and location mapping
Tablet/Pads
mobile
Platform && Mode of Operation
Tasks
Special tasks and situations where interaction and computations are needed on the spot
Task/Platform Examples
Printer and photocopying machine
Embedded
stationary/mobile
Platform && Mode of Operation
Tasks
TV-centric tasks, limited interaction, and tasks that need privacy
Task/Platform Examples
Microsoft Xbox and Nintendo Wii
TV/Consoles
stationary
Platform && Mode of Operation
Tasks
Public and limited interaction, short series of selection tasks, and monitoring tasks
Task/Platform Examples
Stand-alone kiosk and wall-mounted installation for monitoring
Kiosks/Installations
stationary
Platform && Mode of Operation
Tasks
Spatial training, tele-experience and telepresence, and immersive entertainment
Task/Platform Examples
VizBox and VirtualDome
Virtual Reality
mobile
Platform && Mode of Operation
Tasks
Special purpose hardware platforms consisting of a customized configuration
Task/Platform Examples
Special military helmet for tactical command and control and multi-touch platform for multiple users
Free Form
stationary and mobile
These are the integrated parts of a system or an application interface.
Software Interface Components
These components are the means to break the complexity of a software by providing an easy interaction to the user.
Software Interface Components
Sometimes, software interface components are referred to as
user interface components.
This section also contains the overview of the essential and basic elements for the graphical user interface (GUI),
Software Interface Components
Software Interface Components
the overview of the essential and basic elements for the graphical user interface (GUI), which are windows, icons, menus, and mouse/pointer-based interactions.
WIMP
Software Interface Components
interfaces have significantly contributed to the propagation of computer technologies.
(windows, icon, menu, and pointer)
WIMP
Software Interface Components
These provide the working area of an application, which pertains to the user interface.
Modern computer interfaces are designed around windows, or the visual output channels and abstractions for individual computational processes.
- Windows/Layers
* Windows/Layers
For a single application, several subtasks might be needed simultaneously and be interfaced consequently through multiple windows or layers.
It is also possible to launch in modern computers.
overlapping windows
* Windows/Layers
For a single application, several subtasks might be needed simultaneously and be interfaced consequently through multiple windows or layers.
For devices with small display size, like phones, are used instead.
nonoverlapping windows
Software Interface Components
These are simple, interactable, and intuitive objects that can be visually represented as a compact and small pictogram.
- Icons
Software Interface Components
are distinctively designed to be a compact representation of an application which facilitates interaction.
- Icons
Software Interface Components
These allow activations of commands and tasks through selection.
- Menus
Software Interface Components
These can be organized as a one-dimensional list or a two-dimensional array of items.
- Menus
* Menus
Selection of a menu item involves three (3) subtasks:
activating the menu,
scanning the items, and
selecting an item.
Software Interface Components
The mouse made it possible for users to apply a direct metaphoric “touch” to the target objects.
- Direct Interaction Through Pointer
Software Interface Components
In considering the interactive interface options of an application, it is essential to understand the following representative GUI components for soliciting input from a user in a conventional manner:
-
GUI Components for User Input
○ Text box
○ Toolbar
○ Forms
○ Dialog box
○ Combo box
Software Interface Components
It is described as “an image that provides the perception of depth”
(TechTarget, n.d.).
- 3D Interface
Software Interface Components
Making a 3D image interactive and making the user feel involved with the scene provide the experience of virtual reality.
- 3D Interface
Software Interface Components
are commonly presented and operated in a 2D space, which is controlled by a mouse or a touch screen.
- 3D Interface
is a way to design a website or an application service at a structural level.
Wire-framing
are used early in the development process to establish the basic structure of a page before visual design and content are added
(Experience UX, 2019).
Wire-framing
Wire-frames
According to Myre (2018), basic shapes and elements are used to block out where each piece of content and UI element will appropriately fit.
The power lies in simplicity.
Wire-framing
The power of wire-framing lies in simplicity.
Elements can be rearranged quickly and easily for iteration and approval before creating a prototype.
Some examples are Fluid UI, Wireframe CC, Sketch, InVision Studio, and Adobe XD.
Wire-framing
of wireframe tool
