Thiết kế theo phong cách Microsoft

Từ khi Windows Phone ra đời, Microsoft đã tách biệt ra khỏi các đối thủ cạnh tranh nhờ một phong cách giao diện độc đáo Metro, lấy ý tưởng từ những biển hiệu thường thấy ở khu vực công cộng như trạm xe buýt, sân bay, tàu điện ngầm (cái tên Metro bắt nguồn từ đây). Giao diện này đã thổi một luồng sinh khí mới vào Microsoft, đến nỗi bây giờ mọi sản phẩm của họ đều mang hơi hướng Metro, kể cả logo của hãng.

Microsoft xem thiết kế Metro là xu hướng của tương lai. Do đó, họ khuyến khích lập trình viên tuân thủ nguyên tắc khi phát triển ứng dụng Windows 8 và Windows Phone.

Dưới đây là 5 nguyên tắc thiết kế ứng dụng giao diện Metro:

• Kiêu hãnh trong sự tinh xảo (Pride in Craftsmanship)
• Nhanh nhẹn và Uyển chuyển (Fast and Fluid)
• Kỹ thuật số đích thực (Authentically Digital)
• Làm nhiều hơn với ít hơn (Do More with Less)
• Chiến thắng toàn diện (Win as One)

Kiêu hãnh trong sự tinh xảo

Hầu hết lập trình viên khi thiết kế ứng dụng đều dành nhiều thời gian cho các tính năng. Họ thường ít quan tâm đến trải nghiệm người dùng. Những ứng dụng này có giao diện sơ sài, thiếu thẩm mỹ. Chỉ cần dạo một vòng app store, ta sẽ thấy hàng loạt ứng dụng như thế. Trong nguyên tắc này, Microsoft khuyến cáo ta lưu tâm từng chi tiết nhỏ. Những chi tiết này tuy nhỏ nhưng lại đập vào mắt người dùng thường xuyên. Do đó, ta nên dành nhiều thời gian, công sức để trau chuốt nhằm tạo một trải nghiệm hoàn hảo.

Sở dĩ lập trình viên ít quan tâm đến giao diện vì họ nghĩ chúng không quan trọng. Kết quả là sản phẩm cuối cùng gây khó khăn cho người sử dụng. Như tên gọi của nguyên tắc, ta phải coi việc thiết kế những chi tiết nhỏ trong trải nghiệm người dùng như niềm kiêu hãnh, biến nó thành điểm nhấn tinh xảo để mang đến một cảm giác thu hút, chuyên nghiệp.

Ngoài ra, cách sắp xếp bố cục cũng quan trọng không kém. Bố cục tốt phải hài hòa. Microsoft quy định từng khoảng cách giữa các lề, giữa các thành phần, và phần đệm giữa đường biên và nội dung. Nội dung khác nhau có cách trình bày khác nhau, ảnh sẽ được trình bày khác chữ. Cách đơn giản nhất để quan sát nguyên tắc này là xem app có thiết kế đẹp. Nếu sử dụng Windows 8.1, ta có thể dùng tính năng tìm kiếm tích hợp trong Windows để tìm thông tin trên Internet. Cách trình bày nội dung của nó tạo ra một trải nghiệm độc đáo thay vì danh sách kết quả khô khan. Khi thiết kế, ta nên tính toán cách hiển thị app khi thay đổi kích thước. Lúc đó, ta cần sắp xếp bố cục cho phù hợp với không gian mới.

Phong cách Metro không những được nhìn thấy trong giao diện ứng dụng mà còn thể hiện qua các tile trên màn hình Start. Windows dùng các tile này như là nơi cung cấp thông tin cập nhật cho người dùng. Giao diện app cũng phải nhất quán với tile để tạo cảm giác thân thuộc cho người sử dụng.

Nhanh nhẹn và Uyển chuyển

Tốc độ là thứ mọi người đều muốn khi sử dụng app. Họ không kiên nhẫn chờ đợi quá lâu để app khởi động hoặc thực hiện chức năng nào đó. Khi bật app, họ muốn giải quyết vấn đề thật nhanh. Do đó, đáp ứng tức thời là hết sức cần thiết.

Với vai trò lập trình viên, khi thiết kế app, ta phải làm cho nó phản hồi nhanh nhất vì chẳng ai thích nhìn màn hình loading với biểu tượng xoay nhàm chán. Tuy nhiên, làm cho mọi thứ hoạt động quá nhanh cũng không tốt. Do vậy, ta nên kèm theo một hoạt cảnh nhỏ để tạo cảm giác mượt mà khi chuyển động. Những chi tiết này giúp tạo ra một trải nghiệm người dùng độc đáo. Ta cũng nên lưu ý rằng chuyển động phải thật đơn giản, không rườm rà. Những chuyển động phức tạp đều tốn thời gian, và điều này phá hỏng tính phản hồi nhanh của app.

Ngoài ra, mọi chuyển động phải mang ý nghĩa nào đó. Nó có thể gợi ý nội dung sắp tới, hoặc liên kết nội dung hiện tại và nội dung sắp xuất hiện. Việc mang ý nghĩa cho chuyển động tạo ra một cảm giác liên tục, giúp kết nối trải nghiệm người dùng qua từng nội dung khác nhau.

Metro app được thiết kế ban đầu dành cho thiết bị cảm ứng. Do vậy, ta phải dùng cách tiếp cận “touch first” cho mọi khía cạnh của app. Tất cả tính năng phải hoạt động tối ưu cho các thiết bị chỉ có cảm ứng. Những nội dung người dùng có thể chọn bằng ngón tay nên được thiết kế to ra để họ thực hiện thao tác này dễ dàng. Giữa các phần khác nhau nên có một khoảng cách phù hợp để khi chạm, người dùng không vô tình kích hoạt phần khác không mong muốn.

Ngoài ra, các thao tác chạm nên được thiết kế phù hợp với cách hoạt động của thiết bị. Khi người dùng quệt ngón tay sang trái thì nội dung sẽ trượt sang trái chứ không phải hướng ngược lại. Ta nên lưu ý vấn đề này để tránh làm người dùng lúng túng.

Bên cạnh đó, ta không nên bỏ qua người dùng “cổ điển”. Họ là những người quen dùng chuột và bàn phím. Sau khi tối ưu hóa cho chạm, ta nên tích hợp tính năng cho chuột và bàn phím. Tùy theo ngữ cảnh cụ thể, ta chọn các thao tác phù hợp với từng tính năng của app.

Kỹ thuật số đích thực

Biểu tượng (icon) là một thành phần không thể thiếu trong bất kì hệ điều hành nào. Ngay từ thuở ban đầu, icon đã xuất hiện như một đại diện cho chương trình. Khi click vào, nó sẽ thực thi chức năng cần thực hiện. Hầu hết OS đều dùng icon mô phỏng đồ vật trong thế giới thực, khiến chúng trở nên thân thuộc với con người.

Tuy nhiên, tất cả icon đều không phải là đồ vật thực. Chúng chỉ là những pixel trên màn hình. Do đó, mô phỏng lại những chi tiết sao cho giống thế giới thực là không cần thiết. Thay vào đó, Microsoft khuyến khích ta nên o bế những pixel này, đừng biến nó thành thứ mà không phải là nó.

Trong giao diện Metro, icon chỉ có duy nhất một màu trơn, không bóng đổ, không hiệu ứng bắt mắt, và không cần mô phỏng đồ vật trong thế giới thực. Vì chúng chỉ là pixel trên màn hình, mô phỏng quá mức là vô ích, khiến giao diện trở nên phức tạp không cần thiết.

Phong cách Metro ưa chuộng sự tinh gọn. Khi thiết kế, ta nên dùng những họa tiết đơn giản, không cầu kì mà ai cũng hiểu được ý nghĩa. Ta nên nhớ rằng đồ họa góp phần vào trải nghiệm người dùng chứ bản thân nó không phải là trải nghiệm người dùng. Do vậy, sử dụng đồ họa quá cầu kì chỉ khiến cho người sử dụng bị xao lãng thay vì tập trung vào nội dung, thứ quan trọng nhất trong app.

Với Microsoft, nội dung được ưu tiên hàng đầu, hơn cả chi tiết đồ họa bao quanh. Đây là quy tắc “Content before chrome”. Hầu hết OS đều chú trọng vào chrome (những chi tiết đồ họa), kể cả những phiên bản trước đây của Windows. Những hiệu ứng như bóng đổ quanh cửa sổ, trong suốt như pha lê, nút bấm phát sáng đủ kiểu. Đó chính là chrome và đó cũng là chi tiết thừa, không quan trọng và làm phức tạp giao diện. Tuy nhiên, điều này không có nghĩa là ta loại bỏ hoàn toàn chrome. Ta chỉ dùng khi cần thiết và hạn chế ảnh hưởng của nó tối đa để hướng sự chú ý của người dùng vào nội dung chính.

Theo thực hành chuẩn mà Microsoft hướng dẫn, ta nên dùng icon có hình dáng quen thuộc mà người dùng dễ dàng nhận ra. Một ví dụ điển hình là những biểu tượng gắn trước WC. Nếu biểu tượng đó là hình người mặc váy, ta biết ngay đó là WC nữ. Nếu là biểu tượng một người đang hút thuốc, ta biết ngay đó là WC nam. Những biểu tượng này mang tính toàn cầu, bất kì ai trên thế giới cũng đều hiểu ý nghĩa. Nếu đã là pixel trên màn hình, ta đừng cố làm cho nó giống đồ vật thực vì nó chẳng bao giờ là đồ vật thực. Thay vào đó, ta hãy làm cho nó đích thực là kỹ thuật số.

Làm nhiều hơn với ít hơn

Ngay lần đầu sử dụng Windows 8, ta có một cảm giác rất khác lạ. Nó dường như rộng hơn, to hơn và đơn giản hơn. Đó chính là cảm giác Microsoft muốn ta đem đến cho người dùng. Sở dĩ có cảm giác như thế là vì thiết kế Metro tinh gọn đến tối đa, chỉ để lại nội dung liên quan.

Cách trình bày nội dung trong thiết kế Metro cũng quan trọng không kém. Vì theo tư duy tinh gọn, bố cục giao diện tận dụng các khoảng trống để chừa không gian cho các thành phần bên trong. Cách nhận biết một thiết kế tồi là nhìn vào khoảng trống giữa các thành phần. Nếu chúng quá đông đúc, chen lấn nhau thì đó là một thiết kế tồi. Do vậy, khi trình bày bố cục, ta nên tránh thói nhồi nhét. Tốt nhất ta nên đặt nội dung quan trọng ở trung tâm hoặc những nơi có thể thu hút chú ý người sử dụng.

Nội dung phù hợp cũng góp phần tạo trải nghiệm tốt cho người dùng. Nếu người dùng chọn một ảnh thumbnail thì theo lẽ thông thường, họ mong đợi ảnh kích thước lớn hiện ra. Khi hiển thị hình ảnh, ta nên loại bỏ những thứ không liên quan. Vì mục đích cuối cùng của họ là xem hình, nên việc đưa ra nhiều thứ không liên quan chỉ gây phiền phức.

Với vai trò là lập trình viên, ta phải vượt qua cái thôi thúc cho hiện ra càng nhiều nội dung càng tốt. Ta thường nghĩ rằng hiển thị thêm thông tin sẽ giúp ích cho người dùng. Thực chất chúng chỉ làm họ rối trí mà thôi. Ai cũng đã từng vào trang web có thiết kế “hiện càng nhiều thông tin càng tốt”. Người dùng bị dội đủ loại thông tin, chưa kể các hình ảnh quảng cáo nhấp nháy xung quanh chẳng liên quan gì đến nội dung chính của web.

Theo phong cách Metro, ta nên đơn giản hóa tối đa chỉ còn duy nhất một trọng tâm, một điểm nhấn trên màn hình. Con người chỉ có thể tập trung vào một thứ tại một thời điểm. Hiển thị quá nhiều thông tin chỉ gây phiền nhiễu. Tuy nhiên, quy tắc này không phải khô cứng, bất di bất dịch. Nếu như có thêm thông tin là hữu ích cho người dùng thì ta nên cung cấp cho họ. Nhưng vẫn phải nhớ không cung cấp quá nhiều, kẻo ý tốt của ta trở nên phản tác dụng.

Chiến thắng toàn diện

Phong cách Metro bắt đầu từ Windows Phone 7 và dần xâm chiếm desktop qua Windows 8. Giờ đây, Metro đã có mặt khắp mọi nơi và điều đó cũng đem lại những thách thức mới trong việc nhất quán trải nghiệm người dùng trên các thiết bị khác nhau. Thật may mắn, Windows Phone 8 khi ra đời đã có cùng nhân với Windows 8. Ta có thể chia sẻ nhiều tính năng giữa 2 nền tảng mà không phải lo rằng tính năng này sẽ không hoạt động trong nền tảng kia. Đây chính là lợi thế ta nên tận dụng khi thiết kế app.

Thống nhất trải nghiệm người dùng qua các thiết bị đã trở thành bắt buộc trong thời đại có quá nhiều thiết bị mới ra đời. Nếu không tận dụng những hỗ trợ mà hệ điều hành cung cấp sẵn thì rất có thể ta sẽ tốn nhiều thời gian để tích hợp những chức năng vốn dĩ chỉ cần vài dòng lệnh gọi API.

Đi ngược lại xu hướng này cũng sinh ra những vấn đề rắc rối khác. Hầu hết người dùng đã quen với một cách thực hiện tác vụ nào đó. Cách tốt nhất là nên tận dụng những điều mọi người đã biết và từ đó biến hóa các chức năng sao cho phù hợp với những hiểu biết đó. Điều này giúp giảm thiểu sự khó chịu không đáng có khi lần đầu tiếp xúc với ứng dụng. Ấn tượng đầu tiên luôn quan trọng, do đó ta hãy lưu tâm đến yếu tố này mỗi khi bắt tay vào thiết kế.

Các ứng dụng Metro không kèm theo tài liệu hướng dẫn sử dụng. Ta phải thiết kế chúng sao cho chỉ cần nhìn vào là hiểu ngay thao tác với chúng ra sao. Như đã nói ở trên, cách tốt nhất để làm việc này là tận dụng thói quen sử dụng của người dùng khi họ dùng hệ điều hành. Trong Windows 8, khi muốn tìm kiếm, ta kéo ngón tay từ mép phải màn hình để bật charm. Từ đó, ta chọn Search và gõ từ khóa tìm kiếm. Nếu app có tích hợp tính năng tìm kiếm thì ta nên sử dụng Search của Windows vì chúng quen thuộc với mọi người.

Lời kết

Năm nguyên tắc thiết kế nghe có vẻ mơ hồ, nhưng thực chất chúng rất dễ hiểu nếu ta nhìn sâu hơn cái vẻ ngoài. Trước khi đăng app lên store, ta nên kiểm tra với những nguyên tắc này, xem thử có vi phạm nguyên tắc nào không. Việc này giúp tiết kiệm thời gian vì nếu app không theo đúng quy định thiết kế, nó sẽ bị nhóm kiểm duyệt của Microsoft từ chối.