Cách thiết kế ảnh chụp màn hình ứng dụng có thể quét được

Thiết kế lại HeyDoctor từ App Store Ảnh chụp màn hình

Chúng ta hãy chơi một trò chơi. Chọn một ứng dụng trên điện thoại của bạn mà bạn thực sự thích. Bạn là người tạo ra ứng dụng này và đang tìm cách huy động tiền từ các nhà đầu tư. Bạn có một phút để đưa ứng dụng của mình đến các VC. Tiền là để lấy nhưng chỉ khi bạn có thể thuyết phục họ trong 60 giây. Bạn làm nó như thế nào? Bạn có mô tả những gì ứng dụng làm? Bạn có nói ứng dụng này độc đáo như thế nào so với các đối thủ không? Bạn có cho thấy trải nghiệm người dùng tốt như thế nào không?

Mất trung bình 7 giây để người dùng trên App Store quyết định xem họ có muốn tải xuống ứng dụng của bạn hay không. Một nghiên cứu nghiên cứu về các quyết định tải xuống liên quan đến 25.000 khách truy cập và 10.000 lượt cài đặt ảnh chụp màn hình được đánh giá là lý do thứ hai để cài đặt, với xếp hạng chiếm vị trí hàng đầu.

Chúng tôi phát hiện ra rằng thời gian trung bình mọi người dành cho danh sách cửa hàng là 7 giây. Thực tế là, đại đa số mọi người rời khỏi trang thậm chí sớm hơn. Người dùng đã tham gia lâu hơn một chút, nhưng tất cả đều tuân theo cùng một quy trình: kiểm tra biểu tượng, xem hai ảnh chụp màn hình đầu tiên và quét dòng đầu tiên của mô tả ứng dụng - Peter Fodor, Tại sao 7 giây có thể tạo hoặc phá vỡ ứng dụng di động của bạn

Ảnh chụp màn hình là một tấm gương phản chiếu câu chuyện người dùng ứng dụng của bạn và phản ánh trải nghiệm người dùng của nó. Tôi đã nghiên cứu 100 ứng dụng hàng đầu và ảnh chụp màn hình của chúng bằng cách sử dụng dữ liệu được thu thập bởi những người tốt ở Incipia. Tôi sẽ tham khảo những phát hiện chính từ nhiều nghiên cứu ở đây.

Ứng dụng tập trung: HeyDoctor

HeyDoctor là một ứng dụng cho phép người dùng nhận đơn thuốc y tế trực tuyến mà không cần phải đến bác sĩ chăm sóc chính. HeyDoctor có thể kê đơn và nạp thêm đơn thuốc cho các loại thuốc từ kiểm soát sinh đẻ, mọc tóc đến điều trị nhiễm trùng đường tiết niệu, báo cáo trong phòng thí nghiệm và nhiều hơn nữa. Bạn cũng có thể được điều trị cho các trường hợp chăm sóc chính như điều trị mụn trứng cá, UTI, điều trị đau lạnh và nhiều hơn nữa. Ứng dụng di động HeyDoctor sườn đã được đón nhận trong App Store với 122 đánh giá đánh giá ở mức 4,7 sao.

Chúng tôi sẽ thiết kế lại ảnh chụp màn hình HeyDoctor và tìm hiểu về ảnh chụp màn hình có thể quét được.

Khước từ

Xin lưu ý rằng tôi không làm việc tại HeyDoctor và các quan điểm thể hiện trong nghiên cứu điển hình này hoàn toàn thuộc về tôi. Không giống như các nhà thiết kế, quản lý sản phẩm và mọi người chịu trách nhiệm đưa ra các quyết định quan trọng liên quan đến thiết kế làm việc tại HeyDoctor, tôi không có quyền truy cập vào các phân tích trên cơ sở người dùng của nó và có thể không nhìn vào bức tranh hoàn chỉnh. Quyết định thiết kế có thể dựa trên các mục tiêu kinh doanh, ưu tiên nguồn lực hoặc các ràng buộc kỹ thuật. Do đó, bất kỳ nghiên cứu trường hợp không mong muốn nào đều không đầy đủ, và tôi chắc chắn không gợi ý rằng HeyDoctor từ bỏ ảnh chụp màn hình hiện tại của họ và áp dụng thiết kế lại của tôi.

Làm cho ứng dụng của bạn phẳng - một số người. Tín dụng Meme: @parasmael

Thiết kế hiện tại

Chúng tôi sẽ làm việc trên ứng dụng HeyDoctor bằng iOS. Đây là những gì các ảnh chụp màn hình hiện tại trông như thế nào:

Nó tuân theo tiêu đề và thiết lập phụ đề tiêu chuẩn, thực hiện tốt công việc giải thích các câu chuyện của người dùng ứng dụng. Chúng tôi không quan tâm đến việc thiết kế lại thương hiệu hoặc giao diện người dùng, vì vậy chúng tôi sẽ cố gắng giữ cho chúng nhất quán trong thiết kế lại của chúng tôi.

Câu chuyện của người dùng

Trước khi tìm hiểu và bắt đầu thực hiện các thay đổi trực quan, chúng ta cần tìm hiểu người dùng cài đặt HeyDoctor để làm gì và họ đang tìm kiếm gì khi phát hiện ra ứng dụng này.

  1. Nhận đơn thuốc và nạp tiền. Người dùng đang tìm kiếm một cách dễ dàng để nhận đơn thuốc và nạp tiền trực tuyến mà không cần phải đến bác sĩ.
  2. Nhận điều trị bệnh. Người dùng đang tìm kiếm làm thế nào để điều trị bệnh trực tuyến.
  3. Nói chuyện với một bác sĩ chăm sóc chính. Người dùng muốn nói chuyện với bác sĩ nhưng có lẽ họ không thể truy cập vào lúc này do hạn chế về thời gian, tài chính hoặc đi lại.
  4. Làm tất cả những điều này mà không liên quan đến bất kỳ giấy tờ bảo hiểm. Người dùng don lồng muốn liên quan đến bảo hiểm y tế của họ bởi vì họ không có một hoặc đồng thanh toán của họ quá cao.

Ảnh chụp màn hình hay hình thu nhỏ?

Kích thước màn hình đã tăng 72% kể từ khi iPhone ban đầu ra mắt với màn hình 3,5 inch. Kích thước màn hình trung bình của điện thoại thông minh được bán tại Mỹ năm 2018 là 5,5 inch. Màn hình lớn hơn bao giờ hết và các nhà thiết kế sản phẩm không ngừng phát triển để tận dụng không gian có sẵn này. Người ta sẽ nghĩ rằng màn hình lớn hơn sẽ lôi kéo các nhà thiết kế đặt thêm chú thích văn bản vào ảnh chụp màn hình. Nhưng những gì chúng ta đang quan sát thì hoàn toàn ngược lại.

Chúng tôi luôn quan sát thấy rằng ít hơn 4% người dùng đang tìm kiếm một ứng dụng phóng to ảnh chụp màn hình dọc và chỉ có 2% ảnh chụp màn hình ngang được phóng to. Đối với các game thủ, nó thậm chí còn ít hơn chỉ 0,5%. Điều này có lẽ là do lối chơi thường đủ rõ ràng ngay cả từ hình thu nhỏ củaPPPP Fodor

Ít hơn 4% số người đến trang ứng dụng của bạn chạm vào ảnh chụp màn hình của bạn.

Các nhà thiết kế đã bắt đầu chú ý đến số liệu này với rất nhiều ứng dụng coi ảnh chụp màn hình của họ dưới dạng hình thu nhỏ để nhìn trộm thay vì một cái gì đó để chạm vào. Người dùng trong năm 2016 có thể được dự kiến ​​sẽ chạm vào ảnh chụp màn hình để đọc văn bản trong đó. Nhưng với cách bố trí cửa hàng ứng dụng mới và màn hình lớn hơn, người dùng sẽ không chạm vào ảnh chụp màn hình của bạn nữa.

Hãy cùng xem một số thiết kế lại ảnh chụp màn hình từ năm 2016 đến 2018. Lưu ý rằng hầu hết mọi người trong số họ có ít từ và phông chữ lớn hơn.

Phép thuật số 2

78 trong số 100 ứng dụng hàng đầu có năm ảnh chụp màn hình, 13 ứng dụng có bốn ảnh chụp màn hình, 6 ứng dụng có ba ảnh chụp màn hình và 3 chỉ có hai. Là một nhà phát triển, bạn sẽ nghĩ sẽ đi năm ảnh chụp màn hình vì nhiều nội dung sẽ tốt hơn, phải không? Sai lầm.

Chỉ 9% người dùng cuộn qua hai ảnh chụp màn hình đầu tiên. Ảnh chụp màn hình phong cảnh thực hiện kém hơn ở mức 5%. Điều này khiến nó bắt buộc phải thu hút người dùng trong hai ảnh chụp màn hình đầu tiên. Nói cho người dùng của bạn biết ứng dụng của bạn làm gì trong màn hình đầu tiên và mở rộng theo đó trong các ảnh chụp màn hình tương ứng.

Kết quả nghiên cứu của chúng tôi cho thấy rõ rằng bạn PHẢI giải thích lợi ích cốt lõi của ứng dụng của bạn trong hai ảnh chụp màn hình đầu tiên (iOS10, Google Play) hoặc ba (iOS11) nếu bạn đang sử dụng hình ảnh chân dung. Nếu bạn thực sự muốn sử dụng một hình ảnh phong cảnh, bạn đã chỉ có một - Peter Fodor

Hãy cùng kiểm tra hai ảnh chụp màn hình đầu tiên của một số ứng dụng phổ biến.

Các yếu tố UI nổi bật

Người dùng liếc nhìn ảnh chụp màn hình của bạn đang cố gắng đánh giá các chức năng của ứng dụng của bạn. Chú thích văn bản giúp họ hiểu bối cảnh đằng sau màn hình. Các nhà thiết kế đang làm cho người dùng dễ dàng hơn bằng cách làm nổi bật các yếu tố UI mà chú thích văn bản đang cố gắng giải thích.

Chúng ta hãy xem xét một số ví dụ.

Học

  1. Giải thích câu chuyện người dùng quan trọng nhất của ứng dụng của bạn trong hai ảnh chụp màn hình đầu tiên. Chỉ 9% người dùng đến danh sách ứng dụng của bạn sẽ cuộn qua hai ảnh chụp màn hình đầu tiên.
  2. Tăng kích thước phông chữ và cắt giảm trên văn bản. Với màn hình lớn hơn, người dùng sẽ có điều kiện để quét và lướt qua ảnh chụp màn hình thay vì chạm vào nó và đọc. Ít hơn 4% người dùng sẽ nhấn vào ảnh chụp màn hình của bạn để đọc nó.
  3. Làm nổi bật các yếu tố UI đại diện cho chú thích văn bản. Nó giúp quét ảnh chụp màn hình dễ dàng hơn và cải thiện khả năng lướt qua màn hình của bạn.

Bây giờ chúng ta đã biết một chút về cách làm cho ảnh chụp màn hình dễ đọc hơn, hãy để bắt đầu áp dụng những phát hiện quan trọng của chúng tôi vào ảnh chụp màn hình HeyDoctor.

Bước 1: Cập nhật iPhone lên các thế hệ mới hơn

Ảnh chụp màn hình HeyDoctor 'đang sử dụng thế hệ iPhone cũ hơn. Mặc dù không phải là một công cụ giảm giá, tôi thích iPhone của mình như các ứng dụng của tôi. Cập nhật và trên fleek (xin lỗi).

Bước 2: Cắt giảm văn bản và làm cho nó dễ đọc hơn

Chúng tôi sẽ cố gắng làm cho chú thích dễ đọc hơn một chút bằng cách nêu các câu chuyện của người dùng theo định dạng súc tích. Chúng tôi cũng sẽ loại bỏ các phụ đề và mô tả để phù hợp với các tiêu đề lớn hơn.

Ảnh chụp màn hình thứ ba hiển thị trang cài đặt ứng dụng trong khi chú thích của nó nói về cách ứng dụng không có yêu cầu chính sách bảo hiểm. Hãy để thay thế nó bằng một màn hình phù hợp hơn. Tôi sẽ thay thế nó bằng màn hình đầu tiên bạn nhìn thấy khi bạn cố gắng nhận đơn thuốc trong ứng dụng, gián tiếp ngụ ý rằng bạn không cần một bảo hiểm để bắt đầu.

Bước 3: Đánh dấu các thành phần UI có liên quan

Như chúng ta đã học ở trên, làm nổi bật các yếu tố UI có liên quan tham chiếu các chú thích làm cho chúng dễ nhìn và dễ đọc hơn. Nó cũng giúp người dùng quét ảnh chụp màn hình dễ dàng hơn.

Giao diện người dùng trò chuyện

Hãy cho chúng tôi xem Tinder làm nổi bật giao diện người dùng trò chuyện của họ như thế nào:

Nó khéo léo sử dụng hình ảnh hồ sơ và bong bóng trò chuyện với các yếu tố thương hiệu như màu sắc để mô phỏng giao diện người dùng trò chuyện thực sự của nó.

Chúng ta hãy thử làm một cái gì đó tương tự:

Hãy để chúng tôi chèn tài sản này vào ảnh chụp màn hình:

Tôi đã cố gắng tích hợp thương hiệu HeyDoctor vào các bong bóng trò chuyện. Tôi không cảm thấy cần phải đưa ảnh đại diện vì các bác sĩ mà bạn nói chuyện trong ứng dụng don có một ảnh đại diện.

Thẻ và bóng đổ

Chúng ta hãy xem Uber làm nổi bật các yếu tố UI của họ như thế nào.

Tôi thích cách tối thiểu này để làm nổi bật các yếu tố UI với thẻ và thả bóng. Chúng tôi sẽ sử dụng phong cách này để nhấn mạnh một số yếu tố trong ảnh chụp màn hình của chúng tôi.

Tôi đã quyết định thay đổi chú thích bên dưới điện thoại để người dùng thấy phần tử UI được tô sáng trước khi họ đọc chú thích.

Bước 4: Thay đổi mỹ phẩm

Chúng tôi đã thực hiện nhiều thay đổi cho ảnh chụp màn hình của mình để tối ưu hóa cho khả năng quét được. Bây giờ hãy để chúng tôi làm cho nó trông tốt hơn. Thiết kế hình ảnh tốt có thể là một sự thu hút đáng kinh ngạc cho người dùng và nó không nên bị bỏ qua trong khi thiết kế lại ảnh chụp màn hình.

Thêm màn hình phối cảnh

Màn hình Isometric trông hiện đại và bóng bẩy. Bạn có thể thấy các điện thoại isometric gần như ở mọi nơi từ Apple Quảng cáo hoàn hảo quảng cáo sản phẩm đến các mô hình được đánh bóng cao trên Dribble (thật điên rồ khi nghĩ rằng Dribble ban đầu được bắt đầu như một trang web để chia sẻ các nguyên mẫu thiết kế WIP cấp thấp!)

Tôi đã đưa ra một vài quan điểm từ các màn hình có sẵn cho chúng tôi.

Tôi sẽ chọn mockup phối cảnh đầu tiên và chia nó thành hai ảnh chụp màn hình vì chúng tôi chỉ có 3 ảnh chụp màn hình vào lúc này và chúng tôi có thể thêm tối đa 5 trong App Store.

Tôi đã thêm chú thích vào trang đầu tiên - Bác sĩ cá nhân của bạn. Dễ đọc, tóm tắt những gì ứng dụng làm và súc tích.

Thay đổi Gradient nền

Sự tương phản giữa nền và tiền cảnh là một chút quá khắc nghiệt đối với tôi ngay bây giờ. Hãy để chúng tôi thay đổi nó thành một màu xanh nhạt hơn.

Chúng tôi sẽ tạo một gradient với các màu mới mà chúng tôi chọn.

Hãy để xem cách nhìn này trong ảnh chụp màn hình của chúng tôi.

Hoàn hảo!

Tôi sẽ thêm một số đường vân ngay bên dưới văn bản để nó đóng vai trò là điểm khác biệt giữa văn bản và điện thoại.

Tôi đã có thể chụp được một vectơ isometric mát mẻ từ trang web. Hãy để sử dụng nó để làm cho ảnh chụp màn hình cuối cùng.

Thiết kế cuối cùng

Trước

Sau

Phần kết luận

Nói chung, chúng tôi chỉ thực hiện hơn bốn điều chỉnh nhỏ, lặp đi lặp lại. Nhưng kết quả cuối cùng là những ảnh chụp màn hình dễ nhìn lướt qua và cảm thấy hiện đại. Hơn nữa, không có điều chỉnh nào trong số này đòi hỏi một kỹ năng nghệ thuật bẩm sinh. Nghiên cứu một số ứng dụng nhỏ trong App Store đã giúp chúng tôi biết những vấn đề cần tìm kiếm.

Cảm ơn vì đã đọc! Đây là một dự án cuối tuần thú vị đối với tôi và tôi rất thích viết về nó ở đây. Hy vọng, bài đăng này đã cho bạn cái nhìn sâu sắc về tình trạng ảnh chụp màn hình trong cửa hàng ứng dụng. Vui lòng cung cấp bất kỳ thông tin phản hồi hoặc hỏi bất kỳ câu hỏi mà bạn có trong phần ý kiến ​​dưới đây.