Web Uygulaması Ana Sayfası Tasarlama: Örnekler, İpuçları ve Peeves
Web, bir sosyal ağa bağlanmanıza, market listeleri oluşturmanıza, büyük projeleri yönetmenize, kimin çay yapacağına ve hayal edebileceğiniz her çılgın göreve karar vermenize yardımcı olan uygulamalarla tamamen aşırı doygun.
Tüm bu rekabet ile, ziyaretçileri muhtemelen uygulamanızın saman arasında meşhur bir iğne olduğu konusunda nasıl ikna edebilirsiniz? Bugün, hangi stratejileri taklit edip hangilerinden kaçınacağımızı öğrenip öğrenemeyeceğimizi görmek için bazı gerçek örneklere bakacağız.
Uygulamanızın Ana Sayfası Çok Önemli
Bir web uygulaması oluşturmak için tonlarca zaman, para ve çaba harcadınız. Orman yangını gibi yakalayacağınızdan emin olduğunuz birinci sınıf bir girişim. Sadece bir tane yakalama var, insanları denemeye ikna etmelisin.
Web uygulamanız ne kadar iyi olursa olsun, yine de insanları “kaydol” düğmesine tıklamaya ikna eden sağlam satış taktiklerine sahip olmanız gerekir. Hizmet tamamen ücretsiz ve tonlarca özellik sunsa bile, bu dönüşümleri kazanmak için gerçekten çalışmalısınız.
Asla bir kullanıcı ana sayfanıza geldiği için sunduğunuz ürünle gerçekten ilgilendiğini ve bu nedenle daha ileri gitmek için sadece hafif bir dürtüye ihtiyaç duyduğunu düşünmeyin. Oranlar, sadece nereye gidecekleri konusunda belirsiz bir kavramla bağlantı kurdular ve onları çekmezseniz saniyeler içinde başka bir siteye geçebilecekleri hassas bir aşamadalar.
Web uygulaması ana sayfanız en değerli pazarlama araçlarınızdan biridir. Bir şeyi hızlı bir şekilde birlikte kaldırmaya ve bunun yerine en iyi çabanızı ortaya koyma isteğine karşı koy. Neler öğrenebileceğimizi görmek için bazı örneklere bakalım.
İpucu: Tasarımı Basit ve Mesajı Güçlü Tutun
İlk örneğimiz Kroud adlı yeni bir hizmetten geliyor. Sitenin ekranın üst kısmındaki bölümüne bir göz atalım.
Bu sayfa hakkında sevdiğim çok şey var. Her şeyden önce, çok basit ve odaklanmış. Hizmetin hayatınızı nasıl değiştireceğine dair boş iddialarla boğulmaz, ayrıca sitenin ne olduğu hakkında çalıların etrafında da dövülmez. Kendini iyi tanımlamayan bir sayfadan daha kötü bir şey yoktur. Uygulamanızın beş saniye içinde ne yaptığını anlatamazsam, devam ediyorum.
Kroud, karmaşık bir hizmeti ilişkilendirme görevini, aynı zamanda güçlü bir harekete geçirici mesaj olarak da hizmet eden açık bir mesaja dönüştürür: “Saniyeler içinde etkileşimli bir SSS sayfası oluşturun.” Bu satır, sayfayı yüklediğimde gördüğüm ilk şeylerden biri ve sitenin tam olarak ne yaptığını hemen aktarıyor.
Büyük Düğme
Kroud'dan öğrenebileceğimiz başka bir şey, büyük, cesur kayıt düğmelerinin iyi bir şey olduğudur! İşte gerçek boyuttaki Kroud düğmesi.
Bu düğme çok büyük ve bastığınızda ne olacağı konusunda çok net: “Kroud'u başlat”, ikincil mesajı “Ücretsiz!”. Bu düğmenin dikkatinizi yalnızca boyutla değil, renkle de nasıl çektiğine dikkat edin. Diğer içeriklerden çok daha parlak, gözlerin hemen ona çekiliyor.
İpucu: Ekran görüntüleri bir zorunluluktur!
Web uygulaması ana sayfanızın iki temel hedefi vardır: kullanıcıları ürününüz hakkında eğitmek ve onları denemeye ikna etmek. Bunlar, gezegendeki hemen hemen her şirketten pazarlama ve reklamcılıkta gördüğünüz hedeflerin aynısıdır.
Yeni bir Corvette için bir dergi reklamı veya web sitesi düşünün. Sizce bu sayfa neye benzeyecek? Bir milyon olası tasarım var, ancak bir şey muhtemelen sabit kalacaktı: arabayı görürdünüz. Korvetler iyi bir tasarım mirasına sahipler ve son başarılarını göstermenin en iyi yolunun, tüm ihtişamıyla bir fotoğrafını göstermek olduğunu biliyorlar. Kim onu görmeden bir spor araba almaya ikna olabilir? Spor otomobili bir Corvette değil, daha önce hiç kimsenin duymadığı bir şey olsaydı, bu daha da geçerli olurdu.
Bu, web uygulaması ana sayfanız için bir metafor olarak çalışır. Web uygulamaları düzinelerce bir kuruş ve hiç kimse seninkini duymadı. Kötü tasarım becerilerinizden utanmadıkça, insanlar kaydolmak için zaman ayırmadan önce hizmetin nasıl görüneceğini tam olarak görmek isteyeceklerdir.
Freckle halkı bunu iyi biliyor ve beş ekran görüntüsü dizisiyle sayfalarını seçmeyi seçti.
Bunların bazılarının büyük bölümleri kapsanmasına rağmen, bir bütün olarak görüntü size hizmetin nasıl göründüğüne dair iyi bir bakış sunuyor.
Ekran Görüntüsü Olarak Özellikler
Web uygulaması ana sayfa tasarımındaki mevcut trend, ana sayfanızdaki özellikleri küçük simgelerle göstermektir. Bu, sayfanın estetik değerini gerçekten artıran ve büyük kopya bloklarını parçalamaya yardımcı olan harika bir fikirdir. İşte Ballpark Faturalandırma'dan bir örnek.
Simgeler metinden daha iyi olsa da, gerçekten sağlam bir arayüze sahip olmanız durumunda, aslında ekran görüntülerinin çok daha güçlü bir görsel öğe olabileceğini düşünüyorum. Genel simgeler, hizmetinizi doğrudan iletirken, genel simgeler yalnızca kullanıcıların görmeyi bekleyebileceklerinin soyut bir temsilini sunar. Freckle'ın özelliklerini nasıl tartıştığını kontrol edin.
Buradaki mesajlaşma, bunun uygulamada nasıl görüneceğine dair bir görüntü ile nasıl güçlendirildiğini görüyor musunuz? Bu son zamanlarda giderek daha fazla gördüğüm bir trend ve bence bu, önceki nesil web uygulamalarının simge fikrini gerçekten geliştiren iyi bir trend.
Başka bir örnek olarak TodayPulse, temel özelliklerinden üçünü yatay bir ekran görüntüsü şeridinde gösterir:
Peeve: Hayır Ekran Görüntüleri
Ekran görüntülerinin oldukça basit olduğunu ve kimsenin bu hatırlatıcıya ihtiyaç duymadığını düşünebilirsiniz, ancak gerçek, uygulamanın gerçekte nasıl göründüğüne dair en ufak bir ipucu vermeyen sayısız web uygulaması ana sayfası olmasıdır.
Bu sayfalar, aşağıdaki Wordfaire gibi oldukça çekici olsa bile, bir önizleme göremediğim için denememin olasılıkları çok daha az.
Eski atasözü “bir resim bin kelimeye bedeldir” bu alanda gerçekten kanıtlanmıştır. Wordfaire ana sayfasındaki yedi paragrafı okumanın hiçbir yolu yok. En az beşini ikinci bir düşünce olmadan bir ekran görüntüsü ile takas ederdim.
İpucu: Kullanıcıların Canlı Bir Örnekle Oynamasına İzin Verin
“Satın almadan önce deneyin” kavramı, satıcının başlangıcından beri var olmuştur. Ürünler olduğu sürece devam edecek basit bir kavram. Taahhütler, özellikle de belirsizlik söz konusu olduğunda berbattır. Bir kullanıcının önce web uygulamanızı denemesine izin vererek belirsizlik ortadan kaldırılır.
“Satın almadan önce dene” nin ücretsiz hizmetler için bile geçerli olduğunu akılda tutmak son derece önemlidir! Bu kafa karıştırıcı gibi gözüküyor ama gerçekten çok basit. Ücretsiz bir hizmet bile zamanımı yiyor, oldukça değerli bulduğum ve hiçbir şey için ticaret yapmayacağım bir kaynak. Ücretsiz bir web hizmeti için kaydolmak hala bir taahhüt gibi geliyor; Ürünü beğeneceğime emin olmadan yapmak istemediğim bir ürün.
Konsept basittir, kullanıcıların tek bir bilgi girmeden uygulamanızın lastiklerini tekmeleyebileceği ve tekmeleyebileceği bir yol oluşturun. Bunu aşağıda Pen.io için çalışırken görüyoruz. Bu, ekran görüntüsü olmayan başka bir sayfadır, ancak bir örneğe bağlantı ekleyerek biraz daha iyi hale getirilmiştir, böylece hizmetten ne elde edebileceğinizi görebilirsiniz.
Yine, Pen.io'nun bunu içermesi harikadır, ancak yürütme, inceleme sayfası bağlantısının bir önizleme ile güçlendirildiği Kroud'da daha güçlüdür.
Peeve: Uzun Turlar
Bazı web uygulamaları, hizmetlerini ayrıntılı olarak açıklayan on dakikalık bir geziye çıkarır. Beni yanlış anlamayın, bilgiler iyi ve eğer bir hizmet için para ödüyorsam, bunu isteyeceğim. Peki bir “ürün turu” gerçekten çok yoğun çalışmalı mıdır?
“Tur atın” yazan bir bağlantıyı tıklarsam, gerçekten yapmak istediğim uygulamayı görmek. 2.000 kelimeden çok daha güçlü bir şekilde tartıştığımız gibi canlı bir örnek, nihayetinde gerçekten denemenize izin verilen noktaya ulaştığınızda nasıl olacağını açıklıyor. Bazı siteler, süreç boyunca size yol gösteren değiştirilmiş “akıllı” canlı bir örnek bile oluşturur. Bu, kullanıcıların gerçekten puan almalarını ve ne istediğinizi görmelerini sağlamanın yanı sıra hizmetinizi denemelerini sağlamak için harika bir yoldur.
Yine, özellikleriniz hakkında rütbe vermek her zaman kötü değildir, ancak kullanıcıların sadece atlayıp düşüncelerini görmelerine izin vermenin önemli olduğunu unutmayın.
Video Ekle
Web uygulamanızı çalışırken göstermek için başka bir fikir, ana sayfaya kısa bir video eklemektir. Bir resim bin kelimeye bedelse, saniyede 15-30 karede bir dakika paha biçilmez! Bir video, örnek ve ekran görüntüleri ile aynı hedefe ulaşır, yalnızca ekran görüntülerinden daha dinamiktir ve serbest biçimli bir test alanından daha yapılandırılmış bir deneyimdir.
Aviary, karmaşık bir fotoğraf manipülasyonu yaratarak görüntü düzenleyicilerinin zaman aralıklarını göstererek bu konuda iyi bir iş çıkarır.
Bir web uygulaması ana sayfası videosunun en sevdiğim uygulamalarından biri Greplin. Burada, sayfayı yüklediğinizde bir video açılır, ancak videoyu birkaç saniye sonra başlatmazsanız, ekran görüntülerinin slayt gösterisine dönüşür.
Peeve: Asla Uygulamayı Göstermeyen Çizgi Filmler
Bazı nedenlerden dolayı, şu anda yapılacak harika şey, bu videolardan birini eğlenceli bir küçük çizgi olarak bir araya getirmektir. Bu genellikle harika bir fikir ama sahip olduğum sorun, sıkıcı küçük animasyondan iki dakika sonra hala uygulamanın aslında neye benzediğine dair hiçbir fikrim yok.
Eksi ve Summify'dan aşağıdaki iki video bunun güzel örnekleridir. Nihayetinde neredeyse uygulamanın resimli bir versiyonunu göstermeye çalışıyorlar, ancak sadece en sonunda ve o zaman bile küçük, soyut bir gözetleme.
Düşünceleri Kapatmak: Başarı için Bir Reçete
Bu makaledeki tüm öneriler, daha önce tartıştığımız web uygulaması ana sayfanızın iki temel hedefini amaçlamaktadır: eğitim ve katılım. İlk olarak, tüm dağınıklığı tasarımınızdan ayırın ve en önemli unsurlara kadar ısıtın, böylece ziyaretçi dikkat dağıtıcı olmadan hayati bilgilere odaklanabilir.
Mesajlarınızda, uygulamanın ne yaptığı ve kimin için olduğu hakkında cesur bir ifade yapın. Bu son noktayı bugün pek tartışmadık, ancak hedef kitlenizi açıkça belirleyerek daha fazla dönüşüm kazanacağınızı gösteren güçlü bir argüman var. Örnek: “MyCoolWebApp tasarımcıların ve geliştiricilerin istemci ve proje bilgilerini düzenlemelerine yardımcı olur”, “MyCoolWebApp istemci ve proje bilgilerini organize eder” den daha iyidir. Ayrıca, önemli özelliklerin ve ziyaretçilerin neden uygulamayı kullanması gerektiğine dikkat edin.
Mesajlaşmanız kareyi aldıktan sonra, ürününüzü kitlenize sunmaya odaklanma zamanı. Bunu yapmanın üç harika yolu, ekran görüntüleri (eğer sallayabilirseniz birkaç), canlı örnek hesaplar ve video turlarıdır (ürünü gerçekten gösteren tür). Amaç, ürününüzü çevreleyen belirsizlik miktarını azaltmaktır. Ne kadar az belirsizlik olursa, kaydolmaktan o kadar az çekinir.
Tüm bunlar elbette kaliteli bir ürününüz olduğunu varsayar. Arayüzünüz topalsa, elbette, herkesten gizleyin ve bunun yerine sıkıcı, uzun açıklamalara sadık kalın!
