Chia sẻ của một nhà Quản lý Sản phẩm kiêm Giám đốc Tăng trưởng tại một công ty startup. (Xem hồ sơ tác giả)

Đây là bài viết cuối cùng trong loạt bài tóm tắt những nội dung chính trong Apple Human Interface Guideline (xem phần 1 và phần 2) của tôi. Trong bài viết này, tôi sẽ chia sẻ những nội dung liên quan đến chi tiết thiết kế. Đặc biệt, tôi tin rằng nội dung liên quan đến Progress Indicator sẽ giúp bạn cảm nhận được tinh hoa của thiết kế mà Apple theo đuổi. Tôi tự hỏi liệu có bao nhiêu guideline chỉ dẫn đến tận những chi tiết nhỏ như vậy, tôi cũng nhận thấy những chi tiết ấy được áp dụng ở nhiều nơi trong thiết kế của Apple, nhờ vậy mà càng cảm thấy thiết kế của Apple tuyệt vời hơn.

Những hướng dẫn dưới đây đã khiến tôi lại một lần nữa phải có suy nghĩ “Quả nhiên điểm khác biệt giữa thứ bình thường và thứ phi thường là nằm ở thiết kế”. Và rồi tôi lại tự nhìn lại bản thân mình, liệu rằng mình đã bỏ lỡ bao nhiêu chi tiết với lý do bận rộn hay cái cớ là có quá nhiều việc để làm. 

Nội dung dưới đây không bao gồm những cập nhật sau ngày 6 tháng 7 năm 2022.

1) Navigation Bar

1. Navigation Bar nên hiển thị phía trên màn hình, bên dưới status bar để giúp người dùng điều hướng qua một loạt màn hình ở các cấp độ.
2. Navigation Bar có thể được thiết kế bán trong suốt, có màu nền nhạt và được định cấu hình để ẩn đi khi bàn phím hiện ra trong lúc người dùng thực hiện thao tác nhập, khi một thao tác cụ thể được thực hiện hoặc khi kích thước màn hình thay đổi. 
3. Bạn có thể tạm thời ẩn Navigation Bar để người dùng tự do khám phá ứng dụng, mang đến một trải nghiệm nhập tâm hơn. 

Tiêu đề

1. Hãy cân nhắc hiển thị tiêu đề màn hình hiện tại trên navigation bar.

• Trong hầu hết các trường hợp, tiêu đề giúp người dùng hiểu hơn về nội dung họ đang xem.
• Tuy nhiên, bạn có thể để trống tiêu đề để tránh trùng lặp khi nội dung tiêu đề đã được hiển thị.

2. Hãy sử dụng tiêu đề lớn nếu bạn muốn nhấn mạnh ngữ cảnh. 

Control

1. Không nên phức tạp hóa navigation bar với quá nhiều control. Thông thường, navigation bar chỉ nên bao gồm tiêu đề màn hình hiện tại, nút quay lại và một control để quản lý nội dung đang theo dõi. 
2. Hãy sử dụng nút quay lại tiêu chuẩn.

• Người dùng biết họ có thể sử dụng nút quay lại để truy vết các hành động đã thực hiện thông qua hệ thống phân cấp thông tin.  
• Nếu bạn sử dụng một nút quay lại tùy chỉnh, bạn cần đảm bảo nút này được thiết kế phù hợp (có hình thức giống như một nút quay lại), hành động như mong đợi của người dùng, hòa hợp với các thành phần khác trên giao diện và nhất quán trong toàn bộ ứng dụng. 

3. Không nên sử dụng các breadcrumb chứa nhiều cấp độ. 

• Nút quay lại luôn luôn thực hiện một hành động duy nhất: quay lại màn hình trước đó.

4. Hãy cung cấp đầy đủ không gian để hiển thị tiêu đề. 

2) Search Bar

1. Search Bar (Thanh tìm kiếm) hỗ trợ người dùng tìm kiếm nhiều giá trị bằng cách nhập dữ liệu vào một text field.
2. Thanh tìm kiếm có thể được hiển thị độc lập, nằm trong thanh điều hướng hoặc trong khu vực hiển thị nội dung.
3. Trường hợp thanh tìm kiếm được hiển thị trong thanh điều hướng, bạn có thể ghim thanh tìm kiếm để người dùng luôn sử dụng được hoặc ẩn cho đến khi người dùng swipe down. 
4. Hãy sử dụng search bar thay cho text field. 

• Text field không có định dạng một thanh tìm kiếm chuẩn mà người dùng mong đợi. 

5. Hãy sử dụng nút xóa (clear button). 

• Phần lớn các thanh tìm kiếm đều có nút xóa để người dùng xóa nội dung đã nhập.

6. Hãy sử dụng nút hủy trong những trường hợp thích hợp. 

• Phần lớn các thanh tìm kiếm chuyên dụng đều có nút hủy để người dùng ngừng tìm kiếm ngay lập tức.

7. Hãy cung cấp gợi ý hoặc ngữ cảnh trong thanh tìm kiếm nếu cần thiết. 
8. Bạn có thể cung cấp các lối tắt hoặc nội dung bên dưới thanh tìm kiếm. Hãy tận dụng không gian bên dưới thanh tìm kiếm để giúp người dùng tiếp cận nội dung nhanh chóng hơn. 

Scope Bar

1. Bạn có thể sử dụng thêm Scope Bar cùng Search Bar để giúp người dùng thu hẹp phạm vi tìm kiếm.
2. Scope Bar hữu ích trong trường hợp phạm vi tìm kiếm đã được phân chia rõ ràng. Tuy nhiên, hãy ưu tiên cải thiện kết quả tìm kiếm để không cần dùng đến cả Scope Bar.

3) Status Bar

1. Status Bar hiển thị ở trên cùng màn hình và cho biết các thông tin hữu dụng về trạng thái hiện tại của thiết bị như thời gian, mạng viễn thông di động hay lượng pin còn lại.
2. Hãy sử dụng Status Bar do hệ thống cung cấp.

• Người dùng kỳ vọng một Status Bar nhất quán trong toàn bộ hệ thống. Bạn không nên thay đổi Status Bar người dùng đã chỉ định. 

3. Hãy ẩn các nội dung đè lên Status Bar.

• Thông thường, Status Bar có nền trong suốt để người dùng có thể xem được các nội dung bên dưới.
• Hãy duy trì Status Bar ở một trạng thái dễ đọc và đừng gợi ý cho người dùng rằng các thành phần bên dưới là thành phần tương tác.

4. Bạn có thể tạm thời ẩn Status Bar khi hiển thị các nội dung trong chế độ toàn màn hình.
5. Đừng ẩn Status Bar một cách vĩnh viễn, vì người dùng sẽ phải tạm dừng ứng dụng khi cần xem giờ hay xác nhận trạng thái kết nối Wifi.

4) Tab Bar

1. Tab Bar thường xuất hiện ở phía dưới màn hình để giúp người dùng hiểu về các loại thông tin hay tính năng mà ứng dụng cung cấp.
2. Tab hỗ trợ người dùng chuyển đổi nhanh chóng giữa các section chính của ứng dụng trong khi vẫn duy trì trạng thái hay vị trí hiện tại trong mỗi section. 
3. Hãy phân cấp thông tin một cách rõ ràng và chỉ sử dụng các tab tối thiểu người dùng cần khi điều hướng trong ứng dụng.

• Nếu hiển thị quá nhiều tab, không gian dành cho mỗi tab sẽ bị thu hẹp và có thể khiến giao diện trở nên phức tạp.
• Thông thường, có khoảng 3 đến 5 tab hiển thị trên iPhone.

4. Đừng ẩn tab bar khi người dùng chuyển đến khu vực khác của ứng dụng. 

• Hãy đảm bảo tab bar luôn hiển thị vì đây là thành phần điều hướng cho toàn bộ ứng dụng.

5. Đừng xóa hoặc vô hiệu hóa tab trong trường hợp nội dung không khả dụng.

• Việc tab khả dụng trong một số trường hợp và không khả dụng trong những trường hợp khác có thể khiến người dùng cảm thấy giao diện ứng dụng không ổn định và không thể dự đoán.

5) Toolbar

1. Toolbar xuất hiện ở cuối màn hình, bao gồm các nút giúp người dùng thực hiện hành động liên quan đến màn hình hiện tại.
2. Thông thường, toolbar được thiết kế bán trong suốt và chỉ có nền khi cần hiển thị nội dung phía sau. Bên cạnh đó, toolbar được ẩn đi khi bàn phím hiển thị trên màn hình.
3. Hãy sử dụng toolbar để hiển thị những tác vụ người dùng có khả năng thực hiện cao nhất trong ngữ cảnh hiện tại. 

• Toolbar cung cấp vị trí nổi bật và nhất quán cho các tác vụ thường được thực hiện nhất.
• Tab bar thích hợp hơn toolbar trong trường hợp cần cho biết cách chuyển đổi ngữ cảnh. 

4. Nên sử dụng các tiêu đề ngắn để nâng cao tính rõ ràng trong những toolbar bao gồm ít hơn 3 nút. 
5. Nên sử dụng biểu tượng SF (SF Symbol) để tiết kiệm không gian khi toolbar bao gồm nhiều hơn 3 nút.

6) Alert

1. Alert (Cảnh báo) truyền tải các thông tin quan trọng liên quan đến trạng thái của ứng dụng hoặc thiết bị.
2. Một cảnh báo thường bao gồm tiêu đề, thông điệp nếu có, một hoặc nhiều nút, một text field để thu thập thông tin nếu cần thiết.
3. Người dùng không thể thay đổi giao diện của thông báo, ngoại trừ việc tương tác với các thành phần trên hoặc nhập dữ liệu vào text field.
4. Hạn chế sử dụng cảnh báo nhiều nhất có thể. 

• Vì cảnh báo cản trở trải nghiệm ứng dụng của người dùng, bạn không nên sử dụng thường xuyên mà chỉ nên đưa ra cảnh báo trong những trường hợp truyền tải thông tin quan trọng và thực sự cần thiết. 

Title & Message

1. Hãy viết một tiêu đề ngắn gọn và bao gồm giải thích lý do cảnh báo.

• Nếu có thể, hãy cố gắng viết một tiêu đề duy nhất để giải thích ngắn gọn về tình huống mà không cần thêm thông điệp chi tiết.
• Nếu tiêu đề là một câu hoàn chỉnh, hãy viết hoa đầu câu và sử dụng dấu chấm cuối câu. 
• Nếu tiêu đề không phải một câu, hãy viết hoa ký tự đầu tiên và không sử dụng dấu chấm kết thúc.

2. Trường hợp cần thêm thông điệp, hãy viết một câu ngắn và hoàn chỉnh.

• Hãy viết thông điệp ngắn có thể hiển thị trong 1~2 dòng và người dùng có thể đọc hết mà không cần scroll.

3. Hãy sử dụng ngữ điệu thẳng thắn, trung lập nhưng vẫn nhẹ nhàng. 
4. Đừng giải thích alert button. Nếu nội dung cảnh báo và button text rõ ràng, bạn không cần giải thích thêm về chức năng của nút.

Button

1. Hãy gán nhãn ngắn gọn và hợp lý cho nút.

• Hãy sử dụng nhãn bao gồm một hoặc hai từ để giải thích kết quả khi lựa chọn nút. 
• Nên sử dụng các động từ hoặc cụm động từ liên quan trực tiếp đến tiêu đề và thông điệp cảnh báo.
• Hãy sử dụng OK cho hành động chấp nhận đơn thuần, không sử dụng Yes hoặc No. 
• Nếu có nút hủy, hãy luôn gán nhãn “Hủy”.

2. Hãy đặt nút ở những nơi người dùng nghĩ rằng nút sẽ xuất hiện. 

• Trong các cảnh báo thông thường với hai nút hành động, nút có khả năng được người dùng nhấn cao hơn nằm ở phía sau và nút hủy nằm ở phía trước.
• Trong trường hợp cảnh báo có từ 3 nút trở lên, các nút được hiển thị theo từng hàng, nút có khả năng được người dùng nhấn cao hơn nằm ở trên cùng và nút hủy ở dưới cùng.

3. Hãy phân biệt và thể hiện rõ các nút nguy hiểm. 

• Trong trường hợp có các hành động “nguy hiểm” vì cảnh báo như cần xóa một nội dung nào đó, hãy áp dụng thiết kế đặc trưng cho nút nguy hiểm và thể hiện chúng một cách thích hợp.

7) Button

System button

1. Hệ thống iOS thiết kế 4 kiểu nút, trong đó mỗi kiểu có 3 loại kích thước khác nhau.

• Mỗi kiểu có mức độ nổi bật khác nhau, hữu ích trong việc truyền đạt cấp độ và thứ bậc tác vụ trong ứng dụng.

2. Hãy tạo ra các nội dung trên nút sao cho người dùng có thể ngay lập tức hiểu được tính năng của nút.

• Hãy sử dụng glyph (hay icon) và tiêu đề, hoặc cả hai để truyền đạt mục đích của nút.

3. Khi cần cung cấp phản hồi cho tác vụ chưa hoàn thành, hãy hiển thị một chỉ báo hoạt động (activity indicator) trong nút. Chỉ báo hoạt động trong nút không chỉ giúp tiết kiệm không gian trên giao diện mà còn thể hiện rõ lý do ứng dụng đang tạm ngưng để chờ kết quả.
4. Hãy sử dụng filled button cho những tác vụ có khả năng được thực hiện cao nhất trên giao diện. 

• Kiểu filled nổi bật nhất về mặt thị giác, do đó có thể giúp người dùng nhanh chóng nhận ra tác vụ họ muốn thực hiện nhất.
• Không nên sử dụng nhiều filled button trong một view, vì khi đó người dùng có thể tốn thời gian so sánh các lựa chọn trước khi quyết định thực hiện một hành động.

5. Hãy sử dụng kiểu (style) thay vì kích thước (size) để làm nổi bật lựa chọn bạn ưu tiên nhất về mặt thị giác.

• Khi sử dụng nhiều hơn hai nút có kích thước tương tự nhau, bạn ngầm báo với người dùng rằng chúng thuộc về cùng một tập hợp các hành động nhất quán.
• Để đánh dấu một lựa chọn bạn muốn người dùng chọn hoặc có khả năng xảy ra cao nhất, hãy sử dụng một kiểu nổi bật hơn cho nút đó và kiểu kém nổi hơn cho các nút còn lại.

6. Hãy chỉ định vai trò Primary cho nút có khả năng được người dùng chọn cao nhất. 

• Có 4 loại vai trò cho nút: Normal (bình thường, không có gì đặc biệt), Primary (nút mặc định – thường được người dùng chọn nhiều nhất), Cancel (nút hủy/ dừng hành động hiện tại), Destructive (nút thực hiện một hành động nguy hiểm có thể gây mất dữ liệu).
• Primary button có thể phản hồi với phím Return (Enter), giúp người dùng xác nhận lựa chọn của mình một cách nhanh chóng hơn.

7. Đừng chỉ định vai trò Primary cho những nút thực hiện hành động nguy hiểm, cho dù đó có là hành động có khả năng được thực hiện cao nhất. Lý do là người dùng có xu hướng không đọc mà chọn ngay nút nổi bật nhất về mặt thị giác.

Toggle button

1. Toggle button là một loại nút hệ thống hỗ trợ chuyển đổi giữa hai trạng thái đối lập nhau như ON/OFF, Show/Hide. Toggle button áp dụng hai kiểu (style) khác nhau để phân biệt các trạng thái. 
2. Toggle button được sử dụng để giúp người dùng quản lý trạng thái của nội dung hoặc chế độ xem. 

• Không chỉ riêng thao tác thay đổi trạng thái, người dùng còn mong chờ có thể biết được trạng thái hiện đang được lựa chọn qua toggle button.

3. Đừng chỉ dùng màu sắc để thể hiện trạng thái hiện tại của toggle button. 

• Thông thường, các toggle button sử dụng một màu sắc phù hợp với ứng dụng để thể hiện trạng thái bật và một màu khác (thường là xám) thể hiện trạng thái tắt.
• Hãy đảm bảo tất cả người dùng đều có khả năng nhận biết sự khác nhau về mặt thị giác giữa hai trạng thái của toggle button.

4. Không chỉ riêng button quản lý trạng thái bằng cách chuyển đổi trái/phải mới là toggle button. Bạn có thể sử dụng một button khác hoạt động giống như toggle button để thay thế khi không hiển thị dạng danh sách (list).

Popup button

1. Popup button là một loại nút hệ thống có thể hiển thị menu chứa các tùy chọn loại trừ lẫn nhau.
2. Popup button được sử dụng để hiển thị một danh sách các lựa chọn hoặc trạng thái cố định.

• Popup button giúp người dùng đưa ra một lựa chọn ảnh hưởng đến nội dung hiện tại hoặc các thành phần giao diện xung quanh.

3. Hãy hiển thị lựa chọn cơ bản hữu dụng.

• Popup sau khi được đóng luôn duy trì lựa chọn người dùng đang chọn. Trường hợp người dùng chưa chọn một lựa chọn cụ thể, popup sẽ hiển thị lựa chọn mặc định. 
• Hãy chỉ định lựa chọn được nhiều người mong muốn nhất làm mặc định.

4. Hãy cân nhắc sử dụng popup button khi không gian bị hạn chế và không cần luôn luôn hiển thị tất cả lựa chọn.

Close button

1. Hãy hiển thị button đóng hoặc hoàn thành, không hiển thị cả hai cùng một lúc.

• Nút đóng và hoàn thành đều đóng view hiện tại nhưng không phải hai hành động trái ngược nhau, do đó khi xuất hiện đồng thời có thể khiến người dùng bối rối.

Các loại button thường thấy

1. Các loại nút trên được thiết kế nhất quán trong ứng dụng nên người dùng có thể ngay lập tức nhận thức một vài loại nút đặc biệt.
2. Khi thiết kế nút tùy chỉnh giống với nút thông thường người dùng đã quen thuộc, hãy đảm bảo nút hoạt động như cách người dùng dự đoán.
3. Trong danh sách hoặc các hàng trong bảng, hãy sử dụng info button để thể hiện thêm nội dung chi tiết liên quan đến nội dung hàng.

8) Progress Indicator

Activity Indicator

1. Nên ưu tiên sử dụng Progressbar hơn Activity Indicator.

• Khi có thể đo lường tiến độ thực hiện, hãy sử dụng Progressbar thay vì Activity Indicator để người dùng có thể nắm được trạng thái hiện tại và đoán được phần nào thời gian cần thiết còn lại.

2. Hãy luôn để trạng thái loading cho Activity Indicator.

• Người dùng sẽ nghĩ rằng tiến trình bị tạm ngưng nếu Activity Indicator dừng lại.

3. Nếu có thể, hãy cung cấp những thông tin hữu dụng trong lúc người dùng chờ đợi.

• Đừng sử dụng các thuật ngữ mơ hồ như “Đang tải” hay “Đang xác thực” vì chúng không mang lại giá trị nào cho người dùng.

Progressbar

1. Hãy luôn thể hiện chính xác tiến độ thực hiện hành động.

• Đừng thông báo sai tiến độ để khiến ứng dụng trông có vẻ bận rộn.
• Hãy chỉ sử dụng Progressbar trong trường hợp có thể đo lường được tiến độ thực hiện. 

2. Hãy sử dụng Progressbar trong trường hợp tác vụ được định rõ thời gian.

• Progressbar thể hiện trạng thái hành động, đặc biệt hữu ích trong việc thông báo thời gian cần thiết còn lại để hoàn thành hành động. 

9) Text Field

1. Text field là một field có chiều cao cố định, khi người dùng chạm vào field thì bàn phím sẽ tự động hiện ra.
2. Hãy cung cấp gợi ý cho field để truyền tải mục đích của field chính xác hơn.

• Hãy thêm placeholder như “Email” hoặc “Password” khi trong field không có sẵn nội dung nào.

3. Hãy hiển thị nút xóa ở cuối field để người dùng có thể xóa nhanh nội dung đã nhập.

• Khi có nút xóa, người dùng có thể nhanh chóng xóa nội dung đã nhập, thay vì liên tục nhấn phím Delete.

4. Hãy sử dụng protected text field để ẩn những thông tin cá nhân của người dùng.

• Hãy luôn sử dụng protected text field khi yêu cầu người dùng nhập các thông tin riêng tư như mật khẩu.

5. Hãy sử dụng hình ảnh và nút để cung cấp tính năng và giúp text field trở nên rõ ràng hơn.

The original article: 애플이 알려주는 디자인 팁: ③Detail 편
The translated article above belongs to the author ASH and yozmIT (요즘IT). Metacoders commits not to use this content for any commercial purpose.