Thiết kế UI và UX

Giao diện người dùng (user interface, UI) kết hợp thiết kế hình ảnh nghệ thuật với thiết kế thông tin tập trung vào giao tiếp để tạo ra các menu, bố cục cửa hàng, hiển thị trên đầu (HUD) và các giao diện khác mà người chơi tương tác. Trải nghiệm người dùng (user experience, UX) liên quan đến cách người chơi tương tác với trò chơi, cách họ thể hiện sự lựa chọn của mình, và cách họ di chuyển từ lựa chọn này sang lựa chọn khác. Trong khi UI và UX thường làm việc cùng nhau, UX có trọng tâm lớn hơn vào tính tương tác và trải nghiệm của người chơi hơn là thiết kế hình ảnh và thông tin của UI.

UI

UI cung cấp thông tin quan trọng như điểm số, mục tiêu nhiệm vụ và giá cả cho phép người chơi đưa ra quyết định và điều hướng trò chơi. Vì đây thường là cách chính mà trò chơi giao tiếp với người chơi, nên UI rất quan trọng đối với trải nghiệm của người chơi. UI thiết kế kém có thể khiến người chơi cảm thấy bối rối và thất vọng, dẫn đến việc giữ chân kém, trong khi UI được thiết kế một cách chuyên nghiệp có thể góp phần vào sự tham gia và tạo doanh thu. UI được thiết kế hiệu quả thường tuân thủ những nguyên tắc sau:

• Ưu tiên
• Sự chú ý
• Ngôn ngữ hình ảnh
• Qui ước
• Tính nhất quán

Ưu tiên

Chia sẻ thông tin quan trọng nhất trước tiên được gọi là Hệ thống phân cấp thông tin. Điều này đặc biệt quan trọng trong các trò chơi nơi người chơi thường xuyên phải đưa ra quyết định ngay lập tức dựa trên một tập hợp thông tin hạn chế. Khi ưu tiên cho UI, hãy xác định điều gì là thiết yếu hoặc có liên quan nhất đến trải nghiệm của người chơi và đảm bảo rằng nó cả dễ tiếp cận và dễ tìm. Hãy xem xét những câu hỏi sau:

• Người chơi đang làm gì vào lúc này?
• Điều gì là quan trọng nhất mà họ cần biết hoặc có quyền truy cập?
• Họ có những lựa chọn nào?
• Họ cần thông tin gì để đưa ra những lựa chọn đó?
• Họ sẽ tham gia vào những lựa chọn đó bao nhiêu lần?

Thông tin và tính năng quan trọng có thể thay đổi tùy thuộc vào các yếu tố như vai trò mà người chơi đảm nhận, vị trí của họ trong thế giới 3D và các vật phẩm mà họ đang giữ. UI có thể được thiết kế để chỉ trình bày những gì có ý nghĩa trong từng ngữ cảnh - thay đổi các nút và thông tin tùy thuộc vào những gì hữu ích trong từng bối cảnh. Điều này đảm bảo rằng người chơi luôn có những gì họ cần, mà không có sự lộn xộn của mọi thứ mà họ không cần.

Ví dụ

Các yếu tố không liên quan có thể gây nhầm lẫn và phân tâm. Spellbound RPG có một UI sạch sẽ, tối giản, đặc biệt quan trọng đối với các giao diện di động, vì màn hình nhỏ có thể dễ dàng bị choáng ngợp với quá nhiều nút, màn hình và văn bản.

Trong Super Striker League, các tương tác của người chơi thay đổi dựa trên việc họ có kiểm soát bóng hay không. Khi không có bóng, người chơi có thể Chạy và Tackle để lấy lại quyền kiểm soát. Khi đã có bóng, các nút chuyển sang Deke và Pass, cho phép người chơi né tránh đối thủ và chuyền bóng. Bằng cách thay đổi các nút này, UI luôn hữu ích trong ngữ cảnh, tránh được sự phân tâm không cần thiết.

Trong The Survival Game, người chơi cần phải nhận thức về tình trạng sức khỏe và đói, và có quyền truy cập nhanh vào bản đồ, danh sách vật phẩm và công cụ của họ. Thông tin này cho phép họ đưa ra quyết định và ưu tiên hành động để sống sót. Nếu thông tin hoặc công cụ này khó tìm hoặc thiếu, việc sống sót trở nên khó khăn hơn và không cần thiết khiến người chơi cảm thấy khó chịu.

Sự chú ý

Bất chấp một UI tối giản, ưu tiên và theo ngữ cảnh, người chơi vẫn có thể cần hỗ trợ để tìm những gì họ cần. Nhà thiết kế UI có thể sử dụng một số công cụ hình ảnh để thu hút và hướng dẫn sự chú ý của người chơi, chẳng hạn như:

• Màu sắc: Màu sáng thu hút sự chú ý hơn màu nhạt. Sử dụng tông màu rực rỡ cho văn bản, nút, và các yếu tố khác quan trọng, và màu nhạt cho những yếu tố ít quan trọng hơn. Độ tương phản này nâng cao độ hiển thị và giảm sự phân tâm.
• Kích thước: Các yếu tố lớn hơn nổi bật hơn và được coi là quan trọng hơn so với những cái nhỏ hơn.
• Không gian: Các yếu tố được bao quanh bởi không gian âm hoặc đệm lớn rất bắt mắt.
• Sự gần gũi: Các yếu tố nhóm lại với nhau ngầm hiểu một mối liên hệ. Bằng cách đặt các tính năng và vật phẩm liên quan gần nhau, người chơi có thể hiểu được sự liên kết của chúng và dễ dàng tìm thấy chúng hơn.
• Chuyển động: Các yếu tố hoạt hình thu hút sự chú ý. Ngay cả chuyển động nhẹ cũng có thể làm cho một yếu tố nổi bật giữa những yếu tố tĩnh. Hiệu ứng hạt, các nút rung, và các mũi tên hoạt hình thường được sử dụng trong các hướng dẫn.

Sự điều độ là điều cần thiết với những công cụ này. Việc sử dụng quá nhiều yếu tố sáng, đang di chuyển có thể khiến người chơi cảm thấy choáng ngợp và bối rối hơn là giúp họ.

Ví dụ

Trong giao diện người dùng mùa giải của Jailbreak, một dải vàng nằm dưới các biểu tượng độc quyền của mùa giải, thu hút sự chú ý vào các phần thưởng cao cấp và làm cho chúng nổi bật hơn so với những phần thưởng miễn phí.

Trong Dragon Adventures, sự ưu tiên về hình ảnh được dành cho gói tiền xu có giá trị cao nhất bằng cách tăng kích thước của nó và tách nó ra bằng cách thêm đệm hơn, để phân biệt nó với các gói nhỏ hơn.

Trong Tower Defense Simulator, cả kích thước và sự gần gũi được sử dụng để nhóm và phân biệt Các Đồ Skin Tháp Hàng Ngày với Các Hộp Hàng Ngày.

Ngôn ngữ hình ảnh

Ngoài việc hướng sự chú ý của người chơi đến những yếu tố quan trọng nhất trên màn hình, các nhà thiết kế UI phát triển một ngôn ngữ hình ảnh để giúp người chơi hiểu những gì họ đang thấy. Một ngôn ngữ hình ảnh là một tập hợp các lựa chọn thiết kế có mục đích và nhất quán cung cấp thông tin trong nháy mắt về mục đích, trạng thái, ảnh hưởng và sự liên quan của một yếu tố. Ngôn ngữ này được xây dựng từ những công cụ như hình dạng, màu sắc và phong cách. Một số ứng dụng của ngôn ngữ hình ảnh bao gồm:

Bảng biểu tượng

Các biểu tượng có thể sử dụng một bản sắc hình ảnh truyền đạt ý nghĩa và mối liên hệ. Ví dụ, các biểu tượng liên quan đến các chỉ số cụ thể có thể chia sẻ một bảng màu và hình dạng tương tự, giúp người chơi nhận ra và hiểu chức năng của chúng.

Nút bấm

Là một hình thức đầu vào phổ biến của người chơi, các nút bấm phải dễ nhận biết. Đặt các nút trong một khung, chẳng hạn như một màu bao quanh văn bản hoặc biểu tượng, phân biệt chúng với nền, khiến chúng có vẻ tương tác. Thêm các điểm nhấn hoặc bóng tối có thể làm tăng sự hấp dẫn và gợi ý chiều sâu 3D của chúng.

Văn bản

Các tiêu đề và tiêu đề chứa thông tin cấp cao quan trọng nên lớn hơn và đậm hơn so với văn bản thân. Các màu sắc phải có độ dễ đọc cao và có độ tương phản tốt với màu nền mà chúng sẽ được hiển thị. Các lựa chọn phong cách như màu sắc và độ đậm có thể làm nổi bật thông tin quan trọng như các mục trong trò chơi, chỉ số hoặc khả năng. Luôn ưu tiên khả năng đọc được khi chọn một phông chữ.

Khi ngôn ngữ hình ảnh đã được thiết kế, nó có thể được tài liệu hóa trong một Hướng dẫn kiểu dáng, một tập hợp các quy tắc và ví dụ giúp mọi người trong nhóm hiểu cách áp dụng ngôn ngữ một cách nhất quán qua trò chơi.

Qui ước

Qui ước là những lựa chọn thiết kế thường được áp dụng mà được thấy trong nhiều trò chơi khác nhau. Một số ví dụ bao gồm:

• Một biểu tượng X trên nút mà đóng hộp thoại khi được nhấn
• Màu xám áp dụng cho các nút hiện đang không thể sử dụng
• Một biểu tượng khóa phủ lên một nút hoặc tính năng để chỉ ra rằng người chơi chưa đạt được hoặc mở khóa nó

Vì những qui ước này thường được sử dụng rộng rãi, người chơi thường quen thuộc với chúng. Tận dụng sự quen thuộc này có thể làm cho một giao diện trở nên trực quan hơn và giảm thiểu nhu cầu về các hướng dẫn cụ thể cho trò chơi. Chơi các trò chơi trong thể loại mà bạn hướng đến có thể giúp xác định các qui ước mà người chơi có thể nhận ra. Một nhà thiết kế UI có thể chọn cách tiếp cận độc đáo để phù hợp tốt hơn với trò chơi của họ, nhưng việc hiểu các qui ước này sẽ thông báo cho quá trình ra quyết định của họ.

Tính nhất quán

Dù nhà thiết kế UI đưa ra quyết định gì, họ nên áp dụng chúng một cách nhất quán trong toàn bộ trò chơi. Tính nhất quán giúp người chơi học cách điều hướng trò chơi hiệu quả hơn và ngăn chặn sự bối rối và thất vọng.

Dưới đây là một số ví dụ về tính nhất quán trong UI trong một trò chơi:

• Chỉ số "Sức khỏe" xuất hiện màu xanh lá trong tất cả văn bản, biểu tượng liên quan và thanh sức khỏe.
• Bất cứ khi nào hội thoại NPC đề cập đến một mục trong trò chơi, nó được làm nổi bật bằng chữ đậm.
• Các nút đóng luôn có hình vuông, màu đỏ, và có một chữ X màu trắng, chỉ xuất hiện ở góc trên bên phải của một hộp thoại.
• Bất cứ khi nào một người chơi không đủ tiền để mua một mục trong cửa hàng, giá tiền sẽ hiển thị màu đỏ.

Những lựa chọn này là có chủ đích, nhằm tạo điều kiện cho sự hiểu biết và điều hướng của người chơi. Bằng cách áp dụng chúng một cách nhất quán, chúng cho phép người chơi liên kết các yếu tố liên quan, xác định các mục quan trọng, phát triển trí nhớ cơ bắp, đưa ra quyết định nhanh chóng và có thông tin, và dành nhiều thời gian hơn để đắm chìm trong trò chơi.

UX

Thiết kế UX liên quan đến cách người chơi tương tác với trò chơi, cách họ thể hiện sự lựa chọn của mình, và cách họ di chuyển từ sự lựa chọn này sang sự lựa chọn khác. Dù UX thường làm việc song song với giao diện người dùng (UI), nhưng nó chú trọng nhiều hơn vào tính tương tác và trải nghiệm của người chơi so với thiết kế hình ảnh và thông tin của UI.

Hiểu người chơi

Một mục tiêu chính của nhà thiết kế UX là tạo ra các tương tác và luồng mà người chơi có thể sử dụng một cách trực quan, không bị cản trở và thuận tiện. Quy trình đó bắt đầu với việc hiểu người chơi, nhóm đối tượng mà một trò chơi nhắm đến. Khi xác định người chơi của một trò chơi, hãy xem xét các yếu tố sau:

• Nhân khẩu học: Nhân khẩu học giúp thông báo các lựa chọn thiết kế bằng cách tiết lộ thông tin tổng quát về một nhóm người chơi. Ví dụ, những người chơi trẻ thường có xu hướng chơi trên di động hoặc máy tính bảng hơn là máy tính cá nhân, nên các trò chơi dành cho nhóm đối tượng đó thường ưu tiên thiết kế và hoàn thiện trải nghiệm người dùng trên di động.

• Mức độ kinh nghiệm: Các nhà phát triển có thể chọn thiết kế cho người chơi có ít kinh nghiệm chơi game, có nhiều kinh nghiệm hay ở giữa. Các tương tác mà người chơi có kinh nghiệm quen thuộc, chẳng hạn như nhấn phím số để trang bị một mục trong thanh công cụ, hoặc nhấn phím C để cúi xuống, có thể không rõ ràng với những người chơi thiếu kinh nghiệm, và cần thêm thông điệp hoặc đào tạo.

• Sự quen thuộc với thể loại: Tương tự như mức độ kinh nghiệm chung, sự quen thuộc với thể loại phản ánh mức độ kinh nghiệm của người chơi với một loại trò chơi cụ thể. Các trò chơi thuộc thể loại phổ biến trên Roblox, như nhập vai, kinh dị sinh tồn, và bắn súng góc nhìn thứ nhất, có khả năng thu hút nhiều người chơi tiềm năng đã từng chơi thể loại tương tự trước đó. Các trò chơi thuộc thể loại khác có thể có ít người chơi có kinh nghiệm hơn, nhưng khoảng cách về kinh nghiệm đó có thể được bù đắp qua các hướng dẫn và khả năng sử dụng.

• Phong cách chơi: Người chơi thường ưa chuộng các loại chơi cụ thể, từ cạnh tranh và thu thập thành tựu đến khám phá và hợp tác. Những sở thích này không chỉ được phản ánh trong các cơ chế trò chơi mà người chơi ưu tiên mà còn ảnh hưởng đến các quyết định UX. Các nhà thiết kế xem xét những tương tác nào nên được ưu tiên, những tương tác nào nên hoàn thiện, và những tương tác nào nên được trình bày cho người chơi. Họ cũng xem xét tâm trạng mà người chơi sẽ có khi họ tham gia vào những tương tác này và cảm xúc mà họ muốn kích thích từ chúng.

Sau khi xem xét những yếu tố này và chọn một nhóm người chơi mục tiêu (hoặc các nhóm), hãy tìm hiểu họ bằng cách gặp gỡ, chơi với họ và tìm hiểu về mục tiêu và sở thích của họ để thông báo tốt hơn cho các lựa chọn thiết kế.

Thiết kế tương tác

Tương tác là những tính năng cho phép người chơi trải nghiệm và thể hiện sự chọn lựa của mình trong một trò chơi. Các nhà thiết kế UX muốn những tương tác đó trực quan và yêu cầu càng ít thông tin giải thích càng tốt. Để làm điều này, họ sử dụng:

• Qui ước
• Ẩn dụ
• Phản hồi

Qui ước

Quy ước là các thiết kế và nguyên tắc UX mà người chơi có thể đã quen thuộc từ các trò chơi khác.

Các ví dụ về qui ước bao gồm:

• Dấu nhắc "E" cho phép các nhà phát triển Roblox sử dụng để thông báo cho người chơi rằng một mục có thể tương tác nếu họ đứng gần đủ để nó xuất hiện.
• Phím "C" cho phép hình đại diện của người chơi cúi xuống để họ có thể lách qua chướng ngại vật hoặc lọt vào không gian chật hẹp.
• Các phím số trang bị các mục từ thanh công cụ vào tay của hình đại diện để có thể được sử dụng.
• Đi vào các vòng tròn trên mặt đất để xếp hàng cho một trận đấu.

Các quy ước được thiết lập khi một triển khai hoặc lựa chọn thiết kế nào đó trở nên phổ biến do dễ sử dụng. Phím "C" cho cúi xuống, ví dụ, dễ nhớ vì đây là chữ cái đầu tiên trong từ "crouch", và nằm cạnh phím WASD, các phím mà người chơi sử dụng để điều hướng. Đây là một tương tác dễ thực hiện nhanh chóng và dưới áp lực, điều lý tưởng vì việc cố gắng ẩn mình hoặc trốn chạy khỏi một mối đe dọa sắp tiếp cận là một trường hợp sử dụng phổ biến cho cúi xuống.

Ẩn dụ

Ẩn dụ liên kết một khái niệm trừu tượng với một cái quen thuộc hơn, tạo ra một lối tắt đến sự hiểu biết. Trong ví dụ này từ Spellbound Wizard RPG, hành động triệu hồi phép thuật được thực hiện bằng cách rút thẻ từ một bộ bài. UI/UX dựa trên bộ bài đặt hành động trừu tượng của việc triệu hồi phép thuật vào điều mà người chơi có thể dễ dàng liên hệ và hiểu nhanh chóng hơn.

Phản hồi

Giao tiếp từ trò chơi đến người chơi được gọi là phản hồi. Phản hồi giúp người chơi hiểu rằng họ đã thực hiện hành động nào đó. Nó có thể giúp học cách trò chơi hoạt động và thêm một lớp bóng bẩy bổ sung làm cho các tính năng trở nên thỏa mãn hơn khi sử dụng. Một số ví dụ về phản hồi bao gồm:

• Một kẻ thù chơi hoạt hình phản ứng "trúng" để chỉ ra rằng nó đã bị tổn thương từ vũ khí của người chơi
• Một nút thay đổi màu sắc để chỉ ra trạng thái di chuyển, bị nhấn và được thả (đã chọn)
• Âm thanh "cha-ching!" của máy tính tiền phát ra khi người chơi hoàn tất một giao dịch
• Một thanh tiến độ đầy lên khi người chơi hoàn thành các mục tiêu nhiệm vụ

Khi phản hồi bị thiếu hoặc không đủ, người chơi có thể không biết những gì họ đã hoàn thành, hiểu xem các hiệu ứng là tốt hay xấu, hoặc thậm chí biết liệu tính năng họ đang sử dụng có hoạt động chính xác hay gặp lỗi.

Thiết kế luồng

Nhiều tương tác thường cần thiết cho một người chơi hoàn thành một mục tiêu. Các nhà thiết kế UX quan tâm đến cách người chơi di chuyển từ một hành động hoặc màn hình UI hoặc sự chọn lựa này đến sự chọn lựa khác và đảm bảo rằng các con đường này hợp lý và thuận tiện.

Ví dụ, để trang bị một mục trên hình đại diện trong Berry Avenue RP, người chơi phải:

• Tìm và nhấn nút Avatar
• Chọn một thể loại mục (mặt, đầu, cổ, v.v.)
• Cuộn để tìm một mục mình quan tâm
• Nhấn vào mục để trang bị cho hình đại diện của mình
• Tìm và nhấn nút Done để thoát khỏi tùy chỉnh avatar

Những bước này cùng nhau đại diện cho luồng tùy chỉnh hình đại diện. Luồng này đơn giản và rõ ràng, với càng ít bước càng tốt cần thiết để trang bị một mục. Bởi vì người chơi không phải thực hiện nhiều hành động hoặc nghĩ quá nhiều về những gì họ cần làm, luồng này có sức cản thấp, là một thước đo công sức cần thiết để đạt được một mục tiêu.

Thiết kế những luồng hiệu quả, ít sức cản yêu cầu xem xét cẩn thận các trường hợp sử dụng. Những trường hợp sử dụng đó có thể được thể hiện dưới dạng các mục tiêu của người chơi như:

• Muốn có khả năng nhanh chóng thay đổi hình đại diện
• Tìm các mục dễ dàng trong khi thay đổi
• Xem trước các mục trước khi chọn
• Dễ dàng loại bỏ mục sau khi chọn

Những mục tiêu này sau đó hướng dẫn thiết kế UI và UX của tính năng:

• Người chơi truy cập tính năng tùy chỉnh avatar thông qua một nút nổi bật trên HUD, và có thể ngay lập tức bắt đầu trang bị các mục cho hình đại diện của họ
• Các tab phân loại các mục thành các thể loại thuận tiện, và trường tìm kiếm cho phép người chơi tìm kiếm các mục trực tiếp
• Các mục được xem trước trên hình đại diện ngay lập tức
• Người chơi có thể loại bỏ mục bằng cách nhấn vào nó lần nữa để bỏ chọn, hoặc nhấn vào nó trong danh sách các mục đã trang bị

Các nhà thiết kế sau đó có thể bắt đầu lên kế hoạch cho UI và lên kế hoạch cho các bước mà người chơi sẽ thực hiện để hoàn thành mục tiêu thay đổi hình đại diện của họ. Quy trình này có thể được hỗ trợ bằng cách sử dụng một biểu đồ luồng, trực quan mô tả các hành động của người chơi khi họ điều hướng UI. Những hình ảnh này có thể giúp xác định các bước bị bỏ quên, các điểm đau nơi các bước không rõ ràng hoặc không thuận tiện, và sức cản quá mức.