Thiết kế cần hướng đến trải nghiệm của người dùng

Văn bản trực tuyến không như sách in, vì thế cần có những cách thiết kế khác biệt hướng về trải nghiệm thực sự dành cho người dùng.

Khi thiết kế vì mục đích giáo dục, điều quan trọng là tạo ra các giao diện không chỉ trực quan, mà phải phục vụ cho việc học cũng như giảm thiểu những nhận thức dư thừa được truyền tải cho sinh viên (Chandler & Sweller 1991; Plass et al. 2010). Thật không may, vì các phương thức thiết kế hướng đến con người đều không cam kết về trải nghiệm học tập, và đó cũng là lí do vì sao Khoa học Nghiên cứu (Learning Sciences) xuất hiện. Dù các nguyên tắc thiết kế đều rất quan trọng, khả năng tích hợp các nguyên tắc nghiên cứu có nhận thức vào các tính năng và sản phẩm mà chúng ta xây dựng là không thể thiếu, nhằm tạo ra những trải nghiệm học tập thú vị và hiệu quả.

Trước khi nói về công nghệ và màn hình, tôi muốn bạn nghĩ về lần cuối cùng bạn mở một cuốn sách giáo khoa. Khi lướt qua các trang giấy, bạn sẽ có thể thấy một loạt hình ảnh, hình minh họa, biểu đồ, bảng biểu, đánh giá và nhiều đặc điểm khác bổ sung cho các văn bản trên trang.

1 p x gpx8muorpsuzfgir5a 1
Hình 1: Hình sách giáo khoa có các đoạn văn và hình ảnh

Các đặc điểm kể trên phục vụ nhiều chức năng khác nhau. Điều hiển nhiên nhất là tạo ấn tượng đầu tiên tuyệt vời khi đặt cạnh những quyển sách khác có nội dung tương tự. Không có gì ngạc nhiên khi các nhà xuất bản tự hào tìm ra phong cách bìa và hình ảnh thích hợp để truyền đạt thương hiệu của họ và giúp người đọc khám phá cuốn sách kỹ hơn. Tuy nhiên, công việc quan trọng nhất của các đặc điểm này là hỗ trợ về mặt sư phạm, tức là giúp sinh viên hiểu được một khái niệm cụ thể và biết cách nhớ đến những gì họ đã đọc.

Nếu người học được giao nhiệm vụ là đọc về các phần khác nhau của não, các đặc điểm này sẽ giúp họ nhớ đến hình minh họa có thùy trán được so sánh với thân não để ký ức của họ ghi nhớ được hình dáng của cơ quan này.

Những đặc điểm này được định hướng nhằm tối ưu hóa trải nghiệm học tập cho người học. Ví dụ đơn giản nhất là các hình ảnh và hình minh họa có trong một đoạn văn bản. Nếu người học được giao nhiệm vụ là đọc về các phần khác nhau của não, các đặc điểm này sẽ giúp họ nhớ đến hình minh họa có thùy trán được so sánh với thân não để ký ức của họ ghi nhớ được hình dáng của cơ quan này. Nếu mô tả bằng lời sẽ là thế này, “thùy trán là phần phía trước của bộ não, tiếp theo là thùy thái dương, nằm ở hai bên của thân não”. Như vậy, có nhiều khả năng người học sẽ không nhớ rõ các bộ phận của não.


Nâng tầm khoa học nghiên cứu

Sự tương quan giữa các từ và hình vẽ không phải là một khái niệm mới. Các biểu tượng hình ảnh rất quan trọng trong giáo dục khoa học cũng như các ngành khác bởi vì sự nhận biết hình ảnh là một kỹ năng cần thiết (Lowe, 2000). Theo lý thuyết nhận thức về học tập đa phương tiện, “hình ảnh và từ ngữ sẽ giúp mọi người học sâu hơn là chỉ riêng từ ngữ” (Mayer, 2005, p. 47). Các biểu tượng hình ảnh này không được xử lý như các định dạng bằng lời nói và hình ảnh riêng biệt, nhưng sẽ được mã hóa kép và có chung sự liên tưởng khi có cùng tác dụng về mặt nhận thức (Sadoski et al., 2001). Điều này có nghĩa là một con số có liên quan đến đoạn văn bản không nên tách khỏi ngữ cảnh của văn bản.

Khi xem xét các đặc điểm riêng lẻ, bao gồm trải nghiệm học tập qua góc nhìn của các kết quả dự định và khoa học nghiên cứu dựa trên chúng, chúng ta dần hiểu được cách mình muốn giới thiệu các yếu tố đó với người đọc. Nếu bỏ qua và sắp xếp những yếu tố ấy một cách ngẫu nhiên trên trang giấy, dẫu bố cục có đẹp đến thế nào cũng không thể giúp người học lĩnh hội được kết quả cần thiết.


Áp dụng thực tế trên sách giáo khoa…

Nhiều nghiên cứu theo dõi chuyển động của mắt đã xem xét tác động của mắt người đọc di chuyển từ văn bản đến hình ảnh trên trang và điều gì có thể ảnh hưởng đến hành vi đó. Trong một nghiên cứu với học sinh lớp bốn, học sinh đã thực hiện ba cách đọc có mức độ chú tâm đến hình ảnh từ thấp đến cao. Kết luận, các học sinh có mức độ chú tâm đến hình ảnh cao khi đọc đoạn văn đạt điểm cao hơn khi so sánh với các sinh viên chỉ tập trung vào từ ngữ (Mason, 2013)

Hình 3: Hình ảnh về chuyển động mắt theo ba cách đọc.
Hình A là mức độ tập trung hình ảnh trung bình.
Hình B là mức độ tập trung hình ảnh thấp.
Hình C là mức độ tập trung hình ảnh cao (Mason L., 2013)

Dù khoa học nghiên cứu nói rằng đọc cả văn bản và hình ảnh sẽ giúp việc đọc hiểu dễ dàng hơn, các nghiên cứu khác cũng chỉ ra rằng học sinh có thể bỏ qua ảnh, thay vào đó chỉ tập trung chủ yếu vào văn bản (Behnke, 2016). Điều này có thể là vì, “một hình ảnh đáng giá một ngàn chữ chỉ khi học sinh biết cách diễn dịch hình ảnh” (Pintó et al., 2002, p. 341).

1 1rgf f5wa50mg k5i5b6cg
Hình 4: Hình ảnh từ nghiên cứu về cách mắt của sinh viên di chuyển
qua các yếu tố hình ảnh trong sách giáo khoa Địa lý (Behnke, 2016)

Phát hiện này đã dẫn đến những gợi ý về cách học tập mang tính chiến lược khi dùng các từ trên trang để phân tích hình ảnh cho người học (Schnotz và cộng sự, 2014), giúp người học được hưởng lợi từ cả hai phương thức. Trong hình bên dưới đoạn văn sẽ nhắc người đọc tận dụng hình ảnh để giúp họ hiểu sâu hơn. Điều này cũng có nghĩa, mỗi từ ngữ và hình ảnh mà các tác giả sử dụng đều có chủ đích và nhằm giúp người học có cách học tập tốt hơn.

1 siw4xjwvipwjegw4y5isuw
Hình 5: Ví dụ về đoạn văn bản hướng dẫn học sinh tham khảo
hình minh họa để ghi nhớ cấu tạo của các mảng kiến tạo

… Và cả điện thoại di động

Công nghệ phát triển cùng với hành vi. Với sự phổ biến của màn hình, mọi người ngày càng đòi hỏi rằng tất cả nội dung của họ đều phải đáp ứng được trên thiết bị mà họ dùng. Họ muốn truy cập mọi thứ ở khắp mọi nơi và sẵn sàng thỏa hiệp cho sự tiện lợi đó. Cho dù đó là đọc một chương hay viết một bài luận, các thiết bị công nghệ mà người học quen dùng vẫn sẽ tiếp tục phát triển.

A person reading an article about mobile optimization on a smartphone

Dù đọc hay viết trên điện thoại di động đạt hiệu quả thế nào vẫn đang gây tranh cãi (Patronis, 2016; Ziming, 2012), xu hướng sử dụng điện thoại di động ngày một tăng trên thực tế là điều rõ ràng. Một nghiên cứu trong năm 2018 báo cáo rằng 94% những người 18–29 tuổi sở hữu một chiếc điện thoại thông minh. Hơn nữa, có một xu hướng ngày tăng trong rằng điện thoại thông minh là phương tiện online chính ở nhiều gia đình.

Cách đây không lâu, khái niệm “ở khắp mọi nơi” bao gồm PC, laptop là điều có thể đoán được. Sau đó, chúng tôi bắt đầu thấy các thiết bị như XBox hiển thị trên các báo cáo về nền tảng học tập. Bây giờ điện thoại thông minh và máy tính bảng thuộc mọi quy mô truy cập nội dung của chúng tôi. Ai biết được màn hình tiếp theo sẽ là gì, hoặc thậm chí nếu nó sẽ là màn hình vì chúng ta đã có… “Alexa, thủ đô của Mississippi là gì?”. Vì lý do này, chúng ta cần phải thay đổi cách tiếp cận từ việc thích ứng với kích thước màn hình và công nghệ. Thay vào đó, hãy suy nghĩ về các kết quả học tập cơ bản mà chúng tôi đang nhắm đến, khám phá những cơ hội mới mà có thể không có được ở bất kỳ định dạng nào khác. Điều này có nghĩa là các thiết kế tương thích với di động có thể không đủ, và nếu bạn không cẩn thận, thực sự có thể làm việc học tập không đạt hiệu quả.


Chúng ta nên nghĩ lại về trải nghiệm đọc trên điện thoại như thế nào?

Khi bạn xem tình huống dưới đây, hãy nhớ ý định ban đầu của các đặc điểm học tập được tích hợp vào trong sách in. Tôi sẽ chỉ ra một số tải nhận thức không mong muốn mà người học có thể gặp phải nếu chúng ta không cung cấp phương pháp nghiên cứu dựa trên tính cứng nhắc của màn hình nhỏ như sách in.

Tình huống: Đọc để hiểu

Lisa là một sinh viên năm 2 chuyên ngành Công tác Xã hội tại Đại học Montclair. Cô hiện đang tham gia lớp tâm lý về cảm giác và nhận thức, nhưng lại không có nhiều kiến thức về giải phẫu người. Khi đọc các bài nghiên cứu, sách giáo khoa của cô có nhiều đoạn mô tả về các bộ phận cấu thành mắt và não, cũng như quá trình hoạt động giữa hai cơ quan.


Thách thức là gì?

Dưới đây là ví dụ về cách các nội dung giống nhau được thể hiện trên các phương tiện khác nhau . Bạn sẽ nhận thấy rằng cả trang web trên PC và trên thiết bị di động đều có nội dung tràn không nằm trong khu vực người học có thể xem được. Họ không biết về những kiến thức nằm sau vùng có thể xem được, trừ khi họ vội vã lướt xuống.

Khi bạn xem qua từng bố cục này, hãy thử đặt mình vào vị trí của Lisa khi cô đang cố gắng đọc một đoạn văn không chỉ đề cập đến các phần cụ thể của não và mắt, mà còn là quá trình đang diễn ra trong cơ thể từ mắt đến não.

1 pra3ywfozx zqpykglbpa 1
Hình 6: Ví dụ về một bố cục đa diện gồm có phần đầu trang, văn bản, hình ảnh
và một cột bên có thể là phần đánh giá, một case study hay một tính năng học tập nào đó.

Thiết kế tương thích cho phép sắp xếp lại các phần của trang và là nền tảng cốt lõi của của thiết kế di động mà nhiều nhà phát triển sử dụng hiện nay. Tại một số điểm ngắt nhất định, bố cục nhiều cột biến thành bố cục cột đơn để làm cho trải nghiệm đọc ít bị bó hẹp hơn. Tuy nhiên, bên cạnh mặt tốt cũng có mặt xấu. Nếu bạn nhớ lại, trước đó trong bài viết, tôi đã ngưỡng mộ tính cứng nhắc có chủ đích trong bố cục của sách giáo khoa, và điều đó đã liên kết với các nguyên tắc học tập như mã hóa kép, sự tiếp giáp không gian và Lý thuyết học đa phương tiện. Chỉ sử dụng chế độ xem tương thích và các phương pháp thiết kế web truyền thống không đem lại trải nghiệm học tập tốt nhất.

Giả sử

Giả sử chúng ta sử dụng cách tiếp cận của Schnotz để hướng dẫn học sinh lướt qua một hình trên trang thông qua các từ trong đoạn văn (Hình 6), văn bản sẽ trực tiếp tham chiếu các phần của một hình ảnh khiến người đọc lướt qua ảnh với ý định họ xây dựng mô hình tinh thần của họ về chủ đề này. Không giống như trang sách giáo khoa in, trình duyệt có khả năng nhận biết văn bản được chứa trong đoạn văn thông qua Javascript và ứng dụng Các từ thông dụng. Nếu trình duyệt nhận thức được các liên kết tham chiếu cho hình ảnh và số liệu, làm cách nào chúng ta có thể cho phép tích hợp các chỉ dẫn hướng dẫn, cho phép người học tốn ít thời gian xử lý tài liệu bằng cách giúp họ dễ dàng lướt nhanh giữa các từ cũng như giảm thiểu sự phân tâm? (Chandler, 1992)

Trong ví dụ dưới đây, tôi khám phá một phương pháp có khả năng báo hiệu học sinh rằng có một con số có thể hữu ích khi tham khảo trong khi họ đọc.

turned on black Amazon Kindle e-book reader

Cách tiếp cận này có thể có ích ở một số mặt. Đầu tiên, tương tự như các quan sát theo dõi chuyển động mắt ở trên, mắt của người học sẽ có thể nhảy từ các từ trên màn hình sang hình ảnh hỗ trợ của nó và ngược lại. Thứ hai, người học có thể tiếp tục đọc không bị gián đoạn, không bao giờ mất vị trí của họ trên trang do phải di chuyển. Trong nghiên cứu trước đây tôi đã làm, tôi phát hiện ra có một nỗi lo khi nhấp vào liên kết trong sách bởi vì người đọc sợ mất dấu chỗ đã đọc. Gần đây, Kindle đã cập nhật tính năng này để giúp người đọc thoải mái hơn.


Kết luận

Ví dụ trên đại diện cho một trong nhiều thách thức mà chúng ta cần bắt đầu xem xét khi nghĩ về trải nghiệm thiết kế trên các giao diện người dùng. Có rất nhiều thách thức khác mà chúng ta phải suy nghĩ khi thiết kế một giao diện đọc trên một thiết bị di động nhỏ, dần dần là VR/AR, các thiết bị đeo tay và giao diện giọng nói như Alexa.

Hy vọng rằng, ví dụ trên cho phép bạn khám phá cách bạn có thể đánh giá lại mối quan hệ giữa nghiên cứu khoa học cơ bản và khả năng sử dụng của các phương tiện học tập khác nhau. Từ đó có những thiết kế dành cho người học hơn, đồng thời đổi mới và tận dụng khả năng mà một phương tiện mới cung cấp. Văn bản trực tuyến không như sách in, vì thế cần có những cách thiết kế khác biệt hướng về trải nghiệm thực sự dành cho người dùng.

Người dịch: Long Hwarang

Nguồn: Medium.com

Cùng tác giả

#Tag

design principle education mobile mobile design ux ux design web/app design

iDesign Must-try

Cheryl Vo: ‘Trước khi thiết kế, mình luôn hỏi tại sao?’
Cheryl Vo: ‘Trước khi thiết kế, mình luôn hỏi tại sao?’
Tính khái niệm trong Design Decisions (tạm dịch: Quyết định thiết kế) của một thiết kế hay là hành trình những cảm xúc Cheryl Vo sẽ được mở khóa từ…
Joshua Roberts: ‘Tôi tin rằng thẩm mỹ tối giản sẽ loại bỏ sự ồn ào và giúp các thương hiệu tiếp cận khách hàng của họ’
Joshua Roberts: ‘Tôi tin rằng thẩm mỹ tối giản sẽ loại bỏ sự ồn ào và giúp các thương hiệu tiếp cận khách hàng của họ’
Giữa bức tranh muôn màu của thế giới sáng tạo, không khó để tìm kiếm sự liên kết giữa các lĩnh vực khác nhau, nhưng làm thế nào để từ…
Thiết kế tương tác (Interaction Design) là gì?
Thiết kế tương tác (Interaction Design) là gì?
Thiết kế tương tác là một thành phần quan trọng trong chiếc ô khổng lồ của thiết kế trải nghiệm người dùng (UX). Trong bài viết này, hãy cùng iDesign tìm…
Các nguyên tắc chính tập trung vào nhu cầu của người dùng trong vai trò nhà thiết kế
Các nguyên tắc chính tập trung vào nhu cầu của người dùng trong vai trò nhà thiết kế
 Trong môi trường năng động và không thể đoán trước mà chúng tôi đang làm việc, ngay cả những giải pháp được chế tạo cẩn thận nhất cũng có thể…
Tư duy thiết kế và những tính chất trong hệ thống
Tư duy thiết kế và những tính chất trong hệ thống
Một cách cơ bản hơn để đối phó với tính chất tạm thời của công việc là xem xét lại bản thân chúng ta với tư cách là nhà thiết…
11 Bí mật về công việc thiết kế web sẽ không ai nói với bạn
11 Bí mật về công việc thiết kế web sẽ không ai nói với bạn
Là một nhà thiết kế web, chắc hẳn, bạn sẽ có nhiều điều để suy nghĩ trong thị trường đầy cạnh tranh này. Bạn có các kỹ năng, sự tinh tế,…