Responsive Tasarım Önerileri!

Ebat: px

Şu sayfadan göstermeyi başlat:

Download "Responsive Tasarım Önerileri!"

Melek Birol
8 yıl önce
İzleme sayısı:

1 Responsive Tasarım Önerileri!

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!!

gibi yoğun içeriklerle kullanıcıyı karşılarız.

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.!!

dolayı site içi arama söz konusu olduğunda doğrudan header ya da

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, Spellcheck.!

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?!

oranlarına çıkmış durumda. Netvent in bugün müşterilerini incelediğimizde mobil trafiğin %40 seviyelerine ulaştığını görüyoruz.

15 Ziyaretçilerinizin web sitenizi üye olmadan kullanabilmesini sağlayın.!

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.!

18 Tıkla-Ara fonksiyonlarını kullanarak ziyaretçilerinizin size hızlıca ulaşması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.!

Onların farklı ortamlardan da seçtikleri ürüne ulaşmasını

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.!!

almak istediğimiz her yerde formları kullanırız.

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.!

24 Validation ları kullanıcının fark edeceği şekilde 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.!!

27 Ürün kategorilerinizin navigasyonlarını sade ve belirgin tasarlayı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:!

34 Netvent Hakkında! - Türkiye nin İlk ve Tek Inbound Pazarlama Ajansı! - Dünyanın Lider Inbound Pazarlama Otomasyonu HubSpot un İlk ve Tek Türkiye Partneri! - Act-On un İlk ve Tek Türkiye Partneri! - Oracle Marketing Cloud Gümüş Partner! 0 (850) ! info@netvent.com! /netvent! /netventideas! /+netvent! /netvent!

Benzer belgeler

Altan ÇOLAK Hoşgeldiniz

Altan ÇOLAK Hoşgeldiniz E-Ticaretinizden edineceğiniz dönüşümlerinizi etkileyebilecek 12 Madde ve Adwords de işinizi kolaylaştıracak yenilikler. E-ticaret Sitelerinde Dönüşümü Arttırabilen Bazı Tavsiyeler