Câu hỏi: WDU203c - Phần 4: Từ ý tưởng tới bản mẫu tương tác

Đáp án đúng: "Designers repeat and refine ideas". Quy trình thiết kế iterative (lặp) nghĩa là đi qua nhiều vòng phác thảo, làm prototype, đưa cho người dùng thử, rút ra vấn đề rồi chỉnh sửa và làm lại; mỗi vòng ý tưởng được tinh chỉnh dựa trên phản hồi thay vì chốt ngay từ đầu, ví dụ màn hình đăng ký có thể được vẽ lại vài lần sau mỗi buổi thử. "Designers skip testing to save time" sai vì kiểm thử chính là nguồn phản hồi nuôi mỗi vòng lặp, bỏ kiểm thử thì không còn căn cứ để tinh chỉnh. "Designers always follow linear steps" mô tả quy trình tuyến tính kiểu thác nước, đi một mạch từ đầu tới cuối, trái ngược với lặp vốn cho phép quay lại bước trước khi phát hiện vấn đề. "Designers focus only on wireframes" sai vì wireframe (khung bố cục) chỉ là một loại sản phẩm trung gian; vòng lặp áp dụng cho mọi mức, từ phác thảo, wireframe tới prototype chi tiết.

Đáp án đúng: "Stimulates creativity and diverse perspectives". Brainstorming (động não nhóm) là kỹ thuật ideation (lên ý tưởng) trong đó nhiều người cùng đưa ra thật nhiều ý tưởng mà tạm gác phán xét; giá trị của nó nằm ở chỗ mỗi thành viên mang một nền tảng, một góc nhìn khác, ý tưởng của người này gợi ra ý tưởng của người kia nên cả số lượng lẫn độ đa dạng phương án đều tăng. "Ensures immediate solutions are found" sai vì buổi động não chỉ mở rộng không gian ý tưởng, các ý tưởng còn phải được chọn lọc, phác thảo và kiểm thử, không có gì bảo đảm tìm ra giải pháp ngay. "Eliminates the need for further design steps" sai vì sau động não vẫn còn prototyping (làm mẫu thử) và evaluation (đánh giá) trong quy trình thiết kế lặp. "Focuses on individual expertise" đi ngược bản chất làm việc nhóm: lợi ích của động não nhóm là kết hợp góc nhìn của nhiều người chứ không dựa vào chuyên môn của một cá nhân.

Đáp án đúng: "Figma". Wireframe (khung dây) là bản phác bố cục màn hình ở mức thấp, thể hiện vị trí thành phần, điều hướng và nội dung mà chưa quan tâm tới màu sắc hay hình ảnh hoàn chỉnh; Figma là công cụ thiết kế giao diện chạy trên trình duyệt, có frame (khung màn hình), thư viện thành phần và cho nhiều người cùng chỉnh, nên được dùng rộng rãi để vẽ wireframe rồi nâng dần lên mockup và prototype (nguyên mẫu) bấm thử được. "Blender" là phần mềm dựng hình và hoạt họa 3D, hợp với làm mô hình và kết xuất hình ảnh, không phải để sắp bố cục màn hình hai chiều. "Unity" là game engine (bộ máy làm trò chơi) để lập trình trò chơi và ứng dụng tương tác 3D hay VR, quá nặng và sai mục đích cho việc phác khung giao diện. "Maya" là công cụ 3D chuyên cho hoạt họa và kỹ xảo điện ảnh, cũng không phục vụ việc vẽ wireframe.

Đáp án đúng: "A simple, often hand-drawn, representation of a design concept". Low-fidelity prototype (nguyên mẫu độ trung thực thấp) là bản thể hiện thô của ý tưởng, thường vẽ tay trên giấy hoặc dựng bằng khung xám đơn giản, để thử nhanh luồng và bố cục với chi phí rất thấp trước khi đầu tư vào chi tiết; ví dụ vài tờ giấy vẽ các màn hình đặt món rồi đưa người dùng "bấm" bằng ngón tay. "A fully functional product" sai vì sản phẩm chạy đủ chức năng là đích cuối của quá trình phát triển, không phải nguyên mẫu, càng không phải bản độ trung thực thấp. "A detailed visual representation with interactive elements" mô tả high-fidelity prototype (nguyên mẫu độ trung thực cao) với màu sắc, chữ và tương tác gần như thật, tức đúng đầu ngược lại của thang trung thực. "A final version ready for deployment" là bản phát hành sẵn sàng triển khai, đã qua toàn bộ thiết kế, lập trình và kiểm thử, nên không còn là công cụ thăm dò ý tưởng.

Đáp án đúng: "By envisioning how a technology might address the needs identified in formative work". Persona (chân dung người dùng) chưng cất những gì nghiên cứu hình thành (formative research) tìm ra về người dùng, còn scenario (kịch bản sử dụng) là câu chuyện kể persona ấy dùng một công nghệ được hình dung để đạt mục tiêu của mình, nhờ vậy nhóm bắt đầu phác ra lời giải bám đúng các nhu cầu đã phát hiện. Ví dụ kịch bản "Lan mở ứng dụng lúc chờ xe buýt và đặt lại đơn cũ trong hai lần chạm" gợi ngay chức năng cần có. "By enumerating features of the technology being designed" sai vì kịch bản kể hành động và mục tiêu của người dùng chứ không phải danh sách tính năng; liệt kê tính năng là việc của bản đặc tả yêu cầu. "By articulating tradeoffs of different design solutions" chưa đúng trọng tâm vì việc cân nhắc đánh đổi chỉ làm được khi đã có nhiều lời giải cụ thể để so sánh, còn kịch bản ở bước này mới mở hướng thiết kế. "By providing stories that can be put into the ads for the product being designed" sai vì kịch bản là công cụ làm việc nội bộ của nhóm thiết kế, không viết ra để làm nội dung quảng cáo.

Đáp án đúng: "True". Sketching (phác thảo) có hai vai trò. Thứ nhất là tạo ý tưởng: vẽ nhanh nhiều phương án bố cục hay luồng màn hình giúp nhà thiết kế nghĩ bằng tay, so sánh và loại bỏ hướng kém trước khi tốn công làm chi tiết. Thứ hai là truyền đạt ý tưởng: một bản phác thảo đặt lên bàn giúp đồng đội, stakeholder (bên liên quan) hay người dùng hiểu đề xuất và góp ý ngay, nhanh hơn nhiều so với mô tả bằng lời. Chính vì phác thảo rẻ và có vẻ chưa hoàn chỉnh nên người xem dễ phản hồi thẳng thắn. "False" sai vì nó coi phác thảo chỉ phục vụ một trong hai mục đích, trong khi thực tế cùng một tờ phác thảo vừa là công cụ khám phá của nhà thiết kế vừa là phương tiện trao đổi với người khác.

Đáp án đúng: "Do screens contain the right functional components?". Wireframe (khung dây) là bản vẽ khung màn hình ở mức cấu trúc: hộp, nhãn, vị trí các khối nội dung và liên kết giữa các màn, chưa có đồ hoạ và chưa chạy được. Phản hồi trên wireframe trả lời ba câu hỏi về chính cấu trúc đó: bố cục có hợp lý không, nội dung hiển thị có đúng thứ tự không, và các màn có đủ đường đi lại không. Còn việc màn hình có đúng những thành phần chức năng cần có hay không là câu hỏi về phạm vi tính năng, vốn được xác định từ nghiên cứu nhu cầu và kịch bản sử dụng, nên đây là câu không thuộc nhóm. "Does the screen layout make sense?" là câu phản hồi wireframe trả lời trực tiếp vì wireframe chính là bản bố cục. "Is the displayed content ordered correctly?" cũng trả lời được vì wireframe sắp xếp các khối nội dung theo thứ tự ưu tiên. "Do the screens provide adequate navigation?" trả lời được khi các wireframe được nối với nhau thành luồng màn hình.

Đáp án đúng: "All options on this list except GPS". User-entered input (dữ liệu do người dùng chủ động nhập) là thông tin người dùng cố ý đưa vào hệ thống bằng thao tác của mình, khác với dữ liệu hệ thống tự thu qua cảm biến mà người dùng không phải làm gì. "GPS" là cảm biến vị trí: điện thoại tự đọc tọa độ ở nền, nên nó thuộc nhóm đầu vào cảm biến chứ không phải do người dùng nhập, và đó là lý do nó bị loại ra khỏi nhóm. "Text fields where users enter free-form responses" đúng là đầu vào do người dùng nhập vì họ tự gõ nội dung tự do, như ô ghi chú khi đặt hàng. "Widgets like calendar pickers or on/off switches" cũng là người dùng chủ động chọn ngày hay gạt công tắc. "Voice input, like dictation typing" là người dùng nói để nhập chữ, vẫn là hành động có chủ ý. Vì ba loại này đều đúng còn GPS thì không, chọn riêng bất kỳ một loại nào cũng chưa đủ, nên phương án gom ba loại và loại trừ GPS mới là câu trả lời đầy đủ.

Đáp án đúng: "Ability to test core user tasks". Prototype độ trung thực thấp (low-fidelity prototype) như phác giấy hay wireframe trắng đen được làm nhanh, rẻ để kiểm tra luồng và cấu trúc: người dùng có tìm được đường đi và hoàn thành các nhiệm vụ cốt lõi không, ví dụ đặt được một vé xem phim qua chuỗi màn hình vẽ tay. Vì vậy tiêu chí quan trọng nhất khi đánh giá nó là có thử được các nhiệm vụ chính hay không. "Visual style and branding" sai vì màu sắc, phông chữ và thương hiệu cố ý bị bỏ qua ở mức thấp, để người thử góp ý về chức năng thay vì vẻ ngoài. "Use of advanced interaction patterns" sai vì các mẫu tương tác phức tạp khó thể hiện trên giấy và chưa cần ở giai đoạn đầu. "Detailed animations" sai vì chuyển động chi tiết thuộc về prototype độ trung thực cao, khi luồng chính đã ổn định.

Đáp án đúng: "To reflect, explore, and communicate design concepts". Sketching (phác thảo) là cách nghĩ bằng tay: người thiết kế vẽ nhanh nhiều ý tưởng để tự ngẫm lại (reflect), mở rộng các hướng khác nhau (explore) và trao đổi ý tưởng với đồng đội hay người dùng (communicate). Một nét vẽ thô năm phút cho thấy bố cục trang chủ rõ hơn cả đoạn mô tả dài, và vì rẻ nên dễ bỏ đi làm lại. "To finalize the design" sai vì phác thảo thuộc giai đoạn đầu, cố ý để ngỏ, còn chốt thiết kế đến từ prototype độ trung thực cao và kiểm thử. "To create perfect visuals" sai vì giá trị của phác thảo nằm ở tốc độ và sự thô ráp, đầu tư cho hình đẹp làm người ta ngại thay đổi. "To avoid feedback from users" sai ngược hẳn, phác thảo chính là công cụ để nhận góp ý sớm khi sửa còn rẻ.

Đáp án đúng: "To write a business plan for selling the technology designers created". Câu hỏi tìm thứ KHÔNG phải kỹ năng thiết kế cốt lõi. Viết kế hoạch kinh doanh để bán sản phẩm là việc của quản lý sản phẩm hay kinh doanh, không thuộc chu trình thiết kế lấy người dùng làm trung tâm, nên đây là đáp án. Các phương án kia đều là kỹ năng cốt lõi nên không được chọn: "To frame or reframe a design problem" là xác định đúng vấn đề, ví dụ chuyển từ "làm nút đẹp hơn" sang "vì sao người dùng bỏ giỏ hàng"; "To generate a large number of alternative solutions" là tư duy phân kỳ, tạo nhiều phương án trước khi chọn; "To evaluate tradeoffs of different alternatives" là cân nhắc được mất giữa các phương án, như đơn giản đổi lấy ít tùy chọn; "To create and test with potential users a functioning prototype" là dựng nguyên mẫu và kiểm thử với người dùng tiềm năng để kiểm chứng giải pháp.

Đáp án đúng: "The range of alternative ways that a design solution can work". Design space (không gian thiết kế) là một khái niệm trừu tượng: tập hợp mọi lời giải khả dĩ cho một bài toán, khác nhau ở cách hoạt động, hình thức và tương tác. Người thiết kế được khuyên khám phá rộng không gian này, phác nhiều phương hướng khác nhau trước khi thu hẹp, thay vì bám ngay ý tưởng đầu tiên. Ví dụ chức năng nhắc uống thuốc có thể là thông báo đẩy, hộp thuốc phát sáng hay tin nhắn cho người nhà. "Physical space (like a design studio) where design activities take place" sai vì đó là nơi làm việc, không phải tập các lời giải. "Space into which the design has to fit (e.g., the size of the screen of a mobile phone)" chỉ là một ràng buộc giới hạn không gian thiết kế chứ không phải chính nó. "Properties of the space (e.g., location, shape of the room) where the design will be used" là bối cảnh sử dụng, thông tin quan trọng cho thiết kế nhưng không phải phạm vi các phương hướng giải quyết.

Đáp án đúng: "It has no single clear solution". Khái niệm wicked problem (bài toán rối) do Rittel và Webber nêu ra chỉ những vấn đề không thể định nghĩa trọn vẹn, có nhiều bên liên quan với mục tiêu xung đột, không có lời giải đúng hay sai tuyệt đối mà chỉ có lời giải tốt hơn hoặc kém hơn, và cách hiểu vấn đề thay đổi ngay khi ta thử giải nó, ví dụ thiết kế ứng dụng giúp người dân giảm dùng xe máy trong thành phố. "It relates to app performance issues" sai vì lỗi hiệu năng thường xác định rõ và đo được, đúng kiểu bài toán thuần (tame problem). "It requires coding expertise" sai vì tính rối nằm ở bản chất vấn đề, không phụ thuộc kỹ năng lập trình của người giải. "It is solved through visual design" sai vì bài toán rối không có lời giải dứt điểm, càng không thể giải chỉ bằng một khía cạnh như hình thức thị giác.

Đáp án đúng: "The standards used to evaluate different design options". Khung Questions, Options, Criteria (câu hỏi, phương án, tiêu chí) giúp ghi lại lý lẽ đằng sau quyết định thiết kế: Questions là các vấn đề thiết kế cần quyết định, Options là các cách giải quyết khả dĩ cho từng vấn đề, còn Criteria là các thước đo dùng để so sánh và chọn giữa các phương án, ví dụ dễ học, thao tác nhanh, chi phí triển khai thấp. "The possible solutions to a design problem" là định nghĩa của Options chứ không phải Criteria. "The questions that need answers" là phần Questions của khung. "The tools used in prototyping" không thuộc khung này; công cụ làm mẫu thử như Figma là chuyện thực hiện thiết kế, không phải tiêu chí để đánh giá phương án.

Đáp án đúng: "Is the color scheme visually appealing?". Wireframe (khung dây) cố ý bỏ màu sắc, hình ảnh và kiểu chữ hoàn chỉnh, thường chỉ dùng hộp xám và chữ giữ chỗ, để mọi người tập trung vào cấu trúc; vì không có màu nên nó không thể trả lời bảng màu có đẹp hay không, câu hỏi đó thuộc về mockup hay bản thiết kế độ trung thực cao. "Does the overall layout make sense?" đúng là việc của wireframe: nó cho thấy bố cục tổng thể và vị trí các vùng nội dung để kiểm tra có hợp lý không. "Are proper navigation elements provided?" cũng trả lời được, vì wireframe thể hiện menu, nút quay lại, thanh tab và các đường dẫn chính. "Which components should appear on the screen?" là mục đích cơ bản của wireframe: quyết định màn hình gồm những thành phần nào trước khi tô vẽ.

Đáp án đúng: "Current values of all system inputs and variables, and rules for operating on those values". Trong thiết kế tương tác, system state (trạng thái hệ thống) là ảnh chụp toàn bộ tại một thời điểm: giá trị hiện có của mọi đầu vào và biến, cùng các quy tắc xử lý những giá trị đó để quyết định hệ thống phản ứng thế nào; ví dụ một máy điều hòa có nhiệt độ đặt, nhiệt độ phòng, chế độ đang chạy và quy tắc bật tắt máy nén. "Information about the user’s current location" chỉ là một đầu vào riêng lẻ, chỉ là một phần nhỏ của trạng thái chứ không phải toàn bộ. "User profile information" cũng vậy, hồ sơ người dùng chỉ là một nhóm biến trong hệ thống. "Rules for providing feedback to the user" chỉ là một phần quy tắc, thiếu hẳn các giá trị hiện tại của biến nên không mô tả được trạng thái.

Đáp án đúng: "False". Phát biểu "chỉ cần thiết kế thông tin người dùng nhập rõ ràng" là sai, nên chọn "False" chứ không chọn "True". Đầu vào của hệ thống gồm cả đầu vào tường minh (explicit input) như gõ tên, chọn ngày, và đầu vào ngầm (implicit input) mà hệ thống tự thu được từ hành vi và bối cảnh: vị trí GPS, thời gian trong ngày, lịch sử bấm, hướng xoay điện thoại hay cảm biến bước chân. Người thiết kế UX phải quyết định hệ thống thu những tín hiệu nào, dùng chúng ra sao và báo cho người dùng biết thế nào, vì chúng định hình trải nghiệm không kém gì biểu mẫu. Ví dụ ứng dụng bản đồ tự đổi sang chế độ tối vào ban đêm hay ứng dụng gọi xe tự điền điểm đón theo vị trí hiện tại đều là thiết kế dựa trên đầu vào ngầm, và làm sai sẽ gây khó chịu hoặc lo ngại về quyền riêng tư.

Đáp án đúng: "Framing, exploring, refining, finalizing". Bốn giai đoạn này mô tả quy trình thiết kế ở mức tư duy: framing (định khung) là xác định đúng vấn đề và người dùng cần giải quyết; exploring (khám phá) là mở rộng nhiều hướng ý tưởng qua phác thảo; refining (tinh chỉnh) là thu hẹp, kiểm thử và cải thiện hướng tốt nhất qua nhiều vòng; finalizing (hoàn thiện) là chốt thiết kế đủ chi tiết để bàn giao. "Sketching, coding, testing, launching" trộn một công cụ là phác thảo với các bước phát triển phần mềm, và bỏ mất bước định khung vấn đề. "Planning, wireframing, prototyping, feedback" liệt kê các kỹ thuật và sản phẩm cụ thể, có thể xuất hiện trong nhiều giai đoạn, chứ không phải các giai đoạn chính. "Researching, modeling, developing, shipping" nghiêng về chu trình làm và phát hành sản phẩm kỹ thuật, không thể hiện nhịp mở rộng rồi thu hẹp ý tưởng của thiết kế.

Đáp án đúng: "Picture taken by the user using the phone camera". Trong thiết kế ứng dụng di động, passive input (đầu vào thụ động) là dữ liệu ứng dụng tự thu từ cảm biến hoặc từ hệ thống mà người dùng không phải chủ động thao tác, còn active input (đầu vào chủ động) là thứ người dùng cố ý tạo ra như gõ chữ, chạm, chụp ảnh. Bức ảnh do chính người dùng giơ máy lên chụp là đầu vào chủ động, nên đây là đáp án. "Application data like contacts, calendar events, or user’s health information (e.g., steps)" là đầu vào thụ động vì ứng dụng đọc từ danh bạ, lịch, bộ đếm bước đã có sẵn trên máy. "Weather data" là thụ động vì ứng dụng tự lấy từ dịch vụ thời tiết mà không cần người dùng nhập. "User’s current location" là thụ động vì GPS cung cấp vị trí mà người dùng không phải khai báo.

Đáp án đúng: "All of the others". Thiết kế output (đầu ra) là quyết định hệ thống trình bày thông tin cho người dùng ra sao, như màn hình kết quả, báo cáo hay thông báo; để đầu ra hiệu quả, người thiết kế cần hiểu cả ba khía cạnh được nêu, nên phương án gộp này đúng. "What information the user needs to accomplish the task" là điều kiện đầu tiên: chỉ đưa thông tin phục vụ tác vụ, tránh làm rối bằng dữ liệu thừa. "Context in which the information will be accessed" cũng cần thiết: xem trên điện thoại lúc đi đường khác với xem trên màn hình lớn ở văn phòng, điều đó quyết định cỡ chữ, độ dài và kênh hiển thị. "User's knowledge base" quyết định cách diễn đạt: chuyên gia chấp nhận thuật ngữ và số liệu dày, người mới cần nhãn dễ hiểu và lời giải thích. Thiếu bất kỳ yếu tố nào thì đầu ra dễ đúng dữ liệu mà vẫn khó dùng, nên chọn riêng một ý là chưa đủ.