{"id":4819,"date":"2026-09-01T08:57:21","date_gmt":"2026-09-01T08:57:21","guid":{"rendered":"https:\/\/vbaseup.com\/kien-thuc\/?p=4819"},"modified":"2026-09-01T09:22:29","modified_gmt":"2026-09-01T09:22:29","slug":"12-nguyen-tac-thiet-ke-thi-giac","status":"publish","type":"post","link":"https:\/\/vbaseup.com\/kien-thuc\/12-nguyen-tac-thiet-ke-thi-giac\/","title":{"rendered":"12 nguy\u00ean t\u1eafc thi\u1ebft k\u1ebf th\u1ecb gi\u00e1c trong CRO v\u00e0 Content Marketing"},"content":{"rendered":"

Ch\u1ec9 m\u1ea5t 0.05 gi\u00e2y \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng quy\u1ebft \u0111\u1ecbnh r\u1eddi kh\u1ecfi website c\u1ee7a b\u1ea1n, d\u00f9 h\u1ecd c\u00f2n ch\u01b0a k\u1ecbp \u0111\u1ecdc m\u1ed9t d\u00f2ng ch\u1eef n\u00e0o.<\/strong><\/p><\/blockquote>\n

B\u1ea1n \u0111\u00e3 bao gi\u1edd m\u1edf m\u1ed9t website, nh\u00ecn l\u01b0\u1edbt qua r\u1ed3i mu\u1ed1n tho\u00e1t ra ngay d\u00f9 ch\u01b0a bi\u1ebft trang \u0111\u00f3 \u0111ang vi\u1ebft g\u00ec? C\u1ea3m gi\u00e1c n\u00e0y th\u1ef1c ra x\u1ea3y \u0111\u1ebfn nhanh h\u01a1n m\u1ed9t c\u00e1i ch\u1edbp m\u1eaft.<\/p>\n

N\u0103m 2006, nh\u00f3m nghi\u00ean c\u1ee9u c\u1ee7a Gitte Lindgaard t\u1ea1i \u0110\u1ea1i h\u1ecdc Carleton (Canada) cho h\u00e0ng tr\u0103m ng\u01b0\u1eddi xem \u1ea3nh ch\u1ee5p c\u00e1c trang web trong \u0111\u00fang 50 mili gi\u00e2y<\/strong>. \u0110i\u1ec1u \u0111\u00e1ng ch\u00fa \u00fd l\u00e0, \u0111\u00e1nh gi\u00e1 \u201c\u0111\u1eb9p hay x\u1ea5u\u201d h\u1ecd \u0111\u01b0a ra trong kho\u1ea3nh kh\u1eafc \u0111\u00f3 g\u1ea7n nh\u01b0 tr\u00f9ng kh\u1edbp v\u1edbi \u0111\u00e1nh gi\u00e1 sau khi \u0111\u01b0\u1ee3c nh\u00ecn website l\u00e2u h\u01a1n.<\/p>\n

N\u00f3i c\u00e1ch kh\u00e1c, n\u00e3o b\u1ed9 \u0111\u00e3 \u201cch\u1ed1t\u201d c\u1ea3m nh\u1eadn v\u1ec1 m\u1ed9t website tr\u01b0\u1edbc khi k\u1ecbp x\u1eed l\u00fd n\u1ed9i dung. Th\u1ee9 t\u00e1c \u0111\u1ed9ng \u0111\u1ebfn \u1ea5n t\u01b0\u1ee3ng \u0111\u1ea7u ti\u00ean l\u00fac \u0111\u00f3 kh\u00f4ng ph\u1ea3i n\u1ed9i dung, m\u00e0 l\u00e0 c\u00e1ch c\u00e1c y\u1ebfu t\u1ed1 tr\u00ean trang \u0111\u01b0\u1ee3c s\u1eafp x\u1ebfp: c\u00e1i g\u00ec to, c\u00e1i g\u00ec nh\u1ecf, c\u00e1i g\u00ec \u0111\u1ee9ng g\u1ea7n nhau v\u00e0 c\u00e1i g\u00ec n\u1ed5i l\u00ean tr\u01b0\u1edbc m\u1eaft.<\/p>\n

\"L\u1ed9
Nh\u1eefng \u0111i\u1ec3m nh\u00ecn n\u1ed1i ti\u1ebfp nhau cho th\u1ea5y b\u1ed1 c\u1ee5c quy\u1ebft \u0111\u1ecbnh n\u01a1i m\u1eaft d\u1eebng l\u1ea1i tr\u01b0\u1edbc.<\/figcaption><\/figure>\n

\u0110\u00e2y l\u00e0 nh\u1eefng g\u00ec thi\u1ebft k\u1ebf th\u1ecb gi\u00e1c (visual design) gi\u1ea3i quy\u1ebft. B\u1ea1n kh\u00f4ng c\u1ea7n ph\u1ea3i c\u00f3 n\u0103ng khi\u1ebfu b\u1ea9m sinh m\u1edbi h\u1ecdc \u0111\u01b0\u1ee3c n\u00f3, b\u1edfi ph\u1ea7n l\u1edbn c\u00e1ch m\u1eaft ti\u1ebfp nh\u1eadn m\u1ed9t website \u0111\u1ec1u v\u1eadn h\u00e0nh theo 12 nguy\u00ean t\u1eafc d\u1ec5 n\u1eafm b\u1eaft. V\u1eady m\u1eaft ch\u00fang ta nh\u00ecn website nh\u01b0 th\u1ebf n\u00e0o tr\u01b0\u1edbc khi k\u1ecbp \u0111\u1ecdc n\u00f3?<\/p>\n

V\u00ec sao m\u1eaft ng\u01b0\u1eddi qu\u00e9t website theo h\u00ecnh ch\u1eef F?<\/h2>\n

Tr\u01b0\u1edbc khi \u0111i v\u00e0o t\u1eebng nguy\u00ean t\u1eafc, c\u1ea7n bi\u1ebft r\u1eb1ng m\u1eaft ng\u01b0\u1eddi kh\u00f4ng \u0111\u1ecdc website theo c\u00e1ch ng\u1eabu nhi\u00ean. Ch\u00fang ta th\u01b0\u1eddng \u0111i theo m\u1ed9t khu\u00f4n m\u1eabu t\u01b0\u01a1ng t\u1ef1 nhau.<\/p>\n

N\u0103m 2006, Nielsen Norman Group (NNG) – t\u1ed5 ch\u1ee9c nghi\u00ean c\u1ee9u tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng h\u00e0ng \u0111\u1ea7u th\u1ebf gi\u1edbi – g\u1eafn thi\u1ebft b\u1ecb theo d\u00f5i m\u1eaft cho 232 ng\u01b0\u1eddi v\u00e0 ghi l\u1ea1i c\u00e1ch h\u1ecd \u0111\u1ecdc h\u00e0ng ngh\u00ecn trang web. K\u1ebft qu\u1ea3 cho th\u1ea5y ph\u1ea7n l\u1edbn ng\u01b0\u1eddi d\u00f9ng qu\u00e9t trang theo h\u00ecnh ch\u1eef F: \u0111\u1ecdc ngang ph\u1ea7n tr\u00ean c\u00f9ng, \u0111i xu\u1ed1ng m\u1ed9t \u0111o\u1ea1n r\u1ed3i \u0111\u1ecdc ngang l\u1ea7n n\u1eefa v\u1edbi qu\u00e3ng ng\u1eafn h\u01a1n, sau \u0111\u00f3 ch\u1ec9 l\u01b0\u1edbt d\u1ecdc theo c\u1ed9t b\u00ean tr\u00e1i.<\/p>\n

\"B\u1ea3n
Hai n\u00e9t qu\u00e9t ngang v\u00e0 tr\u1ee5c d\u1ecdc b\u00ean tr\u00e1i gi\u1ea3i th\u00edch v\u00ec sao n\u1ed9i dung quan tr\u1ecdng c\u1ea7n \u0111\u01b0\u1ee3c \u01b0u ti\u00ean \u1edf \u0111\u1ea7u trang.<\/figcaption><\/figure>\n

H\u01a1n m\u1ed9t th\u1eadp k\u1ef7 sau, NNG l\u1eb7p l\u1ea1i th\u00ed nghi\u1ec7m tr\u00ean c\u1ea3 desktop l\u1eabn mobile v\u00e0 khu\u00f4n m\u1eabu n\u00e0y v\u1eabn c\u00f2n nguy\u00ean. Ngo\u00e0i ra, h\u1ecd c\u0169ng ghi nh\u1eadn m\u1ed9t s\u1ed1 c\u00e1ch qu\u00e9t kh\u00e1c t\u00f9y lo\u1ea1i n\u1ed9i dung, nh\u01b0 nh\u00ecn v\u00e0o t\u1eebng \u0111i\u1ec3m r\u1eddi r\u1ea1c ho\u1eb7c qu\u00e9t theo t\u1eebng l\u1edbp th\u00f4ng tin.<\/p>\n

Ng\u01b0\u1eddi d\u00f9ng kh\u00f4ng \u0111\u1ecdc website. H\u1ecd qu\u00e9t n\u00f3.<\/p><\/blockquote>\n

V\u00ec v\u1eady, 12 nguy\u00ean t\u1eafc d\u01b0\u1edbi \u0111\u00e2y kh\u00f4ng ch\u1ec9 gi\u00fap website \u201c\u0111\u1eb9p m\u1eaft\u201d h\u01a1n. Ch\u00fang c\u00f2n gi\u00fap b\u1ea1n ch\u1ee7 \u0111\u1ed9ng d\u1eabn \u0111\u01b0\u1eddng cho m\u1eaft, \u0111\u1eb7t \u0111\u00fang n\u1ed9i dung quan tr\u1ecdng v\u00e0o nh\u1eefng v\u1ecb tr\u00ed ng\u01b0\u1eddi d\u00f9ng c\u00f3 kh\u1ea3 n\u0103ng nh\u00ecn th\u1ea5y tr\u01b0\u1edbc.<\/p>\n

12 nguy\u00ean t\u1eafc thi\u1ebft k\u1ebf th\u1ecb gi\u00e1c c\u01a1 b\u1ea3n<\/h2>\n

1. K\u00edch th\u01b0\u1edbc v\u00e0 t\u1ef7 l\u1ec7 (Size and Scale)<\/h3>\n
\"Minh
K\u00edch th\u01b0\u1edbc l\u1edbn h\u01a1n gi\u00fap n\u1ed9i dung quan tr\u1ecdng n\u1ed5i b\u1eadt tr\u01b0\u1edbc trong m\u1ed9t b\u1ed1 c\u1ee5c. Ngu\u1ed3n: 2POINT<\/figcaption><\/figure>\n

Trong c\u00f9ng m\u1ed9t khung h\u00ecnh, th\u1ee9 g\u00ec to h\u01a1n th\u01b0\u1eddng \u0111\u01b0\u1ee3c nh\u00ecn th\u1ea5y tr\u01b0\u1edbc. Nguy\u00ean t\u1eafc n\u00e0y \u0111\u01a1n gi\u1ea3n nh\u1ea5t, nh\u01b0ng c\u0169ng d\u1ec5 b\u1ecb b\u1ecf qua khi m\u1ecdi y\u1ebfu t\u1ed1 tr\u00ean trang \u0111\u1ec1u \u0111ang c\u1ed1 gi\u00e0nh l\u1ea5y s\u1ef1 ch\u00fa \u00fd.<\/p>\n

K\u00edch th\u01b0\u1edbc t\u1ea1o ra \u201ctr\u1ecdng l\u01b0\u1ee3ng th\u1ecb gi\u00e1c\u201d. Ch\u1eb3ng h\u1ea1n, ti\u00eau \u0111\u1ec1 l\u1edbn s\u1ebd k\u00e9o m\u1eaft v\u1ec1 tr\u01b0\u1edbc \u0111o\u1ea1n v\u0103n nh\u1ecf, c\u00f2n n\u00fat b\u1ea5m to th\u01b0\u1eddng n\u1ed5i b\u1eadt h\u01a1n m\u1ed9t \u0111\u01b0\u1eddng link n\u1eb1m l\u1eabn trong n\u1ed9i dung. \u0110\u00e2y c\u0169ng l\u00e0 l\u00fd do h\u1ec7 th\u1ed1ng heading tr\u00ean web \u0111i t\u1eeb H1 xu\u1ed1ng H6, v\u1edbi k\u00edch th\u01b0\u1edbc gi\u1ea3m d\u1ea7n theo m\u1ee9c \u0111\u1ed9 quan tr\u1ecdng.<\/p>\n

V\u1edbi website marketing, t\u1ef7 l\u1ec7 n\u00ean ph\u1ea3n \u00e1nh \u0111\u00fang th\u1ee9 b\u1ea1n mu\u1ed1n kh\u00e1ch h\u00e0ng \u01b0u ti\u00ean nh\u00ecn. Ti\u00eau \u0111\u1ec1 ch\u00ednh c\u1ea7n l\u1edbn h\u01a1n ti\u00eau \u0111\u1ec1 ph\u1ee5, c\u00f2n n\u00fat \u201c\u0110\u0103ng k\u00fd ngay\u201d n\u00ean to v\u00e0 r\u00f5 h\u01a1n \u201cT\u00ecm hi\u1ec3u th\u00eam\u201d n\u1ebfu chuy\u1ec3n \u0111\u1ed5i l\u00e0 m\u1ee5c ti\u00eau quan tr\u1ecdng nh\u1ea5t.<\/p>\n

2. Kho\u1ea3ng c\u00e1ch (Spacing)<\/h3>\n
\"H\u1ec7
M\u1ed9t thang kho\u1ea3ng c\u00e1ch nh\u1ea5t qu\u00e1n gi\u00fap c\u00e1c th\u00e0nh ph\u1ea7n trong giao di\u1ec7n t\u1ea1o \u0111\u01b0\u1ee3c nh\u1ecbp r\u00f5 r\u00e0ng. Ngu\u1ed3n: Vitsky<\/figcaption><\/figure>\n

Kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c d\u00f2ng, \u0111o\u1ea1n v\u0103n v\u00e0 kh\u1ed1i n\u1ed9i dung quy\u1ebft \u0111\u1ecbnh m\u1ed9t website tr\u00f4ng \u201cd\u1ec5 th\u1edf\u201d hay \u201cng\u1ed9p th\u1edf\u201d. Khi m\u1ecdi th\u1ee9 b\u1ecb d\u1ed3n qu\u00e1 s\u00e1t nhau, m\u1eaft ch\u00fang ta ph\u1ea3i l\u00e0m vi\u1ec7c nhi\u1ec1u h\u01a1n \u0111\u1ec3 nh\u1eadn ra \u0111\u00e2u l\u00e0 t\u1eebng nh\u00f3m th\u00f4ng tin ri\u00eang bi\u1ec7t.<\/p>\n

Nghi\u00ean c\u1ee9u c\u1ee7a \u0110\u1ea1i h\u1ecdc Wichita State (M\u1ef9) ch\u1ec9 ra r\u1eb1ng, kho\u1ea3ng c\u00e1ch h\u1ee3p l\u00fd gi\u1eefa d\u00f2ng v\u00e0 \u0111o\u1ea1n v\u0103n c\u00f3 th\u1ec3 t\u0103ng kh\u1ea3 n\u0103ng hi\u1ec3u v\u00e0 ghi nh\u1edb n\u1ed9i dung l\u00ean \u0111\u1ebfn 20%<\/strong>. Trong khi \u0111\u00f3, kh\u1ea3o s\u00e1t c\u1ee7a Adobe t\u1eebng ghi nh\u1eadn c\u00f3 t\u1edbi 38% ng\u01b0\u1eddi d\u00f9ng r\u1eddi kh\u1ecfi website<\/strong> khi th\u1ea5y b\u1ed1 c\u1ee5c r\u1ed1i m\u1eaft.<\/p>\n

Trong thi\u1ebft k\u1ebf, kho\u1ea3ng c\u00e1ch th\u01b0\u1eddng \u0111\u01b0\u1ee3c chia l\u00e0m hai lo\u1ea1i. Macro spacing l\u00e0 kho\u1ea3ng c\u00e1ch l\u1edbn gi\u1eefa c\u00e1c kh\u1ed1i ho\u1eb7c c\u1ed9t, c\u00f2n micro spacing g\u1ed3m gi\u00e3n d\u00f2ng v\u00e0 gi\u00e3n ch\u1eef. C\u1ea3 hai c\u00f9ng quy\u1ebft \u0111\u1ecbnh nh\u1ecbp \u0111\u1ecdc c\u1ee7a trang.<\/p>\n

3. M\u00e0u s\u1eafc v\u00e0 t\u01b0\u01a1ng ph\u1ea3n (Color and Contrast)<\/h3>\n
\"V\u00ed
C\u00e1c m\u1ed1c t\u01b0\u01a1ng ph\u1ea3n kh\u00e1c nhau cho th\u1ea5y v\u00ec sao t\u1ef7 l\u1ec7 4.5:1 \u0111\u1eb7c bi\u1ec7t quan tr\u1ecdng v\u1edbi v\u0103n b\u1ea3n th\u00f4ng th\u01b0\u1eddng.<\/figcaption><\/figure>\n

M\u00e0u s\u1eafc kh\u00f4ng ch\u1ec9 c\u00f3 t\u00e1c d\u1ee5ng trang tr\u00ed m\u00e0 c\u00f2n d\u1eabn \u0111\u01b0\u1eddng cho m\u1eaft, v\u00e0 v\u1edbi nhi\u1ec1u ng\u01b0\u1eddi, \u0111\u1ed9 t\u01b0\u01a1ng ph\u1ea3n l\u00e0 \u0111i\u1ec1u ki\u1ec7n \u0111\u1ec3 h\u1ecd \u0111\u1ecdc \u0111\u01b0\u1ee3c n\u1ed9i dung.<\/p>\n

Theo ti\u00eau chu\u1ea9n WCAG (Web Content Accessibility Guidelines), v\u0103n b\u1ea3n th\u00f4ng th\u01b0\u1eddng c\u1ea7n c\u00f3 t\u1ef7 l\u1ec7 t\u01b0\u01a1ng ph\u1ea3n t\u1ed1i thi\u1ec3u 4.5:1<\/strong> so v\u1edbi n\u1ec1n. Ch\u1eef c\u1ee1 l\u1edbn t\u1eeb 18pt tr\u1edf l\u00ean c\u1ea7n t\u1ef7 l\u1ec7 t\u1ed1i thi\u1ec3u 3:1<\/strong>.<\/p>\n

\u0110\u00e2y kh\u00f4ng ph\u1ea3i nh\u1eefng con s\u1ed1 t\u00f9y ti\u1ec7n, \u0111\u1eb7c bi\u1ec7t khi kh\u1ea3 n\u0103ng ti\u1ebfp nh\u1eadn m\u00e0u s\u1eafc c\u1ee7a m\u1ed7i ng\u01b0\u1eddi kh\u00f4ng gi\u1ed1ng nhau.<\/p>\n

Theo T\u1ed5 ch\u1ee9c Y t\u1ebf Th\u1ebf gi\u1edbi (WHO), kho\u1ea3ng 2.2 t\u1ef7 ng\u01b0\u1eddi<\/strong> tr\u00ean to\u00e0n c\u1ea7u g\u1eb7p m\u1ed9t d\u1ea1ng suy gi\u1ea3m th\u1ecb l\u1ef1c n\u00e0o \u0111\u00f3. B\u00ean c\u1ea1nh \u0111\u00f3, kho\u1ea3ng 8% nam gi\u1edbi<\/strong> b\u1ecb m\u00f9 m\u00e0u \u1edf nhi\u1ec1u m\u1ee9c \u0111\u1ed9 kh\u00e1c nhau.<\/p>\n

V\u1edbi website marketing, m\u00e0u t\u01b0\u01a1ng ph\u1ea3n th\u01b0\u1eddng \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 l\u00e0m n\u1ed5i b\u1eadt n\u00fat CTA (call-to-action), khi\u1ebfn m\u1eaft kh\u00f3 l\u01b0\u1edbt qua m\u00e0 kh\u00f4ng nh\u1eadn ra. Tuy nhi\u00ean, b\u1ea1n kh\u00f4ng n\u00ean ch\u1ec9 d\u00f9ng m\u00e0u \u0111\u1ec3 truy\u1ec1n t\u1ea3i th\u00f4ng tin quan tr\u1ecdng, b\u1edfi kh\u00f4ng ph\u1ea3i ai c\u0169ng ph\u00e2n bi\u1ec7t m\u00e0u s\u1eafc gi\u1ed1ng nhau. H\u00e3y k\u1ebft h\u1ee3p th\u00eam ch\u1eef, h\u00ecnh d\u1ea1ng ho\u1eb7c icon.<\/p>\n

4. Th\u1ee9 b\u1eadc ch\u1eef (Typography Hierarchy)<\/h3>\n
\"Th\u1ee9
C\u00e1c c\u1ea5p \u0111\u1ed9 ch\u1eef gi\u1ea3m d\u1ea7n gi\u00fap ng\u01b0\u1eddi \u0111\u1ecdc nh\u1eadn ra \u0111\u00e2u l\u00e0 ti\u00eau \u0111\u1ec1, n\u1ed9i dung ph\u1ee5 v\u00e0 ph\u1ea7n v\u0103n b\u1ea3n ch\u00ednh.<\/figcaption><\/figure>\n

N\u1ebfu k\u00edch th\u01b0\u1edbc \u00e1p d\u1ee5ng cho m\u1ecdi y\u1ebfu t\u1ed1 tr\u00ean trang, th\u00ec th\u1ee9 b\u1eadc ch\u1eef l\u00e0 phi\u00ean b\u1ea3n d\u00e0nh ri\u00eang cho v\u0103n b\u1ea3n. H\u1ec7 th\u1ed1ng r\u00f5 r\u00e0ng th\u01b0\u1eddng k\u1ebft h\u1ee3p k\u00edch th\u01b0\u1edbc, \u0111\u1ed9 \u0111\u1eadm (bold thu h\u00fat h\u01a1n regular), m\u00e0u s\u1eafc v\u00e0 kho\u1ea3ng tr\u1eafng xung quanh.<\/p>\n

Khi b\u1ea1n s\u1eed d\u1ee5ng c\u00e1c y\u1ebfu t\u1ed1 n\u00e0y nh\u1ea5t qu\u00e1n, ng\u01b0\u1eddi \u0111\u1ecdc ch\u1ec9 c\u1ea7n nh\u00ecn heading v\u00e0 nh\u1eefng t\u1eeb in \u0111\u1eadm c\u0169ng n\u1eafm \u0111\u01b0\u1ee3c ph\u1ea7n l\u1edbn n\u1ed9i dung ch\u00ednh. \u0110i\u1ec1u n\u00e0y ph\u00f9 h\u1ee3p v\u1edbi khu\u00f4n m\u1eabu ch\u1eef F, b\u1edfi ng\u01b0\u1eddi d\u00f9ng v\u1ed1n kh\u00f4ng \u0111\u1ecdc k\u1ef9 t\u1eebng d\u00f2ng ngay t\u1eeb \u0111\u1ea7u.<\/p>\n

C\u00f3 m\u1ed9t chi ti\u1ebft nh\u1ecf nh\u01b0ng \u0111\u00e1ng nh\u1edb: \u0111o\u1ea1n v\u0103n d\u1ec5 \u0111\u1ecdc nh\u1ea5t th\u01b0\u1eddng c\u00f3 kho\u1ea3ng 45-75 k\u00fd t\u1ef1<\/strong> tr\u00ean m\u1ed7i d\u00f2ng, b\u1edfi d\u00f2ng qu\u00e1 d\u00e0i khi\u1ebfn m\u1eaft d\u1ec5 \u201cl\u1ea1c\u201d khi chuy\u1ec3n xu\u1ed1ng d\u01b0\u1edbi, c\u00f2n d\u00f2ng qu\u00e1 ng\u1eafn l\u1ea1i l\u00e0m nh\u1ecbp \u0111\u1ecdc b\u1ecb ng\u1eaft li\u00ean t\u1ee5c.<\/p>\n

5. S\u1ef1 g\u1ea7n nhau (Proximity)<\/h3>\n
\"Nguy\u00ean
Kho\u1ea3ng c\u00e1ch nh\u1ecf t\u1ea1o c\u1ea3m gi\u00e1c c\u00e1c ph\u1ea7n t\u1eed thu\u1ed9c c\u00f9ng nh\u00f3m, c\u00f2n kho\u1ea3ng c\u00e1ch l\u1edbn t\u1ea1o ranh gi\u1edbi gi\u1eefa c\u00e1c nh\u00f3m. Ngu\u1ed3n: Medium<\/figcaption><\/figure>\n

N\u00e3o b\u1ed9 ch\u00fang ta lu\u00f4n t\u00ecm c\u00e1ch gom nh\u1eefng g\u00ec m\u1eaft nh\u00ecn th\u1ea5y th\u00e0nh t\u1eebng nh\u00f3m. \u0110\u00e2y c\u0169ng l\u00e0 n\u1ed9i dung \u0111\u01b0\u1ee3c t\u00e2m l\u00fd h\u1ecdc Gestalt nghi\u00ean c\u1ee9u t\u1eeb \u0111\u1ea7u th\u1ebf k\u1ef7 XX, v\u1edbi ba t\u00ean tu\u1ed5i Max Wertheimer, Wolfgang K\u00f6hler v\u00e0 Kurt Koffka.<\/p>\n

Theo nguy\u00ean t\u1eafc g\u1ea7n nhau, nh\u1eefng th\u1ee9 \u0111\u01b0\u1ee3c \u0111\u1eb7t s\u00e1t nhau s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3u l\u00e0 c\u00f3 li\u00ean quan<\/strong>, d\u00f9 ch\u00fang kh\u00e1c nhau v\u1ec1 m\u00e0u s\u1eafc, h\u00ecnh d\u1ea1ng hay k\u00edch th\u01b0\u1edbc. Ng\u01b0\u1ee3c l\u1ea1i, kho\u1ea3ng c\u00e1ch xa ng\u1ea7m cho ng\u01b0\u1eddi xem bi\u1ebft hai y\u1ebfu t\u1ed1 kh\u00f4ng thu\u1ed9c c\u00f9ng nh\u00f3m.<\/p>\n

\"V\u00ed
Ch\u1ec9 c\u1ea7n thay \u0111\u1ed5i kho\u1ea3ng c\u00e1ch, c\u00f9ng m\u1ed9t t\u1eadp h\u1ee3p ph\u1ea7n t\u1eed c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u0111\u1ecdc th\u00e0nh m\u1ed9t ho\u1eb7c nhi\u1ec1u nh\u00f3m. Ngu\u1ed3n: UX Misfit<\/figcaption><\/figure>\n

\u1ee8ng d\u1ee5ng n\u00e0y r\u1ea5t tr\u1ef1c quan tr\u00ean website: nh\u00e3n \u201cEmail\u201d c\u1ea7n \u0111\u1ee9ng g\u1ea7n \u00f4 nh\u1eadp email h\u01a1n \u00f4 nh\u1eadp s\u1ed1 \u0111i\u1ec7n tho\u1ea1i, c\u00f2n \u0111\u1ecba ch\u1ec9, s\u1ed1 \u0111i\u1ec7n tho\u1ea1i v\u00e0 email n\u00ean \u0111\u01b0\u1ee3c gom th\u00e0nh kh\u1ed1i ri\u00eang. Ch\u1ec9 c\u1ea7n thay \u0111\u1ed5i kho\u1ea3ng c\u00e1ch, b\u1ea1n \u0111\u00e3 c\u00f3 th\u1ec3 cho ng\u01b0\u1eddi xem bi\u1ebft th\u1ee9 g\u00ec thu\u1ed9c v\u1ec1 th\u1ee9 g\u00ec m\u00e0 kh\u00f4ng c\u1ea7n th\u00eam \u0111\u01b0\u1eddng vi\u1ec1n hay khung bao.<\/p>\n

6. Quy t\u1eafc s\u1ed1 l\u1ebb (Rule of Odds)<\/h3>\n
\"Giao
Ba kh\u1ed1i n\u1ed9i dung \u0111\u01b0\u1ee3c \u0111\u1eb7t th\u00e0nh m\u1ed9t nh\u00f3m gi\u00fap b\u1ed1 c\u1ee5c landing page t\u1ea1o \u0111i\u1ec3m nh\u1ea5n thay v\u00ec b\u1ecb chia th\u00e0nh c\u00e1c c\u1eb7p \u0111\u1ed1i x\u1ee9ng. Ngu\u1ed3n: ZURB Helio<\/figcaption><\/figure>\n

Con ng\u01b0\u1eddi c\u00f3 xu h\u01b0\u1edbng t\u1ef1 \u0111\u1ed9ng gh\u00e9p c\u1eb7p nh\u1eefng g\u00ec xu\u1ea5t hi\u1ec7n theo s\u1ed1 ch\u1eb5n, c\u00f3 l\u1ebd v\u00ec c\u01a1 th\u1ec3 ta v\u1ed1n \u0111\u1ed1i x\u1ee9ng v\u1edbi hai m\u1eaft, hai tay v\u00e0 hai ch\u00e2n. Nh\u01b0ng khi nh\u00ecn th\u1ea5y s\u1ed1 l\u1ebb ph\u1ea7n t\u1eed, n\u00e3o kh\u00f4ng th\u1ec3 gh\u00e9p c\u1eb7p tr\u1ecdn v\u1eb9n v\u00e0 lu\u00f4n c\u00f2n d\u01b0 l\u1ea1i m\u1ed9t th\u1ee9.<\/p>\n

\u0110i\u1ec1u n\u00e0y khi\u1ebfn m\u1eaft ti\u1ebfp t\u1ee5c di chuy\u1ec3n qua l\u1ea1i l\u00e2u h\u01a1n. V\u00ec v\u1eady, s\u1ed1 3 xu\u1ea5t hi\u1ec7n r\u1ea5t nhi\u1ec1u trong thi\u1ebft k\u1ebf, t\u1eeb ba th\u1ebb t\u00ednh n\u0103ng (feature card), ba g\u00f3i gi\u00e1 \u0111\u1ebfn ba \u0111\u00e1nh gi\u00e1 kh\u00e1ch h\u00e0ng n\u1ed5i b\u1eadt tr\u00ean trang ch\u1ee7.<\/p>\n

D\u00f9 v\u1eady, quy t\u1eafc s\u1ed1 l\u1ebb mang t\u00ednh g\u1ee3i \u00fd nhi\u1ec1u h\u01a1n l\u00e0 lu\u1eadt b\u1ea5t bi\u1ebfn. S\u1ed1 ch\u1eb5n v\u1eabn ph\u00f9 h\u1ee3p trong nh\u1eefng tr\u01b0\u1eddng h\u1ee3p b\u1ea1n mu\u1ed1n truy\u1ec1n t\u1ea3i c\u1ea3m gi\u00e1c \u1ed5n \u0111\u1ecbnh v\u00e0 c\u00e2n b\u1eb1ng tuy\u1ec7t \u0111\u1ed1i, thay v\u00ec t\u1ea1o th\u00eam chuy\u1ec3n \u0111\u1ed9ng cho m\u1eaft.<\/p>\n

7. \u0110\u01b0\u1eddng d\u1eabn th\u1ecb gi\u00e1c v\u00e0 h\u01b0\u1edbng nh\u00ecn (Leading Lines \/ Eye Gaze Patterns)<\/h3>\n
\"Giao
C\u00e1c \u0111\u01b0\u1eddng d\u1eabn tr\u00ean layout t\u1ea1o lu\u1ed3ng nh\u00ecn t\u1eeb khu v\u1ef1c \u0111\u1ea7u trang v\u1ec1 ph\u00eda th\u00f4ng \u0111i\u1ec7p v\u00e0 CTA. Ngu\u1ed3n: DevInterface<\/figcaption><\/figure>\n

N\u1ebfu s\u1ef1 g\u1ea7n nhau gi\u00fap gom nh\u00f3m, th\u00ec \u0111\u01b0\u1eddng d\u1eabn th\u1ecb gi\u00e1c c\u00f3 t\u00e1c d\u1ee5ng \u0111i\u1ec1u h\u01b0\u1edbng. \u0110\u01b0\u1eddng th\u1eb3ng, \u0111\u01b0\u1eddng cong ho\u1eb7c h\u01b0\u1edbng nh\u00ecn c\u1ee7a ng\u01b0\u1eddi trong \u1ea3nh \u0111\u1ec1u c\u00f3 th\u1ec3 \u201ck\u00e9o\u201d m\u1eaft ng\u01b0\u1eddi xem \u0111i theo l\u1ed9 tr\u00ecnh \u0111\u01b0\u1ee3c s\u1eafp \u0111\u1eb7t tr\u01b0\u1edbc.<\/p>\n

Khu\u00f4n m\u1eabu ch\u1eef F m\u00e0 Nielsen Norman Group ph\u00e1t hi\u1ec7n ch\u00ednh l\u00e0 \u0111\u01b0\u1eddng d\u1eabn t\u1ef1 nhi\u00ean b\u1ea1n c\u00f3 th\u1ec3 t\u1eadn d\u1ee5ng. Th\u00f4ng \u0111i\u1ec7p quan tr\u1ecdng nh\u1ea5t th\u01b0\u1eddng n\u00ean n\u1eb1m \u1edf khu v\u1ef1c ph\u00eda tr\u00ean b\u00ean tr\u00e1i, n\u01a1i m\u1eaft c\u00f3 xu h\u01b0\u1edbng gh\u00e9 qua \u0111\u1ea7u ti\u00ean.<\/p>\n

B\u00ean c\u1ea1nh ch\u1eef, m\u0169i t\u00ean, \u0111\u01b0\u1eddng k\u1ebb hay \u00e1nh m\u1eaft c\u1ee7a ng\u01b0\u1eddi m\u1eabu trong \u1ea3nh hero c\u0169ng c\u00f3 s\u1ee9c d\u1eabn d\u1eaft r\u1ea5t m\u1ea1nh. Ch\u1eb3ng h\u1ea1n n\u1ebfu ng\u01b0\u1eddi trong \u1ea3nh nh\u00ecn v\u1ec1 ph\u00eda n\u00fat \u201c\u0110\u0103ng k\u00fd\u201d, nhi\u1ec1u kh\u1ea3 n\u0103ng ng\u01b0\u1eddi xem c\u0169ng v\u00f4 th\u1ee9c nh\u00ecn theo h\u01b0\u1edbng \u0111\u00f3.<\/p>\n

8. C\u0103n ch\u1ec9nh (Alignment)<\/h3>\n
\"L\u01b0\u1edbi
L\u01b0\u1edbi 12 c\u1ed9t t\u1ea1o c\u00e1c \u0111\u01b0\u1eddng chu\u1ea9n \u0111\u1ec3 ti\u00eau \u0111\u1ec1, h\u00ecnh \u1ea3nh v\u00e0 n\u1ed9i dung c\u00f9ng b\u00e1m v\u00e0o m\u1ed9t h\u1ec7 th\u1ed1ng. Ngu\u1ed3n: D-32 Blog<\/figcaption><\/figure>\n

M\u1ed9t website c\u00f3 th\u1ec3 s\u1edf h\u1eefu m\u00e0u \u0111\u1eb9p, n\u1ed9i dung hay v\u00e0 h\u00ecnh \u1ea3nh ch\u1ea5t l\u01b0\u1ee3ng, nh\u01b0ng n\u1ebfu c\u00e1c y\u1ebfu t\u1ed1 kh\u00f4ng th\u1eb3ng h\u00e0ng, t\u1ed5ng th\u1ec3 v\u1eabn tr\u00f4ng l\u1ed9n x\u1ed9n v\u00e0 thi\u1ebfu chuy\u00ean nghi\u1ec7p.<\/p>\n

C\u0103n ch\u1ec9nh th\u01b0\u1eddng \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n b\u1eb1ng h\u1ec7 th\u1ed1ng l\u01b0\u1edbi (grid system), trong \u0111\u00f3 trang \u0111\u01b0\u1ee3c chia th\u00e0nh c\u00e1c c\u1ed9t \u0111\u1ec1u nhau, ph\u1ed5 bi\u1ebfn nh\u1ea5t l\u00e0 l\u01b0\u1edbi 12 c\u1ed9t. Ti\u00eau \u0111\u1ec1, h\u00ecnh \u1ea3nh v\u00e0 \u0111o\u1ea1n v\u0103n s\u1ebd c\u00f9ng \u201cb\u00e1m\u201d v\u00e0o nh\u1eefng \u0111\u01b0\u1eddng th\u1eb3ng chung thay v\u00ec n\u1eb1m \u1edf c\u00e1c v\u1ecb tr\u00ed r\u1eddi r\u1ea1c.<\/p>\n

Nielsen Norman Group xem vi\u1ec7c c\u0103n ch\u1ec9nh theo l\u01b0\u1edbi l\u00e0 n\u1ec1n t\u1ea3ng c\u1ee7a thi\u1ebft k\u1ebf th\u1ecb gi\u00e1c t\u1ed1t, c\u00f9ng v\u1edbi th\u1ee9 b\u1eadc r\u00f5 r\u00e0ng, m\u00e0u s\u1eafc c\u00f3 ch\u1ee7 \u0111\u00edch v\u00e0 s\u1ef1 nh\u1ea5t qu\u00e1n xuy\u00ean su\u1ed1t. B\u1ea1n c\u0169ng kh\u00f4ng c\u1ea7n con m\u1eaft th\u1ea9m m\u1ef9 tinh t\u01b0\u1eddng \u0111\u1ec3 ki\u1ec3m tra \u0111i\u1ec1u n\u00e0y, ch\u1ec9 c\u1ea7n th\u1eed k\u1ebb \u0111\u01b0\u1eddng d\u1ecdc qua c\u00e1c y\u1ebfu t\u1ed1. N\u1ebfu ch\u00fang kh\u00f4ng c\u00f9ng \u201cb\u00e1m\u201d v\u00e0o \u0111\u01b0\u1eddng \u0111\u00f3, \u0111\u00e2y l\u00e0 d\u1ea5u hi\u1ec7u c\u1ea7n ch\u1ec9nh l\u1ea1i.<\/p>\n

9. Kho\u1ea3ng tr\u1ed1ng (Negative Space)<\/h3>\n
\"Giao
Kho\u1ea3ng tr\u1ed1ng r\u1ed9ng gi\u00fap ti\u00eau \u0111\u1ec1 v\u00e0 l\u1eddi k\u00eau g\u1ecdi h\u00e0nh \u0111\u1ed9ng n\u1ed5i b\u1eadt m\u00e0 kh\u00f4ng c\u1ea7n th\u00eam nhi\u1ec1u chi ti\u1ebft trang tr\u00ed. Ngu\u1ed3n: The Creative Momentum<\/figcaption><\/figure>\n

Kho\u1ea3ng tr\u1ed1ng th\u01b0\u1eddng b\u1ecb nh\u1ea7m v\u1edbi kho\u1ea3ng c\u00e1ch, d\u00f9 hai nguy\u00ean t\u1eafc n\u00e0y kh\u00f4ng ho\u00e0n to\u00e0n gi\u1ed1ng nhau. Kho\u1ea3ng c\u00e1ch tr\u1ea3 l\u1eddi c\u00e2u h\u1ecfi \u201cc\u00e1c ph\u1ea7n t\u1eed c\u00e1ch nhau bao xa\u201d, c\u00f2n kho\u1ea3ng tr\u1ed1ng l\u00e0 vi\u1ec7c ch\u1ee7 \u0111\u1ed9ng \u0111\u1ec3 tr\u1ed1ng v\u00f9ng l\u1edbn xung quanh y\u1ebfu t\u1ed1.<\/p>\n

Khi logo, ti\u00eau \u0111\u1ec1 ho\u1eb7c n\u00fat CTA \u0111\u01b0\u1ee3c bao quanh b\u1edfi nhi\u1ec1u kho\u1ea3ng tr\u1ed1ng, m\u1eaft s\u1ebd t\u1ef1 \u0111\u1ed9ng hi\u1ec3u \u0111\u00e2y l\u00e0 \u0111i\u1ec3m quan tr\u1ecdng tr\u00ean trang. Y\u1ebfu t\u1ed1 \u0111\u00f3 kh\u00f4ng c\u1ea7n th\u00eam m\u00e0u s\u1eafc hay k\u00edch th\u01b0\u1edbc \u0111\u1ec3 \u201cg\u00e0o th\u00e9t\u201d r\u1eb1ng ng\u01b0\u1eddi d\u00f9ng ph\u1ea3i ch\u00fa \u00fd \u0111\u1ebfn n\u00f3.<\/p>\n

\u0110\u00e2y c\u0169ng l\u00e0 l\u00fd do website c\u1ee7a c\u00e1c th\u01b0\u01a1ng hi\u1ec7u cao c\u1ea5p th\u01b0\u1eddng \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf r\u1ea5t \u201ctho\u00e1ng\u201d, trong khi trang tin t\u1ee9c c\u1ea7n ch\u1ee9a nhi\u1ec1u th\u00f4ng tin n\u00ean c\u00f3 \u00edt kho\u1ea3ng tr\u1ed1ng h\u01a1n. V\u1edbi ng\u01b0\u1eddi m\u1edbi l\u00e0m website marketing, b\u1ea3n n\u0103ng th\u01b0\u1eddng l\u00e0 l\u1ea5p \u0111\u1ea7y m\u1ecdi ch\u1ed7 tr\u1ed1ng b\u1eb1ng ch\u1eef, h\u00ecnh ho\u1eb7c banner. Nh\u01b0ng \u0111\u00f4i khi, th\u1ee9 khi\u1ebfn trang web tr\u00f4ng \u0111\u1eaft gi\u00e1 h\u01a1n l\u1ea1i l\u00e0 nh\u1eefng g\u00ec b\u1ea1n ch\u1ecdn kh\u00f4ng \u0111\u1eb7t l\u00ean \u0111\u00f3.<\/p>\n

10. S\u1ef1 l\u1eb7p l\u1ea1i (Repetition)<\/h3>\n
\"C\u00e1c
Vi\u1ec7c l\u1eb7p l\u1ea1i c\u00f9ng ki\u1ec3u icon v\u00e0 c\u1ea5u tr\u00fac gi\u00fap c\u00e1c th\u00e0nh ph\u1ea7n trong giao di\u1ec7n d\u1ec5 nh\u1eadn bi\u1ebft v\u00e0 t\u1ea1o c\u1ea3m gi\u00e1c nh\u1ea5t qu\u00e1n. Ngu\u1ed3n: Medium<\/figcaption><\/figure>\n

V\u00e0o cu\u1ed1i th\u1ebf k\u1ef7 XIX, nh\u00e0 t\u00e2m l\u00fd h\u1ecdc Hermann Ebbinghaus \u0111\u1eb7t n\u1ec1n m\u00f3ng cho c\u00e1c nghi\u00ean c\u1ee9u v\u1ec1 tr\u00ed nh\u1edb v\u00e0 ch\u1ec9 ra r\u1eb1ng, th\u00f4ng tin \u0111\u01b0\u1ee3c ti\u1ebfp x\u00fac l\u1eb7p \u0111i l\u1eb7p l\u1ea1i s\u1ebd \u0111\u01b0\u1ee3c n\u00e3o ghi nh\u1edb t\u1ed1t h\u01a1n h\u1eb3n nh\u1eefng g\u00ec ch\u1ec9 xu\u1ea5t hi\u1ec7n m\u1ed9t l\u1ea7n.<\/p>\n

Nguy\u00ean l\u00fd n\u00e0y g\u1ea7n nh\u01b0 \u0111\u01b0\u1ee3c gi\u1eef nguy\u00ean khi \u00e1p d\u1ee5ng v\u00e0o thi\u1ebft k\u1ebf th\u01b0\u01a1ng hi\u1ec7u. Khi website lu\u00f4n d\u00f9ng c\u00f9ng m\u1ed9t b\u1ea3ng m\u00e0u, ki\u1ec3u ch\u1eef v\u00e0 phong c\u00e1ch n\u00fat b\u1ea5m tr\u00ean m\u1ecdi trang, ng\u01b0\u1eddi d\u00f9ng kh\u00f4ng ch\u1ec9 th\u1ea5y n\u00f3 \u201cc\u00f3 t\u1ed5 ch\u1ee9c\u201d h\u01a1n, m\u00e0 c\u00f2n ghi nh\u1edb v\u00e0 nh\u1eadn di\u1ec7n th\u01b0\u01a1ng hi\u1ec7u nhanh h\u01a1n trong nh\u1eefng l\u1ea7n g\u1eb7p sau.<\/p>\n

Kh\u1ea3o s\u00e1t v\u1ec1 th\u01b0\u01a1ng hi\u1ec7u c\u1ee7a Venngage t\u1eebng ghi nh\u1eadn, vi\u1ec7c duy tr\u00ec b\u1ed9 nh\u1eadn di\u1ec7n nh\u1ea5t qu\u00e1n c\u00f3 th\u1ec3 gi\u00fap t\u0103ng doanh thu trung b\u00ecnh kho\u1ea3ng 23%<\/strong>. V\u1edbi website marketing, c\u00e1ch l\u1eb7p l\u1ea1i \u0111\u01a1n gi\u1ea3n nh\u1ea5t l\u00e0 gi\u1eef c\u00f9ng m\u00e0u, h\u00ecnh d\u1ea1ng v\u00e0 v\u1ecb tr\u00ed cho n\u00fat CTA trong su\u1ed1t h\u00e0nh tr\u00ecnh kh\u00e1ch h\u00e0ng, t\u1eeb trang ch\u1ee7 \u0111\u1ebfn trang thanh to\u00e1n.<\/p>\n

11. Chi\u1ec1u s\u00e2u (Perspective)<\/h3>\n
\"Th\u00e0nh
B\u00f3ng \u0111\u1ed5 v\u00e0 \u0111\u1ed9 cao kh\u00e1c nhau gi\u00fap th\u1ebb giao di\u1ec7n t\u1ea1o c\u1ea3m gi\u00e1c n\u1ed5i l\u00ean kh\u1ecfi n\u1ec1n ph\u1eb3ng. Ngu\u1ed3n: Material Design<\/figcaption><\/figure>\n

M\u00e0n h\u00ecnh v\u1ec1 b\u1ea3n ch\u1ea5t l\u00e0 ph\u1eb3ng, nh\u01b0ng n\u00e3o b\u1ed9 con ng\u01b0\u1eddi v\u1ed1n quen v\u1edbi th\u1ebf gi\u1edbi ba chi\u1ec1u. V\u00ec v\u1eady, b\u00f3ng \u0111\u1ed5 v\u00e0 c\u00e1c l\u1edbp ch\u1ed3ng l\u00ean nhau c\u00f3 th\u1ec3 t\u1ea1o c\u1ea3m gi\u00e1c m\u1ed9t y\u1ebfu t\u1ed1 \u0111ang n\u1eb1m cao h\u01a1n ho\u1eb7c g\u1ea7n m\u1eaft h\u01a1n nh\u1eefng ph\u1ea7n c\u00f2n l\u1ea1i.<\/p>\n

M\u1ed9t v\u00ed d\u1ee5 \u0111i\u1ec3n h\u00ecnh l\u00e0 Material Design c\u1ee7a Google. M\u1ed7i y\u1ebfu t\u1ed1 tr\u00ean giao di\u1ec7n \u0111\u01b0\u1ee3c g\u00e1n \u201c\u0111\u1ed9 cao\u201d (elevation) kh\u00e1c nhau th\u00f4ng qua \u0111\u1ed9 \u0111\u1eadm nh\u1ea1t c\u1ee7a b\u00f3ng \u0111\u1ed5. Th\u1ebb (card) c\u00f3 b\u00f3ng nh\u1eb9 tr\u00f4ng nh\u01b0 \u0111ang n\u1ed5i tr\u00ean n\u1ec1n, c\u00f2n h\u1ed9p tho\u1ea1i (modal) v\u1edbi b\u00f3ng \u0111\u1eadm h\u01a1n s\u1ebd t\u1ea1o c\u1ea3m gi\u00e1c bao tr\u00f9m l\u00ean giao di\u1ec7n ph\u00eda d\u01b0\u1edbi, b\u00e1o hi\u1ec7u \u0111\u00e2y l\u00e0 n\u1ed9i dung c\u1ea7n ch\u00fa \u00fd ngay.<\/p>\n

Tr\u00ean website marketing, chi\u1ec1u s\u00e2u th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u01a1n gi\u1ea3n h\u01a1n. B\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng b\u00f3ng nh\u1eb9 d\u01b0\u1edbi n\u00fat b\u1ea5m \u0111\u1ec3 g\u1ee3i \u00fd \u201cc\u00e1i n\u00e0y b\u1ea5m \u0111\u01b0\u1ee3c\u201d, ho\u1eb7c l\u1edbp ph\u1ee7 m\u1edd ph\u00eda sau popup \u0111\u1ec3 t\u00e1ch n\u1ed9i dung quan tr\u1ecdng kh\u1ecfi ph\u1ea7n c\u00f2n l\u1ea1i c\u1ee7a trang.<\/p>\n

12. Quy t\u1eafc m\u1ed9t ph\u1ea7n ba (Rule of Thirds)<\/h3>\n
\"Giao
B\u1ed1 c\u1ee5c hero v\u00e0 c\u00e1c kh\u1ed1i n\u1ed9i dung \u0111\u01b0\u1ee3c \u0111\u1eb7t theo c\u00e1c giao \u0111i\u1ec3m c\u1ee7a l\u01b0\u1edbi m\u1ed9t ph\u1ea7n ba \u0111\u1ec3 t\u1ea1o \u0111i\u1ec3m nh\u1ea5n th\u1ecb gi\u00e1c. Ngu\u1ed3n: LogRocket<\/figcaption><\/figure>\n

N\u0103m 1797, h\u1ecda s\u0129 ng\u01b0\u1eddi Anh John Thomas Smith l\u1ea7n \u0111\u1ea7u nh\u1eafc \u0111\u1ebfn \u201cquy t\u1eafc m\u1ed9t ph\u1ea7n ba\u201d khi b\u00e0n v\u1ec1 c\u00e1ch c\u00e2n b\u1eb1ng s\u00e1ng t\u1ed1i trong tranh. \u0110\u1ebfn gi\u1eefa th\u1ebf k\u1ef7 XIX, c\u00e1c h\u1ed9i nh\u00f3m nhi\u1ebfp \u1ea3nh d\u1ea7n \u0111\u01b0a nguy\u00ean t\u1eafc n\u00e0y v\u00e0o b\u1ed1 c\u1ee5c \u1ea3nh, v\u00e0 sau \u0111\u00f3 n\u00f3 tr\u1edf th\u00e0nh m\u1ed9t trong nh\u1eefng quy t\u1eafc ph\u1ed5 bi\u1ebfn c\u1ee7a nhi\u1ebfp \u1ea3nh, h\u1ed9i h\u1ecda l\u1eabn thi\u1ebft k\u1ebf.<\/p>\n

C\u00e1ch \u00e1p d\u1ee5ng: chia khung h\u00ecnh th\u00e0nh 9 ph\u1ea7n b\u1eb1ng nhau b\u1edfi hai \u0111\u01b0\u1eddng ngang v\u00e0 hai \u0111\u01b0\u1eddng d\u1ecdc c\u00e1ch \u0111\u1ec1u. Thay v\u00ec \u0111\u1eb7t ch\u1ee7 th\u1ec3 \u1edf ch\u00ednh gi\u1eefa, b\u1ea1n \u0111\u01b0a n\u00f3 v\u00e0o m\u1ed9t trong b\u1ed1n giao \u0111i\u1ec3m c\u1ee7a c\u00e1c \u0111\u01b0\u1eddng n\u00e0y.<\/p>\n

B\u1ed1 c\u1ee5c l\u1ec7ch t\u00e2m t\u1ea1o c\u1ea3m gi\u00e1c chuy\u1ec3n \u0111\u1ed9ng v\u00e0 gi\u1eef m\u1eaft nh\u00ecn l\u00e2u h\u01a1n so v\u1edbi vi\u1ec7c \u0111\u1eb7t m\u1ecdi th\u1ee9 ngay ch\u00ednh gi\u1eefa, v\u1ed1n d\u1ec5 mang l\u1ea1i c\u1ea3m gi\u00e1c t\u0129nh v\u00e0 \u0111\u01a1n \u0111i\u1ec7u. V\u1edbi \u1ea3nh hero tr\u00ean website, b\u1ea1n c\u00f3 th\u1ec3 d\u1ecbch g\u01b0\u01a1ng m\u1eb7t nh\u00e2n v\u1eadt ho\u1eb7c s\u1ea3n ph\u1ea9m v\u1ec1 m\u1ed9t giao \u0111i\u1ec3m, c\u00f2n ph\u1ea7n kh\u00f4ng gian b\u00ean c\u1ea1nh s\u1ebd l\u00e0 n\u01a1i \u0111\u1eb7t ti\u00eau \u0111\u1ec1 v\u00e0 n\u00fat CTA.<\/p>\n

B\u1eaft \u0111\u1ea7u \u00e1p d\u1ee5ng 12 nguy\u00ean t\u1eafc n\u00e0y th\u1ebf n\u00e0o?<\/h2>\n

\u0110\u1ecdc \u0111\u1ebfn \u0111\u00e2y, c\u00f3 th\u1ec3 b\u1ea1n th\u1ea5y h\u01a1i ng\u1ee3p v\u00ec ph\u1ea3i nh\u1edb 12 nguy\u00ean t\u1eafc c\u00f9ng l\u00fac. Tuy nhi\u00ean, kh\u00f4ng nh\u1ea5t thi\u1ebft ph\u1ea3i \u00e1p d\u1ee5ng ho\u00e0n h\u1ea3o t\u1ea5t c\u1ea3 ngay t\u1eeb b\u1ea3n nh\u00e1p \u0111\u1ea7u ti\u00ean.<\/p>\n

N\u1ebfu m\u1edbi b\u1eaft \u0111\u1ea7u, b\u1ea1n n\u00ean \u01b0u ti\u00ean b\u1ed1n y\u1ebfu t\u1ed1 n\u1ec1n t\u1ea3ng l\u00e0 c\u0103n ch\u1ec9nh, kho\u1ea3ng c\u00e1ch, t\u01b0\u01a1ng ph\u1ea3n m\u00e0u v\u00e0 th\u1ee9 b\u1eadc ch\u1eef<\/strong>. Ch\u00fang quy\u1ebft \u0111\u1ecbnh m\u1ed9t website c\u00f3 g\u1ecdn g\u00e0ng, d\u1ec5 \u0111\u1ecdc hay kh\u00f4ng, \u0111\u1ed3ng th\u1eddi c\u0169ng l\u00e0 nh\u1eefng ph\u1ea7n d\u1ec5 ch\u1ec9nh s\u1eeda nh\u1ea5t tr\u00ean c\u00e1c c\u00f4ng c\u1ee5 thi\u1ebft k\u1ebf k\u00e9o-th\u1ea3.<\/p>\n

\"Giao
L\u01b0\u1edbi c\u1ed9t, nh\u1ecbp kho\u1ea3ng c\u00e1ch v\u00e0 ki\u1ec3u ch\u1eef nh\u1ea5t qu\u00e1n l\u00e0 ba \u0111i\u1ec3m c\u00f3 th\u1ec3 ki\u1ec3m tra ngay tr\u00ean b\u1ea3n nh\u00e1p.<\/figcaption><\/figure>\n

Khi trang \u0111\u00e3 \u0111\u1ee7 r\u00f5 r\u00e0ng, c\u00e1c nguy\u00ean t\u1eafc nh\u01b0 s\u1ed1 l\u1ebb, \u0111\u01b0\u1eddng d\u1eabn th\u1ecb gi\u00e1c hay chi\u1ec1u s\u00e2u s\u1ebd gi\u00fap n\u00f3 t\u1eeb \u201c\u1ed5n\u201d tr\u1edf n\u00ean \u201ccu\u1ed1n h\u00fat\u201d h\u01a1n. B\u1ea1n c\u00f3 th\u1ec3 ki\u1ec3m tra t\u1eebng ph\u1ea7n tr\u00ean website c\u1ee7a m\u00ecnh, thay v\u00ec c\u1ed1 nh\u1ed3i c\u1ea3 12 nguy\u00ean t\u1eafc v\u00e0o c\u00f9ng m\u1ed9t l\u1ea7n.<\/p>\n

V\u1ec1 c\u01a1 b\u1ea3n, t\u1ea5t c\u1ea3 \u0111\u1ec1u ph\u1ee5c v\u1ee5 m\u1ed9t m\u1ee5c ti\u00eau: gi\u00fap ng\u01b0\u1eddi xem hi\u1ec3u website nhanh nh\u1ea5t c\u00f3 th\u1ec3, ngay trong nh\u1eefng mili gi\u00e2y \u0111\u1ea7u ti\u00ean h\u1ecd gh\u00e9 qua. B\u1edfi nh\u01b0 nghi\u00ean c\u1ee9u c\u1ee7a Lindgaard \u0111\u00e3 ch\u1ec9 ra, \u1ea5n t\u01b0\u1ee3ng \u0111\u00f3 g\u1ea7n nh\u01b0 kh\u00f4ng th\u1ec3 \u0111\u1ea3o ng\u01b0\u1ee3c v\u00e0 ch\u1ec9 \u0111\u01b0\u1ee3c t\u1ea1o ra m\u1ed9t l\u1ea7n.<\/p>\n","protected":false},"excerpt":{"rendered":"

Ch\u1ec9 m\u1ea5t 0.05 gi\u00e2y \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng quy\u1ebft \u0111\u1ecbnh r\u1eddi kh\u1ecfi website c\u1ee7a b\u1ea1n, d\u00f9 h\u1ecd c\u00f2n ch\u01b0a k\u1ecbp \u0111\u1ecdc m\u1ed9t d\u00f2ng ch\u1eef n\u00e0o. B\u1ea1n \u0111\u00e3 bao gi\u1edd m\u1edf m\u1ed9t website, nh\u00ecn l\u01b0\u1edbt qua r\u1ed3i mu\u1ed1n tho\u00e1t ra ngay d\u00f9 ch\u01b0a bi\u1ebft trang \u0111\u00f3 \u0111ang vi\u1ebft g\u00ec? C\u1ea3m gi\u00e1c n\u00e0y th\u1ef1c ra x\u1ea3y \u0111\u1ebfn nhanh […]<\/p>\n","protected":false},"author":1,"featured_media":4820,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,36],"tags":[49],"class_list":["post-4819","post","type-post","status-publish","format-standard","has-post-thumbnail","category-cro","category-tam-ly-hoc-chuyen-doi","tag-tam-ly-hoc-thi-giac"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/vbaseup.com\/kien-thuc\/wp-json\/wp\/v2\/posts\/4819","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vbaseup.com\/kien-thuc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vbaseup.com\/kien-thuc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vbaseup.com\/kien-thuc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vbaseup.com\/kien-thuc\/wp-json\/wp\/v2\/comments?post=4819"}],"version-history":[{"count":7,"href":"https:\/\/vbaseup.com\/kien-thuc\/wp-json\/wp\/v2\/posts\/4819\/revisions"}],"predecessor-version":[{"id":4846,"href":"https:\/\/vbaseup.com\/kien-thuc\/wp-json\/wp\/v2\/posts\/4819\/revisions\/4846"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vbaseup.com\/kien-thuc\/wp-json\/wp\/v2\/media\/4820"}],"wp:attachment":[{"href":"https:\/\/vbaseup.com\/kien-thuc\/wp-json\/wp\/v2\/media?parent=4819"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vbaseup.com\/kien-thuc\/wp-json\/wp\/v2\/categories?post=4819"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vbaseup.com\/kien-thuc\/wp-json\/wp\/v2\/tags?post=4819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}