Đặt vấn đề
Chúng ta ít nhất cần có những ý tưởng trong đầu, để có thể bắt tay vào thiết được giao diện của sản phẩm. Định hướng Khung sườn là bước để chúng ta hiện thực hoá những ý tưởng đó, cấu tạo nên những hình hài cơ bản ban đầu của giao diện. Giống như những bản vẽ tay thô sơ của các hoạ sĩ hay kiến trúc sư trước khi họ tạo ra những sản phẩm hoàn hảo cuối cùng.
Thế nào là Khung sườn (Skeleton)?
Khung sườn là những xác định cụ thể và chi tiết hơn về một chức năng, màn hình, một thành phần thiết kế đơn giản và cách những thành phần đó phối hợp với nhau trên một màn hình.
Đối với sản phẩm thuần về mặt chức năng, chúng ta sẽ xác định bộ khung thông qua thiết kế giao diện như các nút bấm, trường dữ liệu, bảng và các thành phần giao diện khác. Đối với các sản phẩm thuần thông tin sẽ có một loạt các vấn đề riêng. Thiết kế điều hướng là hình thức thiết kế giao diện chuyên biệt được điều chỉnh để trình bày không gian thông tin. Cuối cùng, kết hợp cả hai cách tiếp cận, chúng ta có thiết kế thông tin, cách trình bày thông tin để giao tiếp hiệu quả với người dùng.
(hình ảnh minh hoạ)
Các yếu tố chính của Khung Sườn
Thiết kế giao diện
Thiết kế giao diện là việc lựa chọn các thành phần giao diện phù hợp cho nhiệm vụ mà người dùng đang cố gắng hoàn thành và sắp xếp chúng trên màn hình theo cách dễ hiểu và dễ sử dụng. Các tác vụ thường sẽ trải dài trên một số màn hình, mỗi màn hình chứa một tập hợp các thành phần giao diện khác nhau để người dùng tranh luận. Những chức năng nào kết thúc trên màn hình nào là vấn đề của thiết kế tương tác trong Định hướng Cấu trúc; làm thế nào các chức năng đó được thực hiện trên màn hình là lĩnh vực của thiết kế giao diện.
Giao diện thành công là những giao diện mà người dùng ngay lập tức nhận thấy nội dung quan trọng. Mặt khác, những thứ không quan trọng sẽ không được chú ý – đôi khi bởi vì nó hoàn toàn không có ở đó. Một trong những thách thức lớn nhất của việc thiết kế giao diện cho các hệ thống phức tạp là tìm ra khía cạnh nào mà người dùng không cần xử lý và giảm khả năng hiển thị của chúng (hoặc loại bỏ chúng hoàn toàn).
Ví dụ về cách mà chúng ta cần xử lý các thành phần riêng lẻ của một màn hình để chúng phối hợp với nhau như một thể thống nhất đó là hãy phân tích một màn hình Danh mục sản phẩm. Trong một bộ lọc, mục tiêu của người dùng cần thực hiện lọc nhiều điều kiện để tìm được một cách nhanh chóng sản phẩm họ mong muốn. Cách hiển thị checkbox (ô vuông) để người dùng tick chọn là phương án phù hợp hơn so với hiển thị radio (ô tròn). Đối với những điều kiện để sắp xếp kết quả lọc như sắp xếp theo A-Z, Z-A, giá thấp đến giá cao, … chúng ta sẽ xử lý theo dải ô xổ dữ liệu (dropdown), không thể tính sắp xếp này vào chung giao diện với bộ lọc vì sẽ làm rối và mất tính tập trung vào các thông tin quan trọng cần thực hiện lọc.
Thiết kế điều hướng
Thiết kế điều hướng là quá trình tạo cấu trúc trực quan cho trang web, ứng dụng hoặc sản phẩm kỹ thuật số khác giúp người dùng tìm thấy thông tin họ cần một cách nhanh chóng và dễ dàng. Hệ thống điều hướng được thiết kế tốt sẽ cung cấp đường dẫn rõ ràng và trực quan để người dùng di chuyển từ phần này sang phần khác của trang web, đồng thời đảm bảo rằng họ có thể truy cập tất cả nội dung có liên quan mà không bị lạc hoặc nhầm lẫn.
Có … dạng thiết kế điều hướng phổ biến
Điều hướng toàn cầu (Global navigation): cung cấp quyền truy cập vào phạm vi chính nhất của toàn bộ trang web. Điều hướng toàn cầu tập hợp các điểm truy cập chính mà người dùng có thể chuyển đến cho dù họ đang ở đâu trên Website.Các điều hướng toàn cầu rất phổ biến trên nhiều website. Ở các website thương mại điện tử có thể thấy đó là thanh menu bar bao gồm trang chủ, danh mục sản phẩm, giới thiệu, giỏ hàng, tìm kiếm, liên hệ.
Điều hướng cục bộ (local navigation): cung cấp cho người dùng quyền truy cập vào những gì “gần đó” trong hệ thống kiến trúc. Điều này giống như chúng ta được phép truy cập vào các tệp con của một thư mục mẹ. Điều hướng này cung cấp một nhiệm vụ sâu trong một luồng người dùng cụ thể. Ví dụ, luồng người dùng khi ở trang Giới thiệu là một dạng điều hướng cục bộ. Khi vào trang Giới thiệu, người dùng sẽ được điều hướng sang các mục thông tin có liên quan như Tầm nhìn, Sứ mệnh, Lịch sử hình thành, hay Đội ngũ lãnh đạo.
Điều hướng bổ sung (supplementary navigation) cung cấp các lối tắt đến nội dung liên quan có thể không dễ truy cập thông qua điều hướng toàn cầu hoặc cục bộ. Ví dụ thường thấy nhất là khi chúng ta đọc báo hoặc tin tức. Trên mỗi bài viết sẽ có những đường link tắt để chúng ta tiếp cận đến những bài viết có liên quan nhằm giữ chân chúng ta trên trang và cung cấp thêm nhiều thông tin thú vị đến những gì chúng ta đang quan tâm.
Thiết kế thông tin
Thiết kế thông tin có thể khó nắm bắt. Nhưng nó thường đóng vai trò là chất keo giữ các thành phần khác của thiết kế lại với nhau. Trong mọi trường hợp, thiết kế thông tin bắt nguồn từ việc đưa ra quyết định về cách trình bày thông tin sao cho mọi người có thể sử dụng hoặc hiểu thông tin đó dễ dàng hơn.
Đôi khi thiết kế thông tin là trực quan. Biểu đồ hình tròn có phải là cách tốt nhất để trình bày dữ liệu đó hay biểu đồ thanh sẽ hoạt động tốt hơn cho người dùng của chúng tôi? Biểu tượng ống nhòm có truyền tải đầy đủ khái niệm tìm kiếm trang web hay kính lúp sẽ được hiểu rõ hơn? Đôi khi thiết kế thông tin liên quan đến việc nhóm hoặc sắp xếp các mẩu thông tin. Chúng ta thường coi khía cạnh này của thiết kế là điều hiển nhiên vì chúng ta đã quen với việc nhìn thấy thông tin chung được nhóm theo những cách nhất định. Ví dụ: nhìn vào danh sách các mục này.
Tất nhiên, điều quan trọng là nhóm và sắp xếp các yếu tố thông tin theo cách phản ánh cách người dùng của bạn nghĩ và hỗ trợ các nhiệm vụ và mục tiêu của họ. Các mối quan hệ khái niệm giữa các yếu tố này thực sự là kiến trúc thông tin cấp vi mô; thiết kế thông tin phát huy tác dụng khi chúng ta phải truyền đạt cấu trúc đó trên trang.
Ví dụ để các thông tin mà chúng ta thường thấy được sắp xếp trên các trang thương mại điện tử
– Thông tin sản phẩm: giá, thông số chi tiết, khuyến mãi
– Thông tin cá nhân: tên, số điện thoại, email
– Thông tin thanh toán: tiền mặt, ngân hàng, ví điện tử
Wireframe – Output của Định hướng Khung sườn
Hay còn được gọi là Khung xương – là nơi thiết kế thông tin, thiết kế giao diện và thiết kế điều hướng kết hợp với nhau để tạo thành một bộ khung thống nhất, gắn kết. Wireframe kết hợp tất cả các hệ thống điều hướng khác nhau, mỗi hệ thống được thiết kế để truyền tải một cách nhìn khác nhau về kiến trúc; tất cả các yếu tố giao diện theo yêu cầu của bất kỳ chức năng nào trên trang; và thiết kế thông tin hỗ trợ cả hai điều này, cũng như thiết kế thông tin của chính nội dung trang.
Tìm hiểu chi tiết hơn về wireframe tại: Nền tảng User Experience: Wireframe có thật sự cần thiết?
Giá trị của wireframes là cách chúng tích hợp cả ba yếu tố của mặt phẳng cấu trúc: thiết kế giao diện, thông qua việc sắp xếp và lựa chọn các yếu tố giao diện; thiết kế điều hướng, thông qua việc xác định các hệ thống dẫn đường cốt lõi; và thiết kế thông tin, thông qua việc sắp xếp và ưu tiên các thành phần thông tin. Bằng cách kết hợp cả ba lại với nhau thành một tài liệu duy nhất, wireframe có thể xác định khung sườn tổng quan dựa trên Định hướng Cấu trúc. Điều này làm nền tảng cho việc triển khai giao diện ở bước kế tiếp.
Kết luận
Định hướng Khung sườn là bước quan trọng để kết nối những cấu trúc tổng quan thành những mảnh chi tiết và rõ ràng. Điều này tạo sự kết nối giữa các bước, đồng thời hạn chế việc thiết kế một kiểu, còn ý tưởng trước là một kiểu hoàn toàn khác. Chúng ta vẫn tự do sáng tạo với ở bước sau, tuy nhiên nếu không có một cơ sở để dựa vào dựa trên những nguyên liệu về cấu trúc đã định hình, sẽ rất khó để sản phẩm đạt được sự đồng nhất, đó là chưa đề cập đến sự chậm trễ trong timeline triển khai khi bước cuối cùng cho phép sự tự do thay đổi.
Các định hướng này không hề phức tạp nếu doanh nghiệp thật sự quan tâm đến trải nghiệm người dùng. Rebo Agency với phương pháp luận và kinh nghiệm xây dựng trải nghiệm người dùng vững chắc là đơn vị hỗ trợ doanh nghiệp xây dựng bệ phóng kinh doanh kinh điển cho sản phẩm của mình. Chúng tôi xây dựng và phát triển nguồn lực doanh nghiệp với khoá học Figma Thực Chiến, đào tạo thực tiễn và nâng cao năng lực chuyên môn từ nhân viên đến cấp quản lý của doanh nghiệp. Quá trình phát triển bền vững luôn cần sự vững chắc từ nội tại, không chỉ nằm ở những yếu tố bên ngoài. Trong một môi trường kinh doanh thay đổi liên tục như hiện tại, củng cố năng lực nội tại của doanh nghiệp nhằm đáp ứng đòi hỏi của thời đại là một định hướng khôn ngoan.
