Những điều bạn cần biết về Wireframes và Prototypes

0
2185

Wireframes và Prototypes là hai giai đoạn thường được kết hợp với thiết kế UX. Rất nhiều người trong lĩnh vực thiết kế kỹ thuật số sử dụng thuật ngữ Wireframes và Prototypes thay thế cho nhau, nhưng chúng phục vụ các mục đích khác nhau.

Bài viết này sẽ giải thích những căn bản: chúng thực hiện mục tiêu gì? Vì sao chúng hữu ích và chúng nằm trong quá trình thiết kế UX như thế nào?

Wireframes

Wireframe là gì?

Wireframe được biết đến như “bộ xương” tĩnh, khung sườn của website. Nó thể hiện trực quan giao diện theo các bố cục, các hình dạng đơn giản. Wireframe thể hiện các cách phần của trang web, app được kết hợp với nhau, cách nội dung hiển thị, và chức năng (cách giao diện sẽ hoạt động).

Cơ bản, wireframes là câu chuyện của tương lai. Chúng giúp team design hiểu được tình trạng hiện tại, tầm nhìn và con đường mà mọi người hướng tới để đạt được thiết kế cuối cùng.

Wireframe trông như thế nào?

Wireframes không giống như sản phẩm hoàn thành. Về đồ họa của wireframes rất hạn chế. Các thành tố cơ bản trong thiết kế hoàn chỉnh sẽ được thay thế bằng những thành tố rất cơ bản:

  • Hình ảnh = Hình tứ giác đánh dấu chéo
  • Text = Lorem Ipsum
  • Video = Hình tứ giác có dấu tam giác biểu thị cho nút play

Chức năng cơ bản của Wireframe

Wireframes giúp tạo nền, tiền đề cho designers bắt đầu. Từ khung sườn này, bạn mới sáng tạo dựa trên đó, đảm bảo đi đúng hướng, tránh phải làm lại.

Ngoài ra, Wireframes giúp designers kiểm tra nhanh tổng thể thiết kế trước khi bỏ công sức thiết kế hoàn chỉnh. Các yếu tố cơ bản giúp mọi người tập trung vào cốt lõi hơn là các chi tiết không quan trọng.

Wireframes được làm khi nào?

Wireframes được tạo ra vào giai đoạn đầu của thiết kế trước khi được bao lớp áo sang chảnh chi tiết. Vào giai đoạn làm wireframes, việc chỉnh sửa dễ dàng, có thể thí nghiệp nhiều layout khác nhau.

Vai trò của Wireframes

  • Công cụ giao tiếp: Một hình ảnh đáng giá hơn ngàn lời nói. Nhìn vào wireframes bạn sẽ biết nên chọn màn hình nào, hướng đi ra sao.
  • Wireframes thường được sử dụng như bảng miêu tả chức năng. Wireframes được chia sẻ cho mọi người trong team và họ hiểu được những ý tưởng trong đó.

Hạn chế của Wireframing

Wireframes chỉ là khung sườn, nhưng nếu bạn muốn diễn tả những ý tưởng thiết kế phức tạp hơn như hiệu ứng chuyển động. Trong khi hai wireframes có thể giúp bạn hiểu được tương tác giữa những gì ban đầu và sau đó thì như thế nào, nhưng những gì xảy ra ở đoạn giữa thì bạn không thể hình dung được. Nếu bạn muốn diễn tả hiệu ứng chuyển động, tính tương tác thì bạn cần Prototype

Các phương pháp Wireframing

  • Sketching: Wireframes có thể vẽ bằng tay. Đây là cách nhanh chóng, tốt cho việc brainstorm, phát thảo nhanh các ý tưởng, khám phá các layout khác nhau.
  • Sử dụng phần mềm: các phần mềm như XD, PhotoshopIllutrator. XD là phần mềm hiện bạn có thể tải về dùng miễn phí và vô cùng tiện lợi.

Tips

  • Keep them simple. The key to wireframing is speed and simplicity. Wireframes should be created quickly, since the aim of a wireframe is to show the structure of a page’s design. Details come later.
  • Giữ wireframe thật đơn giản: Mục tiêu chính trong quá trình làm wireframe là tốc độ và sự đơn giản. Nó là khung sườn của web hoặc app.
  • Chú thích: giúp cho wireframes trở nên dễ hiểu hơn và lưu lại được điều cần thiết, nhìn vào là nhớ và hiểu ngay.
  • Dùng wireframe kit. sử dụng các thành phần có sẵn như Wires dành riêng cho phần mềm XD

Prototypes

Prototype là gì?

Thực hiện Prototype giúp bạn có được quá trình khám phá ý tưởng bằng cách xây dựng một trải nghiệm tương tác. Prototype giúp mô phỏng tương tác của user. Prototype là giai đoạn đầu tiên mà designers thực sự tương tác với sản phẩm của họ trong dự án đó.

Prototype trông như thế nào?

Prototypes có hai loại: low-fidelity và high-fidelity (mức độ giống với sản phẩm hoàn thành).

  • A low-fidelity prototype loại này có thể click và di chuyển, nhưng thường là đơn giản dạng như luồng đi từ trang này đến trang khác.
  • Dạng thứ hai thì tương đối chi tiết hơn, có hình ảnh, text giúp mô phỏng giống app thật như đang hoạt động hơn.

Vài trò của prototype

Prototype đóng vai trò như một chiếc cầu đến với sản phẩm thật. Mục tiêu của prototype là mô phỏng tính tương tác của người dùng và giao diện. Có thể prototype không có tất cả các tương tác, nhưng nó chưa các tương tác chính yếu giúp bạn hiểu rõ mục tiêu sản phẩm cuối cùng sẽ như thế nào. Không có prototype sẽ khiến cho việc test tính tương tác của user và giao diện vô cùng khó khăn, rất khó hình dung.

Lợi ích của Prototyping

  • Ý tưởng trực quan: Thay vì dạng miêu tả text, prototype sẽ giúp việc thuyết phục khách hàng tốt hơn.
  • Giúp bạn nhận biết sớm vấn đề.
  • Trong khi wireframes cho bạn một cái sườn, thì prototype giúp bạn hình dung được cách sử dụng. Cho tester dùng thử prototype sẽ giúp bạn nắm rõ đường đi của user và những vấn đề có thể phát sinh mà bạn không thể hình dung trên giấy được.

Các phương pháp Prototyping

Hiện tại bạn có thể phần mềm XD để làm prototype cực dễ.

Tips

  • Đừng dừng lại ở một ý tưởng cho prototype của bạn. Thông thường bạn sẽ yêu thích ý tưởng đầu tiên, và có cảm giác nó là ý tưởng đúng đắn nhất. Do đó, sẽ bắt đầu làm prototype cho ý tưởng đó. Nhưng điều quan trọng là bạn nên thử nhiều cách khác nhau, từ đó có nhiều vấn đề phát sinh cũng như giải pháp.
  • Chọn đúng mức độ chi tiết của prototype cho dự án của mình. Điều này dựa trên mục tiêu của testing và nguồn lực sẵn có.
  • Nếu bạn có thể tái chế prototype để dùng nhiều lần thì có thể tiết kiệm thời gian cho những ai thường xuyên làm prototype.

Tóm lại

Các bước wrieframe và prototype rất cần thiết cho một thiết kế thành công. Nhưng luôn nghĩ đến lợi ích của người dùng trong quá trình thiết kế bạn nhé. Điều này sẽ giúp bạn xây dựng được sản phẩm mà người dùng yêu thích.

LEAVE A REPLY

Please enter your comment!
Please enter your name here