Uğur Akdemir’den Yeni Nesil Mobil Tasarımı için İpuçları

Mobil uygulama tasarımı denildiğinde Türkiye’de akla ilk gelen isimlerden birisi Uğur Akdemir. Yemeksepeti, Migros, LOG ve Turkcell Pusula gibi hemen her iPhone ve iPad’de yerini almış uygulamaların sahibi. İşletme okurken, kalemi farklı bir şekilde kullanabileceğini keşfetmesiyle sektörün büyük ajanslarında geçen 9 yılın ardından, şimdi kendi stüdyosunda iPhone ve iPad başta olmak üzere birçok farklı platforma arayüz tasarımları yapıyor, projeler üretiyor. Behance’in resmi Türkiye grubu BeTurkey için istedik, döktürdü :)

Neden Mobil Tasarım?

İnsanoğlu’nun M.Ö. 14.000 yılında mağara duvarlarına resimler yaparak başlayan grafik tasarım macerası, günümüzde neredeyse tamamen dijital ortama taşınmış durumda. Özellikle son yıllarda iPhone/iPad v.b. “akıllı” mobil cihazlar sayesinde, hayatımızın her anında bu dijital ortam ile etkileşim kuruyor, onunla yaşıyoruz. Elbette bu etkileşimin en büyük parçasını da, binlerce satır bilgisayar kodu ile insan arasındaki köprüyü kuran kullanıcı arayüzleri (userinterface) oluşturuyor.

Bugün Mobil kullanıcı arayüzleri, tasarım dünyasının en çok ilgisini çeken noktalardan biri durumunda. Ve siz de bu ilgiyi duyanlardansanız ve mobil platform için tasarım yapma arzusundaysanız, bu yazıda sizin için faydalı olabilecek bir dizi ipucunu sizinle paylaşacağım.

Not : Bu yazıdaki ipuçları, çoğunlukla Apple iPhone / iPad platformu baz alınarak derlenmiştir. Aynı zamanda diğer bir çok mobil cihaz için de geçerliliğini korumaktadır.

Önce Kullanıcı Olun

Sanırım bu yazı içerisinde en çok fayda ve zararı bir arada barındıran ipucu bu olacak. Zira bir mobil cihaz için iyi tasarım yapabilmenin ilk kuralı, o cihazın kullanıcısı olmaktan geçiyor. Eğer hala emektar cep telefonunuzu kullanıyorsanız, onu artık çöpe atıp yerine iPhone v.b. bir telefon almanızın vakti geldi demektir. Bunu bir lüks olarak değil, işinize yaptığınız bir yatırım olarak değerlendirin.

Ne Tasarladığınızı Görün

Tasarımınızı yaparken mutlaka cihaz üzerinde nasıl göründüğünü test edin. Bu, size önemli ölçüde zaman kazandıracaktır. Bunun için size iki farklı uygulama önerebilirim. Bunlardan ilki Avatron firmasının ürettiği Air Display yazılımı. Bu uygulama iPhone’u bilgisayarınıza ikinci monitör olarak tanımlayarak, tasarımlarınızı onun üzerinde yapabilmenize imkan tanıyor. İkinci alternatifiniz ise, Nicholas Zambetti’nin LiveView isimli ücretsiz yazılımı. Bu uygulama ise photoshop üzerindeki tasarımınızı, eşzamanlı olarak iPhone/iPad üzerinde görüntülemenizi sağlıyor. Ben uzun zamandır tasarımlarımı liveview aracılığı ile görüntülüyorum. Bu basit ve başarılı yazılımı size de önerebilirim.

Uygulama Geliştirme Araçlarına (SDK) Göz Atın

Çoğu arayüz tasarımcısı mobil uygulama geliştirme araçları konusunda bilgi sahibi değildir. Bu sebeple yaptıkları tasarımlar, birçok defa uygulama geliştiriciler tarafından veto edilir. Bunun önüne geçip, uygulanabilir tasarımlar yapabilmek için, cihaz SDK’larını edinmeli ve userguide’larına ilgi göstermelisiniz. Apple, iPhone ve iPad platformu için geliştirici SDK’larını ücretsiz olarak download etmenize imkan tanıyor. Özellikle, bu SDK içinde yer alan Interface Builder yazılımı, mutlaka incelemeniz gereken ve fikir sahibi olmanız gereken bir araçtır. Bu yazılım içinde tasarımınız ile ilgili sınırlarınızı, işinizi hızlandıracak araçları bulacaksınız.

Üretici Kılavuzlarını (Guideline) Okuyun

Emin olun ki, bir mobil cihazı onu üretenden daha iyi kimse bilemez. Dolayısı ile cihaz üreticilerinin sundukları kullanıcı arayüzü kılavuzlarını okuyun ve ne diyorlarsa kabullenin. :) Emin olun yanılmıyorlar. Özellikle iPhone Human Interface Guideline bir arayüz tasarımcısı için çok önemli bilgiler barındırır. Bütün ilginizi hakediyor derim.

Kullanıcı Deneyimini Ön Planda Tutun

Bu konu aslında “interaksiyon tasarımı 101″ konusudur ama yine de, bence mobil söz konusu olduğunda bunu birkaç kere tekrar etmekte fayda var. Zira iPhone v.b. cihazlarda binlerce uygulama/websitesi arasında kendini gösterebilmenin yolu, iyi içerik ve doğru tasarımla oluşabilecek bir kullanıcı deneyiminden geçiyor. Artık kullanıcılar daha acımasızlar ve en ufak hatanızda sizi asmak için hazır bekliyorlar. Bu yüzden kullanıcıyı iyi anlamalı ve akıllı cihaz kullanan, akıllı insanlar olduklarını hissettirmelisiniz :)

Birkaç ipucu: Markanızı sadece giriş ekranında gösterin, iç ekranlarda ihtiyaçlarından fazlasını vermeyin, ama her zaman daha fazlasını alabilecekleri bir opsiyon sunun. Bulundukları konumu söyleyin veya cihazı salladıklarında buna tepki verin.

Mouse’u Unutun, Parmakları Takip Edin

Ne yazık ki mobil platformda web’i unutmalısınız. Zira mouse’un yerini parmaklar almış durumda. Tıklamıyor dokunuyor, sürüklüyor, kaydırıyor, kendine yaklaştırıyor. Üstelik bunu birden fazla parmak ayni anda yapabiliyor :) Cihaz üzerindeki parmak hareketlerini takip edin ve onlar için yeni fikirler bulun. Fakat, kullanıcıların yeni fikirlerinize alışamaması ihtimalini de göz önüne alın.

Fontları ve Butonları Büyütün

Aslında Web 2.0′ın beraberinde getirdiği tasarım anlayışından sonra, tasarım dünyası büyük yazılara ve butonlara epeyce alışkın. Ama yine de belirtmekte fayda var. Mobil tasarım yaparken web tasarımındaki pixel fontlarınızdan ve 11px alışkanlığınızdan vazgeçin. İdeal okunabilirlik için minimum 14px font boyutunu kullanın.

Diğer yandan, tasarlardığınız uygulamaları insanların parmakları ile kullanacağını hatırlayın. Dokunma işlemini  kolaylaştırmak için, nispeten büyük ölçülerde butonlar tasarlayın. Örneğin; Apple User Interface Guideline’ında  interaksiyon alanları için min. 44 x 44px lik bir alan kullanılması öneriliyor.

Ayrıca, interaksiyon alanları arasında belirgin boşluklar bırakmak da kullanıcıların yanlış butona dokunmasının önüne geçecektir.

Piksel Hassasiyetinde Etkiler Oluşturun

İşte size teknik bir ipucu. Tasarımlarınızı piksel hassasiyetinde yapın, photoshop’un kenar yumuşatma özelliğine yenik düşmemeye çalışın. Mümkün olduğunda vektörel tabanlı çalışın. Yazılara 1px’lik gölgeler ile derinlik katın. Cihaz üzerinde etkisini göreceksiniz.

Renk Yönetimi Kullanmayın.

Bir teknik ipucu daha. Eğer Photoshop üzerinde kullanmakta olduğunuz bir color management ayarı mevcutsa hemen kapatın. Renk yönetimlerini kullanmadan yapacağınız tasarımlar birçok platform için en doğru sonucu verecektir. Detaylı bilgi için Smashing Magazine’deki şu makaleye göz atabilirsiniz.

Gerçek Hayatı Taklit Edin

Kişisel bilgisayarın aksine, mobil cihazları kullanırken dış dünya ile daha çok etkileşimde bulunuruz. Elinizdeki tuttuğunuz cep telefonunu, bir çakmak gibi kullanabilir, bir bira şişesi gibi gösterebilir veya bir el radyosu gibi görebilirsiniz. Kullanıcıyı bu objelerle etkileşime geçirebilir, uygulama ile kullanıcı arasında duygusal bir bağ kurabilirsiniz.

Örneğin, Pişti iPhone oyununda, standart kart oyunu tasarımlarındaki rutini kırmak için, farklı bir arayüz tasarımı hayal ediyordum. Gerçek hayatı kopyalarak, oyundaki 4 kartı sanki elinizde tutuyormuşsunuz gibi dizerek, kullanıcının oyunu hissetmesini sağlamaya çalıştım. Sanırım bunu başardım da :)

Yatay Konuma Geçerken Dikkatli Olun

Bu aslında benim de daha önce sıkça yaptığım hatalardan biri idi. iPad v.b. tablet cihazlar hariç, tüm akıllı cep telefonları varsayılan olarak dikey pozisyonda kullanılır, ve bu telefonların şarj istasyonları da (araç kitleri ve dock’lar) dikey kullanım için tasarlanmıştır.

Eğer siz bir lokasyon bazlı gps uygulaması tasarlıyorsanız, kullanıcıdan konum detay bigileri için cihazı yatay konuma getirmesini isteyemezsiniz. Bu yüzden mümkün olduğunca dikey konumda tasarımlar planlayın.

Not : iPad v.b. tabletler için bunun tam tersi geçerlidir. Yani yatay veya dikey her iki rotasyonu da verimli kullanmanız gereklidir. Hatta tasarımlarınızda cihazın ters tutulma olasılığını bile göz önünde bulundurun :)

Diğer Tasarımcıları Takip Edin ve Yaptıkları İşleri Kullanın

Elbette neredeyse hepimiz, çevremizde olup bitenleri takip etmeye çalışıyor, başka tasarımcıların portfolyolarını inceliyor ve fikir ediniyoruz. Ancak behance, dribbble, cargo gibi birçok platformda bu çalışmalar ekran görüntüsü olarak yayınlanıyor ve biz çoğunlukla tasarımcının photoshop’undan çıkan halini görüyoruz. Bu noktada olabildiğince, beğendiğiniz tasarımların yayındaki hallerini kullanmaya çalışın. Bu size uygulama geliştirme sürecinde, “tasarımınızdan feda etmeniz gerekecek şeyler” hakkında da fikir verecektir.

Bu yazı 11 Mart 2011 tarihinde <art href= te yayınlanmıştır.