Tương tác

Các thiết bị có màn hình nhỏ như điện thoại di động thường có màn hình cảm ứng. Các thiết bị màn hình lớn như máy tính xách tay và máy tính thường có phần cứng như chuột hoặc bàn di chuột. Bạn có thể sẽ muốn coi màn hình nhỏ là màn hình cảm ứng và màn hình lớn là màn hình có con trỏ.

Nhưng thực tế thì phức tạp hơn. Một số máy tính xách tay có màn hình cảm ứng. Người dùng có thể tương tác bằng màn hình cảm ứng, bàn di chuột hoặc cả hai. Tương tự, bạn có thể dùng bàn phím hoặc chuột ngoài với một thiết bị có màn hình cảm ứng như máy tính bảng.

Thay vì cố gắng suy luận cơ chế nhập liệu từ kích thước màn hình, hãy sử dụng các tính năng đa phương tiện trong CSS.

Con trỏ

Bạn có thể kiểm thử 3 giá trị có thể có bằng tính năng nội dung nghe nhìn pointer: none, coarse và fine.

Nếu trình duyệt báo cáo giá trị pointer là none, thì có thể người dùng đang sử dụng bàn phím để tương tác với trang web của bạn.

Nếu trình duyệt báo cáo giá trị pointer là coarse, tức là cơ chế đầu vào chính không chính xác lắm. Ngón tay trên màn hình cảm ứng là một con trỏ thô.

Nếu trình duyệt báo cáo giá trị pointer là fine, tức là cơ chế nhập liệu chính có khả năng kiểm soát chi tiết. Chuột hoặc bút cảm ứng là một con trỏ chính xác.

Bạn có thể điều chỉnh kích thước của các phần tử trên giao diện cho phù hợp với giá trị pointer. Hãy thử truy cập trang web minh hoạ này trên nhiều loại thiết bị để xem giao diện thích ứng như thế nào.

Trong ví dụ này, các nút được làm lớn hơn cho con trỏ thô:

button {
  padding: 0.5em 1em;
}
@media (pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

Bạn cũng có thể làm cho các phần tử nhỏ hơn đối với con trỏ chính xác, nhưng hãy cẩn thận khi làm việc này:

@media (pointer: fine) {
  button {
    padding: 0.25em 0.5em;
  }
}

Ngay cả khi người dùng có cơ chế nhập liệu chính có khả năng kiểm soát chi tiết, hãy suy nghĩ kỹ trước khi giảm kích thước của các phần tử tương tác. Định luật Fitts vẫn được áp dụng. Mục tiêu nhỏ hơn đòi hỏi bạn phải tập trung hơn, ngay cả khi dùng con trỏ nhỏ. Khu vực mục tiêu lớn hơn sẽ mang lại lợi ích cho tất cả mọi người, bất kể họ dùng thiết bị trỏ nào.

Mọi con trỏ

Tính năng nội dung nghe nhìn pointer báo cáo độ chính xác của cơ chế nhập chính. Nhưng nhiều thiết bị có nhiều cơ chế nhập. Có thể có người đang tương tác với trang web của bạn bằng cả màn hình cảm ứng và chuột cùng một lúc.

Tính năng any-pointer trên nội dung nghe nhìn khác với tính năng pointer ở chỗ tính năng này báo cáo liệu có thiết bị trỏ nào vượt qua bài kiểm tra hay không.

Giá trị any-pointer là none có nghĩa là không có thiết bị trỏ nào.

Giá trị any-pointer là coarse có nghĩa là ít nhất một thiết bị trỏ không chính xác lắm. Nhưng đó có thể không phải là cơ chế đầu vào chính.

Giá trị any-pointer là fine có nghĩa là ít nhất một thiết bị trỏ có khả năng kiểm soát chi tiết. Nhưng một lần nữa, đây có thể không phải là cơ chế nhập liệu chính.

Vì truy vấn nội dung nghe nhìn any-pointer sẽ báo cáo kết quả dương tính nếu bất kỳ cơ chế đầu vào nào vượt qua bài kiểm tra, nên có thể trình duyệt sẽ báo cáo kết quả cho any-pointer: fine và cũng báo cáo kết quả cho any-pointer: coarse. Trong trường hợp đó, thứ tự của các truy vấn về nội dung nghe nhìn sẽ có ý nghĩa. Giá trị cuối cùng sẽ được ưu tiên.

Trong ví dụ này, nếu thiết bị có cả cơ chế đầu vào chính xác và cơ chế đầu vào tương đối, thì các kiểu tương đối sẽ được áp dụng.

@media (any-pointer: fine) {
  button {
    padding: 0.5em 1em;
  }
}
@media (any-pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

Khoảng cách di

Tính năng nội dung nghe nhìn hover báo cáo về việc liệu cơ chế đầu vào chính có thể di chuột lên các phần tử hay không. Điều này thường có nghĩa là có một loại con trỏ nào đó trên màn hình đang được điều khiển bằng chuột hoặc bàn di chuột.

Không giống như tính năng nội dung nghe nhìn pointer phân biệt giữa con trỏ chính xác và con trỏ thô, tính năng nội dung nghe nhìn hover là tính năng nhị phân. Nếu thiết bị đầu vào chính có thể di chuột qua các phần tử, thì thiết bị đó sẽ báo cáo giá trị hover. Nếu không, giá trị sẽ là none.

Trong ví dụ này, một số biểu tượng bổ sung sẽ xuất hiện khi di chuột, nhưng chỉ khi thiết bị đầu vào chính có thể di chuột lên một phần tử.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:hover .extra {
    visibility: visible;
  }
}

Nếu bạn dùng chuột để di chuột lên nút đó, biểu tượng sẽ xuất hiện. Nhưng nếu bạn dùng bàn phím để nhấn phím Tab đến nút này, biểu tượng sẽ vẫn không xuất hiện. Khi sử dụng bàn phím, bạn sẽ tập trung chứ không di chuột. Một thiết bị máy tính có chuột được kết nối sẽ báo cáo rằng cơ chế nhập liệu chính có khả năng di chuột, điều này là đúng. Tuy nhiên, những người dùng bàn phím trong khi chuột đang được kết nối sẽ không được hưởng lợi từ các kiểu :hover. Vì vậy, bạn nên kết hợp các kiểu :hover và :focus để bao gồm cả hai loại tương tác.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:is(:hover, :focus) .extra {
    visibility: visible;
  }
}

Ngay cả khi thiết bị đầu vào chính có thể di chuột lên các phần tử, hãy thận trọng khi ẩn thông tin sau một thao tác di chuột. Thông tin trở nên khó tìm thấy hơn. Đừng dùng thao tác di chuột để ẩn thông tin quan trọng hoặc một phần tử quan trọng trên giao diện.

Di chuột qua

Truy vấn nội dung nghe nhìn hover chỉ báo cáo về cơ chế đầu vào chính. Một số thiết bị có nhiều cơ chế đầu vào: màn hình cảm ứng, chuột, bàn phím, bàn di chuột.

Tương tự như any-pointer báo cáo về bất kỳ cơ chế đầu vào nào, any-hover sẽ là true nếu bất kỳ cơ chế đầu vào nào có sẵn đều có khả năng di chuột lên các phần tử.

Nếu quyết định đảo ngược logic trong ví dụ trước, bạn có thể đặt kiểu di chuột làm kiểu mặc định rồi xoá kiểu đó nếu any-hover có giá trị là none.

button .extra {
  visibility: hidden;
}
button:hover .extra,
button:focus .extra {
  visibility: visible;
}
@media (any-hover: none) {
  button .extra {
    visibility: visible;
  }
}

Trên thiết bị không có cơ chế đầu vào có khả năng di chuột, biểu tượng bổ sung luôn hiển thị.

Bàn phím ảo

Mọi người dùng con trỏ và ngón tay để khám phá các giao diện, nhưng khi cần nhập thông tin, họ cần bàn phím. Điều này không có vấn đề gì nếu thiết bị của họ có gắn bàn phím thực, nhưng nếu họ đang dùng thiết bị màn hình cảm ứng thì sẽ phức tạp hơn một chút. Những thiết bị này có bàn phím ảo trên màn hình.

Loại nội dung nhập

Không giống như bàn phím thực, bàn phím ảo có thể được điều chỉnh để phù hợp với nội dung đầu vào dự kiến. Nếu bạn cung cấp thông tin về dữ liệu đầu vào dự kiến, các thiết bị có thể hiển thị bàn phím ảo phù hợp nhất.

Các loại dữ liệu đầu vào HTML5 là một cách hiệu quả để mô tả các phần tử input. Thuộc tính type chấp nhận các giá trị như email, number, tel, url, v.v.

  <label for="email">Email</label>
  <input type="email" id="email">

  <label for="number">Number</label>
  <input type="number" id="number">

  <label for="tel">Tel</label>
  <input type="tel" id="tel">

  <label for="url">URL</label>
  <input type="url" id="url">

Chế độ nhập

Thuộc tính inputmode giúp bạn kiểm soát chi tiết bàn phím ảo. Ví dụ: trong khi có một input type có giá trị là number, bạn có thể dùng thuộc tính inputmode để phân biệt giữa số nguyên và số thập phân.

Nếu bạn đang hỏi về một số nguyên, chẳng hạn như tuổi của một người, hãy dùng inputmode="numeric".

<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">

Nếu bạn đang yêu cầu một số có chứa chữ số thập phân, chẳng hạn như giá, hãy sử dụng inputmode="decimal".

<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">

Tự động hoàn thành

Không ai thích điền vào biểu mẫu. Là nhà thiết kế, bạn có thể cải thiện trải nghiệm cho người dùng bằng cách cho phép họ tự động điền vào các trường trong biểu mẫu. Thuộc tính autocomplete cung cấp cho bạn nhiều lựa chọn để cải thiện biểu mẫu liên hệ, biểu mẫu đăng nhập và biểu mẫu thanh toán.

<label for="name">Name</label>
<input type="text" id="name" autocomplete="name">

<label for="country">Country</label>
<input type="text" id="country" autocomplete="country">

<label for="email">Email</label>
<input type="email" id="email" autocomplete="email">

Các thuộc tính HTML này (type, inputmode và autocomplete) là những điểm bổ sung nhỏ cho các trường trong biểu mẫu của bạn, nhưng chúng có thể tạo ra sự khác biệt lớn cho trải nghiệm người dùng. Bằng cách dự đoán và đáp ứng các chức năng của thiết bị mà người dùng đang sử dụng, bạn đang trao quyền cho người dùng. Để biết thêm thông tin chi tiết, bạn có thể tham gia một khoá học dành riêng cho việc giúp bạn tìm hiểu về biểu mẫu.

Tiếp theo trong khoá học này, đã đến lúc bạn tìm hiểu một số mẫu giao diện phổ biến.

Kiểm tra kiến thức của bạn

Kiểm tra kiến thức của bạn về lượt tương tác