Mobil e-Ticaretin Bir Vitrini
Mobil web için web sitelerini optimize etmek bir iştir. Mobil web için e-ticaret web sitelerini optimize etmek, tasarımcıların ve geliştiricilerin yalnızca evcilleştirmeye başladıkları bir yaratıktır.
Şaşırtıcı olmayan bir şekilde, büyük şirketler öncelikle ortalamayı benimsiyorlar, büyük olasılıkla kaynakları haklı çıkaracakları ve satış akışına sahip oldukları için. Sonuçta, bir e-ticaret web sitesi büyük bir trafik alsa bile, bunun küçük bir yüzdesi mobil tabanlı olacaktır. Ve bu trafiğin daha küçük bir yüzdesi, satışlarını gerçekten tamamlayacak.
Bu alanda sadece baş gösteren momentum sayesinde, insanların tam mobil e-ticaret işlemleriyle deneyimi sınırlı. Bu nişı en iyi şekilde deneysel yapar. Neyse ki, e-ticaretin doğası göz önüne alındığında, başarı dikkatlice ölçülebilir ve test edilebilir. Bu hala bir tanıma ihtiyaç duyan bir araçtır.
İlerlemeye karşı büyük bir engel, örneklerin azlığıdır. Bir sürü ilginç fikir bulmak için sörf galerileri, hızlı ve kolay olmaya bile yakın değildir. E-ticaret için daha az sayıda küçük mobil tasarım koleksiyonu var. Bunu ele almak için 10 muhteşem mobil e-ticaret örneğini topladım. QR Daha kolay tarama için kodlar eklenmiştir. Cep telefonlarınız için bu kodları okuyabilecek birçok uygulama bulabilirsiniz.
1. Walmart
Burada sunulan tüm web sitelerinin ortak bir yaklaşımı, portal tipi bir ana sayfaya sahip olmaktır. Walmart farklı değil Bununla birlikte, web sitelerinin çoğu metin tabanlı listelere dayanırken, bu, göz atmak için daha kolay olan bir simge ızgarasına sahiptir. Burada ele alınan mobil web sitelerinin birçoğu, kullanımı zor olan çok küçük listelere sahiptir. Walmart, hedeflerin kolayca vurulmasını sağlamak için simgeleri metinle birleştirir.
Walmart'ın web sitesindeki en büyük kazanç, bir işlemi tamamlamak için ana siteye gitmeniz gerektiğidir. Yine de, bilgi ve tuşların kullanımı son derece kolaydır, fonksiyonda açık ve iyi organize edilmiştir.
2. Toys-R-Us
Toys-R-Us Oyuncak-R-Us web sitesi doğru yönde bir adımdır. Ama birkaç önemli şeyi daha iyi yapabilirdi. Öncelikle, ana sayfadaki düğmelerin listesini birazcık biraz küçük buldum. Alanı korumak için onları küçültme isteğini anlıyorum, ancak biraz daha fazla odayla kullanmak daha kolay olacaktı. Tabii, daha fazla kaydırmam gerekecek, ama bu iyi bir ticaret.
Ana sayfayı geçtikten sonra çok daha iyi olur. Özellikle, bu web sitesi daha iyi alışveriş sepeti sayfalarından birine sahiptir. Düğmeler açık ve yoğunluk ve dokunma yeteneği arasındaki denge doğru görünüyor. Sonuç olarak, eylem noktalarını net bir şekilde nasıl açıklayacağımıza dair iyi bir örnek.
3. Crocs
Mobil geliştirme hala geliştiricilerin hakimiyeti altındadır, bu nedenle güzel tasarlanmış bir mobil web sitesi bulmak bir rahatlamadır. Durum böyle Crocs . Onun web sitesi iyi uygulanmış ve bakmak için bir güzellik.
Katalog listesi görünümü özellikle temiz. Herhangi bir yağlama yapmanın tek yolu, ürün isimlerini ortadan kaldırmak olacaktır. Ne olursa olsun, her satır açık ve ilgili bilgilerle kolay bir hedef oluşturur.
4. JC Penny
Bir sorun tasarımcıları JC Penny mobil mağaza karşı karşıya ürün kapsamıydı. Kullanıcıların, erkek pantolonu gibi bir bölümde geniş bir seçenek yelpazesine etkili bir şekilde göz atmalarını nasıl sağlıyorsunuz? Basit bir açılır sistem olan çözüm, müşterilerin gereksinim duydukları ürünlere ulaşmak için ölçütleri hızla filtrelemelerine olanak tanır.
Büyük görüntüler de gerçekten güzel bir özellik. Ürün detay görünümünde gerçek öğeleri görmek ne kadar kolay olduğuna dikkat edin. Mobil web sitelerinin dönüşüm oranlarının son derece düşük olduğundan şüpheleniyorum ve bu konuda harika fotoğrafların bununla mücadele eden az sayıdaki silahtan biri olduğunu düşünmüyorum.
5. Çömlekçilik Barn
Formül şu ana kadar oldukça açık olmalı: üstteki logo, bunun altında, bir ürün veya satışı tanıtmak için öncü bir grafik, ardından da ana ürün kategorilerinin listesi. Ve üzerinde kesin bir yapı olduğunu görüyoruz Çömlek ambarı Mobil web sitesi.
Kesinlikle harika bir ayrıntı, bu web sitesinin uzun ekmek kırıntıları sorununa çözüm olmasıdır. Ürün kategorileri listesinde, kırıntı izinin, dizenin yalnızca son bölümünü içerecek şekilde kısaltıldığını fark edeceksiniz. Bunu Toys-R-Us'taki kırıntıların müdahalesiyle karşılaştırın ve bu yerden tasarruf sağlayan çözümü takdir edeceksiniz.
6. Dişsiz
Bu sürpriz değil Threadless 'mobil web sitesi harika. Ana sayfa kategori portalı formülünü izler, ancak bir twist ile. Walmart'ın web sitesi gibi, buradaki grid yaklaşımı, çoğu kullanımdan daha kolay. Fotoğraf çekiyor ve mağazayı gerçek bir alışveriş deneyimi gibi hissettiriyor. Bununla ilgili bir şey, burada kapsanan diğer mağazaların çoğundan daha az mekaniktir.
Aynı ızgara yaklaşımını ürün listesi görünümünde bulacaksınız, bu da güzel bir rahatlama ve ürünleri çok iyi bir şekilde sergiliyor. Tasarımcılar, kullanım kolaylığını korurken, boş alanı en aza indirmeyi başardılar.
7. Brookstone
Brookstone Mobil mağaza yoğun bir ana sayfadan muzdarip. Ama bir kez geçtikten sonra, web sitesi daha iyi olur. Büyük net fotoğrafçılık çok takdir ediliyor. Resimlerin mobil cihazlar için optimize edilmiş olup olmadığını bilmiyorum, ancak bu partide görmenin en kolayları arasında.
Zayıf noktalardan biri, alışveriş sepeti sayfasındaki ödeme için gerekli olan kaydırma miktarıdır. İçerik, anlaşmayı kapatmak için bazı budama ve optimizasyon ile yapabilirdi.
8. Dooney ve Bourke
Fotoğrafçılığa gerçekten değer veriyorum Dooney ve Bourke Ana sayfası. Sayfanın üzerine indiğiniz anda şirketin tam olarak ne sattığını anlatıyor. En az söylemek için ince bir ayrıntı, ama kesinlikle dikkate alınması gereken bir şey.
Ürün detayı görünümü ile ilgili bir tahriş edici nokta, miktar alanının varsayılan olarak boş olmasıdır. Alışveriş sepetime ürün eklemek için "1" eklemem gerekiyordu. Ama aynı 150 dolarlık çantadan daha fazlasını sipariş edemezdim.
Ayrıca, alışveriş sepeti sayfası biraz daha sonradan hissediliyor. Ancak, üst düzeydeki kilit eylem öğelerini koymak için şirket kredisini vereceğim. Müşterilerin sepetlerine ne koyduklarını unutarak şansları zayıftır, bu nedenle check-out sayfasına ulaşmalarına yardımcı olmaya odaklanmak akıllıca bir fikirdir.
9. Buy.com
Ana sayfa Buy.com Bu makalede başka hiçbir ana sayfanın sahip olmadığı bir şey var: gerçek bir ürün. Çoğu e-ticaret mağazasının düşünülmesi, kullanıcıların tam ürün hattına girmelerini sağlayan bir mobil portal oluşturmaktır. Bu önemli olsa da, Buy.com alternatifleri düşünmem için bana ilham veriyor.
Daha iyi bir yaklaşım, anlaşmalara odaklanmaksa ne olur? Ana sayfa ana emlaktır; Satış kapanışının zorluğu göz önünde bulundurulduğunda, tüm çabalarınızı müşterilerin önünde karşı konulmaz bir şey yapmaya itmiyorsunuz. Bu web sitesindeki bölümlerin listesine ulaşmadan önce, öne çıkan ürünü ve satış, fırsatlar ve özel ürünlerle ilgili dört ayrı bağlantıyı görebilirsiniz.
10. Petco
Mobil ağın büyük bir özelliği, havlamayı ortadan kaldırmasıdır. Yani, ana sayfasını gördüğümde Petco Mobil websitesi, büyük fotoğrafın herhangi bir şekilde yararlı olup olmadığını merak edemiyorum. Şirket adı ve beraberindeki köpek ve kedi simgesi ürün odağını iletir. Öyleyse neden bu aptal görüntüyü gösterecek? Bunun yerine, özel bir anlaşma ya da kategori ikonları ızgarası koyardım. Web sitesinin lehine minnettar olsam da biraz düzeltilebilir.
Şirket, sadece ürün satışlarını vurgulayarak ürün detay görünümünde dahice bir fikre kapıldı. Neden bir adım daha ileri gitmiyor ve bazılarını sadece mobil cihazlara özel hale getiriyorsunuz. Bir kenara atıldığında, ürün detay sayfası fevkalade temiz ve net. Anahtar fonksiyonlar ve bilgilerin altındaki tam uzunluktaki açıklamaları da kullanmak akıllıca bir karar gibi görünüyor.
Sonuç
Mobil web sitelerinin tasarlanması zordur ve mobil e-ticaret web sitelerini tasarlamak belki iki katına çıkar. Müşterilerin doğru ürünü bulmalarına ve bu süreci bir satışa nasıl dönüştürdüklerine nasıl yardımcı olabileceğimizi anlamak çok kolay değil. Umarım bu küçük kaynak koleksiyonu, bir sonraki (veya belki de ilk olarak) mobil web tasarımına bazı yeni fikirler getirir.
Sadece WDD için yazılmış Patrick McNeil . Serbest yazar, geliştirici ve tasarımcıdır. Özellikle, web tasarımı hakkında yazmayı, web geliştirme konusunda insanları eğitmeyi ve web siteleri oluşturmayı seviyor. Patrick'in web tasarım trendleri ve desenleri konusundaki tutkusu, TheWebDesignersIdeaBook.com . Twitter'da takip et @designmeltdown .
Bu örneklerde ne düşünüyorsun? Lütfen aşağıdaki yorumlarda paylaşın…