Tài liệu cung cấp đến các bạn những thông tin tổng quan về thiết kế giao diện và thiết kế trải nghiệm cho người dùng bao gồm những khái niệm, định nghĩa, phân loại, định hướng nghề nghiệp...
Trang 1Gi i thi u thi t k UX UI ớ ệ ế ế
UX: M c đích test tr i nghi m c a ng ụ ả ệ ủ ườ i dung,t o ra s n ph m ch y th c t tr i nghi m c a ng ạ ả ẩ ạ ự ế ả ệ ủ ườ i thi t k trên mô ph ng.T o ra ng d ng hoàn thi n nh t.(VD:Cô gái thông minh) ế ế ỏ ạ ứ ụ ệ ấ
UI: Test giao di n ng ệ ườ i dùng.(VD: Cô gái xinh đ p) ẹ
- Khái ni m UI UX ệ
- Thói quen tr i nghi m ng ả ệ ườ i dùng,
- Cách thi t k giao di n t ng quan ế ế ệ ổ
- Cách thi t k k b c c t ng quan ế ế ế ố ụ ổ
- Cách thi t k đô h a ế ế ọ
Khái ni m UI UX ệ
- UX (User Experience):Tr i nghi m c a ng ả ệ ủ ườ i dùng.
+ Thân thi n d s d ng,b t k ai cũng có th s d ng,ko ệ ễ ử ụ ấ ỳ ể ử ụ
c n ph i đào t o ầ ả ạ + T o ra s n ph m đ con ng ạ ả ẩ ể ườ ử ụ i s d ng,UX ph i nghiên ả
c u,cong ng ứ ườ ố ượ i đ i t ng đó c n gì,mu n gì ầ ố + Hi u đ c gi tham gia web c a h ,(nghiên c u nh ng ai ể ọ ả ủ ọ ứ ữ
s vào) và d hi u nh t. Truy n đ t ý t ẽ ễ ể ấ ề ạ ưở ng đ cho UI ể tri n khai ể
- UI (User Interface): Thi t k giao di n ng ế ế ệ ườ i dùng.
+ Giao di n có đ p hay không,có phù h p,hài hòa hay ệ ẹ ợ không.
+ Trình di n,đ ng nh t v i nhau,(ví d các nút buttom ễ ồ ấ ớ ụ ở
ph i đ ng nh t). T t c các trang ph i th ng nh t,th c th ả ồ ấ ấ ả ả ố ấ ự ể
đ ng nh t.(Đ ng nh t giao di n.) ồ ấ ồ ấ ệ
- UI và UX có quan h m t thi t v i nhau,ph i h p v i nhau ệ ậ ế ớ ố ợ ớ
- +++++++++++++++
Trang 2- Thói quen tr i nghi m c a ng ả ệ ủ ườ i dùng.
- Hình nh s minh h a đ ả ẽ ọ ượ c nh ng t ng ,dù là ti ng anh hay ữ ừ ữ ế
ti ng c a b t kì qu c gia nào thì ng ế ủ ấ ố ườ i dùng v n s d ng đ ẫ ử ụ ượ c.
- Th ng nh t v m t giao di n,ch ph i đ ng nh t,không đ ố ấ ề ặ ệ ữ ả ồ ấ ượ c
ch to ch be ữ ữ
- Giao di n d s d ng,ng ệ ễ ử ụ ườ i dùng không c n h c hay tìm hi u. ầ ọ ể Không đ ng ể ườ i dùng ph i suy nghĩ tìm hi u,nh v y d d n ả ể ư ậ ễ ẫ
đ n t y chay websize. Khi ng ế ả ườ i dùng vào websize s tìm ki m ẽ ế thông tin nhanh nh t có th ấ ể
- Thói quen c a ng ủ ườ i dùng,luôn g n li n v i 1 giao di n hình ắ ề ớ ệ
nh và ch gi ng nhau.
- Gi i quy t yêu c u ng ả ế ầ ườ i dùng đ n v i websize ế ớ
=> Đ nh h ị ướ ng cho ng ườ i dùng,trang không đ ượ c liên k t t i ế ớ trang khác,h tr tìm ki m ỗ ợ ế
Đ nh h ị ướ ng cho ng ườ i dùng: trang web đang đâu,đang làm ở gì,đi t i đâu, ớ
S d ng s nh t quán gi a các đ i t ử ụ ự ấ ữ ố ượ ng trong trang: màu
s c,c ch ắ ữ ữ
1 trnag đ u đuc liên k t t i trang khác,hay đ n 1 trang b t ề ợ ế ớ ế ấ
k ỳ
Công c tìm ki m d nhìn,thích h p v i web ụ ế ễ ợ ớ
B c c Layout thích h p, ố ụ ợ
Kích th ướ c khung hình,tính nh t quán,tính n đ nh,tính t ấ ổ ị ươ ng thích.
Trang 3B c c Layout h p lý ố ụ ợ
Kích th ướ c khung nhìn,ko làm r i m t ng ố ắ ườ i dung.
Tính nh t quán:ko lê thay đ i b c c,và màu s c,các nút ph i ấ ổ ố ụ ắ ả
gi ng nhau ố
Tính n đ nh luôn ch y trên các trình duy t ổ ị ạ ệ
Th ng nh t các font ch tiêu đ ,n i dung ph i gi ng nhau.Màu ố ấ ữ ề ộ ả ố
ph i th ng nh t,color ph i phù h p v i đ c gi ả ố ấ ả ợ ớ ọ ả
Trang 4 UI là gi:
User Interface:Giao di n ngệ ười dùng. Hi u m t cách đ n gi n nh t ể ộ ơ ả ấ thì UI bao g m t t c nh ng gì ng ồ ấ ả ữ ườ i dùng có th nhìn th y ể ấ
nh : màu s c web, b c c s p x p nh th nào, web/app s ư ắ ố ụ ắ ế ư ế ử
d ng fonts ch gì, hình nh trên web có h p d n hay không, ụ ữ ả ấ ẫ
Trong thi t k thì UI đóng vai trò là y u t truy n t i thông đi p ế ế ế ố ề ả ệ
t ng ừ ườ i thi t k , nhà cung c p d ch v , s n ph m t i ng ế ế ấ ị ụ ả ẩ ớ ườ i dùng. Đ n gi n h n thì nhà thi t k đóng vai trò nh 1 l p trình ơ ả ơ ế ế ư ậ viên ho c nhà xây d ng đ b t c ai cũng có th hi u và s ặ ự ể ấ ứ ể ể ử
d ng đ ụ ượ ả c s n ph m c a h ẩ ủ ọ
Ví dụ : Trên c ng v là m t ng i th m c khi b n đóng m t ươ ị ộ ườ ợ ộ ạ ộ cái gi ườ ng thì tr ướ c tiên s n ph m b n làm ra ph i gi ng m t ả ẩ ạ ả ố ộ cái gi ườ ng đã, không th cái gi ể ườ ng l i gi ng 1 cái bàn đ ạ ố ượ c đúng không nào? Thì đây UI cũng đ ở ượ c hi u t ể ươ ng t nh ự ư
v y ậ
Khái ni m UXệ
UX là vi t t t c a t User Experience có nghĩa là tr i nghi m ngế ắ ủ ừ ả ệ ười dùng.
Đ n gi n h n thì UX là nh ng đánh giá c a ngơ ả ơ ữ ủ ười dùng khi s d ng s n ử ụ ả
ph m. nh : Website hay App c a b n có d s d ng hay không, có thân ẩ ư ủ ạ ễ ử ụ
vi c b trí s p x p b c c nh v y đã đệ ố ắ ế ố ụ ư ậ ược hay ch a? s n ph m đó có ư ả ẩ
đ t đạ ược m c đích đ ra không.ụ ề
Người làm v UX hay còn g i là UX Designer. UX Designer sề ọ ẽ nghiên
c u và đánh giá v thói quen và cách mà khách hàng s d ng r i đánh giá ứ ề ử ụ ồ
v s n ph m website/App nào đó. S d ng và đánh giá đây đ n gi n là ề ả ẩ ử ụ ở ơ ả
nh ng v n đ : tính d s d ng, s ti n ích, s hi u qu khi h th ng ữ ấ ề ễ ử ụ ự ệ ự ệ ả ệ ố
ho t đ ng.ạ ộ
Ví dụ : Hi n t i các b n đang xem bài vi t này trên website ệ ạ ạ ế
Tatthanh.com.vn, các b n đang c n tìm ki m thông tin, ki n th c nào đó ạ ầ ế ế ứ
v website, nh ng n u T t Thành chèn quá nhi u qu ng cáo gây khó ch u ề ư ế ấ ề ả ị
nh h ng đ n vi c tìm ki m thông tin c a b n, làm b n m t t p chung
nh v y thì có th nói là UX hay tr i nghi m ngư ậ ể ả ệ ười dùng trên web
Trang 5Tatthanh.com.vn ch a đư ượ ốc t t. Vì v y T t Thành luôn c g ng cân b ng ậ ấ ố ắ ằ
gi a UI/UX đ b n đ c có đữ ể ạ ọ ược m t tr i nghi m trên website ộ ả ệ
Tatthanh.com.vn m t cách t t nh t.ộ ố ấ
UI UX design là gì?
UI/UX Designer là nh ng ngữ ười chuyên đi thi t k giao di n/tr i nghi mế ế ệ ả ệ
người dùng cho s n ph m. Nó có th là giao di n c a m t website ho cả ẩ ể ệ ủ ộ ặ
m t app đi n tho i. Nhi m v chính là đ m b o tính th m m và s ti nộ ệ ạ ệ ụ ả ả ẫ ỹ ự ệ
d ng c a nó.ụ ủ
UI/UX designer
Công vi c c a UI Designerệ ủ
Xem xét và c m nh n:ả ậ
Phân tích khách hàng
Trang 6Nghiên c u thi t k ứ ế ế
Xây d ng thự ương hi u và phát tri n đ h a.ệ ể ồ ọ
Xây d ng hự ướng d n s d ng / C t truy n.ẫ ử ụ ố ệ
S đáp ng và tự ứ ương tác:
Xây d ng s n ph m m u.ự ả ẩ ẫ
S tự ương tác và ho t hình.ạ
S thích ng v i t t c các kích c c a màn hình thi t b ự ứ ớ ấ ả ỡ ủ ế ị
Th c hi n v i nhà phát tri n.ự ệ ớ ể
Vai trò c a giao di n ngủ ệ ười dùng là r t quan tr ng đ i v i m i giao di n kấ ọ ố ớ ọ ệ ỹ thu t s , và là m t y u t quan tr ng mang l i s tin tậ ố ộ ế ố ọ ạ ự ưởng vào m t thộ ươ ng
hi u. Các nhà thi t k giao di n ngệ ế ế ệ ười dùng c n th hi n rõ thầ ể ệ ương hi u trênệ chính s n ph m c a h ả ẩ ủ ọ
Th c t đ phân bi t hai khái ni m UI và UX là đi u khác khó khăn vì chúng có ự ế ể ệ ệ ề
m i liên quan ch t ch v i nhau. Có không ít cu c tranh lu n r ng UX quan ố ặ ẽ ớ ộ ậ ằ
tr ng h n UI ho c ngọ ơ ặ ượ ạc l i UI quan tr ng h n UX.ọ ơ
Tuy nhiên khi b n đã hi u rõ ràng v hai khái ni m này b n có th d dàng ạ ể ề ệ ạ ể ễ
nh n đi m chung đó là c UI và UX đ u mang m t m c đích đó là t o s tho i ậ ể ả ề ộ ụ ạ ự ả mái cho người dùng, t đó ta có th th y chúng có vái trò quan tr ng nh nhau.ừ ể ấ ọ ư
Ví dụ: M t s n ph m website/App có thi t k b t m t, màu s c đ p thu hút ộ ả ẩ ế ế ắ ắ ắ ẹ
người nhìn tuy nhiên nó l i khó khăn trong vi c s d ng, hay ngạ ệ ử ụ ượ ạc l i m t s nộ ả
ph m website/App r t d s d ng và r t có ích nh ng nó khoác trên mình m t ẩ ấ ễ ử ụ ấ ư ộ
v ngoài kh ng khi p; rõ ràng chúng ta ch ng ai mu n dùng nh ng s n ph m ẻ ủ ế ẳ ố ữ ả ẩ
nh th ư ế
“Tr i nghi m ngả ệ ười dùng (UX) và giao di n ngệ ười dùng (UI) là m t s thu t ộ ố ậ
ng gây b i r i và d b l m l n nh t trong lĩnh v c c a chúng tôi. M t giao ữ ố ố ễ ị ầ ẩ ấ ự ủ ộ
di n ngệ ười dùng mà b qua các v n đ v tr i nghi m ngỏ ấ ề ề ả ệ ười dùng cũng gi ng ố
nh m t h a sĩ s n b a bãi vào m t v i/gi y m t cách không ch đích; trong ư ộ ọ ơ ừ ặ ả ấ ộ ủ khi UX không có UI thì ch gi ng nh 1 khung tranh mà không h có v i hay ỉ ố ư ề ả
gi y trên đó.ấ tr i nghi m s n ph m tuy t v i đả ệ ả ẩ ệ ờ ược th c hi n b t đ u t UX ự ệ ắ ầ ừ
ti p theo sau đó là UI. C hai đ u c n thi t cho s thành công c a s n ph m.” ế ả ề ầ ế ự ủ ả ẩ
Trang 7Rahul Varshney, Cocreator of Foster.fm UX và UI, c hai thành ph n đ u có ả ầ ề vai trò quan tr ng trong vi c thành công c a s n ph m.ọ ệ ủ ả ẩ
K t lu nế ậ
“M t giao di n đ p nh ng khó s d ng là m t ví d UI t t và UX t i. Trái l i, ộ ệ ẹ ư ử ụ ộ ụ ố ồ ạ
m t s n ph m d s d ng v i giao di n x u l i là ví d cho UX t t và UI t i.” ộ ả ẩ ễ ử ụ ớ ệ ấ ạ ụ ố ồ Nhà chuyên gia Helga Moreno, tác gi bài vi t The Gap Between UX And UI ả ế Design đã đ a ra kh ng đ nh ch c n ch: “Vì v y, b n có th th y, chúng đ u r tư ẳ ị ắ ị ậ ạ ể ấ ề ấ quan tr ng. Có t i hàng tri u ví d v các s n ph m tuy t v i v i ch m t y u ọ ớ ệ ụ ề ả ẩ ệ ờ ớ ỉ ộ ế
t , v y thì hãy tố ậ ưởng tượng xem s thành công nh th nào khi có c hai y u t ẽ ư ế ả ế ố này?”
Chu n b v ki n th cẩ ị ề ế ứ
Đ h c UI/UX hi u qu n hãy ch c ch c r ng b n đã chu n b cho mình m t ể ọ ệ ả ắ ắ ằ ạ ẩ ị ộ
n n t ng thi t k c c t t, đi u đó bao g m: lý thuy t màu s c, cách trình bày bề ả ế ế ự ố ề ồ ế ắ ố
c c, lý thuy t v font, các nguyên lý c b n khác c a thi t k ụ ế ề ơ ả ủ ế ế
B n c n có m t n n t ng ki n th c t t v IT, Đ c bi t là nh ng ki n th c v ạ ầ ộ ề ả ế ứ ố ề ặ ệ ữ ế ứ ề thi t k h th ng. Đây s là s b tr t t nh t dành cho b n khi h c. N u b n ế ế ệ ố ẽ ự ổ ợ ố ấ ạ ọ ế ạ
h c IT ra thì đây là m t th m nh quá l n khi b t đ u h c UI/UX.ọ ộ ế ạ ớ ắ ầ ọ
Chu n b v k năngẩ ị ề ỹ
B i đáp nh ng k năng s d ng các ph n m m đ h a nh Photoshop và ồ ữ ỹ ử ụ ầ ề ồ ọ ư
Illustrator, đây là m t k năng c c k quan tr ng n u b n mu n tr thành m t ộ ỹ ự ỳ ọ ế ạ ố ở ộ
UI UX Design chuyên nghi p, đ ng c p.ệ ẳ ấ
N u b n mu n theo ngh UI UX Design ch c ch n b n đã có s tìm hi u k ế ạ ố ề ắ ắ ạ ự ể ỹ
lương v cách s d ng các ph n m m thi t k đ h a. Khi đó vi c c a b n ch ề ử ụ ầ ề ế ế ồ ọ ệ ủ ạ ỉ
là nâng cao kĩ năng cũng nh s d ng các skill c p đ cao h n. Còn n u b n ư ử ụ ở ấ ộ ơ ế ạ
ch a ti p xúc thì hãy nhanh chóng trang b cho mình các ki n th c c b n v ư ế ị ế ứ ơ ả ề
nh ng ph n m m đ h a đ giúp quá trình h c UI/UX c a mình d dàng h n.ữ ầ ề ồ ọ ể ọ ủ ễ ơ
Th c hànhự
H c luôn đi đôi v i hành, v y nên b n hãy c g ng tham gia nhi u d án thu c ọ ớ ậ ạ ố ắ ề ự ộ nhi u lĩnh v c khác nhau đ tích lũy kinh nghi m. T đó giúp b n n m b t ề ự ể ệ ừ ạ ắ ắ
được tâm lý c a ngủ ười dùng. Khi y vi c h c UI/UX s tr nên d dàng h n r tấ ệ ọ ẽ ở ễ ơ ấ
Trang 8nhi u. B n đã n m đề ạ ắ ược ý tưởng thì vi c h c UI/UX đó ch còn là công c đ ệ ọ ỉ ụ ể
b n th c hành mà thôi.ạ ự
Tham kh o và h c h iả ọ ỏ
Test nh ng website, s n ph m n i ti ng đ xem h làm nh th nào, đó là m t ữ ả ẩ ổ ế ể ọ ư ế ộ cách h c h i r t h u ích và th c t Qua quá trình phân tích nh ng website, s n ọ ỏ ấ ữ ự ế ữ ả
ph m đó s giúp b n th y đẩ ẽ ạ ấ ược nh ng đi m m nh và y u c a website đó t đó ữ ể ạ ế ủ ừ rút kinh nghi m cho b n thân mình khi thi t k ệ ả ế ế
Ch n ngu n tài li u tham kh o phù h p v i kh năng c a mình. M t s ví d ọ ồ ệ ả ợ ớ ả ủ ộ ố ụ
nh : Don't make me think, The Principles of Beautiful Web Design, The Essentialsư
of Interaction Design, Professional Web Design…
Follow m t s designer n i ti ng đ h c h i: Behance, Dripple, Themeforest, ộ ố ổ ế ể ọ ỏ Pinterest đ c p nh t xu th và l y c m h ng t các thi t k c a h T đó t o ể ậ ấ ế ấ ả ứ ừ ế ế ủ ọ ừ ạ
ra các s n ph m riêng cho b n thân mình.ả ẩ ả
Vi c h c UI/UX đòi h i b n ph i có s tinh t và y u t kinh nghi m luôn ệ ọ ỏ ạ ả ự ế ế ố ệ
được đ cao. Hãy t trang b ki n th c cho mình đ có đề ự ị ế ứ ể ược cái nhìn khái quát
nh t, đáp ng đúng nhu c u c a khách hàng khi thi t k ấ ứ ầ ủ ế ế