Taranabilir Uygulamayı Tasarlama Screenshots

HeyDoctor’un App Store'unu Yeniden Tasarlamak Screenshots

Hadi oyun oynayalım. Telefonunuzdan gerçekten sevdiğiniz bir uygulamayı seçin. Sen bu uygulamanın yaratıcısı ve yatırımcılardan para toplamak için arıyoruz. Uygulamanızı VC’lere atmak için bir dakikanız var. Para kapmak için kalmış, ancak 60 saniye içinde onları ikna edebiliyorsanız. Bunu nasıl yapıyorsun? Uygulamanın ne yaptığını açıklıyor musunuz? Uygulamanın rakiplerine kıyasla nasıl benzersiz olduğunu anlatıyor musunuz? Kullanıcı deneyiminin ne kadar iyi olduğunu gösteriyor musunuz?

App Store'daki bir kullanıcının uygulamanızı indirmek isteyip istemediği konusunda karar vermesi ortalama 7 saniye alır. 25.000 ziyaretçi ve 10.000 kurulum içeren indirme kararları üzerine bir araştırma çalışması, en üst sıralarda yer alan ve en üst sıralarda yer alan derecelendirme ekran görüntülerini aldı.

İnsanların bir mağaza listesine harcadıkları ortalama sürenin 7 saniye olduğunu keşfettik. Gerçek şu ki, insanların büyük çoğunluğu daha erken sayfadan ayrılıyor. Meşgul kullanıcılar biraz daha uzun süre takılırlar, ancak hepsi aynı işlemi takip eder: simgesini kontrol edin, ilk iki ekran görüntüsünü görüntüleyin ve uygulama açıklamasının ilk satırını tarayın - Peter Fodor, Neden 7 saniye mobil uygulamanızı yaratabiliyor veya kırabiliyor?

Ekran görüntüleri, uygulamanızın kullanıcı hikayelerinin bir aynasıdır ve kullanıcı deneyimini yansıtır. Incipia'daki iyi insanlar tarafından toplanan verileri kullanarak en iyi 100 uygulamayı ve ekran görüntülerini çalıştım. Buradaki çoklu çalışmalardan elde edilen kilit bulgulara referans vereceğim.

Odaklanılan uygulama: HeyDoctor

HeyDoctor, kullanıcıların birinci basamak doktorunu ziyaret etmeden çevrimiçi tıbbi reçeteler almalarını sağlayan bir uygulamadır. HeyDoctor, doğum kontrolünden, saç uzamasına, idrar yolu enfeksiyonu tedavilerine, laboratuar raporlarına ve daha fazlasına kadar olan ilaçlar için reçeteler yazabilir ve yeniden alabilir. Ayrıca akne tedavisi, İYE, soğuk algınlığı tedavisi ve daha fazlası gibi birinci basamak vakalarda da tedavi alabilirsiniz. HeyDoctor’un mobil uygulaması, 4.7 yıldız derecelendirmesi 122 yorumla App Store'da iyi karşılandı.

HeyDoctor’un ekran görüntülerini yeniden tasarlayacağız ve taranabilir ekran görüntülerini öğreneceğiz.

feragat

Lütfen HeyDoctor'da çalışmadığımı ve bu vaka çalışmasında ifade edilen görüşlerin kesinlikle benim olduğumu unutmayın. Tasarımcılar, ürün yöneticileri ve HeyDoctor'da tasarım çalışmasını içeren kilit kararlar almaktan sorumlu olan herkesin aksine, kullanıcı tabanındaki analitiklere erişimim yok ve tam resme bakmıyor olabilirim. Tasarım kararları iş hedeflerine, kaynak önceliklendirmesine veya teknik kısıtlamalara dayanabilir. Bu nedenle, istenmeyen herhangi bir örnek olay incelemesi ayrıntılı değildir ve kesinlikle HeyDoctor'un mevcut ekran görüntülerini bırakıp yeniden tasarlamamı benimsemesini önermiyorum.

“Uygulamanı düzleştir” - bazı adamlar. Meme kredisi: @parasmael

Güncel Tasarım

HeyDoctor’un iOS uygulaması üzerinde çalışıyor olacağız. İşte mevcut ekran görüntülerinin görünümleri:

Uygulamanın kullanıcı hikayelerini açıklamada iyi bir iş çıkaran standart başlık ve altyazı kurulumunu izler. Markayı veya kullanıcı arayüzünü yeniden tasarlamakla ilgilenmiyoruz, bu yüzden onları yeniden tasarımımızda tutarlı tutmaya çalışacağız.

Kullanıcı hikayeleri

Kazmadan ve görsel değişiklikler yapmaya başlamadan önce, kullanıcıların HeyDoctor'u neye yüklediklerini ve bu uygulamayı keşfettiklerinde ne aradıklarını öğrenmemiz gerekir.

  1. Reçeteleri ve Yedekleri Alın. Kullanıcılar reçetelerini almak için kolay bir yol bulmayı ve doktora gitmeye gerek kalmadan çevrimiçi olarak tekrar doldurmalarını istiyor.
  2. Hastalık için tedavi alın. Kullanıcılar, hastalıklarını online olarak nasıl tedavi edebileceklerini araştırıyor.
  3. Birinci basamak doktoruyla görüşün. Kullanıcılar bir doktorla konuşmak ister, ancak muhtemelen zaman, finansal ya da işe alım kısıtlamaları nedeniyle şu anda birini ziyaret edemezler.
  4. Bunları, herhangi bir sigorta evrakı gerektirmeden yapın. Kullanıcılar sağlık sigortalarına dahil olmak istemiyorlar, çünkü bunlardan birine sahip değiller ya da kredileri çok yüksek.

Ekran görüntüleri veya küçük resimler?

Orijinal ebatlar 3.5 inçlik ekranla piyasaya sürüldüğünden beri ekran boyutları% 72 arttı. ABD'de 2018'de satılan akıllı telefonların ortalama ekran boyutu 5,5 inç. Ekranlar her zamankinden daha büyük ve ürün tasarımcıları bu ekstra kullanılabilir alandan yararlanmak için sürekli gelişiyor. Birincisi, daha büyük ekranların tasarımcıları ekran görüntülerine daha fazla metin başlığı koymaya ikna edeceğini düşünüyor. Fakat gözlemlediğimiz şey tam tersi.

Bir uygulama arayan kullanıcıların% 4'ünden daha azının portre ekran görüntülerini ve sadece% 2 genişletilmiş manzara ekran görüntülerini büyütdüğünü sürekli gözlemledik. Oyuncular için sadece% 0,5 ile daha da düşüktür. Bunun nedeni muhtemelen oyunun küçük resimlerden bile yeterince açık olması —Peter Fodor

Uygulama sayfanıza gelen kişilerin% 4'ünden azı ekran görüntülerine hafifçe vurun.

Tasarımcılar, bu metriğe, ekran görüntülerini dokunacak bir şey yerine göz atmak için küçük resimler olarak davranan birçok uygulamayla birlikte gözetmeye başladı. 2016'daki kullanıcıların, içindeki metni okumak için ekran görüntüsüne dokunmaları beklenebilir. Ancak, yeni uygulama mağazası düzeni ve daha büyük ekranlarla, kullanıcılar artık ekran görüntülerine dokunmuyor.

2016'dan 2018'e kadar bazı ekran görüntülerine bakalım. Neredeyse her birinin daha az kelime ve daha büyük yazı tiplerine sahip olduğuna dikkat edin.

Sihirli Sayı 2

En iyi 100 uygulamanın 78'inin beş ekran görüntüsü, 13 uygulamanın dört ekran görüntüsü, 6 uygulamanın üç ekran görüntüsü ve 3'ünün yalnızca iki ekranı var. Bir geliştirici olarak, daha fazla içerik daha iyi olduğu için beş ekran görüntüsü almayı düşünürdünüz, değil mi? Yanlış.

Kullanıcıların yalnızca% 9'u ilk iki ekran görüntüsünü kaydırıyor. Manzara ekran görüntüleri% 5 daha kötü performans gösteriyor. Bu, kullanıcının ilk iki ekran görüntüsünün kendisine cazip gelmesini zorunlu kılar. Kullanıcılarınıza ilk ekranda uygulamanızın ne yaptığını söyleyin ve ilgili ekran görüntülerinde buna genişletin.

Araştırmamızın bulguları, portre resimler kullanıyorsanız uygulamanızın temel yararını ilk iki (iOS10, Google Play) veya üç (iOS11) ekran görüntüsünde açıklamanız gerektiğini açıkça ortaya koymaktadır. Gerçekten bir manzara görüntüsü kullanmak istiyorsanız, sadece bir tane var - Peter Fodor

Bazı popüler uygulamaların ilk iki ekran görüntüsünü inceleyelim.

Vurgulanan UI Öğeleri

Ekran görüntülerine bakan kullanıcılar, uygulamanızın işlevselliğini ölçmeye çalışıyor. Metin başlıkları, ekranların arkasındaki içeriği anlamalarına yardımcı olur. Tasarımcılar, metin başlığının açıklamaya çalıştığı UI öğelerini vurgulayarak kullanıcılar için daha da kolay hale getiriyor.

Bazı örneklere bakalım.

Eğitimler

  1. Uygulamanızın en önemli kullanıcı hikayesini ilk iki ekran görüntüsünde açıklayın. Uygulama girişinize gelen kullanıcıların yalnızca% 9'u ilk iki ekran görüntüsünü geçecek.
  2. Yazı tipi boyutunu artırın ve metni kısaltın. Daha büyük ekranlarda, kullanıcılar ekrana dokunup okumak yerine ekran görüntüsünü taramak ve göz atmak için şartlanırlar. Kullanıcıların% 4'ünden azı okumak için ekran görüntülerine dokunacak.
  3. Metin başlıklarını temsil eden UI öğelerini vurgulayın. Ekran görüntülerini taramayı kolaylaştırır ve ekran görüntüsünün bakış açısını geliştirir.

Artık ekran görüntülerini nasıl daha okunaklı hale getireceğimiz hakkında biraz bilgi sahibi olduğumuz için, temel bulgularımızı HeyDoctor’un ekran görüntülerine uygulamaya başlayalım.

Adım 1: iPhone'u yeni nesillere güncelleyin

HeyDoctor’un ekran görüntüleri eski nesil iPhone'ları kullanıyor. Bir anlaşma kırıcı olmasa da, iPhone'larımı uygulamalarım gibi seviyorum. Güncellendi ve fleek'te (üzgünüm).

Adım 2: Metni kısaltın ve okunabilir hale getirin

Kullanıcı hikayelerini kısa ve öz bir biçimde göstererek başlıkları biraz daha okunaklı hale getirmeye çalışacağız. Ayrıca daha büyük başlıkları alabilmek için altyazı ve açıklamalardan da uzak duracağız.

Üçüncü ekran görüntüsü, uygulamanın nasıl bir sigorta poliçesi gerektirmediği hakkında konuşurken, uygulamanın ayarlar sayfasını gösterir. Daha alakalı bir ekranla değiştirelim. Uygulamada reçete almaya çalıştığınızda gördüğünüz ilk ekranla değiştireceğim, dolaylı olarak başlamak için bir sigortaya ihtiyacınız olmadığını ima ediyorum.

Adım 3: İlgili Kullanıcı Arabirimi Öğelerini Vurgulayın

Yukarıda öğrendiğimiz gibi, başlıkları referans alan ilgili UI öğelerini vurgulamak onları daha gözle görülür ve okunabilir hale getirir. Ayrıca kullanıcının ekran görüntüsünü daha kolay taramasına yardımcı olur.

Sohbet kullanıcı arayüzü

Tinder'in sohbet kullanıcı arayüzünü nasıl vurguladığını görelim:

Gerçek sohbet kullanıcı arayüzünü taklit etmek için akıllıca profil resimleri kullanır ve renkler gibi marka unsurları olan sohbet balonları kullanır.

Benzer bir şey yapmayı deneyelim:

Bu varlığı ekran görüntüsüne ekleyelim:

HeyDoctor’un markasını sohbet balonlarına entegre etmeye çalıştım. Profil resimleri ekleme gereği duymuyorum çünkü uygulamada konuştuğunuz doktorların profil resmi yok.

Kartlar ve Alt Gölge

Uber'in UI Öğelerini nasıl vurguladığına bir bakalım.

UI öğelerini kartlarla ve alt gölgelerle vurgulamanın bu minimal yolunu seviyorum. Bu tarzı, ekran görüntülerimizdeki bazı unsurları vurgulamak için kullanacağız.

Altyazıyı telefonun altından kaydırmaya karar verdim, böylece kullanıcı, altyazıyı okumadan önce vurgulanan UI öğesini görür.

Adım 4: Kozmetik Değişiklikler

Taranabilirliği optimize etmek için ekran görüntülerimizde birçok değişiklik yaptık. Şimdi daha iyi görünmesini sağlayalım. İyi görsel tasarım, kullanıcılar için inanılmaz bir cazibe olabilir ve ekran görüntülerini yeniden tasarlarken göz ardı edilmemesi gerekir.

Perspektif Ekranları Ekleyin

İzometrik ekranlar modern ve cilalı görünüyor. Apple’ın mükemmel şekilde oluşturulmuş ürün reklamlarından Dribble’daki son derece parlak maketlere kadar izometrik telefonları hemen hemen her yerde görebilirsiniz (Dribble’ın düşük seviye WIP tasarım prototiplerini paylaşmak için bir web sitesi olarak başladığını düşünmek çılgınca!)

Elimizdeki ekranlardan birkaç bakış açısı getirdim.

İlk bakış açısını seçip iki ekrana ayıracağım çünkü şu anda sadece 3 ekran görüntüsümüz var ve App Store'da 5 taneye ekleyebiliriz.

İlk sayfaya bir başlık ekledim - “Kişisel doktorunuz”. Okuması kolay, uygulamanın ne yaptığını ve özlü özetler.

Arkaplan Degradesini Değiştir

Arka plan ile ön plan arasındaki karşıtlık şu anda benim için biraz zor. Onu daha açık mavinin gölgesine çevirelim.

Seçtiğimiz yeni renklerle gradyan yapacağız.

Bunun ekran görüntülerimizde nasıl göründüğünü görelim.

Mükemmel!

Metnin hemen altına bazı sırtlar ekleyeceğim, bu sayede metin ile telefon arasındaki fark olarak hareket ediyor.

Ağdan serin bir izometrik vektör yakalayabildim. Son ekran görüntüsünü oluşturmak için onu kullanalım.

Final Tasarımları

Önce

Sonra

Sonuç

Sonuçta, sadece dört üzerinde küçük, yinelenen tweaks yaptık. Ancak nihai sonuç, gözden geçirilmesi ve modern hissetmesi kolay ekran görüntüleri. Dahası, bu tweaks'lerin hiçbiri doğuştan bir sanatsal beceri gerektirmiyordu. App Store'da bir avuç uygulamayı incelemek, hangi sorunları arayacağımızı bilmemize yardımcı oldu.

Okuduğunuz için teşekkürler! Bu benim için eğlenceli bir haftasonu projesiydi ve burada yazmaktan zevk aldım. Umarım, bu yazı size uygulama mağazasında ekran görüntüleri durumu hakkında bir fikir verdi. Aşağıdaki yorumlar bölümünde herhangi bir geri bildirimde bulunmaktan veya sorularınızı sormaktan çekinmeyin.