List the principles of a software design in HCI
Affordance: - Affordance in terms of design means how an object should physically be used, we
should be able to visually see what that object or thing should be used for.
Perceivability: - A website user should be able to perceive when or if an action should be
carried out. The website itself should be designed so users get visual clues about what to do
and where to go next.
Feedback: - Feedback comes in many shapes and sizes. When a user clicks an action we want
the outcome to happen as soon as possible and in the fastest time, certain actions need a little
bit more time to process.
Define HCI & importance of Good design
Human-computer interaction (HCI) is a multidisciplinary field of study focusing on the design of
computer technology and, in particular, the interaction between humans (the users) and
computers. While initially concerned with computers, HCI since expanded has covered almost
all forms of information technology design.
A well-designed interface and screen is terribly important to users. It is their window to view
the capabilities of the system and it is also the vehicle tough which complex tasks can be
performed.
Benefits of a good design are:
1) Screens are less crowded
2) Would be less time consuming, 25 percent less time
3) Screen would be 20 percent more productive
4) 25 percent fewer errors
5) Improve decision making time
6) Training cost are lower
7) The organization customers benefit because of improved services
Importance of User Interface Design
An interface is a point where a user interacts with the software they’re using. A good User
Interface Design presents a good blend of visual design, interaction design, and information
architecture:
Visual Design
Visual design improves a site’s ornamental value by strategically implementing elements such
as fonts, colors, and images among other things. When professionally done, visual design makes
a page elegant without compromising on its function or content.
Interactive design
The interactive design looks at how users interact with technology. It then uses the
understanding of such interactions to create an interface with behaviors that are well thought-
out. Excellent interactive design not only anticipates how a person interacts with a system but
also antedates and fixes problems in good time. It may also invent new ways through which a
system interacts and responds to users.
Information Architecture
Information architecture is designed to help users find the info they need to complete various
tasks. It, therefore, involves labelling, structuring, and organizing the web content in a manner
that makes it easily accessible and sustainable.
HCI design approach
Anthropomorphic Approach
The anthropomorphic approach to human-computer interaction involves designing a user
interface to possess human-like qualities. For instance, an interface may be designed to
communicate with users in a human-to-human manner, as if the computer empathizes with the
user. Interface error messaging in often written this way, such as, “We’re sorry, but that page
cannot be found.”
1)Affordance
2) constraints
Cognitive Approach
The cognitive approach to human-computer interaction considers the abilities of the human
brain and sensory-perception in order to develop a user interface that will support the end
user.
1)Metamorphic Design
2)Attention & workload model
3)Human Information Processing Model
Empirical approach
The empirical approach to HCI is useful for examining and comparing the usability of multiple
conceptual designs. This testing may be done during pre-production by counterbalancing design
concepts and conducting usability testing on each design concept. Often, users will appreciate
specific elements of each design concept, which may lead to the development of a composite
conceptual design to test.
1)A/B testing
2)Human Task Performance Measures
Predictive Modeling Approach
GOMS (Goals, Operators, Methods, & selection Rules) is a method for examining the individual
components of a user experience in terms of the time it takes a user to most efficiently
complete a goal.
Waterfall Model - Design
Waterfall approach was first SDLC Model to be used widely in Software Engineering to ensure
success of the project. In "The Waterfall" approach, the whole process of software
development is divided into separate phases. In this Waterfall model, typically, the outcome of
one phase acts as the input for the next phase sequentially.
The following illustration is a representation of the different phases of the Waterfall Model.
The sequential phases in Waterfall model are −
Requirement Gathering and analysis − All possible requirements of the system to be developed
are captured in this phase and documented in a requirement specification document.
System Design − The requirement specifications from first phase are studied in this phase and
the system design is prepared. This system design helps in specifying hardware and system
requirements and helps in defining the overall system architecture.
Implementation − With inputs from the system design, the system is first developed in small
programs called units, which are integrated in the next phase. Each unit is developed and
tested for its functionality, which is referred to as Unit Testing.
Integration and Testing − All the units developed in the implementation phase are integrated
into a system after testing of each unit. Post integration the entire system is tested for any
faults and failures.
Deployment of system − Once the functional and non-functional testing is done; the product is
deployed in the customer environment or released into the market.
Maintenance − There are some issues which come up in the client environment. To fix those
issues, patches are released. Also to enhance the product some better versions are released.
Maintenance is done to deliver these changes in the customer environment.
All these phases are cascaded to each other in which progress is seen as flowing steadily
downwards (like a waterfall) through the phases. The next phase is started only after the
defined set of goals are achieved for previous phase and it is signed off, so the name "Waterfall
Model". In this model, phases do not overlap.
Software model Life cycle
The major software development activities include:
1) Planning and requirement analysis
Each software development life cycle model starts with the analysis, in which the
stakeholders of the process discuss the requirements for the final product. The goal of this
stage is the detailed definition of the system requirements.
2) Designing project architecture
At the second phase of the software development life cycle, the developers are actually
designing the architecture. All the different technical questions that may appear on this stage
are discussed by all the stakeholders, including the customer.
3) Development and programming
After the requirements approved, the process goes to the next stage – actual
development. Programmers start here with the source code writing while keeping in mind
previously defined requirements. The system administrators adjust the software environment,
front-end programmers develop the user interface of the program and the logics for its
interaction with the server.
4) Testing
The testing phase includes the debugging process. All the code flaws missed during the
development are detected here, documented, and passed back to the developers to fix. The
testing process repeats until all the critical issues are removed and software workflow is stable.
5) Deployment
When the program is finalized and has no critical issues – it is time to launch it for the end
users. After the new program version release, the tech support team joins. This department
provides user feedback; consult and support users during the time of exploitation.
Low fidelity High fidelity
These are often paper based and do not These are computer based, and usually allow
allow user interaction realistic(mouse-keyboard) user interactions
They range from a series of hand-drawn High-fidelity prototypes take you as close as
mock-ups to printouts. possible to a true representation of the user
interface.
Low-fidelity prototypes are helpful in High-fidelity prototypes are assumed to be
enabling early visualization of alternative much more effective in collecting true human
design solutions, which helps provoke performance data (e.g., time to complete a
innovation and improvement. task), and in demonstrating actual products
to clients, management, and others.
GUI Web Interface
In GUI design,the characteristics of the In Web design,the user devices may range
interface devices such as monitors and from handheld mechanism to the high end
modem are well defined and screens appear work stations,it will be generated by both the
excatly as specified. hardware and the software.
GUI systems are normally well defined Web is all about information and navigation.
applications and the data about transactions
and processes.
In GUI system the data is created and used by The web is full of unknown content and web
known and trusted sources. content is highly variable in organizations.
In GUI systems,the user can Web Users do linking to sites,browsing or
install,configure,personalize,start use and reading the pages,filling out forms,register
upgrade the programs and people become for services participating in
familiar with many of its feature. transactions,downloading and saving the
pages,etc.,
In GUI,the user's conceptual space is In Web,the user's space is infinite and
controlled by the program and application. generally unorganized.
The GUI,the users navigate through The Web users navigate through
structured menus,lists,trees,dialogs and links,bookmarks and typed URLS.
wizards
Noman’s 7 Principle:
1. Use both knowledge in the world and knowledge in the head.
The first principal seems obvious; it states that people learn better when the information
needed to complete a task is readily available to them. Text should be kept to a minimum and
the language used should be clear and concise.
2. Simplify the structure of tasks.
As a general rule we can’t hold more than 5 unrelated pieces of information in short term
memory at once so it’s worth considering how you can ease the burden of retrieval for the user.
3. Make things visible (bridge the gulfs of Execution and Evaluation.)
This basically boils down to two things, execution and evaluation. The user should know how
the task is executed and should be able to evaluate the outcome. Feedback is critical to this
principle, always give good feedback to the user about the state of the system and make the
outcomes of their actions as obvious as possible.
4. Get the mappings right.
Mapping is the relationship between a control, whatever it effects and the resulting action of
the control.
5. Exploit the power of constraints (both natural and artificial.)
Constraints prevent errors from occurring by taking the control out of the hands of users. The
user should feel that there is only one possible outcome of the action they are about to take.
6. Design for error
Assume that every error that could be made will be made, test for it and provide contingencies
when it happens. Offering the user, the ability to ‘undo’ critical actions like delete rounds off
the user experience.
7. When all else fails, standardize.
If there isn’t a quicker, easier or simpler way to carry out a task then tap into the learned
knowledge and behavior the user has already acquired.
Model based evaluation
Model-based evaluation is using a model of how a human would use a proposed system to
obtain predicted usability measures by calculation or simulation. These predictions can replace
or supplement empirical measurements obtained by user testing. In addition, the content of
the model itself conveys useful information about the relationship between the user’s task and
the system design.
Stage Description
Envision Develop UI Roadmap which defines the
product concept, rationale, constraints and
design objectives.
Analyze Analyze the user needs and develop
requirements
Design Create a design concept and implement a key
screen prototype.
Refine Test the prototype for design problems and
iteratively refine and expand the design.
5)Implement Support implementation of the product
making late stage design changes where
required. Develop user support components.
6)Support Provide roll-out support as the product is
deployed and gather data for next version.
Task Analysis:
Task analysis is the analysis of how a task is accomplished, including a detailed description of
both manual and mental activities, task and element durations, task frequency, task allocation,
task complexity, environmental conditions, necessary clothing and equipment, and any other
unique factors involved in or required for one or more people to perform a given task.
1) Information from a task analysis can then be used for many purposes, such as personnel
selection and training, tool or equipment design.
2) Procedure design (e.g., design of checklists, or decision support systems) and automation.
Though distinct, task analysis is related to user analysis.
What your users’ goals are: what they are trying to achieve
What users actually do to achieve those goals
What experiences (personal, social, and cultural) users bring to the tasks
How users are influenced by their physical environment
How users’ previous knowledge and experience influence:
How they think about their work
The workflow they follow to perform their tasks
Importance of User Interface
A well designed interface and screen is terribly important to our users. It is their window to
view the capabilities of the system.
It is also the vehicle through which many critical tasks are presented. These tasks often have a
direct impact on an organization’s relations with its customer, and its profitability.
A screen’s layout and appearance affect a person in a variety of ways. If they are confusing and
inefficient, people will have greater difficulty in doing their jobs and will make more mistakes.
Poor design may even chase some people away from a system permanently. It can also lead to
aggravation, frustration, and increased stress.
User Focus
The start of any interaction design must be the intended user or users
Know your users.
Who they are? –Are they young or old, experienced computer users
Probably not like you! –easy to design as if you were the main user
Talk to them – structured interview about their job or life, open- ended discussion,
participatory design.
Use your imagination – even if you cannot involve actual users you can at least try to imagine
their experience
Process of Designing
HCI design is considered as a problem solving process that has components like planned usage,
target area, resources, cost, and viability. It decides on the requirement of product similarities
to balance trade-offs.
The following points are the four basic activities of interaction design −
1) Identifying requirements
2) Building alternative designs
3) Developing interactive versions of the designs
4) Evaluating designs
Three principles for user- centered approach are −
1) Early focus on users and tasks
2) Empirical Measurement
3) Iterative Design
Design Methodologies
Various methodologies have materialized since the inception that outline the techniques for
human–computer interaction. Following are few design methodologies −
Activity Theory − This is an HCI method that describes the framework where the human-
computer interactions take place. Activity theory provides reasoning, analytical tools and
interaction designs.
User- Centered Design − It provides users the center -stage in designing where they get the
opportunity to work with designers and technical practitioners.
Principles of User Interface Design − Tolerance, simplicity, visibility, affordance, consistency,
structure and feedback are the seven principles used in interface designing.
Value Sensitive Design − This method is used for developing technology and includes three
types of studies − conceptual, empirical and technical.
Conceptual investigations work’s towards understanding the values of the investors who use
technology.
Empirical investigations are qualitative or quantitative design research studies that shows the
designer’s understanding of the users’ values.
Technical investigations contain the use of technologies and designs in the conceptual and
empirical investigations.
Model View controller
The Model-View-Controller (MVC) is an architectural pattern that separates an application into three
main logical components: the model, the view, and the controller. Each of these components are built
to handle specific development aspects of an application. MVC is one of the most frequently used
industry-standard web development framework to create scalable and extensible projects.
Following are the components of MVC −
1) Model
The Model component corresponds to all the data-related logic that the user works with. This can
represent either the data that is being transferred between the View and Controller components or any
other business logic-related data. For example, a Customer object will retrieve the customer information
from the database, manipulate it and update it data back to the database or use it to render data.
2) View
The View component is used for all the UI logic of the application. For example, the Customer view will
include all the UI components such as text boxes, dropdowns, etc. that the final user interacts with.
3) Controller
Controllers act as an interface between Model and View components to process all the business logic
and incoming requests, manipulate data using the Model component and interact with the Views to
render the final output. For example, the Customer controller will handle all the interactions and inputs
from the Customer View and update the database using the Customer Model. The same controller will
be used to view the Customer data.