Mobil Uygulamalarda İyi UX Nasıl Tasarlanır? Görsel Sadelikten Bilgi Mimarisine

Mobil UX/UI Tasarım Rehberi — Bilimden Ekrana · Makale #01

Bir alışkanlık uygulamasını açtığınızı düşünün. Ekranda uyumlu renkler, ince çizgiler ve kusursuz animasyonlar var. Fakat bugünkü yürüyüşünüzü tamamlandı olarak işaretlemek için nereye dokunacağınız belli değil. Birkaç denemeden sonra bir halkaya basıyorsunuz; halkanın rengi değişiyor ama kaydın tutulup tutulmadığını anlayamıyorsunuz. Görsel olarak başarılı görünen bir ekran, temel görevi zorlaştırabiliyor.

Mobil UX/UI tasarımı bu tür sorunları birlikte ele alır. Kullanıcı arayüzü, yani UI, metinler, düğmeler, simgeler ve etkileşim durumları gibi kullanıcıyla temas eden katmandır. Kullanıcı deneyimi, yani UX, bu temasın ötesinde, kişinin ürünü kullanırken amacına ulaşmasını ve süreçte oluşan algılarını kapsar. Kullanılabilirlik ise belirli kullanıcıların belirli bir bağlamda hedeflerine ne kadar etkili, verimli ve tatmin edici biçimde ulaştığıyla ilgilidir. ISO 9241-11:2018 kullanılabilirliği bu bağlam üzerinden değerlendirir. [1]

Bu serinin ilk yazısı, kavramları ekran kararlarına dönüştürmek için bir başlangıç noktası sunuyor. Bir ilkeyi öğrenmek, her ürüne aynı bileşeni yerleştirmek anlamına gelmez. Önce kullanıcı görevini tanımlayacağız; ardından keşfedilebilirlik, bellek, bilgi mimarisi ve görsel düzen açısından bu görevin önündeki engelleri inceleyeceğiz.

Bu yazıda:

• İyi UX Nedir?
• Kullanıcı Bir Özelliği Nasıl Keşfeder?
• Bilişsel Yükü Nasıl Azaltırız?
• Bilgi Mimarisi Nasıl Kurulur?
• Görsel Hiyerarşi Kullanıcı Davranışını Nasıl Etkiler?
• Tipografi ve Boşluklar Neden Önemlidir?
• Örnek Uygulama: Bir Alışkanlık Takip Aracı Tasarlamak
• Sık Yapılan UX Hataları
• Mobil UX/UI Kontrol Listesi
• 10 Dakikalık UX Denetimi: Kendi Uygulamanızı İnceleyin
• Sonuç
• Kaynaklar

İyi UX Nedir?

Görünüşten önce görev başarısını tanımlayın

“Kolay bir uygulama yapalım” yerine “kullanıcı bugünkü yürüyüşünü yardım almadan kaydedebilsin ve yanlış kaydı geri alabilsin” diye başlayın. İkinci ifade gözlenebilir bir görevdir. Değerlendirmede görevin tamamlanması, yanlış dokunmalar, duraksama noktaları ve kullanıcının sonucu doğru anlaması izlenebilir. Hız tek başına başarı ölçüsü değildir; hızlı yapılan yanlış bir işlem iyi deneyim sayılmaz.

Erişilebilirlik de bu görevin bir parçasıdır. Düşük görme, el hareketlerinde kısıtlılık veya ekran okuyucu kullanımı, ürüne erişimin koşullarını değiştirir. Metni büyüten bir kişi kaydetme düğmesini kaybetmemeli; renkleri ayırt edemeyen biri tamamlanan görevleri anlayabilmelidir. WCAG 2.2 bu konuda web arayüzleri için test edilebilir ölçütler verir. Birkaç ölçütü karşılamak, bütün ürünün erişilebilir olduğunu kanıtlamaz. [2]

Pratik karar şudur: her önemli ekran için bir ana görev, bir anlaşılır başarı durumu ve bir hata giderme yolu yazın. Örneğin “Tamamlandı” mesajı, kalıcı durum etiketi ve “Geri al” eylemi birlikte tasarlanabilir. Böylece görsel düzenin hangi davranışı desteklemesi gerektiği baştan belirlenir.

Kullanıcı Bir Özelliği Nasıl Keşfeder?

Keşfedilebilirlik, kullanıcının bir eylemin varlığını ve ona nasıl ulaşacağını anlayabilmesidir. “Teknik olarak yapılabiliyor” ile “kullanıcı bunun yapılabildiğini fark ediyor” aynı şey değildir. Don Norman’ın açıklamasında affordance, kişi ile çevre arasındaki mümkün eylem ilişkisidir; signifier ise eyleme veya duruma ilişkin algılanabilir ipucudur. Türkçede bunları eylem olanağı ve eylem ipucu olarak düşünebiliriz. [3] [4]

Dokunmatik yüzey dokunmayı mümkün kılar. Ekrandaki “Kaydet” yazısı, düğme biçimi ve konumu ise belirli bir dokunuşun ne yapacağını anlatır. Bir simgeyi yuvarlak bir zemine koymak her zaman yeterli açıklama sağlamaz. Aynı halka ilerlemeyi gösterebilir, ayrıntı açabilir veya bir görevi tamamlayabilir. Kullanıcıya yalnızca biçim gösterip anlamı tahmin ettirmek yerine eylemi metin ve durumla desteklemek gerekir.

Gizli hareketleri ek erişim yolu olarak kullanın

Kartı sola kaydırınca istatistik açılması, hareketi bilen kişi için hızlı olabilir. Yeni kullanıcı açısından ise ekranın durağan görünümü böyle bir özelliğin bulunduğunu söylemeyebilir. Bu tasarımda kart üzerinde “İstatistikler” bağlantısı veya açık etiketli bir menü bulunmasını öneriyoruz. Kaydırma hareketi, görünür erişim yoluna ek bir kısayol olarak kalabilir.

Bir kez gösterilen tanıtım balonunu kalıcı keşfedilebilirliğin yerine koymayın. Kişi açıklamayı kapatabilir, haftalar sonra geri gelebilir veya hareketi fiziksel olarak yapamayabilir. Hareket gerektiren işlevlerin alternatifleri erişilebilirlik bakımından da değerlendirilmelidir; WCAG’in işaretçi hareketleri ölçütü, gerekli olmayan çok noktalı veya yol temelli hareketler için tek işaretçiyle kullanılabilen bir alternatif ister. [2]

Eylem sonrasındaki geri bildirim de keşfetmenin devamıdır. Kullanıcı tamamlanma düğmesine bastığında yazının, simgenin ve erişilebilir durum bilgisinin uyumlu biçimde değişmesi gerekir. İşlem henüz sunucuya kaydedilmediyse başarı görünümü yanıltıcı olmamalıdır. “Kaydediliyor” ve “Kaydedilemedi, yeniden dene” durumlarını tasarımın dışında bırakmak, en güzel tamamlanma animasyonunu bile güvenilmez kılabilir.

Bilişsel Yükü Nasıl Azaltırız?

Tanımayı destekleyin, hatırlamayı azaltın

Bir uygulamanın istatistik ekranına ulaşmak için hangi kartta hangi hareketi yaptığınızı hatırlamanız gerekiyorsa arayüz bellek talep ediyordur. “Bugün”, “Alışkanlıklar” ve “İstatistikler” gibi görünür etiketler, seçenekleri tanımayı mümkün kılar. Raluca Budiu’nun açıklamasında tanıma, bellekten bilgiye ulaşmayı destekleyen ipuçları içerir; hatırlamada bu ipuçları daha azdır. Nielsen’in sezgisel kullanılabilirlik ilkeleri de görünür seçenekleri ve gerektiğinde erişilebilir bilgiyi önerir. [5] [6]

Bu yaklaşım bütün işlevleri aynı anda ekrana dökmeyi gerektirmez. Sık kullanılan bir işlevin adı görünür olabilir; ayrıntıları sonraki ekranda açılabilir. Deneyimli kişiler için klavye kısayolu veya kaydırma gibi hızlandırıcılar sunulabilir. Yeni kullanıcı temel işi bu kısayolları öğrenmeden yapabilmelidir. Yerleşmiş bilgiyle yeni öğrenilen bilgiyi aynı kabul etmemek, başlangıç deneyimi ile uzman kullanımını birlikte tasarlamayı sağlar.

Hick–Hyman yasasını bağlamıyla okuyun

Hick’in 1952’deki ve Hyman’ın 1953’teki çalışmaları, kontrollü seçimli tepki görevlerinde belirsizlik ile tepki süresi arasındaki ilişkiyi araştırır. Hick–Hyman yaklaşımı, daha çok olası yanıt arasında seçim yapmanın belirli koşullarda daha uzun sürebileceğini açıklar. Buradaki deneyler, kişinin kapsamlı bir mobil menüyü okuyup anlamlandırmasıyla aynı görev değildir. [7] [8]

Bu nedenle “seçenekleri yarıya indirirsek kullanıcı iki kat hızlanır” gibi bir sonuç çıkaramayız. Seçeneklerin olasılığı, etiketlerin anlaşılması, kişinin deneyimi ve arama stratejisi önemlidir. Yirmi açık isim arasından arananı bulmak, beş belirsiz simgeyi yorumlamaktan daha kolay olabilir. Menüdeki sayıyı azaltırken seçenekleri anlaşılmaz bir “Diğer” başlığının altında toplamak yeni bir sorun yaratabilir.

Bir alışkanlık oluşturma formunda ad, tekrar günleri, hatırlatıcı, renk, hedef miktarı ve ayrıntılı kurallar aynı anda gösterilebilir. Burada önerimiz seçenekleri görev sırasına göre düzenlemektir: önce alışkanlığı tanımlayın, sonra gerekli zaman bilgilerini alın, seyrek kullanılan kuralları açık etiketli bir ayrıntı alanına taşıyın. Bu tercih seçenek mimarisidir; kesin süre kazancı iddiası değildir.

Görevin zorluğunu sunumun zorluğundan ayırın

Çalışma belleği, o anda üzerinde düşündüğümüz bilgiyi geçici olarak işler ve yeni bilgiler için sınırlıdır. Sweller’ın bilişsel yük kuramı öğrenme ve problem çözme bağlamında gelişmiştir. Bir problemi çözmeye ayrılan kaynakların öğrenme için kullanılabilecek kaynaklarla ilişkisini ele alır. Buradan mobil arayüzlere yapılan aktarım, doğrudan her ekran için doğrulanmış bir performans formülü olarak sunulmamalıdır. [9]

İçsel yük, görevin birbirine bağlı öğeleri ve kişinin ön bilgisiyle ilişkilidir. Dışsal yük ise bilgiyi sunuş biçiminin yarattığı gereksiz işlem talepleridir. Bir haftalık tekrar kuralını öğrenmek görevle ilgili bir zorluk olabilir; aynı kuralı üç farklı yerde farklı adlarla göstermek sunumdan kaynaklanan ek zorluktur. Güncel kuram incelemesi, yükün bilgi, görev ve öğretim koşullarıyla birlikte ele alınmasını sağlar. [10]

Görsel sadelik tek başına düşük bilişsel yük anlamına gelmez. Etiketleri silinmiş bir ekran daha boş görünebilir ama daha fazla yorum gerektirebilir. Gerekli açıklamayı korumak, seçilmiş değeri ilgili alanın yanında göstermek ve hataları oluştuğu yerde anlatmak, bu makalede önerdiğimiz uygulanabilir kararlardır.

Aşamalı açıklama, gelişmiş veya seyrek kullanılan seçenekleri ikinci bir düzeyde sunmaktır. Nielsen bu yaklaşımı öğrenmeyi kolaylaştıran bir arayüz stratejisi olarak açıklar. Temel işin tamamlanması için gereken koşulları saklamak ise uygun kullanım değildir. Örneğin ücretli bir özelliğin maliyeti onaydan önce görünmeli; bir kaydı değiştirecek gelişmiş ayar açık adla bulunabilmelidir. [11]

Bilgi Mimarisi Nasıl Kurulur?

Bilgi mimarisi, içeriğin ve işlevlerin nasıl adlandırıldığını, gruplandığını ve birbiriyle ilişkilendirildiğini belirler. Navigasyon bu yapıya ulaşmayı sağlayan arayüzdür. İyi görünen bir alt menü, yanlış kurulmuş içerik ilişkilerini kendiliğinden düzeltmez. Jen Cardello’nun ayrımı, mimariyi önce düşünmenin neden gerekli olduğunu açıklar. [12]

Başlangıçta ekran adlarını değil kullanıcı görevlerini yazın: bugünkü alışkanlığı tamamlamak, geçmiş kaydı düzeltmek, bir alışkanlığın gelişimini incelemek, yeni alışkanlık oluşturmak. Sonra bu görevlerin hangi nesnelerle ilgili olduğunu belirleyin. Geçmiş kayıt, bir alışkanlığa mı yoksa bütün güne mi aittir? İstatistik hangi soruyu yanıtlar? Bu ilişkiler belirlenmeden “Profil” veya “Dashboard” gibi ekran adları seçmek, ürün dilini kullanıcı hedeflerinin önüne koyabilir.

Üç navigasyon düzeyini ayırt edin

Global, yani genel navigasyon, uygulamanın ana alanları arasında geçiş sağlar. Yerel navigasyon, içinde bulunulan alanın alt görünümleri arasında hareket ettirir. Bağlamsal navigasyon ise seçili içerikle ilgili bir yere veya eyleme götürür. Aynı “İstatistikler” sözcüğü hem bütün uygulamanın raporlarını hem tek alışkanlığın geçmişini anlatıyorsa kapsam etikette açıklanmalıdır.

Örnek bir tasarımda genel düzeyde “Bugün” ve “Alışkanlıklar”, alışkanlık ayrıntısında yerel düzeyde “Özet” ve “Geçmiş”, kartın içinde bağlamsal düzeyde “Bu alışkanlığın istatistikleri” bulunabilir. Bu bir öneri şemasıdır; bütün ürünlere uygulanacak zorunlu menü değildir. Profil seyrek kullanılan hesap işlerini topluyorsa ana navigasyonda yer almak zorunda olmayabilir. Kullanıcıların hesap yönetimine ne sıklıkla ihtiyaç duyduğu bu kararı değiştirebilir.

Genişlik ve derinlik arasında tek doğru oran yoktur. Çok sayıda üst düzey seçenek taramayı zorlaştırabilir; fazla katman ise sürekli geri gitmeye ve bağlam kaybına yol açabilir. Önemli bir göreve birkaç anlaşılır adımla ulaşılması, az dokunuşla fakat belirsiz bir yoldan ulaşılmasından daha iyi bir başlangıç hipotezidir. Bu değerlendirmeyi yalnızca dokunuş sayısına indirmeyin.

Zihinsel model, kullanıcının ürünün nasıl çalıştığına ilişkin beklentisidir. “Bugün” başlığı altında yarına ait kayıtların görünmesi ya da geri düğmesinin önceki liste konumunu kaybettirmesi bu beklentiyi bozabilir. Tasarımı sınamak için kişilere bir istatistiği nerede arayacaklarını sorun; ardından gerçek görevde hangi yolu seçtiklerini izleyin. Böyle bir çalışma yapılmadan mimarinin kullanıcıların zihinsel modeliyle kesin olarak örtüştüğünü söyleyemeyiz.

Görsel Hiyerarşi Kullanıcı Davranışını Nasıl Etkiler?

Görsel hiyerarşi, öğelerin algılanan önem sırasını düzenler. Boyut, yazı ağırlığı, kontrast, konum ve gruplama birlikte çalışır. Büyük bir sayı dikkati çekebilir; fakat bu sayının ana görevi temsil etmesi gerekir. Kelley Gordon’un açıklaması, hiyerarşiyi görsel öğeler arasında önem ilişkisi kurma çerçevesinde ele alır. Bu çerçeve belirli bir ekranda herkesin aynı bakış sırasını izleyeceği garantisi değildir. [13]

Bir günlük takip ekranında kişinin öncelikli işi belirli alışkanlığı bulup durumunu değiştirmekse alışkanlık adı ve tamamlanma eylemi öne çıkmalıdır. Genel günlük ilerleme özeti yardımcı bilgi olabilir. Her kartın üzerinde dev bir seri sayacı ve çok parlak bir yüzde göstermek, yapılacak işi görsel olarak geri plana itebilir. Buradaki karar, önce hangi bilginin davranışı desteklediğini belirlemektir.

Kontrast yalnızca dikkat çekme aracı değildir; okunabilirliği de etkiler. WCAG 2.2’de normal metin için 4,5:1, ölçütün büyük metin tanımını karşılayan metin için 3:1 kontrast oranı aranır. Metin dışı arayüz bileşenleri ayrı ölçütlerle değerlendirilir. Rengi tek durum göstergesi yapmak yerine yazı veya simgeyle anlamı destekleyin. [2]

Yakınlık ve benzerlikle ilişkileri anlatın

Gestalt yakınlık ilkesi, birbirine yakın öğelerin ilişkili algılanma eğilimini anlatır. Bir alışkanlık adı ile ona ait seri sayısını yakın tutup sonraki kartla daha büyük boşluk bırakmak, bilgi sahipliğini açıklamaya yardımcı olur. Aynı boşluğu her yerde kullanmak, başlık, açıklama ve başka bir kart arasındaki ilişkileri belirsizleştirebilir. [14]

Benzerlik ilkesi ise ortak renk, biçim veya boyutun öğeleri aynı gruba aitmiş gibi gösterebileceğini açıklar. Aynı görünen iki denetim farklı davranıyorsa kullanıcı yanlış beklenti oluşturabilir. Bu nedenle tamamlanma eylemlerini tutarlı, ayrıntı açan bağlantıları birbirleriyle uyumlu tasarlamayı öneriyoruz. Yakınlık ve benzerlik tek başına yeterli değildir; açık etiketler ve tutarlı davranışlarla birlikte kullanılmalıdır. [15]

Tipografi ve Boşluklar Neden Önemlidir?

Yazı ölçeği, başlık, gövde ve yardımcı bilgi için tutarlı boyut ilişkileri kurar. Anlamsal tipografi ise bu stilleri görevlerine göre adlandırır: ekran başlığı, kart başlığı, açıklama, durum etiketi. “18 punto kalın” gibi görünüşe bağlı bir ad yerine “kart başlığı” demek, aynı rolün farklı ekran boyutlarında uygun biçimde değişmesini kolaylaştırır.

Örnek bir prototipte gövde 16, kart başlığı 18 ve ekran başlığı 24 birimle başlayabilir. Bunlar evrensel eşikler veya kullanıcı araştırmasından çıkan sonuçlar değildir. Yazı karakterinin okunabilirliği, satır uzunluğu, dil ve sistemin metin büyütme ayarları birlikte değerlendirilmelidir. Sayısal ölçekten önce hangi metnin neyi anlattığı ve hangi boyutta sorunsuz okunabildiği önemlidir.

Boşluk değerlerini ortak isimlerle yönetmek, her kartta farklı bir ölçü seçmeyi önler. Örneğin 4, 8, 16, 24 ve 32 değerlerini küçükten büyüğe bir dizi olarak kullanabilirsiniz. Sekizli ızgara, tutarlılık sağlayan bir tasarım geleneğidir; beynin yalnızca sekizin katlarında bilgiyi anlayabildiğine ilişkin bilimsel bir yasa değildir. Material Design 2’nin boşluk rehberi 8 dp ızgarayı, bazı küçük öğeler ve tipografi için 4 dp düzenlemeleri açıklar. Bu kaynak önceki Material sürümüne aittir. [16]

Boşluğun görevi sadece ekrana hava katmak değildir. Etiket ile değeri birbirine yakın, iki bağımsız bilgi grubunu daha uzak tutmak anlam ilişkisini destekler. Sol kenarların hizalanması da tarama için tutarlı bir başlangıç oluşturabilir. Fakat yoğunluğu azaltırken kullanıcının ihtiyaç duyduğu bilgiyi sürekli başka ekranlara taşımak, görünüşü ferahlatıp görevi uzatabilir.

Fitts yasası ve dokunma hedefleri

Fitts’in çalışması, hareket mesafesi ile hedef genişliğinin hedefe ulaşma süresiyle ilişkisini modeller. MacKenzie, bu yaklaşımın insan–bilgisayar etkileşimindeki kullanımını ve sınırlılıklarını inceler. Yaygın Shannon biçiminde ilişki MT = a + b × log₂(1 + D/W) olarak yazılır; D mesafe, W hareket doğrultusundaki hedef genişliğidir. Katsayılar ölçümle belirlenir. Bu denklem bir düğmenin mobil uygulamada kaç milisaniyede kullanılacağını kendiliğinden söylemez. [17] [18]

Tasarım açısından çıkarım, önemli hedefleri rahat kullanılabilir boyutta tutmak ve gereksiz hassasiyet talebini azaltmaktır. Küçük görünen bir simgenin çevresinde daha geniş etkileşim alanı bulunabilir. Ancak komşu hedeflerin alanları üst üste binmemeli; kişi bir eylemi yaparken diğerini yanlışlıkla tetiklememelidir. Ekranın üst köşesi ile altındaki hedefe erişim de kullanılan el, cihaz ve tutuş biçimiyle birlikte sınanmalıdır.

Web için WCAG 2.2’nin AA düzeyindeki 2.5.8 ölçütü, tanımlanan istisnalar dışında en az 24 × 24 CSS piksel hedef ister. Küçük hedefler için belirtilen aralık koşulu ve metin içi bağlantı gibi istisnalar vardır. AAA düzeyindeki 2.5.5 ölçütü ise kendi istisnalarıyla 44 × 44 CSS piksel ister. Bu iki düzeyi birbirine karıştırmayın. [19] [20]

Apple’ın arayüz tasarım ipuçları 44 × 44 pt hedefleri önerir; Android erişilebilirlik rehberi en az 48 × 48 dp dokunma alanını önerir. CSS piksel, pt ve dp kendi platformlarının birimleridir; fiziksel piksel sayısı olarak eşitlenmemelidir. Büyük hedef seçmek başlangıç kararıdır; erişilebilir ad, odak sırası ve durum bildirimi de gerekir. [21] [22]

Örnek Uygulama: Bir Alışkanlık Takip Aracı Tasarlamak

RY Tracker bu yazıda destekleyici bir tasarım vakasıdır. Kullanıcıyla yürütülen tasarım çalışmalarında Today günlük çalışma yüzeyi, 2×N grid ise korunacak kanonik düzen olarak belirlenmiştir. Alışkanlık kartlarında tamamlanma halkası bulunur; seri sayısı halkanın iç-alt bölümünde gösterilir ve sıfır olduğunda gizlenir. Bunlar tasarım kararlarıdır. Bu çalışma sırasında kaynak kodu veya kullanıcı testi kayıtları incelenmediği için üretim sürümünde uygulanmış davranışlar ya da test edilmiş sonuçlar olarak sunulmuyorlar.

Günlük görev ile yardımcı bilgiyi ayırmak

Bu bağlamda ana görev, kişinin bugünkü alışkanlığını bulup tamamlamasıdır. Kartta alışkanlık adı, günlük hedef ve tamamlanma durumu öncelikli olmalıdır. Ardışık tamamlanan günleri anlatan seri sayısı, yani streak, alışkanlığa bağlı yardımcı bilgidir. Genel günlük ilerleme ise daha sakin bir özet olarak ele alınabilir. Bu görsel öncelikler, görev odaklı UX önerileridir.

Örneğin “Yürüyüş” kartında “20 dakika” hedefi ile günlük tamamlanma durumu anlaşılır olmalıdır. Kanonik kararda seri sayısının yeri halkanın iç-alt bölümüdür; bu sayıyı ana eylem kadar baskın yapmak gerekmez. Sıfır değerinin gizlenmesi, tamamlanma durumunun da gizlenmesini gerektirmez. Halka etkileşimliyse ne yaptığı, tamamlanma ile seri bilgisinin farkı ve yanlış kaydı düzeltme yolu ayrıca açıklanmalıdır.

2×N düzen korunacaktır. Uzun alışkanlık adları, dinamik yazı boyutu ve dar ekranlarda metin sığması, kart yüksekliği ve dokunma alanları birlikte ölçülmelidir. Alternatif responsive davranışlar, örneğin tek sütunlu bir prototip, yalnızca karşılaştırılabilecek araştırma hipotezidir; onaylanmış ürün kararı değildir. Bu makale 2×N kararını değiştirmez ve RY Tracker uygulamasında değişiklik yapmaz.

Ayrıntıyı ilgili alışkanlığın içinde açmak

Tasarım çalışmalarında istatistikler alışkanlık bağlamında ele alınmıştır. Tek alışkanlığın haftalık dağılımına karttaki açık bir “İstatistikler” yolundan erişmek, keşfedilebilirlik için önerdiğimiz tamamlayıcı çözümdür. Ayrıntı ekranında alışkanlık adını korumak, geri dönüşte liste konumunu hatırlamak ve zaman kapsamını belirtmek de doğrulanması gereken UX önerileridir.

Ürün için belirlenen tasarım kararında Profil ana navigasyon için öncelikli değildir ve Ayarlar, Profil altında yer alır. Bu yerleşim üretimde doğrulanmış davranış olarak aktarılmıyor. Kaydırma veya mekânsal hareketler uzman hızlandırıcısı olarak değerlendirilebilir; görünür erişim yolunun yerine geçmemelidir. Hesap ayarlarının bulunabilirliği ve günlük göreve dönüş, gerçek görevlerde sınanmalıdır.

Bir sonraki değerlendirmede katılımcılara yönlendirmeden üç görev verilebilir: yürüyüşü tamamlamak, yanlış tamamlamayı geri almak ve yürüyüşün geçen haftaki kaydını bulmak. Görev başarısı, yanlış eylemler ve açıklama ihtiyacı kaydedilir. Sonra halkanın anlamı, içindeki sayının neyi temsil ettiği ve sıfır durumda ne anlaşıldığı sorulur. Böyle bir test yapılana kadar sonucu kanıtlanmış saymak yerine sınanacak varsayımı açıkça yazmak gerekir.

Sık Yapılan UX Hataları

Aşağıdaki örnekler, tasarım incelemesinde aranabilecek sorunlardır. Bir arayüzde görülmeleri, her kullanıcı için aynı sonucu doğurduklarını kanıtlamaz. Düzeltme önerilerini ürünün ana görevi üzerinden değerlendirin.

1. Etiketleri minimalizm uğruna kaldırmak. Belirsiz simgeler anlam tahmini gerektirir. Kritik eylemlere kısa metin ekleyin; simgenin anlamını öğrenmiş olmak zorunlu olmasın.
2. Temel işlevi yalnızca gizli harekete bağlamak. Keşfetme ve fiziksel kullanım zorlaşabilir. Görünür düğme veya bağlantı sağlayın; hareketi ek kısayol olarak bırakın.
3. Yardımcı sayıyı ana görevin önüne geçirmek. Büyük seri sayacı tamamlanma eylemini gölgeleyebilir. Görsel önceliği görev sırasına göre kurun.
4. Küçük simgeye küçük etkileşim alanı vermek. Komşu eylemler yanlış tetiklenebilir. Alanı büyütün, aralıkları ölçün ve gerçek dokunmayla sınayın.
5. Her bilgiyi eşit ağırlıkta göstermek. Kart adı, durum ve açıklama yarışır. Anlamsal yazı rolleri belirleyin; aynı role aynı stili uygulayın.
6. Hick–Hyman yasasını menü budama formülü saymak. Sayı azalırken etiketler belirsizleşebilir. Gruplamayı görev ve dil üzerinden kurun, bulunabilirliği değerlendirin.
7. Tamamlanmayı yalnızca renkle anlatmak. Durum bazı kullanıcılar için anlaşılamaz olabilir. Yazı, simge ve erişilebilir durum bilgisini birlikte kullanın.
8. Kanonik gridin erişilebilirliğini sınamamak. Büyük metin ve uzun adlar sıkışabilir. RY Tracker’ın 2×N kararı korunur; dar ekran, metin sığması ve dokunma alanlarını ölçün. Alternatif düzenleri onaylanmış karar yerine araştırma hipotezi olarak ele alın.
9. Hata ve geri alma durumlarını atlamak. Yanlış kayıt kalıcı veya belirsiz görünebilir. Kaydetme, başarısızlık ve düzeltme yollarını ilk tasarımda ele alın.

Mobil UX/UI Kontrol Listesi

Kontrol listesini ekran görüntüsüne bakarak tamamlamak yerine çalışan prototiple kullanın. Her “evet” yanıtının yanına kısa bir gözlem veya ölçüm ekleyin. Sorunun hangi cihazda ve hangi görevde sınandığı da kaydedilmelidir.

• Ana görev tek bir cümleyle tanımlı mı; başarı durumu kullanıcı tarafından anlaşılabiliyor mu?
• Kritik işlevlerin görünür ve anlaşılır erişim yolları var mı; kısayolları bilmeden görev tamamlanabiliyor mu?
• Etiketler kullanıcı dilini kullanıyor mu; aynı terim her yerde aynı kapsamı anlatıyor mu?
• Genel, yerel ve bağlamsal navigasyonun kapsamı belli mi; geri dönüş bağlamı koruyor mu?
• Seçilen değerler ilgili alanların yanında mı; ekranlar arasında bilgi ezberlemek gerekiyor mu?
• Gelişmiş seçenekler açık bir adla bulunabiliyor mu; gerekli koşullar onaydan önce görünüyor mu?
• Kart adı ve temel eylem yardımcı istatistiklerden ayırt ediliyor mu?
• Görünür simge ile dokunma alanı ayrı ölçüldü mü; yakın hedefler yanlış dokunma açısından sınandı mı?
• Kontrast ölçüldü mü; renk dışında durum işareti ve ekran okuyucuya uygun adlar mevcut mu?
• Büyük metin, uzun Türkçe etiketler ve dar ekran birlikte denendi mi; taşma veya içerik kaybı var mı?
• Boş, yükleniyor, çevrimdışı, hata ve geri alma durumları tasarlandı mı?
• Tasarımın işe yaradığına ilişkin ifadeler gözlem veya test kaydıyla destekleniyor mu?

Listenin amacı bir puan üretip ürünü “iyi UX” olarak damgalamak değildir. Önce görevi engelleyen sorunları, sonra sık tekrar eden sürtünmeleri ele alın. Değişiklikten sonra aynı görevleri yeniden gözlemleyin. Böylece kararın gerekçesi ve sonucu birbirine bağlanır.

10 Dakikalık UX Denetimi: Kendi Uygulamanızı İnceleyin

Bu kısa egzersiz bir öz değerlendirmedir; ölçülmüş kullanıcı araştırması değildir. Tek bir ekranı ve bir görevi ele alın. Notlarınızı gözlem, yorum ve sınanacak varsayım olarak ayırın.

Dakika 0–2: Ekranı ve görevi seçin

Uygulamanızdan bir ekran seçin. Ana kullanıcı görevini tek cümleyle yazın: “Kullanıcı bugünkü yürüyüşünü tamamlandı olarak kaydeder.” Görsel düzeni değerlendirmeden önce görevin hangi sonuçla tamamlanacağını belirtin.

Dakika 2–4: Ana eylemi bulun

Ana eylemi, yani primary action’ı belirleyin. Bu eylemin görünür adını ve konumunu kaydedin. Kullanıcının açıklama olmadan bulup bulamayacağını kendinize sorun; bu aşamadaki yanıtınızı gerçek kullanıcı başarısı olarak raporlamayın.

Dakika 4–6: Görsel hiyerarşiyi inceleyin

Ekranda dikkatinizi ilk çeken üç öğeyi sırayla yazın. Bunların ana görevle ilişkisini değerlendirin. Yardımcı bir sayı veya dekoratif öğe eylemi gölgeliyorsa bunun nedenini boyut, kontrast, konum veya gruplama açısından not edin.

Dakika 6–8: Bilişsel yük ve yön bulmayı inceleyin

Gereksiz kararları, belirsiz simgeleri ve yalnızca gizli hareketle açılan işlevleri işaretleyin. Kullanıcının önceki ekrandan bilgi hatırlaması gerekip gerekmediğini ve ayrıntıdan geri dönerken bağlamını koruyup koruyamadığını kontrol edin.

Dakika 8–10: Değişiklik hipotezi yazın

Örnek: “İstatistikler için görünür bir erişim yolu eklersek ilk kez kullanan kişilerin istatistiği bulma başarısının artacağını öngörüyoruz.” Ardından nasıl sınayacağınızı belirtin: aynı görevi yönlendirmeden verip bulma başarısını, yanlış eylemleri ve yardım ihtiyacını karşılaştırın. Hipotez, bu karşılaştırma yapılana kadar kanıtlanmış sonuç değildir.

Sonuç

İyi mobil kullanıcı deneyimi, kullanıcının hedefi ile arayüzün anlattığı eylemlerin uyuşmasıyla başlar. Görünür erişim yolları keşfetmeyi, açık etiketler tanımayı, görevlerden türetilmiş bilgi mimarisi yön bulmayı destekler. Görsel hiyerarşi ve boşluklar bu yapının algılanmasını kolaylaştırabilir; dokunma alanları ve erişilebilir durumlar ise eylemin farklı koşullarda kullanılmasını sağlar.

Bilimsel modeller karar vermeyi disipline eder, fakat bağlamın yerine geçmez. RY Tracker örneğinde kartları önceliklendirmek ve ayrıntıları alışkanlık bağlamına taşımak, sınanabilir tasarım önerileridir. Kendi ürününüzde de önce bir görev seçin, kullanıcının nerede duraksadığını gözlemleyin ve yalnızca görünüşü değil görevin anlaşılmasını iyileştiren değişiklikler yapın.

Bu yazı, Mobil UX/UI Tasarım Rehberi — Bilimden Ekrana serisinin ilk makalesidir. Sitedeki diğer içeriklere Yazılar arşivinden ulaşabilirsiniz.

Kaynaklar

Kaynaklar 8 Ekim 2026 tarihinde kontrol edildi. Yayın tarihi belirtilmeyen güncel belgelerde tarih uydurulmadı. Bibliyografik kayıt doğrulaması, çalışmanın bütün deney sonuçlarının yeniden incelendiği anlamına gelmez. Tasarım önerileri kaynakların bağlama uygulanmasına yönelik editoryal çıkarımlardır.

Serinin tüm yazılarını görüntüle →

1. ISO. Ergonomics of human-system interaction — Part 11: Usability: Definitions and concepts (ISO 9241-11:2018). 2018. Desteklediği konu: Kullanılabilirliğin kullanıcı, hedef ve kullanım bağlamıyla değerlendirilmesi.
2. W3C. Web Content Accessibility Guidelines (WCAG) 2.2. 2023; güncel Recommendation sürümü 12 Aralık 2024. Desteklediği konu: Erişilebilirlik, metin kontrastı, yeniden boyutlandırma ve işaretçi hareketleri ölçütleri.
3. Don Norman. Affordances and Design. Web sayfası: 17 Kasım 2008. Desteklediği konu: Eylem olanağı, algılanan eylem olanağı ve arayüz ipuçları ayrımı.
4. Don Norman. Signifiers, not affordances. 2008; Interactions 15(6). Desteklediği konu: Algılanabilir ipuçlarının eylem ve durum anlamını iletmesi; yazarın ACM yazısı.
5. Raluca Budiu / Nielsen Norman Group. Memory Recognition and Recall in User Interfaces. 15 Ocak 2024. Desteklediği konu: Tanıma ve hatırlamada bellek ipuçlarının rolü.
6. Jakob Nielsen / Nielsen Norman Group. 10 Usability Heuristics for User Interface Design. 24 Nisan 1994; son inceleme 30 Ocak 2024. Desteklediği konu: Tanımayı destekleme, sistem durumu ve uzman hızlandırıcıları.
7. W. E. Hick. On the Rate of Gain of Information. 1952; Quarterly Journal of Experimental Psychology 4(1), 11–26. Desteklediği konu: Kontrollü seçimli tepki görevlerinde alternatifler ve bilgi kazanımı ilişkisi.
8. Ray Hyman. Stimulus information as a determinant of reaction time. 1953; Journal of Experimental Psychology 45(3), 188–196. Desteklediği konu: Uyarıcı bilgisi ve tepki süresi araştırmasının bibliyografik doğrulaması; DOI: 10.1037/h0056940.
9. John Sweller. Cognitive Load During Problem Solving: Effects on Learning. 1988; Cognitive Science 12(2), 257–285. Desteklediği konu: Problem çözme kaynakları ile öğrenme ilişkisi; kuramın eğitim bağlamı.
10. John Sweller, Jeroen J. G. van Merriënboer, Fred Paas. Cognitive Architecture and Instructional Design: 20 Years Later. 22 Ocak 2019; Educational Psychology Review 31, 261–292. Desteklediği konu: Çalışma belleği ve içsel/dışsal bilişsel yük ayrımının güncel çerçevesi.
11. Jakob Nielsen / Nielsen Norman Group. Progressive Disclosure. 3 Aralık 2006. Desteklediği konu: Gelişmiş veya seyrek kullanılan seçenekleri ikinci düzeyde sunma.
12. Jen Cardello / Nielsen Norman Group. The Difference Between Information Architecture (IA) and Navigation. 22 Haziran 2014. Desteklediği konu: İçeriğin örgütlenmesi ile navigasyon bileşenleri arasındaki ayrım.
13. Kelley Gordon / Nielsen Norman Group. Visual Hierarchy in UX: Definition. 17 Ocak 2021. Desteklediği konu: Boyut, kontrast ve gruplama üzerinden görsel önem ilişkileri.
14. Aurora Harley / Nielsen Norman Group. Proximity Principle in Visual Design. 2 Ağustos 2020. Desteklediği konu: Yakınlık yoluyla görsel gruplama.
15. Aurora Harley / Nielsen Norman Group. Similarity Principle in Visual Design. 6 Eylül 2020. Desteklediği konu: Benzer özelliklerin ilişkili algılanması.
16. Google / Material Design 2. Spacing methods. Sayfada doğrulanmış yayın tarihi yok. Desteklediği konu: 8 dp ve 4 dp ızgara; eski Material sürümünde boşluk düzeni.
17. Paul M. Fitts. The information capacity of the human motor system in controlling the amplitude of movement. 1954; Journal of Experimental Psychology 47(6), 381–391. Desteklediği konu: Hareket mesafesi ve hedef genişliğiyle motor performans ilişkisi.
18. I. Scott MacKenzie. Fitts’ Law as a Research and Design Tool in Human-Computer Interaction. 1992; Human–Computer Interaction 7, 91–139. Desteklediği konu: Shannon biçimi, deneysel katsayılar ve modelin sınırlılıkları; DOI: 10.1207/s15327051hci0701_3.
19. W3C / WAI. Understanding SC 2.5.8: Target Size (Minimum). WCAG 2.2 açıklaması; sayfada sabit yayın tarihi yok. Desteklediği konu: AA düzeyinde 24 CSS piksel hedef, aralık koşulu ve istisnalar.
20. W3C / WAI. Understanding SC 2.5.5: Target Size (Enhanced). WCAG 2.2 açıklaması; sayfada sabit yayın tarihi yok. Desteklediği konu: AAA düzeyinde 44 CSS piksel hedef ve istisnalar.
21. Apple. UI Design Dos and Don’ts; ek resmî rehber: Accessibility — Human Interface Guidelines. Sayfalarda doğrulanmış yayın tarihi yok. HIG’de iOS/iPadOS için 44 × 44 pt varsayılan kontrol boyutu ile daha küçük minimum ayrı gösterilir; bu yazı 44 × 44 pt değerini öneri olarak kullanır. Desteklediği konu: 44 × 44 pt dokunma hedefi önerisi.
22. Google / Android Developers. Make apps more accessible. Son güncelleme: 22 Eylül 2026. Desteklediği konu: 48 × 48 dp dokunma alanı ve erişilebilir etiket önerileri.