Her Tasarımcının Uyması Gereken 5 Mobil Ux İpucu

Kullanıcılar daha küçük cihazlarına bağlı kalmaya devam ettikçe, mobil performans sorunları da dahil olmak üzere, şu anda mobil sorunları düzeltmeye çok fazla odaklanılıyor.

Genellikle bu sorunlar, bir site başlatıldıktan sonra, mobil kullanılabilirlikle ilgili Google Arama Konsolu raporlarında hatalar ortaya çıkmaya başladığında çözülür. Geliştirme ekipleri genellikle bu tür hataları çözebilirken, tasarımcıların en başından itibaren mobil UX en iyi uygulamalarını anlaması ve uygulaması çok daha verimlidir.

Mobil hız, arama motoru optimizasyonu için de büyük bir faktördür, bu nedenle tasarımcılar ve geliştiriciler, animasyondan görüntülere kadar her şeyin bu metrikleri nasıl etkileyeceğini düşünmek zorundadır.

Tasarım öğelerinin aralığına odaklanın

Tasarım öğelerini boşluk bırakmak sadece güzel bir görsel akış yaratmakla ilgili değildir; mobil cihazlardakiler de dahil olmak üzere tüm ziyaretçiler için sitenizin kullanımını kolaylaştırmakla ilgilidir.

Google Search Console'daki yaygın bir mobil kullanılabilirlik hatası, "tıklanabilir öğelerin birbirine çok yakın olması"dır.

Bu, sitede gezinmeye çalışırken yanlışlıkla öğelere tıkladıkları daha küçük cihazlarda ziyaretçiler için sinir bozucu bir deneyim yaratır.

Bir mobil UX tasarımı açısından, düğmeler ve etkileşimli veya tıklanabilir öğelerin yeterince büyük olması ve tasarımda yeterince uzağa yerleştirilmesi gerekir.

Bir masaüstünde, ziyaretçiler çok hassas bir araç olan bir fare ile gezinirken, mobilde çoğu kullanıcı başparmaklarını kullanıyor. Başparmaklar genellikle küçük fare imlecinizden daha büyüktür ve özellikle bir sitede yürürken veya çoklu görev yaparken gezinmeye çalışıyorsanız biraz daha hantal olabilir.

Bu nedenle, ziyaretçinin sinir bozucu bir mobil deneyim yaşamaması için düğmeler ve öğeler arasında yeterli boşluk tasarlamanız gerekir.

Ayrıca erişilebilirliği ve ziyaretçilerin daha küçük cihazı nasıl tuttuğunu da göz önünde bulundurmanız gerekir. Bazıları telefonu veya tableti sol eliyle, bazıları sağ eliyle, bazıları ise iki eliyle tutuyor olabilir. Site tasarımı, bundan bağımsız olarak gezinmesi kolay olmalıdır.

Son olarak, ziyaretçiler cihazda gezinmek ve web sayfasında gezinmek için başparmaklarını da kullanıyorlar, bu nedenle, kaydırma sırasında yanlışlıkla dokunabilecekleri tıklanabilir büyük öğeler olmadığından emin olmanız gerekir.

Metin ve yazı tipinin okunabilirliğini sağlayın

Boşluğa ek olarak, Google Arama Konsolu raporlarındaki bir diğer yaygın mobil kullanılabilirlik hatası "metin okunamayacak kadar küçük" olmasıdır. Bir geliştirici, yazı tipi boyutunun bazı yönlerini ayarlayabilirken, tasarım ekiplerinin baştan itibaren okunabilirlik açısından uygulayabileceği birkaç UX en iyi uygulaması vardır.

Kolayca okunabilen bir yazı tipi seçmek, başlamak için ilk yerdir. Kullanıcıların genellikle daha küçük cihazlarında yürürken veya birden fazla görevi yerine getirirken veya dışarıda olduklarını ve sitenizde gezinmeye çalışırken ideal olmayan senaryolarda olabileceklerini unutmayın.

Yazı tipi boyutu açısından görsel bir hiyerarşi oluşturmak, bu mobil kullanıcıların sayfanın içeriğini hızlı bir şekilde taramasına ve anlamasına yardımcı olmanın başka bir yoludur. Ayrıca, başlık metinlerinin bir sonraki satıra kaydırılabileceği mobil veya tablet cihazlarda da yardımcı olur. Sayfa boyunca aynı yazı tipini ve boyutları kullanmak, sayfanın anlamı konusunda kafa karışıklığına neden olabilir.

Tasarımlarınızda, bir sayfanın okunabilirliğini artırmak için metin satırları arasındaki satır yüksekliğini de artırabilirsiniz.

Yazı tipine ve boyutuna karar verdikten sonra, renk kontrast oranlarını da göz önünde bulundurmalısınız.

Ziyaretçiler içeride veya dışarıda ya da zayıf ışıkta olabileceğinden, arka plan ve ön plan renkleri arasındaki kontrast standartlarına uymak önemlidir.

Bu aynı zamanda erişilebilirlikte ve ADA uyumlu bir web sitesi oluşturmada rol oynar. WCAG 2.1 standartlarına göre normal metin için en az 4,5:1 ve büyük metin için 3:1 kontrast oranı önerilir.

Fareyle üzerine gelindiğinde ve animasyonun en iyi uygulamaları izlediğinden emin olun

Günümüzde çoğu web tasarımı bazı mikro animasyonlar ve etkileşimli bileşenler içermektedir; yeniden tasarım sürecinde müşterilerden gelen ortak bir istektir.

Bir siteye hareket eklemek genellikle tasarımcılar ve geliştiriciler arasında bir işbirliğidir, çünkü animasyon sayfa yükleme süresini etkileyebilir ve iyi kodlanmadığında sonsuz kalite kontrole neden olabilir. Tasarım sürecinde animasyonları seçerken, bu etkileşimlerin mobil cihazlarda gerçekleşip gerçekleşmeyeceğini de planlamanız gerekir.

Performans sorunları nedeniyle, özellikle mobil ağdaki ziyaretçiler için sitenin yüklenme süresini yavaşlatabileceğinden, mobil cihazlarda karmaşık animasyonları ve video arka planlarını kapatmak yaygındır. Bu tür bir değişiklik, mobil sayfa hızının Google'ın sıralama faktörlerinden biri haline geldiği 2018'den beri giderek yaygınlaşıyor.

Genel olarak, animasyon ve etkileşim, kullanıcı deneyimini desteklemek için incelikli şekillerde kullanılmalı ve ziyaretçinin dikkatini dağıtmamalıdır. Bir ziyaretçinin bir eylemi tamamlamasına yardımcı olmak için önemli bir bileşen de olmamalıdır.

Fareyle üzerine gelme, mobil cihazlarda farklı görünebilecek başka bir yaygın tasarım öğesidir. Masaüstünde üzerine gelme, ziyaretçi fareyi üzerine getirdiğinde metni değiştiren veya gösteren bir nesneyi veya resmi ifade eder. Bu, büyük cihazlarda iyi çalışsa da, mobil cihazlarda ziyaretçilerin fare kullanmadığını, yani ziyaretçinin üzerine gelindiğini görmek için dokunması gerekeceğini unutmayın.

Bu nedenle, fareyle üzerine gelindiğinde metni gösteren bir kutunuz veya resminiz varsa, mesajın ziyaretçilerin adımları için kritik olmadığından emin olmalısınız.

Animasyonu tartışırken, siz ve geliştirme ekibiniz, flash veya güncel olmayan teknolojilerle ilgili hataları önlemek için Google'ın web animasyonu yönergelerine yönelik en iyi uygulamalarını da inceleyebilirsiniz.

Pop-up'ların ve üçüncü taraf öğelerin yerleşimini planlayın

Web sitelerinde pop-up formların kullanılıp kullanılmayacağı ve mobil cihazlarda uygulanıp uygulanmayacağı konusunda her zaman çok fazla tartışma olmuştur.

Mobil cihazlarda açılır formlardan kaçınmanın bir argümanı, bir ziyaretçinin formu veya mesajı kapatmasının daha zor olabileceğidir. Ocak 2017'den bu yana Google, bir sayfadaki tüm içeriğin bir ziyaretçiye görünmesini engelleyen müdahaleci geçiş reklamlarının kullanılmasına karşı uyarıda bulunuyor, çünkü bunlar özellikle mobil cihazlarda sorun yaratıyor.

Açılır formlar hakkında müşterilerle yaptığınız görüşmelerde tüm bu unsurları tartabilir ve form tasarımı için en iyi kullanıcı deneyimine karar verebilirsiniz.

Mobil tabanlı bir tasarım yaklaşımı benimserken, öğelerin daha küçük cihazlara nasıl yerleştirileceğini düşünmek yardımcı olur. Örneğin, ekranın sağ tarafında, ziyaretçi kaydırırken kalan yapışkan bir düğme masaüstünde sorunsuz çalışabilir, ancak bu tür yapışkan öğeler, bir mobil cihazda görüntüleme alanını daha da küçültebilir.

Canlı sohbet ve erişilebilirlik widget'ları gibi bazı öğeler son anda eklenebilirken, bunları web tasarım sürecinde daha erken planlamak, ziyaretçiler için kaotik bir arayüzden kaçınmaya yardımcı olabilir.

Canlı sohbet son derece popüler bir araç haline geldi ve sohbet widget'ları genellikle tasarımın sağ veya sol alt köşesinde bulunur. Tasarım maketlerine dahil ederek bu öğelerin yerleşimine ilişkin öneriler sunmak, çakışan öğelerle ilgili sorunları önceden görmenize yardımcı olacaktır.

Form tasarımını ve yerleşimini yeniden gözden geçirin

Bir mobil cihazda veya daha küçük bir tabletteyken form doldurmak ve göndermek, ziyaretçiler için can sıkıcı bir görev olabilir. Bu nedenle site tasarımında formlara alternatif seçenekleri değerlendirmek çok önemlidir.

Mobil menü navigasyonunu oluştururken, ziyaretçilerin işletmeye kolayca ulaşabilmesi için başlığa bir "tıkla ve ara" telefon numarası eklemeyi düşünün.

Sitedeki tüm formları tasarlarken, form alanlarının sayısını olabildiğince azaltmak ve neyin gerekli bir alan olduğunu açıkça belirtmek hem masaüstü hem de mobil için en iyi uygulamadır.

Bir formun mobil deneyimi için bir ipucu, yalnızca form alanları için yer tutucu metin kullanmak değil, form etiketleri tasarlamaktır. Bir mobil cihazdaki bir ziyaretçi, diğer bildirimler ve etkileşimler tarafından kolayca kesintiye uğrayabilir, bu nedenle form tamamlama sürecinde kesintiye uğrayabilir ve yer tutucu metnin ne listelendiğini unutabilirler. ADA uyumluluğu için net form etiketleri ve hata mesajları sağlamak da önemlidir.

Son olarak, form yerleşimi dönüşümleri etkileyebileceğinden, formun sayfaya yerleştirilmesi ve bunun duyarlı düzen ile nasıl ayarlanabileceği çok önemlidir.

Çözüm

Mobil performansa artan odaklanma göz önüne alındığında, projelerinizi tasarlarken yukarıdaki fikirlerden bazılarını uygulamaya koymak, bu projeler başlatılırken size zaman ve hayal kırıklığı kazandıracaktır. Tasarım akışınıza yardımcı olan ek mobil UX ipuçları var mı? Aşağıda bir yorum bırakın!

Sonraki: Yararlı çevrimiçi kurslarla web tasarım becerilerinizi geliştirin!

Mobil UX tasarımı, profesyonel bir web tasarımcısı olarak takip etmeniz gereken birçok şeyden sadece biridir. Becerilerinizi geliştirmek için her zaman çok fazla zaman olmasa da, çevrimiçi bir kurs almak, eğitiminize devam ettiğinizden emin olmanın harika bir yoludur.

Bu makale, web tasarımcıları için en iyi çevrimiçi kurslardan bazılarının kapsamlı bir listesini sunar (+ne kadara mal olur), böylece mevcut tüm seçenekleri aramak için daha fazla zaman harcamanıza gerek kalmaz!