Abstraction Hub

IA, UX, UI, User Experiences, Usability, Web Design, Information Architect, HCI

Category: User Experience

Tìm hiểu IA – Slide shared

Ôn lại khái niệm IA qua slide của Perter Morville

IA slide

(Ảnh: Understanding IA – nguồn: Peter Morville)

IA (Information Architect) không phải là khái niệm mới, đây thậm chí là khái niệm cơ bản với những ai muốn học và làm về UX. Trong mô hình The Elements of User Experience của JJG (Jesse James Garrett) thì IA đứng ở lớp thứ 3 từ dưới lên.

IA – kiến trúc thông tin – là một môn học khó, đòi hỏi người tiếp cận nó có tư duy hệ thống, hiểu cách tìm kiếm và xử lý thông tin của người dùng, rồi từ đó xây dựng nên kiến trúc thông tin của sản phẩm (web hoặc mobile).

Cuốn sách tham khảo về IA nổi tiếng là cuốn OReilly – Information Architecture for the WWW, 3rd Ed (2007) của Peter Morville (mới tái bản năm 2015) là một tài liệu căn bản và cũng rất phổ biến với dân làm UX, IA. Tuy nhiên, để giúp bạn tiếp cận với kiên thức căn bản nhanh gọn hơn và dễ hiểu hơn, Morville đã giới thiệu một slide tổng hợp với tựa đề “Understanding Information Architecture” mà qua đó ban sẽ có cái nhìn tổng quan về các vấn đề mà Morville đề cập trong cuốn sách của ông.

Nếu bạn thích học UX bài bản, thì IA là một trong những bước đi đầu tiên và là một trong những kỹ năng quan trọng trong việc xây dựng và phát triển hệ thống thông tin, điển hình là website mà hàng tỷ người dùng đang sử dụng, khai thác hiện nay.

Về IA, tôi sẽ lần lượt giới thiệu các kỹ năng, kỹ thuật trong các blog sau này.

Happy learning! 🙂

Findability Tiki

Bug noted – lỗi cấu trúc thông tin của Tiki

0

(Hình 1: Tiki.vn – nguồn Tiki.vn)

Từ trước tới giờ, thỉnh thoảng tôi vẫn viết về các lỗi thiết kế (UI, service) của các website, việc này không nhằm chê bai hay “tự sướng”, mà là để chỉ ra những thứ ta có thể làm tốt hơn, và bản thân tôi cũng học hỏi từ đó.

Trở lại với Tiki.vn sau sự cố bị từ chối cộng điểm vì ban quản trị nghĩ rằng tôi “copy” bình luận sách từ trên Internet. Sau khi chứng minh là tôi copy từ chính… blog của mình, tôi đã được bổ sung “tiki xu” trở lại. Nhưng sau đó thì cũng không engage với website này nữa, một phần vì muốn đi lượn phố Nguyễn Xí hơn, và một phần Tiki mở rộng sang đa ngành nghề (tôi biết áp lực tăng trưởng là phải vậy). Tuy nhiên hôm nay cần mua một cuốn mà lười ra phố, nên tôi lại truy cập website này.

Về cơ bản thì hệ thống website Tiki.vn vẫn vậy, ngoài những tính năng cơ bản thì có nhiều không gian được thiết kế lại để dành cho quảng cáo hơn. Cấu trúc thông tin top-down vẫn như cũ, nghĩa là danh mục chính, rồi các cấp danh mục nhỏ hơn qui hoạch bên trong.

00

(Hình 2: on top banner của Tiki )

Tuy nhiên, đi sâu vào phần tìm kiếm sách, tôi nhận thấy 2 vấn đề “cản trở” người dùng tìm được thông tin mình cần trước khi ra quyết định mua sách:

Vấn đề #1  Cover to detail: Nghĩa là cấu trúc thông tin bên ngoài và thông tin chi tiết bên trong không có sự đồng nhất. Mặt này có 2 điểm: một là mental model của cá nhân tôi nghĩ rằng hình ảnh thumbnail của 1 category sẽ được lựa chọn từ 1 trong những sản phẩm thuộc category đó. Cụ thể là cuốn REWORK đáng ra phải nằm trong phần “Kỹ năng sống – Làm việc” như hình bên dưới:

Tiki1

(Hình 3Category “Kỹ năng sống – Làm việc” nhìn từ bên ngoài với hình ảnh cover là cuốn REWORK)

Nhưng khi click vào bên trong, category này hoàn toàn không có sản phẩm REWORK như tôi hình dung:

Tiki1b

(Hình 4: Bên trong category “Kỹ năng sống – Làm việc”)

Bên cạnh đó, khi vào xem chi tiết category nêu trên, toàn bộ phần thông tin của tên category, menu thứ cấp breadcrumb đều tự động chuyển sang tiếng Anh. Điều này một lần nữa sẽ khiến người dùng “bối rối” bởi không biết “có phải mình vừa chọn sai category hay không?”. Vậy tôi phải làm gì đây? Tất nhiên là phải nhờ tới chức năng “tìm kiếm”, một thành phần cơ bản của IA, và điều này cho thấy vấn đề tiếp theo.

Vấn đề #2  deep organize & breadcrumb: Tôi chủ động gõ từ khóa “reworkd” vào ô tìm kiếm, phần gợi mở (suggestion) hiển thị ra cuốn REWORK nhưng khi gõ “enter” để tìm kiếm thì kết quả không tìm thấy. Ok, tôi sửa lại từ khóa thành “rework” và tìm thấy thông tin sản phẩm mình mong muốn:

Tiki2

(Hình 5: Hình ảnh sản phẩm REWORK)

Từ vị trí này, tôi để ý lên phần menu breadcrumb. Tại sao tôi phải làm vậy? một lần nữa, nó là logic theo mental modal của user’s brain. Lý do là ở các bước đã nêu ở trên, tôi là một người dùng đã tìm sản phẩm (hoặc đã được định hướng tìm sản phẩm) tại một category không chính xác.  Chính vì thế nên tôi mới thắc mắc là sản phẩm này nằm ở category nào ? và làm sao để tìm thấy nó?

Theo thứ tự, tôi bắt đầu tìm theo chiều cấu trúc từ trong ra ngoài để tìm category chính thức của sản phẩm. Thứ tự này bao gồm:

  • Trang chủ ->
    • English books ->
      • Business – Investing ->
        • Entrepreneurship – Small Business

Vậy là có tới 4 cấp category dẫn tới sản phẩm tôi muốn tìm mua. Tới đây, tôi lần lượt bấm vào các category theo thứ tự từ trong ra ngoài, từ dưới lên trên với mong muốn trở về đúng category listing của sản phẩm. Nhưng kết quả tôi nhận được lại là các category không có dữ liệu bên trong:

3-1

(Hình 6: category Entrepreneurship – Small Business không có dữ liệu bên trong)

Tiki3

(Hình 7: category Business – Investing không có dữ liệu bên trong)

Sau cùng, không biết làm thế nào để tìm được đúng category cần thiết, tôi bấm vào “English book” thì hệ thống đưa tôi trở về trang chuyên các sản phẩm sách tiếng Anh, mà trong đó, tôi gặp lại category “Kỹ năng sống – Làm việc” ở Hình 3 phía trên. Là một người dùng, tôi hoàn toàn mất phương hướng (completely lost).

Nhìn ở góc độ tổng thể, website vẫn vận hành bình thường. Các đơn hàng có lẽ vẫn đều đặn và thỏa mãn chỉ tiêu KPI của đội ngũ kinh doanh, nhưng không chắc thời gian tìm kiếm trung bình đối với một sản phẩm rồi từ đó dẫn đến hành vi đặt hàng, mua hàng của người dùng là bao lâu? Sẽ ảnh hưởng tới conversion rate có đáng kể hay không? Có thể, mọi thứ là không đáng kể.

Bài viết này tôi muốn chỉ ra một điều đơn giản: IA luôn có thể làm kỹ lưỡng hơn nữa để sản phẩm phục vụ người dùng tốt hơn, trải nghiệm qua đó cũng tăng lên, bởi e-Commerce, nói một cách khác, là để tiết kiệm thời gian.

Findability is a critical success factor for overall usability. If users can’t find what they need through some combination of browsing, searching, and asking, then the system fails. – IA definition, Peter Morville

Có 1 designer lâu năm nói với tôi rằng “Người làm thiết kế có nghề thì có thể nhìn ra vấn đề sau vài bước quan sát”. Bản thân tôi cũng đang luyện rèn kỹ năng đó.

Noted:

  • IA (Information Architect ): Kiến trúc thông tin.

Living UX, Are you?

Nếu bạn là 1 người làm về UX, CX, bạn có nên lưu ý hơn trong cuộc sống?

driving-bad-5

(Ảnh: bad driving – nguồn: drivingbad.vn)

Có một lần nói chuyện với Kiên 44 và mấy bạn làm graphic design mình có nghe được idea rằng “dân làm UX thì thông thường sẽ mang lại cuộc sống dễ chịu hơn cho những người xung quanh”. Ngẫm nghĩ ra thì thấy cũng có lý, nhưng chắc là ít người để ý điều này, hoặc là họ có làm về UX, nhưng lại chưa thực sự để ý tới việc mang UX vào cuộc sống?

Vậy Living UX là gì?

Nói một cách đơn giản, đó là tạo ra phong cách sống của chính bạn, mà qua đó bạn có thể mang lại cho những người xung quanh (bạn bè, gia đình, đồng nghiệp…) sự tiện lợi, am hiểu, và hỗ trợ tốt nhất. Nghe vẫn có vẻ mơ hồ, nhưng đôi khi đó là những điều đơn giản mang lại cảm giác, “trải nghiệm” thích thú, thoải mái cho mọi người.

Tôi sẽ chia sẻ một vài ví dụ, mà tôi tin rằng, ai trong chúng ta cũng đã từng làm như thế hoặc cảm thấy thoải mái khi đón nhận nó.

Ví dụ ở công ty

  • Sáng sáng đi làm, bạn có mỉm cười tươi tắn và nói “chào buổi sáng” với các đồng nghiệp? Lúc trước công ty mình có 1 bạn nữ làm lễ tân, sáng nào cũng vui vẻ chào đón mọi người, ai cũng thấy thoải mái và thân thiện, cảm giác vui vẻ khi bắt đầu 1 ngày mới. (Giờ thì bạn ấy stress vì công việc nên bỏ thói quen đó rồi )
  • Công ty có vài dụng cụ pha cafe (French press, Sunbeam..), mỗi lần sử dụng xong, bạn có bỏ bã cà phê và rửa sạch hay không? (Để người dùng sau bạn có thể sử dụng được luôn)
  • Công ty sử dụng Skype chat để trao đổi thông tin trong các dự án, theo thói quen, các đồng nghiệp sẽ đặt “book-mark” các group chat. Rồi 1 ngày tôi thấy 1 anh đồng nghiệp chat nhầm liên tục giữa 2 – 3 group chat dự án, để ý một chút thấy tên dự án khá giống nhau như: Willing donate website, Wendy website, Weird management… Tôi đoán hành vi sử dụng của bạn này là: Vào skype search, gõ “W…” và enter… Điều này dẫn tới khi thao tác nhanh, thường xuyên gõ nhầm “room” chat, tôi lẳng lặng đổi tên các group cho bạn ý rồi thông báo lại. Làm quen với 1 “group name” mới vẫn tốt hơn là nói chuyện “nhầm” với khách hàng.
  • QA vật lộn với phân loại bug trong JIRA, tôi nói chuyện và tạo thêm “custom field” cho họ.
  • Làm việc với khách hàng lệch múi giờ tới 3-4 tiếng đồng hồ, tôi dậy sớm hơn, kiểm tra email, trả lời và sắp xếp sẵn mọi thông tin để khi các đồng nghiệp khác tới văn phòng, mọi thứ đã sẵn sàng.
  • Khi bạn muồn nghỉ phép dài ngày (hơn 1 ngày), ngoài việc báo cho người quản lý, bạn có sắp xếp công việc và chuẩn bị các phương án dự phòng (plan B) để người khác có thể giúp bạn khi bạn ko có ở đó??
  • Có anh PM (Project manager) viết báo cáo hàng ngày cho khách hàng, trong email không bao giờ cách dòng giữa các ý chính, đọc rất nhức mắt, tôi đã góp ý để nội dung email “dễ đọc hơn”. Cũng có PM viết báo cáo quá dài, tôi cũng góp ý bởi khách hàng (các agencies) họ “không rảnh” để đọc báo cáo dài lê thê, cái họ cần là % completion, overall status, blocker issues… Tóm lại nếu là PM, bạn cần nghĩ rằng làm sao để khách hàng đọc báo cáo của bạn trong..1 phút là nắm đủ thông tin cơ bản của dự án. Bởi cũng như tôi, họ có 20-30 dự án cần theo dõi.
  • v.v…để ý 1 chút, có rất nhiều ví dụ phải ko?

Ví dụ trong cuộc sống

Trong cuộc sống thì nhiều vô kể, nhưng tôi ví dụ ở một số việc đơn giản, mà chắc rằng không ít lần bạn cảm thấy không thoải mái, vậy tại sao bản thân mình không “improve” nó?

  • Đi xe trong thành phố, bạn có bật đèn chiếu pha xa (đèn far) hay không? Nếu có, thì bạn nên điều chỉnh, bởi nó gây chói mắt và khó chịu cho người đi đối diện.
  • Khi dừng đèn đỏ, và khi chỉ còn 3-4 giây nữa là chuyển sang đèn xanh, bạn có bấm còi không? Và nếu đèn đỏ báo 50 giây, bạn có tắt máy?
  • Vẫn là khi dừng đèn đỏ, bạn có nhường đường ở những nơi cho phép xe rẽ phải?
  • Khi đứng chờ thang máy trong tòa nhà (chung cư, văn phòng) và khi thang đến, bạn có đứng sang 1 bên để dành chỗ cho người trong thang máy đi ra? Và nếu vào trước, bạn có bấm nút [<>] để cho những người khác đi vào không bị cửa sập vào người?
  • Khi bước qua cửa kinh cường lực và có người đi phía sau, bạn có dùng tay đỡ cánh cửa để giúp người đó đi qua thuận tiện hơn?
  • Đi chơi về muộn hoặc không về ăn cơm, bạn có gọi điện hoặc nhắn tin báo cho người thân? (a kind of informative feedback). Điều này cũng giống như khi bạn có hẹn ai đó và đến muộn, bạn cần “update” thông tin cho họ. Con người là đối tượng luôn “đói” thông tin và luôn “thiếu kiên nhẫn”, vì vậy việc cập nhật thông tin của bạn vô cùng hữu ích.
  • blah blah…

Đọc đến đây bạn thấy có rất nhiều ví dụ phải không? nó nhỏ nhặt, lắt nhắt? hay bạn cảm thấy phải để ý quá nhiều thứ? Hãy suy nghĩ đơn giản, bởi đó là cách giúp bạn thay đổi “thói quen” (building habit) và làm mọi thứ tốt hơn. Để làm được việc này, bạn phải “educate” chính bản thân mình.

Treat the client like 2-year-old child

(Mang lại cho khách hàng những thứ đơn giản, dễ hiểu)

Capture

(Hình 1: user’s guessing. Nguồn: www.satukyrolainen.com)

Làm việc trong lĩnh vực digital production  mà cụ thể hơn là offshore development hay outsourcing thì communication is the key. Mỗi dự án từ lúc lên ý tưởng, cho tới lúc bàn giao sản phẩm cho khách hàng luôn cần giao tiếp liên tục để chắc chắn rằng các bên tham gia hiểu ý nhau. Nghe thì đơn giản, nhưng đây luôn là nguồn gốc của mọi vấn đề. Mà thường là các bên không hiểu nhau. Users không hiểu phần mềm, nghiệp vụ (business process) dẫn đến bực tức và “ghét” phần mềm một cách tự nhiên. Lâu này thành định kiến là “phần mềm khó sử dụng”.

Case study: How to test?

 UX xuất hiện khắp mọi nơi, và nói một cách đơn giản là một người có UX mindset sẽ chú trọng vào bất cứ thứ gì mình đưa ra (kể cả là lời nói – UX có dính tới psychology cũng 1 phần là như vậy). Câu truyện của sáng nay rất đơn giản và phổ biến, nhưng tôi ấn tượng với câu nói của boss. Nôm na là như sau:

  • Boss: Khách hàng muốn test toàn bộ qui trình đăng ký, thanh toán credit card mà ko bị charge phí, nhận email confirmation. Mình có cung cấp được chưa?
  • PM (Project Manager): Mình đã làm 1 tools migrate khách hàng cũ, với khách hàng mới thì không cần lo vì hệ thống tự generate confirmation code, khách hàng cũ chạy tools, ngoài ra cần migrate data demo sang server staging, làm sạch dữ liệu test, by pass thẻ visa…
  • Boss: I don’t fucking care. Please treat me like 2-year-old child. Client even likes 1-year-old child. I don’t know and don’t understand whatever you do behind the scenes.
  • PM: Chúng ta sẽ cung cấp sandbox để test, migrate dữ liệu cần khách hàng confirm migrate những gì, blah blah..
  • Boss: Những thứ đằng sau đó không cần giải thích với người dùng, đưa cho họ cái họ cần để test được hệ thống như một người dùng cuối (end-user).

Cá nhân mình thấy hợp lý. Bởi đơn giản những thứ kỹ thuật, thiết kế.v.v… là việc của mình, khách hàng thuê mình vì điều đó, còn với họ, họ cần tiếp cận với sản phẩm như một đứa trẻ, tiếp cận và học hỏi, test một cách dễ dàng nhất. Điều muốn nói ở đây là giao tiếp. Communication is the key in UX. Lắng nghe, rồi hiểu đúng cái mà khách hàng cần, đưa cho họ thông tin/câu trả lời đơn giản và dễ hiểu nhất. Họ không quan tâm bạn là ai, thương hiệu của bạn là gì? bạn sử dụng công nghệ gì? All bullshit things. Cái họ cần là vấn đề của họ được giải quyết.

Protect Users’ Work

Nhắc lại khái niệm usability căn bản: Đừng cản trở người dùng

Foody-update

(Hình 1: Ảnh chụp màn hình Foody app yêu cầu người dùng nâng cấp phiên bản mới)

Dạo này viết lách về Foody hơi nhiều, nhưng có lẽ mobile app của Việt Nam ít người review quá, nên nhân dịp gặp một case study mới, mình lại “tám” một chút về nó.

Case study

Tình huống người sử dụng lần này khá đơn giản: Tôi và bạn gái hẹn nhau đi ăn tối, và quyết định khám phá 1 chi nhánh mới mở của M2C cafe. Trong đầu không nhớ rõ địa chỉ, vì thế nên nhớ tới Foody app nên lấy điện thoại ra để tìm địa điểm. Hai người chúng tôi dùng một chiếc iPhone 5 và một chiếc iPhone 4, cả hai đều cài ứng dụng Foody từ AppStore. Tuy nhiên, khi bạn tôi mở foody app thì nhận được thông báo “yêu cầu phải nâng cấp phiên bản mới nhất“, nếu không bấm vào CTA “Launch AppStore” thì chỉ có nước thoát khỏi ứng dụng mà thôi. Tôi cũng thử lại một lần nữa với Foody app trên điện thoại của mình và cũng nhận được kết quả tương tự. Câu hỏi đặt ra là:

  • Nhu cầu của chúng tôi (users) là sử dụng app để tìm địa chỉ quán. Chúng tôi không muốn cập nhật vào lúc này, làm sao để đạt được mục đích?
  • Khi bạn đang đứng ở.. ngoài đường, thì khả năng update ứng dựng từ AppStore với mạng 3G của Việt Nam là không khả thi và tốn rất nhiều thời gian, trong khi đó thì bạn đang đói. Thứ mà ứng dụng “yêu cầu” không match với cái người dùng cần.  Mà nếu không update Foody app thì.. có ảnh hưởng gì tới hòa bình thế giới không?

Khái niệm usability căn bản

Tôi không biết bản Foody app v2.7 có gì nổi bật, ngay cả giờ đây sau khi đã cập nhật xong xuôi, thứ tôi cần vẫn chỉ là tìm địa điểm quán ăn / cafe một cách nhanh nhất, tiện nhất khi cần thiết (mà phần lớn tôi đoán rằng user behavior của người dùng sẽ diễn ra ở… ngoài đường). Tôi không thực hiện được điều tôi muốn, không thao tác được chức năng cơ bản nếu không update phiên bản mới, và điều này gọi là blocker bugs trong khái niệm phần mềm.

Prevents developers or testers from performing their jobs. Impacts the development process. – open SUSE – Bug definitions

Đối với interaction design thì điều này phạm phải 2 nguyên tắc cơ bản nhất đó là ngăn cản người dùng thao tác với sản phẩm / thiết bị / ứng dụng phần mềm và không cho phép người dùng ra quyết định đối với tương tác hệ thống. Nghe có vẻ to tát, nhưng thực chất từ chuyên môn gọi là Protect Users’ Work và Autonomy. Cụ thể hơn, 2 nguyên tắc này có thể được giải thích ngắn gọn như sau:

  1. Autonomy: Qui tắc này cho phép người dùng đưa ra quyết định của riêng họ, kể cả với những người kém về mặt thẩm mỹ hoặc yếu trong khâu thao tác với sản phẩm ( Nguyên văn: Enable users to make their own decisions, even ones aesthetically poor or behaviorally less efficient).
  2. Protect Users’ Work: Đây là qui tắc đầu tiên và căn bản của usability design. Ý nghĩa của nó là luôn luôn đảm bảo người sử dụng hoàn thành công việc của mình, đảm bảo công việc của họ được thực hiện thành công. Ngoài ra, nghĩa mở rộng của qui tắc này là đảm bảo người dùng không bị mất thông tin, dữ liệu trong trường hợp không thể tiếp tục thao tác với ứng dụng (vd: mất đường truyền internet, mất password…)

Cải tiến nho nhỏ?

Trường hợp của Foody app không phải là quá khó cải tiến, mà có lẽ ai trong chúng ta cũng biết, với 1 thay đổi nhỏ nhưng sẽ mang lại hiệu quả tích cực hơn với người dùng, ví dụ như: Bổ sung nút lựa chọn “Later” bên cạnh nút CTA “Launch AppStore” để người dùng có quyền lựa chọn cài đặt bản nâng cấp hay tiếp tục sử dụng phiên bản cũ.

Vấn đề ở đây không lớn, nhưng thuộc về khái niệm cơ bản mà có lẽ những người ở vị trí nhân viên phụ trách sản phẩm (Product manager / UX manager ) nên có một checklist để kiểm tra trước khi để sản phẩm go live.

Tham khảo:

  • 10 Usability Heuristics for User Interface Design [URL]
  • First Principles of Interaction Design (Revised & Expanded) [URL] => Cái này rất rất chi là cơ bản 🙂