7 basit adımda uygulama tasarımı nasıl yapılır

Yüklenen uygulamaların neredeyse yarısı ilk 30 gün içinde — çoğu zaman da indirildiği gün — kaldırılıyor. Kullanıcıların vasat uygulamalarla uğraşacak sabrı yok. Mükemmellik arıyorlar ve başka hiçbir şeyle yetinmiyorlar.

Bir uygulama tasarlıyorsanız, bir kullanıcının sorununu dikkatlice temiz ve gezinmesi kolay bir kullanıcı deneyimine dönüştürmeniz gerekir — kusursuz akış, yapı ve görsel hiyerarşi ile. Bundan daha azı kaldırılmaya mahkûmdur. 

Bu eğitici rehberde, kullanıcı sorununu tanımlamaktan dosyaları bir geliştiriciye teslim etmeye kadar uygulama tasarım sürecini adım adım ele alacağız. Sonunda, kullanıcıların seveceği bir uygulama tasarımı nasıl yapılır öğrenmiş olacaksınız.

Watch on youtube

How to Design an App

1. Özelliklerle değil, sorunla başlayın

İlk adım olan ürün keşfi, uygulama tasarım sürecinin en önemli parçalarından biridir. Uygulamanızın hedef kitleniz için hangi sorunu çözmeye çalıştığını düşünün. Hedef kitlenizin hangi hayal kırıklığı veya karşılanmamış ihtiyaçlarla boğuştuğunu ve nasıl yardımcı olabileceğinizi belirleyin.

Şunları belirlemeniz gerekir:

• Ana sorun ve kullanıcıların bugün bunu nasıl çözdüğü: Hedef kitlenizi çileden çıkaran sorun nedir? Bunu her gün mü yoksa yalnızca ara sıra mı yaşıyorlar? Sorun nerede ortaya çıkıyor — işte, evde mi yoksa yolda mı? Bu sorunu çözmek için şu anda ne tür çözümler kullanıyorlar ve uygulamanız neden daha iyi bir seçenek olacak? Mevcut yaklaşımlarının hangi yönünün zorluk yarattığını ve bu süreci nasıl daha kolay, daha sorunsuz veya daha hızlı hale getirebileceğinizi düşünün.
• Hedef kitle ve önem verdikleri şeyler: Hedefleyeceğiniz başlıca kullanıcılar kimler? Bir uygulamayla ulaşmak isteyecekleri hedefleri düşünün. Ayrıca teknik bilgi düzeylerini de anlamanız gerekir.
• Hedef kitleniz için istenen sonuç: Uygulamanızı kullanmaya başladıklarında, hedef kitleniz neyi daha kolay ve etkili bir şekilde yapabilmeli? Zaman veya para tasarrufu ya da manuel hataların azaltılması gibi faydaları belirleyin.

Sorun ve hedef kitleniz hakkındaki varsayımlarınızı biraz araştırma yaparak doğrulamayı unutmayın. Potansiyel kullanıcılarla konuşabilir, benzer uygulamalara yapılan müşteri yorumlarını okuyabilir, rakip ürünleri inceleyebilir ve arama davranışını gözden geçirebilirsiniz. Çözmeye çalıştığınız sorunun, özel bir uygulama çözümünü haklı çıkaracak kadar acil ve önemli olduğuna dair net kanıtlara sahip olmanız önemlidir. 

2. Kullanıcı akışını ve ekran listesini haritalandırın

Sonraki adım, uygulamanızın belirlenen sorunu nasıl çözeceğini ana hatlarıyla belirlemektir. Uygulamanın temel görevini ve bunu gerçekleştirmek için en kısa, en net yolu — açılış ekranından başlayarak — bulun. 

Yapmanız gerekenler şunlardır:

• Kullanıcı yolculuğunu haritalandırın: Temel görevi tamamlamak için kullanıcının vermesi gereken kararlar veya seçmesi gereken seçenekler dahil olmak üzere, atması gereken her adımı yazın. Ayrıca kullanıcı ana görevi tamamlamadan önce, sırasında ve sonrasında neler olduğunu da düşünmeniz gerekir. Tamamlamaları gereken ikincil görevler de var mı?
• Kullanıcı yolculuğunun varyasyonlarını düşünün: Kullanıcı yolculuğa farklı yerlerden, örneğin uygulama ana ekranından veya bir bildirimden girebilecek mi? Bu, yolculuğu herhangi bir şekilde değiştirecek mi? Ayrıca, başarısız abonelik ödemeleri veya yolculuğun ortasında internet bağlantısının kesilmesi gibi ortaya çıkabilecek yüksek öncelikli uç durumları da düşünmeniz gerekir.
• Bir ekran listesi oluşturun: Kullanıcı yolculuğunun her adımı için her bir uygulama ekranının nasıl görüneceğini belirleyin; örneğin giriş, ana sayfa, arama, sonuçlar, ödeme ve onay ekranları gibi. Kullanıcıların yapmaya çalıştıkları işlemleri tamamlayabilmeleri için her ekranda hangi bilgilerin bulunması gerektiğini düşünün. Ekran listesini düzenlemeyi ve zorluk yaratan gereksiz adımları kaldırmayı unutmayın. 

Bu adımda dikkat edilmesi gereken bir nokta özellik şişkinliğidir. Olmazsa olmaz özellikleri olsa iyi olur türü özelliklerden ayırın ve uygulamayı nasıl verimli ve kullanıcılarınızın sorununa odaklı hale getireceğinizi belirleyin. Ek özellikler heyecan verici görünebilir, ancak kullanıcılar için beklenmedik zaman, enerji ve zorluk katabilir. Uygulamanızı çözmeye çalıştığınız temel soruna odaklı tutun.

3. Platformunuzu ve yerel tasarım dilinizi seçin

UX tel çerçeve rehberlerini veya mobil UI tasarım eğitimlerini incelemeye başlamadan önce, platformunuzu ve yerel tasarım dilinizi seçmelisiniz. Seçtiğiniz platform(lar), uygulamanın nasıl görüneceğini ve nasıl davranacağını etkiler. Bu kararı şimdi vererek, genel bir mobil kullanıcı arayüzü oluşturmak yerine ekranları özellikle o platform (veya birden fazla platform) için tasarlayabilirsiniz.

Seçenekleriniz şunları içerir:

• Apple iOS: Apple için tasarım yaparken, Human Interface Guidelines ve Apple Design Resources kaynaklarına başvurun — her ikisi de düzen, gezinme, tipografi ve daha fazlası gibi alanları kapsar. Özellikle düğmeler, geçiş anahtarları, menüler ve diğer önemli gezinme özellikleri söz konusu olduğunda, kullanıcıların en baştan itibaren uygulamanıza aşinalık ve rahatlık hissetmeleri için uygulamanızın diğer Apple uygulamalarına benzer hissettirmesi önemlidir.
• Google Android: Google ekosistemini tercih ediyorsanız, stiller, temalar ve tasarım kaynakları hakkındaki resmi bilgiler için Google’ın Android Tasarım ve Planlama rehberine göz atın. Gezinme, düğmeler, kartlar ve diğer önemli uygulama bileşenleri için Material Design 3 ve yerleşik desenleri takip edin. Hem kompakt hem de daha büyük ekranlarda çalışan uyarlanabilir düzenler planlamayı unutmayın.
• Platformlar arası uygulama tasarımı: Yalnızca tek bir işletim sistemi için tasarım yapmak yerine birden fazla işletim sistemini hedeflemek istiyorsanız, kullanıcı deneyiminin hangi bölümlerinin platformlar arasında tutarlı kalacağını (renkler ve yazı tipleri gibi) ve hangi bölümlerinin farklılaşacağını belirlemeniz gerekir. Gezinme, kontroller ve izinler gibi takip etmeniz gereken bazı platforma özgü kurallar olabilir. Ayrıca, platforma özgü aşinalığa karşı marka tutarlılığını da göz önünde bulundurmanız ve kullanıcıların uygulamanızı en baştan rahatça kullanabilmelerini sağlamak için hangi yönlerin platforma özgü olması gerektiğini belirlemeniz gerekir.

4. Düşük çözünürlüklü tel çerçeveler oluşturun

Ardından, ikinci adımda oluşturduğunuz ekran listesine dayanarak düşük çözünürlüklü tel çerçeveler — esasen her uygulama ekranının bir iskeleti — oluşturun. Her ekranda hangi bilgilere ihtiyacınız olduğunu, bunların nereye yerleştirilmesi gerektiğini, kullanıcının nasıl işlem yaptığını ve kullanıcıların ekranlar arasında nasıl geçiş yaptığını düşünün.

Henüz tasarım, görseller, renkler ve markalaşma konularına girmiyoruz. Şu anda tel çerçeveleriniz basit gri çizgiler, kutular ve yer tutucu metinlerden oluşacak. Buradaki amaç yalnızca düzeni ve işlevselliği haritalandırmak ve kullanıcının her ekranla nasıl etkileşim kuracağını belirlemektir. Sonraki adımlarda yaratıcılığınızı sergileme fırsatınız olacak.

Düşük çözünürlüklü tel çerçevelerinizde odaklanmanız gerekenler şunlardır:

• UX’in altın kurallarını izleyin: Her ekrana baktıklarında, kullanıcılar üç sorunun yanıtını hemen bilmelidir: Neredeyim? Burada ne yapabilirim? Sırada ne var? Bunları hızlıca yanıtlayamıyorlarsa, ekran işini yeterince iyi yapmıyor demektir. Her şeyden önce netlik ve sadeliğe odaklanın.
• Uygulama için en iyi gezinme desenini belirleyin: Çoğu uygulamada ana sayfa, profil, rezervasyonlar ve arama gibi üç ila beş üst düzey hedef bulunur. Peki kullanıcılar bir uygulama bölümünden diğerine nasıl geçecek? Gezinme çubuğunu ekranın üst kısmına mı yoksa alt kısmına mı yerleştireceksiniz? Neye karar verirseniz verin, tutarlılığı koruduğunuzdan emin olun. Google’ın Material Design gezinme çubuğu rehberi yararlı bir kaynaktır.
• Dokunma hedeflerini erişilebilir hale getirin: Dokunma hedefi çok küçük olduğu için bir uygulamada hiç yanlış düğmeye bastığınız oldu mu? Bu, kullanıcılar için son derece sinir bozucudur; bu nedenle düğmeler ve diğer etkileşimli öğeler, doğru bir şekilde dokunulabilecek kadar büyük olmalıdır. Apple, dokunma alanlarının 44 x 44 px olmasını, Android ise 48 x 48 dp olmasını önerir. Birden fazla dokunma hedefi birbirine yakınsa, her hedef arasında yeterli boşluk olduğundan emin olun.

Tel çerçeveler hazır olduğunda, kullanıcıların yolculuklarını kolayca tamamlayabildiklerinden emin olmak için bunları sırayla gözden geçirin. Bu adımda, uygulamayı tanımayan bir test kullanıcısını sürece dahil etmek faydalı olabilir. Tel çerçeveleri sırayla incelemelerini ve kafa karışıklığı yaratan alanları belirtmelerini isteyin.

5. Tel çerçeveleri tıklanabilir bir prototipe dönüştürün

Gösterişli bir görsel tasarıma zaman ve kaynak harcamadan önce, uygulama akışının hayal ettiğiniz şekilde çalışıp çalışmadığını test edin. Bunu, tel çerçevelerinizi tıklanabilir bir prototipe dönüştürerek yapabilirsiniz. Bu, bir kullanıcının uygulama içinde nasıl hareket ettiğini simüle eden etkileşimli bir modeldir. Herhangi bir arka uç işlevi veya gerçek verisi yoktur; prototip, kullanıcı etkileşimlerini taklit eder ve tam tasarıma veya geliştirmeye geçmeden önce kafa karıştırıcı kullanıcı akışlarını tespit etmenize yardımcı olabilir. 

Yapmanız gerekenler şunlardır:

• Ekranları birbirine bağlayın: Mobil uygulama taslağınızı oluştururken, ekranları birbirine bağlamak ve bir kullanıcının uygulama içinde izleyeceği gerçekçi bir yol oluşturmak için Figma uygulama prototipleme özelliğini kullanın. Deneyebileceğiniz diğer araçlar Sketch ve ProtoPie‘dir. Bu araçlar, düğmeleri, kartları ve diğer gezinme öğelerini uygun ekranlara bağlamanıza olanak tanır; böylece kullanıcı akışının nasıl çalıştığını görebilirsiniz. Bu süreçte, tel çerçevenizdeki her öğeyi tıklanabilir hale getirmek isteyebilirsiniz. İkincil öğelere geçmeden önce ilk olarak temel kullanıcı akışınıza odaklanmak ve bunu doğru yaptığınızdan emin olmak en iyisidir. 
• Prototipinizi test edin: Uygulamayı tanımayan birkaç dış kullanıcının akışı test etmesini sağlayın. Onlara prototip içinde tamamlamaları için “Çarşamba günü için bir randevu al” gibi belirli bir görev verin. Görevin nasıl yapılacağı konusunda herhangi bir talimat vermeyin ve test kullanıcılarının yolculukta kendi başlarına nasıl ilerlediğini gözlemleyin. Tereddüt ettikleri veya hata yaptıkları alanları not edin — bunlar düzeltmeniz gereken alanlar olabilir.

Dış test kullanıcılarının prototip içinde nasıl hareket ettiğine bağlı olarak, etiketleri, gezinmeyi, ekran sırasını ve diğer öğeleri güncellemeniz gerekebilir. Değişiklikleri yaptıktan sonra, bunu daha fazla test kullanıcısıyla deneyin ve prototiple olan davranışlarını kaydedin. Prototip, test kullanıcılarına görevlerini tamamlamaları için sorunsuz bir yolculuk sunana kadar bu süreci tekrarlayın. 

6. Yüksek çözünürlüklü UI stilini uygulayın

Tüm iyileştirme ve test aşamalarından sonra, nihayet prototipi, bir geliştiricinin alıp çalışmaya başlayabileceği kadar ayrıntılı, gösterişli ve görsel olarak çekici bir kullanıcı arayüzüne dönüştürmenin zamanı geldi. 

Bu aşama, renkleri, tipografiyi, görselleri, simgeleri ve görsel hiyerarşiyi uygulayacağınız ve üçüncü adımdaki seçiminize göre platform kurallarını takip edeceğiniz aşamadır. Her şeyden önce, tasarımın her ekranda tutarlı olduğundan emin olun. Bu, kullanıcılara hangi ekranda olurlarsa olsunlar sorunsuz bir deneyim sunacaktır.

Bu aşamada akılda tutulması gereken bazı önemli noktalar şunlardır:

• Tasarım sisteminizi oluşturun: Boşluk, simge stili, renk paleti ve daha fazlası gibi uygulamanızın farklı yönlerine uygulayacağınız görsel kurallar oluşturun. Bu kurallar, geliştiricinizin herhangi bir varsayımda bulunmak zorunda kalmaması için iyi belgelenmelidir.
• Bir bileşen kitaplığı oluşturun: Düğmeler, giriş alanları, başlıklar, sekmeler ve diğer tekrar eden öğeler için standart bileşenler kullanmak, uygulamanız genelinde tutarlılık sağlar. Figma, bileşenler ve bunların varyasyonlarını oluşturma konusunda yararlı bir rehber sunar. Bir bileşen kitaplığı oluşturmak başlangıçta zaman alabilir, ancak buna değer — uzun vadede önemli ölçüde çaba ve zaman tasarrufu sağlar.
• Unutulan durumları unutmayın: Kullanıcıların uygulama içindeki tüm yolları kusursuz olmayacaktır. Boş ekranlar (örneğin kullanıcının hiç mesajı olmadığında), hata durumları (örneğin başarısız bir eylem için) ve yükleme durumları (örneğin kullanıcılar eylemin tamamlanmasını beklerken) olacaktır. Bu durumların da tasarımda göz önünde bulundurulması gerekir.

Stillere odaklanırken, tasarımlarınızın erişilebilir olup olmadığını düşünün. Renk kontrastına, metin boyutuna ve belirli kullanıcıların uygulamanızla nasıl etkileşim kurduğunu etkileyebilecek diğer göstergelere bakın. Web İçeriği Erişilebilirlik Yönergeleri, uygulamalarınızın çeşitli ihtiyaçları olan bireyler için çalışmasını sağlamak amacıyla yararlı bilgiler sunar.

7. Tasarım özelliklerini geliştiriciye devir için paketleyin

Proje dosyalarını ön yüz yazılım geliştirme ekiplerine devrederken amaç, varsayımlarda bulunmak veya belirsizlikle uğraşmak zorunda kalmadan uygulamayı oluşturabilmeleri için yeterli ayrıntı sağlamaktır. Geliştiricilerin tasarladığınız uygulamayı oluşturmasını sağlamak için netlik son derece önemlidir.

Yapmanız gerekenler şunlardır:

• Nihai tasarım dosyalarını hazırlayın: Tasarım dosyalarınız, geliştiricilerin kullanıcıların uygulama içinde nasıl hareket ettiğini bilmesi için kullanıcı akışınız ve ekran listenizle aynı sırada sunulmalıdır. Ekranların, çerçevelerin, bileşenlerin ve tasarım katmanlarının tutarlı bir şekilde adlandırıldığından emin olun. Kafa karışıklığını azaltmak için eski konseptleri kaldırın. 
• Tasarım sisteminizi belgeleyin: Yazı tipi aileleri, yazı tipi boyutları, boşluklar, renkler için hex kodları, köşe yarıçapları ve diğer tekrar eden stiller için ayrıntılar sağlayın. Bu, tasarım ile geliştirme arasında tutarlılık sağlayacaktır.
• Etkileşimli öğeler için ayrıntılar sağlayın: Bazen etkileşimli davranış, statik bir ekrandan anlaşılmaz. Durum buysa, etkileşim sırasında ne olduğunu belgeleyin — örneğin, bir kullanıcı bir ayarı açıp kapattığında ne olur.
• Ölçeklenebilir vektör varlıkları dışa aktarın: Simgeleri ve çizimleri, pikselleşmeden ölçeklenebilen SVG dosyaları olarak teslim edin. Fotoğraflar ve diğer görseller için PNG veya JPEG gibi uygun formatlar kullanın.
• Platforma özgü gereksinimleri belirtin: Tasarımın iOS ve Android sürümleri arasında herhangi bir fark varsa, bunları geliştiriciler için not edin. Bunlar gezinme, simgeler ve davranışları içerebilir. 
• Nihai teslimatı tanımlayın: Tasarım ve geliştirme arasında herhangi bir yanlış anlaşılma veya kafa karışıklığı olmaması için nihai uygulamaya ilişkin beklentilerinizi açıkça belgeleyin.

Geliştiriciye sağladığınız her şeyi özetleyen bir devir kontrol listesi oluşturmanın faydalı olduğunu görebilirsiniz. Geliştiricinin herhangi bir soru sorabilmesi ve sürecin kendi bölümüne başlamadan önce ihtiyaç duyduğu her şeye sahip olduğunu teyit edebilmesi için kontrol listesini birlikte gözden geçirin.

Jotform Uygulamalar ile geliştiriciye devir aşamasını atlayın

Artık uygulama tasarımı nasıl yapılır biliyorsunuz; peki bunun için gereken iş miktarını düşününce gözünüz korkuyor mu? Üstelik geleneksel tasarım süreci genellikle pahalı bir geliştirici devriyle sonuçlanır ve bu da cebinizi oldukça hızlı bir şekilde boşaltabilir. Girişimciler ve küçük işletme sahipleri için bu, uygun maliyetli veya gerçekçi bir çözüm değildir. 

Ya daha kolay bir yol olsaydı?

İşte karşınızda Jotform Uygulamalar: tamamen özelleştirilmiş uygulamaları dakikalar içinde tasarlamak, oluşturmak ve geliştirmek için nihai kod gerektirmeyen başlangıç noktası — hiçbir kodlama, SVG dosyası veya geliştirmeye devir gerektirmez.

Jotform Uygulamalar’ı mükemmel bir seçim yapan özellikler şunlardır:

• Başlaması kolay: Jotform, uygulamanızı oluşturmaya başlamanın üç farklı yolunu sunar. Vizyonunuzu açıklamak için bir komut kullanabilir ve Jotform Yapay Zeka Uygulama Oluşturucu’dan uygulamanızı sizin için oluşturmasını isteyebilirsiniz. Ayrıca, uygulamanızı sıfırdan oluşturmak için sürükle-bırak kullanıcı arayüzünü keşfedebilirsiniz. Üstelik Jotform, hayalinizdeki uygulamayı oluşturmak için temel olarak kullanabileceğiniz binlerce ücretsiz uygulama şablonu sunar. 
• Tamamen özelleştirilebilir kullanıcı arayüzü: Renklerden gezinmeye kadar, hedef kitlenize işletmenizle etkileşim kurarken sorunsuz bir deneyim sunmak için uygulamayı markanızla uyumlu hale getirebilirsiniz.
• Çeşitli işlevler: Jotform ile oluşturulan uygulamalar veri toplayabilir, randevu planlayabilir, ödeme alabilir, bilgi yönlendirebilir, onay alabilir ve çok daha fazlasını yapabilir.
• Tüm cihazlarda tamamen duyarlı: Uygulamanızı yalnızca bir kez oluşturun ve akıllı telefonlar, tabletler ve masaüstü bilgisayarlar dahil her şeyde çalıştırın. 
• Yerleşik etkileşim: Gerçek zamanlı olarak iletilen anlık bildirimlerle Jotform uygulamaları, kullanıcılarınızla etkileşim kurmak için mesajlar, güncellemeler, teklifler ve duyurular gönderebilir. 

Jotform Uygulamalar‘ı ücretsiz olarak kullanmaya başlayabilirsiniz; böylece platformu bugün hiçbir taahhütte bulunmadan keşfedebilirsiniz. Kaydolun ve tasarım, geliştirme ve gereksiz maliyetlerle uğraşmak zorunda kalmadan dakikalar içinde bir uygulamanın oluşturulmasının ne kadar kolay olduğunu görün.