iOS Uygulamalarınızı İyileştirecek 6 Detay

Uygulama geliştirirken nelere dikkat etmeliyiz?

Corak
Raptiye
6 min readJan 3, 2021

--

kaynak

Sürekli web üzerinde yoğunlaşıp çok da ilgimi çekmesine rağmen uygulama geliştirmeyi ve tasarlamayı atladım.

Mobil tasarımda dikkat edilmesi gerekenleri inceleyip bir yandan örneklendirerek yazmaya karar verdim. Apple’ın “Human Interface Guidelines”ından yola çıkıp, maddeleri detaylandıracağım. Buradaki maddeleri iPhone’da Apple nasıl öneriyorsa öyle örneklendireceğim.

Bölüm bölüm olacak, ilk bölüme başlayalım:

iOS’u iOS Yapan Şeyler

Android kullanan da iOS kullanan da iPhone kullanıcı deneyiminin iyi olduğu konusunda hem fikirdir. (Dikkat: Android kulllanıcı deneyimi kötü demiyorum)

— Netlik

Tasarım en temel anlamıyla kullanıcıyı yönlendirmelidir. Kullanıcının kafasını karıştıracak her şeyden uzak olmalıdır. Mesela ikonları düşünelim; hangi ikonun ne işe yaradığını hemen anlarsınız. Bir ileti göndermek istiyorsanız hangi ikonun iletiyi gönderebileceğini kolayca tahmin edebilirsiniz. Fotoğraf paylaşacağınızda hangi ikonun paylaşım yapacağını da tahmin edersiniz. Veya bir özelliğin aktif/inaktif olduğunu da ikondaki renkten anlarsınız. Bu iPhone’u kolay kullanılabilir ve tahmin edilebilir yapar. Daha önce kullandığınız cihaz ne olursa olsun iPhone’a hemen adapte olmanızı sağlar. Bu ikonlar neredeyse standarttır. (Standart oluşturmada Apple büyük görev almış mıdır, ne dersiniz?)

Kaynak

— Arayüz

iPhone’da, arayüz adına öğrenilecek çok güzel ve önemli detaylar var. Kullanıcıyı yönlendirebilen bir arayüz amacını yerine getirebiliyor demektir. Örneğin arka plan bulanıyorsa, bulanmayan bölüm asıl odak noktamızdır. Bu sayede asıl içeriğe odaklanabiliriz. Arayüzdeki gradyanlar, gölgeler ve benzer detayların her birinin bir anlamı var. Sadece güzel göründüğü için değil, kullanıcı için oluşturulmuştur. Biraz daha detay için Apple’ın Akışkan Arayüz Tasarımı yazıma göz atabilirsiniz.

Arkaplan bulanıklığı
Arkaplan bulanıklığı

— Derinlik

Gerçeklik her şeydir. Bana göre iPhone’un kolay adapte olunabilir olmasının en büyük sebebi gerçek hayattaki hareketleri, metodları ve görüntüyü sunmasıdır. Basit örnekler sunacak olursak; bir uygulama ikonuna tıkladığımızda tüm ekranı kaplaması, elimizi açıp kapatmamıza benzer. Safaride bir önceki sayfaya dönmemiz ,üst üste konmuş iki sayfadan alttakine dönmemize benzer.

Kaynak El GIF’i (sol) — Kaynak iPhone GIF’i (sağ)

Tasarım İlkeleri

Uygulamanıza uygun hazırladığınız tasarımlarda 6 temel kriter var. Tasarımınız bu kriterleri ne kadar iyi karşılarsa etkiniz o kadar iyi olur.

1- Estetik Bütünlük

Estetik bütünlüğe karar verirken, uygulamanızın hitap ettiği kesim ve uygulamanın kategorisi önemlidir.

Örneğin bir haber uygulamasında doğrudan içeriği görmek kullanıcının istediği şeydir. Haber harici sunulan şeyler sadece odak dağıtır. Unutmayın, uygulamanın kullanıcıyı yönlendirmesi gerekli. Haberi okuduktan sonra görecekleri bir diğer şey kontroller. Mesela; paylaşma, kaydetme, arşivleme gibi kontroller. Bunu yaparken de mümkün olduğunca önce Apple’ın sonra uygulamanın bütününe göre tasarımlar yapın, ona göre hareket edin.

App: The New York Times

Bir de spor aktivitesi uygulaması düşünelim. Burada içeriği birden sunmamanız gerektiği aşikar.

App: Nike Training Club

Bu noktada önemli olan kullanıcıyı uygulamada tutabilmek. Yani; oyunlaştırma. Kullanıcıya egzersizleri gösterirken olayın heyecanına dahil olmasına izin verin. İçeriği sunup geri plana çekilmeyin.

App: Nike Training Club

2- Tutarlılık

İnsanlar akıllı telefonda kullanırken günümüze kadar bir çok alışkanlık kazandı. Bu alışkanlıklar o kadar hayatımızda yer etti ki, değiştirmek çok güç. Çöp kutusu ikonu, navigasyon konumu ve başlık boyutları gibi bazı tasarımsal öğeler neredeyse bir standarda bağlandı. Bu nedenle kullanıcıyı olumsuz yönde şaşırtmayın. Uygulamanız için özelleşmiş bir tasarımınız yoksa bırakın iOS uygulaması gibi görünsün. Kullanıcılar eski alışkanlıklarından edindiği tecrübeyle sizin uygulamanıza daha hızlı adapte olurlar. Aksi halde kullanıcı alışkanlığını zedelemiş olursunuz ve Apple’ın bazı şartlarını sağlayamayabilirsiniz.

iOS14 UI Kit — Figma Community.

3- Doğrudan Manipülasyon

Animasyonlar, parmak hareketleri (gestures) kullanıcının ilgisini çeker ve kullanıcının bazı parmak hareketlerine ekran karşılık verir. Ekranı döndürmek ya da ekran içeriğini kısıp açmak, doğrudan manipülasyon örneğidir. Parmak hareketleri yaptığınızda ekrandan bir karşılık görmeyi beklersiniz.

4- Geri Bildirim

Kullanıcıya yaptığı bir işin sonucu göstermek için ya da kullanıcıyı uyarmak için geri bildirim vermek gerekir. Geribildirim, kontrolün hala kullanıcıda olduğu hissi uyandırır ve hatalara karşı iyi bir uyarandır. Bir ödeme yapılacağı zaman parmak izi/Face ID onayı istemesi güvenlik amaçlı bir geri bildirimdir. Bir form gönderdiğinizde ekranda görünen uyarı (alert box), işlem sonucunu bildiren bir geri bildirimdir.

Bu tür geri bildirimler sayesinde kullanıcı uygulamaları daha rahat kullanır çünkü bir hata durumunda uygulamanın onu uyaracağını bilir, böylelikle yanlış bir işlem yapmaktan korkmaz.

Mesela ilerleme çubukları (progress bar) işlemin ne durumda olduğunu görmenizi sağlar, işlemin ne kadar süre sonra tamamlanacağını tahmin etmeniz zor olmaz.

Mesela bir maili gönderemediğinizde oluşan kırmızı uyarı kutusu hem geri bildirime hem de tutarlılığa örnek teşkil eder. Oradaki hata bir uyarandır ve kırmızı renk ise insanların alıştığı anlamda bir hata/tehlike ifade eder.

Sesler ise harika uyaranlardır. Ekrana bakmasanız dahi duyacağınız ses size olumlu ya da olumsuz çağrışımda bulunabilir. Örneğin bir mail gönderdiğinizde; animasyon, progress bar ve ses geri bildirim aynı anda kullanılır.

5- Metaforlar

Metaforları tasarımların neredeyse hepsinde kullanırız. Özellikle mobil uygulamalarda metafor kullanımı o kadar yerleşmiştir ki kullanıcı farkına bile varmaz. Genellikle ‘gerçek hayatta karşılığı olan’ bir şeyi ‘dijitale aktarmak’ diyebiliriz. Klasik olarak iPhone posta kutusunda bir mektup görüntüsü kullanmak, ‘iletişim sağlamayı’ temsil eder. Find My iPhone radar ikonu ile temsil edilir. Mesajlarda konuşma balonu kullanmak belki de eski karikatürlerden gelen bir metafordur, eski kategoriler de dumanla haberleşmeden esinlenmiş olabilir, kim bilir... Bunları zaten bir çoğumuzun biliyoruz. Fakat metaforlar bunlarla sınırlı değil.

Yalnızca uygulamalar değil, uygulamada kullanılan tasarımsal öğeler de metafor barındırır. Switch ikonu gerçek bir mekanik kontrol anahtarını çağrıştırır. Bir ses kaydı aldığınızda ‘analog frekans ölçer’ görüntüsünü çağrıştırır. Bunlar ne kadar alışılageldik görünse de durup dururken ortaya çıkmadılar. Birileri bu metaforları düşündü ve hayatımıza tamamen yerleşti.

Ayrıca ekranı sağa sola çevirirken yaptığımız parmak hareketleri de gerçek hayattaki kitap sayfası çevirmeyi çağrıştırır ve ondan esinlenmiştir.

6- Kullanıcı Kontrolü

Uygulamalar kullanıcıyı yönlendirir, hatalara karşı uyarır, geri bildirim verir fakat asla kontrol etmez. Bahsettiğim gibi geri bildirimler kullanıcıya bir işin sonucunu gösterirken olası tehlikelerden korur. Fakat tüm yetkinin uygulamada olması kullanıcıya güven vermez. Mesela kamera erişimi gerektiren bir uygulamada alert box, size ‘uygulamayı kulanmak için kameraya erişim gereklidir’ der. Kameraya erişimin neden gerekli olduğunu açıklar. Fakat aynı zamanda erişimi reddetme fırsatı da tanır. Kontrolün kullanıcıda olduğu barizdir. Uygulamaya olan güven artar.

Diyelim ki fikriniz değişti ve kameraya erişime izin vermek istediniz. O zaman da -uygulamanın tasarımına göre- ya alert box yeniden belirir ya da kamera erişiminin nereden verileceği uygulama içinde açıklanır (Bu tür durumlarda tekrar alert box göstermek ya da erişim fonksiyonlarını uygulama içinde tutmak daha kullanıcı dostudur. Çünkü kullanıcı telefon ayarlarına gitmek zorunda kalmaz).

Sonuç

Böylece mobil uygulamada dikkat edilecek iOS önerilerinin birinci bölümü bitti. Apple’a göre iOS’u farklı kılan özellikler bunlar. Tüm bu detaylar, kullanıcının daha iyi bir mobil uygulama deneyimlemesi için yapılıyor. Tasarım yaparken ve uygulama geliştirirken kullanıcıları ön planda tutmaya özen gösterin.

İletişim için Twitter ya da iletisim@alicorak.com adreslerini kullanabilirsiniz.

--

--