HUMAN COMPUTER INTERACTION

UNIT 4

HCI - DESIGN PROCESS

4.1 What is interaction design?

• Interaction design is an important component within the giant

umbrella of user experience (UX) design.
• It is the design of the interaction between users and products.
• Most often when discussed about interaction design, the products
tend to be software products like apps or websites.

4.2 The software design process

The software design process can be divided into four key phases: user
research, design, testing, and implementation. While the process does
typically take place in that order, it’s important to note that it is an
iterative process.

4.3 User focus

A process cannot guarantee that a development will involve users, it can
development will involve users, it can encourage focus on such issues
and provide opportunities for evaluation and provide opportunities for
evaluation and user feedback
4.4 Scenarios
Specific usability and user experience goals should be identified,
clearly goals should be identified, clearly documented, and agreed
upon and the beginning of the project beginning of the project. They
help designers choose between alternative designs and check on
progress.
Iteration allows designs to be refined based on feedback. It is important
useful if you are trying to innovate. Innovation rarely emerges to
innovate. Innovation rarely emerges whole and ready to go. It takes
time, evolution trial and error and patience evolution, trial and error,
and patience.

4.5 Navigation Design

Navigation design is the discipline of creating, analysing and
implementing ways for users to navigate through a website or app.
Navigation plays an integral role in how users interact with and use your
products. It is how your user can get from point A to point B and even
point C in the least frustrating way possible.
To make these delightful interactions, designers employ a combination
of design patterns including links, labels and other UI elements. These
patterns provide relevant information and make interacting with
products easier.
Good navigation design can:
• Enhance a user’s understanding
• Give them confidence using your product
• Provide credibility to a product
It promotes usability. Poor navigation results in fewer users for your
product and this is why navigation design is central to user experience
design.
It is complex and there are many design patterns to choose from when
optimizing the user experience. A design pattern is a general, reusable
solution to a problem.

Common navigation design patterns

Hamburger menu :
The hamburger menu is often found on mobile, although it is
increasingly becoming popular with desktop. The hamburger menu icon
is 3 lines and can be clicked or tapped to reveal more navigation
options.
Tabs :
Tabs are a popular navigation pattern and are commonly found on
mobile devices. They’re can be found on the bottom or top of the
screen. Because you can only fit so many tabs at the bottom of your
screen, you’ll usually find the most important screens in a tabbed
navigation.
Vertical navigation :
Usually found on the left-hand side of screens, vertical navigation takes
up generous screen space but displays a list of global navigation links
and can include primary, secondary and tertiary navigation levels.

Call-to-action button :

Call to action buttons are used to persuade, motivate and move your
audience into an action whether it’s a sign up, a purchase or a download.
They are usually given prime of place on websites and must be
noticeable.
Breadcrumbs :
Inspired by the story of Hansel and Gretel, breadcrumb navigation (or
breadcrumb trail), is a secondary navigation system that shows the user
where they are in the system.
4.6 Screen Design
There are Eight basic principles of screen design:

1. The three questions all screens need to give an answer to

When we arrive at a new screen, we are looking for the answer to

three questions:

• Where am I?
• What can I do here?
• How can I move forward?

2. The importance of visual hierarchy

• Visual hierarchy is one of the most important parameters in

screen design. We can rank the elements of a given screen
according to how bold they are, how emphasized, how easily we
spot them.
• This is what we call visual hierarchy. The bold and highlighted
elements are at the top of the hierarchy and the tiny stashed
elements at the bottom.
• Visual hierarchy helps lead the eye. It determines what order
we notice things. This is why it’s important to develop this
hierarchy consciously.

3. The copy is part of the design

• Many designers think writing is not in their job description, but

this could not be farther from the truth.
• Copywriting is part of design.
• Sketching the copy
• Microscopy – part of the screen design

4. Conventions are important, we should use them

• The web and the mobile world are the most recent
achievements of humankind, but even during this short period
of time, plenty of solutions were born which the majority of
apps use in general.
• Conventions for better user experience

• Conventions in screen design are like this: “logo goes in the

upper left corner”, “links should be in blue”, the “links should
be underlined”, etc.

• Innovation versus convention

• People often ask if this contradicts innovation.

5. When designing for the mobile phone, we design for our hands, too
When designing for touch screens, the most important parameter is
our own hand, with which we are using the product.
Can we safely tap on a button?
Can our finger reach the button? When designing for mobile, we
cannot know how the users will hold the phone, so it is worth creating
interfaces which can be used in the majority of cases.
6. Pay attention to the effective surface area ratio
The best user-friendly interfaces are simple and clear. Interfaces like
these are easy to understand, people get familiar with them easily,
they get used to using them, and feel joy when opening them the next
time, too.
7. Aim at simplicity and transparency
This simplicity in screen design is not easy to reach, though. In a
design project, new ideas and new information need to appear on the
interface appear one after the other. It may be the case that the
different departments of the company (or the different participants in
the project) consider different things to be important to appear.
8. Be careful with animations and motion

• The first and most important rule: don’t use animations for just the
sake of animations. People are wired to focus on moving objects.
• Animations can explain how your interface works. One of the
well-known examples is how you minimize the window in your
desktop operating system.
4.7 Prototyping techniques

Sketches and Diagrams

Sketching is one of the earliest forms of prototyping you can use. It
requires very little effort and does not necessarily rely on artistic levels
of drawing skill to prove useful, and therein lies its value. Use sketches
to illustrate your ideas and launch them into the real world — even the
simplest and crudest of sketches can easily achieve that. Sketch simple
illustrations of your concepts so that they don’t exist only in your mind,
hence allowing you to share these with your team-mates.

Paper

Interfaces
Digital products like mobile apps, websites, and web services, as well
as other screen-based products or experiences often require you to
create a range of prototyping methods in the run up to the final design
and development. Paper interfaces are handy at the early stages of
prototyping for digital products. You can create paper interfaces by
sketching them out, or by drawing and cutting out usable parts of a user
interface (such as a text field or a dropdown menu, etc.).
Storyboards
Storyboarding, as a prototyping method, ensures that we know our
users well enough (it would be hard to sketch a storyboard otherwise)
and allows us to keep in mind the context of the solution we are
designing. It is useful for developing an empathic understanding of
users — and for generating high-level ideation and discussions.
Storyboards, however, are not very useful for fine-tuning the details of
products, because the drawings tend to be more macroscopic in nature.
Lego Prototypes
Lego is a staple of any kid's toy box. Its versatility and ability to spark
imagination is what drives the company's success. As a designer, you
can take advantage of Lego’s ubiquity and versatility to create quick and
simple prototypes of your ideas. The best part of using Lego to build
your prototypes is that they become easy to dismantle and tweak;
simply detach a part of your Lego prototype, swap it with an alternative
design, and play with it to see if it works.

4.8 Wire-Framing
Wire framing is a process where designers draw overviews of
interactive products to establish the structure and flow of possible
design solutions. These outlines reflect user and business needs. Paper
or software-rendered wireframes help teams and stakeholders ideate
toward optimal, user-focused prototypes and products.
Wireframes are basic visual guides in which designers propose
elements for screens and web pages and show how experimental
solutions would flow for target users. Wire framing is invaluable early in
the interaction design process for design teams to explore how concepts
accommodate user and business needs.
Good wire framing is the skill of creating realistic-looking, lean
layouts so your team and stakeholders can quickly determine if
concepts are worth developing. Wire framing is distinct from
prototyping in the sense that prototyping deals more with testing
interactivity and—when done at the highest level of fidelity—
sophisticated versions that might closely resemble the released
products. However, it’s similar in that you can also do wire framing by
hand (e.g., using boxes and lines to represent pictures, text, etc.) or with
software and make low- to high-fidelity versions. In low-fidelity
wireframing, you use placeholders to mark content and pictures in
grayscale. In high-fidelity wireframing, you introduce more realism,
including pictures and perhaps even some interactivity. You can adapt
well-crafted wireframes far more easily into prototypes for usability
testing.
Software choices vary in price (some are free), options (e.g., click-
through interactivity) and suitability (e.g., for mobile). When you do
wire framing well, you can help safeguard yourself, your team and your
brand against pursuing flawed solutions. Good wire framing can also
support agile development as team members needn’t wait for
sophisticated deliverables.
Wire framing is the Art of Efficiency
The aim is to communicate the structure of a possible solution so your
team can identify solid user experience (UX) design foundations to build
on and stakeholders can offer feedback on a visual item.
So, you should show what elements your users would expect to find and
how these work in flow. To begin, you should:

1. Focus on functionality, accessibility, layout and navigation to make

a design easier to use, produce and sell – Leave nice-to-have
features out.
2. Structure a hierarchy with a list of prioritized elements for each
page – Determine the information architecture early so you can
categorize information clearly.
3. Divide the screen into large blocks for content.
4. Fine-tune these blocks with details – links, placeholders for images,
etc.
5. Maintain a clean grid-oriented view of all content – Apply best
practice design principles to maximize ease of use.
6. Use annotations to help others understand your wireframes faster.
7. Put mobile first – When you start wireframing for the smallest
screens, you can achieve better consistency across devices.
 8. With higher-fidelity wireframing, be more specific – Although you
shouldn’t overdo content, still show what needs to appear
and accurate sizes of fonts, icons, links, etc.
9. Keep your wireframes concise – Don’t worry about finer details
such as aesthetic appeal.

4.9 Understanding the UI Layer and Its Execution Framework

Interface Design defines how the system will interact with external
entities (e.g., customers, users, other systems)
• System Interface sare machine-machine and are dealt with as part
of systems integration
• User Interfaces are human-computer and are the focus of this
chapter Principles for UI design
• The UI design process
• Navigation, Input, Output Design
• Mobile & social media UI design
• Non-functional requirements and UI design

Principles of User Interface Design

2. Layout of the screen, form or report
3. Content Awareness
4. Aesthetics
5. User Experience
6. Consistency refers to the similarity of presentation in different
areas of the application
7. Minimal User Effort

Layout
• The arrangement of items on the screen
• Like items are grouped into areas
• Areas can be further subdivided
• Each area is self-contained
• Areas should have a natural intuitive flow
 • Users from western nations tend to read from left to right and top
to bottom
• Users from other regions may have different flows

User Interface Design Process

Interface Structure Design

• The interface structure defines
• The basic components of the interface
 • How they work together to provide functionality to users
• Windows Navigation Diagrams (WND)
• Similar to a behavioral state machine
• Shows the relationship between all screens, forms, and reports
used by the system
• Shows how the user moves from one to another
• Boxes represent components
• Arrows represent transitions from and to a calling state
• Stereotypes show interface type

4.10 Model-View-Controller (MVC) Framework

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.
MVC Components

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.
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.
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.

ASP.NET MVC
ASP.NET supports three major development models: Web Pages, Web
Forms and MVC (Model View Controller). ASP.NET MVC framework is a
lightweight, highly testable presentation framework that is integrated
with the existing ASP.NET features, such as master pages,
authentication, etc. Within .NET, this framework is defined in the
System.Web.Mvc assembly. The latest version of the MVC Framework is
5.0. We use Visual Studio to create ASP.NET MVC applications which
can be added as a template in Visual Studio.

ASP.NET MVC Features

ASP.NET MVC provides the following features −
• Ideal for developing complex but lightweight applications.
• Provides an extensible and pluggable framework, which can be
easily replaced and customized. For example, if you do not wish
to use the in-built Razor or ASPX View Engine, then you can use
any other third-party view engines or even customize the
existing ones.
• Utilizes
the component-based design of the application by
logically dividing it into Model, View, and Controller
components. This enables the developers to manage the
 complexity of large-scale projects and work on individual
components.
• MVC structure enhances the test-driven development and
testability of the application, since all the components can be
designed interface-based and tested using mock objects.
Hence, ASP.NET MVC Framework is ideal for projects with large
team of web developers.
• Supportsall the existing vast ASP.NET functionalities, such as
Authorization and Authentication, Master Pages, Data Binding,
User Controls, Memberships, ASP.NET Routing, etc.
• Does not use the concept of View State (which is present in
ASP.NET). This helps in building applications, which are
lightweight and gives full control to the developers.
Thus, you can consider MVC Framework as a major framework built on
top of ASP.NET providing a large set of added functionality focusing on
component-based development and testing.