E-Niaga Hücresel Web Sitesi Tasarımı: Bunu doğru yapmak için 10 ipucu (2021)
Kısa süre önce UI e -ticaret tasarımı hakkında bir makale yayınladık. İçinde, mobil cihazlar için e -ticaret web sitesi tasarımı hakkında konuşurken, tüm ayrı yayınları onunla doldurabileceğinizden bahsediyoruz. Aşağıda, e -ticaret web sitenizde hücresel dostluk deneyimleri yaratmak için en iyi uygulamayı tartışacağız. Bazı istatistiklerle başlayacağız ve neden önemli olduğunu ve hücresel kullanıcıların satın alımlarını çözmemesini sağlayan genel kullanıcı arayüzü sorununu inceleyeceğiz. E -ticaret web sitesi tasarımınızı hücresel kullanıcılar için nasıl daha çekici hale getirebileceğinizi çeşitli teknikleri takip edeceğiz.
E-Niaga web sitesi için neden hücresel tasarıma önem veriyor? Dürüst olmak gerekirse, yukarıdaki soruyu sormanız gerekiyorsa, yaklaşık yedi yıldır taş altında yaşamış olabilirsiniz. Ancak, günüm eğlenceli olduğu için ve Torquemag’ın hayatlarının durumuna bakılmaksızın kimseye karşı ayrımcılık yapmaması için katı bir politikası olduğu için, bir an için sizi neşelendirirdim. Gerçek #1: İnternet trafiğinin yarısından fazlası mobil cihazlardan geliyor.
İlk Google Hücresel Dizin ve WordPress siteniz için ne anlama geliyor
WordPress için duyarlı tasarım hakkında bilgi sahibi olmanız gerekir
Web sitenizin hızını nasıl test edersiniz (metrikler, araçlar, optimizasyon ipuçları)
WordPress’i hızlandırmanın ve yükleme süresini azaltmanın 14 yolu, hayati web çekirdeği hakkındaki makalemizi görmek isteyebilirsiniz.
Dikkat etmeniz gereken faktörler duyarlı tasarım, hızlı yükleme süresi ve HTTP’lerin kullanımıdır. Ziyaretçilerin pan ve yakınlaştırmaları gerekmez (ayrıntıları görmek için ürün görüntülerini artırmak hariç). Ayrıca sitenizi hızlı bir şekilde görmek ve cep telefonlarında alışveriş yaparken kredi kartı bilgilerinin güvenliği konusunda endişelenmemek istiyorlar. 2. Başparmak dostunun bir sonraki konumuna ve boyutuna önemli bir unsur yerleştirin, kullanım hakkında konuşalım. Bu şaşırtıcı olabilir, ancak çoğu insan akıllı telefon ekranlarında gezinmek için başparmaklarını kullanır. Bu gerçek ekranın bazı bölümlerini diğerlerinden daha erişilebilir hale getirir.
Bu nedenle, kullanıcılarla kolayca ulaşılabilecek parçalarda etkileşime girecek önemli kontroller yerleştirmek daha iyidir. Bir menü, harekete geçme davetiyesi veya önemli düğme olabilir. Twitter bunu çok iyi yapıyor.
Bununla birlikte, sadece başparmağın erişimini düşünmek önemli değildir, aynı zamanda boyutu da düşünmelisiniz. Başparmak genellikle diğer parmaklardan daha kalındır (biliyorum, bugün burada çok şey öğrenirsiniz) ve genel olarak parmaklar imleç faresinden daha büyük olmalıdır. Bu, hücresel kullanıcıları öğeleri tıklatma veya tıklatma olasılığını artırır. Kendiniz, çok küçük olduğu için bağlantıyı, düğmeyi veya diğer öğeleri kaybetmeye devam ettiğiniz bir konumda olabilirsiniz. Bu can sıkıcı, değil mi? Diğer insanlar da öyle düşünüyor. Bu nedenle, boyutun oldukça büyük olduğundan emin olun. Örneğin, Apple, retina ekranı için noktalarda minimum 44×44 piksel veya aynı boyutta düğme boyutu önerir. 3. Mobil cihazlardaki diğer farklı şeylerin ihtiyaç duyduğu rulo sayısını en aza indirin, hücresel kullanıcılar tıklamak/dokunmak yerine yuvarlanmaya alışkındır. Bu nedenle, daha uzun bir sayfada bilgi verseniz iyi olur, böylece birkaç sayfadan istediklerini elde etmelerini istemekten daha aşağı kaydırabilirler. Ancak, daha doğal olduğu için, sevdikleri ve bunu yapmak istedikleri anlamına gelmez. Ve bunu yapmak ve yapmak ve yapmak istiyorum ve yapmak ve yapmak ve mümkün olduğunca çok istiyor. Aslında, çoğu sayfanın başlangıcından geçmedi. İzleme süresinin% 81’i ilk üç ekran tam bilgilerde harcanır. Nielsen Norman Grubu Bu nedenle, yapmaları gereken rulo sayısını en aza indirmeye ve sayfanızın en önemli kısmını üste yakın tutmaya çalışmalısınız. İşte bunun için bazı fikirler: Gölgelik, navigasyon ve filtre seçeneklerini doğasında yapın (aşağıda daha fazla bilgi)
Arka arkaya bir düğme sağlayın
Bir atlama bağlantısı olan bir içerik tablosu ekleyin
Kullanıcının her şeyi bir menüde görmesi için öğeyi işaretlemesine izin verin
4. Yukarıdaki istatistiklere bakarsak, çok kanallı bir deneyim verin, hücresel kullanıcıların cihazlarında masaüstü meslektaşları kadar alışveriş yapmasalar da, yaptıkları bir şey araştırma olduğu açıktır. El cihazının rolü, ürünleri karşılaştırmak, bilgi toplamak ve kararlar almaktır. Sonunda satın almayı nerede tamamladıklarını biliyor musunuz? Masaüstünde ratleomundo. Satın alma işlemini tamamladıkları yerde nasıl yapabileceğinizi biliyor musunuz? Telefondaki alışveriş sepetine ekledikleri ürünlerin masaüstü makinelerine girdiklerinde hala alışveriş sepetlerinde olmalarını sağlayarak. Buna satış/perakende/niaga omni-kanal olarak da adlandırılır. 5. Başlığınızı yapışkan hale getirmek için en önemli öğeye sahip yapışkan bir başlık ekleyin, yani kullanıcı aşağı kaydırıldığında ekranda kalacaktır, ziyaretçilere oraya erişmeleri için kolay bir yoldur. Neden başından beri yapmak zorundasın? Çünkü cep telefonlarında, genellikle en önemli bilgilerden bazılarını içeren unsurlar:
Ana sayfaya geri bağlantı (site logosu aracılığıyla)
Gezinme menüsüne erişim, arama işlevi, alışveriş sepet
Dil değiştirme gibi diğer merkezi unsurlar
Biraz uzaklaşmak istiyorsanız, görünmez hale getirebilirsiniz, ancak geri döndüğünüzde tekrar ortaya çıkabilirsiniz.
https://codepen.io/tutsplus/pen/wnerwwp
Mesele, kullanıcılara ileri geri kaydırmalarına gerek kalmadan sıklıkla kullanılan özelliklere erişim sağlamaktır. Bu aynı zamanda arama işlevinin kullanımının arttırılması anlamına gelir:
Küçük bir klavyeye daha az yazmaları için öngörücü arama kullanın Benzer şekilde, Search6’yı silmeyi kolaylaştırmak için X düğmesini ekleyin. Navigasyon hakkında konuşurken rahat navigasyon sağlamak, elbette, mobil cihazlarda bu, masaüstü meslektaşlarından çok farklı. Her şeyden önce, sınırlı alan nedeniyle, onu yoldan uzak tutmalısınız, ancak yine de erişilebilir. Mobil dostu navigasyon menüleri tasarlamanın birkaç yolu vardır. Son zamanlarda en yaygın çözüm Hamburger menüsü denir.
Yandan hareket ettirebilir, tam ekran menüsü olarak görünebilir, mızıka gibi genişletebilir ve daha fazlasını yapabilirsiniz. Daha sonra, orijinal UI makalesinde bahsettiğimiz ve yukarıda görüldüğü gibi, hiyerarşiyi düz tutun. Bu, alıcıların aradıkları ürünü hızlı bir şekilde alabilmeleri için menüde önemli kategorileri ve alt kategorileri girmek anlamına gelir.
Ardından, filtre seçeneğini verin ve görünür kalmaya devam edin. Bu, özellikle birçok ürün türünüz varsa, ziyaretçileriniz tarafından yaygın olarak kullanılacak bir şeydir.
Son olarak, hücresel sitenizde ekmek kırıntıları sağlamayı ve sitenizi daha iyi gezinmelerine yardımcı olmayı düşünün.
7. Hücresel Ürün Sayfaları Oluştur Çevrimiçi Ürün için Genel Kurallar Sayfalar bir bakışta en önemli bilgileri sunmaktadır. Gayrimenkul eksikliği nedeniyle, bunun hücresel olmak daha zordur. Yardımcı olan bir şey, insanların cep telefonlarıyla yaptıkları şeyleri her zaman yapmalarına izin vermektir: iki kez kaydır, sıkıştırın ve dokunun. Nasıl kullanıyorsun? İşte bazı örnekler:
Ürün çizimleri için bir kaydırma kullanın
Çeşitleri seçmek için net ve kolay bir yol sunmak
Burada bununla ilgili iyi bir makale ve aşağıdaki eylemlerde yukarıdaki önerilerin çoğu için iyi bir örnek var:
8. Makaledeki genel e-Niaga’nın UI tasarımı hakkındaki kasayı göz ardı etmeyin, çok karmaşık olan formların dönüşümü nasıl kaybetmenize neden olabileceğinden bahsediyoruz. Cep telefonundaki formu doldurmak daha da sinir bozucu, bu yüzden mümkün olduğunca kolay olduğundan emin olmalısınız:
Her zamanki gibi, form alanını minimumda tutun, örneğin, ilk ve arka isim alanını “tam ad” olarak sözleşme yapmaya çalışın
Doğum tarihini ve diğer sayıları girmek için orijinal rulo cihazını kullanın
Parola alanı için, görünürlüğü etkinleştirmesine ve devre dışı bırakmasına izin verin (çünkü küçük bir klavyede uzun bir şifreyi yeniden ayarlamak çok can sıkıcıdır)
Doğru klavyeyi sağlayın, yani kullanıcıların numaraları yazması gerektiğinde blok numaraları
Müşterilerin verileri otomatik olarak doldurmak ve Google ve Apple Pay gibi hücresel ödeme seçeneklerini etkinleştirmek için kredi kartlarını taramasına izin verin Bir sayfa ödeme kullanın veya değilse, kullanıcının ödeme işleminde nerede olduğu hakkında talimatlar verin
Hatadan sonra sayfa yeniden yüklendiğinde girilen bilgileri hatırlayın
Güven Mührü ve Sosyal Kanıtlar gibi güven göstergelerini kullanın
Konuk ödeme yapmanız önemli olsa da, daha önce kullanılan ödeme seçeneğine erişmek için hesabınızı kaydedebilmeniz ve girebilmeniz gerekir. Belirtildiği gibi, kullanıcılar yazmaya uygun olmayan cihazlarla hiçbir zamanda girmek istemezler. Sosyal hesaplar aracılığıyla girmeye izin vermeyi de düşünebilirsiniz. 9. Masaüstünde kapatılması nispeten kolay olan açılır pencere ve diğer interstisyel pop -up’lara dikkat edin. Sadece açılır pencerenin dışına tıklayın veya imleci kapak düğmesine işaret edin. Ancak, doğru noktaya ulaşmanın daha zor olduğu hücreselde daha sinir bozucu olabilirler. Bu nedenle, gerçekten pop -up kullanmanız gerekiyorsa:
Tam ekran yapmayın, böylece diğer içeriği gizlemeler, örneğin ekranın altının üçte birini kullanın
Hemen yetiştirmekten kaçının, bunun yerine, ziyaretçilerin ikinci sayfalarını açmasını bekleyin
Müşterilerin onu görmeyi seçebilmesi için Pulan’ı açan küçük bir aksiyon davetiyesi görüntüleyin
Diğer olağanüstü ipuçları için Wisepops hakkındaki bu makaleyi kontrol edin. 10. Aşamalı web uygulamalarını kullanmayı düşünün Birçok şirket, bağımsız bir uygulama ve bir web sitesi arasında bir orta zemin aramaya başlar. Orta yola hafif bir trend haline gelen aşamalı bir web uygulaması denir.
