Flat 2.0 & Cách giải quyết các vấn đề về khả năng sử dụng của thiết kế phẳng

Thiết kế phẳng đã xuất hiện từ đầu những năm 1950 khi Phong cách đánh máy quốc tế được phát triển. Trong thời gian gần đây, nó đã trở nên phổ biến rộng rãi kể từ khi Microsoft ra mắt thiết kế Metro tập trung vào hình học và kiểu chữ ngôn ngữ, lúc đầu trong Windows Phone mới vào năm 2010, sau đó là Windows 8 vào năm 2012.

Thiết kế phẳng được đặc trưng bởi thiếu hiệu ứng ba chiều và các yếu tố hình ảnh bóng để đạt được sạch sẽ, tối giản, và trong trẻo. Nó đi ngược lại phong cách thiết kế chiếm ưu thế trước đây, tính đa dạng sử dụng các nút sáng bóng và hình minh họa bắt chước các vật thể 3D ngoài đời thực.

Thiết kế phẳng về cơ bản nhằm mục đích hợp lý hóa các trang web, nâng cao sự tập trung vào nội dung, cung cấp các tương tác trực quan hơn và cung cấp trải nghiệm người dùng nhanh hơn và nhiều chức năng hơn. Thật dễ dàng để sử dụng các yếu tố đơn giản, giống như hộp và bố cục dựa trên lưới cho thiết kế đáp ứng.

Vấn đề về khả năng sử dụng của thiết kế phẳng

Mặc dù thiết kế phẳng mang lại cho chúng tôi sự trợ giúp to lớn và bộ công cụ tuyệt vời để cung cấp cho người dùng của chúng tôi các trang web nhanh và không lộn xộn, nhưng nó có thể gây ra một số vấn đề về khả năng sử dụng, đặc biệt là khi nó bị lạm dụng.

Không có dấu hiệu trực quan của khả năng nhấp

Nếu chúng ta sử dụng hiệu ứng ba chiều, nó tự nhiên tạo ảo giác về chiều sâu cho các thiết kế của chúng ta. Điều này giúp người dùng nhanh chóng tìm các yếu tố tương tác, những cái có thể được bấm vào (như các nút và biểu tượng) hoặc điền vào (như các trường mẫu). Một trong những mối quan tâm chính về thiết kế phẳng là nó khiến người dùng khó có thể nhận ra các yếu tố có thể nhấp.

Trước kỷ nguyên phẳng, các nhà thiết kế web thường chỉ ra khả năng nhấp bằng cách sử dụng các giải pháp trực quan như độ dốc, kết cấu, cạnh nổi hoặc bóng đổ để làm cho các nút và các đối tượng có thể nhấp khác trông giống như chúng có thể được nhấn vào.

Thiết kế phẳng thiếu các ký hiệu trực quan này và phải giải quyết cùng một nhiệm vụ với bộ công cụ nhỏ hơn nhiều: màu sắc, hình dạng, sự gần gũi, và yếu tố bối cảnh.

Tại sao nó là một vấn đề? Hãy thử một thí nghiệm.

Nhìn vào ảnh chụp màn hình dưới đây. Hãy thử đoán những yếu tố nào có thể nhấp được dựa trên ảnh chụp màn hình này. Đó không phải là những gì bạn sẽ nghĩ đến đầu tiên. Chúng tôi có thể tìm thấy nhiều vấn đề về khả năng sử dụng tương tự khác trên tất cả các trang web.

Giảm khả năng khám phá vì không có trục Z

Mọi người trong cuộc sống thực tìm thấy các vật thể và di chuyển theo ba chiều: trục x, y- và z. Khi họ chạy vào một trang web phẳng, được thiết kế tối giản mà không có hiệu ứng 3D, họ có được trải nghiệm khác với những gì họ đã quen, những gì họ chủ yếu quen thuộc với.

Điều này có nghĩa là họ cần phải sử dụng nhiều nỗ lực hơn để khám phá mối quan hệ giữa các đối tượng, và hiểu thứ bậc thị giác của trang web. Ví dụ: chúng ta cần dành nhiều thời gian hơn trên trang chủ của Mạng lưới nhà phát triển của Microsoft để giải mã trực quan thông tin và mục đích của các yếu tố khác nhau trên trang web.

Nguyên tắc nhỏ trong thiết kế UX là luôn cố gắng giảm thiểu tải nhận thức cho người dùng để tối đa hóa khả năng sử dụng. Như chúng ta có thể thấy nó trong nhiều trường hợp, điều này không phải lúc nào cũng xảy ra với thiết kế phẳng.

Mật độ thông tin thấp

Thiết kế phẳng cũng đã bị chỉ trích vì có nguy cơ mật độ thông tin thấp bởi chuyên gia UX Nielsen-Norman Group.

Trong những lời chỉ trích về khả năng sử dụng của Windows 8, họ đã sử dụng các ví dụ về ứng dụng Windows Store và trang web của Thời báo Los Angeles để hiển thị các vấn đề mà mật độ thông tin thấp (có một vài câu chuyện trên màn hình ban đầu, tiêu đề không có tóm tắt, nhóm khó nhận biết, v.v.) có thể gây ra từ quan điểm về khả năng sử dụng.

Từ khía cạnh khác, ít thông tin hơn cũng có thể được coi là loại bỏ phiền nhiễu, cho phép người dùng chỉ tập trung vào những điều quan trọng, nhưng nếu sự tối giản quá mức, nó có thể dễ dàng hy sinh mục tiêu chính của trang web, tức là chuyển đổi thông tin cho người xem.

Sự trỗi dậy của căn hộ 2.0

Khi ngày càng nhiều nhà thiết kế nhận ra các lỗ hổng khả năng sử dụng của thiết kế phẳng, một phiên bản mới, trưởng thành hơn của nó đã xuất hiện, được gọi là “Căn hộ 2.0” hoặc là “Hầu như phẳng” thiết kế. Trong khi sự thay đổi từ tính đa dạng sang căn hộ là triệt để, thì sự phát triển của thiết kế phẳng khó nắm bắt hơn nhiều.

Phong cách mới vẫn phẳng, nhưng nó thêm một chút ba chiều trở lại các thiết kế dưới hình thức bóng tối tinh tế, nổi bật, và lớp. Flat 2.0 - nếu nó được sử dụng tốt - có thể khắc phục các vấn đề về khả năng sử dụng đã nói ở trên bằng cách mang lại một chút hiện thực (tính đa dạng), và thêm một số chiều sâu và chi tiết, trong khi vẫn giữ các lợi thế của sự tối giản như trang web được sắp xếp hợp lý, rõ ràng và thời gian tải trang nhanh hơn.

Vật liệu thiết kế

Ngôn ngữ thiết kế mới của Google, được gọi là Thiết kế Vật liệu có lẽ là ví dụ đáng chú ý nhất về phong cách Flat 2.0. Google đã phát hành Thiết kế Vật liệu với Android L vào năm 2014. Mặc dù Thiết kế Vật liệu vẫn giữ các đặc điểm chính của thiết kế phẳng, nhưng nó sử dụng các phép ẩn dụ nhất định từ vật lý để giúp người dùng nhanh chóng tìm thấy sự tương đồng giữa thế giới thực và thế giới kỹ thuật số.

Thiết kế Vật liệu sử dụng trục z, cho độ sâu tinh tế để thiết kế, và thông minh sử dụng các lớp bằng cách ngăn cách chúng với bóng đổ và hình ảnh động. Google có một mô tả siêu máy tính về cách thức hoạt động của nó và thật sự đáng để đọc qua nó để hiểu các nguyên tắc và quy tắc chính của nó.

Phần kết luận

Vì các nhà thiết kế giỏi luôn đặt mục tiêu cải thiện trải nghiệm của người dùng, ngành thiết kế web luôn thay đổi. Thiết kế phẳng đã thay thế sự đa dạng một cách nhanh chóng, dẫn đến dựa trên lưới, bố trí tối giản và các yếu tố đơn giản gần đây đã tràn ngập web (điều này đã tạo ra một số cuộc nói chuyện về thiết kế web trở nên nhàm chán hoặc thậm chí là chết, nhưng nó không thể là sự thật).

Flat 2.0 đưa ra câu trả lời cho các vấn đề nhận thức của thiết kế phẳng. Đó là một sự thỏa hiệp thông minh giữa chức năng, tính thẩm mỹ và khả năng sử dụng. Tất nhiên, chúng tôi không cần sử dụng bộ dụng cụ UI UI mọi nơi, nhưng hiểu được triết lý đằng sau nó có thể cho chúng ta một nền tảng vững chắc về làm thế nào để phát triển phong cách của chúng ta phù hợp với những phát hiện mới nhất trong thiết kế trải nghiệm người dùng.