Tương tác

Các thiết bị 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ị có màn hình lớn như máy tính xách tay và máy tính để bàn thường đi kèm với các phần cứng như chuột hoặc bàn di chuột. Thật hấp dẫn khi dùng màn hình nhỏ với màn hình cảm ứng và màn hình lớn có con trỏ.

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

Thay vì cố gắng suy đoán cơ chế nhập 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 đa phương tiệ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 thì tức là cơ chế nhập dữ liệu chính không chính xác lắm. Ngón tay trên màn hình cảm ứng là con trỏ thô.

Nếu trình duyệt báo cáo giá trị pointer là fine thì tức là cơ chế nhập 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ỏ nhỏ.

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

Trong ví dụ này, các nút được phóng to đối với con trỏ thô:

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

Bạn cũng có thể thu nhỏ các phần tử cho con trỏ chi tiết, nhưng hãy cẩn thận khi thực hiện việc này:

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

Ngay cả khi ai đó có cơ chế đầu vào 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. Luật của Fitbit vẫn được áp dụng. Mục tiêu nhỏ hơn yêu cầu tập trung nhiều hơn ngay cả với một con trỏ nhỏ. Khu vực mục tiêu lớn hơn sẽ mang lại lợi ích cho mọi người, bất kể thiết bị trỏ nào.

Con trỏ bất kỳ

Tính năng nội dung đa phương tiện pointer báo cáo độ chi tiết của cơ chế nhập chính. Tuy nhiên, nhiều thiết bị có nhiều cơ chế đầu vào. Có thể ai đó đ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 lúc.

any-pointer khác với tính năng đa phương tiện pointer ở chỗ tính năng này báo cáo liệu có bất kỳ thiết bị trỏ nào vượt qua bài kiểm thử hay không.

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

Giá trị any-pointer của coarse có nghĩa là có í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 của 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ế đầu vào chính.

Vì truy vấn phương tiện any-pointer sẽ báo cáo một kết quả dương nếu bất kỳ cơ chế đầu vào nào vượt qua kiểm thử, nên trình duyệt có thể báo cáo kết quả cho any-pointer: fine đồng thời báo cáo kết quả cho any-pointer: coarse. Trong trường hợp đó, thứ tự của các lượt truy vấn nội dung đa phương tiện là rất quan trọng. Lựa chọn cuối cùng sẽ được ưu tiên.

Trong ví dụ này, nếu thiết bị có cả cơ chế nhập chi tiết và cơ chế nhập thô, thì các kiểu thô 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 đa phương tiện hover báo cáo về việc cơ chế nhập chính có thể di chuột qua 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ỏ 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 đa phương tiện pointer (phân biệt giữa con trỏ chi tiết và con trỏ thô), tính năng đa phương tiện hover là tệp 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ị là hover. Nếu không, giá trị sẽ là none.

Trong ví dụ này, một số biểu tượng bổ sung 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 qua 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 sử dụng chuột để di chuột qua nút đó, biểu tượng sẽ xuất hiện. Tuy nhiên, nếu bạn sử dụng bàn phím để nhấn vào nút đó thì biểu tượng vẫn không hiển thị. Khi dùng bàn phím, bạn sẽ tập trung thay vì di chuột. Một thiết bị máy tính có kết nối chuột sẽ báo cáo rằng cơ chế đầu vào chính có khả năng di chuột là đúng. Tuy nhiên, bất cứ ai sử dụng bàn phím trong khi kết nối chuột sẽ không nhận được lợi ích từ kiểu :hover. Vì vậy, bạn nên kết hợp kiểu :hover và :focus để bao gồm cả hai lượt 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 qua các phần tử, hãy cẩn thận về việc ẩn thông tin sau tương tác di chuột. Thông tin đó sẽ khó tìm thấy hơn. Không sử dụng thao tác di chuột để ẩn thông tin quan trọng hoặc một thành phần quan trọng trên giao diện.

Bất kỳ thao tác di chuột nào

Truy vấn phương tiện hover chỉ báo cáo về cơ chế nhập 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.

Cũng giống như any-pointer báo cáo về bất kỳ cơ chế đầu vào nào, any-hover sẽ có giá trị true nếu có bất kỳ cơ chế đầu vào nào có thể di chuột qua các phần tử.

Nếu quyết định đảo ngược logic trong ví dụ trước, bạn có thể đặt các kiểu di chuột làm kiểu mặc định rồi xoá các kiểu đó nếu any-hover có giá trị 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 sẽ luôn hiển thị.

Bàn phím ảo

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

Loại mục nhập

Không giống như bàn phím vật lý, bàn phím ảo có thể được điều chỉnh cho phù hợp với nội dung nhập 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ể phân phát 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 hay để 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à các giá trị khác.

  <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 cho phép bạn kiểm soát chi tiết bàn phím ảo. Ví dụ: mặc dù có một input type với giá trị number, bạn có thể sử 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 yêu cầu một số nguyên, chẳng hạn như tuổi của ai đó, hãy sử dụng inputmode="numeric".

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

Nếu bạn 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 thuộc tính bổ sung nhỏ cho các trường biểu mẫu của bạn, nhưng có thể tạo ra sự khác biệt lớn đối với trải nghiệm người dùng. Bằng việc dự đoán và phản hồi khả năng của thiết bị của người dùng, bạn đang trao quyền cho người dùng của mình. Để biết thêm thông tin chuyên sâu, có một khoá học dành riêng cho việc giúp bạn tìm hiểu biểu mẫu.

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

Kiểm tra mức độ hiểu biết của bạn

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