UID Unit 1
UID Unit 1
2. Define:
• Focus : Clearly identifying the core problems based on user insights.
• ·importance· In UI Design : Articulating the challenges ·users face allows
designers to focus on specific
aspects of the int~rface that need improvement
• Example : Defining that users struggle to find the 'Search' feature on a websit . .
e, indicat ing a problem with
button placement or Icon clarity.
3. Ideation :
• Focus : ~ralnstormlng a wide range of Ideas to solve the defined problem.
.
• Importance In UI Deslp : Encourages creativity and-exploration of various .
feedback.
5. Testing:
. d rstand how well the prototype addresses their needs.
• Focus : Gathering feedback from users to un e
• Importance In UI Design : Iterative testing helps refln~ UI elements, ensurln~ a more seamless and
enjoyable user experience.
Example: Conducting usability tests on a new app design to observe how users navigate through different
•
features and identifying any confusing elements.
-.~---.-✓ --..-••.i••·'
.
. ·~· . ·- .,. . . .. •;•
~ ... •, . ,
w D I
-a-
0
DESIGN
@~J
EMPATJi!ZE .
IDTETATE
: ,,,
..W'
i
i
~ '
"'i' ',...,- ...
-., . . . ~,r !.
~-
-
..
-w-:
I:
USERNEEOS TEST I
· UNDERSTAND
USER NEEDS
,Tec11K101111t41t
.,,,, ,11on1
- a ,;;; ;& -;a c I
•~
-UVUX D@sign
1
Why It Matters I Orslgn th ! k
t o catc h and address I n Ing lnvolvcs prototyping and luting u rly In tht prciceu, allowi·ng dts,gne
.
b rt
d SSurs cfore thry bl'Come co,tly mlst.ikt1. Te,tlng a conce st
I enttnl's potential us blli pt In ltJ early ag'!s
a ty lssu('s or runctlonallty gaps, redudng tht likellhood
d urtng later developmen t st.i (t('S, of signif kant ch,rnget
• Impact on UI : By ltcratl
ng on prototypes, teams can ruolv e problems without major rewor .
more streamlined dcvel ks, leading to 3
opmcnt process. This saves resources, keeps projects on sched • •I
reduces the nnanclal burden oflatMtage revisions. ule, and ultima ,c Y
3. Innovation and Creativity
1. Visual Design :
Ttah Nltq t
•••111 Hien,
1•4 Design Thinking Fundament
. als
UL'UX DfsiQn ' 1 '--
I Ith branding, and draw users. attent on to lmporta nt
• Purpose : To ma k•"' content visually appealing, a lgn w
•
r t with digital elements,, like buttons, menus, and animations'
Deftnltlon : Focuses on the way users lnte ac
ensurtn that Interactions are Intuitive and meaningful.
.• g To provide smooth, user· frIen dly Interactions that enhance the usability of digital products .
Purpose:
• Example : Designing a navigation menu th at makes It easy for users to find
Information on a website or
creating Interactive elements like effects and animations In a mobile app.
• . eslgn of a11 v1sual elements that users Interact with directly, like buttons, Icons, and Input
Definition : The d
fields.
• Purpose: To ensure the Interface Is consistent, v~sually appealing, and easy to use.
• Example: Creating a login form for a website with a clear, well-positioned "Submit" button.
• Definition : Designing the ove;all experience of a user when they Interact with digital products, focusing on
the flow of Interactions and how users feel during the process.
• Purpose: To ensure that digital products are easy to use and meet users' needs.
• Example : Mapping out the steps for a user to complete a purchase on an e-commerce platform, ensuring
· the process is smooth and efficient
5. Responsive Design :
• Deflnltlon : Ensuring that digital media designs adapt to· various screen sizes and devices, from desktop
computers to smart phones and tablets.
• Purpose: To maintain usability and visual consistency across different platforms.
• Example : Designing a w~bsite that automatically adjusts Its layout based on the screen size to ensure
readability on both large and small screens..
1.2.2 What Is User Interface (UI)?
User Interface (UJ) design focuses on the visual and Interactive elements of a digital product It's all about how
the product looks and feels, and It directly Influences how users Interact with the product
• Focus : The aesthetics and Interactive aspects of a product, Including visual elements Uke colors, typography,
Icons, ·and buttons.
• Role : UI designers ensure that the visual components align with the brand's Identity and create a visually
appealing, cohesive experience for users.
• Goal : To make Interfaces beautiful, consistent, and lntultlv~. ensuring that users can easily understand and use
the elements presented to them.
,.........
..... ,., ...;.
,w: :w
- ,
UVU)( Drslgn
User Experience (UX) dcsli:n, on the other hond, Is nll nbout tho ovornll fcol
rod of tho usor 1 Interaction wi th a
P uct It encompasses a USl'r'S' rntlro Journey, from discovering n produc
efficiently. t to using It ond achieving their goats
• Focus: The overall journey or the user, Including nspects like usablltty, accessi
bility, and the flow of Interactions.
• Role : UX deSlgners are responsible for making sure that the user's path through
tho product ts logical and
enjoyable, helping them achieve their goals without frustration. ·
• Goal : To provide a seamless and meaningful experience that meets the user's
use. needs while maintaining ease of
• User Research : Understanding user needs, pain points, and behaviors through
usability tests. surveys, Interviews, and
TtcHMWIHti
POIICH l o n1
l ·6 Design Thinking Fundarn
l'l. 'UX 0ts·,gn en!~'·
a........_
· Mapping out usfr 1ournf)S , h as cht'cklng account balances, making transfers, or paying b;,lb
, ux Focus : sue
ensuring each action ls fasy to perform.
layout for each stt'p' selecting colors that are easy on the eyes, and creatingcl~-a
• Ul Focus : Oestani"I thescrten
Irons for functions like ,.ransrer· or ~view Statement:
UX lght look good but could be hard to use, causing user frustrati °n
Aproduct \\ith e.~cellent UI but poor m
tweak UI might be easy to navigate but lack the vlsua 1appeal that engag e:
Con\'ersely, a product with strong Ux bu
users.
.
1.2 6 Differences Between UI and UX
UXDeslgn
Aspect UIDeslgn
Role Designing buttons, icons, typography Structuring us.er flows and interactions
Primary Goal Create visually pleasing interfaces Enhance user satisfaction and usability
Output Mockups, style guides, UI elements Wireframes, prototypes, user journey maps
Tools Used Sketch, Figma (for high-fidelity designs) Adobe XD, Figma (for wireframing), UserTesting.corn
-
Process Stage Typically comes later in the design process Usually begins in the early stages
Primary Focus How things look and behave on a screen . How things work and feel to the user
The concept of User Experience (UX) has evolved significantly over time, although the term itself is relativelJ
modern. UX has its roots In fields such as human-computer interaction, cognitive psychology, and design, dating bad
to times before the digital age. Understanding the history of tJX reveals how the focus on users and their interactioni
· ~th products has been a critical part of design and innovation throughout history.
th
1. Early Concepts : Usability and Ergonomics (Ancient Times • 19 Century)
Ttdtllaewl..l'
P 1 t11 1 a1 11n
UL'UX C\f-s,c,n
7
l 7
z. Human Factors dH
•n uman •Comput•r lnt•r• ctlon (20.., Ctntury)
• t 9 4-0s• 19601 1 Human factor s tnaln f'ttlna 1
0
During World \\'.ir 11, hum.in f.actou tnjlln rtrtn11 l,t<amt
mor e formd lllf'd at p~yc.ht,lt,gl~ti ;1n<t
tngin ~rs wo,"krd tosrth tr to dr~li;n uft'r and mnrt ,rr,tttv
e alrpl.1M cockp1 r1 .and rri ilir.iry
t-qulpmrnt. Thry !,tudtt d how humans lntrr.u-ttd wflh wmpl
t'( m.Jc.hlnr.ry, focusln~ on ,,ptlmizJn,r
controls • nd di!>plays to match human cap,1bi11tlu,
0
This work INi to the c~aUo n of mor, usrr•frlrndly lnt,rfa c,s
for pilots to use undrr strtss. auch u control panel, th-,t were e-,s,~r
'
• 196
0s•19 80s: The RJse or Huma n-Com puter lnteru llon (tlCI)
1
0
Th, develo pment or the flrst compu t,rs In the 1960s and 1970s
marked a sign Incant shift In the focus
of user exper ienc,. HCI (Human-Computer Interaction) emerg
ed as a ncld of study, concentrating on
how human s Intera ct with computers.
0
Douglas Engelbart's Invention of the comp uter mouse In 1964
was a landmark In HCI, making It
easier for people to Interact with computers using a graphical
user Interface (GUI).
0
In the 1980s, companies like Apple and Microsoft began to prtortt
ize graphical user Interf aces, with
a focus on making compu ters accessible to non-technical users.
Apple's MacIntosh, released In 1984,
empha sized a us~r-friendly design with windows, Icons, and
menus, setting a new standa rd for
compu ter Interfaces.
ltdlhe wlt41 i
PUlll< itlao ,
1 1
~n~----------:-~~e.::::~~=~::i:;:~::
i::U~1/U~X~Oe:s~i
o
_
18 Design Think ing Fund
The rtse of smart phones and mobile app llcatlons made UX even more critical, as designerarner,~,1
to create Intuitive expertences on small scree s needed
ns.
d Amazon began Investing heavily In UX, recog
o Popular companies Uke Apple, Goog1e, actn nlzi
and retaining customers. For example, Apple 'ng.
rt
goo d user expe enee was key tod attra IIth ng that i
Its touc h-scr s 1Ph
een Interface and user-friendly desig 0rit
revolutionized the smartphone In u5lry w
n.
• User-Centered Design and Agile Development:
o User-centered design (UC D) becam e a foundational concept In UX, emphasizing the lmpona
Involving users throughout the des Ign process through testing, Interviews, an d feedback. nee Of
o UX design began to be lntegra ted Into aglle development practices, where products are bun
Iterative cycles, allowing for continuous user teSt1 d finement of the experience. t in
ng an re -
• Growth of UX Tools :
o UX designers started using specialized tools
like Adobe XO, Flgma, and Sketch to create proto
typ~
and conduct user testing.
o To~ls like heat maps and A/B testing allow
ed companies to gather detailed data about user
behaVior,
helping designers make more Informed decisions.
S. Modem UX Design (2010s • Present)
• UX In Emerging Technologies :
o As technology has continued to evolve, UX
design now extends beyond websites and mobi
· virtual reality (VR), augmented reality (AR), le apps to
voice Interfaces, and wearable _devices.
o Designers must consider how users Inter
act with devices using gestures, voice commands,
immersive experiences. and
• Focus on Accessibility and Incluslvlty :
o Modern UX design emphasizes accesslblllty,
ensuring that digital products can be used by peop
diverse abilities and needs. le with
o Incluslvlty has also become a focus, aiming
to create experiences that are welcoming and usabl
people from different backgrounds and contexts. e for
• Data-Driven Design:
o Today, data analytics plays a significant role
In UX design. By analyzi~g user behavior data, desig
can make Informed decisions about Improving inter ners
faces and addressing user pain points.
o Artificial Intelligence (AI) and machine learn
ing are also being Integrated Into UX to provide
personalized experiences based on user preferenc more
es and behavior.
• Tile Role of UX In Business Strategy :
o UX has become central to business strategy,
with many companies recognizing that a good
experience Is key to differentiating their brand and user
driving customer loyalty.
o As a result, UX design has evolved from being
a purely design-focused discipline to one that Inters
with business, marketing. and product development ects
·
1.2.8 The Need for User Interface (UI) and
Use_ r Experience (UX) Design
Ul and UX design are critical for creating digital prod
ucts that meet users' needs and provide a positive,
experience. They play a vital role In ensuring that engaging
digital platforms like websites, mobile apps, and
only functional but also user-friendly and visually software are not
appealing.
·
Here are some key reasons why Ul and UX are essen
tial :
Ul/UX Design
1-9 Design Thinking Fundamentals
1. Enhancing Ustr Satlsfaction
• Ul : Awell-designed user Interface contributes to user satisfaction by making Interactions with the product
vtsually appealing and easy to understand. Elements like consistent colors, well-chosen typography, and
Intuitive layouts create a positive Orst Impression.
0
Example : A beauttfully designed mobile app with attractive buttons, Icon,, and a consistent color
palette can make users feel more comfortable and conn dent In using the app.
• UX: Astrong focus on user experience ensures that the user's Journey through the product ts seamless and
free of frustration. By considering user feedback and pain points, UX design helps In creating a product that
users find valuable and enjoyable.
0
Example : Awebsite that allows users to Ond Information qutckly and easily, with loglcal navigation
and minimal steps, can greatly enhance user satisfaction.
2. Improving Usability and Accessibility
• UI : A user Interface that Is well-organized and designed makes tt easter for users to understand and
interact with the product UI design can also play a role in accessibility, making sure that text Is readable
and that Interactive elements are clearly distinguishable.
o Example : A website that uses clear buttons, readable fonts, and enough contrast between text and
background can be navigated easily, even by users with visual impairments.
• UX : UX design focuses on making products usable for as many people as possible. This Includes designing
intuitive workflows, ensuring that users can complete tasks without_confusion, and Incorporating
accessibility standards. ·
o Example : A mobile app that offers voice commands or screen reader support allows users with
disabilities to navigate the app more easily, enhancing Its accessibility._
3. Increasing User Engagement and Retention
• UI : A visually appealing interface captures users' attention and encourages them to explore the product
further. Effective use of animations, micro-Interactions, and appealing graphics can make the Interface
more engaging.
o Example : Interactive elements like a progress bar during a signup process can keep users engaged by
showing them how close they are to completion.
• UX : UX design focuses on creating a user journey that keeps users interested and motivated to return. This
Involves understanding user behavior and designing features that align with their needs, making the
product more engaging.
o Example : Awell-designed on boarding process that guides new users through the key features of an
app can help them understand its value quickly, increasing the chances they will continue using It
TecH...aHt•
Pa 1 1tc 1 t1 n n •
-lO Design Thinking Fundarr ..
Ul/UX 0.sig" 1
I ;;'.\t.a:s
lnlmlzlng friction points and understa---._.
b
• UX: UX design can optimize the entire conversion process Y m
s like checkout flows or form subrni~slo nd1r.~
where users drop off In their journey. By sltnpllfylng processe ns, U~
design can help Increase conversions.
b f steps In the checkout process can 1
o Example : An e-commerce site that reduces the num er O . o·,,er
cart abandonment rates and Increase sales.
Tt~K1olll141i
PMIIICll i lA l
UVuX Design
1-11 Des ign Thinking Fundamentals
R1vl1w Qu11tlon
Q.1 Define Design Thinking, and Exp
lain how It differs from traditional prob
lem-solving methods.
Q.2 How can Design Thinking be app
lied to digital product design?
Q.3 Write down the main objectives of
applying Design Thinking In product
development.
Q.4 Describe the 5 stages of Design Thin
king, and what does each stage Invo
lve?
Q.S Discuss User Interface (UI) design,
and why Is It crucial for digital prod
ucts?
Q.6 What are the main elements of UI
design?
Q,7 How does UI design importance of
consistency in UI design?
Q.8 How does UX design affect the way
users Interact with a digital product?
Q.9 What does the design Impact the
.overall success of a digital product?
Q.10 What methods are commonly .used
in UX research to understand use
.
.
r needs?
Q.11 How does UX design contribute to
user satisfaction and retention?
Q.12 Differentiate between UI and UX des
ign.
Q.13 Explain Why are UI and UX critical
for creating successful digital prod
ucts.
□□□