Tüm e-ticaret işletmecileri için en güzel anlardan birisi, yapılan işin karşılığının alındığı ödeme adımıdır. Müşterilerin bu sayfaları en rahat şekilde deneyimlemeleri için bazı püf noktalarını geçtiğimiz haftalarda “E-ticaret ödeme adımları tasarımına dair 5 ipucu” yazımda belirtmiştim. Bu yazı içerisinde de yer alan kredi kartı ile ödeme ekranında yapılabilecek ince ayarlara yakından bakmakta fayda var.
Bu kısmı önemli kılan bir diğer konu da tabii ki, Bankalararası Kart Merkezi’nin yayınladığı raporlardır. “İnternetten Yapılan Kartlı Ödeme İşlemleri” raporunu incelediğimizde, sadece geçen yılın birinci döneminden bu yılın birinci dönemine, kart kullanım sayısında %17,46 artış olduğunu görebiliriz. Yani insanların internetten yaptıkları alışverişler ve bu alışverişler esnasındaki kart kullanım oranları sürekli artıyor. Dolayısı ile sayfayı ne kadar kullanıcı dostu yaparsak o kadar iyi olacaktır.
Nelere Dikkat Edilmeli?
Müşterinizin kredi kartı bilgilerini alacağınız ekranda aşağıdaki adımlara dikkat edilmelidir:
- Kolay anlaşılabilir bir form yapısı
Müşterinin, bilgilerini gireceği kart ile ekrandaki form arasındaki ilişkiyi fazla düşünmeden kurması en ideal durumdur. Bu yüzden form alanlarının sırası ile kart üzerindeki bilgilerin sırasının aynı olması iyi bir yol gösterici olacaktır.
Ayrıca form dolduruldukça sıradaki form öğesine otomatik geçişler de müşteriyi hızlandıracaktır.
- BIN numaralarından faydalanın.
Kartların üzerindeki rakamların bir kısmı öncelikle onun Visa, Mastercard vb. gibi hangi servis sağlayıcıya bağlı olduğunu gösterir. Sonraki rakamlar ise hangi bankaya ait olduğu bilgisini verir.
Bu numaraların ne işe yaradığı ile ilgili güzel bir infografiğe şuradan erişebilirsiniz: Cracking the Credit Card Code
Rakamlar müşteri tarafından girilirken Visa, Mastercard gibi servis sağlayıcıları belirlemenin yanı sıra Türkiye’de çalışan bankaları da belirlerseniz, müşteri taksit seçiminde zorlanmayacaktır. Bunu yapmak için de e-ticaret altyapınızda tanımlama yapmanız gerekir. Türkiye’de faaliyet gösteren bankaların BIN numara listesi için de Berkay Ünal’ın github’daki çalışmasından faydalanılabilir.
Aşağıdaki ekranlarla da durumu özetleyebiliriz.
Bu ekranda da görebileceğiniz üzere, müşteri kredi kartını girmeden önce birçok kart seçilebilir durumdadır. Ancak BIN numaralarını sisteminize tanımlarsanız, aşağıdaki ekranda görebileceğiniz gibi müşteri sadece ilgili kartta seçimini gerçekleştirebilir.
- Güvenlik kodu (CVC2)
Birçok kartın arka yüzünde, bazı kartların ise ön yüzünde yer alan bu kod, mağaza alışverişlerinde hiçbir zaman kullanılmadığı için internetten ilk defa alışveriş yapacak olan kullanıcılar için bir muammadır. Nedir ve nerededir? Aslında ödeme ekranında ne olduğunu açıklamaktan ziyade nerede olduğunu açıklamak önemlidir. Çünkü amaç her zaman müşteriye bu adımları en hızlı şekilde tamamlatmaktır. Sonuçta kimse market kasasında uzun uzun beklemeyi, ekstra işlerle uğraşmayı sevmez. Bu sebeplerden ötürü bu numaranın da nerede olduğu açıkça belirtilmelidir.
HAZIR KULLANICI ARABİRİMLERİ
Yukarıda bahsettiğim, dikkat edilmesi gereken noktaları içeren ve internet üzerinde sürekli geliştirilen script’lerin en popüler örneklerine bir göz atalım. Bu örnekleri incelemek, geliştirme sürecine katkısı olan kişilerin fikirlerini de yansıttığından oldukça önemli.
Skeuocard by Ken Keiter
Adını skeuomorphism* teriminden alan kullanıcı arabirimi, kullanıcının gerçek hayatta gördüklerini ekrana yansıtmasını temel alıyor. Bu tasarımı gerçekleştiren Ken Keiter ise durumu “Ödeme işlemi esnasında kullanıcının kendisine sorması gereken her soru, ödemeyi tamamlamaması için başka bir sebep doğurur” (‘Every question a user has to ask themselves during the checkout process is another reason for them not to complete it.’) şeklinde özetliyor. Makalesini buraya tıklayarak okuyabilirsiniz.
Açıklamasından da anlaşılabileceği şekilde, kullanıcı kredi kartına baktığında ne görüyorsa ekranda dolduracağı alan olarak da aynısını görüyor. Böylelikle neyi nereye yazacağını çok net bir şekilde anlayabiliyor. Yine de kartın arka tarafında yer alan CVC numarası giriş esnasında zorluk çıkarabilir.
Arabirime şuradan ulaşılabilir. http://kenkeiter.com/skeuocard/
*Skeuomorphism’i kısaca; dijital tasarım elementlerinin, gerçek hayattaki en yakın hallerine benzetilerek uygulanması şeklinde açıklayabiliriz. Daha fazla bilgi için Vikipedi’den Digital Skeuomorphism açıklaması okunabilir.
Creditcard.js
“Daha kullanılabilir kredi kartı formu” mottosu ile yola çıkan creditcard.js ise tasarım esnasında yapılan yanlışlara vurgu yapıyor. Herhangi bir grafik öğe içermeyen form, CVC’nin nerede olduğunu açıklarken grafiklere başvuruyor. Temelini ise sadeliğe dayandırıyor. BIN numaralarını kullanıp, yapılan girişi anlık kontrol ederek kart numarasının doğru veya yanlış olduğunu belirtiyor.
Ücretli bir çözüm olan creditcard.js’i sitesi olan https://creditcardjs.com/ adresinden inceleyebilir ve yine anasayfalarında bahsedilen tasarım hatalarını inceleyebilirsiniz.
Card
Jesse Pollak tarafından github üzerinde yüzde yüz bedava ve açık kaynak kodlu olarak yer alan Card ise tek bir satır kod çözümüne odaklanıyor. Bunu ise başarılı şekilde yaptığını belirtebilirim. Şu ana kadar incelediğim çözümler arasında en başarılı bulduğum oldu. Yukarıda, dikkat etmemiz gerektiğini belirttiğim her şeye uygun hareket ediyor. Üstelik tamamen html, css ve js teknolojileri kullanılarak oluşturulduğu için her tarayıcıyla sorunsuz olarak çalışabilir yapıda.
Kendisine şuradan erişebilirsiniz: http://jessepollak.github.io/card/
Burada bahsettiğim çözümlerin dışında başka çözümler de mevcut ve her geçen gün mobile odaklanan spesifik çözümler de çıkmakta. Kişisel kullanım için yazıdakileri veya kendi bulduğunuzu seçebilir ya da tamamen kendinize özel bir yapı oluşturabilirsiniz.
Eklemek istediğiniz noktaları, yorum olarak iletebilirsiniz.