Hành trình 6 năm hoàn thiện trải nghiệm bản đồ trên Apple Watch

Tôi yêu thích những chuyến phiêu lưu vào hoang dã. Hiếm có gì khiến tôi hạnh phúc hơn khi được ở sâu trong núi non, nơi không một bóng người. Kết quả là, tôi đã dành rất nhiều thời gian để học cách khám phá và định hướng an toàn khi ở xa văn minh. Thói quen quan trọng nhất tôi tìm ra để không bị lạc là kiểm tra vị trí thường xuyên, và cách tốt nhất để làm điều đó là có một chiếc bản đồ ngay trên cổ tay tôi.

Hơn sáu năm qua, tôi đã nỗ lực tạo ra trải nghiệm bản đồ tốt nhất có thể trên Apple Watch. Với sự ra mắt của Pedometer++ 8 vào hôm qua, tôi cảm thấy hành trình thiết kế này đã đến được một đích đến có ý nghĩa. Tôi tự tin khẳng định rằng hỗ trợ bản đồ watchOS của Pedometer++ là tuyệt đối tốt nhất trên App Store hiện nay.

Vì vậy, tôi muốn chia sẻ về hành trình đã dẫn đến kết quả này.

Những nỗ lực ban đầu

Tôi đã khao khát có một chiếc bản đồ tốt trên cổ tay kể từ khi Apple Watch ra mắt. Tuy nhiên, điều này không thực tế cho đến khi watchOS 6 ra mắt, mang SwiftUI lên nền tảng này và lần đầu tiên tạo điều kiện cho các ứng dụng "thực sự" hoạt động. Nhưng trong những ngày đầu đó, màn hình rất nhỏ và bộ vi xử lý chậm chạp. Tôi không thể đạt được đúng những gì mình muốn.

Đây là lần thử nghiệm đầu tiên của tôi được tích hợp trong Pedometer++. Những bản đồ này được tạo hoàn toàn trên máy chủ (server), bao gồm việc gửi dữ liệu bài tập liên tục qua lại mỗi khi tôi muốn làm mới màn hình. Hệ thống này giúp tôi kiểm chứng ý tưởng, nhưng nó không bao giờ thực sự hữu ích cho việc định hướng hay sử dụng thường xuyên, và không bao giờ có thể hoạt động ngoại tuyến (offline).

Động cơ bản đồ tùy chỉnh

Xây dựng động cơ bản đồ tùy chỉnh

Tôi biết rằng nếu muốn tiến gần hơn đến mục tiêu này, tôi cần làm việc ở mức độ thấp hơn, vì vậy tôi bắt tay vào xây dựng một động cơ kết xuất bản đồ hoàn toàn gốc bằng SwiftUI. SwiftUI là lựa chọn duy nhất vì watchOS chỉ hỗ trợ nó, và nó tỏ ra hữu ích khi đưa bản đồ vào các tiện ích (widgets), vốn cũng chỉ hỗ trợ SwiftUI.

Vào năm 2021, tôi đã đưa động cơ này đến mức có thể kết xuất bản đồ trên watchOS một cách đáng tin cậy và hiệu suất cao. Với nó, tôi có thể kết xuất bất kỳ bản đồ dựa trên ô (tile-based maps) nào và chồng thông tin vị trí lên trên.

Thách thức về thiết kế giao diện

Tiếp theo là câu hỏi về cách hiển thị dữ liệu tốt nhất cho người dùng. Thiết kế ứng dụng trên watchOS là một thử thách thực sự thú vị — nhưng cũng đầy bực bội. Bạn đang thiết kế cho một màn hình tương đối nhỏ, phải được vận hành bằng một tay. Trong trường hợp này, tôi muốn người dùng có thể đọc bản đồ và sử dụng nó để định hướng, đồng thời vẫn có quyền truy cập vào các thông tin liên quan đến bài tập khác.

Điều này đã khởi đầu một chuỗi dài các thử nghiệm thiết kế, và hầu hết trong số đó (thành thật mà nói) đều khá tệ.

Cuối cùng, tôi đã chọn phương án "modal" (hộp thoại), nơi người dùng có thể chuyển đổi giữa màn hình bản đồ và màn hình số liệu thống kê bằng một nút ở góc trên bên trái.

Các thiết kế ban đầu

Giao diện này cung cấp một ngữ cảnh nơi người dùng có thể tự do kéo/thu phóng bản đồ và một ngữ cảnh khác nơi tôi có thể sử dụng giao diện trang theo thẻ (tabbed page) tiêu chuẩn của watchOS cho các số liệu và điều khiển. Tôi đã đưa tính năng này vào Pedometer++, nhưng luôn có điều gì đó khiến tôi không hài lòng lắm về nó.

Thiết kế này cảm thấy như một sự thỏa hiệp, và không phải là một sự thỏa hiệp tốt. Tôi cảm thấy rằng để đạt được mục tiêu làm cho bản đồ tương tác, tôi không thể để bản đồ trở thành một phần của bất kỳ cấu trúc UI nào liên quan đến thao tác vuốt. Khi màn hình trên Apple Watch trở nên lớn hơn, việc này dường như ít cần thiết hơn để đủ chỗ cho bản đồ hữu ích.

Vì vậy, tôi bắt đầu thử nghiệm các thiết kế thay thế. Rất nhiều thiết kế.

Một thời gian, tôi nghĩ rằng mình cần tìm cách đặt các số liệu ở dưới cùng màn hình. Tuy nhiên, điều đó sẽ dẫn đến các vấn đề khác trong những chuyến đi dài hoặc các bài tập không tập trung vào định hướng. Vì vậy, tôi tiếp tục lặp lại và đưa ra nhiều thiết kế hơn nữa.

Tất cả các thiết kế này đều mắc phải một vấn đề cơ bản giống nhau: chúng yêu cầu ứng dụng chỉ hiển thị một tập hợp cố định các trường thông tin tại một thời điểm.

Tôi có thể làm cho giao diện có thể cấu hình được, nhưng một trong những quy tắc cơ bản của thiết kế watchOS là bạn nên tránh mọi tương tác mất hơn vài giây trên đồng hồ. Bất kỳ thiết lập nào do người dùng cấu hình đều vốn dĩ rườm rà, vì vậy tôi không thích phương pháp này.

Chế độ tối, Liquid Glass và Bản đồ học

Khoảng cùng thời điểm tôi vẫn đang vật lộn với các thách thức thiết kế về cách cấu trúc ứng dụng tốt nhất, Apple đã công bố watchOS 26 và sự xuất hiện của Liquid Glass. Một trong những khía cạnh thiết kế cốt lõi của Liquid Glass là xếp chồng các yếu tố lên nhau, và một khía cạnh khác là các loại màu sắc hoạt động tốt nhất với nhau.

Trước đây, tôi sử dụng Thunderforest Outdoors làm bản đồ cơ sở cho ứng dụng. Tôi thích nội dung mà bản đồ này bao gồm, nhưng khi bắt đầu chồng các yếu tố dạng kính lên trên, tôi nhận thấy nó không phù hợp lắm với Liquid Glass.

Vì vậy... tôi đã đặt thiết kế một bản đồ tùy chỉnh. Làm việc với chuyên gia bản đồ tài năng Andy Allen, chúng tôi đã tạo ra một bản đồ cơ sở hoàn toàn mới sẽ trông tuyệt vời với Liquid Glass.

Bản đồ tối ưu hóa

Chúng tôi đơn giản hóa bản đồ về mặt thị giác, tăng độ tương phản của các yếu tố và làm cho các yếu tố bản đồ bão hòa hơn để ngăn chúng trở thành một mớ hỗn độn khi hiển thị dưới lớp kính.

Với công việc này hoàn tất, tôi có thêm một cơ hội: Tôi cuối cùng có thể có một biến thể chế độ tối của các ô bản đồ. Mặc dù hữu ích trên iOS, điều này thực sự tỏa sáng trên watchOS. Andy và tôi đã thực sự nỗ lực hướng tới một thứ gì đó sẽ cực kỳ dễ đọc ở khoảng cách dài bằng cánh tay.

Kết quả của những nỗ lực này là bây giờ tôi có một chiếc bản đồ tuyệt vời cho watchOS... nhưng một thiết kế không tương xứng với sự tuyệt vời đó.

Vươn tới sự hoàn hảo

Tôi vẫn tiếp tục thử. Để thoát khỏi bế tắc trong thiết kế, tôi đã nhờ đến sự giúp đỡ của nhà thiết kế tài năng Rafa Conde. Tôi cần một cặp mắt mới nhìn nhận vấn đề này và rất nhanh chóng, sự hợp tác này đã mang lại trái ngọt. Họ đã đề xuất nhiều bố cục thay thế, nhưng khi thấy bố cục này, tôi biết đó là cái mình cần.

Việc xếp chồng các số liệu ở góc trên bên trái, với bản đồ là trang trên cùng của một ngăn xếp dọc, là câu trả lời đúng đắn. Thiết kế này xử lý tính tương tác bằng cách yêu cầu một lần chạm vào bản đồ trước để vào "chế độ duyệt".

Tinh chỉnh và hoàn thiện

Bây giờ khi tôi đã khóa chặt khái niệm tổng thể, niềm vui thực sự bắt đầu, đó là xây dựng ứng dụng và điều chỉnh tất cả các chi tiết. Tôi khá nhanh chóng đã lấy khái niệm của Rafa và biến nó thành một nguyên mẫu hoạt động. Điều này cho phép tôi kiểm chứng ý tưởng trên thực địa... theo nghĩa đen. Sau khi đi bộ vài trăm dặm với nó, tôi tự tin rằng đây là cách tiếp cận đúng đắn.

Tiếp theo, tôi cần điều chỉnh phông chữ và đưa ra các lựa chọn thiết kế tinh tế hơn.

Sau một vài lần lặp lại thêm, tôi đã đến được thiết kế được ra mắt hôm qua. Nó dễ đọc, hữu ích và (theo khiêm tốn của tôi) rất đẹp.

Cảm giác thực sự tốt khi có thể kết thúc hành trình 6 năm này với một thiết kế mà tôi không thể tự hào hơn. Màn hình này đại diện cho rất nhiều nỗ lực và kiến thức tích lũy được. Nó cuối cùng đã mang lại cho tôi một thiết kế cảm thấy gốc rễ trên nền tảng, nhưng cũng mới lạ và độc đáo.

Dưới đây là sự tiến hóa của thiết kế này trong 6 năm qua:

Bài viết thêm: Cân nhắc về MapKit

Mặc dù công việc của tôi về bản đồ watchOS có từ rất lâu trước khi MapKit của Apple xuất hiện trên nền tảng này, có lẽ đáng để giải thích lý do tại sao tôi quyết định thực hiện tất cả công việc tùy chỉnh này để tránh sử dụng nó.

Về cơ bản, tôi thấy rằng MapKit rất tuyệt vời cho các sử dụng cơ bản, nhưng không cung cấp gần như mức độ cấu hình và tiện ích mà tôi muốn Pedometer++ cung cấp. Ví dụ:

MapKit trên watchOS luôn hiển thị ở chế độ tối, điều này thường là mặc định tốt, nhưng nhưng đóng cửa đối với một số lý do về khả năng truy cập và lựa chọn của người dùng. Tôi cần nó phải là một tùy chọn do người dùng lựa chọn.

Mặc dù MapKit trên watchOS đã tốt hơn theo thời gian về những gì bạn có thể làm với nó, tôi vẫn thấy nó hơi hạn chế về mặt hoạt ảnh và lớp phủ (overlays).

Phạm vi phủ sóng của MapKit đang được cải thiện về các đường đồng mức và đánh dấu đường mòn, nhưng vẫn có quá nhiều nơi mà bản đồ MapKit về cơ bản là trống trơn, nhưng tôi biết rằng nên có nhiều chi tiết phong phú hơn có sẵn. Ví dụ, đây là bản đồ của tôi so với MapKit tại đầu đường mòn của một trong những chuyến đi bộ yêu thích của tôi ở Scotland.

Tôi vẫn thấy thật ngầu rằng công việc của tôi về điều này cho phép tôi nói rằng tôi đã "đặt thiết kế một chuyên gia bản đồ" làm việc cho mình. 😁