Touch target tối thiểu: chuẩn iOS 44pt, Android 48dp, WCAG 2.2 + Fitts law

Touch target là vùng pixel mà ngón tay user có thể tap để trigger action — không nhất thiết bằng kích thước icon hay nút visible. Bài này focus spec vùng chạm chuẩn iOS 44pt + Android 48dp + WCAG 2.2, Fitts law tính thời gian tap, thumb zone Steven Hoober, kỹ thuật mở rộng hit area và audit checklist 10 mục.

Ba chuẩn touch target — iOS, Android, WCAG so sánh

Ba chuẩn cứng cho mobile 2026 không mâu thuẫn nhưng đo bằng đơn vị khác nhau, dễ gây nhầm khi cross-platform. Hiểu chính xác đơn vị + giá trị giúp set Figma frame đúng và viết CSS không cần đo lại mỗi lần.

Bỏ qua chuẩn dẫn miss-tap rate 15-30% trên thiết bị thật.

Apple HIG — 44 × 44 pt

“Point” (pt) là đơn vị logical của Apple. 1pt = 1px trên non-retina @1x, = 2px trên @2x retina (iPhone 4-8), = 3px trên @3x super-retina (iPhone X trở đi).

Trên iPhone 15 Pro với retina @3x, 44pt = 132 physical pixel — vẫn render với CSS bằng 44px logical.

Apple chọn 44pt vì đo trung bình ngón cái người trưởng thành (1.5-2cm bề ngang) tap đủ chính xác ở size này. Quy định từ iOS 7 (2013) đến hiện tại không đổi.

Stable spec hiếm khi update — dấu hiệu chuẩn well-tested.

Material Design 3 — 48 × 48 dp

“dp” (density-independent pixel) là đơn vị Android. 1dp = 1px trên màn 160dpi (mdpi baseline), tự scale theo mật độ.

Trên xxxhdpi (Pixel 7 480dpi), 48dp = 144 physical pixel.

Material chọn 48dp lớn hơn 44pt iOS một chút vì Android có thiết bị đa dạng, đảm bảo target lớn enough cho cả phone budget có touchscreen kém. Material 3 (2023+) còn khuyên thêm tap area lớn hơn visual nếu icon nhỏ — dùng padding hoặc android:minWidth/minHeight để extend.

WCAG 2.5.5 AAA — 44 × 44 CSS pixel

Có từ WCAG 2.1 (2018), giữ trong 2.2. CSS pixel là đơn vị web universal, độc lập DPR (device pixel ratio).

44 × 44 CSS pixel render khoảng 7-8mm vật lý trên đa số phone — đủ cho ngón cái.

AAA là mức cao, không bắt buộc cho compliance pháp lý. Chỉ áp cho component user phải tap (link, button, form control), không áp cho text inline trong paragraph.

Bài này focus vùng chạm spec chuẩn — framework accessibility thiết kế web chung tham khảo bài khác.

WCAG 2.5.8 AA — 24 × 24 CSS pixel với spacing

Mới trong WCAG 2.2 release 10/2023. Mềm hơn 2.5.5 — cho phép target nhỏ 24px nếu có spacing >= 24px giữa target.

Vd 2 button 24×24 cách nhau 24px (tổng effective area 48px) thì pass.

Quy định phục vụ design dense (dashboard, calendar) mà vẫn đảm bảo accessibility cơ bản. Public sector EU bắt buộc compliance level AA — design dense cần chứng minh đạt 2.5.8.

Xem chi tiết tại WCAG 2.2 Target Size Minimum.

Baseline Web22 cho project VN

Dùng 44 × 44 CSS pixel làm baseline cho mọi vùng chạm. Spacing tối thiểu 8px giữa 2 target.

Đạt cả Apple HIG, gần Material (48 chỉ hơn 4px), pass WCAG 2.5.5 AAA.

Component dense (filter chip, calendar cell), fallback xuống 32 × 32 với spacing 16px — vẫn pass WCAG 2.5.8 AA nhờ spacing. Pattern này verified trên nhiều shop e-commerce VN — không bao giờ fail audit accessibility.

Fitts law — tính thời gian tap chính xác

Fitts law (Paul Fitts 1954) là model toán học predict thời gian dùng để nhắm và bấm target. Công thức: T = a + b · log₂(D / W + 1).

T là thời gian (ms), D là khoảng cách từ ngón tay current đến target (px), W là kích thước target (px), a và b là constant phụ thuộc thiết bị.

Càng lớn target W và càng gần ngón cái (D nhỏ) thì tap càng nhanh. Quy luật áp cho mọi pointing device — mouse desktop, ngón tay touchscreen, eye tracking VR.

Stable 70 năm, vẫn dùng được 2026.

Mức lý tưởng 44px

Tăng size target từ 24px lên 44px giảm tap time 25-40%. Từ 44px lên 88px giảm tiếp 15-20% nhưng tăng đến 200px chỉ giảm thêm 5-10%.

Đây là lý do 44px là mức lý tưởng — qua đó diminishing return.

Tương tự đặt button gần thumb zone (D nhỏ) lợi 30-50% tap time so đặt trên đỉnh màn (D lớn) cho cùng size. Kết hợp size 44+ và position thumb zone cho tap time tối ưu.

Áp Fitts law vào pattern UI

• Bottom tab bar nhanh hơn top nav 30-40%: gần ngón cái cầm phone (D nhỏ). Lý do bottom tab dominant 2026.
• FAB bottom-right nhanh hơn top-left 50-60%: cho user tay phải. Tay trái thì ngược lại nhưng chấp nhận trade-off cho 85-90% right-handed.
• Modal close X top-right far thumb: better đặt bottom-center hoặc swipe-down dismiss (gesture không cần tap chính xác).

Edge of screen có Fitts advantage infinity

Target ở mép màn hình (top, bottom, left, right edge) có effective W = infinity vì ngón tay không thể “trượt qua” mép. Đây là lý do menu bar Mac OS ở top edge dễ tap.

Trên mobile: bottom tab bar đặt ở bottom edge (không có gap dưới) tận dụng quy luật này — tap mép dưới phone luôn hit tab bar dù không nhắm chính xác. Pattern này UX engineer hay quên áp dụng.

Hệ quả thực tế cho CTA

Không bao giờ đặt CTA quan trọng ở giữa màn hình + size nhỏ. CTA chính nên ở thumb zone (1/3 dưới) + size >= 48px + spacing rõ với element xung quanh.

Nếu phải đặt CTA top (vd Save button trong app bar), tăng size lên 44+ và highlight visual đủ để compensate Fitts disadvantage. Background color contrast cao + icon clear giúp giảm tap time top button.

Thumb Zone — bản đồ vùng dễ với của ngón cái

Steven Hoober (sách “Designing Mobile Interfaces” 2011) chia màn phone làm 3 vùng theo độ dễ với của ngón cái khi cầm 1 tay. Bản đồ phụ thuộc cách cầm — 1 tay (49% global), 1 tay đỡ + 1 tay tap (36%), 2 tay (15%) theo Hoober 2013, vẫn relevant 2026 với điều chỉnh vì phone ngày càng to.

3 vùng Easy / OK / Hard

• Easy (xanh, 30% diện tích): bottom-right cong lên thumbprint area khi cầm tay phải (bán kính 3-4cm từ root ngón cái). Vùng dễ với nhất.
• OK (vàng, 30%): center và lower-left khi cầm tay phải. Với được nhưng phải nghiêng phone hoặc rút ngón cái.
• Hard (đỏ, 40%): top-left và top-right corner khi cầm tay phải. Phải đổi tay hoặc rút ngón tay khác.

Phone càng to vùng Hard càng rộng

iPhone 15 Pro Max 6.7″ và Galaxy S24 Ultra 6.8″ có vùng Hard rộng hơn iPhone 13 mini 5.4″ nhiều. Top corner gần như phải đổi tay hoặc cầm 2 tay.

Pattern thiết kế cho phone to: dồn CTA quan trọng xuống bottom 1/3, top reserve cho action ít dùng (close, settings). iOS có “Reachability” (double-tap home, content trượt xuống half screen) cho user khó với top — gesture này không phổ biến nhưng useful cho app phức tạp.

Hệ quả thiết kế

• CTA chính (Mua, Đặt hàng, Thêm vào giỏ): đặt vùng Easy — bottom-center hoặc bottom-right cho phone < 6.5″, bottom-center cho phone >= 6.5″.
• Action ít quan trọng (Settings, Filter, Sort): có thể vùng OK — center hoặc lower-left.
• Action ít dùng + cần precision (close X, edit): đặt vùng Hard chấp nhận được nhưng hit area phải lớn (52-60px) để compensate Fitts disadvantage.

Pattern dual-handed support

App cho cả tay phải/trái cần đối xứng hoặc cho phép setting flip layout. Apple không support flip native nhưng iOS có Reachability.

Material Design có guideline cho one-handed mode (compress UI vào lower half) trong Material 3 expressive theme.

Test với 5 user thực tế cách họ cầm phone trong 30 phút sẽ cho insight chính xác hơn lý thuyết. App game cầm landscape 2 tay có bản đồ thumb khác (2 thumb hai bên).

App đọc báo nhiều người cầm 1 tay nghiêng — top tap zone là “next page” hợp lý.

Kỹ thuật mở rộng hit area mà không thay đổi visual

Đôi khi designer muốn icon nhỏ (vd close X 16×16 cho aesthetics) nhưng vẫn cần touch target >= 44×44. Có 4 kỹ thuật phổ biến nhất 2026 để extend hit area mà không phá visual.

Kỹ thuật 1 — Padding wrapper

Wrap icon trong button có padding sao cho total size >= 44×44. Vd icon 16×16 → button padding 14px → total 44×44.

Visual icon vẫn 16×16 nhưng tap bất cứ đâu trong vùng padding cũng trigger.

Đây là cách đơn giản và recommended nhất. Browser handle tự nhiên, không cần JS, accessibility tốt vì button native.

<button class="icon-btn">
  <svg width="16" height="16">...</svg>
</button>
.icon-btn {
  padding: 14px;
  min-width: 44px;
  min-height: 44px;
}

Kỹ thuật 2 — Pseudo-element invisible overlay

Dùng ::before hoặc ::after tạo overlay invisible mở rộng tap area mà không change DOM/visual. Hữu ích khi không thể wrap (vd link inline trong text).

Anti-pattern nhẹ vì có thể overlap với element khác — cần test kỹ. Z-index conflict thường gặp.

.small-link { position: relative; }
.small-link::before {
  content: '';
  position: absolute;
  inset: -14px;
}

Kỹ thuật 3 — CSS pointer-events trick

Group nhiều element nhỏ vào 1 container có pointer-events: auto, mỗi sub-element pointer-events: none. Toàn container tap trigger 1 action.

Hữu ích khi visual có icon + label tách rời nhưng cần tap toàn block. Pattern phổ biến cho list item với icon + 2 dòng text.

Kỹ thuật 4 — JavaScript hit area expansion

React Native có prop hitSlop mở rộng tap area declarative. Trên web không có equivalent native, phải dùng padding/pseudo.

Library hammer.js bind tap event với area lớn hơn visual nhưng overhead không đáng cho most case.

Pattern web 2026 ưu tiên CSS giải pháp (padding hoặc pseudo) hơn JS — performance tốt hơn, không phụ thuộc bundle.

Anti-pattern cần tránh

Không dùng transform: scale() để extend hit area — scale làm visual to lên, không phải extend invisible. Cũng không dùng cursor: pointer trên area lớn không có CSS extend — cursor pointer chỉ là visual hint trên desktop, không thực sự tăng tap area mobile.

Spacing giữa target — bắt buộc cho dense layout

Target lớn chưa đủ — spacing giữa các target cũng quan trọng để tránh miss-tap (tap nhầm element gần đó). WCAG 2.5.8 AA yêu cầu spacing trong WCAG 2.2 — nếu target < 24×24 thì spacing tối thiểu 24px (mỗi phía 12px).

Material Design khuyên 8dp spacing tối thiểu giữa vùng chạm.

Pattern dense layout cần spacing

• List item settings: toggle, link inline. Target có thể 40-48px nhưng spacing >= 8dp giữa item.
• Filter chip shop page: 32×40 minimum với spacing 12-16px. Vd 5 chip cùng hàng 32×32 với spacing 16px → tổng 32×5 + 16×4 = 224px fit viewport 360px.
• Calendar cell: 32×32 minimum với spacing 4px (pass WCAG 2.5.8 nhờ spacing tổng 36 >= 24).
• Data table dense: action button 32×32 với spacing 8px. Cân nhắc overflow menu (3 dots) cho >= 4 action.

Spacing và Gestalt proximity

Spacing giúp visual hierarchy rõ. Group element liên quan ép sát (gap 4-8px), group khác nhau cách xa (gap 16-24px).

Pattern này dựa trên Gestalt proximity principle.

Spacing và touch target hợp tác tạo cả accessibility lẫn visual organization. Không phải 2 concept tách biệt — design system phải document spacing scale clear (4/8/12/16/24/32/48px).

Anti-pattern spacing

2 button cạnh nhau không spacing — vd “Cancel” và “Confirm” sát 0px gap. User tap nhầm Cancel khi muốn Confirm — cực kỳ tệ trong checkout flow (mất đơn).

Đúng cách: spacing 12-16px tối thiểu, hoặc tách Cancel ra góc khác xa Confirm. Pattern destructive action (Delete, Logout): luôn cần confirm dialog 2 tap, không phải 1 tap quick.

Touch target theo component cụ thể

Mỗi loại component UI có chuẩn touch target khác nhau dựa trên frequency use và risk miss-tap. Bảng dưới đây Web22 lock từ Material 3 + Apple HIG + audit thực tế trên nhiều shop e-commerce VN.

• Primary CTA button (Mua, Đặt hàng, Đăng nhập): chiều cao tối thiểu 48px, ideal 52-56px. Padding-x 24-32px.
• Full-width hoặc width >= 200px. Đặt thumb zone bottom 1/3.
• Secondary button (Cancel, Back, Cập nhật): 44×44 minimum, padding-x 16-20px. Spacing >= 12px với primary CTA bên cạnh.
• Icon button (Search, Close, More): 44×44 minimum (visual icon 20-24, padding wrapper). Spacing >= 8px với icon button khác.
• Tab bar item: chiều cao 56-64px bao gồm safe-area. Chiều rộng = viewport / số tab (thường 70-95px).
• Icon 24, label dưới.
• Form input: chiều cao 44-48px, padding 12-16px nội dung. Font >= 16px tránh iOS auto-zoom.
• Label 12-14px ngoài.
• Checkbox / Radio: visual 20-24px, hit area 44×44 qua wrap label. Toàn label cũng tap được, không chỉ box.
• Switch toggle: visual 32-40 wide × 20 tall, hit area 44×44. Drag gesture cũng support, không chỉ tap.
• Dropdown / Select: 44×48 chiều cao, dropdown item cũng 44+, tránh dày > 7 item visible (cần scroll).
• Filter chip: 32×40 minimum (32 chiều cao chấp nhận với spacing 16px), padding 12-16px. Group chips gap >= 12px.
• List item link (settings list): chiều cao 56dp tối thiểu (Material chuẩn). Layout 16dp – icon – 16dp – text – chevron – 16dp.
• Calendar cell: 40×40 ideal, 32×32 minimum với spacing 4px (pass WCAG 2.5.8 nhờ spacing).
• Slider thumb: 24×24 visual với hit area 44×44 (touch). Track height 4-6px, hit cũng trên track 44 chiều cao.

Audit checklist 10 mục cho touch target

Đo touch target trên design + production cần methodology rõ. Audit checklist Web22 dùng cho khách hàng — mỗi mục có pass/fail clear không subjective.

• 1. Inspect bounding box mọi tap element: mở DevTools → chọn element → đo width/height qua box model.
• Nếu < 44px → fix bằng padding hoặc min-width/min-height.
• 2. Đo spacing giữa target adjacent: dùng Figma/DevTools ruler.
• Pair button (Cancel/Confirm), filter chip, tab navigation — đo gap, >= 8-12px chấp nhận, >= 24px nếu target < 24.
• 3. Test thumb zone với chart visual: overlay thumb zone heatmap (Figma plugin Thumbzone) lên design mockup.
• CTA chính phải nằm vùng Easy.
• 4. Tap test trên 3 thiết bị thật: 1 phone nhỏ (iPhone SE 375px), 1 phone trung (iPhone 15 / Pixel 7), 1 phone to (iPhone 15 Pro Max).
• Tap mọi CTA chính 10 lần — đếm miss-tap rate, target <= 5%.
• 5. Check safe-area-inset: phone có notch/Dynamic Island/home bar: bottom CTA phải padding-bottom += env(safe-area-inset-bottom).
• Test focus input → keyboard hiện → CTA không bị che.
• 6. Audit hover-only elements: tooltip on hover, dropdown on hover — không hoạt động mobile.
• Replace bằng tap-trigger hoặc dedicated info button.
• 7. Test với non-dominant hand: tay non-dominant tap trong 5 phút — UX cho user motor impairment.
• Target >= 48px chịu được tap thiếu chính xác.
• 8. Validate WCAG 2.5.5 hoặc 2.5.8: tools WAVE, axe DevTools.
• Chạy auto check, fix mọi violation level AA. Level AAA optional.
• 9. Test với gloves / wet finger: tình huống thực tế (mua đồ ngoài trời mùa lạnh, tay ướt).
• Touch target lớn 48-56 dễ tap với gloves hơn 32-40.
• 10. Heatmap analytics production: sau go-live 2-4 tuần, dùng Hotjar hoặc Microsoft Clarity đo tap accuracy.
• Khu vực có cluster tap miss → target chưa đủ lớn hoặc spacing thiếu.

Câu chuyện khách fix touch target shop WooCommerce — số trước-sau

Câu chuyện khách generic cho 1 shop e-commerce VN dùng theme WooCommerce default. Trước audit: conversion mobile 1.8%, desktop 3.2% — gap 44%.

Hypothesis: mobile UX có vấn đề touch target.

Audit phát hiện 6 vấn đề chính

• Add to cart button 36×32 trong card sản phẩm category page: quá nhỏ, miss-tap thường xuyên.
• Filter chip “Kích cỡ” 28×28 không spacing: nằm sát nhau, tap nhầm chip khác.
• Quantity selector +/- button 24×24 sát nhau 0 gap: tap + thường lẫn -.
• Checkout “Thanh toán” button 40 chiều cao, không sticky bottom: phải scroll xuống tận cùng mới thấy.
• Coupon input có Apply button bên cạnh sát 0px: tap nhầm input vs Apply.
• Sticky header có hamburger/search/cart 24×24 sát nhau 4px gap: tap nhầm icon kề nhau.

Fix triển khai trong 1 tuần

• Add to cart button: mở rộng 44×44 với padding wrapper, icon vẫn 24.
• Filter chip: lên 36×40 với spacing 12px giữa chip.
• Quantity +/-: mở 44×44 visual + 56×56 hit area, gap 16px.
• Checkout button: sticky bottom với position: fixed, height 56px + safe-area-inset, full-width.
• Coupon input + Apply: gap 12px.
• Hamburger/search/cart: mỗi cái mở 44×44 với gap 12px.

Kết quả sau 4 tuần go-live

Conversion mobile lên 2.7% (cải thiện ~50% so 1.8%). Tap miss rate giảm từ 22% xuống 7% (đo qua Microsoft Clarity rage-tap detection).

Bounce rate trên category page giảm đáng kể. Average tap-to-purchase giảm từ 47s xuống 32s.

ROI fix touch target: 8 ngày work cost vài chục triệu, tăng revenue đáng kể/tháng — payback < 2 tuần. Pattern lặp ở nhiều khách — Web22 thấy ROI 5-10x cost cho audit + fix touch target trên mobile e-commerce.

Nếu shop có conversion mobile < tỷ lệ conversion desktop, touch target thường là nguyên nhân top 3.

Câu hỏi thường gặp

Tổng kết và bước tiếp theo

Touch target 44 × 44 CSS pixel là baseline 2026 cho mọi tap element. Kết hợp size + spacing 8-12px + thumb zone position cho UX mobile tốt nhất.

ROI audit + fix touch target cao 5-10x cost cho mobile e-commerce. Đầu tư đáng giá nhất trong UX mobile.

Bài liên quan trong cluster UI/UX mobile:

• Thiết kế mobile-first 2026 — cascade CSS + breakpoint — context mobile-first cho touch target spec.
• Navigation ứng dụng di động — 5 pattern và khi nào dùng — bottom tab + FAB cần touch target >= 44px.
• Bottom sheet mobile — 3 biến thể và snap point — pattern thay calendar inline cho mobile.
• Onboarding ứng dụng di động — 4 pattern và A/B test — touch target trong first-time UX.

Web22 audit + fix touch target cho mobile e-commerce, app SaaS và blog VN — kiểm tra 10 mục theo Apple HIG + Material 3 + WCAG 2.2, đo tap miss rate trước-sau qua heatmap, sản phẩm bàn giao spec Figma + code patch trong 1-2 tuần. Thiết kế design system cho thương hiệu với touch target chuẩn ngay từ wireframe — quy trình 4-8 tuần cho app mid-size 15-30 screen.