Luke Wroblewski lần đầu tiên đặt ra thuật ngữ “skeleton screen” trong một bài đăng trên blog khuyên rằng các nhà thiết kế nên tránh sử dụng công cụ quay vòng (thường là một yếu tố đồ họa được tạo hoạt ảnh xoay ở điểm trung tâm của nó) để ủng hộ các trình giữ chỗ trực quan. Anh ấy đã tham khảo công việc mà anh ấy đã thực hiện trên một ứng dụng di động gốc có tên là Polar, đặc biệt là về thời gian chờ quá lâu do người dùng báo cáo khi tải các lượt xem web của ứng dụng. Ban đầu, spinners được sử dụng để chỉ ra rằng một chế độ xem web đang được tải vào. Luke nói điều đó tốt nhất:
“We had made people watch the clock… as a result, time went slower and so did our app. We focused on the indicator and not the progress.”
“Chúng tôi đã khiến mọi người xem đồng hồ… kết quả là thời gian trôi chậm hơn và ứng dụng của chúng tôi cũng vậy. Chúng tôi tập trung vào chỉ số chứ không phải tiến độ.”
Để giảm thiểu sự tập trung vào quá trình tải so với nội dung thực tế đang tải, Wroblewski đã giới thiệu một mẫu thiết kế mới lạ — Skeleton screen. Nói theo cách riêng của anh ấy, chúng “về cơ bản là một phiên bản trống của một trang trong đó thông tin được tải dần vào.” Các trình giữ chỗ trực quan này được Wroblewski hiển thị là các hộp màu xám nhạt xuất hiện ngay lập tức ở những khu vực mà nội dung chưa tải xong.
Chuyển trọng tâm của chúng tôi sang nội dung đang được tải và tránh xa bản thân quá trình tải thực tế - một cá trích đỏ gần như kiểu Dickensian. Nhưng tác động thực tế là gì?
Ban đầu, các công cụ quay vòng được sử dụng trong ứng dụng Polar để giao tiếp với người dùng khi chế độ xem web được lấy từ máy chủ. Hãy nói rõ ở đây: trong bài đăng của mình, Luke không đề cập đến thói quen phổ biến là sử dụng spinners - thay vào đó, anh ấy cho rằng(có lẽ là gián tiếp) về xu hướng tự nhiên của con người là ghét thời gian nhàn rỗi và nhu cầu quản lý nhận thức của con người.
Spinners và progress là các mô hình tải rõ ràng ở chỗ chúng tập trung người dùng vào việc thông báo thời gian tải và thường xuyên hơn là chặn tương tác của người dùng cho đến khi bố cục được tải đủ để hữu ích.
Skeleton screens(màn hình khung) là các trang trống được điền dần nội dung, chẳng hạn như văn bản và hình ảnh, khi chúng có sẵn (tức là khi độ trễ mạng cho phép). Các hình dạng được tô màu xám hoặc có tông màu trung tính, thường được gọi là trình giữ chỗ, đáp ứng người dùng ngay lập tức khi người dùng tương tác với lời kêu gọi hành động hoặc liên kết. Sau đó, các trình giữ chỗ (được gọi là "xương" của khung) được thay thế bằng nội dung trang web thực tế và ảo ảnh đã hoàn tất. Đó là những gì skeleton screens làm: tạo ảo giác về sự chuyển đổi tức thì.
Tất cả các ví dụ trên đều sử dụng các phương pháp thiết kế trực quan phổ biến:
Nghiên cứu bao gồm hai giai đoạn chính:
Giai đoạn đầu tiên tạo ra một mô hình tải phổ biến (một công cụ quay vòng - spinner) trực tiếp chống lại cách tiếp cận skeleton screens và được mô tả chi tiết hơn trong phần có tiêu đề “Mô hình so với mô hình”.
Giai đoạn thứ hai điều tra các biến thể trên skeleton screens, đánh giá hiệu quả của từng biến thể. Tôi đã lên kế hoạch cho nghiên cứu này trước khi biết đầy đủ kết quả của giai đoạn đầu tiên, vì giả định của tôi là xu hướng skeleton sẽ tiếp tục bất kể hiệu quả được đánh giá của nó như thế nào và tôi muốn tự mình xem điều gì sẽ là tối ưu trong công việc của mình. Xem phần có tiêu đề “Implementation variables” để biết thêm thông tin về giai đoạn nghiên cứu này.
Một nghiên cứu nhỏ đã xuất hiện cho thấy hiệu quả của skeleton screens trong việc giảm thời gian xếp hàng nhận thấy. Viget đã công bố một nghiên cứu năm 2017 chống lại giá trị được quảng cáo của skeleton khi so sánh với máy quay và màn hình trống (cảnh báo spoiler: skeleton screens hoạt động kém nhất về khoảng thời gian cảm nhận được). Tuy nhiên, ngay cả khi đã có trong tay nghiên cứu Viget với những kết quả dường như mang tính chỉ dẫn, tôi vẫn muốn tiến xa hơn một chút.
Tôi muốn thử nghiệm skeleton screens nhiều nhất có thể trên thiết bị di động vật lý, vì điều đó thể hiện tốt nhất trạng thái “tập trung một nửa” mà hầu hết chúng ta gặp phải khi sử dụng thiết bị di động (một nửa tập trung vào thiết bị và một nửa tập trung vào việc băng qua đường hoặc ăn bánh mì vòng). Tôi cũng muốn những người tham gia thử nghiệm (tốt nhất là) không làm việc trong ngành công nghệ. Vì vậy, tôi đã xuống đường ở trung tâm thành phố Vancouver và bắt đầu nói chuyện với người dân địa phương ở mọi lứa tuổi, giới tính và hoàn cảnh sống.
Trong phần thứ hai của nghiên cứu này, tôi đã tận dụng những người thử nghiệm trên UserTesting.com (đáng tiếc là vì thời tiết đã chuyển mùa và ngày càng trở nên khó chịu khi phải ngồi đợi những người tham gia nghiên cứu bên ngoài).
Giả thuyết: hiển thị skeleton screen sẽ khiến con người nhận thấy thời gian tải ngắn hơn.
Khi xem xét cách tốt nhất để tiếp cận những người tham gia, tôi nhận ra rằng các thử nghiệm trước đây mà tôi đã thử chống lại giả thuyết này chứa đầy rẫy những vấn đề có thể dễ dàng giảm thiểu, cụ thể là:
Để giảm thiểu một số vấn đề này, tôi quyết định rằng một ứng dụng trên điện thoại thực, được cung cấp cho người tham gia thử nghiệm để họ tự hoàn thành, là giải pháp tốt nhất. Thử nghiệm sơ bộ của người dùng đối với ứng dụng thử nghiệm đã tỏ ra khả quan sau một số lần lặp lại và tinh chỉnh.
Khi tôi tiếp cận một người tham gia thử nghiệm tiềm năng trên đường phố, tôi yêu cầu họ hoàn thành các nhiệm vụ theo hướng dẫn trên thiết bị và đảm bảo với họ rằng họ có thể dừng lại bất cứ lúc nào để hỏi bất kỳ câu hỏi nào hoặc nghỉ ngơi. Sau khi họ hoàn thành bài kiểm tra và đưa ra bất kỳ nhận xét mở nào về mô hình mà họ thích hơn, một chiếc bánh rán được đưa ra như một phần thưởng và những người tham gia của tôi được cử lên đường, rất vui khi biết rằng một số người kỳ quặc đang thử nghiệm các phương pháp loading khác nhau với người lạ.
Tổng số 126 cá nhân duy nhất đã được tiếp cận trên đường phố từ các nền tảng khác nhau, chủ yếu từ các nền tảng phi công nghệ. Kích thước mẫu là 80 cá nhân, tất cả đều đã có kinh nghiệm với thiết bị di động.
Ứng dụng được viết bằng ngôn ngữ lập trình Swift và đã được tải lên iPhone 7 (đây là yếu tố hình thức mà tôi cảm thấy sẽ thoải mái khi sử dụng trên hầu hết các tay). Khi người tham gia hoàn thành bài kiểm tra của họ, kết quả được gửi đến cơ sở dữ liệu Firebase từ đó tôi có thể lấy kết quả hàng ngày vào tệp CSV (giá trị được phân tách bằng dấu phẩy) để phân tích.
Những người tham gia được yêu cầu đọc các hướng dẫn được trình bày trong ứng dụng và dành thời gian hoàn thành các nhiệm vụ được trình bày. Trước khi bắt đầu các bài kiểm tra, tôi đã cho những người tham gia khởi động rất nhanh để họ biết những gì sẽ xảy ra. Đây là những gì những người tham gia của chúng tôi phải làm:
Để giảm thiểu bất kỳ sai lệch nào, trong đó việc nhìn thấy mẫu này trước mẫu khác có thể làm sai lệch thời lượng cảm nhận, ứng dụng sẽ tự động ngẫu nhiên hóa thứ tự xuất hiện của các mô hình tải khác nhau.
Ứng dụng cũng ngẫu nhiên hóa thời lượng thực tế được hiển thị cho từng mô hình tải, vì vậy thời lượng dường như không dài hơn hoặc ngắn hơn dần dần.
Khi thử nghiệm Skeleton so với Spinner và blank screen của chúng tôi theo thứ tự ngẫu nhiên, skeleton hoạt động tốt nhất về thời lượng cảm nhận khi được hiển thị cho những người sử dụng thiết bị di động (xem bảng bên dưới để biết tóm tắt kết quả thử nghiệm trung bình cho cỡ mẫu gồm 80 cá nhân ). Thời lượng thực tế được hiển thị cho những người tham gia này được chọn ngẫu nhiên để ngăn họ diễn giải thời lượng tăng dần. blank screen của chúng tôi thực hiện tổng thể tồi tệ nhất.
Skeleton screens cũng hoạt động tốt nhất ở mức độ cảm xúc, với những người tham gia hài lòng nhất với skeleton loading và kém hài lòng nhất về tổng thể với blank screen . Sau khi xem từng kết hợp thời lượng và phương thức tải, người tham gia được yêu cầu đo lường cảm giác của mỗi lần xem khi sử dụng biểu tượng cảm xúc, với 0 = Rất vui và 4 = Thất vọng tối đa. Đây là những gì chúng đã được hiển thị sau mỗi bài kiểm tra:
Khi skeleton screen được sử dụng giữa các lần tải trang trên thiết bị di động, thời gian đã trôi qua (thời lượng) được cảm nhận sẽ ngắn hơn khi so sánh với màn hình xoay hoặc màn hình trống. Trong một số trường hợp, skeleton tương đương với spinner, chẳng hạn như trong các thử nghiệm thời lượng 5,5 giây của chúng tôi và thực sự ưu thế của skeleton so với spinner là không đáng kể. Người ta có thể đưa ra giả thuyết rằng các phương pháp trình bày khác nhau của máy quay có thể ảnh hưởng đáng kể đến kết quả. Trong các thử nghiệm của chúng tôi, tôi đã sử dụng một công cụ quay vòng mà tôi nghĩ là chung chung và trông gần giống với nền tảng nhất (trong trường hợp này là iOS).
Ở cả hai khía cạnh (hiệu suất cảm nhận và tác động cảm xúc), việc sử dụng bất kỳ chỉ báo tải nào đều tốt hơn so với màn hình trống.
Giả thuyết: cách trình bày trực quan của skeleton screen sẽ khiến con người nhận thấy thời gian tải ngắn hơn.
Tôi bắt đầu đưa ra giả thuyết về cách các biến thể trên skeleton có thể ảnh hưởng đến thời lượng nhận thức ngay từ đầu trong cuộc điều tra này (trước khi tôi có kết quả về việc liệu skeleton có hiệu suất cao hơn bộ kéo sợi hay không).
Những gợi ý ban đầu rằng cách trình bày trực quan của skeleton screen có thể ảnh hưởng đến thời lượng cảm nhận đến từ các nguồn như nghiên cứu năm 2010 này (trong nghiên cứu này, các thanh tiến trình được trình bày bằng hoạt ảnh "điêu đứng" tỏ ra vượt trội về thời lượng chờ cảm nhận). Bạn có thể đọc thêm về độ tương phản của các vật thể và cách chúng tác động đến nhận thức của con người về tốc độ.
Để xác định hiệu quả của bất kỳ cách trình bày trực quan cụ thể nào về màn hình khung xương, tôi đã dành thời gian để thu thập các phương pháp phổ biến nhất hiện được sử dụng trên thị trường. Dưới đây là một số cách tiếp cận phổ biến:
Khi thời tiết bên ngoài thay đổi (tôi đã thực hiện tất cả các thử nghiệm trước đó ngoài trời ở trung tâm thành phố Vancouver, BC), tôi đã chuyển sang 80 người dùng thiết bị di động duy nhất trên UserTesting.com để thử nghiệm các biến triển khai này. Những người tham gia phần lớn là khán giả Bắc Mỹ và được yêu cầu thực hiện các bài kiểm tra trên thiết bị di động. Để tiến hành thử nghiệm, tôi đã mô phỏng một trang sản phẩm dành cho thiết bị di động của một thương hiệu giày dép giả tạo để so sánh giống như một ví dụ trong thế giới thực.
Những người tham gia được xem một bài thuyết trình, rồi một bài thuyết trình khác ngay sau đó. Thứ tự mà tôi trình bày từng phương pháp trình bày đã được đảo lộn trong mỗi “tập hợp” được trình bày. Ví dụ: nếu tôi thử nghiệm màn hình khung xương tĩnh so với xung, thì 10 người tham gia đầu tiên được hiển thị phiên bản tĩnh trước và 10 người cuối cùng được hiển thị phiên bản xung trước. Điều này được thực hiện để giảm thiểu bất kỳ mối lo ngại nào về sự thiên vị có thể nảy sinh do nhìn thấy phương pháp này trước phương pháp kia.
Những người tham gia không được thông báo rằng thời lượng của mỗi ví dụ mà họ xem là chính xác như nhau (tất cả thời lượng đều dài 5 giây). Khi xem hai phương pháp trình bày, người tham gia được hỏi, "trong hai lần chuyển trang mà bạn đã quan sát, chuyển trang nào nhanh hơn?"
Tôi tuần tự xếp lớp các phương pháp triển khai để chuyển từ các biến vĩ mô sang các biến vi mô. Đây là thứ tự các bài kiểm tra tôi đã trải qua:
60% người tham gia thử nghiệm đoán rằng các bộ xương hoạt hình có thời lượng ngắn hơn. Kích thước mẫu: 20 người thử nghiệm duy nhất
65% người tham gia thử nghiệm đoán rằng hoạt hình sóng thể hiện thời lượng ngắn hơn. Kích thước mẫu: 20 người thử nghiệm duy nhất
60% người tham gia thử nghiệm đoán rằng hoạt ảnh sóng chậm thể hiện thời lượng ngắn hơn. Kích thước mẫu: 20 người thử nghiệm duy nhất
68% người tham gia thử nghiệm đoán rằng hoạt ảnh sóng từ trái sang phải thể hiện thời lượng ngắn hơn. Kích thước mẫu: 20 người thử nghiệm duy nhất
Kết quả từ nhóm các bài kiểm tra này chỉ mang tính biểu thị chứ không phải kết luận bằng bất kỳ phương tiện nào. Điều có thể mang lại một số hương vị cho những kết quả này là khi nói to về lý do tại sao họ quyết định theo cách họ đã làm, những người tham gia thử nghiệm khá thiếu quyết đoán khi thực hiện các thử nghiệm mang tính sắc thái hơn (ví dụ: thử nghiệm sóng nhanh so với sóng chậm). Tuy nhiên, khi nói đến các thử nghiệm dễ phân biệt hơn (chẳng hạn như thử nghiệm hoạt hình xung so với sóng), những người tham gia thử nghiệm đã quyết đoán và hoàn toàn tin chắc rằng một thử nghiệm có thời lượng ngắn hơn so với thử nghiệm kia (mặc dù các khoảng thời gian đều nhất quán trên bảng ).
Mặc dù cần nghiên cứu thêm về hiệu quả và hiệu quả của sàng lọc skeleton screen, bài tập này đã cung cấp cho chúng tôi một số manh mối về cách chúng tôi có thể tận dụng tối đa mô hình độc đáo này, cụ thể là:
Designers should prefer a wave effect (or shimmer, much like Facebook uses) over a pulse
(Các nhà thiết kế nên thích hiệu ứng sóng (hoặc ánh sáng lung linh, giống như Facebook sử dụng) hơn là xung)
Motion should not be so fast as to draw attention to the skeleton objects (slow and steady, like found in the Google iOS app is optimal)
(Chuyển động không được quá nhanh để thu hút sự chú ý vào các đối tượng khung xương (chậm và ổn định, như được tìm thấy trong ứng dụng Google iOS là tối ưu))
Designers should prefer animation that moves from left to right (it would be interesting to see if RTL reading cultures would interpret this differently)
(Các nhà thiết kế nên thích hoạt ảnh chuyển động từ trái sang phải (sẽ rất thú vị nếu xem liệu các nền văn hóa đọc RTL có diễn giải điều này theo cách khác không))
Việc sử dụng các đối tượng khung dựa trên màu chủ đạo là một phương pháp độc đáo để cung cấp bối cảnh tương lai cho các đối tượng đang tải, như thể ngụ ý sâu sắc hơn về trạng thái được tải trong tương lai. Google Photos sử dụng mẫu này, cũng như Pinterest.
Trước khi chúng tôi đi sâu vào chi tiết của nghiên cứu này, tôi đã đề cập rằng phần lớn màn hình skeleton được triển khai ngày nay chỉ hoạt động như màn hình splash screen. Khi thiết kế trải nghiệm loading, hãy cố gắng tải nội dung dần dần, thay thế các đối tượng giữ chỗ khung bằng nội dung như văn bản và hình ảnh thực ngay khi chúng có sẵn. Luke Wroblewski (người tiên phong đầu tiên của màn hình khung xương) nói về điều này một cách chi tiết tại Chuyển đổi năm 2018 tại Google. Luke gọi đây là "tải nội dung dần dần". Các nghiên cứu trong tương lai nên so sánh khung xương được tải dần dần thực sự với các chỉ số tải khác, đồng thời tận dụng kích thước mẫu lớn hơn.
Cho phép tôi thực tế trong vài nghìn mili giây ở đây: tại sao chỉ nhận thức về một trang web hoặc ứng dụng tải nhanh hơn vài trăm mili giây, lại thúc đẩy một cuộc điều tra cá nhân sâu sắc như vậy về một thứ dường như vô thưởng vô phạt như màn hình skeleton?
Là một phần của thế hệ đã lắp 13 đĩa mềm để cài đặt Windows 95, bạn sẽ nghĩ rằng kết nối LTE và cáp quang mà chúng ta tận hưởng ngày nay có thể khiến tôi hoài niệm về những thời kỳ đơn giản hơn, những thời điểm mà tôi có thể vào tủ lạnh lấy chiếc bánh trong khi chờ đợi món ăn yêu thích của mình. Trang web Geocities tải xong với tất cả vinh quang GIF động của nó.
Nhưng than ôi không.
Tôi thiếu kiên nhẫn như những thanh thiếu niên trên xe buýt phàn nàn về tốc độ tải 12mbps của nguồn cấp dữ liệu Instagram của họ. Tôi co rúm người lại khi hoạt ảnh của điều hướng trên thiết bị di động bị giật ở tốc độ dưới 30 khung hình/giây. Tôi thắc mắc tại sao thiết bị đầu cuối thanh toán tại cửa hàng tạp hóa phải mất 2 giây để thực sự sẵn sàng trước khi tôi có thể chạm vào đồng hồ của mình để thanh toán. Thế giới của chúng ta và xã hội mà nó tổ chức, giờ đây đang chuyển động nhanh hơn tốc độ xử lý của những vùng rộng lớn của loài chúng ta. Đối với bạn, có vẻ như nhận thức của chúng ta về thời gian đang tăng tốc vượt quá khả năng thích nghi của chúng ta? Bạn không cô đơn.
Đi sâu vào cách con người cảm nhận thời gian trong bối cảnh tốc độ của công nghệ xung quanh chúng ta là một trải nghiệm thú vị. Nhưng tôi cũng đầy lo lắng. Như Peter Conrad đã nói hay nhất, “Sự hiện đại là sự tăng tốc của thời gian”. Từ quan sát cá nhân thuần túy, sự thật của điều này dường như là hiển nhiên. Sự kiên nhẫn trong nền văn hóa của chúng ta mỗi ngày một mỏng đi, tốc độ đi bộ của chúng ta dường như nhanh hơn gần bằng tốc độ chạy bộ, và khả năng chịu đựng ngày càng suy yếu của chúng ta đối với mọi thứ, thậm chí là nhàn rỗi nhẹ trong tự nhiên, đã nhường chỗ cho cả một ngành công nghiệp gồm các chuyên gia về năng suất. Chính bài báo này đã phát triển từ sự kính sợ của cá nhân tôi khi tôi nhận thấy sự thiếu kiên nhẫn của tập thể chúng ta.
Trong sự khiển trách của con người về sự chậm chạp chắc chắn sẽ nảy sinh những lo lắng mới và những xung động phi lý. Và có lẽ những cách mới để dập tắt nỗi sợ hãi rằng thời gian đang vuột khỏi tầm tay của chúng ta — khi chúng ta ngồi và lặng lẽ chiêm ngưỡng những màn hình skeleton.
