Harika Mobil UX için Nasıl Tasarlanır?

Harika bir mobil UX için nasıl tasarım yapılır, işletmenizin web'de yaptığı her şeyin ön saflarında yer almalıdır. Her şeyden önce mobili göz önünde bulundurarak tasarım yapmadığınız sürece, işletmeniz olması gerektiği ve olması gerektiği kadar başarılı olmayacaktır. Nedeni basit: Mobil, insanların İnternet'e erişmesinin bir numaralı yöntemi olarak uzun süredir masaüstünü geride bıraktı. Başka bir deyişle, mobil cihazlar için tasarım yapamamak…olabildiğince çok site ziyaretçisi, potansiyel müşteri ve müşteri elde edememek.

İstatistiklere bakalım.

Smart Insights'a göre, mobil kullanıcı sayısının masaüstü kullanıcı sayısını geçtiği noktayı geride bıraktık. Bu dönüm noktası 2014'te oldu. O zamandan beri, masaüstü kullanıcılarının sayısı daha yavaş artarken, küresel mobil kullanıcı sayısı agresif bir şekilde yükselmeye devam etti.

Sonuç olarak: Daha fazla potansiyel müşteri, ziyaretçi ve müşteri web sitenize masaüstü bilgisayarlarına değil cep telefonlarına gelecek.

Dönüşümlerinizi en üst düzeye çıkarmak istiyorsanız, sitenizin önce mobil için optimize edilmesi gerekir. Bugün, harika mobil UX aynı zamanda başarılı bir mobil pazarlamadır.

Hadi bir bakalım.

Harika Mobil UX için Nasıl Tasarlanır: İstatistikler Ne Diyor?

Örneğin, mobil öncelikli tasarım gibi işletmenizde harcamaları haklı çıkarmak için sağlam bir kullanım örneği oluşturmak istediğinizde, insanların bu günlerde nasıl ve nereden satın aldığına ilişkin istatistiklere bakmanız yeterlidir. Kanıtların sizi götürdüğü yere gidin.

Ticaret pazarlamasında uzmanlaşmış küresel teknoloji şirketi Criteo, yalnızca ABD'deki mobil satışların artık tüm e-ticaret işlemlerinin %52'sini oluşturduğunu açıklayan bir basın açıklamasıyla çıktı. Açıkçası, etkili ve başarılı bir şekilde satış yapmak istiyorsanız… harika bir UX ile çok verimli bir mobil varlığa ihtiyacınız var.

İşte ilk bakışta göründüğünden daha fazlasını ortaya koyan çok ilginç bir istatistik daha.

Adobe'nin Mobil Perakende Raporuna göre, dönüşümler masaüstünde mobilden 2,8 kat daha yüksektir. Bunun, mobil cihazlar için optimize etmenin önemli olmadığı anlamına geldiğini düşünüyorsanız, tekrar düşünün. Bu, özellikle mobil hala masaüstünden daha fazla trafik oluşturduğundan, mobil öncelikli bir stratejiye bağlı kalmak için daha fazla nedendir.

Dönüşümlerin masaüstünde daha yüksek olmasının nedeni, muhtemelen mobil deneyimlerin olması gerektiği kadar optimize edilmemiş olmasından kaynaklanmaktadır - insanların ilk etapta kendileri için daha uygun olan mobil cihazlarda alışveriş yapmayı ve dönüşüm sağlamayı tercih etmemelerinden değil !

Harika mobil UX uyguladığınız için mobil sitenizin mükemmel şekilde optimize edildiği, masaüstü sitenizden daha fazla trafik aldığı ve masaüstü sitenizden daha fazla dönüşüm gördüğünüz bir senaryo hayal edin.

Elinizin altında. İşte yapmanız gerekenler.

Başparmak İçin Tasarım… Ama Öncelikle Başparmak İçin Değil

Mobil kullanılabilirlik, insanların akıllı telefonlarıyla etkileşime girdiği bilinen çeşitli yolların tümüne dayanmalıdır. Harika mobil UX için nasıl tasarlanacağı, kanıta dayalı olduğu kadar sağduyuludur.

Bir mobil sitede gezinmek ve alışveriş yapmak için akıllı telefonumu kullanıyorsam, kullanıcımı gerçekleştirmek için telefonu bir elimde tutarken aynı elimde baş parmağımı kullanarak bunu yapmanın benim için daha uygun olduğunu varsaymak cazip geliyor. hedefler. İki elimi de kullanmanın (kullanıcı hedeflerime ulaşmak için bir elimde telefon ve diğer elin işaret parmağını kullanma) benim için daha az uygun olacağını varsaymak da aynı derecede çekici.

Bununla birlikte, bu geleneksel bilgelik aslında yanlıştır, çünkü insanların telefonlarını çalıştırmak için yalnızca veya esas olarak bir elini kullandığını varsaymaktadır.

Araştırmalar, insanların telefonlarını tutma ve onlarla etkileşim kurmanın aslında altı farklı yolu olduğunu gösteriyor. Altı yöntemin tümü için tasarım yapamayan herhangi bir mobil site başarısız olacak ve UX zarar göreceği için daha düşük dönüşüm oranları yaşayacaktır.

Altı yol şunlardır:

• Beşik (bir el telefonu desteklerken diğer elin başparmağı dokunur)
• Tut ve dokun (bir el telefonu desteklerken diğer elin işaret parmağı dokunur)
• Yatay yönlendirme için iki el (Nintendo 2DS XL gibi elde taşınabilir bir oyun cihazını nasıl tutacağınızı düşünün)
• Bir el – birinci sıra (bir el telefonu tutarken aynı eldeki başparmak dokunur)
• Bir el – ikinci derece (bir el telefonu tutarken aynı eldeki başparmak dokunur, ancak daha yüksek bir başlangıç ​​konumundan)
• Dikey yönlendirme için iki el (eski Nintendo Gameboy gibi bu sefer elde taşınabilir bir oyun cihazını nasıl tutacağınızı düşünün)

Şimdi, işlerin gerçekten alakalı olduğu yer burasıdır, işte bir telefonu tutmanın çeşitli yolları için farklı kullanım durumları:

• Bağlantılara dokunma – Çoğu basılı tutun ve dokunun veya beşik
• Onay kutuları – Çoğu beşik veya tutun ve dokunun
• Yazma – Çoğu, iki parmağı veya başparmağı aynı anda kullanır veya basılı tutun ve dokunun
• Kısa kaydırma - Çoğu basılı tutun ve dokunun veya beşik
• Daha uzun kaydırma - Çoğu beşik veya basılı tutun ve dokunun

Sonuç: Mobil sitenizi, insanların telefonlarını tutma biçimlerinin çeşitliliğini barındıracak şekilde tasarlayın.

Daha Büyük Düğmeler Daha İyi

Harika bir mobil UX için nasıl tasarım yapacağınızı düşünüyorsanız, işe başlamanın en önemli yönlerinden biri düğme boyutudur. Mobil olan her şeyde olduğu gibi, ekran boyutunuz tablet veya masaüstünden çok daha küçüktür, bu nedenle düğmeler çok küçükse mobil sitenizin kullanılabilirliğinden ödün verir. Yetersiz boyuttaki düğmeler aşağıdaki gibi UX hatalarına yol açar:

• Düğmelere düzgün bir şekilde dokunma zorluğu
• Düğmeleri ilk etapta görmeyle ilgili sorunlar
• Bir düğmeye dokunulabileceğini veya başka bir şekilde etkileşime geçilebileceğini anlamakta güçlük çekme

Daha büyük tarafında Err daha iyidir.

Daha büyük düğmeler, alışveriş yapanlarınız, müşterileriniz, ziyaretçileriniz vb. için daha sorunsuz bir UX sağlar.

Bu, soruyu soruyor, tam olarak ne kadar büyük?

Google'ın kendi Materyal Tasarımı Dokunmatik Hedef Boyutu yönergelerine göre, mobil düğmelerin dokunmatik ekran boyutu 7 ila 10 milimetre arasında olmalıdır. Başka bir deyişle, butonlar hangi ekranda göründüklerine bakılmaksızın yaklaşık 1 santimetrelik bir fiziksel boyuta sahip olmalıdır. Bu, aşağıdakiler arasında mükemmel bir denge sağlar:

• bilgi yoğunluğu
• Kullanıcı arayüzü öğelerinin "hedeflenebilirliği"

Kullanıcılarınız düğmeleri daha kolay görebildiklerinde, diğer ekran öğeleriyle uzamsal ilişkilerini anladıklarında ve sayfa hedeflerini başarıyla tamamlamak için onlara dokunduğunda, onlara harika bir UX verirsiniz.

En Önemli İçeriğe Öncelik Verin

Harika bir mobil UX için nasıl tasarlanır sorusunun cevabı. bazen eklemek yerine çıkardığında yatar. Ekran içeriği olması durumunda bu kural %100 geçerlidir.

Akıllı telefonların nimeti, son zamanlarda mobil ekran boyutunu artırma eğilimine rağmen, küçük ve taşınabilir boyutlarıdır. Bu kolaylığın bir dezavantajı vardır, bu da kullanıcıların daha büyük bir etkileşim maliyetine maruz kalmasıdır. Bu, mobil site hedeflerine ulaşmak için harcamaları gereken fiziksel ve zihinsel çabadır.

Örneğin, masaüstünüzde bir haber sitesinde gezinirseniz, ana sayfada spor skorlarını ve hava durumu tahminlerini ekranın üst kısmındaki kenar çubuklarında görebileceksiniz, böylece aşağı kaydırmak zorunda kalmazsınız. Bununla birlikte, mobilde aynı içeriğe ulaşmak için büyük olasılıkla ciddi bir kaydırma gerektirecektir, çünkü alan mobilde çok değerlidir.

Bu nedenle tek çözüm, mobil cihazlarda ekranın üst kısmındaki en hayati içeriğe öncelik vermektir. Diğer bir deyişle, mobil sayfalarınızda ekranın üst kısmında kullanıcılarınıza ve ziyaretçilerinize hangi içeriği göstereceğinizi iyice düşünün. Sonuçta, ekranın üst kısmına eklediğiniz her içerik öğesi için, başka bir öğenin aşağı itilmesi ve hatta ekranın altına feda edilmesi gerekir.

Ekranın üst kısmındaki mobil içeriği en üst düzeye çıkarmanıza yardımcı olacak bir yaklaşım, sözde kromu en aza indirmektir. Bu durumda Google'ın tarayıcısından bahsetmiyoruz. Chrome, kullanıcıların bir arayüzün içeriğiyle etkileşime girmesine veya bu içerik hakkında ek bilgi vermesine yardımcı olan, ancak içeriğin bir parçası olmayan görsel tasarım öğeleri topluluğudur. Chrome, cep telefonunun işletim sisteminden gelir.

Gmail uygulamanızın gelen kutusundaki e-postaları görüntülerken kişilerin hesaplarıyla ilişkilendirilen tüm resimler kroma örnek olarak verilebilir. Bu örnekte, bu resimler ek olarak gönderenlerinizi tanımlamanıza yardımcı olur, ancak onları tanımlamada kesinlikle gerekli değildir (e-postadaki Gönderen satırının kendisi yeterli olacaktır).

Bu krom öğeleri azaltarak, mobil ekran alanından büyük ölçüde tasarruf edersiniz ve bu nedenle en önemli bilgileri küçük katlama alanının üzerine yerleştirme şansınız artar.

Son Kullanıcıya Odaklanın

Harika mobil UX için nasıl tasarlanacağının sırrı her zaman son kullanıcıya iner. Mobil sitelerinizi tasarlarken bunu aklınızda bulundurun ve kullanıcı dostu bir site oluşturacaksınız. Bu kadar basit.

Oraya ulaşmak için, varsayımlara değil, gerçek verilere dayanarak tasarım yaptığınızdan emin olun. Başlamak için harika bir yer, kullanıcılarınızın telefonlarını ilk etapta nasıl tuttuğudur. Pek çok insanın telefonlarını bile tutmadığı bir şekilde tasarım yapıyorsanız, tüm bahisler kapalıdır.

Küçük mobil ekranlar nedeniyle içeriğin kolay ve hızlı bir şekilde görülmesi gerektiğini de unutmamak önemlidir, bu nedenle öğeleri büyütün ve en önemli içeriğin ekranın üst kısmında olduğundan emin olun.