Màn hình cảm ứng hoạt động khác với bàn phím và chuột
Trong những ngày đầu thiết kế trang web cho thiết bị di động, hầu hết các nhà phát triển đã phân nhánh sản phẩm của họ. Họ đã phát hành phiên bản máy tính để bàn đầy đủ chức năng và sau đó là phiên bản "được tối ưu hóa cho thiết bị di động" đã loại bỏ nhiều thương hiệu và hình ảnh để phù hợp với khả năng hạn chế và tốc độ mạng của điện thoại kẹo và mạng không dây 3G.
Tuy nhiên, các điện thoại thông minh đương đại có thể làm cho các trang web hoạt động hiệu quả như các máy tính để bàn, thông qua mạng tốt hay tốt hơn các đường DSL ngày hôm qua.
Thiết kế, sau đó, hội tụ trở lại giao diện người dùng đơn. Nhưng rủi ro đối với nhà thiết kế không phải là điện thoại thông minh hoặc máy tính bảng không thể hiển thị trang web đáp ứng hiện đại. Thay vào đó, đó là phương thức nhập của người dùng trên thiết bị màn hình cảm ứng yêu cầu những thay đổi có ý nghĩa đối với thiết kế trang web cơ bản. Những ngày xây dựng một trang web giả định khách truy cập có một bàn phím và một con chuột là hơn.
Quy tắc thiết kế màn hình cảm ứng cơ bản
Việc thiết kế giao diện Web có màn hình cảm ứng đòi hỏi sự phát triển của phương pháp tiếp cận bàn phím chuột-màn hình truyền thống của quá khứ. Đặc biệt, bạn phải phù hợp với các tương tác như cử chỉ, vòi và đầu vào cảm ứng đa điểm.
- Khai thác không chính xác. Trừ khi khách hàng có ngón tay của một đứa trẻ, ngay cả với các điều khiển phần mềm rất chính xác, nó có thể khó gõ và chính xác.
- Cử chỉ khác với vòi. Để cuộn một trang dài trên màn hình cảm ứng, người dùng sẽ vuốt một ngón tay lên cửa sổ trình duyệt. Điều này có vẻ không đáng kể cho đến khi bạn nhận ra rằng trình duyệt bằng chuột, bạn di chuyển chuột xuống .
- Hai (và nhiều hơn) ngón tay vòi. Người dùng có thể sử dụng nhiều lần nhấn ngón tay trên thiết bị cùng một lúc để điều khiển nó. Các vòi bổ sung này có thể có nghĩa là một cái gì đó cụ thể tùy thuộc vào hệ điều hành của thiết bị của người dùng.
- Các thiết bị có độ chói cao. Màn hình của hầu hết các máy tính bảng màn hình cảm ứng được làm từ một chiếc kính mạnh mẽ. Vật liệu này có thể rất khó đọc, với rất nhiều ánh sáng chói, trong các tình huống ánh sáng chói. Thêm vào đó, với tất cả các cảm động, họ nhận được dấu vân tay và vết ố trên màn hình có thể ảnh hưởng đến cách trang của bạn trông như thế nào.
- Bàn phím ảo. Trong khi một số người dùng có bàn phím không dây họ kết nối với máy tính bảng của họ, hầu hết người dùng máy tính bảng đều sử dụng bàn phím ảo để nhập dữ liệu. Mục nhập OSK có thể dẫn đến một số lỗi chính tả vui nhộn cũng như không thoải mái khi sử dụng trong thời gian dài.
Do các tính năng này của thiết bị, các nhà thiết kế web nên nhấn mạnh một số quy tắc thiết kế cơ bản cho người dùng màn hình cảm ứng:
- Không đặt các mục có thể nhấp quá gần nhau. Không có quy tắc cứng và nhanh nào xác định cách đóng quá gần, nhưng danh sách liên kết, đặc biệt là ở kích thước phông chữ nhỏ, có thể khó điều hướng bằng cách nhấp (khai thác) bằng ngón tay béo. Có thể gây phiền toái khi phải phóng to chỉ để thử và nhấp vào liên kết. Nguyên tắc này là đúng cho các nút cũng như các liên kết.
- Hệ thống phân cấp có thể khó mở. Một dạng menu động phổ biến sử dụng JavaScript để mở menu phụ khi người dùng nhấp và sau đó di chuột qua menu con. Các trạng thái này có thể rất khó hoặc không thể sử dụng trên màn hình cảm ứng bởi vì chúng không ở trạng thái mở hoặc sẽ không đóng.
- Di chuyển các liên kết và các khu vực có thể nhấp ra khỏi cạnh phải của cửa sổ. Hầu hết mọi người đều thuận tay phải và có xu hướng cuộn ở phía bên kia của màn hình. Vì việc cuộn được thực hiện bằng cử chỉ, đôi khi bạn có thể bắt đầu vuốt trên liên kết do nhầm lẫn. Người dùng có thể cảm thấy khó chịu nếu họ muốn cuộn trên trang và thay vào đó vô tình nhấn vào một liên kết. Bằng cách di chuyển các liên kết của bạn ra khỏi phía bên phải, bạn có thể giúp họ tránh được sự bất tiện này.
- Không có chuột. Và điều này có nghĩa là không có con trỏ chuột . Bạn không nên dựa vào con trỏ chuột thay đổi để giúp chỉ ra rằng một cái gì đó có thể nhấp được.
- Trạng thái di chuột không tồn tại. Như một hệ luỵ ở trên, vì không có chuột, không có gì để di chuột. Liên kết được nhấp vào (nhấn) hoặc không trên thiết bị màn hình cảm ứng, do đó người dùng không thể suy ra bất kỳ thông tin hữu ích nào từ các trạng thái di chuột như thay đổi màu, mẹo công cụ hoặc thay đổi trạng thái thanh.
- Nền đen tăng độ chói. Một trang web có nền đen có thể rất khó đọc trên thiết bị màn hình cảm ứng vì ánh sáng chói. Đen làm cho dấu vân tay trên các thiết bị hiển thị rõ ràng hơn, làm mờ màn hình. Và màu đen có thể biến màn hình thành gương phản ánh lại người dùng thường xuyên phải đối mặt với văn bản trên màn hình.
- Các khối văn bản dài trong các biểu mẫu khó viết. Mặc dù có thể viết toàn bộ tiểu thuyết trên iPad hoặc máy tính bảng Android hoặc Windows, hầu hết mọi người không thích sử dụng bàn phím ảo cho các đoạn văn bản dài. Thiết kế của bạn càng có thể làm cho việc nhập dữ liệu càng ngắn càng dễ dàng càng tốt, càng tốt.
Khía cạnh quan trọng nhất của thiết kế với màn hình cảm ứng trong tâm trí là kiểm tra các trang của bạn trên thiết bị màn hình cảm ứng . Mặc dù rất nhiều bộ giả lập của iPad và Android có sẵn và nhiều máy tính bảng Windows, chúng vẫn không cung cấp cảm giác của màn hình cảm ứng. Bạn không thể nói rằng các liên kết quá gần hoặc các nút quá nhỏ - hoặc ánh sáng chói làm cho trang quá khó đọc — trừ khi bạn thoát ra khỏi máy tính bảng và thử chúng trước khi bạn phát hành thiết kế trang web mới.