Sử dụng phác thảo để thiết kế tốt hơn Kiến thức chung

Trải nghiệm người dùng trên mobile ngày càng hoàn thiện. Một cách để đánh giá điều này là nhìn vào các tools theo đánh giá của chúng ta.

 

 

Các tool dành cho việc Prototype như Balsamiq, Axure và Fireworks cho phép chúng ta dựng lên một wireframe và những nút chạm, giúp chúng ta trình bày những trải nghiệm cần hướng

 

Những framework làm việc trên nhiều trình duyệt như PhoneGap, Zurb Foundation và jQuery Mobile giúp chúng ta tạo ra prototype sử dụng những ngôn ngữ native of web; HTML, CSS, và JavaScript.

 

Tại sao? Những trường hợp cần Phác Thảo

Chúng ta dường như đang ở tại thời điểm tốt hơn bất cứ khi nào để thiết kế trải nghiệm. Hơn thế, những công cụ trên đi kèm với những bước bị giảm bớt; Chúng khiến chúng ta bỏ đi những bước quan trọng để tạo một sản phẩm tốt – điều mà chúng ta cần thời gian để hiểu và giải quyết vấn đề.

 

Đó là lý do tại sao tôi đề nghị sử dụng phương pháp phác thảo để hiểu vấn đề và tiếp tục với ý tưởng trước khi trình bày nó trên một công cụ mà bạn yêu thích.

 

Ngay lúc này, bạn có thể nghĩ về một trong những lý do sau:

 

Chúng tôi có một thời hạn deadline rất gấp và không có thời gian để phác thảo. Chúng tôi cần bắt đầu ngay "Thiết kế bằng – công cụ quen thuộc – sẽ nhanh hơn nhiều. Tôi cần có một kết quả ngay lập tức." 

 

"Chúng tôi cần trình bày kết quả tới khách hàng. Chúng tôi không thể gửi họ một bản phác thảo tay." "Chúng tôi không thể vẽ".

 

Rất nhiều lần tôi đã nghe những lý do vậy, tôi cũng từng biện minh những lý do như vậy cho mình.

 

Nhận biết vấn đề và giải quyết chúng.

Phác thảo giúp chúng ta khám phá ra những vấn đề và tìm ra cách giải quyết cùng một lúc. Nó định hình và giúp chúng ta thấu hiểu vấn đề đang có, đồng thời giúp chúng ta đề ra nhiều giải pháp.

 

Khi bạn bắt đầu phác thảo, những ý tưởng bắt đầu nảy sinh. Sự mơ hồ trong những phác thảo lại khiến chúng ta có những ý tưởng hay.

 

Điều tuyệt vời nảy sinh ra khi bộ óc của bạn tự động tưởng tưởng ra những phần thiếu hụt. Nó khiến phác thảo "tự sinh" ra những ý tưởng mới như Bill Buxton từng nói trong Phác thảo trải nghiệm người dùng

 

"Học từ phác thảo là việc dựa trên sự tưởng tượng tự nhiên của việc hình dung ý tưởng. Nó là việc không tập trung vào điều gì nhất định mà để chúng tự tăng cường, tự giải thích.

 

Bằng việc phác thảo nhiều giải pháp với một vấn đề, chúng ta có thể khám phá những giới hạn của chúng. Điều này giúp chúng ta có thêm những câu hỏi hay. Phác thảo chính xác là một bài tập brainstorming.

 

Giá trị của việc Phác thảo

Cách nhanh nhất để lấy một thứ gì đó ra khỏi đầu chúng ta là vớ ngay lấy cây bút và một tập giấy rồi bắt đầu vẽ "nguệch ngoạc". Hãy cố gắng vẽ giống như cách chúng ta dùng tool prototyping hàng ngày.

 

Chúng ta phải tạo một dự án, quyết định thư viện để dùng, đặt những ô chữ nhật trên vùng giấy, vẽ vài mũi tên chỉ ra sự kết nối giữa các hình chữ nhật, sắp xếp lại mọi thứ để nhìn nó sáng sủa – có lẽ không lâu hơn 30p của bạn.

 

Nếu không thích những hình vẽ trên giấy của mình, bạn có thể ngay lập tức vứt nó và xọt rác. Sử dụng công cụ prototyping, có lẽ khiến bạn nuối tiếc khi xoá chúng đi, vì chúng khá tốn thời gian để tạo ra chừng đó thứ.

 

Bắt đầu một thứ mới trên giấy dễ dàng hơn bắt đầu với trên một công cụ.

 

 

 

Phác thảo là một công cụ giao tiếp

Một câu nói vô cùng quen thuộc "Một tấm hình đáng giá ngàn lời nói". Phác thảo cho phép chúng ta dạo chơi khắp nơi của dự án, thấu hiểu từng ngóc ngách của dự án. Chúng ta có thể sử dụng những cách hiển thị khác nhau đề trình bày những khía cạch của dự án. Trong The Back of the Napkin, Dan Roam đã nói"

 

Một tấm hình có thể thể hiện nhiều ý tưởng phức tạp và tổng hợp thông theo theo một cách dễ dàng cho chúng ta hiểu và cảm nhận, chúng rất hữu dụng để làm sáng tỏ và giải quyết các vấn đề nhanh chóng.

 

Các đồng nghiệp của chúng ta có thể chỉ ra những vấn đề thông qua việc tương tác và thảo luận. Họ thích việc hiểu những phần tóm tắt và đưa ra phản hồi dựa trên những chi tiết trên phác thảo.

 

Trình bày ý tưởng với người khác cũng giúp chúng ta suy nghĩ thêm về ý tưởng; chúng ta sẽ thấy những phần lỗi, những phần cần làm tốt hơn và ngay lập tức suy nghĩ tìm cách khắc phục.

 

Phác thảo giống như một công cụ thân thiện

Phác thảo là một công cụ vô cùng hiệu quả giúp cho các bộ phận cùng làm việc ngay lập tức trên thiết kế. Đôi khi vấn đề "quả trứng, con gà" có thể được giải quyết tốt vì các bên liên quan không nhất thiết phải đợi một yêu cầu đầy đủ.

 

Chọn giải pháp Phác Thảo là một phương pháp thân thiện, và ai cũng có thể tham gia và cùng làm việc với nó. Nó không tạo ra các rào cản giữa các bộ phận, thiết kế, quản lý dự án, khách hàng.

 

Do việc Phác Thảo không bao giờ kết thúc và nó xảy ra liên tục, nên việc đưa phản hồi rất dễ dàng. Ai đó có thể quay lại ngay từ đầu và đặt vấn đề về quy trình này, cách tương tác này.

 

Họ sẽ không bị quá sa đà vào việc tìm một kiểu thiết kế đẹp cho layout, một icon có ý nghĩa tốt hơn… Họ có thể tập trung hoàn toàn vào những ý tưởng chính của dự án.

 

Điều duy nhất khiến bạn ngần ngại ở đây là cho họ xem phác thảo – một sản phẩm chưa hoàn thành của mình. Tuy nhiên;

 

Phác thảo không phải là Vẽ

Có nhiều người vẫn quan niệm việc phác thảo cần chút "hoa tay". Nhưng thiết kế tương tác không phải là làm nghệ thuật. Phác thảo của bạn không cần quá chỉnh chu, đẹp tới từng chi tiết; chúng chỉ cần thể hiện được ý tưởng của bạn.

 

Chúng là cách giúp bạn phát triển ý tưởng, chúng không như một tấm voan để vẽ. Chúng chỉ gồm các hình vuông, hình tròn và các mũi tên, đâu đó vài chỗ có ghi chú. Như Joshua Brewer viết trong "Sketch, sketch, sketch"

 

"Phác thảo không phải là mục tiêu cuối cùng. Mục tiêu cuối cùng của quá trình phác thảo là những gì bạn học ra trong khi vẽ vời. Vì vậy đừng lo lắng khi bạn không thể vẽ."

 

• “The ‘Art’ of Sketching Interfaces” (slides), Jason Mesut and Sam Smith
• “Sketching 101” (slides), Jackson Fox
• “The Messy Art of UX Sketching,” Peiter Buick
• Sketching User Experiences: The Workbook, Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt, Bill Buxton (Morgan Kaufman: 2011)

 

Làm sao để Phác Thảo

Bây giờ tôi "hy vọng" rằng bạn coi phác thảo là một bước trong quá trình làm việc của mình.

 

Tạo ra những Phác thảo khác nhau

 

Khi bắt đầu, bạn cần nắm bắt những ý tưởng trong đầu cho ứng dụng mobile của bạn hoặc một trang web. Bắt đầu vẽ nhiều phiên bản khác nhau cho một màn hình hoặc một phần trong nó.

 

Mục tiêu của bạn là diễn giải những ý tưởng khác nhau, khám phá chúng, đánh giá chúng. Càng nhiều ý tưởng tới, bạn sẽ có càng nhiều lựa chọn để tiếp tục. Quá trình này gọi là "Tạo ra nhiều phác thảo"

 

Một công cụ tuyệt vời ở quá trình này là một tờ giấy đủ lớn. Nó cần cung cấp đủ không gian để vẽ khoảng 6 phiên bản khác nhau, và có chỗ để ghi những ghi chú cần thiết. Việc trình bày nhiềy phiên bản trên cùng một mặt giấy, giúp bạn dễ dàng đánh giá từng cái, điểm tốt, điểm chưa tốt.

 

Có rất nhiều template có sẵn ở trên mạng (Tôi thường sử dụng mẫu của Erik Loehfelm) và bạn có thể tự chọn cho mình.

 

 

 

Tập trung Phác thảo

 

Khi bạn có nhiều phác thảo trên một tờ giấy, hãy chọn một phác thảo có nhiều giải pháp tốt nhất. Không may, một phác thảo thường hiếm khi đạt đủ các yếu tố tốt, bạn cần kết hợp điểm tốt ở tất cả vào một mẫu phác thảo duy nhất.

 

Để làm điều này, bạn sẽ bắt đầu sâu hơn khi làm việc trên một trang chỉ có một phác thảo duy nhất. Sử dụng không gian cho chú thích. Ghi ra các câu hỏi, câu trả lời, ý tưởng mới, điều quan trọng, khu vực chưa tốt, khu vực cần nghiên cứu thêm…

 

Lúc này bạn đang ở quy trình tập trung vào một phác thảo.

 

Thiết lập Quy trình cho giao diện (UI Flows)

 

Sau khi làm nóng những ý tưởng của mình với các trang giấy, bước kế tiếp bạn cần chỉ ra việc chúng sẽ liên kết với nhau thế nào. Điều này có nghĩa là bạn đang đi vào quy trình tạo một Quy trình của giao diện (nó giống như một loạt các màn hình liên kết với nhau), nó chỉ ra những cách thức chúng làm việc với nhau.

 

Quy trình giao diện chỉ ra những yếu tố trên giao diện được sử dụng thế nào (một nút sẽ được bấm, hay màn hình sẽ được dùng ngón tay lướt, hay bấm giữ để có các options). Nó cũng chỉ ra những chuyển động, hay popup sinh ra…

 

Bạn có thể hình dung ra nhiều kết quả khác nhau khi làm việc với UI flows. Qui trình giao diện của bạn có thể có khác biệt, nhưng hãy hạn chế tạo ra nhiều bước, nhiều nhánh khiến người dùng cảm thấy bối rối. Hãy tập trung vào điều bạn muốn người dùng hướng tới.

 

 

 

 

Bạn cũng không cần phác thảo ra hết các trường hợp; chọn một cái quan trọng và được sử dụng nhiều nhất. Nguyên tắc của Parete cung cấp một cách làm khá hay: Prototype 20% chức năng mà sẽ được 80% sử dụng.

 

Các bước cần lưu ý

Để cung cấp cho bạn nhiều bối cảnh và chỉ ra cách để tương tác tốt với phác thảo của mình. Dưới đây là các bước của một phác thảo điển hình.

• Liệt kê thông tin bạn có và điều bạn muốn thể hiện
• Tạo một loạt phác thảo đầu tiên
• Xem lại chúng một cách kỹ càng
• Chỉ ra đâu là điểm mạnh và điểm yếu của từng cái
• Các yếu tố thiết kế và dữ liệu có đồng nhất
• Bạn có hiển thị dữ liệu cùng một cách không?
• Các tương tác có đủ rõ ràng?
• Nhận phản hồi từ người khác. Bắt đầu với đồng nghiệp và sau đó là người dùng tiềm năng nếu có thể.
• Ấn tượng đầu tiên của bạn?
• Điều gì bạn thích nhất? Tại sao?
• Điều gì bạn không thích? Tại sao?
• Điều gì chưa rõ ràng trong phác thảo này?
• Tại sao người khác lại đề nghị điều này, nó có tốt không? Và làm sao để đạt được nó?
• Phác thảo dễ hiểu chưa?
• Các bước có thể ít hơn nữa không?
• Xem lại các phản hồi đáng giá.
• Có câu hỏi nào mới?
• Những gì bạn đã đạt được?

 

Bạn có thể thấy có rất nhiều câu hỏi Tại Sao. Vì đây là Phác thảo và bạn luôn phải tìm hiểu các vấn đề và giải quyết nó trong quá trình làm việc. Viết ra các câu hỏi trong quá trình phác thảo giúp bản thân chúng ngày càng tốt hơn.

 

Sau khi Phác Thảo

Sau khi hoàn thành phác thảo của mình, bạn sẽ muốn nó hiển thị trên sản phẩm thật. Những ứng dụng như Pop và Protosketch cho phép bạn nhập hình ảnh phác thảo và biến chúng thành prototype.

 

Chúng nhanh và dễ dàng để bạn cảm nhận sự tương tác của phác thảo. Cả hai ứng dụng đều cho phép bạn tạo những vùng có thể click và chuyển trang, điều khiến phác thảo thêm sinh động.

 

Bên cạnh đó, những công cụ như Axure thì quá tuyệt để làm việc này. Cho dù bạn chọn ứng dụng nào, thì mục tiêu cuối cùng cũng là kiểm tra phác thảo nhanh chóng và tạo ra một môi trường giống thật nhất để thử nghiệm.

 

Điều cần nhớ

Phác thảo giúp bạn hiểu hơn vấn đề mà bạn đang giải quyết và để bạn hình dung các giải pháp. Nó nhanh và không tốn kém để tạo ra vô vàn ý tưởng UI trước khi chọn lấy một cái tuyệt nhất.

 

Phác thảo đẩy nhanh quá trình tạo ra ý tưởng và có được phản hồi, dễ dàng sửa đổi.

 

Lần kế tiếp khi bạn Phác thảo, hãy giữ những nguyên tắc này trong đầu. Chúng sẽ giúp bạn làm việc hiệu quả.

 

Đừng quá siêng năng trong việc tạo ra các template mới, hãy dùng những gì có sẵn. Để có cảm hững hãy xem những mẫu phác thảo được sưu tầm.

 

Dừng đúng lúc. Đừng để phác thảo đi quá xa chủ đề ban đầu. Hãy ghi lại những gì có trong đầu khi phác thảo, bạn có thể quên chúng.

 

Hãy cởi mở. Gắn các phác thảo lên tường, đề nghị bạn bè cùng xem và lắng nghe phản hồi của bạn.

 

Nếu có vấn đề, phác thảo nhiều hơn nữa. Khi bạn không chắc chắn về giải pháp đó, bắt đầu phác một giải pháp khác. Liệt kể mặt được, mặt dở trong các phác thảo và chọn những cái tốt nhất.

 

 

 

Theo Smashing Magazin

Xem thêm:
Quá trình phác thảo của 11 logo nổi tiếng thế giới
10 cách đơn giản để nâng cao kỹ năng thiết kế đồ họa
Sắp xếp nơi làm việc với một designer
6 cách giúp bạn cải thiện cuộc sống sáng tạo
Giúp bạn nâng cao kĩ năng thiết kế đồ họa
​29 điều những nhà thiết kế trẻ nên biết
Làm thế nào để trở thành Designer thành công