Hücresel kullanım sorunları için WordPress sitenizi nasıl test edersiniz
Neredeyse iki yıl önce, hücresel için tasarım yaparken odaklanmanız gereken kullanıcı deneyimi tasarımının temel yönleri hakkında bir yazı yazdım. Post, hücresel için dört UX önceliğini tanımlar: dokunulmuş alanlar, navigasyon, formlar ve etkileşimler. O zamandan beri iki yıl geçti ve web geliştirme dünyasında birçok şey hareket ediyor. Her ne kadar son iki yıldır hücresel gelişimde, görevden iki yıl önce olduğundan çok daha yavaş hareket ettiklerini iddia etsem. İPhone 2007’den beri ve 2008’den beri Android’de olmasına rağmen, web geliştiricileri birkaç yıldır hücresel tasarım ve hücresel UX ile gerçekten ilgilenmiyorlar. Apple, yıllarca web sitesinin küçük tarayıcıya uyacak şekilde küçülse bile masaüstlerinde iyi çalıştığı konusunda ısrar etti ve medya sorgularının çoğu web sitesi stili sayfalarında kullanılması birkaç dakika sürdü. İlk odak noktası sitenin düzeni ve görünümü üzerinedir, ancak daha sonra kullanım görünür. El tipi bir cihazda bir web sitesi kullanmanın, bir dizüstü bilgisayarda veya masaüstü bilgisayarda kullanmaktan farklı bir deneyim olduğunu fark etmeye başladık ve bunları mobil cihazlar için tasarlama ve geliştirme yollarımızı geliştiriyoruz.
Bu yüzden son yazıma koyduğum hücresel için UX önceliğinin son iki yılda pek değişmediğini iddia ediyorum. Ama bir öncelik daha ekleyeceğim: hız. Hızlı içermeyen siteler ziyaret etmek eğlenceli olmayacak ve ana ekran görünmeden önce bile birçok insanı terk etmesini sağlayacaktır. Birçok mobil cihaz artık masaüstü cihazlardan daha hızlı internet bağlantılarına sahiptir; Yavaş kamu hizmetlerine bağlanmaya ve bunun yerine 4G kullanmaya çalışırken sık sık wifi’imi kapatıyorum. Trende WiFi kullanmayı denediyseniz, kesinlikle neden bahsettiğimi biliyorsunuz. Ancak yine de sitenizin performansını masaüstü ve mobil cihazlarda test etmeniz gerekiyor. Bu yazıda, sitenizi bu kriterlerden nasıl test edebileceğinizi göreceğim. Mobil sitelerinizi test etmek ve erişemeyebileceğiniz mobil cihazları taklit etmek için kullanabileceğiniz bazı araçları tanımlayacağım. Mobil Aygıtlarda Test Test için net olan ilk yöntem mobil cihazları kullanmaktır. Sadece birkaçımız bunu tam olarak temsil eden stoklara sahip olabiliriz, ancak her şeyi test etmek için bir veya iki tane olması mantıklı. En son iPhone ve Android cihazlarını kullanmak, hücresel kullanımın çoğunu kapsayacak ve sadece bir emülatör veya simülatör kullanmak yerine testiniz için her zaman daha fazlasını ekleyecektir.
Sitenizi elinizde çalıştıran cihazı tutmak, siteyi ekranda görmekten daha derin kullanmayı deneyimlemenizi sağlar. Bu, etkileşiminizi, animasyonunuzu ve hızınızı test etmenize yardımcı olur. Başka ne kullanırsanız kullanın, her zaman mobil cihazlarla başlarım. Mobil cihazlarda test edebileceğiniz en iyi şeyler şunlardır: Dokunmuş alanlar – sitenizin etrafında deneme yapın ve parmaklarınızı veya başparmaklarınızı kullanarak tüm düğmeler, bağlantılar ve menüler ile etkileşime geçin. Diğer kullanıcılarla test edin (belki büyük elleri olan insanlar!). Dokunmuş alan en az 44 kare piksel ölçmeli ve kolayca tanımlanmalıdır.
Navigasyon – UX Cellular UX ile ilgili son yazımı yazdığımdan beri, burger menüsü hücresel bölgelerde giderek yaygınlaştı. Cihazda, animasyonun sorunsuz çalışıp çalışmadığını ve menü simgesinin bir parmak veya başparmak ile kolayca dokunulduğunu kontrol edebilirsiniz.
Form – Doldur form tartışmasız cep telefonunda yapabileceğiniz en düşmanca kullanıcı olan şeylerden biridir. Formu mobil cihazdaki test ederek, formunuzun iiotomatis ile iyi çalışıp çalışmadığını ve alanlar arasında sorunsuz bir şekilde hareket etmek için yapmanız gereken ne olursa olsun ve kullanıcıların yanlışlıkla yanlış alanda metne girmesine neden olmadığını kontrol edebileceksiniz. .
Etkileşim – Bağlantının parmaklarınız veya başparmak ile kolayca dokunup dokunmadığını, etkileşim sırasında çalışan tüm işlemlerin pürüzsüz olup olmadığını ve kullanıcıya ne olacağı hakkında bilgi verilip verilmediğini kontrol edin. Siteniz üçüncü taraflı uygulamalarla (örneğin YouTube) etkileşime giriyorsa, uygulamanın uygulamayı yükleyen bir cihazı kullanarak sitenizden açılacağını test edebilirsiniz. Ayrıca 3G. Eski cihazı da test etmenizi öneririz, böylece test edebilirsiniz – tüm ziyaretçileriniz (çoğu bile değil) en son cihazlara sahip olmayacaktır.
Hücresel Cihazlarda Geliştirme Siteleri Test Edilmesi UX Cellular testinin zorluklarından biri, yerel site geliştirmenin bir kopyasını mobil cihazlarda erişmektir. Ayrıca, cep telefonunda çalışamazsınız.
Ama bunun üstesinden gelmenin yolları var. Masaüstünüzle aynı ağda iken yerel sunucunuza mobil cihazınız üzerinden erişebilirsiniz. WordPress sitesi bazı ek ayarlar gerektirir, ancak bu, siteye doğrudan Localhost’ta erişebileceğiniz anlamına gelir. Hızlı test için tüm bunlardan geçmek istemiyorsanız, başka bir seçenek de sitenizin performansının bir sürümünü sunucunuzda oluşturmaktır. Bu şekilde mobil cihazlarda test edebilirsiniz ve sitenin yayınlandığı zaman yayınlanacağı siteyle aynı ortamda testin (mobil ve masaüstü) avantajlarından yararlanırsınız.
Bunu hazırladıktan sonra, sitenizin dokunulmuş alanı, navigasyon, şeklini, etkileşimini ve hızını yukarıdaki gibi test edebilirsiniz – ve bir evreleme sitesi kullanarak çok daha doğru bir hız testi elde edersiniz. Hücresel sitenizi test etmek için bir tarayıcı geliştiricisi kullanmak diğer seçenekler ve geliştirdiğimde ve gerçek cihazda test etmeye hazır olmadan önce kullandığım, doğrudan tarayıcınızda sağlanan araçları kullanmaktır. Google Chrome’da Chrome’da Cihazlar Aktarma, hücresel görünümleri etkinleştirerek ve devre dışı bırakarak sitenizi çeşitli Android cihazlarda görüldüğü gibi görebilirsiniz. Sağ -Sayfanızı tıklayın, menüden inceleyin, ardından Müfettiş penceresinin sol üst kısmındaki Aygıt Anahtarı simgesini tıklatın: Bu, sitenizin mobil cihazda görünümü hakkında bir fikir verir. Ekranın üst kısmındaki duyarlı gerilme menüsünü seçin, ardından sağlanan cihazı seçin:
Bu, her şeye sahip olmak zorunda kalmadan sitenizin çeşitli cihazlarda nasıl çalıştığını ve kullanıcı deneyimlerini test edebileceğiniz anlamına gelir.
Safari Safari Duyarlı Tasarım Modu, sitenizi iPhone veya iPad’de görüldüğü gibi görme seçeneğine sahiptir. Geliştirme> Duyarlı Tasarım Modu girin ve size bir dizi seçenek verilecektir. Farklı bir Apple cihazı seçebilir ve sitenizin görünümünü görebilirsiniz:
Bu, sitenizin eski ve yeni iPhone ve iPad’de görünümünü görebilmenin yararlı bir yoludur. Tarayıcıda ne test edebilirsiniz? Yani bu araçla, hücresel UX’inizin birçok yönünü test edebilirsiniz, ancak bazı şeyler aynı değildir:
Etkileşim, herhangi bir animasyonu veya işlemi test edebilir ve çeşitli ekran boyutlarında çalışacak şekilde kontrol edebilirsiniz, ancak dikkatli olun, çünkü cihaz tarafından çalışma biçimleri yalnızca cihazda test edilebilir.
Hız-Siteniz hücreselde farklı içerik içeriyorsa, karşılaştırma için hız müfettişini çalıştırabilirsiniz, ancak dikkatli olun, çünkü bu gerçekten masaüstünde temsil edilmez.Ancak, masaüstünüzdeki mobil cihazların deneyimine yaklaşmanın bir yolu vardır. Yani bir emülatör kullanarak.
Mobil cihaz emülatörünün veya simülatörünün bir emülatörü kullanmak, gerçek cihazı kullanma ve masaüstü tarayıcısındaki testler arasında bir denge verecektir. Onlar size sahip olmak zorunda kalmadan cihazdaki test deneyimine daha yakın bir şey vermek için tasarlanmıştır. Emülatör ve simülatör arasındaki fark, test ettiğiniz şeyin tüm yönlerini paketlemek için altta yatan bir sistem kullanan bir emülatördür. Simülatör çok derin değildir ve sadece hücresel deneyimi simüle eder. StackOverflow hakkında iyi bir benzetme buldum: “Uçuş simülatörü sizi A’dan B’ye götürebilirse, o zaman bir uçuş emülatörü olacak.” Android Emulator Android Emulator, sitenizi çeşitli Android cihazlarda keşfetme deneyimini taklit edecek. Yüklemek için Android Studio SDK’ya ihtiyacınız var. Not, bu araç ücretsizdir. Buradaki ayarlar hakkında ayrıntılı olarak açıklamayacağım, çünkü bu yeni bir sürümle değişen oldukça uzun bir süreçtir, ancak Android Emulator sitesinde eksiksiz talimatlar alabilirsiniz.
iOS emülatörü, Android için Google ile aynı olan Apple, iPhone ve iPad’de çalışan iOS işletim sistemi için bir simülatöre sahip. Kullanmak için simülatör uygulamasını içeren bir Xcode’a ihtiyacınız var. Bu, uygulamaları test etmek için tasarlanmıştır, ancak Safari’yi çalıştırmak ve web sitenizi test etmek için de kullanılabilir.
Opera Emulator Opera Opera Hücresel Tarayıcı, beklediğinizden daha fazla cep telefonunda kullanılır.Klasik tarayıcıları eski cep telefonlarında çalışır ve genellikle onlar için mevcut en iyi tarayıcıdır.Web geliştiricileri olarak, herkesin en son mobil teknolojiye sahip olduğunu varsayma eğilimindeyiz, ancak öyle değil.Siteniz, akıllı telefon kullanımının daha düşük olduğu dünyanın yerlerinden veya daha basit cep telefonlarını tercih eden nüfus bölümünden çok fazla trafiğe sahip olacaksa, operada denemeye değer.Opera’nın hücresel emülatörü, sitenizi çeşitli cihazlarda opera tarayıcısında test etmenizi sağlar.Bu, hoşuma giden nedenlerden biri olan tüm emülatörlerden kullanılması en basit olanıdır.
Bir emülatörle ne test edebilirsiniz? Bir emülatör veya masaüstü simülatörü kullanmak, bir tarayıcı aracı ile çok fazla test deneyimi eklemez, çünkü sitenizi hala tutamaz ve dokunulmuş alan gibi test edemezsiniz. Bununla birlikte, bu, test etkileşimi ve animasyon açısından tarayıcı aracından bir adımdır, çünkü bu bir masaüstünde değil hücresel bir ortamda çalıştırılacaktır. Dolayısıyla, siteniz hücresel olarak farklı çalışacak bir kod içeriyorsa, bu aracı kullanmak daha iyidir. Ve eski veya daha fazla standart telefon kullanan birçok ziyaretçiniz olacaksa, opera hücresel emülatörleri kullanmak iyi bir fikirdir. Benim gibiyseniz, sitenizi hücresel UX için test etmeyi unutmayın, bir masaüstü makinesinde (veya dizüstü bilgisayarda) bir geliştirme çalışması yapacaksınız. Bu, daha fazla araca, kod düzenleyicisine ve MAMP kullanarak yerel kurulumlara erişmenizi sağlar. Ancak sitenizi başlatmadan önce, kullanıcının deneyiminin pürüzsüz ve eğlenceli olup olmadığını kontrol etmek için en az bir mobil cihazda test etmeyi unutmamalısınız. Mobil cihaz, bir masaüstü tarayıcıda her zaman test edemeyeceğiniz farklı bir UX zorluğu görüntüler. Potansiyel ziyaretçileriniz tarafından kullanılabilecek her cihazı satın alamazsınız, bu nedenle bir veya iki fiziksel cihaz kullanmanın yanı sıra, yukarıda tanımladığım araçları çeşitli ortamlarda test etmek ve insanların ziyaret etmesini sağlamak için kullanabilirsiniz. Herhangi bir cihazdaki site harika bir deneyim yaşayacaktır. Konuşmaya katılmak! WordPress hücresel deneyimlerini test ederken hangi araçları yararlı düşünüyorsunuz?
Etiket:
hücresel
duyarlı Test Ortamı
