Những thứ phổ biến nhất là những thứ giúp cuộc sống trở nên dễ dàng và đơn giản hơn. Vì vậy, phương châm ngày nay của nhà thiết kế và nhà phát triển là “Hãy làm cho nó đơn giản và dễ dàng hơn!”
Hiện nay, ứng dụng trở nên rất phổ biến và các nhà thiết kế đang cố gắng làm cho nó hữu dụng và tiện lợi hơn. Hãy xem một số phương pháp chúng ta có thể đơn giản hóa và cải thiện thiết kế.
1. Tối giản chức năng
Các ứng dụng thường được tạo ra để đạt được các tác vụ đơn giản. Chúng không nên khiến người dùng khó chịu với nhiều tác vụ và khiến họ mất tập trung vào mục tiêu chính.
Tối giản chức năng là một nguyên tắc làm cho thiết kế trở nên “không rườm rà”. Điều này áp dụng cho mọi thứ trong thiết kế: nội dung, số lượng hành động, các element. Trong khi một trang web có thể chứa nhiều nội dung và các tính năng nhằm thu hút sự chú ý, thì đối với một ứng dụng, đó là một sai lầm. Có quá ít không gian, vì vậy bạn cần chú ý làm nổi bật những phần thực sự quan trọng. Nhưng “không rườm rà” không có nghĩa là nó phải nhàm chán, đơn giản hoặc đơn điệu.
Một số điểm bạn cần lưu ý:
2. Thứ tự, tính nhất quán, khả năng dự đoán
Thứ tự là sự trình bày có tổ chức của tất cả những thứ cần thiết trên màn hình. Đó là một hệ thống phân cấp nội dung có cấu trúc, một trình tự hợp lý của việc chuyển đổi từ điểm vào đến mục tiêu chính của ứng dụng.
Người dùng càng ít phải suy nghĩ về những gì họ cần làm thì càng tốt. Hãy để giao diện hướng dẫn họ. Điều này ngụ ý một cách đơn giản và dễ dàng mà không gây phiền nhiễu. Không phải ai cũng chăm chú như các nhà thiết kế, vì vậy đừng bắt họ phải tìm kiếm những thứ họ cần hoặc cố gắng tìm ra mọi thứ ở đâu.
Điều hướng phải nhất quán và dễ hiểu. Việc khiến người dùng lạc lối giữa các màn hình là điều hoàn toàn không thể chấp nhận được. Vì vậy, đừng ẩn các yếu tố điều hướng hoặc di chuyển vị trí của chúng trong quá trình chuyển đổi các trang. Nếu cần, bạn có thể sử dụng các gợi ý trực quan.
3. Tương tác
Cách cầm điện thoại
Để lập trình điều hướng, bạn phải hiểu cách người dùng tương tác với thiết bị di động của họ. Các tác vụ ứng dụng khác nhau yêu cầu các cách tương tác khác nhau. Điều quan trọng là xác định những cách nào sẽ được sử dụng cho nhiệm vụ cụ thể của bạn và nhớ rằng cách mọi người cầm điện thoại hoàn toàn khác nhau và tùy thuộc vào tình huống. Có ba cách chính dùng một tay, dùng một ngón tay cái; bằng hai tay, sử dụng một ngón tay cái; và bằng hai tay, sử dụng hai ngón tay cái.
Đây là một sơ đồ hữu ích của Steven Hoober :
Cách mọi người cầm và tương tác với điện thoại di động
Ứng dụng phải dễ sử dụng bằng một tay và trên màn hình lớn. Dưới đây là các tương tác bằng một tay:
Phương pháp cầm điện thoại màn hình cảm ứng bằng một tay
Cử chỉ
Điều hướng ứng dụng thông qua cử chỉ có nhiều lợi thế cho cả người dùng và nhà phát triển. Các cử chỉ phải tự nhiên, logic và phù hợp với nhiệm vụ đang thực hiện.
Các cử chỉ ngón tay phổ biến nhất bao gồm:
Animation
Animation làm sống động giao diện và giúp người dùng tương tác với ứng dụng. Nó phải được thêm có chủ đích và không bao giờ sử dụng quá nhiều.
Game nhỏ
Cách tốt nhất để thúc đẩy người dùng sử dụng ứng dụng của bạn là thêm cơ chế trò chơi, miễn là nó phù hợp và có liên quan đến mục tiêu của cả ứng dụng và đối tượng.
4. Mọi thứ nằm trong tầm tay!
Các hành động chính sẽ thu hút sự chú ý của người dùng thông qua vị trí nổi bật của một biểu tượng hoặc nút. Các tùy chọn menu phải đủ lớn để có thể dễ dàng lựa chọn. Các phần tử không được quá nhỏ hoặc lộn xộn quá gần nhau. Không phải tất cả mọi người đều có ngón tay thon gọn và kỹ năng vận động hoàn hảo, vì vậy hãy ghi nhớ điều đó.
Các phần tử không được quá nhỏ hoặc lộn xộn quá gần nhau
Các trường để nhập dữ liệu, biểu mẫu cần điền và các lựa chọn cần thực hiện đều phải được đặt ở phần dưới của màn hình. Thông tin cần thiết để tiến về phía trước phải nằm trong vùng ngón tay cái.
5. Phương pháp làm mờ
Phương pháp này cho phép bạn xem những gì người dùng sẽ nhìn thấy cái gì và kiểm tra xem các element đã được đặt đúng cách chưa, phần quan trọng đã được làm nổi bật hay chưa. Bạn có thể sử dụng hiệu ứng blur để kiểm tra.
Hãy xem một ví dụ về biểu mẫu khi làm mờ:
Bạn có thể thấy trong ảnh trên, khung màu vàng giống như là một Button. Tuy nhiên, bản gốc sẽ trông như thế này:
Điều này có nghĩa là tất cả các chi tiết quan trọng đều đặt sai. Các nút quan trọng bị che khuất, cảm giác bị chìm. Người dùng bị mất phương hướng. Họ có khả năng sẽ nhấn nút màu xanh lam và đi đến một điểm đến sai.
Phương pháp làm mờ rất hữu ích để kiểm tra xem giao diện có hướng dẫn người dùng đến đúng nơi hay không. Đó là một cách dễ dàng để tách các tính năng chính khỏi các tính năng phụ, xác định những điểm bị thiếu và đơn điệu. Bằng cách xác định một sai lầm, chúng tôi có thể nhấn mạnh những tính năng quan trọng nhất và giảm bớt những lỗi phụ một cách trực quan.
Để đảm bảo các yếu tố giao diện quan trọng dễ đọc và có thể nhìn thấy ngay cả trong ánh sáng yếu, chúng ta phải sử dụng các nguyên tắc về độ tương phản.
6. Vị trí
Nguyên tắc vị trí tương tự như nguyên tắc tương tác chung, tức là khả năng tiếp cận của các element.
Mọi hành động hướng đến kết quả phải diễn ra gần với gợi ý để thực hiện hành động đó.
Các nhà thiết kế thường để đặt element ở bất cứ nơi nào họ có thể tìm thấy không gian trống. Nhưng nếu bạn tạo ra một hành động, thì yếu tố giúp thực hiện hành động đó phải gần một cách hợp lý và càng gần càng tốt!
Và chúng ta đừng quên về tiến trình của các sự kiện. Giả sử bạn cần đặt nút “Add” trong danh sách phát. Có vẻ hợp lý khi đặt nó ở cuối danh sách:
Nhưng điều gì sẽ xảy ra khi người dùng có một danh sách dài? Nút bấm sẽ tụt xuống dưới cùng và sẽ không hiển thị khi họ chưa cuộn trang. Thay vì thêm nút này ở dưới cùng Playlist, bạn có thể thêm nó phía trên.
7. Tránh các biểu mẫu (form) dài
Các biểu mẫu dài nên được chia trên nhiều màn hình để được thực hiện từng bước. Các biểu mẫu chỉ được yêu cầu những thông tin thực sự cần thiết. Để tăng tốc và đơn giản hóa quy trình điền, bạn có thể sử dụng nút ngón tay cái tự động đề xuất, “chuyển tiếp” và “quay lại” và tránh thanh cuộn.
8. Tránh danh sách thả xuống
Danh sách thả xuống (dropdown) không phải là một ý tưởng hay trong một ứng dụng. Chúng yêu cầu nhiều thao tác nhấp và cuộn, điều này gây khó chịu và tốn thời gian. Danh sách dài không vừa trên màn hình và có thể làm mất phương hướng. Tốt nhất bạn nên tìm một giải pháp thay thế cho dropdown. Một danh sách ngắn có thể được thể hiện bằng các biểu tượng, trong khi một danh sách dài có thể sử dụng tính năng gõ để chọn.
9. Văn bản
Tất cả các văn bản trong ứng dụng phải ngắn gọn, đơn giản và dễ đọc.
Tính dễ đọc
Để dễ đọc mà không cần phóng to, văn bản phải tương phản với nền và không nhỏ hơn 11pt. Mức độ dễ đọc phụ thuộc đáng kể vào phông chữ, khoảng cách dòng và nét chữ.
Sức hấp dẫn
Đừng cố gắng nhồi nhét quá nhiều văn bản. Càng ít văn bản, nó càng trở nên dễ hiểu hơn. Điều này cũng áp dụng cho văn bản do người dùng nhập. Tốt nhất nên sử dụng tự động đề xuất trong các biểu mẫu để giảm thiểu lượng thông tin được nhập theo cách thủ công.
Thay thế văn bản bằng hình ảnh
Bất cứ khi nào có thể, văn bản nên được thay thế bằng các manh mối trực quan. Ví dụ, thay vì hướng dẫn bằng văn bản, hãy sử dụng một đoạn video ngắn hoặc các hình ảnh minh họa đơn giản.
10. Thử nghiệm
Bạn nên luôn kiểm tra dự án của mình để nhận được phản hồi của người dùng độc lập và đảm bảo rằng ứng dụng của bạn được sử dụng theo cách mà các nhà thiết kế và nhà phát triển dự định sử dụng.
Tham khảo outcrowd/THDigi
Hiện nay, ứng dụng trở nên rất phổ biến và các nhà thiết kế đang cố gắng làm cho nó hữu dụng và tiện lợi hơn. Hãy xem một số phương pháp chúng ta có thể đơn giản hóa và cải thiện thiết kế.
1. Tối giản chức năng
Các ứng dụng thường được tạo ra để đạt được các tác vụ đơn giản. Chúng không nên khiến người dùng khó chịu với nhiều tác vụ và khiến họ mất tập trung vào mục tiêu chính.
Tối giản chức năng là một nguyên tắc làm cho thiết kế trở nên “không rườm rà”. Điều này áp dụng cho mọi thứ trong thiết kế: nội dung, số lượng hành động, các element. Trong khi một trang web có thể chứa nhiều nội dung và các tính năng nhằm thu hút sự chú ý, thì đối với một ứng dụng, đó là một sai lầm. Có quá ít không gian, vì vậy bạn cần chú ý làm nổi bật những phần thực sự quan trọng. Nhưng “không rườm rà” không có nghĩa là nó phải nhàm chán, đơn giản hoặc đơn điệu.
Một số điểm bạn cần lưu ý:
- Các hành động và chuyển tiếp hợp lý;
- Các hành động đơn giản;
- Thiết kế đơn giản.
2. Thứ tự, tính nhất quán, khả năng dự đoán
Thứ tự là sự trình bày có tổ chức của tất cả những thứ cần thiết trên màn hình. Đó là một hệ thống phân cấp nội dung có cấu trúc, một trình tự hợp lý của việc chuyển đổi từ điểm vào đến mục tiêu chính của ứng dụng.
Người dùng càng ít phải suy nghĩ về những gì họ cần làm thì càng tốt. Hãy để giao diện hướng dẫn họ. Điều này ngụ ý một cách đơn giản và dễ dàng mà không gây phiền nhiễu. Không phải ai cũng chăm chú như các nhà thiết kế, vì vậy đừng bắt họ phải tìm kiếm những thứ họ cần hoặc cố gắng tìm ra mọi thứ ở đâu.
Điều hướng phải nhất quán và dễ hiểu. Việc khiến người dùng lạc lối giữa các màn hình là điều hoàn toàn không thể chấp nhận được. Vì vậy, đừng ẩn các yếu tố điều hướng hoặc di chuyển vị trí của chúng trong quá trình chuyển đổi các trang. Nếu cần, bạn có thể sử dụng các gợi ý trực quan.
3. Tương tác
Cách cầm điện thoại
Để lập trình điều hướng, bạn phải hiểu cách người dùng tương tác với thiết bị di động của họ. Các tác vụ ứng dụng khác nhau yêu cầu các cách tương tác khác nhau. Điều quan trọng là xác định những cách nào sẽ được sử dụng cho nhiệm vụ cụ thể của bạn và nhớ rằng cách mọi người cầm điện thoại hoàn toàn khác nhau và tùy thuộc vào tình huống. Có ba cách chính dùng một tay, dùng một ngón tay cái; bằng hai tay, sử dụng một ngón tay cái; và bằng hai tay, sử dụng hai ngón tay cái.
Đây là một sơ đồ hữu ích của Steven Hoober :
Cách mọi người cầm và tương tác với điện thoại di động
Ứng dụng phải dễ sử dụng bằng một tay và trên màn hình lớn. Dưới đây là các tương tác bằng một tay:
Phương pháp cầm điện thoại màn hình cảm ứng bằng một tay
Cử chỉ
Điều hướng ứng dụng thông qua cử chỉ có nhiều lợi thế cho cả người dùng và nhà phát triển. Các cử chỉ phải tự nhiên, logic và phù hợp với nhiệm vụ đang thực hiện.
Các cử chỉ ngón tay phổ biến nhất bao gồm:
- Sờ
- Nhấn
- Giữ
- Nhấn đúp
- Kéo
- Vuốt
- Lướt cuộn
- Kéo và thu phóng
Animation
Animation làm sống động giao diện và giúp người dùng tương tác với ứng dụng. Nó phải được thêm có chủ đích và không bao giờ sử dụng quá nhiều.
Game nhỏ
Cách tốt nhất để thúc đẩy người dùng sử dụng ứng dụng của bạn là thêm cơ chế trò chơi, miễn là nó phù hợp và có liên quan đến mục tiêu của cả ứng dụng và đối tượng.
4. Mọi thứ nằm trong tầm tay!
Các hành động chính sẽ thu hút sự chú ý của người dùng thông qua vị trí nổi bật của một biểu tượng hoặc nút. Các tùy chọn menu phải đủ lớn để có thể dễ dàng lựa chọn. Các phần tử không được quá nhỏ hoặc lộn xộn quá gần nhau. Không phải tất cả mọi người đều có ngón tay thon gọn và kỹ năng vận động hoàn hảo, vì vậy hãy ghi nhớ điều đó.
Các phần tử không được quá nhỏ hoặc lộn xộn quá gần nhau
Các trường để nhập dữ liệu, biểu mẫu cần điền và các lựa chọn cần thực hiện đều phải được đặt ở phần dưới của màn hình. Thông tin cần thiết để tiến về phía trước phải nằm trong vùng ngón tay cái.
5. Phương pháp làm mờ
Phương pháp này cho phép bạn xem những gì người dùng sẽ nhìn thấy cái gì và kiểm tra xem các element đã được đặt đúng cách chưa, phần quan trọng đã được làm nổi bật hay chưa. Bạn có thể sử dụng hiệu ứng blur để kiểm tra.
Hãy xem một ví dụ về biểu mẫu khi làm mờ:
Bạn có thể thấy trong ảnh trên, khung màu vàng giống như là một Button. Tuy nhiên, bản gốc sẽ trông như thế này:
Điều này có nghĩa là tất cả các chi tiết quan trọng đều đặt sai. Các nút quan trọng bị che khuất, cảm giác bị chìm. Người dùng bị mất phương hướng. Họ có khả năng sẽ nhấn nút màu xanh lam và đi đến một điểm đến sai.
Phương pháp làm mờ rất hữu ích để kiểm tra xem giao diện có hướng dẫn người dùng đến đúng nơi hay không. Đó là một cách dễ dàng để tách các tính năng chính khỏi các tính năng phụ, xác định những điểm bị thiếu và đơn điệu. Bằng cách xác định một sai lầm, chúng tôi có thể nhấn mạnh những tính năng quan trọng nhất và giảm bớt những lỗi phụ một cách trực quan.
Để đảm bảo các yếu tố giao diện quan trọng dễ đọc và có thể nhìn thấy ngay cả trong ánh sáng yếu, chúng ta phải sử dụng các nguyên tắc về độ tương phản.
6. Vị trí
Nguyên tắc vị trí tương tự như nguyên tắc tương tác chung, tức là khả năng tiếp cận của các element.
Mọi hành động hướng đến kết quả phải diễn ra gần với gợi ý để thực hiện hành động đó.
Các nhà thiết kế thường để đặt element ở bất cứ nơi nào họ có thể tìm thấy không gian trống. Nhưng nếu bạn tạo ra một hành động, thì yếu tố giúp thực hiện hành động đó phải gần một cách hợp lý và càng gần càng tốt!
Và chúng ta đừng quên về tiến trình của các sự kiện. Giả sử bạn cần đặt nút “Add” trong danh sách phát. Có vẻ hợp lý khi đặt nó ở cuối danh sách:
Nhưng điều gì sẽ xảy ra khi người dùng có một danh sách dài? Nút bấm sẽ tụt xuống dưới cùng và sẽ không hiển thị khi họ chưa cuộn trang. Thay vì thêm nút này ở dưới cùng Playlist, bạn có thể thêm nó phía trên.
7. Tránh các biểu mẫu (form) dài
Các biểu mẫu dài nên được chia trên nhiều màn hình để được thực hiện từng bước. Các biểu mẫu chỉ được yêu cầu những thông tin thực sự cần thiết. Để tăng tốc và đơn giản hóa quy trình điền, bạn có thể sử dụng nút ngón tay cái tự động đề xuất, “chuyển tiếp” và “quay lại” và tránh thanh cuộn.
8. Tránh danh sách thả xuống
Danh sách thả xuống (dropdown) không phải là một ý tưởng hay trong một ứng dụng. Chúng yêu cầu nhiều thao tác nhấp và cuộn, điều này gây khó chịu và tốn thời gian. Danh sách dài không vừa trên màn hình và có thể làm mất phương hướng. Tốt nhất bạn nên tìm một giải pháp thay thế cho dropdown. Một danh sách ngắn có thể được thể hiện bằng các biểu tượng, trong khi một danh sách dài có thể sử dụng tính năng gõ để chọn.
9. Văn bản
Tất cả các văn bản trong ứng dụng phải ngắn gọn, đơn giản và dễ đọc.
Tính dễ đọc
Để dễ đọc mà không cần phóng to, văn bản phải tương phản với nền và không nhỏ hơn 11pt. Mức độ dễ đọc phụ thuộc đáng kể vào phông chữ, khoảng cách dòng và nét chữ.
Sức hấp dẫn
Đừng cố gắng nhồi nhét quá nhiều văn bản. Càng ít văn bản, nó càng trở nên dễ hiểu hơn. Điều này cũng áp dụng cho văn bản do người dùng nhập. Tốt nhất nên sử dụng tự động đề xuất trong các biểu mẫu để giảm thiểu lượng thông tin được nhập theo cách thủ công.
Thay thế văn bản bằng hình ảnh
Bất cứ khi nào có thể, văn bản nên được thay thế bằng các manh mối trực quan. Ví dụ, thay vì hướng dẫn bằng văn bản, hãy sử dụng một đoạn video ngắn hoặc các hình ảnh minh họa đơn giản.
10. Thử nghiệm
Bạn nên luôn kiểm tra dự án của mình để nhận được phản hồi của người dùng độc lập và đảm bảo rằng ứng dụng của bạn được sử dụng theo cách mà các nhà thiết kế và nhà phát triển dự định sử dụng.
Tham khảo outcrowd/THDigi
