Responsive Tasarım Örnekleri
•
0 likes•240 views
İnternet kullanımının ağırlıklı olarak mobil cihazlar üzerinden yapılıyor olması Responsive Tasarım ihtiyacını zorunluluk haline getirdi. Bu rehber ile bütün sayfalarınızda, formlarınızda ve site içi navigasyonda ihtiyacınız olan responsive tasarım tekniklerini bir arada bulabilirsiniz.
Responsive Tasarım Örnekleri
- 2. !Mobil kullanıcı, masaüstü kullanıcısından farklı olarak hedef odaklı hareket eder. Gezinti ve keşif deneyimini geliştirmek için gereksiz objeleri ve hataları minimalize etmelisiniz.!
- 3. Responsive Tasarımlar ! için UX Geliştirmeleri! ¥ Anasayfa ve Navigasyon! ¥ Site içi Arama! ¥ Kullanılabilirlik ve Conversion! ¥ Formlar! ¥ Ürün sayfaları!
- 4. Anasayfa ve Navigasyon! ! Geleneksel masaüstü tasarımlarında Hoşgeldiniz mesajları, hizmet detayları, referanslar gibi yoğun içeriklerle kullanıcıyı karşılarız. Kullanıcı geniş ekran deneyimiyle bağlantıları kullanarak alt sayfalara kadar ulaşabilir. Mobil deneyimde kullanıcıya yoğun bir içerik sunup, içerik karmaşasından aradığını bulmasını bekleyemezsiniz! !
- 5. ¥ CTA butonlarını merkezde ve ön planda tutmalısınız.!
- 6. ¥ Menüleri kısa ve kolay fark edilebilir konumlandırılmalıdır.!
- 7. ¥ Navigasyonu sağlamak amacıyla breadcrump yapısını mobil için de kurgulamak gerekir.!
- 8. ¥ Reklam alanlarını içerik alanlarınızın görünmesini engelleyecek şekilde yerleştirmeyin.!
- 9. Site içi Arama! Geleneksel masaüstü tasarımlarında kullanıcı alışkanlığından dolayı site içi arama söz konusu olduğunda doğrudan header ya da sidebar’a yönelir ! ! Mobil deneyimde kullanıcı arama fonksiyonu en fazla göz ardı edilen alan olarak karşımıza çıkıyor.! !
- 10. ¥ Arama alanını kullanıcının fark edebileceği alanlarda sabit görünür kılın.! ¥ Gizleyerek, açılış efektleri kullanmaktan kaçının!
- 11. ¥ Alakalı sonuçların gösterildiğine emin olun.! ¥ Smart-Search fonkisyonlarını kullanmak kulllanıcı deneyimini olumlu etkileyecektir. Örn: Autocomplete, Spell- check.!
- 12. ¥ Özellikle e-ticaret sitelerinde gelişmiş filtreleme özelliklerinin mobilde de sunulması kullanıcı deneyimine ve conversion’a faydalı olacaktır.!
- 13. ¥ E-ticaret sitelerinde kategoriye özel arama fonksiyonlarının kullanılması conversion’ı olumlu etkileyecektir.!
- 14. Kullanılabilirlik ve Conversion! UX’in conversion’a etkisinin kanıtlandığı günümüzde, ülkemizin de içinde bulunduğu Asya bölgesinde mobil kullanım oranı %37 oranlarına çıkmış durumda. Netvent’in bugün müşterilerini incelediğimizde mobil trafiğin %40 seviyelerine ulaştığını görüyoruz. Mobilin öneminin kanıtlandığı bu resimde, mobilden gelen kullanıcıları convert etmek için yatırım yapılmaması pazarlama faaliyetlerinin de %40’ının çöpe atılması anlamına gelir.! ! Peki mobil conversion’ımızı arttırmak için neler yapmalıyız?!
- 16. ¥ Ziyaretçilerinizin web sitenizi üye olmadan alışveriş yapmasını sağlayın.!
- 17. ¥ Giriş yapmış kullanıcılarınızın bilgilerini formlarda otomatik getirerek, hızlı işlem yapmalarını sağlayın.!
- 19. ¥ Özellikle e-ticaret müşterileri işlemlerini daha sonra yapmak ya da PC ya da notebook’larından devam etmek isteyebilir. Onların farklı ortamlardan da seçtikleri ürüne ulaşmasını sağlamanız hem kullanıcı deneyimini hem de satış oranlarını artıracaktır.!
- 20. Formlar! Formlar web sitenizden sizi kullanıcıya ulaştıran en önemli ve en eski kapılardır. Ödeme ekranlarında, yorum modüllerinde, iletişim sayfalarında kısaca kullanıcıdan herhangi bir veri almak istediğimiz her yerde formları kullanırız. ! Yüzlerce farklı ekran boyutunun ve çeşitli veri girme seçeneklerinin olduğu mobil dünyada, ziyaretçilerinizi bu kapıdan kolayca geçmelerini sağlamak en önemli göreviniz.! ! ! !
- 21. ¥ Forma girilecek verinin türüne göre, keypad’in numerik ya da metin olarak gelmesi ufak bir geliştirme gibi size görünebilir, ancak kullanıcı deneyimini iyileştirdiği ve conversion’ı arttırdığı kanıtlanmıştır.!
- 22. ¥ Veri türüne göre en kolay input türünü seçmelisiniz. Ziyaretçilerinizin seçimlerini kolayca yapabildiklerinizden emin olun.!
- 23. ¥ Tarih seçim alanlarında görsel seçici eklentilere kullanın.!
- 25. ¥ Formlarınızda olabildiğince az input elemanına yer vererek kullanıcıyı sıkmadığınızdan emin olun.! ¥ Formunuzda çok fazla input alanı var ve bu alanlar zorunlu ise, formunuzu adımlara bölün ve progress bar oluşturun.!
- 26. Ürün Sayfaları! Mobil ziyaretçiler, ufak şeylerden mutlu olur. Ürün ve kategori sayfalarınızda sitenizin ful fonksiyonla sunmanıza gerek yok. Kendinizi kullanıcın yerine koyun ve siz olsanız neyi görmek istersiniz sorusunun yanıtını mobil sitenize yansıtın. ! ! !
- 28. ¥ Ziyaretçileriniz sitenizi zoom yapmak zorunda kalırsa CTA’ları kaçırabilir. Zoom’a ihtiyaç olmadığından emin olun.!
- 29. ¥ Ürün fotoğraflarınızı mümkün olan en yüksek kalitede sunun. Ekstra zoom fonksiyonları ekleyerek, kullanılabilirliği arttırın.!
- 30. ¥ CTA’leri farklı pencerelerde açarak, kullanıcının bir önceki sayfaya geri dönmesini engellemiş olursunuz!!
- 31. ¥ Ziyaretçileriniz sitenizi masaüstü görünümünde full fonksiyonelitede kullanmak isteyebilir. Browser’dan “masaüstü görünüm iste” seçeneğine gitmek zorunda bırakmayın.!
- 32. Teknik Kontrol Listesi! ¥ Reklamlarınızın mobil tasarımınız için konfigure edildiğinden emin olun.! ¥ Download seçeneklerinizi mobilde minimalize edin.! ¥ Sayfa açılış hızlarınızın mobil için optimize edildiğine emin olun.! ¥ Cross-Platform testleri yaparak, farklı cihazlarda mobil görünümünüzü test edin.! ¥ Mobil tasarımınız için Analytics ve Conversion Tracking araçlarınızı takip edin.!
- 33. Araçlar! ¥ Genel Analiz! ¥ Google Page Speed Insights! ¥ Google Mobile Friendly Test! ¥ Google Webmaster Tools Mobile Usability Tool! ¥ Kullanıcı Deneyimini (UX) Ölçümlemek için Kullanabileceğiniz Araçlar:! ¥ http://www.browserstack.com/! ¥ http://mattkersley.com/responsive/! ¥ http://www.studiopress.com/responsive/!
- 34. Netvent Hakkında! 0 (850) 224 11 46! - Türkiye’nin İlk ve Tek Inbound Pazarlama Ajansı! - Dünyanın Lider Inbound Pazarlama Otomasyonu HubSpot’un İlk ve Tek Türkiye Partneri! info@netvent.com! /netvent! /netventIDEAS! /+netvent! /netvent! - Act-On’un İlk ve Tek Türkiye Partneri! - Oracle Marketing Cloud Gümüş Partner!