2.1 Khái niệm về Wireframes ?
Không giống với bản thiết kế kiến trúc, wireframes là một phác thảo khung màn hình hai chiều của trang web hoặc ứng dụng. Wireframes cung cấp một cái nhìn tổng quan rõ ràng về cấu trúc trang, bố cục, kiến trúc thông tin, luồng người dùng , chức năng và các hành vi dự định. Vì wirdframes thường đại diện cho khái niệm sản phẩm ban đầu, kiểu dáng, màu sắc và đồ họa được giữ ở mức tối thiểu. Các khung lưới có thể được vẽ bằng tay hoặc được tạo bằng kỹ thuật số, tùy thuộc vào mức độ chi tiết được yêu cầu.
Wireframing là được sử dụng phổ biến nhất bởi các nhà thiết kế UX. Quá trình này cho phép tất cả các bên liên quan đồng ý về nơi thông tin sẽ được đặt trước khi các nhà phát triển xây dựng giao diện.
2.2 Mục đích của Wireframes là gì ?
• Wireframes giúp ta luôn tập trung vào người dùng: Wireframes được sử dụng hiệu quả như các thiết bị truyền thông, họ tạo điều kiện cho phản hồi từ người dùng, thúc đẩy các cuộc trò chuyện với các bên liên quan và tạo ra ý tưởng giữa các nhà thiết kế. Tiến hành thử nghiệm người dùng trong giai đoạn sơ khai của wireframes giúp ta tiếp nhận được những phản hồi chính xác từ người dùng và xác định vấn đề chính để thiết lập và phát triển sản phẩm.Wireframing là cách hoàn hảo để ta đánh giá cách người dùng sẽ tương tác với giao diện. Bằng cách sử dụng các văn bản như Lorem Ipsum, văn bản giả tiếng Latinh đóng vai trò thay thế cho nội dung trong tương lai, ta có thể hỏi người dùng bằng các câu hỏi như “bạn mong đợi điều gì sẽ
được viết ở đây?’ Những câu trả lời sẽ giúp ta hiểu được những gì cảm thấy trực quan cho người dùng và tạo ra các sản phẩm thoải mái và dễ sử dụng.
• Wireframes làm rõ và xác định các tính năng trang web: Khi
truyền
đạt ý tưởng của ta tới khách hàng, họ có thể không có từ vựng kỹ thuật để theo kịp các thuật ngữ. Các tính năng cụ thể của Wireframing sẽ gợi ý rõ ràng với khách hàng về cách họ sẽ hoạt động. Wireframing cho phép tất cả các bên liên quan đánh giá lượng không gian cần phân bổ cho mỗi tính năng, kết nối kiến trúc thông tin của trang web với thiết kế trực quan của nó và làm rõ chức năng của trang. Xem các tính năng trên wireframes cũng sẽ cho phép ta hình dung cách tất cả chúng hoạt động như thế nào và thậm chí có thể nhắc ta quyết định xóa một số nếu ta cảm thấy chúng không hoạt động tốt với các yếu tố còn lại của trang.
• Wireframes là nhanh chóng và giá thành rẻ: Wireframes cực kỳ rẻ
phác thảo ra một khung dây mà không tốn một xu. Sự phong phú của các công cụ có sẵn có nghĩa làta cũng có thể xây dựng một wireframes kỹ thuật số trong vòng vài phút. Thông thường, khi một sản phẩm dường như quá bóng bẩy, người dùng sẽ ít thành thật về những ấn tượng đầu tiên của họ. Nhưng bằng cách phơi bày cốt lõi của bố cục trang, các lỗ hổng và vấn đề có thể dễ dàng được xác định và khắc phục mà không có bất kỳ chi phí đáng kể nào về thời gian hoặc tiền bạc. Càng về sau trong quá trình thiết kế sản phẩm, càng khó thực hiện các thay đổi!
2.3 Các loại wireframes thường thấy ?
• Low-fidelity wireframes: Các low – fi wireframes là các biểu diễn
trực quan cơ bản của trang web, ứng dụng và thường đóng vai trò là điểm khởi đầu của thiết kế. Như vậy, chúng có xu hướng khá thô, được tạo ra mà không có bất kỳ ý nghĩa nào về tỷ lệ, lưới hoặc độ chính xác pixel. Các khung lưới có độ chính xác thấp bỏ qua bất kỳ chi tiết nào có khả năng gây mất tập trung và chỉ bao gồm các hình ảnh đơn giản, hình dạng khối và giả lập nội dung giả tưởng như văn bản phụ cho nhãn và tiêu đề. Các low - fi wirframes rất hữu ích để bắt đầu các cuộc hội thoại, quyết định bố cục điều hướng và ánh xạ luồng người dùng. Chúng cũng cực kỳ hữu ích khi ta muốn nhanh chóng quyết định hướng bản thiết kế sẽ diễn ra như thế nào.
• Mid-fidelity wireframes: Các khung dây được ít nhất trong ba loại wireframes. Mặc dù chúng vẫn tránh các phiền nhiễu như hình ảnh hoặc kiểu chữ, chi tiết hơn được gán cho các thành phần cụ thể và các tính năng được phân biệt rõ ràng với nhau. Trọng lượng văn bản khác nhau cũng có thể được sử dụng để phân tách các tiêu đề và nội dung cơ thể. Mặc dù vẫn là màu đen và trắng, ta có thể sử dụng các sắc thái khác nhau của màu xám để truyền đạt sự nổi bật về thị giác của các yếu tố riêng lẻ. Mặc dù chúng vẫn có liên quan trong giai đoạn đầu của sản phẩm, các mid – fi wireframes thường được tạo bằng công cụ tạo khung kỹ thuật số.
• High Fidelity Wireframes: Trong trường hợp low - fiwireframes
có độ chính xác thấp có thể bao gồm các bộ đệm văn bản giả Latin và các hộp màu xám được điền 'X' để chỉ ra hình ảnh, các high – fi wireframes có thể bao gồm các hình ảnh đặc trưng thực tế và nội dung bằng văn bản có liên quan. Chi tiết được thêm vào này làm cho high wireframes có độ chính xác cao lý tưởng để khám phá và ghi lại các khái niệm phức tạp như hệ thống menu hoặc bản đồ tương tác. High – fi wireframes nên được lưu cho các giai đoạn sau của chu trình thiết kế của sản phẩm.