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

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

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

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

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

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:!
¥ 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!