CSS4 (Week 1-4)

PHILTECH INSTITUTE OF ARTS AND TECHNOLOGY INC.
SUBJECT: COMPUTER SYSTEM SERVICES 4

WEEK 1
LESSON 1: DEVELOP DESIGN FOR USER INTERFACE: USER INTERFACE DESIGN AND STANDARDS
TOPIC: User Interface Design and Standards
Learning Outcomes:
At the end of this session, you will be able to:
 Familiar about user interface, the standard of its development
 Determine the importance of user interface standard development for the users
Understanding User Interface
A user interface, also called a "UI" or simply an "interface," is the means in which a person controls a
software application or hardware device. A good user interface provides a "user-friendly" experience, allowing the user
to interact with the software or hardware in a natural and intuitive way.
Nearly all software programs have a graphical user interface, or GUI. This means the program includes graphical
controls, which the user can select using a mouse or keyboard. A typical GUI of a software program includes a menu
bar, toolbar, windows, buttons, and other controls.
Interface Elements
Users have become familiar with interface elements acting in a certain way, so try to be consistent and
predictable in your choices and their layout. Doing so will help with task completion, efficiency, and satisfaction.
Input Controls
Input Controls - buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes,
toggles, date field
Navigational Components
Navigational Components - breadcrumb, slider, search field, pagination, slider, tags, icons
Informational Components
Informational Components - tooltips, icons, progress bar, notifications, message boxes,

modal windows
Containers
Containers – (Accordions and panels) are designed to responsively adjust their maximum
width based on the size of the screen on which they are appearing.
Responsive Design
Responsive design is an approach to web page creation and mobile app that makes
use of flexible layouts, flexible images and cascading style sheet media queries. The
goal of responsive design is to build an interface that detect the visitor’s screen size
and orientation and adjust the layout accordingly.
Responsive design is a somewhat retro approach to web site design that solves a lot
of design problems caused by the proliferation of new types of mobile devices.
Responsive design pages use x and y coordinates on a grid for layout and
mathematical percentages for images instead of fixed-width parameters. Using
percentages instead of fixed-width parameters and a grid layout creates a more fluid
layout that will resize itself to fit the size of the display.
Wireframes
Wireframe – Wireframing is a way to design a website service at the structural level.

A wireframe is commonly used to lay out content and functionality on a page which
takes into account user needs and user journeys. Wireframes are used early in the
development process to establish the basic structure of a page before visual design
and content is added.
Interface Elements
User Interface Design flows are one of the most useful yet misunderstood tools in the UI/UX industry today.
Designers often avoid them because this is still in the progress of completely understand and grasping the knowledge.
Understand the user

To design the best possible user flow, you have to have the best possible understanding of your user.
Understanding the user’s needs and motivations allows you to make informed choices when determining how to get
users into that flow-like state when interacting with your product.
Flow Outline
Start by writing down a basic flow like a mind map. Each box you draw should represent a step in a user action.
It can be helpful to outline and breakdown your flow chart into three main stages: an entry point, steps to completion,
and the final step in completing a task or the final interaction.
Make meaningful labels

Labels are the reader’s lifeline when going through the user flow. The most important label is the flowchart’s
title. Try to use a title that describes exactly what the user flow represents. Avoid using all capital letters within labels as
this has been shown to decrease readability.
Anticipate what happens next
A user flow is a great way to put yourself in the user’s shoes and ensure that your product prioritizes their
needs. Making a flowchart at the beginning of the design process can reduce the risk of misunderstanding about design
specifications and the need for rework. User flows are often provided with your deliverables to the design team or your
client to provide a visual representation of how the product will flow.
User-Based Design
User-centered/based design (UCD) is an iterative design process in which designers focus on the users and their
needs in each phase of the design process. In user-centered design, designers use a mixture of investigative methods
and tools to develop an understanding of user needs.
Principles of User-Based Design

User - Everything we do revolves around our users and their needs. Who are your users? What
matters most to them? Why? Are the choices you are making helping them accomplish their goals
or getting in the way? Empathize always!
Branding - When designing a mobile interface, it’s important to consider the wider brand. If the
app you’re creating is part of a family of products, you’ll need to adhere to the brand colors, logo,
and typography.
Consistency - Our screens are made up of a bunch of re-usable parts, otherwise known as UI
elements. When designing our first mobile app, our goal isn’t to be inventive with every instance,
but rather, to keep these elements consistent. If primary buttons are blue and rounded, for
example, they should always be blue and rounded, no matter where we use them.
Hierarchy - Hierarchy creates a visual order that makes content easy to digest and navigate.
Typography - From how it is set to what size it is, text is a big part of interfaces. The typeface you
select. It should align with your branding. How type is set. Carefully kerning a headline or adjusting
a paragraph makes a huge difference and great typography section to help you define your sizes.
Thumb Buttons - Aim to create a comfortable button tapping experience. When elements are too
close to each other it tends to be pressed all at once.
Simplicity - The best interfaces are almost invisible to the user. They avoid unnecessary elements
and are clear in the language they use on labels and in messaging.
Purpose - Consider the spatial relationships between items on the page and structure the page
based on importance. Careful placement of items can help draw attention to the most important
pieces of information and can aid scanning and readability.
Direction - Always inform your users of location, actions, changes in state, or errors. The use of
various UI elements to communicate status and, if necessary, next steps can reduce frustration for
your user.
QUIZ:MULTIPLE CHOICE
Directions: Select the letter of the correct answer. Write only the letter of the correct answer on your answer sheet
1.buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date field
a. wireframe b. input controls
c. container d. Navigation controls
2.Is a way to design a website service at the structural level.
3. breadcrumb, slider, search field, pagination, slider, tags, icons
4. Designed to responsively adjust their maximum width based on the size of the screen on which they are appearing.
5. An approach to web page creation and mobile app that makes use of flexible layouts, flexible images and cascading
style sheet media queries.
a. Responsive Design b. input controls
c. container d. Flow Outline
6.Creates a visual order that makes content easy to digest and navigate.
a. hierarchy b. user
c. Typography d. Simplicity
7. In user-based design, everything we do revolves around them.
8. Considering the spatial relationships between items on the page and structure the page based on importance.
c. Typography d. Purpose
9.The typeface you select and how it should align with your branding.
a. hierarchy b. Typography
c. Purpose d. Simplicity
10. Informing the users of location, actions, changes in state, or errors.
a. Direction b. user
WEEK 2
LESSON 2: DEVELOP DESIGN FOR USER INTERFACE: RESPONSIVE DESIGN AND MOBILE FIRST DESIGN
TOPIC: Responsive Design and Mobile First Design
Learning Outcomes:
 Familiar on user interface design responsive principle
 Familiar on mobile first design and the standard sizes for a variety of devices
Responsive Design
Responsive design is an approach to web page creation and mobile app that makes use of flexible layouts,
flexible images and cascading style sheet media queries. The goal of responsive design is to build an interface that
detect the visitor’s screen size and orientation and adjust the layout accordingly.
Mobile-first Design
Mobile-first design is a design philosophy that aims to create better experiences for users by starting
the design process from the smallest of screens: mobile. Designing and prototyping your websites
for mobile devices first helps you ensure that your users' experience is seamless on any device.
Screen Size
Screen/Display size (or viewable image size or VIS) is the physical size of the area where pictures and videos are
displayed. The size of a screen is usually described by the length of its diagonal, which is the distance between opposite
corners, usually in inches.
Screen Orientation
Screen Orientation is the way in which a rectangular page is oriented for normal viewing. The two most
common types of orientation are portrait and landscape. The term "portrait orientation" comes from visual
art terminology and describes the dimensions used to capture a person's face and upper body in a picture; in such
images, the height of the display area is greater than the width. The term "landscape orientation" also reflects visual art
terminology, where pictures with more width than height are needed to fully capture the horizon within an artist's view.
Breakpoints
Breakpoints are the point at which your sites content will respond to provide the user with the best possible
layout to consume the information. When you first begin to work with Responsive Design you will define
your breakpoints at the exact device widths that you are looking to target.
Default Breakpoint
 xs, extra-small
 sm, small
 md, medium
 lg, large
 xl, extra-large
Portrait – a kind of display orientation where you measure the width smaller than the height of the
page or paper thus, making the orientation form a taller display.
Landscape – a kind of display orientation where you measure the height smaller than the width of
the page or paper thus, making the orientation form a wider display.
Hand Held Device – A display type where the screen is relatively smaller compared to standard
display of a personal computer and is developed for devices that are supposedly held by the hand.
Such are; mobile phones, tablets etc.
Standard Computer Display – Common screen display used for standard computers used in
offices, schools and other industry. Such are; Desktop computers, Laptops etc.
Screen Resolution - The number of horizontal and vertical pixels on a display screen. The more
pixels, the more information is visible without scrolling. Screen resolutions have a pixel count such
as 1600x1200, which means 1,600 horizontal pixels and 1,200 vertical pixels.
QUIZ:MULTIPLE CHOICE
1. Are the point at which your sites content will respond to provide the user with the best possible layout to consume
the information.
a. Mobile First Design b. Responsive Design
c. Screen Resolution d. Breakpoints
2. Is a design philosophy that aims to create better experiences for users by starting the design process from the
smallest of screens
3. An approach to web page creation and mobile app that makes use of flexible layouts, flexible images and cascading
style sheet media queries.
4.A kind of display orientation where you measure the width smaller than the height of the page or paper thus, making
the orientation form a taller display.
c. Portrait d. Landscape
5.A kind of display orientation where you measure the height smaller than the width of the page or paper thus, making
the orientation form a wider display.
c. Portrait d. Landscape
WEEK 3
LESSON 3: DEVELOP DESIGN FOR USER EXPERIENCE: INTRODUCTION TO USER EXPERIENCE

TOPIC: Introduction to User Experience
Learning Outcomes:
 Familiar with the importance of user experience in the world
 Understand the importance of user experience in the world
 Analyze and interpret design brief and requirements
What is User Experience (UX) Design?
User experience (UX) design is the process design teams use to create products that provide meaningful and
relevant experiences to users. This involves the design of the entire process of acquiring and integrating the product,
including aspects of branding, design, usability and function.
User Experience Basics

User experience (UX) focuses on having a deep understanding of users, what they need, what they value, their
abilities, and also their limitations. It also takes into account the business goals and objectives of the group managing
the project. UX best practices promote improving the quality of the user’s interaction with and perceptions of your
product and any related services.
Factors that Influence UX

At the core of UX is ensuring that users find value in what you are providing to them. Peter Morville represents
this through his User Experience Honeycomb Site.
He notes that in order for there to be a meaningful and valuable user experience, information must be:
 Useful: Your content should be original and fulfill a need
 Usable: Site must be easy to use
 Desirable: Image, identity, brand, and other design elements are used to evoke emotion and appreciation
 Findable: Content needs to be navigable and locatable onsite and offsite
 Accessible: Content needs to be accessible to people with disabilities
 Credible: Users must trust and believe what you tell them
Areas Related to Building the User Experience

UX is a growing field that is very much still being defined. Creating a successful user-centered design
encompasses the principles of human-computer interaction (HCI) and goes further to include the following disciplines:
 Project Management focuses on planning and organizing a project and its resources. This includes identifying
and managing the lifecycle to be used, applying it to the user-centered design process, formulating the project
team, and efficiently guiding the team through all phases until project completion.
 User Research focuses on understanding user behaviors, needs, and motivations through observation
techniques, task analysis, and other feedback methodologies.
 Usability Evaluation focuses on how well users can learn and use a product to achieve their goals. It also refers
to how satisfied users are with that process.
 Information Architecture (IA) focuses on how information is organized, structured, and presented to users.
 User Interface Design focuses on anticipating what users might need to do and ensuring that the interface has
elements that are easy to access, understand, and use to facilitate those actions.
 Interaction Design (IxD) focuses on creating engaging interactive systems with well thought out behaviors.
 Visual Design focuses on ensuring an aesthetically pleasing interface that is in line with brand goals.
 Content Strategy focuses on writing and curating useful content by planning the creation, delivery and
governance behind it.
 Accessibility focuses on how a disabled individual accesses or benefits from a site, system or application. Section
508 is the governing principal for accessibility.
 Web Analytics focuses on the collection, reporting, and analysis of website data.
Why is User Experience (UX) so important?

If a customer can’t figure out how to change the password and sign up they probably not go back to your
website. As people remember negative experiences more vividly than positive ones this adds to the importance of
getting the User Experience right.
User Experience could be a main factor in determining if a customer will use your product again or not.
It may also have an impact on the conversion rate. It’s a performance indicator that informs you how many
people (of all those visiting your website) completed a desired goal, like buying a product or signing up for a newsletter.
By creating a friendly User Experience you can increase sales on your website.
What makes a good UX design?
 Make it Actionable
In each application, the user interface (UI) must have a very clear goal or action. The UI on a screen
should lead the user through each action quickly and easily.
These are the following pre-conditions that are useful to keep in mind as a guideline for enabling
actions:
 Cue: What is the best way to trigger the user to take the action?
 Reaction: How will the user react to the trigger? Is it interrupting the user?
 Evaluation: What will enable the user to decide to take the action?
 Ability: How easy is it for the user to take this action?
 Timing: Is it the right time have the user take the action?
 Keep it Simple
The best interfaces feel effortless to users. They avoid unnecessary elements and are clear in the
language they use. Some best practices to consider are:
Gradual Engagement
Actions should be lightweight at the beginning, but as the user gets the hang of it, you can gradually
present more advanced controls. The same applies for progressive disclosure where the information presented
to the user is introduced gradually, revealing only what is essential at first, and adding later on in order to
minimize the feeling of being overwhelmed for the user. In a similar vein, keep in mind that a returning user
doesn’t need the same experience as a first time user.
Function before form

Design something beautiful and appealing, and simplify the underlying actions of your application.
Author, designer, and computer scientist, John Maeda writes in his book, The Laws of Simplicity:
On the one hand, you want a product or service to be easy to use; on the other hand you want it to do
everything that a person might want it to do. The simplest way to achieve simplicity is through thoughtful
reduction. When in doubt, just remove. But be careful of what you remove.
 Connect with Emotions

Having empathy for your users helps you connect with their emotions, and avoid making them
uncomfortable or offending them. In addition, understanding your users also gives you the knowledge to
provide them with elements and patterns that they recognize and relate to.
This is where the Principle of Least Astonishment (POLA) comes into play, where a design and patterns
match the user’s experience, expectations, and mental models. Positive emotional stimuli give users a sense of
trust and can truly create lasting impressions on an individual’s mind.
Emotional design can be brought up at different levels. Don Norman describes three levels of
‘Emotional Design’; visceral, behavioral, and reflective.
 Visceral design is the initial impact of the appearance, touch and feel.
 Behavioral design is about how things work and how users experience it.
 Reflective design is about how the product makes users feel.
 Engaging Design
Engaging your users is a very important consideration in retaining them. With the right cues,
interactions, and patterns, you can give your users a very immersive experience. A few ways to do that are:
 Gamify the experience and enable users to go on a quest to learn something new or achieve a goal.
Reward them when they do something correctly but make sure it is non-intrusive and compliments
their journey.
 Provide the right navigation cues to tell your users where they are in the application. Apps with a
deep information architecture benefit from elements like breadcrumbs and pagination to enable
quicker navigation and add context to what the user is looking at. If you are dealing with a complex
process, break up large tasks into smaller steps.
 Use feedback to tell the user what is happening, for example, when they submit a form or hit the
search button. Feedback could be in various forms including visual, audible and haptic
(touch/vibration).
 Bring Delight
Your UI should bring users delight rather than frustration. Having a playful interface can have a
powerful effect on how users see and experience your application. Bringing delight to your application
should be done both at the surface and deep levels:
Surface Delight includes visible and obvious things on the interface:
 Visual Aesthetics: visuals set the tone and the user’s first impression, and must be appealing,
modern, and trendy.
 Animation, Transitions and Interactions: these elements make the user experience more
immersive and playful. Examples of animations include using hover states, sliding interactions,
scroll events, transitions, and gestures.
Deep Delight is emotional and invisible to the user. It includes:

 Making the user feel happy, engaged, and successful.
 Minimizing pain points, frustration, and anxiety for the user.
UX and UI
 UX design is all about identifying and solving user problems; UI design is all about creating intuitive,
aesthetically-pleasing, interactive interfaces.
 UX design usually comes first in the product development process, followed by UI. The UX designer maps out the
bare bones of the user journey; the UI designer then fills it in with visual and interactive elements.
 UX can apply to any kind of product, service, or experience; UI is specific to digital products and experiences.
What does a UX designer do?

Here are the example of a UX designer’s typical tasks and responsibilities.
Strategy and content:

 Competitor analysis
 Customer analysis and user research
 Product structure and strategy
 Content development
Wireframing and prototyping:
 Wireframing
 Prototyping
 Testing and iteration
 Development planning
Execution and analytics
 Coordination with UI designer(s)
 Coordination with developer(s)
 Tracking goals and Integration
 Analysis and iteration
DESIGN BRIEF AND REQUIREMENTS
A design brief is an important document that outlines your design project so that you and your client understand
exactly what to expect in terms of deliverables and project workflow. It’s a key project management tool that also helps
you manage client expectations, so it’s important to learn how to write one to keep your web design projects on track.
A design brief, also known as a creative brief, is a project management document that allows you to identify the
scope, scale, and core details of your upcoming design project. It is similar to a proposal or statement of work with the
key difference being that in a design brief, your client has already decided that they want to work with you—you’ve
already closed the deal, now it’s time to lay out the details.
Importance of Design Brief
Why is the Design Brief important?
First and foremost, a good design brief will save you lots of time in pointless emails, calls and meetings. It will
also help you get more quotes to compare from different designers and agencies, as they’re much more likely to provide
you with a specific proposal if they see a specific brief.
From a designer’s point of view, a comprehensive design brief shows that the client has a clear vision what they
need and are motivated about the project. Many people won’t even reply if they see that you don’t have a clear idea
what you want, because they know that the project won’t happen in the near future and might see you as a potential
“time waster”. The time that designers and agencies spend in acquiring new clients is not billable, so they always
prioritise clients that are very clear with what they need. And the reality is that if you’re really serious about your
project, you surely wouldn’t mind spending an hour or two to describe it.
A design brief to a graphic designer is similar to what a blueprint is to an architect. Without a design brief, your
graphic designer will be left guessing what it is exactly that you require which can then result to a design which is far
from what you want or expected. The design brief will ensure that your graphic designer will be able to come up with
the right design the first time. In addition, design briefs also serve as a point of reference not only for the graphic
designer but for the client as well. The design brief is a great point to come back to say the project go over a few months
and we get off track as to what our main goals are. This is a great example too of when both client and designer would
need to refer back to the brief.
Elements of Design Brief
Although different campaigns may be in need of different creative deliverables, all of your briefs will look
relatively similar. We’ve broken down a standard format for you to follow to ensure no details are left out.
Some specific elements will vary slightly depending on whether you’re employing internal or external support,
but most creative briefs should include the following items:
1.Your company’s background, ethos, or mission
2.An explanation of the project, and how this request for creative fits into the overall strategy of the campaign
3.Audience information, including the markets you’re targeting and any pertinent demographic or psychographic
profiles
4.Your “big idea,” or the objective you’re hoping to achieve with the creative deliverables
5.The voice and messaging of your brand
6.Your competition, and any challenges or push back you anticipate
7.Logistical details including your budget and the time frame in which you need the project completed
Here’s a more detailed look at what to include, as well as some top tips on how to create a quality creative brief.
1. Your company’s background
To begin the brief, you want to present the core elements of your business so that an external agency can
understand your brand. If you have a specific point of view or set of values, or are mission-driven, this is the place in
which you want to communicate that. Of course, this part might be left out if you’re working with someone internally.
Pro tip: Jargon and flashy marketing words aren’t helpful here — you want to be as direct as possible in order to get
your message across.
2. Your project
This section will help creative understand what you’re looking for in terms of their deliverables. For instance,
you’ll explain whether you’re requesting a 30-second commercial to help raise awareness of your newest product
launch, a 6-week podcast to spread the word about the high-profile clients you’ve engaged, or perhaps a new website
to refresh your branding.
Pro tip: In this section, it’s vital not only to let your creative know what you’re looking to accomplish, but also how it fits
into a specific integrated marketing campaign and the larger strategy for your company.
3. Your target audience
The more you understand about your audience, the better your creative team will be able to nail your request.
Here, you’ll include who you’re looking to target with this specific campaign and the details you have about their
behaviors and desires that can be relevant to helping creative execute effectively.
4. Your objective
What are you looking for beyond the actual assets? Are you hoping to potentially reach new customers, or
realign your brand with another demographic, for example? Providing your desired outcome to creatives will help them
visualize the most effective execution.
Pro Tip: Include the mission statement of your overall campaign, which will provide a concise definition of the
campaign’s goals.
5. Your voice
Think of this as a highly distilled style guide (feel free to share your complete messaging guide with an external
agency.) Do you have a specific tone of voice that you always communicate in? Is there messaging you need to hammer
home? This should reflect your brand and speak to your target audience.
Pro tip: Is there a specific word(s) that needs to be included in the creative? Add it into your brief.
6. Your competition
Including your competition isn’t a must, but doing so enables your creative team to see who you’re up against so
they can uniquely position you in the market. Define competitive companies, products, or even specific campaigns —
whichever is most relevant.
Pro tip: If you have any particular elements (whether similar to, or in contrast with your competitors’ campaigns) that
you want to include in your creative, note it in this section.
7. Your scope
Finally, you may want to include exactly what you’re looking for, the budget you have, and deliverable due
dates. This will be part of a larger conversation, of course, but providing this information in a creative brief can help
your creative partner make sure they are aligned — and so you don’t overspend if you’re employing an outside firm.
Pro Tip: If you’re using an external agency for the first time, make sure you have background information on their price
range and turnaround time to avoid unnecessary roadblocks.
CLIENT’S NEEDS AND EXPECTATIONS

Common types of Customer Needs
Product Needs
1. Functionality -Customers need your product or service to function the way they need in order to solve their problem
or desire.
2. Price - Customers have unique budgets with which they can purchase a product or service.
3. Convenience -Your product or service needs to be a convenient solution to the function your customers are trying to
meet.
4. Experience -The experience using your product or service needs to be easy -- or at least clear -- so as not to create
more work for your customers.
5. Design - Along the lines of experience, the product or service needs a slick design to make it relatively easy and
intuitive to use.
6. Reliability - The product or service needs to reliably function as advertised every time the customer wants to use it.
7. Performance - The product or service needs to perform correctly so the customer can achieve their goals.
8. Efficiency - The product or service needs to be efficient for the customer by streamlining an otherwise time-
consuming process.
9. Compatibility - The product or service needs to be compatible with other products your customer is already using.
Service Needs
10. Empathy - When your customers get in touch with customer service, they want empathy and understanding from
the people assisting them.
11. Fairness - From pricing to terms of service to contract length, customers expect fairness from a company.
12. Transparency -Customers expect transparency from a company they're doing business with. Service outages, pricing
changes, and things breaking happen, and customers deserve openness from the businesses they give money to.
13. Control - Customers need to feel like they're in control of the business interaction from start to finish and beyond,
and customer empowerment shouldn't end with the sale. Make it easy for them to return products, change
subscriptions, adjust terms, etc.
14. Options - Customers need options when they're getting ready to make a purchase from a company. Offer a variety
of product, subscription, and payment options to provide that freedom of choice.
15. Information - Customers need information, from the moment they start interacting with your brand to days and
months after making a purchase. Business should invest in educational blog content, instructional knowledge base
content, and regular communication so customers have the information they need to successfully use a product or
service.
16. Accessibility - Customers need to be able to access your service and support teams. This means providing multiple
channels for customer service.
QUIZ 1: MULTIPLE CHOICE

1.Which of the following statements best described about User Experience?
a. It is the process design use to create products that provide meaningful and relevant experiences to users.
b. This involves the design of the entire process of acquiring and integrating the product.
c. It focuses on having deep understanding of users, what they need, what they value, the abilities, and also their
limitations.
d. All of the above
2.Who represents UX through Honeycomb Site?
a. Peter Morville c. Don Norman
b. John Maeda d. Allan Cooper
3.This is where a design and patterns match the user’s experience, expectations, and mental models.
a. Principle of Design
b. Principle of Least Astonishment
c. The Laws of Simplicity
d. Gradual Engagement
4.What are the three levels of Emotional Design that described by Don Norman?
a. Visceral, Behavioral, and Reflexive
b. Behavioral, Cognitive, and Engagement
c. Visceral, Cognitive, and Behavioral
d. None of these
5.Peter Morville notes that in order to have a meaningful and valuable user experience, information must be?
a. Useful and Findable c. Usable and Desirable
b. Credible and Accessible d. All of these
6.Why is User Experience so important?
a. It is useful in determining if a customer will use your product again or not.
b. It’s a performance indicator that informs you how many people completed a desired goal, like buying a product or
signing up for a newsletter.
c. It can increase sales on your website if your user experience is friendly user.
d. All of these
7.The following are the pre-conditions that are useful as a guideline for enabling actions in designing UX design except?
a. Cue c. Visceral
b. Reaction d. Evaluation
8.How to increase the level of engagement of the users and give them a very immersive experience with your UX
design?
a. Reward them when they do something correctly
b. Use Feedback to tell the user what is happening.
c. Provide the right navigation cues to tell your users where they are in the application.
d. All of the above
9.Which of these statements tells about the difference between UX and UI?
a. UX design is all about identifying and solving user problems; UI design is all about creating intuitive, aesthetically-
pleasing, interactive interfaces.
b. UX design usually comes first in the product development process followed by UI.
c. UX design can only apply in one product; UI is specific to an actual products and experiences.
d. Both a and b
10.This area focuses on planning and organizing a project and its resources.
a. User Research
b. Project Management
c. User Interface Design
d. Visual Design
QUIZ 2: IDENTIIFICATION
Directions: Identify the following statement. Write your answer on your answer sheet.
1. This section will provide the desired outcome and goals to visualize the most effective execution.
2. This section will help creative understand what you are looking for in terms of their deliverables.
3. It defines the core elements of your business so that your clients can understand your brand and products.
4. Here, you’ll include who you’re looking to target with this specific campaign and the details you have about their
behaviors and desires that can be relevant to helping creative
5. It covers the budget, and deliverable due dates of the project.
6. This section covers about the competitive companies, products, or even specific campaigns.
7. It is a characteristic of a services that enable the customer to access customer support and services by providing
multiple channels.
8. It refers to the consistency of product and service in quality and performance so it can be trusted by customers.
9. It refers to the openness of the company to their customers when doing business.
10. A company must provide possible and alternative way in purchasing product such as payment methods and
subscription.
WEEK 4
LESSON 4: DEVELOP DESIGN FOR USER EXPERIENCE: UX DESIGN PROCESS

TOPIC: UX Design Process
Learning Outcomes:
 Familiarize and understand UX design process
 Identify client’s behavior, needs and expectations
 Familiarize on different types of UX design tools and software
UX DESIGN PROCESS: Key Steps
In terms of UX (user experience) design process, many of the same points apply. The process is iterative, and
involves both divergent and convergent thinking. There are many flavors and perspectives on design process, and in the
real world, processes in design don’t always look like textbook models. Broadly speaking, there are three main buckets
that UX Design Process includes:
1. Scope and Research

2. Ideation and Testing
3. Launching and Measuring
1. SCOPE AND RESEARCH
At the outset of a project, it’s important that the team and UX designer understand the scope of what they are
trying to achieve. For an agency or consultancy, this includes defining the terms of the project such as timeline and
budget. In an agile sprint, this is prioritizing the user stories to focus on. Scoping is about creating the sandbox within
which the UX designer will work, defining the problem that is being solved, and the measures of success. Clear scope
upfront will lead to better outcomes at the end of the work
The scoping phase often continues into the project’s initial research, as interviews with key internal
stakeholders, competitor research and user research will often reveal that tweaks and adjustments are needed to
broaden the initial scope of the project. During the research phase, the UX designer will start to define project
requirements and metrics or key performance indicators. The research will also build a clear picture of user needs and
goals, and start to deliver answers to questions like: Who are we designing for? And what are their behaviors, needs and
goals?
Must haves for this phase:
 A clear scope of work and problem statement
 Defined metrics of success and KPIs (Key Performance Indicators)
 An understanding of the user’s needs
2. IDEATE AND TEST
Once there is clarity on the problem being solved and the user’s needs, the next phase in the UX process is
generating different possible solutions that will meet business needs and user needs, and that will be technically
feasible. Here, divergent thinking comes into play with the ideal starting point being to create a high volume of ideas
through sketching and experimentation.
Over time, these ideas get down-selected and refined through feedback and design critiques. This is the process
of converging — narrowing down the possible approaches to one or two to develop further and test. The concepts will
iteratively become higher fidelity — perhaps starting with paper prototypes — before moving on to digital wireframes
and clickable prototypes in tools such as Adobe XD.
Preferably, ideas for solutions are being tested as they are iteratively refined. For example, a UX designer might
start by quickly testing paper prototypes guerrilla style by running some informal usability tests with colleagues or family
and friends. This is a quick way to validate the general direction and key aspects of the solution such as flow, language,
and interaction patterns.
As the concepts become more refined, more formalized testing with a recruited target audience can help to
ensure that there are no usability issues. During this phase, the transition to building the product may begin, building
interactive front end prototypes to test with, or starting to prepare back end infrastructure needed to develop the
product
 A volume of low-fidelity ideas on paper or whiteboard
 Testing concepts with users, even if guerilla style
 Confidence that usability issues have been eliminated
3. BUILD, LAUNCH, AND MEASURE
Once the team or UX designer is confident that the proposed solution will work for users and move the needle
on the desired business metrics, the project transitions into build and launch mode. For the UX designer, this can involve
producing assets for the development team (or working with a visual designer to do so), and generally being involved
during the implementation phase to ensure that the design intent is being carried through to the final product. This can
mean providing feedback to the development team, or doing QA testing on beta versions of a product to check that
interactions are as intended.
 An implementation of the design which carries through the design intent
 A live version of the website or app
 Tracking metrics for the digital product to identify whether it’s producing the desired result
CLIENT’S NEEDS AND EXPECTATIONS

Common types of Customer Needs
Product Needs
1. Functionality
Customers need your product or service to function the way they need in order to solve their problem or desire.
2. Price
Customers have unique budgets with which they can purchase a product or service.
3. Convenience
Your product or service needs to be a convenient solution to the function your customers are trying to meet.
4. Experience
The experience using your product or service needs to be easy -- or at least clear -- so as not to create more work for
your customers.
5. Design
Along the lines of experience, the product or service needs a slick design to make it relatively easy and intuitive to use.
6. Reliability
The product or service needs to reliably function as advertised every time the customer wants to use it.
7. Performance
The product or service needs to perform correctly so the customer can achieve their goals.
8. Efficiency
The product or service needs to be efficient for the customer by streamlining an otherwise time-consuming process.
9. Compatibility
The product or service needs to be compatible with other products your customer is already using.
Service Needs
10. Empathy
When your customers get in touch with customer service, they want empathy and understanding from the people
assisting them.
11. Fairness
From pricing to terms of service to contract length, customers expect fairness from a company.
12. Transparency
Customers expect transparency from a company they're doing business with. Service outages, pricing changes, and
things breaking happen, and customers deserve openness from the businesses they give money to.
13. Control
Customers need to feel like they're in control of the business interaction from start to finish and beyond, and customer
empowerment shouldn't end with the sale. Make it easy for them to return products, change subscriptions, adjust
terms, etc.
14. Options
Customers need options when they're getting ready to make a purchase from a company. Offer a variety of product,
subscription, and payment options to provide that freedom of choice.
15. Information
Customers need information, from the moment they start interacting with your brand to days and months after making
a purchase. Business should invest in educational blog content, instructional knowledge base content, and regular
communication so customers have the information they need to successfully use a product or service.
16. Accessibility
Customers need to be able to access your service and support teams. This means providing multiple channels for
customer service.
UX Design Software
HOW TO CHOOSE THE RIGHT PROTOTYPING TOOL?

Choosing the right tool is the key to describing your thoughts and collaborating better with your clients. With
the abundance of so many online prototyping tools, choosing the right one is not an easy task. Every tool is different
from each other as it lacks or has a new feature to stand out from the rest.
In order to choose the right prototyping tool for designing, there are a few factors which need to be evaluated
for that tool to check whether it fits our needs or not.
1.Learning Curve:
Firstly, we have to analyze how easy is the tool to adopt. Let’s call it the learning curve i.e., how long it takes
for a designer get a hold of the tool. Since all tools are different from each other and provide various features, it
would consume a lot of time for the designer to learn the tool.
2.Sharing:
As collaboration is key for design, we check how well suitable it is for teamwork. The tool should provide
collaboration ability for multiple people to be in sync with each other. Since every designer has their own
perspective/ ideas for a project it’s imperative that all of them stay on the same page.
3.Usage:
Another point to consider when choosing a prototyping tool is how well it fits your design process and other
tools you regularly use. For example, if you are designing in Photoshop, Illustrator or Sketch, it would be great if
your prototyping software could directly use the files produced by these apps without requiring you to export assets
separately and then build everything from scratch to create the interactions.
4.Ease of use and comfort:

The ease of use in using the prototyping tool is essential for the designer to save time and help increase
output. It should reduce the number of steps required for a designer to complete a task rather than increasing it.
5.Cost:
There are many prototyping tools out there, many of which with niche features. But there is a catch with
these tools, that they do not fit our budget. And hence, we should be careful while choosing tools and not be
blinded by the features.
6.Fidelity:
What would be the requirement for the prototype? Whether you just require a mockup of the app layout or
do you need something that supports more details and complex interactions? There can be different requirements
for projects which could be classified into low, medium and high fidelity. Low fidelity would mean where we just
want to test the idea. On the other hand, Medium fidelity would be when we’re focusing on layout, information
and interaction design. And finally, High fidelity when the most important things are visual design, animation, and
micro-interactions.
UX DESIGN SOFTWARE
1.InVision
Runs on:
 Web
Prototypes for:
 Android
 iOS
 Web
Invision is by far the most popular prototyping tool in the world. Their team is constantly adding new
features to help designers’ prototype more efficiently. With InVision’s project management page, you can organize
design components into a status workflow. You can set columns for To-do,
In progress, Needs review, and Approved, and drag and drop your design components into the appropriate
column. You could add interactions and animations to static images. You can upload multiple file types, including
JPG, PNG, GIF, AI, and PSD. It has push and pull integrations with apps like Slack, Dropbox, Box, Trello, JIRA and much
more.
2.Adobe Experience Design
Runs on:
 OS X
 Windows
 Android
 iOS
Prototypes for:
 All
With Adobe XD, you can draw, reuse, and remix vector and build artwork to create wireframes, screen
layouts, interactive prototypes, and production-ready assets all in the same app. We can switch easily from design to
prototype right within the app. Also, add interactions and transitions and share with teammates and stakeholders to
test the look and feel of your design.
A product coming from adobe allows integrations with several of its products like Photoshop and After
Effects which is a big plus.
3.Origami Studio
Runs on:
 OS X
Prototypes for:
 Android
 iOS
Origami was initially created by Facebook to help teams build and design products. With this prototyping
tool, we can preview the mockup live on our mobile in real time using Origami Live. Also, we can show off our
designs in presentations in full screen, on a number of different devices.
Sketch and Photoshop designs can be imported into Origami, and your project layers will be preserved,
ready to be linked, animated and transformed as needed.
4.WebSketch
Runs on:
 OS X
Prototypes for:
 OS X
 iOS
 Web
WebSketch is similar to Photoshop in many ways, allowing you to edit and manipulate photos. Sketch’s
Vector shapes easily adapt to changing styles, sizes, and layouts, allowing you to avoid a lot of painful hand-
tweaking. Sketch’s fully vector-based workflow makes it easy to create beautiful and high-quality artwork from start
to finish.
In UI design, repeating elements is something very common: buttons, bars, bubbles — all sorts of things;
and these reusable elements can be automatically copied and pasted using the sketch app.
5.Webflow
Runs on:
 Web
Prototypes for:
 All
Webflow’s main selling point is that it provides such robust functionality without the need to write a single
line of code. Webflow is heavily focused on web animations, interactions, and responsive web design. Although you
can only build, design, and publish the entire site using the visual-based UI.
After you refine your UI mockup how you like it, you can turn into a production-ready site with just a click.
These features appeal to independent designers, who now have the option to export the prototype without needing
developers’ on-hand.
6.Just in mind
Runs on:
 OS X
 Windows
Prototypes for:
 Web
 iOS
 Android
Another popular prototyping tool, JustInMind is known for creating high-quality work, although at a very
steep cost. Another big plus is that it can be downloaded on your computer for offline work anywhere. If you’re new
to this tool it comes packed with tutorials and guided videos for everyone from beginner to expert.
Export your prototype to a fully functional HTML document and make it readily available to view in any web
browser. Also, it provides you access to use items from UI libraries and download numerous add-ons.
QUIZ 1: IDENTIIFICATION
Directions: Identify the following statement. Write your answer on your answer sheet.
1. It is a characteristic of a services that enable the customer to access customer support and services by providing
multiple channels.
2. It refers to the consistency of product and service in quality and performance so it can be trusted by customers.
3. It refers to the openness of the company to their customers when doing business.
4. A company must provide possible and alternative way in purchasing product such as payment methods and
subscription.
5. In this phase of UX design, UX designers need to analyze and understand the user’s needs.
6. During this phase, the transition to building the product may begin, building interactive front end prototypes to test
with, or starting to prepare back end infrastructure needed to develop the product.
7. This phase must have tracking metrics for the digital product to identify whether it’s producing the desired result, a
live version of the website or app, and an implementation of the design which carries through the design intent.
8. Customers need your product or service to work the way they need in order to solve their problem or desire.
9. The experience using your product or service needs to be easy -- or at least clear -- so as not to create more work for
your customers
10. The product or service needs to be efficient for the customer by streamlining an otherwise time-consuming process.
QUIZ 2:MULTIPLE CHOICE

1.This refers to how easy the UX design software to adopt or how long it takes for a designer gets a hold of the tool.
a. Sharing c.Usage
b. Learning Curve d. Cost
2.It is one of the factors to be considered when choosing a UX Design software which help the designers to save time
and increase output.
a. Cost c. Learning Curve
b. Ease of Use and Comfort d. Sharing
3.It is the ability of UX design software that provides collaboration for multiple people to be in sync with each other.
a. Cose c. Learning Curve
b. Sharing d. Usage
4.With the use of this software, you can organize design components into a status workflow and set columns for To-do.
a. Invision c. Origami Studio
b. Adobe Xd d. WebSketch
5.This software export prototype to a fully functional HMTL document and make it readily available to view in any web
browser.
a. Invision c. WebSketch
b. JustInMInd d. Adobe Xd
6.By using this software, you can draw, reuse, and remix vector and build artwork to create wireframes, screen layouts,
interactive prototypes, and production-ready assets all in the same app.
a. Invision c. WebSketch
b. JustInMInd d. Adobe Xd
7.It was created by Facebook to help teams build and design products..
b. WebSketch d. WebFlow
8.It is similar to Photoshop in many ways, allowing you to edit and manipulate photos.
b. WebSketch d. WebFlow
9.It refers to how well prototyping tool fits your design process and other tools you regularly use like for example, if you
are designing in Photoshop it would be great if your prototyping software could use the files produced by these apps.
a. Usage c. Cost
b. Ease of Use and Comfort d. Fidelity
10.There can be different requirements for projects which could be classified into low, medium, and high fidelity, where
high fidelity means?
a. When the most important things are visual design, animation, and micro-interactions.
b. When we are focusing on layout, information and interaction design.
c.Where we just want to test the idea.
d. All of these

CSS4 (Week 1-4)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS4 (Week 1-4)

Uploaded by

Copyright:

Available Formats

PHILTECH INSTITUTE OF ARTS AND TECHNOLOGY INC.

SUBJECT: COMPUTER SYSTEM SERVICES 4

Understanding User Interface

Informational Components - tooltips, icons, progress bar, notifications, message boxes,

Wireframe – Wireframing is a way to design a website service at the structural level.

Understand the user

Make meaningful labels

Principles of User-Based Design

LESSON 3: DEVELOP DESIGN FOR USER EXPERIENCE: INTRODUCTION TO USER EXPERIENCE

What is User Experience (UX) Design?

User Experience Basics

Factors that Influence UX

Areas Related to Building the User Experience

Why is User Experience (UX) so important?

What makes a good UX design?

Function before form

 Connect with Emotions

Deep Delight is emotional and invisible to the user. It includes:

What does a UX designer do?

Strategy and content:

CLIENT’S NEEDS AND EXPECTATIONS

QUIZ 1: MULTIPLE CHOICE

LESSON 4: DEVELOP DESIGN FOR USER EXPERIENCE: UX DESIGN PROCESS

UX DESIGN PROCESS: Key Steps

1. Scope and Research

1. SCOPE AND RESEARCH

3. BUILD, LAUNCH, AND MEASURE

CLIENT’S NEEDS AND EXPECTATIONS

HOW TO CHOOSE THE RIGHT PROTOTYPING TOOL?

4.Ease of use and comfort:

2.Adobe Experience Design

QUIZ 2:MULTIPLE CHOICE

You might also like