Amy Blog

Blog cá nhân chia sẻ về hành trình tập làm người lớn của cô gái Tây Nguyên.

Nên thiết kế nút gọi trên website bên trái hay phải màn hình? (Chuyện UX)

Mình viết bài này nhân dịp idol của mình đăng post quyết định nghỉ hưu sau 20 năm đi làm, thấy idol vô tình khiến mình bỗng nhớ lại cuộc tranh luận với cậu em trong team, khi mà cậu em đề xuất đưa nút gọi trên website của công ty qua bên trái. Nhờ bài viết của idol năm 2014 mà mình đã không quá bối rối về câu chuyện thú vị này.

Anh Ngọc Hiếu Advisor Seedcom
Post của ảnh: https://www.facebook.com/ngochieu/posts/10159242406804734

Khi mình hỏi lý do thì cậu ấy liền đưa điện thoại của cậu ấy (nút nhận cuộc gọi nằm bên trái) và một số website thiết kế nút gọi nằm bên trái.

Cậu em sử dụng điện thoại Samsung, giao diện nhận cuộc gọi sẽ như bên dưới:

Màn hình nhận cuộc gọi điện thoại Samsung

Còn mình sử dụng iPhone thì giao diện nhận cuộc gọi như bên dưới:

Nút nhận cuộc gọi của iPhone
Cách nhận cuộc gọi của iPhone khi máy đang mở & khoá

Cậu em cũng mạnh dạn khẳng định rằng, khi cầm điện thoại lướt website, mọi người sử dụng tay trái để lướt nhiều hơn, vì vậy nếu nút gọi nằm bên trái sẽ thuận tiện hơn. Mình biết câu chuyện tranh luận sẽ chẳng đi đến đâu vì không có cơ sở để kết luận. Mình chỉ nhẹ nhàng gửi cho cậu em bài viết "UX – Kể chuyện cái nút Exit" của anh Hiếu, cũng khá lâu rồi nhưng với mình nó luôn có một giá trị vững bền bởi chính nó đã giúp tư duy của mình đa chiều hơn rất nhiều.

Nút kêu gọi hành động (Call to action – CTA) là yếu tố tương tác quan trọng của bất kỳ giao diện người dùng nào trên website và mobile/tablet. Mục đích chính của chúng là khiến người khác thực hiện một hành động nhất định, ví dụ như mua, liên hệ, đăng ký. Đối với lĩnh vực bất động sản mà team mình đang triển khai, thì nút Call là một trong những "nồi cơm" quan trọng bậc nhất của công ty. Như tiêu đề bài viết mình nêu rõ, nội dung lần này chỉ đề cập về vị trí nút Call, không nói đến các yếu tố khác của việc tạo ra một nút Call thu hút & "ăn tiền" (size, màu sắc, hiệu ứng,...).


Mình xin trích nguyên văn bài viết của anh Hiếu:

Hôm rồi ở công ty tôi có một chuyện khá thú vị, chỉ là về một cái nút Exit thôi mà 2 team tranh luận mãi mới ra được kết luận. Đầu đuôi như sau:

Hầu hết các dịch vụ của ngân hàng đều bắt đầu từ cái form đăng ký, trong các form đăng ký đều có một nút Exit bên trên. Khi bấm vô đó thì sẽ hiện lên 1 cái lightbox confirm lại là “Bạn có thiệt sự muốn ngưng không?”, ở dưới sẽ là 2 lựa chọn Yes và No.

Vì form đăng ký chính là “nồi cơm” của bất kỳ ngân hàng nào, nên lẽ dĩ nhiên là chúng ta không muốn người dùng exit. Vì vậy positive action ở đây sẽ là “Stay & continue” và negative action sẽ là “Leave now”. Tuy nhiên câu hỏi ở đây là để positive bên trái hay bên phải?

Một câu hỏi tưởng chừng quá đơn giản như vậy mà cuối cùng lại không đơn giản chút nào.

  • Team tôi (SME) thì quyết tâm để bên trái với focus như sau: [[Continue]] – [Leave now].
  • Team hàng xóm (Insurance) thì quyết tâm để bên phải theo thứ tự: [Leave now] – [[Continue]]

(2 dấu ngoặc vuông là có focus, 1 dấu là không focus)

Thiết kế nút exit theo UX

Hai bên tranh luận mãi mà không ra kết quả, team nào cũng chắc chắn rằng mình đúng.

Tuy nhiên khi tranh luận về UX thì không có chuyện “tôi thấy như vậy mới đúng” mà phải đem số liệu ra để nói chuyện. Thế là cả 2 bên làm một loạt A/B test. Điều đau đầu là số liệu ra cũng tương tự như nhau, thậm chí team bên Insurance còn nhỉnh hơn đôi chút. Mọi người bên team tôi nhìn nhau: “Tụi mình giỏi vầy làm sao sai được?!?!!”.

Thế là lại làm thêm một loạt usability test nữa, lần này test kiểu khác, kết quả ra là bên tôi nhỉnh hơn đôi chút. Nhưng như vậy cũng chưa đủ để nói chuyện, vì để công nhận một kết quả nào đó thì số liệu phải vượt trội. Còn như kiểu 51/49 này thì khó mà thuyết phục được ai.

Thế là cả 2 bên raise vấn đề này lên trong Pattern Meeting để tham khảo ý kiến của toàn team UX.
Kể thêm chút về cái pattern meeting này. Vì lính UX rải rác đi khắp các team, nếu mỗi người đều làm 1 kiểu thì UI của ngân hàng thành một nồi lẩu. Vậy nên mọi người mới đặt ra một buổi họp team định kỳ, mỗi 2 tuần một lần vào ngày thứ 6 lúc 3h chiều (mục đích là để họp xong có ở lại uống chút gì thì cũng tiện).

Buổi này mục đích cho mọi người trong team UX tề tựu về để chia sẻ những vấn đề hoặc những cái hay mà mình đang áp dụng ở các dự án. Cái nào hay quá thì sẽ được đưa vô pattern và thành quy tắc để toàn thể team UX áp dụng luôn – gọi là design pattern (không phải design pattern bên code). Ví dụ như chuyện Leave & Continue này, nếu ra kết quả chung cuộc thì tất cả anh em sẽ chạy theo.
Quay lại chuyện cái nút Leave & Continue, tuy lần này được mổ xẻ ở quy mô nguyên team UX nhưng kết quả vẫn theo kiểu 50 người con lên non 50 người con xuống biển. Cùng tất cả mọi người thống nhất được một quyết định khá hợp lý là sẽ làm A/B test lại, tuy nhiên lần này sẽ track thêm một số thông tin phụ khác.

_

Test xong, cả team lại họp lại và cùng nhau review số liệu, khi match các số liệu eye tracking với số liệu về hệ điều hành mà họ đang sử dụng thì ra một điểm rất thú vị: Hầu hết người dùng Mac có xu hướng nhìn vô bên phải để tìm nút positive, và hầu hết người dùng Windows thì lại có xu hướng nhìn bên trái để tìm nút positive.

Phân tích sâu hơn một chút thì ra 1 cái insight mà ai cũng bật ngửa (vì nó quá là hiển nhiên, tuy nhiên lại không có ai nghĩ ra từ đầu): Phản xạ đó xuất phát từ gốc rễ là do cái hệ điều hành, để ý kỹ thì Mac để positive button bên tay phải còn Windows để tay trái.

Thiết kế nút Exit theo đúng UX

Ra được kết luận đó giải pháp rất đơn giản: ngồi xuống với team Front End để nhờ họ viết thêm một đoạn code đơn giản để nhận dạng hệ điều hành người dùng đang xài và đảo vị trí của 2 cái nút. Xong! Sau đó mọi kết quả test đều phản ánh đúng như dự đoán, kết quả ngon lành.

Vậy mới thấy, chuyện tưởng chừng nhỏ như cây kim vậy mà khi đào sâu thì có bao nhiêu thứ thú vị.

Chia sẻ lại kinh nghiệm này, từ nay anh em nếu có gặp trường hợp này thì chỉ cần viết cái code đơn giản đó là xong.

_

Gần đây tôi có gặp và nói chuyện với vài người bạn đang làm UX ở Facebook, họ chia sẻ rằng trước đây Facebook cũng nghiên cứu vụ này rất nhiều.

Thiết kế nút exit đúng ux -1

Insight ra cũng tương tự như chúng tôi, nhưng cuối cùng thì họ quyết định để positive button bên tay phải, lý do là vì họ không muốn confuse user nếu chẳng may ai đó quen dùng Win mà chuyển qua máy Mac ngồi. Trường hợp này ở Facebook xảy ra phổ biến nên họ buộc phải chọn 1 trong 2 đường. Còn ở ngân hàng tôi thì điều này không phổ biến lắm (người dùng có xu hướng dùng máy của mình cho các dịch vụ liên quan đến tài chính) nên giải pháp của chúng tôi là swap 2 nút.

Cái này tùy mọi người quyết định, nhưng biết thêm sâu xa gốc rễ vấn đề để chọn giải pháp mới là cốt lõi của câu chuyện.

Google cũng gặp trường hợp này và họ chọn giải pháp swap giống CBA.


Quay trở lại một chút về câu chuyện nút gọi đặt ở đâu của team mình, đương nhiên mình không có điều kiện và cũng không phải đội ngũ product design chuyên nghiệp để tiến hành nghiên cứu rồi đưa ra con số cụ thể làm cơ sở đi đến quyết định nút Call nằm bên nào là phù hợp.

Hiện tại, để không phát sinh thêm chi phí cuối năm trong mùa dịch Covid-19, mình quyết định vẫn giữ nó như cũ (tức vẫn nằm ở bên phải của trang web). Tuy nhiên, qua năm mình sẽ phải thay đổi lại hình thức cho nó bắt mắt hơn. (>,<)

Giờ bạn có muốn đọc tiếp bài khác không?

[Không, chán rồi] – [[Ok, đọc tiếp]]