{"id":663,"date":"2025-08-13T14:49:09","date_gmt":"2025-08-13T07:49:09","guid":{"rendered":"https:\/\/kienthucmo.com\/?p=663"},"modified":"2025-12-09T23:26:02","modified_gmt":"2025-12-09T16:26:02","slug":"ux-ui-la-gi-su-khac-biet-giua-thiet-ke-ux-va-ui","status":"publish","type":"post","link":"https:\/\/kienthucmo.com\/vi\/ux-ui-la-gi-su-khac-biet-giua-thiet-ke-ux-va-ui\/","title":{"rendered":"UX, UI l\u00e0 g\u00ec? S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa thi\u1ebft k\u1ebf UX v\u00e0 UI."},"content":{"rendered":"\n

Trong k\u1ef7 nguy\u00ean s\u1ed1, n\u01a1i m\u1ecdi \u1ee9ng d\u1ee5ng \u0111\u1ec1u h\u1ee9a h\u1eb9n \u201ctr\u1ea3i nghi\u1ec7m \u0111\u1ec9nh cao\u201d, vi\u1ec7c ph\u00e2n bi\u1ec7t UX<\/strong> v\u00e0 UI<\/strong> \u0111\u00f4i khi kh\u00f3 ch\u1eb3ng kh\u00e1c g\u00ec ch\u1ecdn \u0111\u00fang c\u1eeda ra \u1edf b\u00e3i gi\u1eef xe t\u1ea7ng h\u1ea7m. C\u1ea3 hai \u0111\u1ec1u l\u00e0 th\u00e0nh ph\u1ea7n quan tr\u1ecdng c\u1ee7a thi\u1ebft k\u1ebf s\u1ea3n ph\u1ea9m s\u1ed1, nh\u01b0ng m\u1ed7i \u201cnh\u00e2n v\u1eadt\u201d l\u1ea1i \u0111\u1ea3m nh\u1eadn m\u1ed9t vai tr\u00f2 r\u1ea5t ri\u00eang. N\u1ebfu UX<\/strong> l\u00e0 \u201cki\u1ebfn tr\u00fac s\u01b0\u201d \u00e2m th\u1ea7m v\u1ebd n\u00ean lu\u1ed3ng tr\u1ea3i nghi\u1ec7m m\u01b0\u1ee3t m\u00e0 cho ng\u01b0\u1eddi d\u00f9ng, th\u00ec UI<\/strong> l\u1ea1i l\u00e0 \u201cnh\u00e0 thi\u1ebft k\u1ebf th\u1eddi trang\u201d gi\u00fap s\u1ea3n ph\u1ea9m kho\u00e1c l\u00ean b\u1ed9 c\u00e1nh \u0111\u1eb9p m\u1eaft. M\u1ed9t c\u00e1i lo ph\u1ea7n d\u00f9ng th\u1ebf n\u00e0o cho s\u01b0\u1edbng, m\u1ed9t c\u00e1i lo ph\u1ea7n nh\u00ecn th\u1ebf n\u00e0o cho m\u00ea \u2014 v\u00e0 s\u1ef1 th\u1eadt, thi\u1ebfu m\u1ed9t trong hai th\u00ec s\u1ea3n ph\u1ea9m c\u1ee7a b\u1ea1n d\u1ec5 r\u01a1i v\u00e0o c\u1ea3nh\u2026 t\u1ed1t nh\u01b0ng ch\u1eb3ng ai d\u00f9ng, ho\u1eb7c d\u1ec5 d\u00f9ng nh\u01b0ng ch\u1eb3ng ai mu\u1ed1n ch\u1ea1m v\u00e0o.<\/p>\n\n\n\n

1. UX l\u00e0 g\u00ec? (User Experience \u2013 Tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng)<\/h2>\n\n\n
\n
\"UX<\/figure>\n<\/div>\n\n\n

1.1. \u0110\u1ecbnh ngh\u0129a<\/h3>\n\n\n\n

UX<\/strong> \u2013 hay User Experience<\/em> \u2013 l\u00e0 to\u00e0n b\u1ed9 tr\u1ea3i nghi\u1ec7m c\u1ee7a ng\u01b0\u1eddi d\u00f9ng khi h\u1ecd t\u01b0\u01a1ng t\u00e1c v\u1edbi s\u1ea3n ph\u1ea9m, t\u1eeb gi\u00e2y ph\u00fat \u0111\u1ea7u ti\u00ean cho \u0111\u1ebfn khi r\u1eddi \u0111i. N\u00f3 kh\u00f4ng ch\u1ec9 l\u00e0 vi\u1ec7c \u201cd\u00f9ng \u0111\u01b0\u1ee3c hay kh\u00f4ng\u201d m\u00e0 c\u00f2n l\u00e0 \u201cd\u00f9ng c\u00f3 th\u00edch kh\u00f4ng\u201d.
M\u1ee5c ti\u00eau c\u1ee7a UX l\u00e0 t\u1ea1o ra m\u1ed9t h\u00e0nh tr\u00ecnh s\u1eed d\u1ee5ng m\u01b0\u1ee3t m\u00e0, d\u1ec5 hi\u1ec3u v\u00e0 \u0111\u00e1p \u1ee9ng \u0111\u00fang nhu c\u1ea7u, khi\u1ebfn ng\u01b0\u1eddi d\u00f9ng c\u1ea3m th\u1ea5y: \u201cWow, my <\/em>destiny…:))”<\/p>\n\n\n\n

1.2. Vai tr\u00f2<\/h3>\n\n\n\n
    \n
  • T\u0103ng t\u00ednh d\u1ec5 s\u1eed d\u1ee5ng<\/strong>: UX \u0111\u1ea3m b\u1ea3o m\u1ecdi th\u1ee9 \u0111\u01b0\u1ee3c s\u1eafp x\u1ebfp h\u1ee3p l\u00fd \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng kh\u00f4ng c\u1ea7n\u2026m\u00e0y m\u00f2 trong \u0111\u1ed1ng h\u1ed7n \u0111\u1ed9n<\/li>\n\n\n\n
  • Gi\u1ea3i quy\u1ebft v\u1ea5n \u0111\u1ec1 th\u1ef1c t\u1ebf<\/strong>: N\u1ebfu s\u1ea3n ph\u1ea9m kh\u00f4ng gi\u00fap ng\u01b0\u1eddi d\u00f9ng \u0111\u1ea1t m\u1ee5c ti\u00eau nhanh ch\u00f3ng, UX s\u1ebd t\u00ecm c\u00e1ch c\u1ea3i thi\u1ec7n.<\/li>\n\n\n\n
  • T\u00e1c \u0111\u1ed9ng \u0111\u1ebfn c\u1ea3m x\u00fac v\u00e0 s\u1ef1 trung th\u00e0nh<\/strong>: UX t\u1ed1t khi\u1ebfn kh\u00e1ch h\u00e0ng mu\u1ed1n quay l\u1ea1i, c\u00f2n UX t\u1ec7 th\u00ec\u2026 h\u1ecd s\u1ebd ch\u1ea1y m\u1ea5t d\u00e9p.<\/li>\n<\/ul>\n\n\n\n

    1.3. C\u00e1c y\u1ebfu t\u1ed1 ch\u00ednh c\u1ee7a UX<\/h3>\n\n\n\n
      \n
    • Nghi\u00ean c\u1ee9u ng\u01b0\u1eddi d\u00f9ng (User Research)<\/strong>: T\u00ecm hi\u1ec3u nhu c\u1ea7u, h\u00e0nh vi, v\u00e0 \u201cn\u1ed7i \u0111au\u201d c\u1ee7a ng\u01b0\u1eddi d\u00f9ng.<\/li>\n\n\n\n
    • Ki\u1ebfn tr\u00fac th\u00f4ng tin (Information Architecture)<\/strong>: S\u1eafp x\u1ebfp th\u00f4ng tin khoa h\u1ecdc \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng kh\u00f4ng b\u1ecb \u201cl\u1ea1c\u201d gi\u1eefa menu.<\/li>\n\n\n\n
    • D\u00f2ng t\u01b0\u01a1ng t\u00e1c (User Flow)<\/strong>: V\u1ea1ch ra c\u00e1c b\u01b0\u1edbc \u0111i h\u1ee3p l\u00fd \u0111\u1ec3 ho\u00e0n th\u00e0nh nhi\u1ec7m v\u1ee5.<\/li>\n\n\n\n
    • Nguy\u00ean m\u1eabu (Prototyping) v\u00e0 ki\u1ec3m th\u1eed (Usability Testing)<\/strong>: T\u1ea1o b\u1ea3n th\u1eed v\u00e0 \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng \u201ctest\u201d tr\u01b0\u1edbc khi tung ra ch\u00ednh th\u1ee9c.<\/li>\n<\/ul>\n\n\n\n

      1.4. Quy tr\u00ecnh thi\u1ebft k\u1ebf UX<\/h3>\n\n\n\n

      Quy tr\u00ecnh thi\u1ebft k\u1ebf UX th\u01b0\u1eddng di\u1ec5n ra theo c\u00e1c b\u01b0\u1edbc sau:<\/p>\n\n\n\n

        \n
      1. Hi\u1ec3u v\u1ea5n \u0111\u1ec1 & x\u00e1c \u0111\u1ecbnh m\u1ee5c ti\u00eau<\/strong>: L\u00e0m r\u00f5 y\u00eau c\u1ea7u kinh doanh v\u00e0 v\u1ea5n \u0111\u1ec1 c\u1ea7n gi\u1ea3i quy\u1ebft cho ng\u01b0\u1eddi d\u00f9ng.<\/li>\n\n\n\n
      2. Nghi\u00ean c\u1ee9u ng\u01b0\u1eddi d\u00f9ng<\/strong>: Thu th\u1eadp d\u1eef li\u1ec7u \u0111\u1ecbnh t\u00ednh v\u00e0 \u0111\u1ecbnh l\u01b0\u1ee3ng qua ph\u1ecfng v\u1ea5n, kh\u1ea3o s\u00e1t, ph\u00e2n t\u00edch h\u00e0nh vi.<\/li>\n\n\n\n
      3. Ph\u00e2n t\u00edch & x\u00e2y d\u1ef1ng chi\u1ebfn l\u01b0\u1ee3c<\/strong>: T\u1ea1o persona, journey map, v\u00e0 x\u00e1c \u0111\u1ecbnh t\u00ednh n\u0103ng c\u1ed1t l\u00f5i.<\/li>\n\n\n\n
      4. Thi\u1ebft k\u1ebf khung & lu\u1ed3ng tr\u1ea3i nghi\u1ec7m<\/strong>: L\u1eadp IA, user flow, wireframe \u0111\u1ec3 \u0111\u1ecbnh h\u00ecnh c\u1ea5u tr\u00fac s\u1ea3n ph\u1ea9m.<\/li>\n\n\n\n
      5. T\u1ea1o nguy\u00ean m\u1eabu (Prototype)<\/strong>: M\u00f4 ph\u1ecfng s\u1ea3n ph\u1ea9m \u0111\u1ec3 ki\u1ec3m tra \u00fd t\u01b0\u1edfng tr\u01b0\u1edbc khi ph\u00e1t tri\u1ec3n.<\/li>\n\n\n\n
      6. Ki\u1ec3m th\u1eed & c\u1ea3i thi\u1ec7n (Usability Testing)<\/strong>: \u0110\u01b0a prototype cho ng\u01b0\u1eddi d\u00f9ng tr\u1ea3i nghi\u1ec7m, ghi nh\u1eadn ph\u1ea3n h\u1ed3i v\u00e0 t\u1ed1i \u01b0u.<\/li>\n\n\n\n
      7. B\u00e0n giao cho UI & Development<\/strong>: Chuy\u1ec3n to\u00e0n b\u1ed9 t\u00e0i li\u1ec7u, wireframe, prototype v\u00e0 guideline \u0111\u1ec3 tri\u1ec3n khai.<\/li>\n<\/ol>\n\n\n\n

        \ud83d\udca1 \u0110i\u1ec3m quan tr\u1ecdng<\/strong><\/em>: UX Design kh\u00f4ng ph\u1ea3i l\u00e0 quy tr\u00ecnh m\u1ed9t chi\u1ec1u; th\u01b0\u1eddng s\u1ebd l\u1eb7p l\u1ea1i (iteration) li\u00ean t\u1ee5c \u0111\u1ec3 s\u1ea3n ph\u1ea9m ng\u00e0y c\u00e0ng t\u1ed1i \u01b0u.<\/p>\n\n\n\n

        2. UI l\u00e0 g\u00ec? (User Interface \u2013 Giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng)<\/h2>\n\n\n\n
        \"<\/figure>\n\n\n\n

        2.1. \u0110\u1ecbnh ngh\u0129a<\/h3>\n\n\n\n

        UI<\/strong> \u2013 hay User Interface<\/em> \u2013 l\u00e0 ph\u1ea7n m\u00e0 ng\u01b0\u1eddi d\u00f9ng th\u1ef1c s\u1ef1 nh\u00ecn th\u1ea5y v\u00e0 t\u01b0\u01a1ng t\u00e1c tr\u1ef1c ti\u1ebfp<\/em> tr\u00ean m\u00e0n h\u00ecnh. N\u00f3i c\u00e1ch kh\u00e1c, UI ch\u00ednh l\u00e0 \u201cb\u1ed9 c\u00e1nh\u201d m\u00e0 s\u1ea3n ph\u1ea9m kho\u00e1c l\u00ean khi g\u1eb7p ng\u01b0\u1eddi d\u00f9ng.
        M\u1ee5c ti\u00eau c\u1ee7a UI l\u00e0 t\u1ea1o ra giao di\u1ec7n \u0111\u1eb9p m\u1eaft, r\u00f5 r\u00e0ng v\u00e0 d\u1ec5 thao t\u00e1c<\/strong>, \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng v\u1eeba nh\u00ecn \u0111\u00e3 mu\u1ed1n \u201ct\u00f4i ch\u1ecdn b\u1ea1n…!!\u201d.<\/p>\n\n\n\n

        2.2. Vai tr\u00f2<\/h3>\n\n\n\n
          \n
        • C\u1ea7u n\u1ed1i gi\u1eefa con ng\u01b0\u1eddi v\u00e0 c\u00f4ng ngh\u1ec7<\/strong>: N\u1ebfu UX l\u00e0 b\u1ea3n thi\u1ebft k\u1ebf ng\u00f4i nh\u00e0, th\u00ec UI ch\u00ednh l\u00e0 c\u1eeda ra v\u00e0o, m\u00e0u s\u01a1n, v\u00e0 c\u00e1ch b\u1ea1n b\u00e0y tr\u00ed n\u1ed9i th\u1ea5t.<\/li>\n\n\n\n
        • Th\u1ec3 hi\u1ec7n th\u01b0\u01a1ng hi\u1ec7u & th\u1ea9m m\u1ef9<\/strong>: M\u00e0u s\u1eafc, font ch\u1eef, h\u00ecnh \u1ea3nh\u2026 gi\u00fap s\u1ea3n ph\u1ea9m c\u00f3 c\u00e1 t\u00ednh ri\u00eang v\u00e0 t\u1ea1o d\u1ea5u \u1ea5n trong t\u00e2m tr\u00ed ng\u01b0\u1eddi d\u00f9ng.<\/li>\n<\/ul>\n\n\n\n

          2.3. C\u00e1c y\u1ebfu t\u1ed1 ch\u00ednh c\u1ee7a UI<\/h3>\n\n\n\n
            \n
          • M\u00e0u s\u1eafc<\/strong>: T\u1ea1o c\u1ea3m x\u00fac, nh\u1eadn di\u1ec7n th\u01b0\u01a1ng hi\u1ec7u, v\u00e0 \u0111\u00f4i khi\u2026 k\u00edch th\u00edch h\u00e0nh vi (v\u00ed d\u1ee5: m\u00e0u \u0111\u1ecf cho c\u1ea3m gi\u00e1c kh\u1ea9n tr\u01b0\u01a1ng).<\/li>\n\n\n\n
          • Ki\u1ec3u ch\u1eef (Typography)<\/strong>: Ch\u1ecdn font ch\u1eef ph\u00f9 h\u1ee3p \u0111\u1ec3 th\u00f4ng tin d\u1ec5 \u0111\u1ecdc v\u00e0 mang \u0111\u00fang \u201ckh\u00ed ch\u1ea5t\u201d s\u1ea3n ph\u1ea9m.<\/li>\n\n\n\n
          • B\u1ed1 c\u1ee5c (Layout)<\/strong>: S\u1eafp x\u1ebfp th\u00e0nh ph\u1ea7n h\u1ee3p l\u00fd \u0111\u1ec3 m\u1eaft ng\u01b0\u1eddi d\u00f9ng di chuy\u1ec3n t\u1ef1 nhi\u00ean, kh\u00f4ng ph\u1ea3i \u201csoi k\u00ednh l\u00fap\u201d m\u1edbi t\u00ecm th\u1ea5y n\u00fat.<\/li>\n\n\n\n
          • Icon, n\u00fat b\u1ea5m, h\u00ecnh \u1ea3nh<\/strong>: Gi\u00fap giao di\u1ec7n tr\u1edf n\u00ean tr\u1ef1c quan, khi\u1ebfn ng\u01b0\u1eddi d\u00f9ng hi\u1ec3u ngay ch\u1ee9c n\u0103ng m\u00e0 kh\u00f4ng c\u1ea7n\u2026 \u0111\u1ecdc h\u01b0\u1edbng d\u1eabn.<\/li>\n\n\n\n
          • …<\/li>\n<\/ul>\n\n\n\n

            2.4. Quy tr\u00ecnh thi\u1ebft k\u1ebf UI<\/h3>\n\n\n\n
              \n
            1. Nh\u1eadn th\u00f4ng tin t\u1eeb UX<\/strong>: Ti\u1ebfp nh\u1eadn wireframe, prototype, user flow v\u00e0 guideline t\u1eeb \u0111\u1ed9i UX.<\/li>\n\n\n\n
            2. Nghi\u00ean c\u1ee9u th\u01b0\u01a1ng hi\u1ec7u & phong c\u00e1ch<\/strong>: X\u00e1c \u0111\u1ecbnh m\u00e0u s\u1eafc, font ch\u1eef, tone & mood, v\u00e0 y\u1ebfu t\u1ed1 nh\u1eadn di\u1ec7n th\u01b0\u01a1ng hi\u1ec7u.<\/li>\n\n\n\n
            3. Thi\u1ebft k\u1ebf Style Guide \/ Design System<\/strong>: T\u1ea1o b\u1ed9 quy chu\u1ea9n g\u1ed3m m\u00e0u, typography, icon, button, spacing, grid \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o t\u00ednh nh\u1ea5t qu\u00e1n.<\/li>\n\n\n\n
            4. Thi\u1ebft k\u1ebf giao di\u1ec7n t\u0129nh (Static UI)<\/strong>: V\u1ebd c\u00e1c m\u00e0n h\u00ecnh theo wireframe, \u0111\u1ea3m b\u1ea3o b\u1ed1 c\u1ee5c tr\u1ef1c quan, th\u1ea9m m\u1ef9 v\u00e0 d\u1ec5 thao t\u00e1c.<\/li>\n\n\n\n
            5. Thi\u1ebft k\u1ebf giao di\u1ec7n t\u01b0\u01a1ng t\u00e1c (Interactive UI<\/strong>): Th\u00eam hi\u1ec7u \u1ee9ng hover, transition, animation\u2026 \u0111\u1ec3 t\u0103ng t\u00ednh sinh \u0111\u1ed9ng v\u00e0 h\u01b0\u1edbng d\u1eabn ng\u01b0\u1eddi d\u00f9ng.<\/li>\n\n\n\n
            6. Nguy\u00ean m\u1eabu UI (High-Fidelity Prototype)<\/strong>: T\u1ea1o prototype \u0111\u1ed9 chi ti\u1ebft cao, m\u00f4 ph\u1ecfng gi\u1ed1ng s\u1ea3n ph\u1ea9m th\u1eadt.<\/li>\n\n\n\n
            7. Ki\u1ec3m th\u1eed giao di\u1ec7n (UI Testing)<\/strong>: Ki\u1ec3m tra s\u1ef1 r\u00f5 r\u00e0ng c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng, k\u00edch th\u01b0\u1edbc ch\u1eef, \u0111\u1ed9 t\u01b0\u01a1ng ph\u1ea3n m\u00e0u v\u00e0 kh\u1ea3 n\u0103ng thao t\u00e1c tr\u00ean nhi\u1ec1u thi\u1ebft b\u1ecb.<\/li>\n\n\n\n
            8. B\u00e0n giao cho Developer<\/strong>: S\u1eed d\u1ee5ng c\u00f4ng c\u1ee5 nh\u01b0 Figma, Zeplin, ho\u1eb7c Adobe XD \u0111\u1ec3 b\u00e0n giao file thi\u1ebft k\u1ebf k\u00e8m th\u00f4ng s\u1ed1 k\u1ef9 thu\u1eadt (specs).<\/li>\n<\/ol>\n\n\n\n

              \ud83d\udca1 \u0110i\u1ec3m c\u1ea7n nh\u1edb<\/strong><\/em>: UI Design kh\u00f4ng ch\u1ec9 l\u00e0m \u0111\u1eb9p m\u00e0 c\u00f2n ph\u1ea3i \u0111\u1ea3m b\u1ea3o t\u00ednh kh\u1ea3 d\u1ee5ng (usability)<\/strong> v\u00e0 t\u00ednh nh\u1ea5t qu\u00e1n (consistency)<\/strong> tr\u00ean to\u00e0n b\u1ed9 s\u1ea3n ph\u1ea9m.<\/p>\n\n\n\n

              3. S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa UX v\u00e0 UI<\/h2>\n\n\n
              \n
              \"S\u1ef1<\/figure>\n<\/div>\n\n\n
              Ti\u00eau ch\u00ed<\/th>UX (User Experience \u2013 Tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng)<\/th>UI (User Interface \u2013 Giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng)<\/th><\/tr><\/thead>
              \u0110\u1ecbnh ngh\u0129a<\/strong><\/td>L\u00e0 qu\u00e1 tr\u00ecnh t\u1ed1i \u01b0u h\u00f3a to\u00e0n b\u1ed9 tr\u1ea3i nghi\u1ec7m<\/em> c\u1ee7a ng\u01b0\u1eddi d\u00f9ng khi t\u01b0\u01a1ng t\u00e1c v\u1edbi s\u1ea3n ph\u1ea9m ho\u1eb7c d\u1ecbch v\u1ee5.<\/td>L\u00e0 qu\u00e1 tr\u00ecnh thi\u1ebft k\u1ebf b\u1ec1 m\u1eb7t tr\u1ef1c quan<\/em> v\u00e0 c\u00e1ch ng\u01b0\u1eddi d\u00f9ng t\u01b0\u01a1ng t\u00e1c tr\u1ef1c ti\u1ebfp v\u1edbi s\u1ea3n ph\u1ea9m.<\/td><\/tr>
              M\u1ee5c ti\u00eau ch\u00ednh<\/strong><\/td>Gi\u00fap ng\u01b0\u1eddi d\u00f9ng ho\u00e0n th\u00e0nh t\u00e1c v\u1ee5 m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng, nhanh ch\u00f3ng, \u00edt b\u1ed1i r\u1ed1i v\u00e0 c\u1ea3m th\u1ea5y h\u00e0i l\u00f2ng.<\/td>Khi\u1ebfn giao di\u1ec7n \u0111\u1eb9p m\u1eaft, h\u1ea5p d\u1eabn, nh\u1ea5t qu\u00e1n v\u00e0 d\u1ec5 nh\u1eadn di\u1ec7n th\u01b0\u01a1ng hi\u1ec7u.<\/td><\/tr>
              Ph\u1ea1m vi \u1ea3nh h\u01b0\u1edfng<\/strong><\/td>Bao qu\u00e1t c\u1ea3 tr\u01b0\u1edbc, trong v\u00e0 sau khi ng\u01b0\u1eddi d\u00f9ng t\u01b0\u01a1ng t\u00e1c v\u1edbi s\u1ea3n ph\u1ea9m.<\/td>T\u1eadp trung v\u00e0o ph\u1ea7n hi\u1ec3n th\u1ecb v\u00e0 t\u01b0\u01a1ng t\u00e1c ngay tr\u00ean m\u00e0n h\u00ecnh ho\u1eb7c thi\u1ebft b\u1ecb.<\/td><\/tr>
              Tr\u00ecnh t\u1ef1 th\u1ef1c hi\u1ec7n<\/strong><\/td>Th\u01b0\u1eddng \u0111i tr\u01b0\u1edbc UI: nghi\u00ean c\u1ee9u \u2013 ph\u00e2n t\u00edch \u2013 l\u00ean \u00fd t\u01b0\u1edfng \u2013 ki\u1ec3m th\u1eed \u2013 t\u1ed1i \u01b0u.<\/td>Th\u1ef1c hi\u1ec7n sau UX: \u00e1p d\u1ee5ng thi\u1ebft k\u1ebf tr\u1ef1c quan d\u1ef1a tr\u00ean khung UX \u0111\u00e3 x\u00e2y d\u1ef1ng.<\/td><\/tr>
              N\u1ed9i dung c\u00f4ng vi\u1ec7c ch\u00ednh<\/strong><\/td>– Nghi\u00ean c\u1ee9u ng\u01b0\u1eddi d\u00f9ng (User Research) – Ph\u00e2n t\u00edch h\u00e0nh vi v\u00e0 nhu c\u1ea7u – X\u00e2y d\u1ef1ng User Persona & Customer Journey Map – T\u1ea1o lu\u1ed3ng ng\u01b0\u1eddi d\u00f9ng (User Flow) – Thi\u1ebft k\u1ebf khung x\u01b0\u01a1ng (Wireframe) – Ki\u1ec3m th\u1eed kh\u1ea3 n\u0103ng s\u1eed d\u1ee5ng (Usability Testing)<\/td>– Ch\u1ecdn m\u00e0u s\u1eafc v\u00e0 ph\u1ed1i m\u00e0u – L\u1ef1a ch\u1ecdn font ch\u1eef (Typography) – Thi\u1ebft k\u1ebf bi\u1ec3u t\u01b0\u1ee3ng, n\u00fat b\u1ea5m, h\u00ecnh \u1ea3nh – X\u00e2y d\u1ef1ng layout tr\u1ef1c quan – Th\u00eam hi\u1ec7u \u1ee9ng v\u00e0 chuy\u1ec3n \u0111\u1ed9ng (Animations) – \u0110\u1ea3m b\u1ea3o t\u00ednh nh\u1ea5t qu\u00e1n h\u00ecnh \u1ea3nh<\/td><\/tr>
              K\u1ef9 n\u0103ng c\u1ea7n thi\u1ebft<\/strong><\/td>– T\u01b0 duy ph\u00e2n t\u00edch & gi\u1ea3i quy\u1ebft v\u1ea5n \u0111\u1ec1 – K\u1ef9 n\u0103ng nghi\u00ean c\u1ee9u v\u00e0 ph\u1ecfng v\u1ea5n ng\u01b0\u1eddi d\u00f9ng – Hi\u1ec3u bi\u1ebft v\u1ec1 t\u00e2m l\u00fd h\u1ecdc ng\u01b0\u1eddi d\u00f9ng – Ki\u1ebfn th\u1ee9c v\u1ec1 ki\u1ebfn tr\u00fac th\u00f4ng tin (Information Architecture) – Kh\u1ea3 n\u0103ng ki\u1ec3m th\u1eed v\u00e0 c\u1ea3i ti\u1ebfn li\u00ean t\u1ee5c<\/td>– Th\u1ea9m m\u1ef9 th\u1ecb gi\u00e1c t\u1ed1t – Ki\u1ebfn th\u1ee9c v\u1ec1 nguy\u00ean t\u1eafc thi\u1ebft k\u1ebf \u0111\u1ed3 h\u1ecda – S\u1eed d\u1ee5ng th\u00e0nh th\u1ea1o c\u00e1c c\u00f4ng c\u1ee5 thi\u1ebft k\u1ebf UI – Hi\u1ec3u bi\u1ebft v\u1ec1 nguy\u00ean t\u1eafc m\u00e0u s\u1eafc, b\u1ed1 c\u1ee5c – T\u01b0 duy tr\u1ef1c quan v\u00e0 s\u00e1ng t\u1ea1o<\/td><\/tr>
              C\u00f4ng c\u1ee5 ph\u1ed5 bi\u1ebfn<\/strong><\/td>– Figma (ph\u1ea7n wireframe) – Miro \/ Whimsical (mapping) – Google Analytics \/ Hotjar (nghi\u00ean c\u1ee9u h\u00e0nh vi) – Maze \/ Lookback (ki\u1ec3m th\u1eed)<\/td>– Figma, Adobe XD (thi\u1ebft k\u1ebf giao di\u1ec7n) – Photoshop, Illustrator (thi\u1ebft k\u1ebf \u0111\u1ed3 h\u1ecda) – After Effects \/ Lottie (hi\u1ec7u \u1ee9ng)<\/td><\/tr>
              S\u1ea3n ph\u1ea9m \u0111\u1ea7u ra<\/strong><\/td>– User persona – Customer journey map – User flow – Wireframe – B\u00e1o c\u00e1o ki\u1ec3m th\u1eed usability<\/td>– Giao di\u1ec7n ho\u00e0n ch\u1ec9nh (mockup, prototype) – B\u1ed9 style guide \/ design system – Icon set, h\u00ecnh \u1ea3nh, m\u00e0u s\u1eafc<\/td><\/tr>
              K\u1ebft qu\u1ea3 mong mu\u1ed1n<\/strong><\/td>Ng\u01b0\u1eddi d\u00f9ng d\u1ec5 d\u00e0ng \u0111\u1ea1t \u0111\u01b0\u1ee3c m\u1ee5c ti\u00eau, \u00edt g\u1eb7p tr\u1edf ng\u1ea1i, c\u00f3 tr\u1ea3i nghi\u1ec7m m\u01b0\u1ee3t m\u00e0.<\/td>Giao di\u1ec7n b\u1eaft m\u1eaft, thu h\u00fat, t\u1ea1o c\u1ea3m gi\u00e1c chuy\u00ean nghi\u1ec7p v\u00e0 th\u00e2n thi\u1ec7n.<\/td><\/tr>
              V\u00ed d\u1ee5 th\u1ef1c t\u1ebf<\/strong><\/td>\u1ee8ng d\u1ee5ng g\u1ecdi xe: UX \u0111\u1ea3m b\u1ea3o vi\u1ec7c \u0111\u1eb7t xe \u0111\u01a1n gi\u1ea3n, c\u00e1c b\u01b0\u1edbc r\u00f5 r\u00e0ng, th\u1eddi gian hi\u1ec3n th\u1ecb ch\u00ednh x\u00e1c.<\/td>UI quy\u1ebft \u0111\u1ecbnh m\u00e0u n\u00fat \u201c\u0110\u1eb7t xe\u201d n\u1ed5i b\u1eadt, b\u1ea3n \u0111\u1ed3 tr\u1ef1c quan, h\u00ecnh \u1ea3nh t\u00e0i x\u1ebf r\u00f5 r\u00e0ng.<\/td><\/tr>
              T\u1ea7m quan tr\u1ecdng<\/strong><\/td>Quy\u1ebft \u0111\u1ecbnh m\u1ee9c \u0111\u1ed9 h\u00e0i l\u00f2ng v\u00e0 kh\u1ea3 n\u0103ng quay l\u1ea1i c\u1ee7a ng\u01b0\u1eddi d\u00f9ng.<\/td>Quy\u1ebft \u0111\u1ecbnh \u1ea5n t\u01b0\u1ee3ng ban \u0111\u1ea7u v\u00e0 m\u1ee9c \u0111\u1ed9 thu h\u00fat ng\u01b0\u1eddi d\u00f9ng.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

              4. M\u1ed1i quan h\u1ec7 gi\u1eefa UX v\u00e0 UI<\/h2>\n\n\n
              \n
              \"M\u1ed1i<\/figure>\n<\/div>\n\n\n

              UX (User Experience \u2013 Tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng) v\u00e0 UI (User Interface \u2013 Giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng) l\u00e0 hai m\u1ea3nh gh\u00e9p kh\u00f4ng th\u1ec3 t\u00e1ch r\u1eddi trong thi\u1ebft k\u1ebf s\u1ea3n ph\u1ea9m s\u1ed1. Ch\u00fang kh\u00f4ng c\u1ea1nh tranh, m\u00e0 b\u1ed5 tr\u1ee3 v\u00e0 n\u00e2ng gi\u00e1 tr\u1ecb cho nhau<\/strong>:<\/p>\n\n\n\n