Thiết kế bản đồ tương tác thích ứng mượt mà trên di động

Hơn 65% khách truy cập trang web khám phá bản đồ kỹ thuật số trên điện thoại thông minh và máy tính bảng. Dù là người tham dự đang đi bộ trong hội trường hay khách mua nhà đang đứng trước dự án, trải nghiệm trên di động quyết định trực tiếp mức độ hài lòng.

Máy tính để bàn dựa vào con trỏ chuột và hiệu ứng rê chuột (hover). Màn hình cảm ứng lại dựa vào ngón tay, ngón cái và chiều rộng màn hình giới hạn. Thiết kế bản đồ tương tác ưu tiên di động đòi hỏi sự điều chỉnh có chủ đích về kích thước vùng chạm, bố cục ngăn kéo và thao tác cử chỉ.

Trên máy tính, bấm vào ghim có thể mở thẻ thông tin nổi bên cạnh. Trên màn hình điện thoại hẹp, thẻ nổi sẽ che toàn bộ bản đồ khiến người xem mất phương hướng.

Layerpin tự động chuyển đổi thẻ thông tin trên thiết bị di động thành Ngăn kéo đáy màn hình (Bottom Sheet) công thái học. Khi người dùng chạm vào ghim, ngăn kéo trượt nhẹ nhàng từ dưới lên, đưa ảnh, tiêu đề, thông số và nút kêu gọi hành động về ngay dưới ngón tay cái.

Khách truy cập có thể vuốt xuống để đóng ngăn kéo bằng một chuyển động tự nhiên, giữ nguyên bối cảnh không gian của bản đồ.

Một ức chế kinh điển khi nhúng bản đồ trên website di động là 'bẫy cuộn trang' (scroll trap): khách đang cuộn bài viết thì ngón tay chạm vào bản đồ và bị kẹt lại bên trong khung nhúng.

Layerpin tích hợp cơ chế xử lý cử chỉ thông minh: khi nhúng trên website, thao tác dùng hai ngón tay hoặc nút chạm tương tác chuyên dụng sẽ ngăn việc vô tình cuộn bản đồ, đảm bảo trang web vẫn cuộn mượt mà.

Bố trí sẵn các nút phóng to, thu nhỏ và đặt lại góc nhìn trực quan trên màn hình để người xem thao tác dễ dàng mà không cần dùng cử chỉ chụm ngón tay.