Có một câu hỏi mà ai cũng có thể cảm nhận được, nhưng thật không dễ trả lời, đó là "Điều gì khiến một sản phẩm tốt hơn một sản phẩm khác?". Ở đây ta chỉ nói về 1 lĩnh vực hẹp là các sản phẩm công nghệ như là một chiếc điện thoại, một website hay 1 ứng dụng chạy trên smartphone. Có thể có 1 trong những lý do sau được đưa ra: Đẹp hơn, thông minh hơn, hoặc dễ dùng hơn! Vì sao hiếm khi chúng ta thấy người dùng so sánh rằng một sản phẩm được lựa chọn đơn giản vì nó có những tính năng độc nhất vô vị. Dường như, sự độc nhất vô nhị về công nghệ đã không còn tồn tại ở thời đại ngày nay!

Nhưng thế nào là đẹp? Thế nào là thông minh? và thế nào là dễ dùng? Một số người cho rằng sản phẩm này đẹp, nhưng người khác thì lại không? Vậy sản phẩm đó có đẹp thật sự không hay là chỉ là một điều tương đối. Nhưng doanh thu thì không thể tương đối, sự rời bỏ của người dùng đối với 1 sản phẩm là không có gì phải bàn cãi. Người dùng than phiền về hết điểm nọ đến điểm kia của sản phẩm là hiện hữu trên tất cả các kênh. Oái oăm thay, họ không bảo với người làm sản phẩm, thực sự thì bạn nên làm điều để giữ chân họ lại và thời hạn là bao nhiêu. Tất cả những gì người dùng làm chỉ đơn giản là nhấn delete và sau đó nhấn OK để xác nhận!

Đó chính là những vấn đề mà thiết kế trải nghiệm người dùng cần phải giải quyết.. Và đó là nội dung của khoá học các bạn đang theo dõi đây! 

Nhưng liệu tôi có thể học được không?

Câu hỏi: Tôi là... à ừ, lập trình viên, chủ doanh nghiệp, quản trị dự án, một người sản xuất tôi thậm chí không biết gì về thiết kế. Liệu khoá học có lợi cho tôi không?

Trả lời: Tôi đã thường xuyên phải trả lời câu hỏi này cho nhiều người! Những người như bạn đều cho rằng đã là thiết kế, cái gì mà UI/UX thì tất lẽ dĩ ngẫu phải biết dùng Photoshop, hiểu về màu sắc và biết vẽ một cái gì đó chứ. Thực tế thì không hẳn.. Thiết kế trải nghiệm người dùng là một môn khoa học có thể học được. 

1. Nếu bạn bắt đầu xây dựng một sản phẩm mới, thậm chí bất cứ sản phẩm công nghệ hoặc tiêu dùng, thiết kế trải nghiệm người dùng cung cấp cho bạn cách tư duy khác đi để hướng toàn bộ hoạt động thiết kế - sản xuất vào tâm trí của người dùng. Không phải là suy đoán vô căn cứ, không phải là ý kiến cá nhân, tất cả đều xuất phát từ những yêu cầu của những khách hàng tiềm năng. 

2. Nếu bạn đang có 1 sản phẩm và bạn muốn nó tốt hơn, có thể là được người dùng tiếp cận nhiều hơn? hoặc gắn bó hơn? hoặc tỉ lệ chuyển đổi từ người xem hàng (visitor) sang khách hàng (customer) cao hơn. Từ đó tăng doanh thu cho doanh nghiệp. Thiết kế trải nghiệm người dùng sẽ đơn giản cung cấp cho bạn 2 thứ, một là làm thế nào để biết một sản phẩm có vấn đề ở đâu bằng các phương pháp đo lường có cơ sở khoa học, hai là giải pháp nào để giải quyết những vấn đề đó. 

Tôi xin được nhắc lại, tất cả những điều bạn được học trong khoá học này đều là những phương pháp khoa học có thể học được. Và một điểm nữa, thiết kế trải nghiệm người dùng có lợi không chỉ cho các sản phẩm công nghệ (mặc dầu khoá học này tôi chủ yếu nói đến các phần mềm như là website hay mobile app), nó hoàn toàn hữu ích cho bất cứ loại hình sản phẩm nào. 

Bạn sẽ được học gì?

Những khái niệm cơ bản về UX và thiết kế UX, lợi ích của thiết kế UX và khoá học này. Quy trình thiết kế UX bao gồm 7 bước: Plan, Discover, Explorer, Define, Design, Validate & Deliver

1. Lập plan - xác định mục tiêu, business needs & user needs
2. Discover - thực hiện research trên khách hàng bằng interview, observation, card sorting và survey
3. Explorer - vẽ wireframe trên giấy
4. Define - vẽ digital wireframe bằng phần mềm
5. Design - Thêm vào màu sắc, hình ảnh, typographic..
6. Test lại design trên người dùng
7. Chuyển giao thiết kế cho developer 

Mọi lời nói không bằng trải nghiệm thử, bạn hãy bớt chút thời gian để nghe những bài đầu tiên của khoá học, để có cảm nhận của riêng mình!

Steve Jobs từng nói "Chúng ta phải bắt đầu bởi trải nghiệm của người dùng, sau đó mới quan tâm tới công nghệ". Câu nói này của ông đặt vị trí của trải nghiệm người dùng, tức là UX lên trên mọi vấn đề công nghệ. Tại thời điểm ông nói câu này, công nghệ thông tin chưa thực sự phát triển như bây giờ và thế giới vẫn còn xoay sở quanh những sản phẩm đặt nặng yếu tố công nghệ. Và như chúng ta đã biết, bằng tầm nhìn của ông, Apple đã trở thành công ty công nghệ số 1 thế giới cho đến ngày nay.

Câu nói thứ 2 của Steve Jobs: Thiết kế không phải là những gì được trông thấy hoặc cảm nhận thấy. Nó hoạt động thế nào mới là quan trọng. Đây là một câu nói để phân biệt rõ ràng trong thiết kế một ấn phẩm tạp chí, thiết kế một pano aphic quảng cáo hay là thiết kế một tờ rơi.. so với việc thiết kế 1 sản phẩm, đặc biệt là 1 sản phẩm công nghệ. Ông chú trọng đến cách hoạt động nhiều hơn là một thiết kế đẹp đẽ nhưng tương tác thiếu hiệu quả với ngừời dùng.

Câu nói thứ 3: Đơn giản thì khó hơn phức tạp. Bạn phải làm việc chăm chỉ để khiến cho tư duy trở nên trong sáng và làm cho nó đơn giản. Một ví dụ tiêu biểu là iPhone là chiếc điện thoại đầu tiên chỉ có 1 nút bấm duy nhất, trong khi tất cả các điện thoại trên thị trường đang đua theo xu hướng bàn phím QWERTY có nhiều phím bấm. Và trải qua 10 năm thì đến thế hệ iphone X, chiếc điện thoại này đã ko còn 1 nút bấm nào cả. Đó là kế thừa tư tưởng thiết kế tối giản của Steve Jobs.

Các phần mềm hiện nay đang cạnh tranh với nhau bằng gì?

• Chức năng?
• Ngôn ngữ lập trình, công cụ lập trình?
• Nhân lực đông đảo, tài chính mạnh?
• Hạ tầng (infrastructure)?

Tất cả những yếu tốt trên đều không đúng, bản chất các phần mềm cạnh tranh bằng thiết kế trải nghiệm người dùng..

Con người chúng ta thường xuyên có các trải nghiệm với các đối tượng mà ta tiếp xúc mỗi ngày (Có thể là 1 sản phẩm, 1 dịch vụ hoặc 1 con người khác). Và ta thường xuyên tìm kiếm 1 trải nghiệm tốt và tránh xa các trải nghiệm xấu.

Trải nghiệm chính là 1 thứ thúc đẩy người dùng chi tiêu hoặc sử dụng 1 sản phẩm, dịch vụ nào đó. Đôi khi vì một trải nghiệm lạ mà người dùng sẽ làm 1 đều gì đó điên rồ. Tuy nhiên có những trải nghiệm thì người ta muốn trải nghiệm mãi, có những trải nghiệm vì hiếu kỳ thì chỉ 1 lần trong đời. Có những trải nghiệm họ sẽ ko bao giờ muốn trải nghiệm đó 1 lần nữa.

Helio - Một ví dụ về trải nghiệm xấu

Helio là 1 chuỗi cafe có tiềm lực có 4 quán cafe ở các vị trí đắc địa, trong hình là 1 quán tại phố Bà Triệu được deco khá đẹp. Giá 1 cốc cafe ở đây vào tầm 50 nghìn đồng, khá là cao so với mặt bằng. Vấn đề là Helio xây dựng 1 cái ứng dụng để người dùng có thể đặt đồ uống ngay trong app bằng cách là: nạp tiền trước, rồi chọn đặt hàng. Đây là 1 trải nghiệm mới lạ mà các quán cafe hiện nay chưa làm đc. Để khuyến khích khách hàng có trải nghiệm mới lạ này, Helio đã giảm giá trực tiếp trên hoá đơn được thanh toán từ ứng dụng.

Nhưng do thiếu đầu tư vào UX trên ứng dụng nên chúng ta có đc 1 app Helio như thế này.

• Màn hình đăng nhập/đăng ký: sử dụng màu sắc lung tung (vàng, đỏ, link Policy màu xanh tím, nút login with Facebook 1 màu riêng) và 1 cái background chụp vội và màu của cốc cafe bị xỉn lỗi.
• Màn hình menu đồ uống: tiếng Anh, tiếng Việt lẫn lộn, thông tin thì nghèo nàn (ví dụ 1 thông tin kiểu như: sô cô la: ngọt ngào và ấm áp) ko thể táp vào để xem detail.
• Màn hình thanh toán: ko đáng tin cậy, các logo dịch vụ bị cắt và sắp xếp lem nhem.. Bạn có muốn điền thông tin thẻ tín dụng vào 1 cái form như thế này không?

Lẽ dĩ nhiên Helio khó lòng có thể thành công với chiến lược mới này của mình vì sự vụng về trong việc thiết kế UX cho ứng dụng - một yếu tố quan trọng nhất cho sự thành công này.

Rõ ràng là UX không chỉ gói gọn trong câu chuyện thiết kế phần mềm, nó hiện diện xung quanh chúng ta - trong trường hợp này thì chúng ta là khách hàng hay còn là người tiêu dùng. Và đó là lý do tôi đã nói rằng, khoá học này sẽ giúp ích cho tất cả mọi người, những người xây dựng sản phẩm và dịch vụ. Bởi vì bạn có thể áp dụng những kiến thức học được trong khoá học này, cải tiến và tối ưu sản phẩm của mình với cùng 1 mục tiêu là đưa người dùng vào trung tâm.

Đối với thiết kế phần mềm, trước đây vài năm, chủ yếu được tạo ra dành cho đối tượng người dùng doanh nghiệp. Nền công nghiệp phần mềm tập trung vào việc quản lý thông tin cho 1 bài toán nghiệp vụ nào đó. Ví dụ: quản lý khách hàng, quản lý nhân sự, quản lý hoạt động sản xuất… Do đó, công việc xây dựng phần mềm của chúng ta sẽ thiết kế 1 database đúng đắn và tạo ra 1 giao diện người dùng bao gồm các form, các report.. để giao tiếp. Và đặc thù người dùng trực tiếp (end-user) trong các hệ thống đó là nhân viên văn phòng. Do đó nhu cầu về trải nghiệm người dùng là thấp bởi vì 1 thực tế là họ bắt buộc phải sử dụng phần mềm đó dù nó có thân thiện hay không.

Để đáp ứng điều đó, chúng ta có các tiêu chuẩn công nghiệp cho việc thiết kế giao diện. Và dĩ nhiên, gần như không có công việc của người thiết kế trải nghiệm người dùng.

Chúng ta gọi đây là Data-Centric Architecture (Tức là kiến trúc phần mềm hướng dữ liệu) vì cơ sở dữ liệu là quan trọng nhất của hệ thống này và nằm vào giữa của hoạt động design và phát triển phần mềm.

Thế giới ngày nay đã thay đổi

Với sự ra đời và bùng nổ của các thiết bị cá nhân như điện thoại, máy tính bảng.. các hạn chế về cách sử dụng:

• Chúng ta không có bàn phím, chuột mà chỉ tương tác bằng các ngón tay hoặc thậm chí 1 ngón cái. Sau đó là là giọng nói và còn gì nữa thì chưa biết..
• Điều kiện internet 3G/4G có thể có khắp mọi nơi, nhưng chậm hơn và.. khác với wifi ở văn phòng là không miễn phí.
• Hầu hết, điện thoại đóng vai trò như một phụ kiện thời trang thể hiện cá tính. Điện thoại đi vào cuộc sống để ăn rơ với bộ đồ mặc trên người, sơn móng tay và những chiếc đồng hồ 

Do đó mà phần mềm cũng trở nên đơn giản và tập trung vào phục vụ cá nhân hơn. Lúc này, trải nghiệm của người dùng mới trở nên quan trọng nhất. Và để làm điều đó chúng ta phải thay đổi cách nghĩ về phát triển sản phẩm, đó chính là đưa người dùng vào trung tâm của việc thiết kế và phát triển phần mềm.

Và đó là chính là thiết kế UX

Thiết kế UX bao gồm 1 quy trình đc tiêu chuẩn hoá cộng với nhiều các phương thức và công cụ tiếp cận khác nhau. Nhưng có thể hiểu về thiết kế UX là 1 cách nghĩ khác về việc phát triển sản phẩm, trong đó người dùng là trung tâm của việc thiết kế và xây dựng sản phẩm. Điều quan trọng trong việc thiết kế UX là quyết định dựa trên những gì người dùng muốn, mà sẽ lắng nghe nhu cầu của họ để tìm ra 1 giải pháp đáp ứng. Cái đó gọi là user needs - người dùng cần. Ngoài việc tập trung vào người dùng cần thì thiết kế UX không thể tách rời một mục tiêu đó chính là: đáp ứng các yêu cầu kinh doanh. Một sản phẩm hoặc thậm chí 1 chức năng trong 1 sản phẩm luôn được tạo ra vì một yêu cầu nào đó.

Khi chúng ta cân bằng được yêu cầu kinh doanh với yêu cầu của người dùng, chúng ta sẽ có UX.

Một trong những định nghĩa đơn giản nhất là như thế này: UX tốt là 1 UX làm người dùng hài lòng. Nhưng mà nó đơn giản quá, vì đơn giản nên khó quá. Câu hỏi đặt ra là làm thế nào mới làm người dùng hài lòng? Hài lòng là gì?

Quan điểm của Don Norman

Don Norman là người đầu tiền viết trên name card của mình chức danh UX Designer, trước đó thì khái niệm này không tồn tại. Một số bạn thích gọi ông là ông tổ của thiết kế UX hiện đại.

Trong 1 buổi nói truyện trên TED năm 2003, ông Don Norman đã nói về 3 thứ tạo ra 1 UX tốt:

• Người dùng có thể điều khiển, nắm bắt (control)… được sản phẩm của bạn. (Ví dụ: iPhone là một sản phẩm mà ai cũng có thể dùng được, từ người già đến trẻ con, đàn ông đến phụ nữ. Không mất quá nhiều công để làm quen và thuần phục nó)
• Cảm giác về sự an toàn. Nó an toàn, nó không nguy hiểm và không có ai bị thương.
• Cảm giác về sự “tự ngã” hay còn gọi là tính cá nhân của sản phẩm. Ok, tôi dùng nó vì ko ai có một thứ như vậy cả, tôi dùng nó vì tôi cảm thấy tôi mạnh mẽ hơn, sành điệu hơn.

Tuy nhiên nó vẫn quá phức tạp, với các yêu cầu về việc “tạo được cảm giác” là ko rõ ràng và chúng ta rất khó để định hướng thiết kế UX.

Quan điểm cầu thang 6 bậc để tạo ra một UX tốt

Đây là hình ảnh 6 yếu tố tạo ra một UX tốt. Nếu coi thiết kế UX như một kỹ thuật để dụ dỗ người dùng đến với mục tiêu của ta - hay còn gọi là User Goals. (mục tiêu ví dụ như: hoàn tất việc đăng ký thành viên, mua 1 mặt hàng online hoặc quay lại 1 website nào đó). Thì người dùng sẽ bị mời gọi từng bước từng bước trèo lên chiếc cầu thang này mà không được cảm thấy khó khăn gì. Và nếu khó khăn ở 1 cầu thang nào đó, họ sẽ bỏ buộc và chúng ta thất bại!

Để vượt qua 6 bậc thang này thì điều quan trọng là 2 thứ: một là chúng ta phải đi lần lượt từng bước, từ thấp lên cao. Khách hàng sẽ không nhảy 1 phát lên bậc thang useful được. Hai là mỗi bậc thang phải cao vừa phải, không cao đến mức người dùng bỏ cuộc, nếu không toàn bộ nỗ lực của chúng ta ở các bậc trên đều vô nghĩa.

Một sai lầm dễ thấy ở các đơn vị làm phần mềm tập trung vào thiết kế giao diện người dùng ngay từ đầu, tức là nhảy thẳng đến bậc thang desirable mà bỏ qua các yếu tố về findable, accessible và usable. Nếu 1 website được thiết kế rất đẹp nhưng quá nặng nề, đến nỗi người dùng mất nhiều thời gian để load được 1 trang thì họ sẽ bỏ cuộc ngay từ bậc accessible. Khi đó nỗ lực thiết kế ở bậc desirable đã trở nên vô nghĩa.

Rõ ràng là mục tiêu của những người làm UX chúng ta là khiến cho chiếc cầu thang này càng dễ đi càng tốt, thậm chí là đạt đến mức như 1 thảm cỏ xanh mướt. Khi đó người dùng sẽ thảnh thơi bước tới mục tiêu mà chúng ta đề ra.

Khi đối diện với mỗi công việc chúng ta cần xác định một cách rõ ràng, đâu là input, đâu là output (tức là đầu vào, đầu ra là gì). Và để đi từ input đến output thì chúng ta sẽ cần một phương thức đúng đắn, các công cụ phù hợp. Và đó chính là cách để giải quyết mọi vấn đề một cách logic và khoa học. 

Input là gì?

Ở đây chúng ta sẽ phải xác định được đầu vào bao gồm 2 yếu tố: thứ nhất là người dùng cần gì (user needs)? thứ 2 là mục tiêu kinh doanh (business needs). Nói về input có vẻ đơn giản như vậy, nhưng theo kinh nghiệm thực tế của tôi, thông thường thì một dự án thiết kế UX, khả năng sai từ việc tìm ra input là thường xuyên xảy ra.

User needs

Henry Ford là chủ người sáng lập ra Ford Motor - người đầu tiên mang ô tô đến với thế giới hiện đại. Ông ấy có 1 câu hỏi nổi tiếng về user need mà vẫn còn nguyên giá trị tới tận ngày nay. “Nếu tôi hỏi mọi người rằng họ muốn gì? họ sẽ nói muốn những con ngựa chạy nhanh hơn” - và thay vì tạo ra 1 nước Mỹ ngập tràn những con ngựa, chuồng cỏ và bãi phân ngựa khổng lồ, ông đã tạo ra những chiếc ô tô chạy bằng hơi nước. Vì ông hiểu “điều thực sự người dùng cần là di chuyển từ một điểm A đến điểm B nhanh hơn”.

Có điều phức tạp là người dùng chỉ hay nói về những điều họ muốn chứ không nói ra những điều họ cần. Nếu bạn không có 1 kỹ thuật khoa học để hiểu được những gì họ cần (tức là user needs) bạn sẽ rất dễ bị đánh lừa bởi những gì họ nói. Và sai lầm ở thời điểm này thông thường bạn sẽ phải trả 1 cái giá rất đắt đối với sản phẩm của mình.

Còn business needs thì sao? 

Thường thì không quá khó để xác định được mục tiêu kinh doanh là gì trong 1 dự án thiết kế UX. Thông thường nó sẽ xoay quanh những mục tiêu cụ thể như là: tăng doanh thu, tăng lượng khách hàng mới hay là giảm tỉ lệ rời bỏ sản phẩm.

Một vấn đề là user needs và business needs thường khó đi song song với nhau. Trong 1 số trường hợp để tập trung cho mục tiêu kinh doanh sẽ khiến giảm trải nghiệm tốt từ khách hàng. Và nhiệm vụ của việc thiết kế UX là cân đối giữa 2 yếu tốt này. Việc tìm ra user needs và business needs sẽ được đề cập trong bước đầu tiên của khoá học này.

Output là gì?

Đối với công việc làm UX cũng vậy, trong ngữ cảnh này thì output là gì chúng ta đã đề cập trong bài trước đó (về cái cầu thang 6 bậc).

Quy trình đi từ Input đến Output

Ohh.. Chúng ta đã có Input và Output, rõ ràng như ban ngày. Giờ là lúc nói đến con đường để từ Input ra Output. Phần này thì khó hơn, nó chiếm 80% thời lượng của khóa học này, bạn sẽ được học ở các chương tiếp theo. 

Chúng ta có thể so sánh việc thiết kế một ứng dụng với thiết kế một ngôi nhà. Trong đó thì:

• UX Designer sẽ là kiến trúc sư, lo thiết kế ra cái nhà.
• UX Researcher sẽ là người giám sát công trình.
• Visual Designer sẽ là người thiết kế nội / ngoại thất, lo cho ngôi nhà đó đẹp và tiện nghi, phù hợp với gia chủ.
• Front-end Developer sẽ là thợ xây, lo phần gạch và trát tường.
• Back-end Developer sẽ là thợ hàn và thợ điện-nước, lo phần đổ bê tông, chạy đường điện nước.

UX Designer

Lãnh đạo team UX để đảm bảo mọi việc đúng quy trình. Làm việc với người dùng mục tiêu và các đơn vị liên quan đến sản phẩm như là: team marketing, phòng quảng cáo, phòng tư pháp, bộ phận bán hàng, bộ phận phát triển sản phẩm.. Mục tiêu là chuyển đổi yêu cầu của người dùng, yêu cầu kinh doanh thành đầu vào cho việc phát triển sản phẩm. Lo phần kiến trúc của ứng dụng: thiết kế thông tin, tổ chức thông tin, xây dựng personas, tạo task flow, user journey ..v.v.

UX Researcher

Có nhiệm vụ kiểm tra (test) và nghiên cứu (research) để hiểu tốt hơn về yêu cầu của người dùng và tìm ra các vấn đề. UX Researcher sẽ làm những việc như là: quan sát người dùng, thu thập các feedback, phân tích chúng và thống kê chúng thành các thông tin có giá trị và đưa chúng cho team UX.

Một điều quan trọng là một UX Designer có thể làm luôn công việc của UX Researcher, tuy nhiên với các công ty lớn thì nên tách vai trò này ra.

Visual Designer

Đối tượng của Visual Designer là màu sắc, hình ảnh, font chữ, biểu tượng… để khiến cho sản phẩm nhìn đẹp hơn, hấp dẫn hơn… Giống như vai trò của người thiết kế nội/ ngoại thất.

Nhưng có 1 điều quan trọng là những người thiết kế nội/ ngoại thất tốt là ko chỉ làm đẹp cho ngôi nhà, họ tập trung chủ yếu nỗ lực vào làm cho nó tiện nghi hơn, đáp ứng các yêu cầu thực sự của gia chủ và dựa trên thói quen của gia chủ. Bởi vì người gia chủ sẽ không dùng ngôi nhà để ngắm hay khoe khoang mà thực sự họ sẽ sống ở trong đó. Những việc quan trọng của họ thực sự là gì? Ăn, ngủ, tắm táp và vệ sinh cá nhân trong nhà vệ sinh, thi thoảng thì tiếp khách... Một số gia đình thì nghiện cái Tivi, gia đình khác lại nghiện khu bồn hoa. Chẳng nhà nào giống nhà nào. 

Một người visual designer tốt không chỉ chú trọng đến màu sắc, hình ảnh của sản phẩm cho rực rỡ hay ấn tượng mà visual designer giỏi là biết tập trung vào yếu tố khiến cho sản phẩm dễ dùng hơn.

Front-End Developer

Đây chính người sẽ biến file thiết kế thành sản phẩm hữu hình, có thể thể hiện trên thiết bị mặc dù chưa có chức năng thực. Điều quan trọng với 1 Front-Developer bao gốm 1 số yếu tố:

• Phải đảm bảo đầu ra với chất lượng ở mức độ: pixel perfect so với file thiết kế.
• Đảm bảo tính tương thích trên nhiều thiết bị. Ví dụ tiêu biêu nhất là 1 website phải chạy được trên cả máy tính laptop, máy tính bảng và điện thoại.
• Đảm bảo tính mượt.. khi chuyển giữa các trang màn hình.
• Đảm bảo các hiệu ứng animation giữa các thành phần giao diện. Đôi khi những animation này rất khó và tốn nhiều công sức, nhưng mang lại hiệu quả hấp dẫn người dùng cao hơn hẳn so với visual design. Và quan trọng là việc này cả UX Designer, Visual Designer đều không thể thay thế được đối với Front-end Developer.

Back-end Developer

Nhiệm vụ của 1 Back-end Developer là thiết kế cơ sở dữ liệu và đảm bảo chức năng cho sản phẩm. Họ sẽ đảm bảo sản phẩm chạy đúng như mong muốn của người dùng và đáp ứng mục tiêu kinh doanh.

Tuy vậy, điều thú vị ở đây là Back-end Developer còn nắm 1 chìa khoá quan trọng trong trải nghiệm UX. Một yếu tố cốt lõi của mọi ứng dụng chính là “tốc độ đáp ứng” - vốn được quyết định chủ yếu bởi back-end. Một người dùng sẽ từ bỏ một website nếu như nó cần đến 10 giây để tải trang chủ, bất chấp trang chủ đó được thiết kế giao diện công phu đến mức độ nào. Ngược lại với 1 website đc tải quá nhanh thì ngừoi dùng vẫn yêu thích như thường mặc dầu giao diện không thực sự nổi bật.

UX là một sản phẩm của tập thể 

Rõ ràng vị trí nào trong team UX đều có thể quyết định đến trải nghiệm UX của sản phẩm, theo chiều tốt hoặc xấu. Một người như UX Designer hoặc Visual Designer sẽ không đủ để khiến 1 sản phẩm được người dùng yêu thích.

Một trong những nhiệm vụ lớn của 1 người UX Designer giỏi chính là việc liên kết mọi người trong team thành 1 tập thể hỗ trợ lẫn nhau và tập trung vào trải nghiệm của người dùng. Những tinh thần như là: áp đặt ý kiến cá nhân, hoặc là làm việc kiểu chống đối sẽ là những yếu tố nhanh nhất huỷ diệt sản phẩm. Dù cho bạn có những nhân tài xuất sắc trong team của mình thì vấn không thể tạo ra được 1 sản phẩm tốt.

Ngày nay thì ngày càng có nhiều công ty - hiểu ra vấn đề cốt lõi, mà tôi đã từng đề cập với các bạn trong 1 bài trước. Đó là “thời kỳ của sản xuất đại trà đã qua. Thời kỳ cạnh tranh bằng chất lượng sản phẩm cũng đã qua.”.. Thực tế thì tại thời đại này, người dùng có quá nhiều lựa chọn về sản phẩm. Bất cứ sản phẩm nào vừa đc phát minh ra, dù có tinh vi, phức tạp đến đâu, sau một thời gian ngắn vẫn có thể bắt chước để tạo ra 1 sản phẩm tương đương. Nhưng trải nghiệm mà sản phẩm tạo ra cho khách hàng. Các nhận dạng như là hình ảnh, ngôn từ, cách tương tác, cảm xúc.. được sáng tạo trên sản phẩm riêng của bạn thì người khác sẽ khó lòng có thể copy được. Do đó có thể nói UX càng ngày càng thể hiện rõ vai trò là yếu tố cạnh tranh quyết định đối với doanh nghiệp.

Nếu doanh nghiệp của bạn bạn đứng ngoài cuộc chơi thì bạn hoặc là sẽ mất đi 1 thế mạnh cạnh tranh, hoặc là bạn sẽ bị qua mặt bởi các đối thủ khác..

Sau đây là 4 lợi ích của UX đối với 1 doanh nghiệp mà đã được công nhận rộng rãi:

1. Giảm chi phí tạo ra sản phẩm

Tôi đã nhìn thấy rất nhiều những công ty, kể cả startup hoặc những công ty lớn gặp phải 1 vấn đề là khi họ bắt phát triển 1 sản phẩm, họ hoàn toàn dựa trên dự đoán và tượng tượng nội bộ. Họ nghĩ sản phẩm sẽ cần thế này, sẽ hoạt động thế kia và áp đặt rằng người dùng sẽ nghĩ giống họ. Và khi sản phẩm xây dựng gần xong mới đưa cho người dùng cầm trên tay, lúc đó họ mới nhận thấy sai lầm. Và cái giá cho sai lầm đó, đơn giản thì là thay đổi, cập nhật.. còn phức tạp hơn thì là đập đi làm lại từ đầu.

Với mô hình 7 bước thiết kế UX thì việc gắn người dùng vào từ những giai đoạn đầu của việc thiết kế sản phẩm sẽ khiến sản phẩm tránh được những sai lầm như thế này và lãng phí thời gian và công sức!

2. Giảm rủi ro khi nâng cấp, thay đổi sản phẩm

Thực tế thì số các công ty đầu tư vào thiết kế UX trong việc tạo ra sản phẩm đã là ít ỏi. Nhưng ngay cả khi tạo ra được 1 sản phẩm được thiết kế tốt từ bạn đầu, bạn vẫn phải thường xuyên nâng cấp và thay đổi sản phẩm. Và đó lại là nơi tiềm ẩn nhiều rủi ro nhất vì đó là thời kỳ thiết kế UX trên sản phẩm đã không còn được coi trọng đầy đủ.

Thêm 1 vài chức năng mới, thay đổi một số cập nhật về quy trình..vv. có thể khiến khách hàng nổi giận và rời bỏ sản phẩm của bạn.

Quy trình 7 bước thiết kế UX sẽ giúp cho bạn tránh được việc này. Bắc các đưa vào các bài survey, user test hoặc là usability test.. thì bạn sẽ nhanh chóng tránh được các rủi ro này.

3. Kiếm được nhiều tiền hơn

Tôi nghĩ rằng điều này cũng dễ hiểu, khi sản phẩm của công ty bạn được người dùng sử dụng nhiều, thì cơ hội kiếm tiền của bạn càng trở nên rõ nét

4. Sản phẩm trở nên dễ bán

Nhưng tôi đã nói trước đó, thời kỳ mà khách hàng chỉ quan tâm đến chất lượng của sản phẩm đã qua rồi. Sản phẩm của bạn chỉ cần có 1 chất lượng đạt chuẩn và 1 trải nghiệm người dùng tốt, đó sẽ là 1 sản phẩm dễ bán và dễ khiến khách hàng chi tiền.

Trong chương 2 này, chúng ta sẽ tìm hiểu một cách sơ lược về 7 bước trong quá trình thiết kế UX, trước khi đi sâu vào từng phần trong các chương sau.

Thực tế thì bạn có thể sử dụng nhiều phương thức khác nhau và các kỹ thuật khác nhau để thiết kế UX. Ngày nay khi bạn tìm kiếm trên internet, có rất nhiều các hoạt động nghiên cứu về UX và các nhà thiết kế UX độc lập đưa ra rất nhiều những cách thức mới và kỹ thuật mới - dựa trên kinh nghiệm của họ. Tuy nhiên những gì bạn đang được học có thể coi là một quy trình tiêu chuẩn. Chúng ta hãy tập trung vào quy trình này mà tránh lan man vào các phương thức cụ thể và riêng lẻ.

Quy trình 7 bước thiết kế

Bước 1. Lập Plan

Tại bước này chúng ta phải xác định được phương hướng và giải pháp cho dự án, bằng cách tập hợp mục tiêu, phạm vi và tất cả các thông tin cần thiết. Sau đó vẽ user journey, làm rõ cách thức mà người dùng sẽ tương tác với sản phẩm. Định nghĩa nhu cầu của người dùng và mục tiêu kinh doanh (user needs và business needs).

Bước 2. Discover 

Đây chính là lúc chúng ta cần sử dụng UX research và phân tích để tập hợp nhiều dữ liệu và xác nhận giả thuyết cốt lõi của chúng ta. Điều đáng chú ý là 2 bước là lập plan và discover thường là bổ trợ lẫn nhau. Đôi lúc chúng ta cần ứng dụng research ngay khi bắt đầu dự án vì chúng ta không có đủ thông tin. Do đó thường là chúng ta sẽ bắt đầu bằng một vài giả thuyết khởi động về sản phẩm.

Bước 3. Explorer 

Khi mà xác định được vấn đề và các yêu cầu từ 2 bước trước, bạn có thể bắt đầu nghĩ về các giải pháp khả thi. Tại bước explorer, chúng ta sẽ phác thảo các cách tiếp cận khác nhau và thể hiện nó trên wireframe để thể hiện ý tưởng. Chủ yếu đầu ra của bước này là trên giấy để có thể làm nhanh nhất có thể được.

Bước 4. Define

Sau khi xác định được cấu trúc nền tảng và cốt lõi của ứng dụng, chúng ta có thể tiến xa hơn bằng cách phân rã chúng trên design. Thường thì tại bước này chúng ta sẽ dùng các công cụ digital để vẽ wireframe. Sau đó thiết kế về mặt thông tin, chú ý đến các wording và tương tác giữa các màn hình. Với bản này chúng ta sẽ có 1 hình dung tươi đối về sản phẩm, thậm chí có thể cầm trên tay. Chúng ta sẽ dùng bản này để test nội bộ và test trên người dùng.

Bước 5. Design

Tại bước này, chúng ta thêm màu sắc, icon, typo, layout.. Đây là bước quan trọng để xây dựng cảm giác và cảm xúc của người dùng và thường là.. hình ảnh thực sự của sản phẩm. Visual design phải dựa trên wireframe và giúp người dùng cảm thấy dễ dàng tiếp cận, sử dụng và hiểu được sản phẩm hơn.

Bước 6. Validate

Sau khi có visual design, trước khi chuyển giao đến tay developer, chúng ta phải đánh giá lại design đối với người dùng mục tiêu. Thường thì bước này là bước tinh luyện và lặp đi lặp lại, chúng ta test rồi lại sửa lại design, rồi lại test, lại sửa... Có nhiều cách test ở đây, ví dụ: impression testing (test 5 giây), usability testing, A/B testing…

Bước 7. Hand-off

Chuyển giao thiết kế cuối cùng của bước Validate cho developer để phát triển ứng dụng. Điều quan trọng tại bước này là đảm bảo mọi thứ cần thiết phải được chuyển giao trọn vẹn. Sau đó, team UX vẫn chưa hề xong việc, họ vẫn cần làm việc với nhau với từng chức năng được phát triển xong, để test, đo lường và nhận feedback từ khách hàng.

Để giúp chúng ta có thể có 1 giả thuyết về 1 dự án nhất quán, tôi đưa ra 1 dự án mẫu như sau. Đây là yêu cầu của bài toán

Giả thiết

Giả thiết rằng chúng ta cần phải thiết kế một ứng dụng dating trên mobie (tức là 1 ứng dụng giúp kết bạn, giúp tìm hiểu nhau.. dành cho những người độc thân tại Việt Nam). Tên ứng dụng tạm gọi là vLover. Sản phẩm này được thực hiện theo yêu cầu của công ty VietLove, đã có thâm niên 5 năm trên thị trường môi giới hôn nhân. Công ty VietLove sau khi thành công ở thị trường offline, tức là đã môi giới thành công cho hàng nghìn cặp đôi, thì bắt đầu xây dựng app để tấn công trên thị trường online. Và đây là sản phẩm đầu tiên mà công ty này thực hiện để tiến vào thị trường. Và chúng ta sẽ cùng 1 team để thiết kế UX cho sản phẩm.

Ý tưởng

Sau khi trao đổi với giám đốc công ty VietLove thì đây là 1 số ý tưởng mà ông ấy muốn truyền tải.

Thứ nhất là VietLove có thể mạnh offline dẫn đầu thị trường và ứng dụng trên mobile phải mang được thế mạnh đó lên. Một số các chức năng ở dạng ý tưởng bao gồm: Đăng ký tài khoản miễn phí cho tất cả mọi người chỉ cần số điện thoại. Cho phép tìm kiếm những người phù hợp với mình theo nhiều tiêu chí, như là: độ tuổi, nơi ở, sở thích… Sau đó thì có thể kết bạn với nhau, chat chít, liên hệ để gặp nhau.

Nguồn doanh thu

Và ứng dụng này sẽ kiếm tiền cho công ty bằng 2 nguồn chính. Thứ nhất là khách hàng phải trả tiền để nâng cấp tài khoản - trở thành tài khoản VIP, để có thể kết bạn được với nhiều hơn một ngày và có thể kết bạn với những khách hàng VIP khác. Thứ 2 là khách hàng có thể đăng ký dịch vụ Môi giới hôn nhân, và nhân viên của công ty sẽ giúp tìm kiếm những người phù hợp và giới thiệu với nhau.

Đây là bước mà chúng ta sẽ tập hợp thông tin và xác định trong việc thiết kế ra sản phẩm. Việc đầu tiên, bạn sẽ cần xác định thực sự project này là gì? Tạo ra 1 sản phẩm mới từ đầu, tối ưu UX lại 1 sản phẩm đã tồn tại hoặc thêm 1 vài chức năng mới. Project là 1 thuật ngữ ám chỉ 1 thứ mà cần áp dụng quy trình thiết kế UX để thực hiện.

Một cách đơn giản, mục tiêu của bước lập PLAN sẽ bao gồm xác định 3 thứ:

1. User needs là gì
2. Mục tiêu kinh doanh (hay còn gọi là business needs là gì)
3. Những chức năng nào trên sản phẩm sẽ được triển khai thiết kế

Một trong những điều quan trọng nhất trong bước lập PLAN chính là việc tập hợp mọi người trong dự án lại với nhau, cùng nhau đóng góp ý kiến và cuối cùng là hiểu giống nhau về mục tiêu của dự án. Một ví dụ tiêu biểu là khi thiết kế 1 sản phẩm, đội dự án đã quên không mời team marketing. Và khi sản phẩm ra đời, thì theo yêu cầu cầu team marketing, phải phát sinh thêm 1 cái banner quảng cáo trên giao diện của sản phẩm đó. Và đó đó, cấu trúc thông tin của sản phẩm đã bị phá vỡ và không còn tối ưu về UX nữa.

Sau đây là 3 giai đoạn của bước lập PLAN

Giai đoạn 1: Strategize

Để có 1 cái nhìn sâu hơn và hiểu đúng mục tiêu của ngừoi dùng và những gì họ cần, chúng ta sẽ tạo ra User Personas. Và Personas cũng rất quan trọng để xác định người dùng mục tiêu và định thướng tìm người phù hợp để thực hiện test trong các bước tiếp theo. Và để đảm bảo giai đoạn này có thể đo lường được thì chúng ta sẽ xây dựng một ma trận mà áp dụng framework AARRR. Đây cũng là 1 phương pháp rất hay được nhiều công ty áp dụng trong thực tế và còn được gọi là Startup Matric và chúng ta sẽ đi sâu trong các bài sau.

Giai đoạn 2: Organize

Bây giờ là lúc chúng ta cần phải ngồi lại để sắp xếp lại chúng, quyết định xem cái gì nên được design và làm cách nào để design. Giai đoạn này chúng ta sẽ thiết kế về functionality map, sitemaps và Design Brief.

Giai đoạn 3: Design Flows

Chúng ta sẽ tập trung vào xây dựng các flow cho dự án. Flow (hay còn gọi là luồng) là con đường từ ngữ cảnh này chuyển sang 1 ngữ cảnh khác. Một trong những trải nghiệm người dùng quan trọng nhất của 1 sản phẩm phần mềm chính là flow. Vì sao lại vậy? bởi vì dù bạn có 1 thiết kế giao diện đẹp và ấn tượng đến đâu, mà flow không tối ưu thì cũng trở nên vô nghĩa. Trong giai đoạn này chúng ta sẽ tập trung vào việc xây dựng các flow của sản phẩm, sẽ có những phương thức như là: user stories, storyboarding and task flows

Giai đoạn đầu tiên của bước PLAN: Strategize, chúng ta sẽ đi sâu vào hơn các kỹ thuật và nguyên tắc trong bước này. Kỹ thuật đầu tiên được nói đến là UCBC

Mô hình User Centered Business Canvas (UCBC)

Mặc dầu chúng ta thiết kế phần mềm cho người dùng, nhưng thực tế là luôn luôn phục vụ cho 1 mục tiêu kinh doanh. Có rất nhiều khía cạnh của kinh doanh liên quan đến một sản phẩm, ví dụ như: quan điểm của marketing, các ý tưởng sản phẩm mới, yêu cầu kinh doanh hay là các giới hạn công nghệ đến từ team phát triển của công ty. Do đó để đảm bảo người dùng luôn luôn là trung tâm của thiết kế, chúng ta sử dụngUser Centered Business Canvas (UCBC) để mô hình hóa thông tin.

User Centered Business Canvas mạng lại cho chúng ta 3 lợi ích chính: thứ nhất là cho chúng ta 1 cái nhìn tổng quan về tất cả các khía cạnh, không bỏ sót bất cứ vấn đề nào. Thứ 2 là nó đủ đơn giản và dễ dàng tiếp cận với tất cả mọi người, kể các các team marketing, bán hàng và developer... Thứ 3 là nó tập trung toàn bộ vào những vấn đề cốt lõi nhất, tránh lan man với các chủ đề không quan trọng và thiếu hiệu quả.

Hãy tạo ra 1 bộ User Centered Business Canvas, giữ cho nó liên tục được cập nhật, và sử dụng nó như là một thứ để kick-off (tức là bắt đầu) dự án. Trong các bước sau các bạn sẽ tạo ra 1 bộ User Personas, hãy giữ 2 bản này cạnh nhau. Chúng ta sẽ nhìn thấy 1 bức tranh lớn về người dùng mục tiêu đi từ User Centered Business Canvas và chi tiết hơn khi đến User Personas. Và điều đó thật là thú vị và sáng tỏ..

Xây dựng UCBC cho vLover

Hãy xem video để biết các bước được thực hiện ra sao khi xây dựng 1 UCBC cho ứng dụng vLover. Chúng ta có thể cảm nhận được rõ ràng một điều, là hình dung của ta về yêu cầu thiết kế là rất sáng tỏ và dễ hiểu. Hãy nhớ luôn luôn cập nhật các thông tin này, mỗi khi bạn có thêm các dữ liệu đầu vào, ví dụ khi bạn phỏng vấn thêm khách hàng hoặc thêm yêu cầu từ phòng marketing. Ở dưới bài này thì tôi cũng sẽ cung cấp cho các bạn 1 file template có thể download đc để các bạn sử dụng trong thực tế.

Bài hôm nay, chúng ta sẽ cùng nhau khám phá một mô hình vô cùng quan trọng và nổi tiếng. Bạn sẽ nghe thấy thuật ngữ này ở hầu hết các dự án thiết kế UX. Đó là User Personas.

User personas là một nhân vật tưởng tượng, mà sẽ tiêu biểu cho người dùng mục tiêu của sản phẩm. Thường thì một sản phẩm sẽ có nhiều personas và họ tiếp cận sản phẩm theo cách khác nhau và có mục tiêu khác nhau. Ví dụ với phần mềm vLover, một phần mềm giúp những người chưa có gia đình kết đôi với nhau có thể có 2 personas khác nhau. Đó là: những người độc thân và những người đã từng có gia đình. Người độc thân thì quan tâm đến hình thức và cá tính của nhau. Còn người đã từng có gia đình thì quan tâm đến sự cân xứng và hoà hợp về tính cách, sự thấu hiểu cho hoàn cảnh của nhau.

Có thể nói 1 vài đặc điểm về user personas là như thế này:

• Là 1 bản tập hợp những thông tin quan trọng và hữu ích nhất về người dùng
• Chúng ta căn cứ vào User Personas để tìm ra các ứng viên phù hợp, sau đó sẽ thực hiện UX research như phỏng vấn hoặc user test trên đó
• Thể hiện được yêu cầu và mục tiêu của người dùng
• Phải được căn cứ trên 1 người thật hoặc 1 nhóm người thật
• Nó nhắc nhở chúng ta rằng: đằng sau 1 sản phẩm là 1 con người, với những cảm giác, mong ước, mục tiêu và giới hạn.

Vai trò của User Personas?

• User Personas sẽ giúp UX Designer định hướng được định hướng thiết kế. Theo đó xác định được các hoạt động phân tích và tìm kiếm thông tin đúng hướng. Ví dụ như là: Nơi nào, khi nào và làm cách nào mà sản phẩm sẽ được sử dụng.
• User Personas sẽ giúp UX Researcher tìm kiếm được ứng viên mục tiêu cho việc phỏng vấn, test trong quá trình research sản phẩm
• User Personas cũng sẽ giúp Visual Designer hiểu được ai là người dùng mục tiêu, từ đó sử dụng phong cách thiết kế cho phù hợp.

Xây dựng User Personas Cho vLover

Một trong những bước quan trọng nhất trong bước lập plan là xác định được mục tiêu kinh doanh (hay còn gọi là business goals) và định nghĩa ra 1 cách để đo lường được thành công cho mục tiêu đó. Chúng ta sẽ đến với mô hình AARRR. Tại bước này chúng ta cần định nghĩa được mục tiêu kinh doanh là gì, và đảm bảo toàn bộ team của chúng ta đồng ý với những gì mà ta muốn thu được từ sản phẩm. Ví dụ 1 vài loại mục tiêu có thể kể đến như là: tặng lượng khách hàng ghé thăm website, hay là tăng sự tương tác của người dùng hiện tại, giảm bớt các cuộc gọi yêu cầu support đến phòng customer service.

Mô hình AARRR giúp chúng ta xác định được những mục tiêu rõ ràng và khả thi để thực hiện mục tiêu đó!

Mô hình AARRR hay còn được gọi là Pirate Metrics, là một mô hình rất nổi tiếng trong các dự án startup. Về cơ bản thì nó sẽ xem xét về 1 sản phẩm với 1 số khía cạnh, và sẽ quyết định xem những gì mà ta nên tập trung vào, để có được kết quả tốt nhất. AARRR là 5 chữ cái đầu tiên của 5 bước mà chúng ta sẽ xem xét về sản phẩm, theo thứ tự lần lượt. Đó là (đọc slide). Và bây giờ ta sẽ đi vào xem xét từng bước của mô hình:

• Acquisition
• Activation
• Retention
• Revenue
• Referral

Từng khía cạnh của mô hình AARRR

Acquisition

Đề cập đến việc: làm cách nào mà người dùng có thể tìm đến sản phẩm của bạn? Thông thường thì chúng ta cần các hoạt động marketing, quảng cáo.. Nếu như team bạn tập trung vào bước này của sản phẩm, thì bạn sẽ cần dồn toàn bộ sức lực cho việc khiến những người dùng thực sự tìm đến được sản phẩm của bạn.

Activation

Đề cập đến việc người dùng bắt đầu sử dụng sản phẩm và trải nghiệm của họ. Ví dụ về việc bắt đầu sử dụng như là: tải ứng dụng từ App store hoặc Google Play, đăng ký trở thành thành viên của 1 mạng xã hội hoặc mua một sản phẩm nào đó lần đầu tiên. Nếu chúng ta tập trung vào bước này, team UX sẽ phải quan tâm đến những câu hỏi sau:

• Trải nghiệm đầu tiên của khách hàng đối với sản phẩm ra sao?
• Họ có thực sự bắt đầu sử dụng sản phẩm không?
• Họ có đáp ứng các mục tiêu kinh doanh không?

Retention

Sau khi người lần đầu sử dụng sản phẩm của bạn, họ sẽ quay lại hay là bỏ đi mãi mãi? Đó chính khía cạnh retention trong mô hình này. Hầu hết các công ty đều không nhận thức được điều này, họ thường dành toàn bộ công sức cho 2 bước đầu để có càng nhiều khách hàng mới càng tốt. Nhưng thực tế thì giữ chân khách hàng và khiến họ quay lại sử dụng sản phẩm, lại mới là quan trọng hơn cả. Vì đó có khả năng là những khách hàng trung thành và lâu dài. Thêm nữa chúng ta đã có thông tin của họ, nên việc chăm sóc họ sẽ rẻ tiền và dễ dàng hơn.

Nếu chúng ta tập trung vào bước retention của sản phẩm, ta sẽ tìm các giải pháp để giữ kết nối giữa sản phẩm và người dùng. Người dùng sẽ quên rất nhanh nếu bạn không thường xuyên nhắc nhở họ về sự hiện diện của sản phẩm. Ví dụ ta có vài cách dễ làm như: thường xuyên gửi các email hữu ích cho khách hàng. Gửi SMS chăm sóc khách hàng vào những ngày lễ, tết hoặc sinh nhật của họ.

Revenue

Đề cập đến việc kiếm được nhiều tiền nhất từ sản phẩm. Tức là sau khi khách hàng lần đầu sử dụng, rồi quay lại để tiếp tục sử dụng các lần tiếp theo, điều quan trọng là ta phải khiến họ trả tiền cho sản phẩm hay dịch vụ. Và nếu chúng ta tập trung vào bước này, chúng ta sẽ thực hiện các hoạt động như là:

• Tăng tỉ lệ chuyển rổi (conversion rate)
• Tăng cường các hoạt động giảm giá, tặng voucher hay quảng cáo
• Thường xuyên đề xuất và điều hướng người dùng đến những sản phẩm mục tiêu. Ví dụ là: sau khi khách hàng mua điện thoại trên website của bạn, thì đề xuất các sản phẩm liên quan như là: vỏ ốp điện thoại, sim 3G, gậy tự sướng ..v.v.. Khả năng mà khách hàng sẽ mua thêm các sản phẩm này là rất cao.

Referral

Khía cạnh cuối cùng và cũng là cao nhất của mô hình này, đó là Referral. Người dùng có nói về sản phẩm của bạn với người khác, như là bạn bè hay gia đình của họ không. Đây chính là cơ sở của marketing truyền miệng - loại marketing có hiệu quả cao nhất hiện nay. Nếu bạn tập trung cho khía cạnh này, bạn sẽ cần tạo ra các công cụ giúp lan truyền một cách tự nhiên về sản phẩm. Ví dụ như là các công cụ chia sẻ trên mạng xã hội, gửi link qua email hay tốt chức các chương trình viral marketing tặng thưởng.

Và bây giờ là lúc chúng ta cần phải quyết định xem, chúng ta sẽ tập trung vào điều gì trong 5 bước mà mô hình AARRR đã chỉ ra.

Ví dụ đối với sản phẩm mới tinh, chúng ta tập trung nhiều vào khía cạnh acquisition nhằm tăng tối đa lượng khách hàng mới. Tuy nhiên phải song song với việc cài đặt các công cụ để đo lường hiệu quả cho các bước sau. Đối khi với 1 số sản phẩm, chúng ta lại có vấn đề ở retention thì chúng ta phải đưa ra giải pháp để người dùng quay lại nhiều hơn. Hoặc sản phẩm có vấn đề ở phần revenue, thì chúng ta cần kiểm tra lại bước thanh toán online, có thể là bước này không thể hiện được sự tin cậy cần thiết, nên khách hàng đã rời bỏ sản phẩm tại bước này.

Thước đo

Và Trước khi bắt tay vào thiết kế UX, chúng ta cần tìm ra một số các thước đo để đảm bảo các hoạt động của chúng ta là hiệu quả. Đồng thời quan trọng hơn là phải tìm các công cụ để đo. Bằng cách sử dụng một bảng như trên, bao gồm 3 cột, cột đầu tiên là Business Goals, cột thứ 2 là thước đo và cột thứ 3 là công cụ hoặc phương pháp đo.. Chúng ta sẽ có một bảng tương đối đầy đủ quanh các mục tiêu kinh doanh cho dự án UX.

Chúng ta đến với giai đoạn thứ 2 của bước lập PLAN, đó là organize. Chúng ta đã có được một tập hợp thông tin sau bước Strategize, bây giờ là lúc chúng ta cần quyết định xem cái gì sẽ thể hiện trên sản phẩm. Chính xác ở đây là ta quyết định cái gì, chứ không phải là như thế nào.

Cơ bản mà nói thì người dùng có thể làm 2 thứ trong 1 sản phẩm: Một là sử dụng 1 chức năng để làm gì đó. Hai là là tiêu thụ thông tin (đọc, nghe hoặc xem). Bạn hãy chú ý đến điều đó. Với 1 mobile app hoặc là web app thì chúng ta thường sẽ tập trung vào các chức năng để giải quyết những vấn đề của người dùng. Ví dụ với ứng dụng vLover thì chúng ta cần cung cấp các chức năng như: đăng ký, tìm kiếm người phù hợp, giao tiếp..v.v. Với 1 website hoặc landing page thì thường ta tập trung vào nội dung, nội dung ở đây sẽ là văn bản, ảnh, video.. Thông thường thì một phần mềm có cả các chức năng và nội dung.

Brainstorm

Đây là lúc bắt đầu suy nghĩ về các ý tưởng. Ta mang các user personas đã xây dựng ở phần trước ra để hỏi và trả lời các câu sau:

• Chức năng nào sẽ giúp giải quyết vấn đề của người dùng này
• Chức năng nào mà người dùng này đang tìm kiếm
• Loại nội dung nào mà người dùng cần (văn bản, ảnh hay video)
• Nội dung nào sẽ khiến giúp người dùng không còn sợ hãi hay lo lắng (tức là trong phần fears của personas)
• Thông tin nào mà người dùng tìm kiếm

Bạn cần đánh chỉ số ưu tiên cho các chức năng. Thực tế thì bạn sẽ không bao giờ thực hiện được hết các ý tưởng về chức năng trong 1 lúc. Do đó, hầu hết trường hợp, ta sẽ cần sắp xếp chúng theo mức độ ưu tiên. Thêm nữa bạn cũng cần phải xác định các nguy cơ tiềm ẩn trong các chức năng đó. Có thể có 1 số chức năng có vấn đề với thông tin cá nhân nhạy cảm của người dùng. Hoặc có 1 số chức năng sẽ tiêu tốn quá nhiều công sức mà chưa chắc người dùng đã sử dụng.

Functionality map

Bây giờ thì ta sẽ sắp xếp các chức năng của dự án trên một mô hình gọi là MindMap. Đây là một công cụ đơn giản nhưng mạnh mẽ, giúp sắp xếp tư duy của chúng ta một cách mạch lạc. Các bạn có thể dụng các phần mềm miễn phí như XMind hoặc Freemind để làm việc này. Bạn có thể dùng nhiều icon, màu sắc để giúp đánh chỉ số ưu tiên hoặc thể hiện những nguy cơ tiềm ẩn trên các nhánh chức năng, khiến cho mô hình mindmap trở nên ý nghĩa hơn.

Sitemap

Nếu như bạn phải làm việc với rất nhiều các màn hình, sẽ cần 1 công cụ để nhìn tổng thể và biết màn hình nào liên quan đến màn hình nào. Công cụ đó là sitemap. Đây là một thuật ngữ lâu đời từ thời thống trị của các website. Sitemap đặc biệt phù hợp để giúp chúng ta quyết định thứ tự các trang thông tin đặt trên phần mềm. Đây ko phải là design, đây đơn thuần là kiến trúc thông tin mà thôi. Sitemap cũng phần nào giúp chúng định hướng navigation giữa các trang màn hình.

Design Brief

Đó là một tài liệu ngắn trả lời những cau hỏi quan trọng nhất, như là:

• Người dùng là ai?
• Họ cần gì và mục tiêu của họ là gì? 2 điểm này thì ta có thể lấy từ mô hình user personas.
• Mục tiêu kinh doanh là gì? Mục tiêu của sản phẩm là gì? Để có thông tin này, chúng ta trích xuất từ bảng business goals mà ta đã học từ bài trước
• Các chức năng nào nên được design? Ta sẽ lấy thông tin này từ functionality map.

Bản Design Brief này sẽ được sử dụng như điểm khởi đầu của dự án thiết kế. Tôi sẽ cung cấp cho các bạn 1 template cho công cụ này ở dưới bài, bạn có thể sử dụng nó trong thực tế.

Flows hay còn được gọi là luồng, đôi khi còn được gọi là user journeys (tức là hành trình của người dùng). Theo kinh nghiệm của tôi, luồng là 1 vấn đề cực kỳ quan trọng, so với các thiết kế giao diện trên màn hình của ứng dụng. Người dùng sẽ cảm nhận rõ hay không “sự đơn giản” và “thông minh” của 1 ứng dụng chính là do luồng của ứng dụng có được tối ưu hay không.

Một vài ví dụ

Ta có 1 ví dụ là công cụ tìm kiếm Google có 1 luồng (flow) vô cùng tối giản. Tất cả ứng dụng Google chỉ bao gồm 2 bước: Bước thứ nhất là trang chủ có hộp search duy nhất. Sau khi người dùng gõ từ khoá, họ sẽ được chuyển sang trang danh sách kết quả là trang thứ 2, và cũng là trang kết thúc của flow tìm kiếm. Với trải nghiệm siêu đơn giản này, chúng ta ngày nay sử dụng Goolge một cách rất tự nhiên. Đôi khi người dùng còn gõ thẳng tên miền vào hộp tìm kiếm, thay vì trên trang địa chỉ của trình duyệt. Nếu như người dùng cần tới 5 bước trên google để đến được mục tiêu thì chắc chắn điều này sẽ không xảy ra.

Thậm chí còn cao tay hơn Google, ứng dụng đặt xe Uber còn đơn giản hơn với flow tối giản, chỉ có duy nhất 1 màn hình cho tác vụ đặt xe. Trên màn hình đó, Uber đưa vào tất cả các chức năng bao gồm: chọn điểm đến, sau đó chọn loại dịch vụ, rồi đến chọn phương thức thanh toán..v.v. Thông thường trên mỗi bước này sẽ có rất nhiều thông tin và hoàn toàn hợp lý nếu Uber chia thành nhiều trang màn hình 1 cách rõ ràng. Và để dồn tất cả trong 1 trang màn hình, khiến khách hàng cảm thấy dễ dàng hơn, Uber phải tích hợp vào những loại control thông minh, các kiểu tương tác hết sức mượt mà và có ý nghĩa. Có thể nói đây là 1 trong những thành công đỉnh cao về UX Design trên thị trường hiện nay.

Trong khoá học này tôi sẽ đề cập đến 3 phương thức thiết kế kế flow, đó Storyboarding, Task flow, User Stories để cách bạn có thể hiểu được cách thiết kế flow cho ứng dụng. Thực tế thì có nhiều cách khác các bạn có thể sử dụng, nhưng 3 phương thức này là đủ đơn giản và gần gũi hơn cả. 

Storyboarding

Đây là một phương thức thú vị và giản đơn, được mượn từ công nghiệp làm phim để chúng ta đưa 1 câu chuyện vào cuộc sống. Mục tiêu của Storyboarding là tập trung vào ngữ cảnh (tức ở đâu, khi nào và người dùng sử dụng sản phẩm như thế nào). Điều quan trọng là storyboarding sẽ chỉ tập trung vào những gì người dùng cần và mục tiêu của họ, thay vì nghĩ đến giải pháp kỹ thuật cụ thể.

Có ai đó sẽ bảo: nhưng tôi không biết vẽ. Thực tế thì đây là một loại hình vẽ đơn giản và vui nhộn và tôi chưa từng thấy ai không thể vẽ được những loại hình ảnh này. Chúng ta chia làm nhiều ô, mỗi ô là một bước trong flow. Trong mỗi ô ta sẽ vẽ hình vẽ thể hiện ngữ cảnh, tư duy và nhu cầu của người dùng, sau đó kết hợp với các đoạn văn bản giới thiệu. Tôi cho rằng với mọi chức năng, chúng ta chỉ vẽ toàn bộ các bước trong 1 tờ giấy A4 là đủ. Nếu ta cần đến 1 tờ A3 để vẽ 1 storyboard, tức là flow của chức năng này đã trở nên quá phức tạp và cần phải xem lại ngay.

Có ai đó lại hỏi tôi: Vì sao tôi lại cần thứ này? Tôi có thể hình dung được toàn bộ flow này, tôi có thể bỏ qua nó không. Câu trả lời là Storyboarding có 2 ý nghĩa lớn:

1. Một là thực tế thì thời điểm chúng ta vẽ nghệch ngoạc ra giấy, chính là lúc ta tư duy tốt nhất và sáng rõ nhất. Khoa học đã chứng minh đó là một cách để sáng tạo và tìm kiếm các ý tưởng. Và chưa kể là nó rất fun, rất relax..
2. Hai là vẽ tay là một việc mà mọi người trong team đều có thể làm được. Nếu bạn yêu cầu team marketing có thể làm prototype, hoặc lập trình viên thiết kế Photoshop thì chắc chắn là không được, nhưng vẽ tay thì mọi người đều sẵn sàng. Bạn có thể tổ chức workshop, tập hợp mọi người vào và vẽ các storyboard dựa trên cách hiểu của họ. Sau đó chúng ta tập hợp và thảo luận để đưa ra mô hình Storyboarding tốt nhất.

Task flows

Nếu như Storyboarding chỉ tập trung vào ngữ cảnh và người dùng, không hề đếm xỉa đến sản phẩm và yếu tố kỹ thuật thì Task Flows lại tập trung vào điều đó. Đây là mô hình sẽ thể hiện những việc mà người dùng cần thực hiện trên sản phẩm để hoàn thành một tác vụ.

Để xây dựng 1 cái task flows chúng ta chỉ sử dụng 3 loại hình vẽ: chữ nhật: tên của trang màn hình hoặc là tác vụ của khách hàng (ví dụ như: đăng ký, đăng nhập hay tìm lại mật khẩu…). Hình thoi thể hiện điều kiện rẽ nhánh, thông thường có 2 trạng thái là YES, NO. (Ví dụ: Nếu như đã đăng nhập hay là nếu nhập sai mật khẩu 3 lần..). Hình thứ 3 là các mũi tên liên kết giữa các hình chữ nhật và hình thoi trong biểu đồ thể hiện luồng màn hình.

User stories

Đây là một mô hình nổi tiếng nếu như bạn biết đến phương pháp xây dựng phần mềm Agile. Phương thức này là 1 tập hợp các câu đơn, theo cấu trúc giống nhau: Là [ai đó..], tôi muốn [làm điều gì đó..], do đó [tôi cần..]. Ví dụ như: Là một dùng trên vLover, tôi muốn tìm được một vài người phù hợp để nói chuyện, do đó tôi cần 1 công cụ tìm kiếm tốt. Hay là: là một quản trị viên của vLover, tôi muốn kiểm soát chất lượng thông tin trên diễn đàn của vLover, do đó tôi muốn có 1 công cụ để người dùng cảnh báo hành vi vi phạm và gửi đến tôi.

Một user stories có thể ở mức độ rất high-level như trong ví dụ trước đó, hoặc ở mức độ rất cụ thể và chi tiết khi ta đi sâu phân tích từng chức năng. Nhưng nó đều tập trung toàn bộ vào user needs, luôn luôn đặt người dùng vào giữa trong mọi hoàn cảnh.

Cũng giống như Storyboarding và Taskflow, cấu trúc câu của User stories vô cùng giản đơn nhưng lại rất nhiều sức mạnh. bạn có thể tổ chức các workshop để tập hợp các user stories từ mọi người và xây dựng bổ user stories cho dự án.

Nhìn lại..

Bây giờ ta sẽ dành thời gian nhìn lại 3 công cụ được làm quen trong phần Thiết kế flows của bước lập PLAN. Ta có thể thấy rõ 1 sơ đồ khá thú vị, đó là chúng ta sẽ đi xây dựng các storyboarding để hình dung 1 bức tranh lớn về sản phẩm. Sau đó đi chi tiết hơn trong từng tác vụ, trên các task flows (hay còn gọi là các bức tranh nhỏ hơn). Trong cả 2 bước tranh lớn và nhỏ, chúng ta luôn duy trì các user stories để không mất tập trung vào nhu cầu của người dùng.

Các bạn hãy nhớ lấy sơ dồ này khi lập plan cho sản phẩm của mình 

Sau khi có các thông tin ở bước 1, lập PLAN, hầu hết chúng ta mới có những thông tin đang dừng ở mức giả thuyết. Nếu bạn không thực hiện xác minh xem user needs đó có đúng không, user personas của khách hàng mục tiêu như vậy có đúng không. Thì rất có thể sản phẩm mà chúng ta xây dựng sẽ không đáp ứng đúng nhu cầu thực sự của người dùng và không thúc đẩy họ sử dụng - điều đó dẫn đến không đạt được business needs. Để tránh vấn đề đó, trong quy trình 7 bước thiết kế UX, chúng ta sẽ bỏ ra hẳn 1 chương Discover để thực hiện các công cụ UX research để xác minh những giả thiết đó.

Khi ta nói đến UX Research, ko phải là ta sẽ lướt Google, tìm kiếm các bản thống kê hay là sang chảnh hơn nữa là vào các kho thông tin như Gartner để tìm hiểu.

Research trong UX sẽ bao gồm các bước:

Bước 1: Research

Chúng ta sẽ áp dụng các phương pháp như là User interview, Observation hay là Card sorting… để tìm ra vấn đề và lý do.

Bước 2: Test

Bước này giúp chúng ta xác minh các giả thuyết mà ta đưa ra và tìm hiểu về người dùng. Thực sự thì người dùng là ai, những gì họ thực sự cần.

Bước 3: Measure & Analyze

Sẽ đóng vai trò nền móng của việc phát triển sản phẩm. Bằng cách đặt các công cụ đo và phân tích thường xuyên các kết quả trả về, đó chính là nguồn thông tin quý giá và hữu ích nhất cho UX research.

Lợi ích 

1. Giảm bớt các chức năng thừa, theo đó giảm chi phí phát triển. Ví dụ như: chúng cho rằng người dùng cần 1 chức năng nào đó, theo một độ phức tạp nào đó. Nhưng sau khi phỏng vấn, thì vỡ lẽ ra là người dùng không cần chúng. Vậy là Chúng ta sẽ kịp sửa lại ngay trước khi dồn công sức phát triển tính năng này.
2. Người dùng sẽ thích sản phẩm hơn và gắn bó hơn, theo đó sẽ dùng thời gian cho sản phẩm hơn. Ví dụ như người dùng nói rằng: điện thoại của tôi có tính năng xác thực vân tay, tôi muốn dùng nó thay cho chức năng login bằng mật khẩu. Bạn thực hiện điều đó và người dùng cảm thấy hạnh phúc.
3. Trợ giúp team marketing, SEO, SEM.. Bằng cách research, ta sẽ hiểu người dùng hơn và theo đó các từ khoá dành cho quảng cáo cũng trở nên thiết thực và chính xác hơn.

Nói đến research trong UX là nói đến việc phỏng vấn và quan sát khách hàng. Chúng ta làm việc này nhằm tìm ra những gì họ thực sự cần trên sản phẩm của chúng ta và theo đó xác minh các giả thuyết về sản phẩm. Vậy việc đầu tiên của phần này sẽ là: tìm kiếm các ứng cử viên phù hợp để thực hiện. Làm cách nào để bạn có thể tìm dc các ứng viên phù hợp? Chúng ta có 4 cách sau

1. Trên tập khách hàng đã có

Nếu doanh nghiệp đã có 1 vài sản phẩm, họ sẽ có 1 tập các khách hàng đã sử dụng dịch vụ của họ. Và đó là những người dễ nhất để bạn thực hiện việc research. Thông thường sẽ có 2 tập khách hàng,

• Một là những khách hàng chưa từng sử dụng sản phẩm này của bạn (rất có thể là họ đã có giải pháp của riêng mình hoặc là biết đến sản phẩm của đối thủ): với tập này bạn sẽ test được ấn tượng và trải nghiệm đầu tiên khi họ nghe bạn nói về sản phẩm hoặc cho họ dùng thử.
• Hai là những khách đang sử dụng sản phẩm này. Với đối tượng này thì bạn sẽ không tìm hiểu được ấn tượng và trải nghiệm đầu tiên, nhưng lại hiểu về những trải nghiệm và ý kiến trong quá trình sử dụng sản phẩm.

Và bạn phải căn cứ vào yêu cầu của dự án để quyết định sẽ test trên tập khách hàng nào.

1.1. Email list

Nếu bạn đã có danh sách email subscribe website hoặc dịch vụ của bạn, đó sẽ là một nơi bạn có thể tìm kiếm ứng viên tiềm năng. Bạn có thể gửi 1 email cho họ và giải thích về những gì mà bạn định làm và mời họ tham gia,

1.2. Mạng xã hội

Thường thì ngày nay hầu hết mọi người đều sử dụng ít nhất 1 mạng xã hội để phục vụ các nhu cầu cá nhân. Ví dụ Facebook, LinkedIn hay là Instagram.. Nếu bạn đã có fan page hoặc public group trên Facebook thì hãy tận dụng nguồn tài nguyên này. Hãy tạo những bài viết hoặc là gửi tin nhắn cho họ, giải thích cho họ về sản phẩm, những gì họ có thể giúp bạn. Hãy cố gắng tạo nội dung tốt và ý nghĩa, học sẽ giúp bạn lan truyền trên mạng xã hội. Và sẽ tốt hơn nếu bạn đính kèm những món quà nhỏ để thu hút họ.

1.3. Trên website

Nếu bạn có 1 vài website có traffic tốt thì bạn có thể sử dụng 1 popup trên đó để tìm kiếm ứng viên. Nếu bạn dùng wordpress, drupal.. thì sẽ có nhưng plugin để làm việc đó dễ dàng. Hãy chú ý là không làm phiền họ bằng những popup dài dòng và choán hết màn hình, hoặc như có cảm giác ép buộc họ. Chú ý là chúng ta đang tìm những người sẵn sàng giúp đỡ để giúp xây dựng sản phẩm. Và bạn phải cư xử thế nào để họ muốn giúp đỡ bạn.

1.4. Customer support

Cũng nên sử dụng kênh customer support. Nếu như một người khách hàng đã từng gửi feedback, đặt các câu hỏi về sản phẩm hoặc than phiền về 1 tính năng nào đó. Điều đó chứng tỏ là họ quan tâm đến sản phẩm và có thể nói sản phẩm hiện đang useful với họ. Bạn nên thực hiện research trên đối tượng khách hàng này đầu tiên, vì đó là những ứng viên tiềm năng nhất.

2. Tìm kiếm người tiềm năng

Những khách hàng đã biết đến công ty bạn bằng 1 kênh nào đó, thì dễ dàng để tiếp cận cho việc research của bạn, vì rằng họ có gì đó trung thành với bạn, tin tưởng vào bạn và sẵn sàng hợp tác. Nhưng đôi khi họ không thực sự cần những gì bạn định làm, họ cũng có thể nói gì đó để đẹp lòng bạn, giống như một cách xã giao. Nhưng những khách hàng tiềm năng thì khác. Họ mới là người thực sự cần và sử dụng sản phẩm của bạn. Bạn cần phải tiếp cận những tập khách hàng đó để tiến hành research.

Có 3 lý do chính mà khách hàng tiềm năng sẵn sàng tham gia vào quá trình research của bạn

1. Mọi người đều có nhu cầu nói về những vấn đề của họ. Đề nghị nhưng giải pháp của riêng họ để giải quyết vấn đề đó. Đó là vấn đề tự nhiên.
2. Mọi người đều muốn tỏ ra thông minh. Nếu như ai đó hỏi bạn, tham khảo ý kiến, như thế bạn là 1 chuyên gia, chẳng có lý do gì họ từ chối.
3. Cuối cùng là mọi người đều tò mò và việc research người dùng thì thường là fun, vui vẻ.. Và thông thường bạn sẽ ko khó khăn để mời mọi người tham gia.

3. Sử dụng các dịch vụ test từ xa

Chúng ta cũng có thể sử dụng các dịch vụ test từ xa (hay còn gọi là remote test) từ các nhà cung cấp dịch vụ - chủ yếu là nước ngoài. Bảng bên cạnh là một số nhà cung cấp dịch vụ test mà bạn có thể tham khảo.

4. Test du kích

Test du kích hay còn gọi là hallway test (test hành lang) được sử dụng khi bạn gặp bất cứ ai, như bạn bè hoặc người thân trong 1 quán cafe, ở trường học hay ở nhà. Thường thì test du kích chỉ hữu dụng với usability test vì những người đó thường không nằm tập khách hàng mục tiêu của bạn. Tuy nhiên với 1 số loại phần mềm đặc thù như là ví dụ vLover của chúng ta thì cách làm này thường rất hiệu quả, vì tất cả mọi người đều có hiểu biết nhất định về tình yêu, các mối quan hệ khác giới, hôn nhân... và có thể cho chúng ta nhiều những ý kiến hữu ích.

Tạo cơ sở dữ liệu ứng viên

Chú ý một điều là thường thì việc tìm các ứng viên cho 1 dự án UX là không dễ dàng và tương đối mất thời gian. Cho nên bạn nên tạo và duy trì 1 database các ứng viên để thực hiện tìm lại mỗi khi bạn cần. Ví dụ 1 người đã tham gia interview thì cũng có thể quay lại để test usability và họ sẽ sẵn lòng tham gia vì bạn sẽ không cần giải thích lại với họ về sản phẩm thêm 1 lần nữa. Bạn có thể sử dụng 1 file excel hoặc một phần mềm CRM để taọ CSDL này.

User Interview là một trong những kỹ thuật quan trọng nhất trong UX Design. Bạn có thực hiện interview trong một cuộc test du kích, trong phòng kín hoặc thậm chí thông quá các đơn vị agency cung cấp dịch test. Nhưng mà bạn sẽ không thể có đc 1 sản phẩm tốt nếu bỏ qua việc này. Có thể nói User Interview là cây cầu giữa bạn và người dùng của bạn. Nó sẽ cung cấp cho bạn những thông tin như người dùng của bạn là ai? Những gì họ thích và ko thích? họ cần gì? họ sợ hãi và lo lắng về điều gì?

Interview những gì?

Việc đầu tiên mà bạn cần interview là xác minh những điểm trong user personas bạn đã xây dựng trong bước trước đó. Đặc biệt là những phần như vấn đề của người dùng là gì, họ cần gì về sản phẩm của chúng ta? Họ sợ hãi hay lo lắng về điều gì. Bạn sẽ cập nhật các thông tin đó vào tài liệu User Personas sau mỗi lần interview.

Giống như User Personas, User Centered Business Canvas cũng là 1 tài liệu cần phải cập nhật thường xuyên thông qua user interview. Tuy nhiên bạn sẽ tập trung vào bức tranh lớn hơn thay vì đi sâu vào chi tiết. Hãy luôn giữ UCBC và User Personas cùng một chỗ khi bạn thực hiện bất cứ cuộc interview với khách hàng.

Sau khi có thông tin về các vấn đề và yêu cầu của khách hàng, bạn có thể thực hiện interview để xác minh các ý tưởng sản phẩm về chức năng và nội dung. Liệu các chức năng và nội dung đó có giải quyết được các vấn đề và đáp ứng được yêu cầu của họ không? Bạn cũng có thể đề nghị họ đưa ra một vài ý tưởng dựa trên kinh nghiệm cá nhân của họ. Hãy tin tôi, đó sẽ là những ý tưởng cực kỳ hữu ích mà bạn có thể chưa từng nghĩ đến.

Một số chú ý

Một vấn đề thường gặp phải trong các cuộc user interview đó chính là chúng ta có 1 kịch bản sẵn có và hay có tư tưởng điều khiển người dùng. Chúng ta muốn người được phỏng vấn trả lời theo những gì ta muốn. Ví dụ những câu hỏi như "Anh chị thấy sản phẩm này tốt chứ?" - câu hỏi này đã bao gồm hàm ý trả lời rồi. Và sẽ ít người trả lời cho ta rằng "Ohh! Sản phẩm như shit, bạn nên vứt nó đi và làm lại từ đầu"..Nếu như họ trả lời là "Tôi nghĩ là sản phẩm này cũng được", thì bạn cũng chẳng thu được bất cứ thông tin hữu ích nào. Vì thế hãy tránh xa những câu hỏi dạng như vậy

User interview rất mạnh và quan trọng nhưng cũng có những giới hạn nhất định. Bạn cần biết để tránh đưa những câu hỏi sau vào danh sách câu hỏi người ding

Đừng hỏi những câu hỏi như, bạn sẽ mua sản phẩm này chứ? Hầu hết mọi người ko muốn làm mất lòng người khác, họ sẽ luôn trả lời là "ồ chắc rồi" hoặc là "có thể lắm" và kết quả của bạn sẽ là 1 có kết quả "có vẻ khả quan" nhưng lại hoàn toàn không chính xác. Đừng hỏi họ về giải pháp thiết kế. Người dùng nào cũng có những quan điểm về thiết kế và sẵn sàng bày tỏ. Đừng bao giờ hỏi họ xem họ thích màu đỏ hay màu xanh, thích kiểu thẳng hay cong, thích icon dạng mỏng hay dày. Khi bạn cầm bản câu trả lời đó bạn sẽ không thấy bất cứ giá trị nào. Theo tôi, đó cũng sẽ là sự xúc phạm đến người làm Visual Design.

Thực hiện 1 buổi interview

Bước 1: Tìm ứng viên để phòng vấn

Chúng ta sẽ bắt đầu bằng 1 buổi interview giả định. Buổi interview này sẽ được thực hiện tại 1 phòng họp kín tại công ty bạn. Bước đầu tiên là Tìm ứng viên để phòng vấn: Bạn tìm 10 -15 ứng viên mà phù hợp với User Personas. Nói với họ mỗi cuộc phỏng vấn chỉ từ 20 - 40 phút. Đây là khoảng thời gian hợp lý để mọi người đều sẵn lòng tham gia.

Bước 2: Đặt mục tiêu (goals) & chuẩn bị các câu hỏi

Bước tiếp theo bạn cần đặt mục tiêu cho buổi phỏng vấn và chuẩn bị trước danh sách câu hỏi. Thực tế là nếu bạn không chuẩn bị danh sách câu hỏi thì cuộc phỏng vấn có thể dễ dàng kéo dài mất kiểm soát và mất trọng tâm. Ví mục tiêu của bạn trong 1 buổi phỏng vấn người dùng cho sản phẩm vLover là: Tôi muốn biết họ có muốn không việc đăng tải nhiều thông tin cá nhân lên vLover. Và 1 số câu hỏi như: Những thông tin gì bạn sẵn sàng đăng tải lên vLover. Giả thuyết của ở đây là: Có thể người dùng lo ngại vấn đề bảo mật thông tin cá nhân.

Một chú ý là bạn cần tránh xa các câu hỏi mang tính định hướng người dùng, hoặc các câu hỏi ít giá trị như câu hỏi yes/no. Hãy tận dụng những câu hỏi mở. Ví dụ: Hãy nói cho tôi biết lần cuối cùng bạn tìm được 1 mối quan hệ khác giới tiềm năng trên internet. Người dùng có thể cung cấp cho bạn rất nhiều thông tin hữu ích, như về thời gian, hoàn cảnh, công cụ và cảm xúc của họ tại thời điểm đó.

Bước 3: Thực hiện interview

Khi tiến hành interview khách hàng, hãy giữ không khí thoải mái, tiện nghi. Hãy nhớ mục tiêu của chúng ta là nhờ họ giúp đỡ, do đó hãy thể hiện như thể họ là khách quý. Sử dụng một bữa tiệc ngọt với bánh ngọt, đồ uống như trà và cafe sẽ giúp bạn điều đó. Đôi khi bạn còn có thể chuẩn bị những món quà nhỏ như 1 chiếc áo phông hoặc mũ lưỡi trai in logo của công ty.

Bước 4: Phân tích kết quả

Sau khi tiến hành interview, hãy tập hợp lại các phiếu phỏng vấn và tiến hành phân tích. Chú ý mục tiêu của chúng ta là xác minh các giả thuyết. Hãy cẩn thận và tránh xa những câu trả lời ít có giá trị và chỉ thoả mãn những gì bạn muốn nghe.

Chúng ta đến với kỹ thuật Observation để thực hiện quan sát cách mà người dùng sử dụng 1 sản phẩm nào đó, thực tế thì họ có những vấn đề gì và làm cách nào để họ xử lý vấn đề đó.

Đừng tin người dùng!

Interview là một phương pháp hỏi đáp trực tiếp với người dùng. Và chúng ta có những thông tin từ những gì họ nói, thay vì từ những gì họ làm. Và điều đó mặc dầu vô cùng hữu ích, nhưng không phải là đúng trong mọi trường hợp. Henry Ford - người sáng lập ra hãng xe ô tô đầu tiên Fords Motor có 1 câu nói nổi tiếng về người dùng "Nếu bạn hỏi mọi người là họ cần gì, họ sẽ nói rằng họ cần những con ngựa chạy nhanh hơn!

Observation là phương pháp được tạo ra để thay vì chỉ nghe người dùng nói, chúng ta sẽ tiến hành khám phá về những gì họ thực sự cần và thực sự làm. Observation còn được gọi bằng những tên khác như là Customer Visits hoặc là Field Studies.

Ví dụ khi tôi hỏi người dùng là: Hãy nói cho tôi biết bạn đã sử dụng Facebook như thế nào? Điều này rất là khó để nói vì hầu hết họ làm theo một bản năng và khó lòng kể lại hết bao nhiêu bước họ đã thực hiện. Thay vì như thế, tôi sẽ đề nghị: anh hãy sử dụng Facebook cho tôi xem, tôi sẽ quan sát cách mà anh sử dụng Facebook. Điều đó thật vô cùng dễ dàng và tự nhiên.

Khi nào sử dụng Observation?

Khi mà bạn muốn biết: làm cách nào mọi người sử dụng một phần mềm hoặc là sử dụng 1 giải pháp đã tồn tại (thậm chí của đối thủ), đó chính là lúc bạn sẽ cần áp dụng Observation. Trong trường hợp này interview không có tác dụng vì họ sẽ không nhớ những việc mà họ đã làm theo bản năng. Ví dụ như:

• Khi bạn muốn xem và hiểu được các giải pháp hiện tại mọi người đang dùng
• Quan sát cách mọi người sử dụng 1 sản phẩm
• Tìm 1 vài ý tưởng mới dựa trên yêu cầu thật sự của người dùng
• Tìm hiểu những thói quen thường xảy ra của người dùng và các workflows họ sử dụng
• Mong muốn hiểu được nhu cầu thực sự của họ.

Thực hiện 1 buổi Observation

Nếu bạn đã có 1 sản phẩm và bạn muốn hiểu làm cách nào để họ sử dụng sản phẩm đó. Viêc đầu tiên là bạn tìm 1 vài người đang sử dụng sản phẩm đó để mời làm ứng viên. Sắp xếp đúng ngữ cảnh để sử dụng sản phẩm đó, ví dụ nếu sản phẩm là công cụ thanh toán, hãy mời họ đến 1 siêu thị và đứng gần quầy thanh toán để xem họ thao tác. Nếu là một mạng xã hội như vLover thì có thể mời họ đến quán cafe, nơi mà sẽ thực sự sử dụng sản phẩm.

Nếu bạn chưa có 1 sản phẩm để tiền hành đặt câu hỏi và quan sát. Hãy bắt đầu bằng cách xem người dùng sử dụng các giải pháp hiện tại có trên thị thường. Có thể là sản phẩm của đối thủ. Bằng cách này, bạn có thể học được cái gì là tốt, cái gì là chưa tốt từ các giải pháp đó và xác minh các ý tưởng về chức năng bạn định làm. Cũng giống như trường hợp trước bạn cũng nên bắt đầu với 8 ứng viên cho mỗi lần quan sát.

Sau khi tiến hành buổi observation, hãy lưu thông tin bạn quan sát được vào 1 file report rồi tiến hành tổng hợp và phân tích kết quả. Thông thường bạn sẽ cần các buổi workshop trong team UX để quyết đinh xem những thay đổi nào sẽ áp dụng trên danh sách chức năng và nội dung của sản phẩm. Sau khi cập nhật sản phẩm, hãy thực hiện tiếp các buổi test observation để đảm bảo nâng cấp đạt kết quả tốt.

Chúng ta đã có 2 phương pháp là User Interview và Observation để hiểu về người dùng qua những khía cạnh như: họ là ai? vấn đề thực sự của họ là gì và họ thực sự cần gì ở sản phẩm của chúng ta. Tuy nhiên có một khía cạnh vô cùng quan trọng trong 1 sản phẩm phần mềm đó là cấu trúc và điều hướng thông tin. Chúng ta hãy nhớ lại cầu thang 6 bước về một UX tốt. Bước đầu tiên trong cầu thang là Findable, tức là người dùng phải tìm được thông tin mà họ cần. Và điều đó phụ thuộc chủ yếu vào việc tổ chức các thông tin trên sản phẩm của chúng ta.

Card sorting là phương pháp để bạn khám phá ra cách mà người dùng tìm kiếm các thông tin thay vì áp đặt ý kiến riêng của những người làm UX. Thông thường thì chúng ta hay tư duy một cách logic về việc sắp xếp thông tin trong 1 sản phẩm, đôi khi vì đứng trên lập trường của tổ chức lưu trữ dữ liệu, hoặc là bị ảnh hưởng bởi những thuật ngữ trong nghề. Nhưng thực tế thì người dùng họ không nghĩ như vậy. Một ví dụ là trong 1 sản phẩm ví điện tử có chức năng là topup. Mặc dầu là hầu hết mọi người làm ví điện tử hoặc telco như Viettel, Mobifone.. điều quen dùng thuật ngữ topup, nhưng người dùng thực sự lại không hiểu. Thực chất đó là chức năng "nạp tiền điện thoại". Hoặc trong ngân hàng thì rất hay dùng thuật ngữ là "thấu chi", người dùng thực sử lại chỉ hiểu nôm na là "cho vay nóng" từ ngân hàng... Các ví dụ như vậy là rất nhiều đặc biệt lại ở thị trường Việt Nam, khi mà các thuật ngữ tiếng Việt rất phong phú. Do đó Card Sorting mới trở nên quan trọng với chúng ta như vậy.

Chúng ta có tất cả 4 phương pháp card sorting là:

Open Card Sort

Open Card Sort là cách tốt nhất để khám phá ra làm cách nào người dùng nhóm các thông tin lại với nhau. Chúng ta sẽ tìm một bảng trắng và 1 tập giấy ghi chú, hay còn được gọi là giấy note, viết các tiêu đề thông tin lên đó. Ví dụ ta viết lên các tờ giấy note toàn bộ các thành phần của 1 website, ví dụ một cái menu danh sách sản phẩm trong 1 website bán hàng trực tuyến. Rồi sau đó mời người dùng thử phân loại chúng theo các nhóm khác nhau và đặt tên cho chúng. Qua việc đó chúng ta sẽ thu đc 2 lợi ích:

• Chúng ta sẽ biết nên điều hướng sản phẩm của chúng ta thế nào. Ví dụ như danh mục sản phẩm hay các menu.
• Qua việc đặt tên, chúng ta sẽ học được cách họ sử dụng các thuật ngữ và cách diễn đạt, theo đó ta sẽ dễ dàng hơn trong việc đặt tên các chức năng và các trang điều hướng của chúng ta.

Closed Card Sort

Với Open Card Sort, người dùng sẽ được tự do nhóm các thông tin lại với nhau và đặt tên cho các nhóm. Phương pháp này sẽ phù hợp nếu như bạn bắt đầu 1 sản phẩm mới và chưa có bất cứ cấu trúc thông tin sẵn có nào. Đôi khi bạn cần phải nâng cấp vào 1 sản phẩm đã tồn tại hoặc là vì yêu cầu kinh doanh, bạn buộc phải xác định một cấu trúc khung thông tin. Đó chính là lúc bạn cần phương pháp closed cart sort tương tự như open cart sort, chỉ khác là người dùng sẽ đặt các thông tin lên 1 cấu trúc sẵn có.

Reversed Card Sort

Reversed Card Sort hay còn gọi là Tree testing là một phương pháp nhằm xác định xem người dùng phải mất bao nhiêu lâu để tìm được thông tin họ cần tìm trong 1 cấu trúc sẵn có, thường là cấu trúc cây. Ví dụ là ta đưa cho người dùng 1 danh mục sản phẩm và mời họ thử tìm xem mất bao nhiêu lâu và bao nhiêu thao tác để tìm được sản phẩm mà họ cần. Qua đó thì ta sẽ hiểu được 2 vấn đề: thứ nhất là sắp xếp thông tin đã hợp lý chưa? Ví dụ: một chiếc dao cạo râu sẽ nên nằm trong danh mục: thiết bị điện tử, hay là thiết bị điện gia dụng hay là phụ kiện thời trang nam giới. Vấn đề thứ 2 ta có thể khám phá là: các từ khoá (wording) sử dụng có hợp lý không? Người dùng có thể sẽ khựng lại ở đâu đó bởi vì sẽ không hiểu các wording, khi đó là lúc ta cần thay đôi lại thông tin.

Ranking Card

Thông thường với mọi dự án phát triển sản phẩm, bạn chỉ có 1 giới hạn tài nguyên con người và thời gian. Do đó, bạn cần 1 phương pháp để sắp xếp những chức năng quan trọng lên trên và ưu tiên phát triển những chức năng đó. Nội dung cũng vậy, người dùng thường chỉ có rất ít giây đồng hồ để scan các nội dung bạn trình bày. Do đó, bạn sẽ cần một phương pháp như ranking card để sắp xếp các nội dung đó theo quan điểm của người dùng. Để thực hiện, bạn phải tạo ra 3 nhóm là: không quan trọng, quan trọng và rất quan trọng. Sau đó thì mời người dùng sắp xếp các chức năng hoặc nội dung vào nhóm phù hợp. Điều quan trọng trong bước này là phải đảm bảo mọi người hiểu được những chức năng hoặc nội dung đó trước khi tiến hành sắp xếp. Các bạn chú ý là nếu như người dùng không hiểu 1 tính năng và hỏi lại bạn, đó chính là lúc bạn cần phải xem lại cách đặt tên chức năng.

Thực hiện 1 buổi card sorting

Có 2 cách để có thể sử dụng kỹ thuật card sorting này. Khi bạn làm trực tiếp, bạn có thể phỏng vấn người dùng ngay lập tức, vì sao họ lại đặt tên như vậy, vì sao họ lại đổi tên 1 chức năng? Vì sao họ lại cho cái này là quan trọng, vì sao họ lại cho là chức năng này không có ý nghĩa thực sự... Nhưng mỗi lần bạn chỉ làm đc từ 15-20 người. Remote thì khác, bạn có thể làm một lần với hàng trăm hoặc hàng nghìn người và thông tin họ trả về sẽ có cơ sở về mặt số liệu hơn.

Bước 1: Lựa chọn phương thức

Bạn hãy chọn 1 trong các phương thức cho phù hợp. Ví dụ bạn đã có 1 cấu trúc thông tin và muốn bổ xung thêm, bạn sẽ chọn closed cart sort. Hoặc nếu bạn muốn xem xét xem mất bao nhiêu lâu để người dùng tìm ra được thông tin trong 1 danh mục sản phẩm, hãy thực hiện kiểu thứ 3: tree testing.

Bước 2: Trực tiếp hay là từ xa

Tiếp theo bạn cần phải lựa chọn cách tương tác với người dùng. Nếu bạn muốn đối thoại nhiều hơn với họ, bạn sẽ chọn cách trực tiếp. Nếu bạn muốn nhìn theo dữ liệu lớn, hãy chọn cách từ xa (remote)

Bước 3: Chuẩn bị buổi test

Nếu bạn thực hiện test cart sort trực tiếp với người dùng, hãy chuẩn bị các tập giấy note, bảng hoặc 1 mặt bàn rộng. Sau đó tuỳ theo loại test bạn sẽ viết tiêu đề của chức năng hoặc nội dung trên đó. Nếu bạn sử dụng phương pháp từ xa, hãy chọn 1 công cụ để làm việc đó. Ví dụ: Userzoom hoặc Optimal Sort.

Bước 4: Mời các ứng viên

Nếu bạn làm trực tiếp hãy mời từ 10-15 ứng viên là đủ. Mời họ đến văn phòng của bạn, nơi bạn đã chuẩn bị trong bước trước để tiến hành test. Bạn hãy khuyến khích họ nói ra quan điểm của họ về các wording, họ muốn đặt lại tên 1 nhóm, hoặc 1 chức năng, hoặc vì sao họ lại sắp xếp như vậy. Nếu bạn làm theo phương pháp từ xa, nên dừng ở 30-40 người dùng. Đó là những số lượng vừa đủ để có hiệu quả trong phương pháp này.

Bước 5: Phân tích kết quả

Khi tiến hành phân tích kết quả thu được của buổi cart sort, hãy cố gắng nhìn vào những patterns (hay còn gọi là mẫu). Ví dụ như một số người sẽ cảm thấy 1 số chức năng là khó hiểu. Một số người khác sẽ cùng nhau tìm ra 1 vài ý tưởng mới.. Qua đó thì bạn sẽ có các điều chỉnh đúng về đặt tên chức năng, sắp xếp các nội dung hay thay đổi mức độ ưu tiên của chúng.

Trong các bài trước trong phần Research, chúng ta đã học về các phương pháp phỏng vấn và quan sát người dùng, hoặc yêu cầu họ sắp xếp các thông tin. Đó là những pháp thuộc về định tính, giúp ta hiểu những vấn đề như: vì sao họ làm thế này, vì sao họ thực hiện thế kia và làm cách nào họ thực hiện điều gì đó. Tuy nhiên ngoài phương pháp định tính, chúng ta sẽ có thêm 1 số các phương pháp định lượng. Các số liệu đo đạc trên sản phẩm sẽ vô cùng hữu ích để giúp chúng ta hiểu làm cách nào mà 1 sản phẩm được thực hiện và giúp chúng ta đo lường được mức độ thành công hoặc thất bại đối với 1 dự án thiết kế UX.

Có 4 ý nghĩa của việc Measure & Analyze:

1. Đo lường quy trình

Khi mà ta đặt ra 1 mục tiêu cho thiết kế UX, chúng ta sẽ cần phải đo lường sự thành công hay thất bại trước khi bắt tay vào đi hết quy trình đó. Chúng ta cần phải biết hiện tại thì sản phẩm có bao nhiêu người dùng, bao nhiêu thời gian họ dùng sản phẩm mỗi ngày và tỉ lệ chuyển đổi là bao nhiêu. Và chúng ta cũng cần đó lường được các con số đó thay đổi thế nào sau 3 tháng, 6 tháng chúng ta thực hiện tối ưu UX. Và đó chính là ý nghĩa đầu tiên của bước Measure & Analyze

2. Tìm vấn đề về UX

Các nghiên cứu định lượng sẽ chỉ cho chúng ta nơi có vấn đề trong sản phẩm, nhưng lại hẫu như không giải đáp câu hỏi: vì sao ở đó có vấn đề? Lúc đó ta sẽ cần các nghiên cứu định tính như interview hoặc observation. Một ví dụ là sau khi kiểm tra Google Analytics thì ta thấy tỉ lệ rời bỏ của người dùng là rất cao, lên tới 80%. Nhưng ta sẽ không thể biết được nó là vấn đề ở đâu, do họ không tìm được nội dung, do sản phẩm giá không cạnh tranh hay là họ bị làm phiền quá nhiều bởi quảng cáo. Lúc đó ta cần interview người dùng để xác định nguyên nhân.

3. Hỗ trợ nghiên cứu định tính

Việc nghiên cứu định tính (interview hay observation) và định lượng (analyse) luôn luôn hỗ trợ cho nhau. Như trước đó ta đã biết với phương pháp định lượng thì ta sẽ tìm được nơi mà có vấn đề và UX, sau đó thì ta cần phương pháp định tính để hiểu vì sao. Ngược lại khi thực hiện test định tính trên người dùng, đặc biệt là các remote test với số lượng lớn ứng viên, hoặc là test trên các hệ thống phức tạp thì rõ ràng là chúng ta cần dùng kết hợp với phương pháp định lượng để đo lường và phân loại kết quả test.

4. Xác minh các giả thiết

Để bắt đầu thiết kế 1 sản phẩm, thông thường chúng ta sẽ bắt đầu bằng các giả thiết đầu tiên. Và sau đó chúng ta cần làm mịn dần bằng các dữ liệu analytic. Chúng sẽ hỗ trợ chúng ta trong việc xác định các giả thiết đó là đúng hay sai. Ví dụ hoàn thiện thông tin trên personas, UCBC hay vẽ lại user journey và hiểu đúng hơn cách họ sử dụng sản phẩm của chúng ta. Và đó chính là đầu vào quan trọng cho các bước tối ưu UX sản phẩm của chúng ta.

Công cụ

Google Analytics

Đây là 1 công cụ nổi tiếng nhất về đo lường và phân tích sản phẩm. 90% các website trên thế giới sử dụng công cụ này. Việc tích hợp trên sản phẩm cũng hết sức dễ dàng, bạn có thể đo lường được rất nhiều thông số như là: visit, page view, các nguồn traffic, thời gian trên site và tỉ lệ rời bỏ… Tuy nhiên Google Analytics do được sử dụng cho 1 mục tiêu quá lớn và phổ biến nên đôi khi không mang hiểu quả nếu ta đi sâu vào các trường hợp cụ thể. Do đó chủ yếu nó được sử dụng trên các website.

Mixpanel

Như đã nói Google Analytics là 1 công cụ page-based do đó không phải lúc nào cũng đủ để đo lường trên 1 dự án UX. Chúng ta có 1 công cụ khác là Mixpanel - là 1 công cụ event-based để giúp chúng ta đo lường các thông tin sâu hơn. Bạn có thể đăng ký Mixpanel miễn phí để dùng thử, tuy nhiên để hiệu quả hơn thì bạn sẽ phải trả 1000$ / 1 năm cho công cụ này. Rõ ràng là đây cũng không phải là một chi phí thấp ở thị trường Việt Nam chúng ta.

Hotjar

Ngoài các công cụ phân tích dữ liệu như lượt truy cập, lượt rời bỏ hoặc là phiễu chuyển đổi mà chúng ta đã biết. Trên thị trường có rất nhiều các công cụ khác sâu hơn, phục vụ cho các mục tiêu khác nhau. Ví dụ hotjar là 1 công cụ giúp đo lường và phân tích về giao diện. Công cụ này sẽ trả về cho chúng ta 1 biểu đồ được gọi là heatmaps và scroll maps, sẽ thể hiện những điểm trên màn hình mà người dùng sẽ click nhiều hơn, hoặc là bao nhiêu phần trăm người dùng sẽ cuộn màn hình để nhìn thấy các thành phần giao diện bị khuất. Theo đó thì ta sẽ trả lời được rất nhiều vấn đề, đặc biệt là về giao diện như là: Chỗ nào sẽ là quan trọng với người dùng và khiến họ chú ý hoặc click, hoặc là chỗ nào sẽ là chỗ mà họ rời bỏ sản phẩm..

Fullstory

Fullstory là 1 công cụ lưu lại toàn bộ tương tác của khách hàng trên sản phẩm của chúng ta như 1 video. Điều này sẽ mang lại cho chúng ta những câu trả lời như là: 1 user journey trong thực tế sẽ như thế nào, họ sẽ dành bao nhiêu thời gian và hành vi của họ như thế nào? Người dùng mới thì sẽ sử dụng ra sao, người dùng trở lại thì khác gì? Về bản chất thì đây giống như một dạng khác của remote observation, tuy nhiên bạn không thể giao tiếp với người dùng. Fullstory có thể đăng ký bản miễn phí đẻ dùng thử và bạn phải trả gần 200$ một tháng cho bản Professional.

Crazy Egg

Ngoài ra thì các bạn có thể chọn dùng công cụ Crazy Egg. Đây là một bộ công cụ tổng hợp khá nhiều các công cụ thống kê và đo lường trên sản phẩm, như A/B Test, Headmap & Scroll map vàn Video recorder. Đặc biệt là các bạn có thể sử dụng thử miễn phí lên tới 30 ngày, đủ thời gian để chúng ta học và khám phá về các kiểu analyze mà tôi vừa đề cập trước đó. Giá của Crazy Egg khá rẻ, rơi vào từ 30 đến 80$.

Bảng tổng hợp

Để có được 1 cách nhìn toàn cảnh về các công cụ dành cho UX trên thị thường, thì bạn có thể sử dụng website https://uxtools.co/tools. Bạn sẽ nhìn thấy 1 bảng có nhiều tab sắp xếp theo nhiều tiêu chí khác nhau. Phong phần analyze thì bạn chọn tab Mornitoring để xem. Bạn có thể thấy Hotjar và Fullstory mà tôi đã giới thiệu nằm đầu bảng về độ phổ biến. Bạn cũng có thể dựa theo tiêu chí của dự án của mình để chọn lấy 1 công cụ khác cho phù hợp.

Trong bài trước chúng ta đã học về cách cài đặt các công cụ đo lường và phân tích kết quả đo lường nhằm tìm ra những vấn đề về trải nghiệm trên sản phẩm và xác minh các giả thuyết. Các công cụ này tất cả đều chạy ngầm trên sản phẩm, người dùng không hề biết đến sự tồn tại của nó. Cùng với interview, observation thì các công cụ này đều hết sức hữu ích cho các mục tiêu của chúng ta. Nhưng ngoài ra chúng ta cũng không thể bỏ quên một phương pháp khám phá người dùng quan trọng bậc nhất trong thiết kế UX, đó là UX Survey. Và đó chính là nội dung của bài học ngày hôm nay.

UX Survey là một phương pháp lấy thông tin feedback từ người dùng một cách dễ dàng, bằng cách đặt các câu hỏi, gửi đến họ qua email, mạng xã hội hay trên sản phẩm. Nó nhanh, dễ dàng và có thể tiếp cận với số lượng lớn người dùng mục tiêu hơn bất cứ công cụ nào. Tuy nhiên nó có 1 số các hạn chế cực lớn. 


• Bạn ko thể đo hay quan sát được thái độ, tương tác, cảm xúc và các phản ứng bản năng của người dùng. Để quan sát được bạn phải sử dụng interview hay là observation.
• Người dùng sẵn sàng bỏ thời gian để nói trực tiếp với bạn vấn đề, thói quen hay mong muốn của họ. Nhưng ko có sẵn sàng gõ hàng trăm chữ để giúp bạn. Nói cách khác thông tin mà bạn thu được thường hạn chế ở những câu trả lời ngắn, hoặc là các lựa chọn vấn đáp.

Trong thực tế thì bạn nên sử dụng kết hợp nhiều phương pháp để có kết quả tốt nhất. Ví dụ sau khi interview khách hàng, bạn sẽ có 1 vài giả thuyết, nhưng điều đó chưa chắc đã đúng vì chỉ có hơn 10 người đồng ý như vậy. Lúc đó bạn có thể thực hiện 1 survey với hàng nghìn người để xác minh giả thuyết đã có sau buổi interview.

Sau đây là từng bước thực hiện 1 buổi UX Survey

Bước 1: Quyết định những gì mà bạn muốn tìm hiểu.

Có thể là bạn hãy chọn 1 vài giả thiết từ buổi interview hay observation, hoặc 1 điểm nào đó cần xác minh trong khi bạn thực hiện phân tích dữ liệu đo đạc.

Bước 2: Tập trung

Đừng tạo ra hàng trăm câu hỏi cho 1 bản survey, sẽ chẳng có ai chịu trả lời bạn. Chỉ tập trung vào những gì quan trọng nhất và có giá trị nhất. Nếu bạn có nhiều câu hỏi hơn thì bạn phải tìm các kỹ thuật khác nhau để người dùng chịu trả lời bạn. Một ví dụ mà rất nhiều các website lớn như Facebook hay Linkedin đã áp dụng để thực hiện 1 survey lớn là như sau. Họ tách bảng câu hỏi ra nhiều phần với từ 1 đến 3 câu. Sau đó thì mỗi khi người dùng truy cập họ lại thực hiện hỏi 1 phần. Cuối cùng thì họ ghép lại thành 1 bảng hoàn chỉnh mà không khiến người dùng khó chịu.

Bước 3: Gửi cho ứng viên

Bạn có thể sử dụng các công cụ như Google Form, Survey Monkey hoặc LimeSurvey để tạo ra 1 đường link survey và gửi nó cho các ứng viên. Bạn có thể sử dụng email, mạng xã hội hoặc các diễn đàn. Đôi khi sẽ là tốt hơn cả, bạn có thể gửi trực tiếp các khách hàng thông qua phòng Customer Support. Trên Facebook hiện nay cũng có công cụ để tạo 1 survey rất tốt, bạn có thể tìm các nhóm Facebook với người dùng phù hợp và thực hiện survey trên đó.

Bước 4: Phân tích dữ liệu

Sau khi có kết quả survey thì bạn sẽ đi đến bước cuối cùng là phân tích kết quả trả về và quyết định các hành động tiếp theo. Ví dụ như kết quả trả về là bạn có 1 số vấn đề về UX trên 1 chức năng, bạn có thể thực hiện 1 số các nâng cấp UX sau đó thực hiện lại bản survey để kiếm chứng kết quả. Một số survey với câu hỏi mở có thể lộ ra những người tâm huyết với sản phẩm của bạn. Bạn có thể lưu lại thông tin của họ như 1 ứng viên tiềm năng và có thể thực hiện interview trực tiếp nhằm có nhiều thông tin hữu ích hơn.

Các công cụ sử dụng cho survey

Google Form

Chắc hẳn là bạn đã biết về sản phẩm này, đó là một công cụ dễ sử dụng, miễn phí và mạnh mẽ. Bạn có thể tạo ra 1 bản survey và nhận về 1 đường link chia sẻ, gửi đường link này đến các ứng viên của bạn là xong. Tuy nhiên Google Form có những hạn chế của nó. Thứ nhất là nó khá đơn giản và đôi khi sẽ không đủ đáp ứng cho dự án. Thêm nữa, toàn bộ câu hỏi sẽ hiển thị trên 1 trang dài và đôi khi sẽ khiến khách hàng chán và không bỏ đi.

Typeform

Để khắc phục vấn đề của Google Form bạn có thể sử dụng Typeform. Đặc điểm của sản phẩm này chính là được đầu tư mạnh vào UX cho sản phẩm, mỗi câu hỏi sẽ chiếm 1 trang và có nhiều hiệu ứng thú vị. Thêm nữa Typeform hỗ trợ hiển thị trên mobile tốt hơn nhiều với Google Form. Giá của Typeform là 30$ một tháng cho bản PRO, bạn có thể đăng ký dùng miễn phí với giới hạn 100 trả lời 1 tháng.

SurveyMonkey

Một công cụ mà không thể không nhắc tới chính là SurveyMonkey - một hệ thống survey phức tạp và bài bản. SurveyMonkey có nhiều template sẵn có, hộ trợ làm việc nhóm và thậm chí bạn có thể chèn cả video trong 1 survey. Điểm yểu của SurveyMonkey là giá license từ 35$ một tháng cho 1000 trả lời và hệ thống quản lý tương đối phức tạp.

LimeSurvey

Nếu bạn không muốn trả tiền hoặc lưu kết quả của mình trên các hệ thống online, bạn có thể cài đặt một hệ thống survey opensource như là LimeSurvey để sử dụng miễn phí. LimeSurvey được viết bằng PHP/MySQL khá dễ để cài đặt và bắt đầu sử dụng. Đôi khi bạn muốn thay đổi cho phù hợp với yêu cầu của dự án thì bạn có thể thay đổi mã nguồn của sản phẩm. Tuy nhiên, nó đòi hỏi những kỳ năng khác ngoài UX và chúng ta sẽ không bàn trong khoá học này.

Bước đầu tiên mà chúng ta sẽ học trong bài hôm nay là Explorer hay còn được gọi là LO-FI, viết tắt của từ low fidelity (độ trung thực thấp). Ở bước này đầu ra của chúng ta sẽ là các bản vẽ tay trên giấy. Tại bước này chúng ta sẽ thực hiện vẽ digital wireframe, tức là sử dụng các phần mềm vẽ wireframe chuyên nghiệp để dựng ra 1 bản wireframe chi tiết và tiến hành test trên người dùng. Mỗi bước này chúng ta có kỹ thuật và đối tượng khác nhau để tập trung vào. Chúng ta sẽ lần lượt đi chi tiết trong cách bài sau.

Ý nghĩa

• Vẽ wireframe rất quan trọng với dự án thiết kế UX của chúng ta, ví dụ như 1 số các ý nghĩa tôi sẽ liệt kê dưới đây
  Tập trung vào cấu trúc thông tin của các trang màn hình. Bạn sẽ bỏ qua tất cả những yếu tố làm nhiễu như là hình ảnh, màu sắc mà chỉ tập trung vào việc các thông tin được bố trí như thế nào.
• Thiết kế layout, tức là đặt các thành phần giao diện và thông tin lên trên 1 màn hình sản phẩm.
• Nhanh chóng phác thảo được flow (hay còn gọi là luồng) sử dụng của sản phẩm và có thể tổ chức thảo luận để tìm ra phương án tốt nhất. Trong bài trước tôi đã nói về sự quan trọng số 1 của flow trong sản phẩm phần mềm, và biết rằng chỉ cần giảm đi 1 trang màn hình sẽ có ý nghĩa thế nào với người dùng. Nhưng chúng ta cũng biết rằng chỉ cần giảm đi 1 màn hình thì cấu trúc thông tin và layout sẽ khác hẳn. Wireframe sẽ sớm chốt được phần flow này và giảm bớt sự thay đổi trong tương lai.

Ai sẽ vẽ wireframe?

Nếu các bạn chú ý thì cả 2 bước trước chúng ta đều đưa ra các công cụ mà tất cả mọi người đều có thể làm được. Không cứ bạn là UX Designer, Visual Designer thì bạn mới có thể vẽ personas, tạo USBC… vân vân. Và ở bước vẽ wireframe, thì chúng ta cũng tiếp cận tương tự, tất cả mọi người đều có thể vẽ 1 wireframe trên giấy và không cần bất cứ kỹ năng hay phần mềm nào. Lý do là tất cả mọi người đều có những ý tưởng và hình dung riêng về sản phẩm sẽ được thiết kế, từ product owner, marketing hay developer.. tất cả ý kiến của họ đều hết sức quan trọng. Bạn nên tổ chức các buổi workshop với giấy và bút, sau đó yêu cầu mọi người vẽ wireframe theo quan điểm của mình, rồi ghép lại thành 1 bản. Cuối buổi workshop, điều quan trọng là tất cả mọi người đều có 1 hình dung thông suốt đầu tiên về sản phẩm.

LO-FI & HI-FI

Trước khi mà bạn bắt tay vào vẽ digital wireframe thì các tốt nhất là thực hiện trên giấy hoặc bảng trắng. Bước này còn được gọi là LO-FI. Vì sao lại mất công vậy? Vì mục tiêu của bước này chính là tập trung vào mức độ high-level wireframe. Chúng ta sẽ phác thảo 1 vài phương án về layout, bố trí các khối thông tin và các flow chính của sản phẩm. Sau đó chúng ta tiến thành thảo luận hoặc là test, để cuối cùng sẽ chốt lấy 1 phương án tốt nhất. Và quan trọng thì vẽ tay trên giấy chúng ta có thể thực hiện rất nhanh, ai cũng có thể vẽ và dễ dàng thay đổi hoặc là vẽ lại 1 bản khác.

Sau khi chốt được phương án wireframe trên giấy, đây chính là lúc bạn chuyển sang bước vẽ digital wireframe hay còn gọi là HI-FI. Đây là bước chúng ta tập trung vào bản wireframe cuối cùng, chi tiết vào các thành phần giao diện, flow và wording. Tại bước này chúng ta vẫn dùng đen trắng, ko dùng bất cứ màu sắc hay hình ảnh nào, nhưng tất cả mọi thứ đã thành hình. Thông thường thì tại bước này, chỉ UX Designer hoặc Visual Designer mới có thể thực hiện được vì nó đòi hỏi một số các hiểu biết và kỹ năng cần thiết về thiết kế. Nhưng đây sẽ là nội dung của chương tiếp theo nên ta sẽ không đi quá sâu.

Các bước thực hiện 

Bước 1: Tập hợp tài liệu

Chúng ta sẽ tìm lại các tài liệu mà đã xây dựng ở bước trước bao gồm: Design Brief, user stories, Storyboard và task flow.vv.v. Sau đó đặt các câu hỏi như: Những thành phần nào sẽ cần hiển thị trên màn hình này, các chức năng nào cần phải thể hiện, nội dung nào ta phải design, ví dụ text, hình ảnh hay video. Và cuối cùng là: nó có phù hợp với flow của chúng ta hay không.

Bước 2: Phác thảo các thành phần riêng biệt

Một trang màn hình của chúng ta sẽ được tạo bởi 2 thứ, đó là các thành phần giao diện riêng biệt như là các form, các cụm chức năng..v.v. và layout là cách thể hiện các thành phần đó trên 1 trang như thế nào. Tại bước thứ 2 này, chúng ta sẽ không quan tâm đến layout mà tập trung vào phác thảo từng thành phần riêng biệt.

Nó có 2 lý do: thứ nhất là bằng cách này, bạn có thể tập trung để giải quyết 1 vấn đề trên 1 trang. Sau đó thì bạn có thể dựng layout bằng cách ghép các mảnh ghép này vào mà không cần phải nghĩ lại cách nó thể hiện nữa. Còn nếu không, mỗi lần thay đổi layout khả năng cao là bạn lại nghĩ lại việc thể hiện cách mà thành phần này cho phù hợp với layout mới, và như thế sẽ tiêu tốn thời gian của bạn. Lý do thứ 2 là: rất nhiều bạn dựng layout xong mà ko đi sâu vào chi tiết từng thành phần, với mặc định là người khác cũng sẽ hiểu giống như bạn. Và đây chính là nguyên nhân của rất rất nhiều những sai lầm về UX trên sản phẩm.

Bước 3: Dựng layout

Sau khi đã có các thành phần riêng biệt thì tại bước này ta sẽ quên nó đi và chỉ tập trung vào nội dung và cấu trúc logic giữa các thành phần. Bạn hãy vẽ layout từ các khối nội dung trước, ví dụ header, menu, sidebar và content.. sau đó mới đi vào chi tiết. Điều thứ 2 là hãy nhớ đến các thiết kế mẫu (pattern), nó sẽ khiến cho bạn thực hiện nhanh hơn. Điều thứ 3 bạn cần nhớ là nên tạo ra từ 2 đến 3 layout để chọn, trước khi đi đến bước chi tiết. Theo kinh nghiệm của những người đi trước, phác thảo đầu tiên sẽ không phải là sản phẩm cuối. Và điều cuối cùng bạn hãy lưu ý là là đôi khi chúng ta phải đảo 2 bước 2 và 3 với nhau. Ví dụ như bạn thiết kế 1 website landing page, bạn sẽ bắt đầu bằng layout để hình dung về câu chuyện mà website này sẽ kể. Sau đó mới chi tiết vào từng thành phần.

Bước 4: Ghép chúng lại với nhau

Bước 4 của chúng ta ghép các thành phần riêng biệt tại bước 2 vào layout ở bước 3 để có 1 wireframe hoàn chỉnh. Khi đã có tất cả từ bước trước, tại bước này, chúng ta sẽ rất nhanh chóng có được kết quả cuối cùng. Và như vậy là chúng ta đã hoàn tất 1 quy trình để vẽ wireframe trên giấy cho 1 trang màn hình.

Trong việc vẽ wire LO-FI này, có 1 vài điểm bạn cần phải chú ý. Đó là phải luôn tự hỏi và trả lời các câu hỏi sau:

• Đây là màn hình gì? Nói cách khác là tôi đang ở đâu? Mục đích của màn hình này là gì?
• Tôi có thể làm gì ở đây? Tức là giải đáp câu hỏi về chức năng nào tôi có thể thực hiện trên đây?
• Làm thế nào tôi có thể đi tiếp? Câu hỏi này tập trung vào câu chuyện điều hướng của sản phẩm. Bước tiếp theo tôi nên làm gì? Hay tôi sẽ tắt ứng dụng đi?

Nếu như cả 3 câu hỏi của bạn đều có thể trả lời rõ ràng thì xin chúc mừng, phác hoạ này của bạn đã thành công.

Test 5 giây

Một cách khác để bạn đảm báo các màn hình của bạn luôn đảm bảo trả lời được các câu hỏi trước đó là áp dụng test 5 giây. Cách làm rất đơn giản, sau khi phác thảo xong các trang màn hình, bạn hãy tìm một vài người dùng và đưa cho họ. Với mỗi màn hình, sau 5 giây quan sát, bạn hãy yêu cầu họ trả lời các câu hỏi như là:

• Đây là màn hình gì?
• Bạn có biết sẽ làm gì ở đây không?
• Hãy nói với tôi làm sao bạn có thể đi tiếp?
• Sau đây là 1 số chú ý mà bạn cần nhớ để có thể tạo một LO-FI wireframe tốt.
• Hãy tạo ra 1 danh sách tham chiếu các thành phần riêng biệt, lưu nó ở 1 vài tờ A4 hoặc ở góc bảng. trong nhiều trường hợp thì các thành phần này sẽ được dùng đi dùng lại ở các trang.
• Trên 1 trang A4, bạn hãy vẽ từ 4-5 màn hình thay vì 1 màn hình trên 1 trang. Điều này sẽ giúp bạn có 1 cái nhìn toàn cảnh.
• Nếu bạn thiết kế cho mobile hãy vẽ lên các tờ giấy có in khung sẵn. Nó giúp bạn tập trung và định hướng tốt hơn.
• Hãy đánh số và đặt tên cho các màn hình và mang chúng đi suốt các bước tiếp theo. Một ứng dụng sẽ dễ dàng lên tới hàng trăm màn hình và nếu bạn không quản lý tốt, bạn sẽ dễ dàng mắc sai lầm.
• Hãy viết đẹp và rõ ràng. Nhiều người thích viết nghệch ngoạc và viết tắt. Và sau một thời gian team của bạn nhìn lại, mọi người sẽ không thể đọc được nội dung hoặc sẽ hiểu lầm. Vì thế hãy chú ý là chữ không cần đẹp như chữ in, nhưng phải đảm bảo nó đọc được.

Test trên thiết bị

Vẽ tay là một cách nhanh nhất để bạn có thể phác thảo 1 wireframe và thay đổi nó sau các thảo luận và test. Nhưng có một điểm yếu của phương pháp này chính là việc bạn sẽ không thể nào tương tác trên các thiết bị như là mobile hay laptop được. Và nó sẽ khiến bạn mất đi 1 số những cảm nhận về tính logic hoặc luồng màn hình. Tuy nhiên, bạn vẫn có thể thực hiện được điều, bằng cách sử dụng phương pháp sau:

Đầu tiên bạn vẫn vẽ LO-FI wireframe bình thường và thay đổi cho đến khi có được 1 bản tương đối tốt. Bạn sử dụng máy ảnh hoặc điện thoại để chụp các trang màn hình sau đó đưa vào máy tính. Có thể bạn sẽ cần sử dụng photoshop để căn lại cho khít các mép ảnh của thiết kế. Sau đó bạn upload lên các phần mềm như MavelApp, Invision.. và thêm các điểm hotspots (tức là các điểm click để chuyển trang). Từ lúc này bạn đã có thể trải nghiệm sản phẩm của mình ngay trên thiết bị.

Như vậy là trong bài này chúng ta đã kết thúc bước Explorer trong quy trình 7 bước thiết kế UX. Đầu ra của bước này là bản vẽ wireframe trên giấy hay còn gọi là LO-FI wireframe. Cả chương này chúng ta chỉ có 1 bài duy nhất và cũng là 1 bài tương đối dài cùng với nhiều những kỹ thuật và chia sẻ kinh nghiệm.

Bài tiếp theo ta sẽ tìm hiểu về bước DEFINE, bước tạo ra digital wireframe, hay còn gọi là HI-FI Wireframe. Mục đích là chuyển các phác thảo từ vẽ tay lên số hoá bằng phần mềm và tập trung vào chi tiết các nội dung trên wireframe.

Mục tiêu của bước HIFI Wireframe (hay còn gọi là digital wireframe) là tập trung vào 2 mục tiêu:

Thứ nhất là chi tiết hoá wireframe. Một ví dụ là thế này, một ứng dụng mobile thường sẽ có hàng trăm màn hình, và thông thường chúng ta không vẽ toàn bộ các màn hình trên giấy và không quá chi tiết được trên mỗi màn hình. Một phần là do nhiều màn hình na ná giống nhau và lặp đi lặp lại, ta sẽ lười không vẽ. Thêm nữa là cầm trên tay 1 xấp giấy, thường tương đối khó để quản lý. Chưa kể là các text trên wireframe rất có thể bị thay đổi, chúng ta ko thể tẩy xoá trên đó mãi được. Khi bạn sử dụng một phần mềm để vẽ wireframe, những vấn đề này không còn khó khăn nữa. Các phần mềm giúp chúng ta sắp xếp và quản lý các màn hình tương đối tốt, cung cấp cho chúng ta những công cụ để cập nhật các thành phần giao diện dễ dàng.

Thứ hai là trong bước này ta sẽ tập trung vào 1 phần tối quan trọng trong thiết kế UX đó là wording. Ví dụ như tên menu, tiêu đề, tên các nút..v..v mà trên LO-FI wireframe chúng ta chưa hề để ý đến.

Câu hỏi ở đây là? Cùng là để vẽ wireframe, tôi có thể qua bước explorer mà bắt tay ngay vào việc dựng digital wireframe bằng phần mềm được không? Tôi nghĩ là được, rất nhiều các team UX ở Việt Nam không đủ nguồn lực để làm cẩn thận từng bước trong quy trình của chúng ta. Tuy nhiên có vài điểm mà tôi muốn nếu ra để các bạn để ý:

1. Vẽ wireframe cần rất nhiều bước thảo luận và test, bạn sẽ phải vẽ lại wireframe nhiều lần. Digital wireframe tương đối chi tiết nên sẽ mất nhiều công khi bạn thay đổi.
2. Digital wireframe đòi hỏi sử dụng phần mềm, có nghĩa là product owner, developer và team marketing sẽ thường không thể tham gia vào.
3. Chúng ta mất tập trung và từng bước. Tại bước explorer thì ta tập trung vào các thành phần giao diện và layout. Bước define chúng ta lại tập trung vào chi tiết đến từng wording. Nếu bạn bỏ qua một bước thì rất có khả năng bạn sẽ làm ẩu ở một khâu nào đó.

Từng bước thực hiện

Bước 1: Chọn công cụ

Bước đầu tiên chúng ta cần làm là chọn 1 công cụ để tạo digital wireframe. Bạn có thể chọn 1 ứng dụng quen dùng như Sketch, UXPin.. để bắt đầu. Chúng ta sẽ đi sâu vào 1 vài công cụ vào cuối bài này.

Bước 2: Chuẩn bị tài liệu

Bước thứ 2 là chuẩn bị các tài liệu cần thiết. Lẽ dĩ nhiên bạn sẽ có bản LO-FI Wireframe được vẽ trên giấy là cơ sở. Bạn cũng nên mang theo những tài liệu không thể thiếu như: Design brief, User Personas, UCBC, User Stories, Story boarding và Task flow. Nếu bạn có một sitemap để làm khung cho digital wireframe, mỗi một điểm trên sitemap, ta có 1 màn hình wireframe thì thật sự là hoàn hảo. Điều quan trọng là đảm bảo bạn sẽ không bỏ qua bất cứ tài liệu hữu ích nào mà bạn đã thực hiện trong bước trước.

Bước 3: Xây dựng wireframe

Bạn có thể bắt đầu bằng 1 trang trắng tinh hoặc sử dụng các template sẵn có. Hầu hết các phần mềm vẽ wireframe đều có nhiều những template để bạn lựa chọn. Nó sẽ giúp bạn tiết kiệm được thời gian bằng các cung cấp những thành phần dữ liệu phổ biến như là form, button các textbox hay checkbox…v.v. Tuy nhiên theo kinh nghiệm đi trước thì chúng ta nên tránh việc phụ thuộc hoàn toàn và template dựng sẵn của công cụ. Bạn nên đặt tâm trí của mình vào sản phẩm thay vì bó hẹp mình vào những gì đã được dựng sẵn và chỉ chỉnh sửa nó cho phù hợp. Một kinh nghiệm nữa là hãy bắt đầu từ màn hình phức tạp nhất. Ví dụ màn hình trang chủ hoặc màn hình dashboard.. nơi mà sẽ có rất nhiều các thành phần giao diện cần làm. Sau đó, bạn đến với các màn hình khác, sẽ có rất nhiều những thành phần đã được thiết kế có thể copy để sử dụng lại.

Bạn cũng nên thiết kế từ các khối lớn, ví dụ header, sidebar, content.. rồi dần dần đi chi tiết vào các thành phần nhỏ hơn. Điều này giống như bạn vẽ một bức tranh chân dung, đầu tiên chúng ta sẽ phác thảo các đường nét chính, rồi sau đó mới đến bước vẽ chi tiết các bộ phận.

Một vài chú ý

1. Không dùng bất cứ màu sắc nào. Hãy giữ mọi thứ ở dạng đen trắng. Điều quan trọng ở bước này là chúng ta tập trung vào cấu trúc thông tin và sắp xếp logic giữa các thành phần giao diện và khoảng cách giữa chúng.
2. Hãy sử tận dụng sức mạnh của icon. Thông thường thì người dùng không đọc mà họ sẽ scan thông tin trên 1 sản phẩm. Icon luôn luôn có 1 sức mạnh giúp hút chú ý của người dùng, so với văn bản đơn thuần.
3. Nếu bạn thiết kế cho mobile, hãy test trên mobile. Điều này nghe có vẻ đơn giản nhưng lại rất quan trọng, thiết bị mobile có màn hình rất hạn chế nên bạn phải thường xuyên kiểm tra để đảm bảo chữ không bị bé quá, các thành phần không bị khó thao tác khi cầm trên tay. Bạn cũng nên test thử trên một thiết bị kiểu cũ như iphone 5 và 1 thiết bị màn hình to như Galaxy Note.

Microcopy chính là một vũ khí bí mật của mọi dự án thiết kế UX. Vì sao nó lại bí mật, vì thật là lạ lùng, trong hầu hết các sản phẩm, nó đều bị coi nhẹ. Nhưng trong thực tế sử dụng, đó chính là ngôn ngữ bạn giao tiếp thường xuyên với người dùng. Bạn sẽ nghĩ sao nếu phải nói chuyện với 1 người cộc cằn, nói năng nhát gừng bỗ bã. Lẽ dĩ nhiên bạn sẽ không cảm thấy vui vẻ gì lắm.

Microcopy là gì?

Một số ví dụ tiêu biểu về Micro-copy có thể kể đến như sau 

• Các tiêu đề và placeholder trong các ô nhập liệu trên 1 form. Thông thường thì chúng ta coi nhẹ phần placeholder bằng cách bỏ trống hoặc là thậm chí lấy trùng với tiêu đề.
• Thông báo lỗi, thông báo thành công sau khi người dùng thực hiện 1 tác vụ gì đó. Ví dụ như: Vui lòng nhập đầy đủ thông tin về tên bạn
• Những đoạn văn bản hướng dẫn người dùng sử dụng 1 tác vụ hoặc điều hướng trong sản phẩm. Một ví dụ phổ biến là các tooltip để giải thích về 1 control hoặc nội dung nào đó.
• Những đoạn văn bản điều hướng như là menu, link hoặc danh sách sản phẩm
• Nội dung của các nút bấm trên form. Thông thường nút bấm sẽ là nơi mà người dùng sẽ click chuột nên nội dung trên đó rất quan trọng để điều hướng người dùng.

Vấn đề nhỏ nhặt?

Hầu hết các UX Designer thì cho rằng microcopy là vấn đề nhỏ nhặt và có tâm lý là ai cũng biết nên điền gì cho phù hợp. Ví dụ họ sẽ nghĩ nửa phút cho 1 tiêu đề của một button và lạm dụng Lorem ipsum. Người làm marketing thì chỉ tập trung vào những gì mà họ cho rằng sẽ hiệu quả hơn với người dùng. Thêm nữa họ cũng không thể thống kê được có bao nhiêu trường hợp microcopy xảy ra, hoặc thậm chí không hề biết rằng nó tồn tại. Và cuối cùng trong hầu hết mọi người hợp, developer lại là người tự phải điền các microcopy này và đương nhiên đó không phải việc của họ. Thế là các vấn đề sai lầm liên tục xảy ra, như là sai chính tả, ngôn ngữ không thân thiện chỉ đủ để đáp ứng chức năng kỹ thuật..v.v. Và đây sẽ là sai lầm của UX Designer. Chính UX Designer phải là người viết các microcopy.

Vì sao microcopy quan trọng?

1. Nó cung cấp thông tin trực tiếp và hữu ích: Ví dụ như người dùng đang điền thông tin CVV của thẻ tín dụng và gặp khó khăn, microcopy phải đóng vai tròng hướng dẫn người dùng.
2. Nội dung cộc lốc và thiếu thông tin sẽ khiến người dùng bị khó hiểu và sẵn sàng từ bỏ sản phẩm của bạn.
3. Microcopy có ảnh hưởng lớn đến toàn bộ trải nghiệm của sản phẩm. Tối ưu microcopy sẽ giúp tăng hiệu quả kinh doanh.
4. Microcopy sẽ góp phần quan trọng vào việc tăng tính tin cậy giữa sản phẩm và người dùng. Tính tin cậy như tôi đã nói trong 1 bài trước đó là rất khó để xây dựng. Microcopy chính là 1 vũ khí để bạn thực hiện điều đó.

Xây dựng microcopy

Thời điểm tốt nhất để xây dựng microcopy chính là bước Define, tức là trong quá trình xây dựng digital wireframe. Hãy duy trì một bản, có thể làm bằng Excel để đảm bảo mỗi màn hình trên digital wireframe đều có đầy đủ các trường hợp về microcopy xảy ra. Ví dụ các thông báo lỗi có thể không được vẽ nhưng nội dung thông báo lỗi thì phải được xây dựng.

Một vài chú ý khi bạn xây dựng microcopy như sau:

• Hãy xây dựng microcopy đơn giản, rõ ràng, thân thiện và đúng chính tả. Bạn sẽ không có thời gian để review lại bước này trong tương lai vì thật khó để tái hiện tất cả các thông báo lỗi trên màn hình.
• Nếu là các thông báo lỗi, hãy cung cấp thông tin bao gồm: Vấn đề và giải pháp để giúp họ điều hướng.
• Cũng nếu là các thông báo lỗi, hãy chú ý đến vị trí của các thông báo.
• Bạn hãy thường xuyên cập nhật bảng microcopy bằng cách kiểm tra những trường hợp gặp lỗi của người dùng và phân tích xem, có phải vấn đề nằm ở microcopy không.

Hôm nay chúng ta sẽ học cách sử dụng Design Pattern - tức là các mẫu thiết kế. Đây là một cách rất quan trọng nhằm tiết kiệm công sức sáng tạo và giúp người dùng dễ tiếp cận sản phẩm của chúng ta hơn. Nếu ai đó hỏi người dùng? Logo của website thường nằm ở đâu, mọi người sẽ trả lời ngay, nó nằm bên trái trên màn hình. Còn link login thì sao? Mọi người sẽ biết là nó nằm ở góc phải trên không khó khăn gì. Hoặc là trên 1 phần mềm cho mobile, nếu 1 tab bị che khuất ở góc phải thì mọi người đều hiểu là có thể slide ngang để tìm đến những phần bị che khuất. Những cái đó được gọi là design pattern. Bởi bị 90% những website hoặc ứng dụng mobile người dùng được tiếp xúc đều được bố trí như vậy. Cách thiết kế này sẽ tiết kiệm cho chúng ta lẫn người dùng rất nhiều thời gian.

Tuy nhiên hãy cẩn thận

Tuy là design pattern rất hữu ích vì nó tiết kiệm việc phát minh lại những cái bánh xe, nhưng thực tế là một UX Designer thì bạn cần rất thận trọng với design pattern. Bạn chỉ nên sử dụng design pattern với những gì mà người dùng quen thuộc. Thêm nữa dù rằng 1 design pattern được rất nhiều sản phẩm sử dụng, nó vẫn có thể không khả thi hoặc lỗi thời rất nhanh.

Một ví dụ bạn có thể thấy trên hình là là icon share trên Android và iOs khác nhau. Mặc dầu những icon này rất quen thuộc với người dùng đến độ không cần phải có label bên cạnh, họ vẫn có thể hiểu được. Bạn sẽ cần để ý đến những yếu tố này khi áp dụng design pattern của Android cho iOs và ngược lại. Nếu không người dùng trên hệ điều này sẽ không hiểu đc design pattern được áp dụng trên hệ điều hành kia.

Một ví dụ khác rất rõ nét là hiện nay tuy rằng 90% các ứng dụng trên mobile vẫn sử dụng hamburger menu (hay còn gọi là menu trái), nhưng kiểu thiết kế này đã không còn hợp lý nữa và bị thay thế trên hầu hết các ứng dụng lớn như: Youtube, Facebook hay Instagram.. Nếu bạn vẫn áp dụng design pattern này vì có quá nhiều thiết kế vẫn đang như vậy, thì bạn đã bị lỗi thời.

Tôi đến với 1 ví dụ khác cũng rất thú vị. Đó là nút back ở góc trái trên màn hình của các ứng dụng mobile đã trở nên không còn hợp lý nữa, dù nó xuất hiện trên 90% các ứng dụng ngày nay. Kiểu design pattern này sẽ hợp lý với màn hình iphone 4 hoặc 5 với kích thước màn hình nhỏ. Nhưng nó không thể dễ sử dụng với màn hình iphone 6 hoặc iphone plus. Điều tương tự cũng xẩy ra với các thiết bị Android kích thước lớn. Chắc chắn bạn phải sử dụng 2 tay để tương tác với các phần mềm này. Vấn đề quan trọng là không ai bỏ iPhone vì điều trên, vì hầu như họ không được lựa chọn, hoặc họ cũng không nhận thức được những gì họ cần. Tuy nhiên với vai trò là 1 UX Designer, bạn cần hiểu rõ vấn đề này để thiết kế sản phẩm của mình tốt hơn.

Làm sao để tìm 1 design pattern?

1. Tìm trên các website hoặc ứng dụng mà người dùng mục tiêu của bạn sử dụng hàng ngày. Một ví dụ là nếu bạn biết là người dùng mục tiêu của bạn thường xuyên sử dụng Facebook, bạn có thể chắc một điều là họ biết dùng Facebook như thế nào. Và ứng dụng Facebook sẽ là 1 design pattern cho bạn học theo.

2. Bạn có thể học theo hoặc tham khảo sản phẩm của đối thủ. Một số ứng dụng của đối thủ đã rời đời trước bạn, đã có 1 tập khách hàng. Dựa vào đó để bạn học được điều gì nên làm và không nên làm.

3. Tìm đến các website về design pattern như là

• CallToIdea
• UI-pattern
• pttrns.com

Đây là những thư viện được chọn lọc về những design pattern, sắp xếp theo các nhóm mà bạn có thể học hỏi.

Bạn cũng có thể tìm design pattern trên những website về ngôn ngữ design, hoặc những bộ mẫu thư viện dựng sẵn. Ví dụ Google Material Design cung cấp cho bạn rất nhiều những pattern có thể sử dụng được ngay. Bạn có thể tải về để áp dụng nhưng hãy chú ý là chúng ta đang ở bước vẽ digital wireframe. Hãy tránh xa những sự cuốn hút của màu sắc và hình ảnh. Bạn chỉ nên học hỏi các pattern về mặt ý tưởng hay các khái niệm thôi.

Bạn có thể mở website prototypingtools.co để xem một bảng danh sách những tool dùng để vẽ wireframe, được phân loại theo nhiều tiêu chí, ví dụ: hệ điều hành (có 1 số chạy trên Windows, macOS hoặc chạy trên nền web), nhưng loại output hỗ trợ là gì, có chức năng hỗ trợ làm prototype hay không, có bản trial hay không và giá license. Bạn có thể căn cứ vào đó để lựa chọn cho mình 1 bộ công cụ phù hợp với dự án.

Antetype

Theo như thông tin nằm trong website của Antetype thì đây là một công cụ chỉ chạy trên MacOs, tức là bạn sẽ bắt buộc phải có máy Mac để có thể chạy được ứng dụng này. Antetype được dùng để tạo prototype cho cả website và các ứng dụng mobile trên iPhone và Android. Thế mạnh của ứng dụng này là hỗ trợ những thư viện giao diện sẵn có, được gọi là các widget và có tới 400 widget như vậy trên Antetype. Bạn có thể dùng thử 30 ngày hoặc phí licence lên đến 190$ cho 1 lần trả phí duy nhất.

App Cooker

Đây là một ứng dụng chỉ chạy trên iPad - tức là bạn sẽ không dụng chuột chạy bàn phím để thiết kế wireframe mà sẽ dùng các ngón tay để tương tác. Một đặc điểm là công cụ này chỉ hỗ trợ tạo prototype cho hệ điều hành iOs tức là chạy trên iPhone hoặc iPad. Nó hỗ trợ cả chuyển các màn hình và gán các tương tác trên giao diện để mô phỏng ứng dụng. Ví dụ như bạn đang trên máy bay và chuẩn bị gặp 1 đối tác, bạn có thể sử dụng App Cooker để tạo ra 1 vài màn hình trong flow chính, để gây ấn tượng với đối tác của bạn rằng ứng dụng đã gần như sẵn sàng, lúc đó công cụ này thực sự hữu ích. Còn ngoài ra trong thực tế thì tôi không khuyến khích các bạn sử dụng quá nhiều bởi vì hạn chế của tương tác bằng ngón tay sẽ khiến giảm tốc độ làm việc của bạn.

Atomic

Đây lại là một công cụ hoàn toàn chạy trên nền web - tức là bạn chỉ cần một trình duyệt web như là Chrome là có thể tạo được wireframe, mà không cần biết bạn dùng hệ điều hành Windows, MacOs hay là Linux. Đây là 1 xu hướng của phần mềm hiện nay mà hiện rất đang được ưa chuộng và trở lên phổ biến. Atomic khá là phong phú về mặt chức năng, như là thiết kế giao diện, thiết kế tương tác, thiết kế animation, thiết kế DATA và logic..v.v. Bạn có thể dùng thử Atomic trong 30 ngày với đầy đủ tính năng sau đó thì bạn có thể nâng cấp lên bản premium: 19$/1 tháng cho cá nhân, 99$/1 tháng cho 1 team 5 người. Còn nếu như bạn chỉ muốn dùng hạn chế thì bạn có thể sử dụng với giá 0$ mãi mãi.

Axure

Chúng ta sẽ đến công cụ vẽ wireframe tiếp theo cũng thú vị không kém chính là Axure. Đây là một phần mềm không phải web based, có thể chạy trên cả MacOs và Windows. Điều này đôi khi là một lợi thế lớn vì trong môi trường làm UX, có rất nhiều người dùng MacOs, nhưng trong môi trường phát triển ứng dụng thì lại đa số sử dụng Windows. Và nếu bạn thường xuyên phải chia sẻ và cộng tác trong việc xây dựng Wireframe giữa các team thì Axure có thể là 1 lựa chọn quan trọng. Axure có lịch sử lâu đời (lên tới 16 năm) và được sử dụng bởi rất nhiều các hãng phần mềm lớn.

Canvas Flip

Khác với các công cụ khác mà tôi đã đề cập trước đó thì Canvas Flip lại tập trung vào việc UX Test trên digital wireframe được tạo ra. Canvas Flip là một công cụ hoàn toàn web based tức là giống với Atomic, cho phép bạn tạo ra các wireframe, gán tương tác và chuyển màn hình trên đó, sau đó thực hiện test với người dùng. Canvas Flip cung cấp cả test dạng video recorder (tức là lưu lại tương tác của người dùng), test tỉ lệ chuyển đổi và test heatmap. Nếu như bạn muốn kết hợp việc vẽ digital wireframe và sử dụng remote test trên đó, thì đây có thể là 1 lựa chọn tốt.

Sketch

Sketch chạy nhanh hơn hẳn Photoshop vì chủ yếu làm việc với các đối tượng vector, dễ học và mềm dẻo. Sketch được sử dụng chủ yếu để vẽ graphic design, tuy nhiên bạn cũng có thể sử dụng nó để vẽ digital wireframe bằng cách tải các bộ thư viện wireframe trên internet về để sử dụng. Ví dụ bạn có thể tìm kiếm với từ khóa wireframe trên các website miễn phí như sketchappsources.com hay là sketchrepo.com để lấy các thư viện dựng sẵn cho phù hợp với ứng dụng của mình. Các tài nguyên này được tạo ra bởi rất nhiều nhà thiết kế và rất phong phú cho mọi yêu cầu design.

Tuy nhiên là Sketch có một số các điểm yếu mà bạn cần biết:

• Thứ nhất là Sketch chỉ chạy trên MacOS mà không chạy trên Windows. Tại Việt Nam, không phải ai cũng có thể có tiền để mua máy Mac do máy Mac khá đắt đỏ. Sẽ có một số vấn đề xảy ra khi bạn làm việc nhóm. Rất may là do Sketch là một phần mềm nổi tiếng và có nhiều ưu thế, các tiêu chuẩn của Sketch dần dần được coi là các tiêu chuẩn công nghiệp, cho nên có khá nhiều các công cụ hỗ trợ dưới dạng plugin, hoặc là tích hợp trực tiếp với ứng dụng. Thế nên chúng ta đều có các giải pháp để giải quyết vấn đề đó.
• Điểm yếu thứ 2 của Sketch là chỉ hỗ trợ việc thiết kế mà không hỗ trợ các công cụ prototyping, để chuyển giữa các trang màn hình. Do đó mà bạn không thể gán cách tương tác trực tiếp các thiết kế mà phải sử dụng các công cụ bên ngoài. 2 trong các công cụ hỗ trợ việc này là MavelApp và Invision. Bạn sẽ xuất các màn hình sau khi thiết kế từ Sketch ra dưới dạng ảnh, upload lên các phần mềm này và gán các tương tác lên đó, sau đó thì có thể trải nghiệm trực tiếp trên thiết bị.

Bù lại thì do Sketch có thể thiết kế cả cho Wireframe và Graphic Design nên thời gian và công sức để chuyển sang bước thiết kế đồ hoạ sẽ giảm đi rất nhiều. Bạn cũng có thể dễ dàng tải được hàng trăm các template và plugin cho Sketch hoàn toàn miễn phí được tạo ra từ hàng triệu designer trên toàn cầu. Và theo ý kiến của tôi, nếu như bạn là một UX Designer hoặc UI Designer, mà bạn chưa sử dụng Sketch thì đó thực sự là một sai lầm lớn. Bạn có thể mua license của Sketch với giá 99$ một năm tại website sketchapp.com. Và chắc chắn đây là một khoản đầu tư hợp lý cho các bạn.

UXPin

Một công cụ khác cũng vô cùng phổ biến và nổi tiếng, đặc biệt phù hợp với các dự án từ xa, với mức độ cộng tác cao đó là UXPin. Một phần mềm web-based - tức là chạy hoàn toàn trên nền web. Bạn bắt buộc phải có internet để sử dụng UXPin, nhưng bù lại lại chỉ cần 1 trình duyệt như là Chrome là đủ, không quan tâm đến hệ điều hành máy tính của bạn là gì.

UXPin hỗ trợ tốt cho cả lo-fi wireframe và hi-fi wireframe. Bạn có thể dễ dàng mời những người liên quan để cùng nhau tạo ra wireframe cho dự án và thảo luận dễ dàng trên môi trường online. Bạn cũng có thể tạo các tương tác trên các trang màn hình dễ dàng và trải nghiệm thử giống như cách mà MavelApp và InVision đã thực hiện. Một trong những thế mạnh của UXPin là thư viện khổng lồ các icon, buttons, layout và các thành phần giao diện dựng sẵn. Tuy nhiên thì bởi là ứng dụng web-based, nên UXPin sẽ chạy chậm hơn các phần mềm khác như Sketch, do đó bạn sẽ cần phải cân nhắc để lựa chọn 1 trong những phần mềm này cho phù hợp với nhu cầu của dự án.

Bạn có thể bắt đầu để sử dụng UXPin với giá 9$ / 1 tháng / 1 người, nhưng để sử dụng được các tính năng cộng tác vốn là thế mạnh của UXPin, bạn sẽ phải trả 29$ / 1 tháng / 1 người

Trong bài trước, chúng ta đã thực hiện dựng digital wireframe (hay còn được gọi là hi-fi wireframe) trên 1 phần mềm, giống như là Sketch hoặc UXPin. Sau bước này, thông thường chúng ta sẽ sử dụng các phần mềm tạo prototype như là MavelApp hoặc InVision để gán các tương tác chuyển màn hình lên thiết kế. Chúng ta có thể test thiết kế trên tay giống như đang cầm một ứng dụng thực sự chạy. Bây giờ là lúc chúng ta sẽ thực hiện test với người dùng, còn được gọi là usability test để chắc rằng thiết kế của chúng ta thực sự dễ sử dụng.

Chúng ta sẽ tìm 5 ứng viên, mời họ thử trải nghiệm trên wireframe của chúng ta, yêu cầu họ thực hiện một số các luồng chính trên thiết kế. Sau đó chúng ta sẽ quan sát họ và ghi chép lại. Mục tiêu của chúng ta là tìm hiểu xem họ có dễ dàng thực hiện các tác vụ hay không? Họ gặp vấn đề ở tại điểm nào. Dựa trên những dữ liệu đó, chúng ta sẽ thay đổi lại thiết kế và test lại cho đến khi có được bản wireframe tốt nhất.

Thực tế thì usability test là một kỹ thuật có thể áp dụng được cả trên wireframe và visual design. Bằng việc usability test trên wireframe, chúng ta sẽ biết được rằng có bao nhiêu người thực sự hiểu chức năng cơ bản của sản phẩm. Nếu như chúng ta không cung cấp cho họ hình ảnh, màu sắc, font chữ... thì vẫn cần phải đảm bảo là người dùng có thể thực hiện được các vụ chính. Trên hình là một ví dụ, bên trái là wireframe đơn sắc và bên phải là visual design của một ứng dụng bán nhà trên mobile. Nếu như chúng ta bỏ qua bước test trên wireframe mà chỉ chú trọng vào visual design thì người dùng sẽ bị hút mắt vào những bức ảnh và quên đi các chi tiết khác về thông tin, do đó mà chúng ta sẽ không test được những vấn đề quan trọng.

Sau đây là một số các ý nghĩa của việc usability test trên wireframe:

1. Đo được là layout này có rõ ràng với người dùng không? làm sao để người dùng biết được sẽ tìm thông tin mà họ cần?
2. Đảm bảo là người dùng có biết cách để thực hiện được 1 tác vụ? Ví dụ như đặt hàng 1 sản phẩm hay chuyển đến trang mục tiêu?
3. Tìm ra được điểm gãy trong luồng sử dụng của người dùng, họ có khựng lại ở đâu đó ko? Có thể phải cải tiến điều gì đó bằng cách cung cấp thêm thông tin không?
4. Biết được các nội dung wording có đủ rõ ràng với người dùng không? Micro-copy có hữu dụng không? Và có đúng chỗ không

Nói tóm lại là việc usability test sẽ giúp chúng ta tìm ra những vấn đề về mặt cấu trúc của sản phẩm, trước khi thêm vào các thành phần đồ hoạ.

Cũng giống như lý do chúng ta cần phải tách bước thiết kế low-fi wireframe và hi-fi wireframe ra, vì ở tại mỗi bước, chúng ta sẽ tập trung vào giải quyết những vấn đề khác nhau. Với việc usability test trên wireframe, chúng ta sẽ chỉ tập trung vào việc tìm ra các vấn đề về cấu trúc layout, thông tin và wording. Còn việc usability trên visual design khi có màu sắc, hình ảnh.. sẽ lại tập trung vào các vấn đề về graphic. Điều này sẽ luôn đảm bảo là sản phẩm đầu ra của chúng ta là tốt nhất.

Câu hỏi đặt ra là sau khi usability test để tìm ra 1 số các vấn đề trên wireframe, bước tiếp theo chúng ta sẽ làm gì? Câu trả lời là bạn sẽ tiếp tục cần phải cải tiến thiết kế và thực hiện test lại cho đến khi nào chúng ta có được 1 wireframe tốt nhất. Sau đó mới chuyển tiếp sang bước tiếp theo Visual Design.

Nhận các phản hồi từ người dùng luôn luôn là một việc hết sức quan trọng. Các designer cần phải biết là phần nào đã đủ tốt và phần nào cần cải thiện trên thiết kế. Design Review là một kỹ thuật để team UX có thể cung cấp cho designer các phản hồi hoặc đánh giá hữu ích. Design Review được dùng kết hợp cùng với Usability Test trong việc tìm ra 1 digital wireframe tốt nhất.

Cũng giống như Usability Test, Design review có thể sử dụng cho cả wireframe và visual design. Thông thường thì là một người thiết kế sản phẩm, chúng ta sẽ thường xuyên bị ảnh hưởng với nhưng suy nghĩ và tình cảm cá nhân đối với thiết kế của mình. Chúng ta cần phải tìm một cách thức trung lập để nhìn sản phẩm một cách sáng suốt và đầy đủ mọi góc cạnh. Thêm nữa cũng cần đánh giá các nguy cơ tiềm ẩn hiện tại và tương lai cho sản phẩm - điều mà chúng ta sẽ không có được khi làm việc đơn độc một mình. Và đó là lý do chúng ta cần thực hiện Design Review.

Để thực hiện review, team thiết kế UX sẽ ngồi xuống và cùng nhìn vào sản phẩm - hiện tại của chúng ta đang là 1 digital wireframe. Mỗi người trong team sẽ được phân một vai trò. Người sẽ tập trung vào những vấn đề và những nguy cơ trong thiết kế. Người sẽ tập trung vào những điểm tốt và những điểm có thể tốt hơn nữa. Sau đó thì team thiết kế sẽ đưa ra được rất nhiều các ý tưởng về sản phẩm, và thông thường các ý tưởng này đều được nhìn với 1 góc nhìn trung lập và công bằng.

Có một cuốn sách rất nổi tiếng của tác giả Edward de Bono, tên là "6 chiếc mũ tư duy" viết về phương pháp tư duy một cách đúng đắn và tỉnh táo - chìa khoá của mọi vấn đề thành công trong cuộc sống. Các bạn nên mua tại bất cứ hiệu sách nào trên cả nước và đọc cuốn sách thú vị này. Trong khoá học của chúng ta, tôi cũng đưa vào áp dụng phương pháp này trong Design Review để có được 1 đánh giá khách quan về thiết kế mà ta có được.

4 chiếc mũ cho Design Review

Người đội mũ trắng sẽ trả lời những câu hỏi sau: Những gì tôi nhìn thấy trên màn hình, những gì tôi có thể thực hiện trên đó. Điểm nào là rõ ràng, còn điểm nào thì không? Thiết kế này có phù hợp với các tài liệu của tôi trong Design Brief như personas, user story.. hay không? Thiết kế này đáp ứng các user needs và business needs không? Thiết kế này có thống nhất về ngôn ngữ design không? Nội dung có rõ ràng và hữu dụng không...v.v. Đây là một vai trò cần tư duy logic và chính xác. Một người làm QA, tester hoặc project manager sẽ có thể phù hợp với vai trò này.

Người đội mũ đen sẽ trả lời những câu hỏi sau: Những gì sẽ không làm việc? Những gì có thể có các nguy cơ tiềm ẩn cho hiện tại và tương lai? Những điểm nào không thể thực hiện được với thời gian và giới hạn của công nghệ hiện tại.. Một chú ý ở đây là chúng ta cần phải đội chiếc mũ đen cho một người có tiếng nói trong team, một người có kinh nghiệm về phần mềm hoặc chuyên gia về thiết kế. Lý do là không ai muốn nghe sự chê bai về sản phẩm, đặc biệt là từ designer - họ luôn bị ảnh hưởng yếu tố tình cảm cá nhân. Do đó nếu như người đội mũ đen không có kinh nghiệm để tranh cãi với các thành viên khác của team thì hoặc là buổi thảo luận sẽ kết thúc trong sự áp đặt, hoặc là các vấn đề sẽ không được để ý đến. Product Owner hoặc UX Designer có kinh nghiệm đều có thể phù hợp với chiếc mũ đen này.

Người đội mũ vàng có một vai trò rất quan trọng vì khi bạn tìm ra những điểm tốt trong thiết kế, designer có thể sử dụng lại vào chỗ khác. Một điểm nữa là team design sẽ cảm thấy hạnh phúc và hài lòng hơn vì công sức của họ được nhìn nhận, theo đó thì cuộc họp sẽ trở nên bớt căng thẳng hơn. Người đội mũ vàng ngoài việc tìm ra những điểm tốt trong thiết kế, còn phải giải thích vì sao nó tốt và vì sao nó hoạt động. Do đó người đội mũ vàng sẽ cần những kinh nghiệm nhất định về thiết kế nhằm thuyết phục các thành viên trong team. Một UX Desiger có kinh nghiệm có thể phù hợp để đội chiếc nón này.

Người đội mũ xanh có một vài trò hết sức thú vị. Người này cần phải để cho đầu óc tươi mới, sáng tạo và hướng đến các ý tưởng, các phương pháp mới để cải tiến sản phẩm. Anh ta sẽ cần trả lời các câu hỏi như: những chức năng mới nào nên thêm vào để khiến sản phẩm tốt hơn? Làm cách nào chúng ta cải tiến thiết kế? Thông thường thì mọi ý tưởng đều được chào đón mà không nên gạt đi bằng con mắt nghiêm khắc và sự soi chiếu của những kinh nghiệm cũ kỹ. Sau khi liệt kê thì team sẽ dành thời gian để quyết định xem ý tưởng nào là khả thi và hữu dụng. Thông thường thì những người trẻ tuổi trong team, chưa có nhiều kinh nghiệm làm việc nhưng lại giàu sức sáng tạo sẽ phù hợp để đội chiếc mũ này.

Thực hiện 1 buổi design review 

Một buổi Design Review có thể diễn ra trong vòng 1-2h đồng hồ. Bạn có thể lập một team từ 4 đến 6 người. Gán ngẫu nhiên vai trò của mọi người hoặc có thể chỉ định chiếc mũ cho phù hợp. Sau khi trình bày về thiết kế, mọi người sẽ làm việc độc lập tầm 25 phút và đưa ra các ý kiến khác nhau. Team sẽ thực hiện thảo luận và ghi chép và một file excel, sau đó đặt mức độ ưu tiên cho các ý kiến đó. Sau khi có được danh sách các ý kiến, designer sẽ thực hiện các chỉnh sửa cần thiết và chúng ta có thể tiếp tục lặp lại các buổi review này trong các lần sau nhằm có được kết quả tốt nhất.

Trong chương trước chúng ta đã có đầu ra là bản digital wireframe, được xây dựng trên phần mềm, usability test trên người dùng và thực hiện design review cho đến khi có 1 bản wireframe tối ưu. Bây giờ là lúc chúng ta thêm vào các thành phần đồ họa như màu sắc, hình ảnh, font chữ. Đó chính là nội dung của chương Design. Các bạn chú ý đây sẽ là một bài rất dài và quan trọng mà tôi không thể tách ra làm các bài ngắn hơn được. Các bạn hãy cố gắng để hoàn tất nội dung bài này.

Mục tiêu của bước số 5 Design là tạo ra được 1 giao diện chi tiết cuối cùng và pixel perfect cho sản phẩm. Chúng ta sẽ thêm vào màu sắc, tối ưu về typography (tức là về kiểu font, kích thước và khoảng cách dòng), hình ảnh hoặc video. Sau đó thì sắp xếp chúng dựa trên bản wireframe để cho ra một thiết kế cuối cùng của sản phẩm, trước khi chuyển giao cho team phát triển. Trong nhiều trường hợp,

Hãy quay lại mô hình cầu thang 6 bước về một thiết kế UX tốt. Trong các bước trước, cho đến wireframe thì chúng ta đã tối ưu cho những yêu cầu của khách hàng ở những bậc thang đầu tiên, bao gồm: findable - bằng cách thiết kế về flow và về thông tin giúp khách hàng dễ dàng tìm được những gì họ đang tìm kiếm. Bậc assessible, usable thì bằng cách phân tích personas, bao gồm hoàn cảnh và điều kiện sử dụng của người dùng, chúng ta đã bố trí lại layout, flow và thông tin - điều đó giúp cho khách hàng có thể tiếp cận được và sử dụng được sản phẩm. Tuy nhiên ở bậc thang desirable, liên quan đến cảm xúc, sự lôi cuốn thì hầu như chúng ta chưa làm được gì nhiều. Và đó chính là nhiệm vụ của bước Design.

Điều gì tạo ra 1 UI tốt?

Visual Design trong UX không phải nghệ thuật mà là kỹ thuật. Để minh chứng, chúng ta nhìn trên hình. Bên trái là bức tranh "Women of Algiers" của Picaso. Tôi chưa từng nhìn bức tranh này trong thực tế nhưng tôi chắc rằng nó sẽ không tạo bất cứ cảm xúc gì cho tôi, và tôi chỉ khen nó đẹp bởi vì nó quá đắt giá. Bên phải là giao diện đồ hoạ của ứng dụng Facebook, một ứng dụng hoàn toàn miễn phí nhưng lại được sử dụng và yêu thích bởi hàng tỉ người trên thế giới. Điều quan trọng ở đây là người dùng không yêu thích Facebook bởi gì giao diện của nó có tính nghệ thuật, mà bởi vì nó giúp sử dụng phần mềm Facebook hiệu quả hơn, kết nối tốt hơn với bạn bè và gia đình. Một visual design tốt phải là một visual design hiệu quả và giúp người dùng hiểu được cách sử dụng sản phẩm và tương tác tốt hơn. Chúng ta không dùng 1 màu sắc bởi vì là nó đẹp, mà chúng ta dùng màu sắc bởi vì nó làm việc thông suốt giữa các thành phần giao diện. Chúng ta cũng không chọn 1 font chữ bởi vì nó đáng yêu mà bởi vì nó dễ đọc, hiển thị tốt và hỗ trợ Unicode tiếng Việt hoàn hảo..

Chúng ta sẽ có 4 nguyên tắc để tạo ra được 1 UI tốt và hiệu quả. 4 nguyên tắc này phải được tuân thủ bởi người thiết kế giao diện nhưng nó cũng cần phổ biển như kiến thức cơ bản cho các thành viên của team sản phẩm,. Điều đó sẽ giúp các cuộc thảo luận có giá trị hơn và nhận được các ý kiến có giá trị hơn cho designer. Thêm nữa, nó cũng được sử dụng cả cho phase wireframe nữa.

Bây giờ thì chúng ta sẽ lần lượt đi đến từng nguyên tắc để tạo ra 1 UI tốt.

1. Đơn giản và nhất quán

Nguyên tắc đầu tiên: Đơn giản, rõ ràng và nhất quán. Hãy nhớ lại câu nói của Steve Jobs mà chúng ta đã được học ở bài đầu tiên: Đơn giản thì khó hơn phức tạp. Bạn phải làm việc chăm chỉ để khiến cho tư duy trở nên trong sáng và làm cho nó đơn giản. Những bạn UI designer chưa có kinh nghiệm thì thường làm cho mọi thứ phức tạp lên, mục tiêu là khiến cho sản phẩm trở nên phong phú và nguy hiểm, với mong muốn là đánh vào cảm xúc tò mò của người dùng, nhưng đó là một sai lầm. Ví dụ như màu sắc được sử dụng để giúp cho người dùng dễ dàng sử dụng hơn và định hướng hành vi (tức là chỉ rõ xem cái nào là quan trọng). Thêm quá nhiều màu sắc sẽ khiến người dùng mất tập trung - ý là nếu nói rằng cái gì cũng quan trọng thì sẽ chẳng có gì quan trọng cả.

Điều thứ 2 trong nguyên tắc đầu tiên là nhất quán (hay trong tiếng anh là consistancy). Tính nhất quán có nghĩa là người dùng được sử dụng các thành phần giao diện theo cùng 1 cách trên bất cứ chỗ nào của ứng dụng. Một ví dụ là nếu như bạn đã thiết kế button dạng giao diện nào đó trên 1 trang, thì bạn sẽ cần giữ giao diện đó đồng nhất trong các trang khác. Bởi vì khi người dùng đã học 1 lần về việc một button trông như thế nào thì họ sẽ không muốn phải học lại điều đó ở chỗ khác nữa. Đây là một trong những sai lầm phổ biến nhất của rất nhiều các ứng dụng ở Việg Nam cũng như nước ngoài mà tôi đảm bảo là khi bạn có kinh nghiệm về thiết kế UX bạn sẽ phải thường xuyên đối mặt với vấn đề chướng tai gai mắt đó. Một điểm hữu ích của việc giữ nhất quán trong thiết kế là tiết kiệm được công sức của đội phát triển ứng dụng. Lập trình viên chỉ cần làm một lần và dùng lại cho các trang khác mà không phải code thêm.

2. Định hướng thị giác tốt

Nguyên tắc thứ 2 tạo ra 1 UI tốt là có được một định hướng thị giác tốt. Thuật ngữ trong tiếng Anh gọi là hierarchy. Là một trong những vấn đề tối quan trọng với graphic design. Định hướng thị giác sẽ giúp điều hướng thông tin đến với người dùng, cái gì là quan trọng, cái gì là thứ 2, thứ 3 và cái gì người dùng nên bấm vào. Và theo đó thì sẽ giúp dẫn dắt người dùng theo một luồng màn hình mục tiêu của chúng ta. Trên hình chúng ta có thể thấy website của Apple có một định hướng thị giác rất tốt với: chữ iMacPro sẽ được nhìn thấy đầu tiên, sau đó là slogan "Power to the pro". 2 nút định hướng action là Learn more và Buy được tô màu xanh với mũi tên. Chúng ta chỉ cần nhìn 1 giây là hiểu ngay đây là trang gì và chúng ta có thể làm gì tiếp theo.

Có 3 nhân tố chính ảnh hướng đến 1 định hướng thị giác, bao gồm

1. Kích thước: kích thước càng lớn thì định hướng thị giác cũng lớn hơn.
2. Vị trí: Thông thường thì người dùng sẽ nhìn từ trên xuống dưới, từ trái qua phải. Tuy nhiên là có những pattern mà đã trở nên quen thuộc với người dùng, chúng ta cũng nên tìm hiểu. Ví dụ như mẫu F, mẫu E hoặc Z trên các website mà do những hoạt động R&D tìm ra, các bạn có thể tham khảo để đặt những thứ quan trọng vào đúng vị trí.
3. Màu sắc là nhân tố thứ 3: Những màu sắc sặc sỡ và sinh động cũng ảnh hưởng đến định hướng thị giác. Ngoài ra độ tương phản màu cũng hết sức quan trọng. Những mảng màu có độ tương phản lớn cũng sẽ có hiệu quả hơn với người dùng.

3. Typography

Yếu tố thứ 3 tạo ra một UI tốt là typography, bao gồm các font chữ, màu sắc, kích thước, khoảng cách giữa các chữ (hay còn gọi là font-kern) và khoảng cách giữa các dòng (line-height). Một typography tốt sẽ làm cho văn bản trở nên dễ đọc hơn. Nhưng bạn hãy nhớ 1 điều, khi người dùng xem một website hoặc 1 ứng dụng, họ sẽ không đọc từng câu từng chữ mà sẽ đọc lướt (hay còn gọi là scan) lên trên các văn bản. Sử dụng kỹ thuật typography tốt (như là in nghiêng, màu sắc, gạch chân..v.v) sẽ giúp việc đọc lướt này trở nên hiệu quả hơn.

Việc lựa chọn một typography tốt là một vấn đề khó khăn cần nhiều công sức và nỗ lực. Bằng chứng là trên internet hiện nay tình trạng các website vẫn lựa chọn những font mỏng và màu xám, gây khó khăn cho việc đọc là hết sức phổ biến. Và sau đây là 1 số các nhân tố để tạo ra một typography tốt cho sản phẩm của bạn

Văn bản phải dễ đọc. Khi bạn thiết kế, bạn có thể sử dụng 1 màn hình máy tính lớn và sáng, có thể là retina với độ phần giải từ 2K - 4K, nét căng và chuẩn màu. Và là 1 designer, bạn có xu hướng chọn những font mảnh, mịn và sử dụng màu xám để giúp thiết kế đồ hoạ trở nên hấp dẫn hơn. Nhưng trong thực tế màn hình của người dùng có thể rất nhỏ và xấu, khi đó họ sẽ gặp khó khăn để đọc nội dung và khiến họ rời bỏ sản phẩm của bạn. Vì thế hãy chú ý khi lựa chọn font để khiến văn bản dễ đọc hơn.

Nên sử dụng nhiều các khoảng trắng, đều này sẽ giúp ngừoi đọc dễ dàng scan nội dung hơn. Nhiều designer có tâm lý là cần phải tận dụng các khoảng cách để nhồi vào càng nhiều thông tin càng tốt - thực ra thì đó cũng là 1 trong những nguyên tắc thiết kế đồ hoạ - nhưng chúng ta phải cân đối để giúp người dùng có thể biết được cái nào là nội dung quan trọng.

Nếu chúng ta thiết kế 1 sản phẩm có nội dung tiếng Việt thì phải hết sức cẩn thận. Tiếng Anh rất đơn giản và rõ ràng so với Tiếng Việt, Tiếng Việt của chúng ta có nhiều dấu và không phải font chữ nào cũng hỗ trợ tiếng Việt. Vì thế hãy chú ý khi chọn font cho phù hợp, 1 cách tốt là bạn có thể truy cập Google font để tìm ra các font chữ hỗ trợ tiếng Việt.

4. Màu và độ tương phản

Vấn đề thứ 4 để tạo ra được 1 UI tốt là màu và độ tương phản. Màu sắc là một vấn đề có tính khoa học và đã được tìm hiểu từ rất lâu đời bởi những nhà mỹ học. Nhưng có 1 số các nguyên tắc vẫn luôn đúng, ví dụ như các màu sắc tươi sáng và sặc sỡ sẽ hút mắt người dùng hơn những màu xám và tối. Một số đo đạc cho rằng có 1 số màu sẽ có hiệu quả hơn các màu khác, ví dụ như màu da cam thì tươi trẻ và mời gọi người dùng hành đông hơn. Hoặc như màu tím thì nữ tính và đồng nghĩa với sự gắn kết, chung thuỷ hơn. Tuy nhiên, điều này thường thì ít có ý nghĩa với bộ môn thiết kế UX, vì bạn sẽ không thể vì thế mà tạo ra 1 nút màu da cam hoàn toàn lạc lõng giữa một tông màu xanh được.

Nếu như bạn thiết kế sản phẩm cho 1 khách hàng, thông thường thì màu sắc ứng dụng của bạn sẽ phụ thuộc vào tông màu của thương hiệu, giống như logo của công ty. Khi đó thì bạn có thể chọn hoặc không các màu phụ dựa trên bộ màu chính của thương hiệu.

Nếu bạn phải tự chọn màu cho ứng dụng thì bạn có thể tìm các bảng màu dựng sẵn như Google Material Design. Nơi đó, bạn có thể chọn ra 1 màu chính (hay còn gọi là primary) và một màu tương phản (gọi là accent) và từ 2 màu đó tách ra được 6 mã màu. Đây sẽ là những màu cơ bản để bạn xây dựng ứng dụng, mà tránh được việc sử dụng màu thiếu đi định hướng và cơ sở khoa học. Đây cũng là cách mà Google chọn màu để xây dựng các sản phẩm của mình như Youtube, Google Map, Drive và Hangout..v.v

Đôi khi bạn phải chọn bảng màu riêng không nằm trong các template thì bạn có thể sử dụng công cụ Bánh xe màu, để tìm hiểu về cách mà các màu kết hợp với nhau đối với thị giác của con người. Nguyên tắc là mọi màu sắc trong tự nhiên được tạo ra từ 3 màu cơ bản là xanh, vàng và đỏ. Các màu khác là sự kết hợp theo tỉ lệ của các màu cơ bản này. Các màu ở gần nhau trên bánh xe màu thì sẽ tạo ra cảm giác tự nhiên, thuận mắt khi được kết hợp với nhau trên 1 thiết kế. Còn các màu đối lập nhau trên bánh xe màu thì lại gây bức bối khó chịu, căng thẳng và thường được sử dụng hơn các các nghệ thuật ấn tượng. Hãng Adobe có đưa ra 1 công cụ Bánh xe màu tại địa chỉ https://color.adobe.com/ bạn có thể sử dụng để pha màu cho sản phẩm của mình.

Bạn cũng cần phải chú ý đến ý nghĩa của màu sắc đối với từng văn hoá khác nhau. Một số màu sắc đối với nền văn hoá khác nhau có ý nghĩa khác nhau. Ví dụ như màu trắng đối với các nước phương tây có nghĩa là: sạch sẽ và an toàn. Vì thế họ hay sử dụng các bàn ghế, khung cửa màu trắng trong ngôi nhà của họ. Nhưng ở các phương châu Á thì màu trắng lại là màu của tang tóc, của u buồn. Hoặc như là màu đỏ đối với cả phương tây và châu Á đều thể hiện sự nguy hiểm hoặc là sự mãnh liệt, chắc chắn là có nguồn gốc từ màu đỏ của lửa. Nhưng màu đỏ đối với người Ấn Độ thì lại chỉ thể hiện cái đẹp, sự thịnh vượng. Tuy nhiên là do sự giao thoa văn hoá nên có nhiều trường hợp chúng ta gần như chấp nhận văn hoá màu của nhau, ví dụ của các cảnh báo là màu đỏ mà quên đi ý nghĩa của màu sắc đối với nền văn hoá địa phương.

Style Guide

Một trong những bí quyết để giúp thiết kế của bạn nhất quán và giảm bớt công sức cho mọi người (kể cả thiết kế và lập trình) là bạn hãy ra các bộ style guide. Style guide là 1 bộ tài liệu để giúp bạn định nghĩa các thành phần giao diện sẽ hiển thị và tương tác như thế nào trong thực tế? Ví dụ như bạn định nghĩa các button thì có bao nhiêu loại, các trạng thái mặc định, được click vào và disable thì sẽ hiển thị ra sao. Các popup và textbox thì sẽ được hiển thị như thế nào. Theo tôi thì nếu một công ty có nhiều sản phẩm thì thật tuyệt vời nếu như xây dựng sẵn một bộ style guide cho cả công ty và sử dụng nó trên tất cả các sản phẩm.

Sau khi xây dựng style guide ở bước thiết kế giao diện, style guide cũng có thể áp dụng cho bước phát triển sản phẩm. Một ví dụ nổi tiếng là bộ thư viện HTML Bootstrap có thể coi là 1 style guide phổ biến và hiệu quả hàng đầu trong giới công nghệ ngày nay. Bootstrap được sử dụng trên hàng triệu các website bằng cách định nghĩa sẵn bộ stylesheet và javascript cho các thành phần giao diện. Chúng ta chỉ cần tải về, link vào là có thể sử dụng được ngay trên website của mình.

Design Principles

Một vấn đề rất quan trọng trong việc thiết kế giao diện người dùng là: trước khi đặt chuột để vẽ những mảng màu đầu tiên, bạn cần phải xác định được những gì mà bạn mong muốn đạt được với với giao diện của sản phẩm. Nói cách khác là những loại cảm giác và cảm xúc nào bạn muốn tạo ra cho người dùng khi sử dụng sản phẩm. Có thể là trẻ trung, lôi cuốn, có thể là minh bạch đáng tin cậy và cũng có thể là đăng cấp - xa xỉ nếu như bạn muốn bán đồng hồ online. Đó chính là câu chuyện của Design Principles (nguyên tắc thiết kế)

Có 2 kỹ thuật để giúp bạn đạt được điều đó, thứ nhất là sử dụng một bảng câu hỏi dạng quang phổ, thứ 2 là kỹ thuật mô tả về design bằng 5 tính từ.

Bảng câu hỏi dạng quang phổ

Nói về kỹ thuật đầu tiên, chúng ta sẽ tạo ra một bảng câu hỏi dạng quang phổ. Mỗi câu hỏi sẽ bắt đầu bằng 1 tính từ và kết thúc bằng 1 tính từ hoàn toàn đối lập. Ví dụ như bắt đầu từ "đắt đỏ" đến "phải chăng", hoặc là bắt đầu từ "Doanh nghiệp" đến kết thúc bằng từ "Cá nhân".
Người được hỏi sẽ chọn trong thang điểm từ 1 đến 10 cho mỗi câu hỏi như vậy. Cách đơn giản nhất là bạn tạo bảng câu hỏi này bằng Goolge Form, và trả về dưới dạng 1 survey. Sau đó thì ta sẽ gửi bảng câu hỏi này đến khách hàng mục tiêu và nhận về càng nhiều trả lời càng tốt. Kết quả cuối cùng sẽ giúp chúng ta nhận biết được nên tập trung vào yếu tố nào trong design.

5 từ phản ánh về design

Kỹ thuật thứ 2 thì đơn giản hơn, chúng ta tổ chức một cuộc họp nhóm và liệt kê ra tất cả các tính từ cần phải mô tả về design sau đó thì loại bỏ dần cho đến khi tìm được 5 từ phù hợp nhất. Thông thường thì chúng ta có rất nhiều kỳ vọng vào thiết kế nhưng bằng cách chỉ chọn 1 số lượng hạn chế, bạn sẽ thực sự biết được đâu là những yếu tố cốt lõi và quan trọng nhất cần phải tập trung vào.

Và đây là kết quả chúng ta thu được sau khi thực hiện 2 kỹ thuật trên để có được các design principles sản phẩm. 2 phương pháp này có thể sử dụng kết hợp cho hợp lý trong từng trường hợp. Đặc biệt là bạn cũng có thể áp dụng linh hoạt kỹ thuật cho các lĩnh vực khác ngoài design, như là một cách để hỗ trợ việc đưa ra các quyết định.

Việc thiết kế có thể gói gọi trong 1 quy trình bao gồm 4 bước lần lượt như sau:

• Bước thứ 1: chúng ta sẽ tạo ra 1 bản look and feed, hay còn được gọi là design concept để xác định phương hướng cho toàn bộ việc thiết kế.
• Bước thứ 2: chúng ta lần lượt thiết kế từng màn hình, tập trung vào những màn hình chính, phức tạp nhất đến các màn hình đơn giản để hoàn tất việc thiết kế.
• Bước thứ 3: chúng ta xuất giao diện thiết xong thành các trang màn hình và gắn lên các phần mềm làm prototype như là MavelApp hoặc InVision mà chúng ta đã làm ở bước wireframe trước đó.
• Bước thứ 4: là thực hiện usability test trên người dùng để nhận về các phản hồi.

Cuối cùng thì là quay lại bước số 2 để cập nhật lại các trang màn hình theo như phản hồi và lặp lại quy trình trên. Chúng ta sẽ đi lần lượt vào từng bước trong quy trình này.

Bước 1: Design Concept

Trong bài trước chúng ta đã biết được 1 số những đầu vào cho thiết kế nằm ở Design Principles, ví dụ như phần mềm của chúng ta có những yêu cầu về thiết kế cần phải thể hiện như: chuyên nghiệp, đáng tin cậy, hướng đến doanh nghiệp thay vì cá nhân và giá cả phải chăng phù hợp với doanh nghiệp vừa và nhỏ. Tuy nhiên có rất nhiều cách để đáp ứng các yêu cầu này và chúng ta không chắc được style nào nào tốt nhất. Tại bước này chúng ta sẽ tạo ra một số các lựa chọn, từ 2 đến 3 thiết kế mẫu mà vẫn đi theo wireframe đã được xây dựng trước đó. Sau đó thì lựa chọn lấy 1 cái tốt nhất.

Thông thường, chúng ta sẽ chọn ra 1 vài màn hình phức tạp nhất, ví dụ như trang chủ của một website, hoặc trang dashboard của một ứng dụng để tiến hành design. Chúng ta sẽ chọn nhiều phương án về màu sắc, typography, các hình ảnh và layout, nhưng phải luôn đảm bảo tuân theo wireframe đã xây dựng ở các bước trước đó. Sau đó thì chúng ta mang các design concept này đưa ra cho team thiết kế, các đối tác hoặc khách hàng lựa chọn. Bạn cũng có thể thực hiện việc interview khách hàng hoặc là test 5 giây nhằm tìm được concept tốt nhất. Sau khi chọn được phương án được ưa thích nhất, ta đi sâu vào và dùng nó làm cơ sở cho các màn hình khác.

Bước 2: Lần lượt thiết kế từng màn hình

Và như vậy, sau khi chọn xong design concept, giờ chính là lúc bạn sẽ lần lượt thiết kế từng màn hình theo phong cách đó. Chúng ta có thể có tới hàng trăm màn hình, nhưng chúng ta đã có design concept và có wireframe chi tiết, thực sự cũng không khó khăn lắm để hoàn tất khối lượng công việc này. Và sau đây chúng ta đi đến một loạt những vấn đề cần chú ý thi thực hiện design các màn hình.

Bước 3: Tạo prototyping

Tại bước bước chúng ta đã đã dựng prototype cho các màn hình wireframe, kỹ thuật đó được gọi là click-through prototype. Kỹ thuật này khá đơn giản, bằng cách sử dụng Invision hoặc MavelApp để upload những màn hình ở dạng ảnh lên, sau đó thêm các hot spot để tạo các tương tác dạng click và chuyển giữa các màn hình với nhau. Chúng ta cũng có thể sử dụng phương pháp này ở bước design, nhằm mô phỏng ứng dụng và test với người dùng. Tuy nhiên, trong một số trường hợp, chúng ta cần phải đi sâu hơn, ví dụ như cần mô phỏng về animation hoặc các tương tác sâu hơn, chúng ta sẽ cần sử dụng đến 1 kỹ thuật khác, gọi là Hi-fi Prototype.

Khi nào thì chúng ta sẽ cần sử dụng kỹ thuật hi-fi prototype? Một là khi kỹ thuật click-thru không thể hiện được cách mà một chức năng hoạt động. Hai là khi để phát triển ứng dụng với yêu cầu thiết kế là mất quá nhiều thời gian, ta có thể sử dụng cách này để thể hiện với người dùng từ sớm. Ba là ta muốn mô tả cho lập trình viên mà không muốn sử dụng lời nói hay tài liệu, bằng cách thể hiện bằng demo trên protoptype.

Proto.io

Đây là một công cụ web-based chạy hoàn toàn trên nền web. Bạn có thể dễ dàng import thiết kế từ Sketch hoặc tự thiết kế từ các công cụ của Proto. Sau đó xây dựng 1 hi-fi prototype và trải nghiệm như 1 ứng dụng chạy thật trên thiết bị. Giá của proto.io là từ 24$/ 1người / 1 tháng, tối đa 5 dự án.

UXPin

Đây là công cụ tôi đã đề cập trong các bài trước, một công cụ nổi tiếng dành cho thiết kế UX. UXPin cũng hỗ trợ import từ Sketch và Photoshop, sau đó tạo hi-fi prototype để trải nghiệm, bằng các dễ dàng thêm các tương tác và tạo các animation nâng cao.

Framer

Đây là một công cụ dành cho dân chuyên nghiệp trong việc tạo hi-fi prototype. Bạn buộc phải học cách sử dụng ngữ lâp trình CoffeeScript để có thể sử dụng Framer. Tuy nhiên nó lại mạnh mẽ hơn hẳn so với proto.io và UXPin trong việc này, ví dụ bạn thậm chí truy cập được phần cứng của thiết bị như camera để sử dụng. Giá của Framer là 12$ / 1 người / 1 tháng.

Flinto

Công cụ thứ 4 cuối cùng mà tôi muốn giới thiệu với các bạn là Flinto. Đây là một công cụ giống với với proto.io và UXPin, nhưng nó là một phần mềm desktop, rất nhẹ và đơn giản, chạy trên hệ điều hành MacOS. Nó cho phép chúng ta xây dựng hi-fi prototype bằng việc tập trung vào các animation và tương tác người dùng nâng cao. Giá của Flinto là 99$ trả một lần duy nhất.

Bước 4: Usability Test

Bước cuối cùng của chúng ta sau khi đã tạo prototype cho thiết kế là thực hiện usability test với người dùng trên thiết kế của chúng ta. Chúng ta đã biết cách tổ chức thực hiện usability test như thế nào ở các bài trước. Bằng cách tìm một số ứng viên, tốt nhất là các ứng viên đã tham gia cùng chúng ta tại bước vẽ wireframe. Mời họ dùng thử và ghi chép các ý kiến. Và bạn sẽ cần phải xác định được 1 số các câu hỏi như sau: Họ có cảm thấy giao diện của sản phẩm cuốn hút không? Những cảm giác và cảm xúc nào có được khi trải nghiệm trên thiết kế sản phẩm này, có đáp ứng được với design principles của chúng ta không? Thiết kế có giúp họ hiểu và dễ dàng sử dụng sản phẩm không? Họ có dễ dàng sử dụng 1 chức năng nào đó không? Nội dung có rõ ràng, thân thiện và đúng chỗ không?

Sau khi có được các phản hồi từ việc usability test, chúng ta sẽ quay lại bước 2 để tiếp tục thiết kế một các màn hình và lặp lại quá trình đó cho đến khi có được một thiết kế UI tốt nhất cho sản phẩm. Đáp ứng các mục tiêu về design principles, người dùng cảm thấy yêu thích, dễ sử dụng và sẵn sàng trở thành khách hàng tiềm năng của sản phẩm.

Sau khi có được bản visual design cho thiết kế của bạn, bây giờ là lúc bạn phải xác minh, xem thực sự thì đó có phải là sản phẩm mà người dùng mong muốn có được hay không? Để làm điều đó thì bạn sẽ cần thực hiện vài phép thử, chúng ta sẽ lần lượt tìm hiểu 3 phép thử khác nhau trong bước này.

Phép thử thứ nhất là đo lường ấn tượng đầu tiên của khách hàng. Ấn tượng đầu tiên là thứ khó đo lường, bạn ko dễ dàng tìm ra được vấn đề trên thiết kế của bạn. Nếu như người dùng ko thích, hoặc ko hiểu, họ nhanh chóng sẽ bỏ đi và tìm đến 1 sản phẩm khác thay thế. Bạn cần thực hiện một số các testing khác: test kiểu 5 giây và click test để tìm ra "ấn tượng đầu tiên" của người dùng đối với sản phẩm.

Thông thường khi xem 1 website mới, người dùng sẽ sử dụng chỉ sử dụng từ 5 đến 10 giây để quyết định xem có tiếp tục xem tiếp hay bỏ đi tìm đến 1 trang khác. Việc này cũng tương tự như lần đầu họ tải một mobile app về. Có thể bạn thấy lạ lùng là làm sao mà 1 người có thể đọc nhanh đến thế? Thực tế thì người dùng không đọc thông tin trên website của bạn, họ chỉ đọc lướt, tức là scan trên đó. Và họ sử dụng chủ yếu là những kinh nghiệm thuộc về tiềm thức để xử lý thông tin nhìn thấy. Và họ xử lý thông tin này cực nhanh, trước khi bạn có cơ hội giải thích với người dùng.

Thông thường họ sẽ sử dụng 1 yếu tố gọi là tiềm thức để xác định xem, thực sự thì sản phẩm của bạn có phải là những gì họ đang tìm kiếm hay không. Nó có thể đến từ những kinh nghiệm ngoài đời thực hoặc là những yếu tố mang tính kinh nghiệm hay thói quen. Và rất khó để họ có thể thay đổi kinh nghiệm hay thói quen đó. Ví dụ như là người dùng thường xuyên gõ các url lên trên thanh tìm kiếm của Google, vì trong tiềm thức của họ, thì Google sẽ đảm bảo cho họ đường dẫn đó là đúng hay ko và họ có thể không cần nhớ chính xác tên miền đó. Đó là 1 thói quen kỳ lạ, vì nó khiến người dùng mất thêm 1 bước, nhưng sẽ dễ hiểu nếu như ta tư duy là: người dùng không bao giờ nhớ được chính xác 1 tên miền nào, họ chỉ láng máng nhớ nó trong đầu và cần Google để xác minh.

Những lý do người dùng rời bỏ bạn?

1. Họ có tìm thấy những thông tin họ cần trên sản phẩm của bạn không? Chúng ta nhớ lại mô hình cầu thang 6 bước mà chúng ta học ở bài đầu tiên, thì findable là bậc thang đầu tiên trên cầu thang đó. Nếu người dùng không vượt qua được bậc này thì họ sẽ ngay lập tức rời bỏ sản phẩm của bạn và mọi nỗ lực tại các bậc thang trên đều trở nên vô nghĩa. Vì thế trong các chiến dịch marketing, hãy nhớ điều hướng đúng người ghé thăm vào đúng sản phẩm và đúng trang mà bạn mong muốn.

2. Người dùng có tìm được thông tin trong 1 khoảng thời gian đủ nhanh hay không? Thực tế thì họ sẽ không dành ra cả vài phút để để quyết định xem nên đi hay ở trên sản phẩm của bạn, họ chỉ dành ra từ 5 đến 10 giây đồng hồ mà thôi. Những yếu tố giúp người dùng tìm được thông tin đủ nhanh bao gồm

1. Thiết kế thông tin: ví dụ với 1 website bán hàng thì công cụ search hoặc cây danh mục sản phẩm của bạn phải được bố trí đúng và giúp người dùng nhanh chóng tìm ra được sản phẩm mà họ cần
2. Định hướng thị giác tốt: người dùng sẽ không đọc mà sẽ chỉ scan trên bề mặt của sản phẩm và mắt của họ sẽ dừng ở điểm có định hướng thị giác tốt
3. Liên qua đến backend: hệ thống cần được thiết kế tốt để đáp ứng lượt truy cập của người dùng. Nếu 1 website cần tới 5 giây để tải 1 trang thì họ sẽ rời bỏ bạn gần như chắc chắn.

3. Ngôn ngữ thiết kế có phù hợp không. Giao diện của 1 sản phẩm có 1 ý nghĩa quan trọng trong việc tạo ra ấn tượng đầu tiên của khách hàng. Một thiết kế tốt sẽ giúp người dùng cảm thấy tin cậy, định hướng được hành vi, hiểu được cấu trúc thông tin dễ dàng hơn và dễ sử dụng hơn. Một thiết kế tồi tệ sẽ khiến khách hàng rời bỏ sản phẩm của bạn cũng nhanh như họ tìm đến với bạn.

Hãy nhớ lại hình ảnh của app Helio mà tôi đã đề cập trong 1 bài trước đó. Với 1 giao diện như thế này thì thật khó lòng để người dùng điền các thông tin thẻ tín dụng vào form thanh toán, vì trông nó rất không đáng tin cậy.

4. Sử dụng một ngôn ngữ giao tiếp sai lầm.

Những ví dụ sau đây sẽ minh hoạ cho việc sử dụng 1 ngôn ngữ giao tiếp sai lầm với người dùng:

1. Sản phẩm không được thiết kế cho đúng với người dùng mục tiêu. Ví dụ như nếu như khách hàng tiềm năng của bạn bao gồm cả nam giới, 1 giao diện quá nữ tính hoặc quá trẻ con thì sẽ khiến đối tượng người dùng này rời bỏ bạn
2. Quá nhiều chữ hoặc quá khó hiểu. Đặc biệt là nếu bạn sử dụng nhiều thuật ngữ chuyên ngành thì đây có thể là lý do người dùng không tiếp tục ở lại.
3. Ngôn ngữ giao tiếp thiếu tính cá nhân. Người dùng thường không thích những gì mà không dành cho họ. 
4. Sử dụng quá nhiều quảng cáo. Những banner quảng cáo quá to, chiếm hết màn hình sẽ che đi các thông tin quan trọng và làm nản lòng bất cứ ai
5. Về mặt ngôn từ, nếu bạn sai chính tả và sai ngữ pháp quá nhiều, nó sẽ thể hiện là bạn rất thiếu chuyện nghiệp
6. Nội dung nghèo nàn và chất lượng thấp. Một ví dụ là nếu bạn sử dụng những bức ảnh tối om hoặc là được tải vội trên các stock thì khả năng cao là người dùng sẽ đánh giá bạn không đủ trau truốt cho sản phẩm và không đáng tin cậy.

Test 5 giây

Có 1 phương pháp để đo lường về ấn tượng đầu tiên cho thiết kế là sử dụng phương pháp test 5 giây. Để thực hiện, bạn sẽ chọn ra một màn hình sản phẩm mà bạn muốn test. Có thể là trang chủ của 1 website hoặc là trang thanh toán, nơi mà có tỉ lệ rời bỏ của người dùng là cao nhất, để bạn tìm hiểu xem lý do vì sao mà họ lại rời bỏ sản phẩm tại trang đó. Lẽ dĩ nhiên bạn cũng có thể sử dụng kỹ thuật test 5 giây cho nhiều hoàn cảnh khác nhau, như test về thương hiệu, về logo hoặc là trên wireframe. Nhưng trong bài này thì chúng ta tập trung chủ yếu vào việc đo lường cho thiết kế visual của sản phẩm.

Bạn hãy tìm 1 số ứng viên của sản phẩm, bạn có thể sử dụng test trực tiếp hoặc remote test. Sau khi cho người dùng xem thiết kế trong vòng 5 giây, bạn bắt đầu đặt những câu hỏi như là: Đây là sản phẩm hoặc dịch vụ gì? Bạn nghĩ sao về sản phẩm này và nó dành cho ai? Bạn có biết là thiết kế này về cái gì không? Bạn có biết là bạn có thể làm gì tiếp theo với sản phẩm này ko và hành động nào bạn sẽ quyết định thực hiện ngay sau đó. Bạn có thích sản phẩm này không và nó có đáng tin cậy không..v.v Sau khi thu được kết quả test, bạn sẽ tiến hành phân tích trên 1 bảng câu trả lời và sẽ biết rõ là phần nào trong thiết kế bạn cần phải thay đổi.

Click test

Giúp chúng ta xác định được rằng người dùng có biết đi đúng con đường mà ta đã lựa chọn cho họ không. Bằng cách là tìm hiểu xem đâu sẽ là nơi trên thiết kế mà người dùng sẽ click hoặc touch vào. Thông thường chúng ta sẽ test được 2 thứ trong 1 buổi click test

1. Người dùng có biết click vào đúng nơi mà ta mong muốn không? Tỉ lệ mà được coi là thành công sẽ là 90%.
2. Người dùng sẽ mất bao nhiêu thời gian để hoàn tất 1 tác vụ. Ví dụ như tác vụ mua 1 sản phẩm bao gồm 4 bước: chọn hàng hoá, điền thông tin cá nhân + bao gồm địa chỉ ship, thanh toán và xác nhận. Nếu 1 trong các bước này gây confuse thì họ sẽ cần nhiều thời gian hơn để suy nghĩ trước khi đi tiếp. Và nếu như họ hoàn tất 4 bước này trong 1 khoảng thời gian cho phép thì sản phẩm của bạn đạt yêu cầu về thiết kế trải nghiệm.

Phương pháp thứ 2 để đo lường một thiết kế tốt hay không, đó là đo lường định tính Usability Test. Usability Test là một trong những kỹ thuật phổ biến và thường xuyên được sử dụng nhất trong thiết kế UX. Nó sẽ giúp chúng ta hiểu được những khó khăn hay tiện lợi trong việc sử dụng sản phẩm của khách hàng. 

Chúng ta sẽ tìm thấy điều gì trong 1 buổi usability test?

1. Xem xem người dùng có thể thực hiện được 1 tác vụ hay không và mất bao nhiêu lâu họ thực hiện tác vụ đó
2. Tìm hiểu các vấn đề về tính dễ dùng. Khách hàng sẽ nói về những điểm mà họ cảm thấy khó dùng và cách mà họ mong muốn.
3. Xác định được các điểm rõ ràng và các điểm không rõ, gây bối rối, khó hiểu trên thiết kế của bạn
4. Hiểu được làm sao để lôi cuốn người dùng và làm cách nào thoả mãn người dùng với sản phẩm của bạn.
5. Tìm ra được những vấn đề mà nếu ko xử lý từ đầu chúng ta sẽ có thể đối mặt với khi phát triển thành phần mềm.

Các loại Usability Test

1. Usability Test trên sản phẩm hiện tại

Ví dụ như bạn muốn thiết kế lại 1 website hoặc là một mobile app hiện đang chạy thì bạn có thể thực hiện usability test trên 1 tập người dùng. Từ đó sẽ xác định được những vấn đề trên sản phẩm hiện tại cần phải cải tiến. Thông thường thì sẽ có rất nhiều các vấn đề nên bạn sẽ cần phải đặt thứ tự ưu tiên cho các yêu cầu. Sau khi đặt thứ tự ưu tiên thì ta sẽ tiến hành cải tiến sản phẩm đó cho phù hợp.

2. Usability test trên sản phẩm của đối thủ

Từ những ý kiến của người dùng, chúng ta sẽ xác định được đâu là điểm mạnh và đâu là điểm yếu của các sản phẩm đối thủ. Điểm mạnh thì ta có thể tránh đối đầu, còn điểm yếu thì chúng ta có thể tìm phương pháp vượt trội hơn để giải quyết vấn đề này của khách hàng. Phương pháp này đặc biệt hữu ích khi mà bạn muốn tìm một ý tưởng về sản phẩm hay một chức năng mới.

3. Usability Test trên wireframe

Trong 2 bước explorer và define chúng ta đã thực hiện vẽ wireframe cho sản phẩm và cuối của mỗi bước chúng ta đều thực hiện usability test. Wireframe rất dễ thay đổi vì chúng ta chưa đưa vào các đối tượng đồ hoạ. Do đó, chúng ta có thể thực hiện việc usability test nhiều lần và nhanh chóng. Việc này sẽ giúp chúng ta tìm ra những vấn đề về cấu trúc thông tin, bố trí các thành phần chức năng, trước khi chuyển sang bước thiết kế đồ hoạ.

4. Usability Test trên Visual Design

Sau khi usability test trên wireframe, gần như bạn chắc chắn là các vấn đề về cấu trúc và thông tin trên sản phẩm là đã được giải quyết. Tại bước test trên Visual Design, bạn sẽ tìm hiểu xem với các thành phần giao diện đồ hoạ như màu sắc, typography và các icon thì sản phẩm của bạn còn dễ dùng không và có bị khó hiểu ở đâu không. Điều này sẽ giúp bạn tiết kiệm rất nhiều chi phí trước khi bước vào bước phát triển thành ứng dụng.

5. Usability Test trên sản phẩm đã phát triển xong

Sau khi mà sản phẩm qua tay developer thì chúng ta tiếp tục cần phải usability test. Điều quan trọng của bước test trên sản phẩm đã phát triển xong là cần phải xác định xem animation, các chuyển trang màn hình và các tương tác trên sản phẩm có dễ dùng không. Đôi khi chúng ta còn phát hiện ra rất nhiều bug trong quá trình usability test này bưởi vì người dùng thường không sử dụng các loại dữ liệu test mà ta mong muốn.

Như vậy là chúng ta thấy rằng ở trong tất cả các bước trong quy trình của chúng ta, chúng ta đều phải thực hiện usability test, chỉ trừ các bước liên quan đến research người dùng và tập hợp thông tin. Việc đưa người dùng vào những bước đầu tiên của sản phẩm sẽ giúp cho thiết kế của chúng ta luôn luôn xoay quanh các trải nghiệm của họ và đạt được hiệu quả tốt nhất.

Các bước thực hiện

Bước 1: Xác định kiểu test

Chúng ta sẽ khám phá các bước để thực hiện 1 buổi usability test. Bước 1 là xác định kiểu test. Như là test trên sản phẩm đã có hay là test trên wireframe. Và chúng ta sẽ remote test hay test trực tiếp với người dùng.

Bước 2: Mời các ứng viên

Chúng ta sẽ mời 5 ứng viên tham gia buổi usability test. Trong bước discover chúng ta đã làm quen với rất nhiều kỹ thuật để tìm danh sách các ứng viên cho buổi test của chúng ta.

Bước 3: Tạo các tác vụ và kịch bản người dùng

Tại bước này thì chúng ta sẽ có một số các cách tiếp cận khác nhau.

1. Yêu cầu khách hàng thực hiện 1 tác vụ nào đó và kịch bản người dùng (scenario) để thực hiện tác vụ đó. Và chúng ta sẽ quan sát được những vấn đề khi họ cố hoàn thành tác vụ đó và mất bao nhiêu thời gian để họ hoàn thành.
2. Mời người dùng tự khám phá sản phẩm, tức là think-aloud (tức là nói to lên) về những vấn đề mà họ gặp phải. Qua đó thì ta hiểu được người dùng gặp vấn đề ở đâu và trên màn hình nào.
3. Đặt các câu hỏi mở, ví dụ như: bạn cảm thấy thế nào khi sử dụng sản phẩm, bạn thích điều gì, không thích điều gì về sản phẩm? Bạn đánh giá điểm từ 1 đến 10 cho sản phẩm này??..

Và tại bước 3 này thì chúng ta phải quyết định cách tiếp cận nào sẽ được áp dụng và chuẩn bị các đầu vào cho buổi test.

Bước 4: Chuẩn bị buổi test

Để buổi test diễn ra xuôn xẻ hãy chuẩn bị các yếu tố tốt nhất cho buổi test bao gồm

1. Phòng test gọn gàng và không bị làm phiền, có thể có trà và cà phê
2. Các thiết bị test kết nối internet
3. Các phần mềm ghi màn hình của laptop hoặc camera
4. Các thông tin về sản phẩm được in sẵn ra giấy (bao gồm các kịch bản người dùng và thông tin kỹ thuật như account/mật khẩu để truy cập)

Bước 5: Thực hiện test

Chúng ta sẽ giải thích với người dùng về việc làm sao mà buổi test diễn ra. Nói rõ về việc họ sẽ được ghi hình và xin phép họ về điều đó. Nói với họ về sự quan trọng của những ý kiến của họ đối với sản phẩm. Sau đó thì chúng ta tiến hành test theo kịch bản đã được đề ra. Hãy chú ý:

1. Người dùng không bao giờ có lỗi. Nếu họ không hiểu, ko biết cách làm hoặc ko sử dụng được, đó là lỗi của sản phẩm và UX designer. 
2. Tăng cường think-aloud protocol. Tức là bảo họ hãy nói rõ và nói to những gì họ nghĩ, những gì họ đã phát hiện ra và họ cố làm.. Càng nhiều càng tốt.
3. Luôn luôn để người dùng nói, đó là điều quan trọng, đừng bao giờ dừng họ lại vì một lý do nào đó. Thêm nữa hãy dành thời gian để họ nghĩ và cố hoàn thành tác vụ, không giục giã hay tỏ ra suốt ruột.
4. Nếu người dùng hỏi bạn những câu như "cái nút này để làm gì vậy", hãy bỏ qua và bảo họ "bạn hãy nói những gì bạn nghĩ". trong suốt buổi test, đừng nói về sản phẩm nữa. Đấy là thời điểm của người dùng.

Chúng ta sẽ ghi chép lại ý kiến của người dùng vào một tài liệu và tiếp đến bước thứ 6, phần tích kết quả,.

Bước 6: Phân tích kết quả và thay đổi sản phẩm

Chúng ta sẽ xây dựng 1 Issue Blacklog. Sau đó có thể thực hiện 1 buổi workshop để quyết định xem vấn đề nào là quan trọng nhất và phải tập trung làm trước, bằng cách đánh các điểm ưu tiên cho mỗi vấn đề.

Cuối cùng thì chúng ta sẽ bắt tay vào cải tiến sản phẩm cho phù hợp. Và luôn luôn nhớ thực hiện tiếp các buổi usability test sau khi đã cải tiến sản phẩm để có được 1 sản phẩm tốt nhất.

A/B testing hay còn gọi là split test hoặc multivariate test, chúng ta sẽ thực hiện việc test trên 2 phương án design khác nhau để biết được cái nào được lựa chọn bởi người dùng.

Điểm mạnh của A/B Testing là rất đơn giản. Bạn chỉ việc tạo ra 2 phương án thiết kế và thực hiện đo trên người dùng. Phương án nào có tỉ lệ chuyển đổi vượt trội so với còn lại thì sẽ được lựa chọn. Hoàn toàn đây là phương pháp định lượng theo đo lường và không quan tâm đến vấn đề định tính.

Điểm yếu của A/B Testing là không nói cho bạn biết vì sao 1 phương án lại được lựa chọn nhiều hơn. Nếu bạn muốn biết điều đó, hãy áp dụng những phương pháp đo lường định tính như interview và usability test. Khi đó người dùng sẽ nói với bạn là vì sao họ lại lựa chọn như vậy.

Dưới đây là một số chú ý bạn cần biết khi tiến hành A/B Testing.

Một số các chú ý

1. Đừng test những case quá nhỏ bé như là thay đổi màu của button

Hầu hết các trường hợp đó, thường không có kết quả có giá trị trả về. Bạn nên test những trường hợp như cấu trúc thông tin, wording hay microcopy. Ví dụ như là trên trang chủ ứng dụng, bạn có thể A/B test cho 2 kiểu menu chức năng như sau: Kiểu A sử dụng grid đơn giản với tên chức năng ngắn gọn. Và kiểu B là menu dọc với tên chức năng dài, có thể kèm theo description nhưng lại đòi hỏi phải cuộn màn hình.

2. Đừng bỏ cuộc sau lần thất bại đầu tiên

Bạn cần phải chấp nhật một sự thật là hầu hết các A/B testing ko mang lại kết quả. Theo thống kê thực tế, chỉ 1/8 test là thành công - tức là có giá trị về mặt thông tin. Hầu hết các test ko có ý nghĩa hoặc không tốt hơn bản hiện tại. Nhưng đừng từ bỏ chúng, hãy tiếp tục cho đến khi đạt được mục tiêu. Một số bạn không tin vào A/B Testing vì đã từ bỏ ngay lần thất bại đầu tiên và bạn không nên là 1 trong những người như vậy.

3. Đừng dừng test quá sớm

Thực tế thì A/B Test bạn sẽ cần quan tâm đến 2 yếu tố đó là sample size và time required. 2 yếu tố này là số lượng visitor tối thiểu và thời gian tối thiểu để chạy test ra được kết quả có giá trị. Để tính được 2 con số này, bạn phải dựa vào nhiều các đầu vào khác nhau và sẽ cần các công cụ hoặc các công thức đo để có thể tìm ra. Trên hình bạn có thể thấy 1 công cụ online của website abtasty.com giúp chúng ta về điều đó, bạn có thể tìm thêm các công cụ khác cho mình.

4. Nếu không đủ traffic, hãy dừng A/B Test

Rõ ràng là mỗi A/B Test sẽ cần một số lượng visitor tối thiểu, nếu sản phẩm của bạn có số visitor quá nhỏ thì sẽ phải mất nhiều ngày để hoàn tất một A/B Test. Khi đó thì chúng ta đã lỡ cả công việc rồi. Do đó A/B Test chỉ có hiệu quả nếu sản phẩm của bạn đã có 1 traffic nhất định. Trong trường hợp đó, bạn có thể sử dụng usability test, test 5 giây hoặc click test để họi trực tiếp khách hàng xem họ sẽ chọn phương án A hay là B.

Thực hiện A/B Test

Bước 1: Xác định mục tiêu

Tại bước này chúng ta sẽ xác định xem cần phải test vì mục đích gì, ví dụ là: tăng tỉ lệ chuyển đổi hay giảm tỉ lệ rời bỏ sản phẩm của chúng ta.

Bước 2: Giả thuyết

Tại bước thứ 2 thì chúng ta sẽ phân tích thực trạng của sản phẩm và lên danh sách các giả thuyết, ví dụ như: vấn đề của sản phẩm chúng ta là gì? nó ở đâu và cách giải quyết có thể là gì?

Bước 3: Sắp xếp và đánh chỉ số ưu tiên cho các giả thuyết

Sau bước 2 thì chúng ta sẽ có một danh sách các giả thuyết về sản phẩm. Chúng ta sẽ phải sắp xếp chúng trong 1 file Excel và đánh chỉ số ưu tiên cho chúng. Rõ ràng là A/B Test sẽ tiêu tốn một khỏang thời gian để hoàn thành (có thể đến vài tuần lễ), do đó nếu chúng ta không xác định đúng cái gì sẽ cần test trước, cái gì cần test sau thì hiệu quả của chiến dịch có thể bị giảm sút.

Bước 4: Cài đặt A/B test

Tại bước số 4 chúng ta sẽ tạo một công cụ để test và đo lường kết quả. Bạn có thể sử dụng những công cụ trên thị trường để hỗ trợ việc này, như là Optimizely, VWO and Unbounce.. mà không cần tự phát triển.

Bước 5: Chạy test và phân tích kết quả

Sau khi cài đặt lên phần mềm test, chúng ta sẽ thực hiện chạy test và phân tích trên kết quả trả về. Chúng ta hãy nhớ là không được dừng tiến trình test quá sớm, khi mà dữ liệu test vẫn chưa đủ để đưa ra phương án nào là phương án được chọn. Trong hầu hết trước hợp, bạn sẽ không tìm thấy phương án chiến thắng trong chiến dịch A/B Test của bạn, khi đó hãy coi đây là một việc bình thường vì chỉ 1/8 các chiến dịch A/B Test là có kết quả rõ ràng mà thôi. Có thể vấn đề nằm ở đâu đó khác trong sản phẩm của bạn.

Bước 6: Áp dụng theo lựa chọn chiến thắng

Bước cuối cùng là chúng ta sẽ áp dụng theo lựa chọn A hoặc B là phương án chiến thắng trên sản phẩm. Sau đó thì ko dừng lại, chúng ta hãy tiếp tục với các giả thuyết khác. Chúng ta hãy nhớ là tại bước 1 chúng ta có 1 danh sách các mục tiêu và dĩ nhiên chúng ta sẽ không thể đạt được các mục tiêu đó mà không tiếp tục các bài test khác trên sản phẩm. Do đó, sau 1 chiến dịch A/B Testing thành công, không có nghĩa là chúng ta sẽ dừng lại.

Tại bước này, chúng ta sẽ tiến hành chuyển giao thiết kế cho các developer để phát triển phần mềm. 

Lý do cần phải tạo bộ tài liệu chuyển giao

1. Nhìn bản design thì các developer sẽ không thể hiểu được chính xác cách mà sản phẩm làm việc. Nó không rõ ràng và lập tức dồn dập các câu hỏi được đặt ra. Sẽ xảy ra sự hiểu sai về thiết kế và khiến công việc của Developer trở nên thiếu hiệu quả.
2. Thông thường một ứng dụng mobile hạng trung bình nhỏ sẽ cần đến tầm 100 màn hình và cực khó để link chúng với nhau trong 1 câu chuyện.
3. Chưa kể những vấn đề về phần mềm tương thích như là Sketch trên Mac, hoặc cấu hình thấp trên máy tính của developer có thể sẽ khó khăn khi mở 1 file design hàng trăm MB.

Một hoạt động chuyển giao tốt sẽ có được khi bạn hiểu cách mà 1 developer làm việc và những thứ họ cần. Trong hầu hết các trường hợp, sau đây là 1 số các tài liệu mà bạn sẽ cần chuyển giao cho developer

Tạo tài liệu chuyển giao

1. Các tài liệu thiết kế và các tài nguyên liên quan.

Trong hầu hết các trường hợp thì khi bạn chuyển giao 1 bộ file Photoshop có thể là đủ, vì ở tại Việt Nam, hầu hết developer có những kỹ năng cơ bản sử dụng Photoshop. Nhưng nếu chuyển file Sketch hoặc XD thì hầu hết là các developer sẽ không thể sử dụng được. Khi đó bạn có thể dùng một số các công cụ như là Measure, Avocode hoặc Zeplin. Nếu bạn dùng Invision thì có thể sử dụng Invision Inspect để chuyển giao tài liệu thiết kế.

2. Prototype & Interaction

Ngoài các tài liệu thiết kế thì tài liệu thứ 2 rất quan trọng cần chuyển giao là các tài liệu về luồng màn hình để thể hiện cách mà chúng tương tác. Chúng ta có những tài liệu như task flow, sitemap.. nằm trong bộ tài liệu Design Brief mà chúng ta đã tập hợp tại bước đầu tiên, bước lập Plan của quy trình này.

3. Microcopy

Tại bước vẽ digital wireframe, chúng ta đã bắt đầu xây dựng 1 bộ tài liệu gọi là Microcopy để định nghĩa các ngôn từ giao tiếp trực tiếp với người dùng như là các label, placeholder, thông báo lỗi, hướng dẫn... Và trong quá trình làm visual design, chúng ta tiếp tục bổ sung vào tài liệu này. Bây giờ là lúc chuyển giao chúng cho các developer để áp dụng trên sản phẩm.

4. Hifi Prototype

Sau khi thiết kế visual design là các màn đồ hoạ hình tĩnh xong, để mô tả về các tương tác phức tạp trên màn hình và các animation, thì chúng ta đã có 1 bước xây dựng Hifi Prototype. Và chúng ta cũng phải chuyển giao tài liệu này cho developer, để họ có thể hiểu rõ hơn về sản phẩm và code cho đúng với ý đồ thiết kế.

Chú ý cho Designer

Thứ nhất là hãy đặt tên các file cho rõ ràng về tổ chức, có thể bạn phân bổ trong các thư mục khác nhau với những cái tên được đánh số thứ tự. Vì lý do là thông thường thì chúng ta có thể nghĩ 1 ứng dụng chỉ có vài chục màn hình và dự án sẽ kết thúc sau 1 thời gian ngắn. Nhưng thực tế thì lại khác hẳn, hầu hết các dự án sẽ phình to lên tới hàng trăm màn hình và các phiên bản phân mảnh khác nhau. Khi đó, vấn đề tổ chức thư mục làm việc là rất quan trọng để tiết kiệm thời gian cho bạn.

Thứ hai là đừng xoá các phiên bản cũ mà chỉ lưu vào 1 thư mục lưu trữ. Rất có thể bạn sẽ phải tìm lại chúng trong tương lai, trong các dự án khác hoặc thay đổi bất thường. Hiện nay thì giá lưu trữ, đặc biệt là cloud computing rất rẻ, do đó bạn có thể lưu chúng trên cloud cho an toàn.

Chú ý thứ thứ ba là hãy tổ chức file thiết kế cho sạch sẽ và rõ ràng. Cũng giống như việc đặt tên file, file thiết kế có thể sẽ phải nâng cấp nhiều lần. Ví dụ trong Photoshop bạn có thể lưu trữ các layer trong các thư mục layer và đặt tên các object cho dễ hiểu. Hãy xoá đi những layer không cần thiết thay vì chỉ ẩn đi, nó sẽ làm cho kích thước file phình to rất nhanh và giảm hiệu quả công việc. Trong sketch cũng tương tự, chúng ta có thể tạo ra các thư mục, đánh số thứ tự cho các thư mục và đổi tên các thành phần giao diện cho dễ quản lý.

Review

Sau khi chuyển giao cho developer, sẽ có một thời gian để lần lượt từng chức năng được hoàn thành. Đây là lúc bạn cần phải ngồi lại cùng developer để thảo luận xem có điều gì không đúng hay còn thiếu so với thiết kế. Thường thì khi phát triển thành sản phẩm, một số lỗi sẽ lộ ra, có thể là do giới hạn của công nghệ hay độ phức tạp là quá lớn... khi đó designer và developer sẽ cần ngồi lại và cùng đưa ra phương án giải quyết.. Các bạn sẽ làm việc này cho đến khi sản phẩm hoàn thành việc phát triển.

Kết luận

Việc thiết kế trải nghiệm người dùng cho 1 sản phẩm về bản chất là không bao giờ kết thúc. Chúng ta có thể đã hoàn thành một mục tiêu nào đó trên sản phẩm. Nhưng các mục tiêu mới thì lại không bao giờ dừng lại. Đến đây hầu hết công việc của chúng ta là thực hiện các đo lường, sử dụng các công cụ đã được cài đặt trên sản phẩm, sau đó tìm ra những vấn đề mới và tiếp tục cải tiến và nâng cấp thiết kế.

Dù sao thì khi bạn học đến đây, bạn cũng đã hình dung được 1 quy trình đầy đủ về thiết kế UX và nắm được 1 số các công cụ, cách làm và đặc biệt là các từ khoá để bạn có thể tiếp tục tìm hiểu thêm nếu muốn đi sâu vào. Tôi tin rằng bạn cũng sẽ giống như tôi, có 1 cảm giác rất lạ khi mà có 1 cái nhìn tổng thể về toàn bộ câu chuyện của thiết kế trải nghiệm người dùng. Có thể thấy rằng thiết kế trải nghiệm người dùng cũng không quá khó như ta nghĩ và hoàn toàn có thể nắm bắt được.

Một lần nữa tôi rất cám ơn vì bạn đã cùng với tôi đi hết cho đến bài học cuối cùng này, chúc các bạn thành công trên con đường sự nghiệp của mình.