Your address will show here +12 34 56 78
#ux, e-ticaret, Genel

E-ticaret işletmeler için yeni pazarlara ulaşmaları konusunda büyük bir yardımcıdır. 7/24 açık olan, hem de bu esnada alışılageldik mağazacılık maliyetlerine de katlanmak zorunda olunmayan ve tüm dünyaya erişim imkanı sağlayan inanılmaz bir yer. Bu yüzden e-ticaret tüm satıcı ve potansiyel satıcıların hedefinde olan bir şey.

Git gide daha çok insanın girdiği e-ticaret dünyasında, bir e-ticaret projesi tasarlamak aslında sanıldığı kadar basit bir işlem değil.

Bir e-ticaret tasarımında sıkça yapılan 10 hata, bunların nasıl önlenebileceği ya da düzeltilebileceğini inceleyelim.

1. Detaylı Ürün Bilgisinin Eksik Olması
Herhangi bir mağazadan alışveriş yaparken, bir ürünü eline alabilme, ona dokunabilme, deneyebilme, her açıdan bakabilme… ve daha bir çok şeye imkan bulunurken, çevrimiçi alışveriş deneyiminde bu etkileşimler eksik kalır. Bu noktada e-ticaret siteleri ve uygulamaları bu etkileşim eksikliğini mümkün olduğunca kapatabilmeliler.

Ürünleriniz hakkında detay vermekten kaçınmayın. Potansiyel bir müşteri, bir ürünün özelliklerini merak ediyorsa ve sizin siteniz ya da uygulamanızda bulamazsa, başka bir yerde araması çok olasıdır. O yüzden mümkün olduğu kadar çok bilgi vermelisiniz. Ürünün ne olduğuna bağlı olarak beden, boyut, ağırlık, yazılım sürümü, malzeme bilgisi, kumaş türü, yazılım sürümü… Örnekler çoğaltılabilir.

Ayrıca ürün özelliklerini verirken saf teknik terimler yerine daha açıklayıcı tanımlamalar yapabilirsiniz.

e-ticaret tasarımında sıkça yapılan 10 hata

2. Gizli/ Bulunması Zor İletişim Bilgisi
Şaşırtıcı gelebilir; ama bu da sıkça yapılan bir hata. E-ticaret projesinde Ürün ya da hizmet ön plana çıkartılmaya çalışırken iletişim kanalları arka planda kalabiliyor bazen. Aksine müşteriler de kredi kartı bilgilerini girdiği bir uygulama ya da siteye güvenmek ve olası bir durumda karşılarında hemen ulaşabilecekleri birini bulmak istiyorlar. Geri planda kalmış, bulunması zor iletişim bilgileri insanların güvenlerinin eksilmesine yol açabilir.

İletişim bilgilerinizi bulunması kolay yerlere koyun. Header, sidebar, footer bunun için çok uygun yerlerdir. Birden fazla yere koymaktan da çekinmeyin. Tabi bu her boşluğu telefon numarasıyla doldurmanız gerektiği anlamına gelmiyor.

3. Uzun ve Karmaşık Sipariş Tamamlama Süreci
Bir e-ticaret projesinde yapılabilecek en hasar verici hatadır. Olabildiğince basit ve kullanımı kolay bir ödeme süreci deneyimi tasarlamalısınız. Sepetten, sipariş tamamlanana kadar ne kadar karmaşıksa bu süreç vazgeçme oranı da o derecede artar. Kullanıcıya ayrılmak için bir fırsat vermemelisiniz.

Mümkün olduğunca sayfa atlamayı en aza indirgemeye çalışın. Bunun için birden fazla kolonlu bir mizanpaj yapabilirsiniz, birbiri ile bağlantılı bileşenleri birleştirebilirsiniz.

4. Sipariş Vermek İçin Üye Olma Zorunluluğu
Bu bir önceki hatanın kapsadığı başka bir hata sayılabilir. Aynı mantıkla, sipariş vermek isteyen kullanıcıya, ödeme sürecinde ekstra bir adım daha vermiş oluyorsunuz. Bu üye olma zorunluluğu kimi potansiyel müşteriler için ekstra bir yükten başka bir şey değil. Sitenizden ilk defa alışveriş yapacak birisi için uzun bir form form doldurtmanın mantıklı ve yorucu olup olmayacağını düşünmeniz gerekiyor.

e-ticaret tasarımında sıkça yapılan 10 hata

Çözümü ise çok basit. Bırakın siparişini versin. Sipariş tamamlandıktan sonra, bilgilerini kaydetme seçeneğini verin. Bu kadar basit.

5. Yetersiz Site İçi Arama Motoru
Eğer ne aradığını bilen bir müşteri söz konusuysa bir e-ticaret sitesinin en faydalı bileşeni arama özelliğidir. Filtreler, kategorilerin arasında kaybolmadan hedefine ulaşmayı isteyen birini, en kısa ve zahmetsiz yoldan isteğine ulaştırmanız gerekiyor.

Daha önce arama özelliğinden bahsettiğim Arama Deneyimi Tasarlamak yazımı okuyabilirsiniz.

6. Ürün Görselleri
Yukarıda da bahsettiğim gibi, bir e-ticaret mağazasının en büyük eksikliği ürünle etkileşime girebilmektir. Alacağınız ürüne dokunamazsınız, onu deneyemezsiniz. Bu yüzden bu eksikliği doldurmak için elinizden geleni yapmalısınız. Fakat başarısız ürün görseli bu eksikliği doldurmaz.

Mümkün olduğunca büyük ve birden fazla ürün görseli kullanmalısınız. Bir ürünün birden fazla açıdan, gerekiyorsa yakın detay gösteren ve yeterli derecede büyük ürün görselleri kullanın. Ürün görseline zoom yapılabilmesini sağlayın.

7. Kötü Sepet Tasarımı
Sepet bir e-ticaret projesinin en önemli parçasıdır. Uzun zamandır ölümcül derecede hataya rastlamasak da sepet tasarımında hala daha karşılaşılan birkaç hata var.

E-ticaretin ilk yıllarında sepete birden fazla ürün ekleyememe problemi vardı örneğin. Bugün bunu aşmış durumdayız. Sepete eklenen bir ürünün sepet içerisinde adet ya da diğer özelliklerinin güncellenebilmesi konusu da aşılmak üzere. Çok nadir de olsa karşılaşabiliyoruz. Fakat eskiden günümüze miras kalan en büyük hata ürün sepete eklendikten sonra, alışveriş deneyimini sekteye uğratan işlevler.

Bir ürünü sepete eklediğinizde o an dolaşımda bulunduğunuz sayfayı terk edip sepete giden web siteleri hala mevcut. Bunu mini-cart işlevi ile aşabilirsiniz. Alışveriş deneyimini sekteye uğratmadan bu mini-cart sayesinde taksit seçenekleri, özel kampanya indirimleri gibi sepette görebildiği bir kısım bilgileri gösterebilirsiniz.

8. Yetersiz Ödeme Opsiyonu
Bazı e-ticaret site ya da uygulamalarında ödeme yapabilmek için çok kısıtlı seçenekler sunulur. Her ne kadar ülkemizde olmasa da dünyada ödemeyi yalnızca PayPal üzerinden alan çokça e-ticaret sitesi var. Ülkemizde bu durum yalnızca kredi kartı ile ödeme şeklinde görülüyor. Hatta kimi durumlarda ise yalnızca Mastercard ve Visa kabul ediliyor. Kredi kartı kullanmayan kullanıcılar ne yapacak peki? Ya da ödemeyi hesabından nakit olarak göndermek isteyen biri? Çok yaygın olmasa da Amex kullanan ya da yerli Troy? Alışveriş yapmaktan vaz mı geçecek?

Ödeme seçeneği azlığı genelde entegrasyon süreçlerinin eforuna katlanmak istememekten ortaya çıkıyor. Çok fazla ödeme seçeneği sunmak aynı zamanda çok fazla efor gerektirdiği gibi bir algı var. Tabi bazı durumlarda üçüncü parti servis sağlayıcılardan hizmet alındığından komisyon ya da aylık sabit maliyet kalemi de büyük bir sorun olarak görülüyor. Fakat bu büyütülen ve çok fazla görünen sorunlar, işin sonunda çok fazla sipariş kaybına sebep olabilir.

9. Kafa Karıştıran Dolaşım/Yönlendirme
Kötü dolaşım/yönlendirme bazen insanı çileden çıkartır. Hele e-ticarette kötü dolaşım iyice çıkartır. Özellikle e-ticarette dolaşım basit ve anlaşılır olmalıdır. Kategorizasyon bu konuda çok önemlidir. Ürünlerinizi, e-ticaret projenize, kafa karıştırmayacak bir şekilde yerleştirmeniz gerekiyor. Sepetiniz, iletişim formunuz, kurumsal sayfalarınız için gerekli bağlantıları da yine aynı kolaylığa göre eklemelisiniz.

Navigasyon tasarımına başlamadan önce detaylı şekilde planlamanızda fayda var.

10. Ürüne Odaklanmamak
Bir e-ticaret sitesinin ya da uygulamasının amacı ürün satmaktır. Ya da en azından öyle olmalıdır. Öncelik sıralamasında ilk sırada ürün, sonrasında diğer şeyler gelmelidir.

Proje muhteşem gözüksün, inanılmaz geçiş animasyonları yapayım, insanlar estetiğe hayran olsun… Evet olsun; ama projeye koyacağınız her bir piksel ürünü desteklemelidir. Tek başına vitrinin güzel görünmesi bir şey ifade etmez, vitrin ürünü ön plana çıkartmalıdır. Vitrinin asıl işlevi budur. Web sitesi de her bileşeniyle ürüne hizmet etmelidir. Ürünü geri plana atmak işleri kolayca zorlaştırabilir.

0

#ux, e-ticaret

Bu yazımda genel deneyime katkı sağlayacak, çoğu zaman işleri kolaylaştıracak bir şeyden bahsedeceğim; arama. Çoğu zaman üzerine çok da düşünülmeyen, bazı sitelerde sadece bulunsun diye konulan bu özellik, kullanıcı/müşteri için işleri hızlıca halletmenin kapısıdır. Başarılı bir arama deneyimi tasarlamak için nelere dikkat etmelisiniz merak ediyorsanız yazıya devam edin.

1. Arama Yerleşimi
Kullanıcılar arama özelliğini ararken hızlı davranırlar. “Yazı yazılabilen küçük kutu” bulmak için sayfayı hızlıca tararlar. Bu yüzden arama çubuğunu ayırt edilebilir şekilde tasarlamak önemli. Arama alanının kullanım amacı genellikle kategori ağacı içinde kaybolmadan, aranılan “O” ürüne ulaşabilmektir.

Arama Alanını Belirgin Olarak Gösterin
Arama işlevi e-ticaret uygulama ya da web siteleri için temel işlevlerden biridir ve bu yüzden kullanıcı bu temel işlevi zahmetsizce bulabilmelidir. Belirgin şekilde yerleştirilmemiş olan arama alanı kullanıcıyı yavaşlaracaktır.

E-ticaret uygulamalarında, arama alanı, ana ekranın olabilecek en üst kısmında bulunmalı. Özellikle çok fazla ürüne sahip olunan, pazar yeri, marka uygulama ya da sitelerinde arama özelliği kullanıma hazır halde bulunması hayati önem taşır.

Ekranın en üstüne, kolayca farkedilebilen bir arama kutusu yerleştirin.

Büyüteç ikonu
Tüm dünyada, herkesin tanıdığı, görünce ne işe yaradığını sezgisel olarak bildiği bazı ikonlar vardır. Büyüteç de bunlardan biri. Yalnızca bir büyüteç ikonu koysanız dahi kullanıcılar bunun “arama” özelliği olduğunu düşünecektir. Çok basitçe, bu ikonu kullanarak kullanıcıların işini kolaylaştırabilirsiniz.

2. Sorgu Yorumlama
Arama her ne kadar işleri hızlandırsa da kullanıcıya ekstra bir iş çıkartır. Kullanıcı aramak istediği şeyi fiziksel ya da sanal bir klavye ile yazmak zorundadır ve yazmak zaman alan bir eylem olmakla birlikte yazım hatası da kaçınılmazdır. Bu yüzden amaç kullanıcının veri giriş eylemini olabildiğince azaltmaya çalışmak olmalıdır.

Sorgu Önerileri
Kullanıcılar genellikle arama sorgusu oluşturmada çok başarılı değillerdir. İlk denemelerinde aradıkları ürünü bulamadıklarında genellikle de pes ederler ve arama işlevini kullanmaktan vazgeçerler. Sorgu önerisi işlevi, kullanıcıların girdiği karakterlere göre tahmin yürüterek onlara uygun bir sorgu bulmaları konusunda yardımcı olmaya çalışır. Aslında bu öneri mekanizması aramanın hızını artırmaktan ziyade kullanıcıyı doğru şekilde sorgu oluşturma konusunda yönlendirir.

Ancak, sorgu önerilerinin kullanıcıya faydalı olduğundan emin olmalısınız. Kötü tasarlanan öneri mekanizması kullanıcının kafasını karıştıracaktır. Öneri mekanizmasını geliştirmek için yazım denetimi, kök sözcükleri tanıma gibi özellikleri kullanın.

Başarılı öneri mekanizması

Son Aramalar
Kullanıcı deneyimini iyileştirmek için kullanıcının son yaptığı işlemleri kayıt altına almak önemlidir. Aynı kullanıcı tekrar e-ticaret sitenizi ya da uygulamanızı kullandığında bu kayıt edilmiş verileri kullanarak daha hızlı, daha kişiselleştirilmiş bir deneyim sunabilirsiniz. Bu veriler içerisinde yapılan son aramaları kullanıcıya sunarak aynı aramayı tekrar en baştan yapmasının önüne geçebilirsiniz.

3. Search Progress
Kullanıcı deneyimini iyileştirmek için kullanıcının son yaptığı işlemleri kayıt altına almak önemlidir. Aynı kullanıcı tekrar e-ticaret sitenizi ya da uygulamanızı kullandığında bu kayıt edilmiş verileri kullanarak daha hızlı, daha kişiselleştirilmiş bir deneyim sunabilirsiniz. Bu veriler içerisinde yapılan son aramaları kullanıcıya sunarak aynı aramayı tekrar en baştan yapmasının önüne geçebilirsiniz.

En ideali arama sonuçlarının hemen görüntülenmesidir; ama ne yazık ki o kadar ideal şartlarda yaşamıyoruz. O yüzden arama sonuçlarının anında görüntülenmesini sağlayamıyorsanız bu görüntüleme süresini bir görselle kullanıcıya belirtin.

Buradaki amaç bekleme süresinin olduğundan daha kısa algılanmasını sağlamak.

Yer Tutucular (Placeholders)
Görüntülene süresi 1 saniyeden fazla sürüyorsa bomboş bir sayfa yerine sonuçların görünecekleri yerde birer yer tutucu göstermeniz yararlı olacaktır.

Kullanıcıyı hazır tutmak için yer tutucu (placeholder) kullanın

Lazy Loading
Türkçe çevirisi “tembel yükleme” olsa da aslında “sıralı yükleme” olarak çevirmek daha anlamlı olacaktır. Bu sistemde bazı sonuçlar gösterilirken, geri kalan sonuçların arkaplanda yüklenmesi devam eder. Bu sistemin en büyük avantajı başlangıçta çok az ürün yüklendiği için sayfa yükleme hızının çok yüksek olmasıdır.

Özellikle ürünler için lazy loading kullanıldığında görseller yüklenmeden önce ürün metninin gösterilmesinde fayda var. Böylece kullanıcının, tüm yüklemeyi beklemeden aradığı ürün için sayfa içerisinde tarama yapabilir.

Progressive Image Loading by Emily Arsenault 

4. Arama Sonuçları
Arama deneyiminin son halkası olan sonuç gösteriminde amacımız gösterilen sonuçların faydalı olduğundan emin olmak. Eğer sonunda yarar sağlamıyorsa bir arama deneyimi ne kadar özenli tasarlanırsa tasarlansın başarısızdır.

Alaka Düzeyi
Özellikle mobil cihazlarda kaydırma yapmadan gösterebileceğiniz sonuç sayısı çok kısıtlıdır. Bu yüzden arama sonuçlarını alaka düzeyine göre sıralamak çok önemlidir. Kullanıcının, ekstra bir hareket yaptırmak zorunda kalmadan, aradığı şeye hızlıca ulaşması sağlanmalıdır.

Filtre ve Sıralama
Kullanıcıların büyük bir kısmı arama yaparken o an bulunduğu sayfa içerisinde arama yapmaya çalışıyor. Fakat e-ticaret uygulama ya da sitelerinin çok çok büyük bir kısmı bu işlemi destekleyen fonksiyonlara sahip değil. (Böyle bir fonksiyon getirmek başlı başına uygulamanız ya da web siteniz için epeyce faydalı olacaktır.)

Hal böyle olunca arama yapan kullanıcıyı önüne çıkan alakasız ve çok fazla sonuçtan kurtuluş imkanı vermekte fayda var. Filtre ve sıralama seçenekleri vererek kullanıcıların sonuçları düzenleyebilmesini sağlamak faydalı olabilir.

Kullanışlı “Sonuç Yok” Sayfası
Bazı aramalar, kaçınılmaz olarak, ”sonuç yok” sayfasında sonlanacaktır. Bu noktada bazı faydalı şeyler yaparak kullanıcının deneyimini çıkmaza sokmaktan kaçınabilirsiniz.

Yazım hatalarını dikkate alacak, alternatif arama ilişkisi kurabilecek bir akıllı arama özelliği eklemek faydalı olacaktır.

Sonuç
Hızın her zamankinden daha önemli olduğu ve rekabetin çok yüksek olduğu günümüzde, kullanıcıya, istediği hatta istediğinden daha fazla hız sağlayan bir arama deneyimi sunmak tercih edilebilirliğinizi artıracaktır.

0

#tasarım, #ux, e-ticaret

İnsanlar günden güne çok daha fazla online alışveriş yapıyor artık. Online alışveriş insanlarda belli bir güven elde etmeyi başardı. Eskisine göre online alışveriş müşterisi daha seçici ve daha bilgili. Azımsanmayacak derecede bir kısım tasarımı ve kullanımı çekici değilse bir e-ticaret sitesinden ayrılma eğiliminde. Bu noktada e-ticaret kullanıcı deneyimi tasarımı çok büyük önem taşımaya başladı.

E-ticaretin bir başka olumlu yönüyse küçük işletmelerin de pazarda bilinmesine ve tercih edilmesine yol açması. Artık küçük işletmeler de kendi müşteri kitlelerini oluşturur hale geldiler. Böyle bir ortamda e-ticaret kullanıcı deneyimi tasarımı, tercih edilebilirlik açısından daha önemli hale geldi ve büyük ya da küçük farketmeksizin şirketler kullanıcı deneyimine yatırım yapmaya iyiden iyiye başladılar.

Gelin daha iyi bir kullanıcı deneyimi tasarımı yapabilmek için birkaç ipucunu inceleyelim.

Öncelik güzel görünmek değil, işlevsellik olsun.

Yıllarca, tüm arayüz tasarımlarında olduğu gibi, e-ticaret siteleri de bir çok tasarım eğiliminden geçti. Bir dönem çok fazla ön planda olan bazı eğilimler, bileşenler ya da teknikler çok kısa bir süre sonra tamamen unutulup gitti.

Video arkaplanlı sliderlar, parallax kaydırma efektleri, otomatik oynatmaya sahip karuseller… bir dönem hepsi e-ticaret sitelerinde sıkça yer ediniyordu. Bunun en büyük nedeni tabi ki çok güzel ve ilgi çekici görünebilmeleriydi. Fakat işin özünde, özellikle e-ticaret sitelerinde, müşterinin aradığı şey süslü, fantastik ya da ne derseniz artık öyle tasarımlar değil. Video arkaplanlı bir slider muhteşem gözükebilir; ama bir e-ticaret sitesinde ne kadar kullanışlı olur?

Hem estetik hem de işlevsel kaygıları olmalı; ama daha çok işlevsel kaygılarla düşünülmeli.

İnsanlar, ürünlere kolay erişebilmeyi, ayrıntılı bilgi alabilmeyi, hızlıca ürünü seçip ödeme yapabilmeyi istiyor. Özellikle ilk izlenim için güzel bir tasarım olmasının büyük önemi var ama bu güzellik işlevselliğin önüne geçiyorsa bazı noktaları tekrar değerlendirmekte fayda var.

Odak nokta; kişiselleştirme.

Kişiselleştirme, markalarla müşteriler arasında bir bağ kurulmasında yardımcı olur. Fakat artık özellikle e-ticaret dünyasında bundan daha fazlası anlamına geliyor. Çok fazla sayıda seçenekleri olduğu için kişiselleştirme hareketleri müşterinin sadakatini kazanmanın bir yolu haline geldi.

Bizim ülkemizde neredeyse her alanda yeri olan “müdavimcilik” anlayışını kullanmalısınız. Müşterinizi tanımalı, ona ismiyle hitap etmeli, ne istediğini ondan önce bilmelisiniz. Bu tarz uygulamalar müşteride amiyane tabirle “bizim marka” imajını güçlendirecektir. İyi bir e-ticaret kullanıcı deneyimi tasarımında geçmiş davranışları kullanarak kişiselleştirilmiş öneriler müthiş önem taşır. Önceki alışverişlerine dayanan ürün önerileri, müşterilerin beğenme ihtimali yüksek olan yeni ürünler bulmasını sağlayacak, deneyimi olumlu etkileyecek ve kısaca dönüşüm oranını artıracaktır.

Örneğin Hepsiburada üzerinde görebileceğiniz “Sıklıkla Beraber Alınanlar ” gibi oldukça basit bir bölüm eklemek kişiselleştirme uygulamalarına harika bir örnektir.

e-ticaret kullanıcı deneyimi

Kişiselleştirilmiş bir mail ya da önerilenler bölümü de işe yarar bir uygulamadır. Hatta çoğu zaman sizi büyük bir yatırım yapmaktan da kurtaracaktır.

Ödeme adımlarını basitleştirmek

Bir e-ticaret sitesinin hatta oradan da tüm bir işletmenin ayakta kalabilmesini sağlayan nokta işte tam burası. Vaat ettiğin ürünü ya da hizmeti satabilmek bir işletmenin en büyük amacıdır. Varlığını devam ettirebilmesinin tek yöntemi budur.

Bu noktada basit bir ödeme işlemi olması işleri kolaylaştıracaktır. Daha az adım içeren ödeme işlemleri, daha yüksek dönüşüm, daha düşük vazgeçme oranı ortaya çıkartır. Ancak daha az adım derken her şeyi aynı sayfaya toplayıp, bir karmaşa içinde ödeme yaptırtmaya çalışmaktan bahsetmiyorum.

Ödeme adımları konusunda olumlu bir e-ticaret kullanıcı deneyimi için şunları yapabilirsiniz;

– Dikkat dağıtan, gereksiz ve fazla her şeyi kaldırın ve geriye sadece işlemi tamamlamam için gerekli işlevler kalsın.

– Eğer yeni bir müşteriyse, uzun uzun kişisel bilgilerini sorup bir profil oluşturmak yerine facebook ya da başka bir sosyal ağdan giriş yapmalarını sağlayın.

– Üyeliksiz ya da misafir oturumunu kullanın. İnsanlar kişisel bilgilerini kalıcı olarak üçüncü şahıslarla paylaşmak istemeyebilir.

– Hassas bilgiler için (telefon numarası, ödeme işlemi, mail adresi) gibi bilgiler için veri doğrulama işlemini kolaylaştırın.

Liste oluşturulabilmesini sağlamak

Bir kullanıcı, e-ticaret sitenize girdi diye sizin ürününüzü ya da hizmetinizi kesinlikle satın alacak diye bir durum söz konusu olamaz. Bu noktada potansiyel müşteriyi, gerçek müşteriye çevirmenin yollarından biri liste oluşturmasına izin vermektir. Beğendiği; fakat o an için belki de almak konusunda kararsız kaldığı bir ürünü oluşturduğu listeye kaydetme ve sonra tekrar gözden geçirme şansını vermek dönüşüm olasılığını artıracaktır.

Hali hazırda satın alma kararını netleştirmemiş olan potansiyel müşteri, eğer listeleme yapabildiği özellik yoksa vazgeçtiği ana kadarki süreci tekrardan yapmak zorunda kalacaktır. Böylesi bir durumda potansiyel müşteri aynı ürünleri bulamayabilir, web sitesinde gereksiz süreler geçirebilir… Bu da yine kararsızlığını besleyebilecek durumlardır.

Liste hazırlama özelliği basit bir özelliktir. Eğer web siteniz böyle bir özelliği zaten barındırıyorsa açıkça görünebilir ve anlaşılabilir olduğundan emin olun.

Alışverişi alternatif kanallar ile genişletme

Markanızın bir mobil uygulaması yoksa büyük bir fırsatı kaçırıyorsunuz. Potansiyel müşterileri, müşteriye, müşteriyi sadık müşteriye çevirmede mobil uygulamaların payı azımsanmayacak derecede fazladır.

2018 yılında ABD’de, e-ticaret alışverişlerinin üçte birinden fazlası mobil cihazlar üzerinden gerçekleşti. Ortada 1 trilyon doların üzerinde bir satış rakamı var. Bu pastadan pay almamak mantıksız olur.

Google araştırmalarına göre e-ticaret alışverişi yapan insanların neredeyse yarısı bütün satın alma işlemini mobil cihazları üzerinden yapıyor ve bu kalabalığın büyük bir kısmı web sitesi değil uygulama üzerinden satın alma gerçekleştiriyor.

Farklı bir alternatif kanal da pazar yerleri ve sosyal medya siteleri de kullanılabilir.

Trendleri takip etme

Aslında bir e-ticaret kullanıcı deneyimi tasarımı yalnızca web sitesi ile sınırlı değil. Bütünsel bir bakış açısına sahip olunmalı. Müşterilerinizin deneyimini kolaylaştırmak için kapsamlı bir deneyim tasarlamalısınız. Bu bütünsel anlayışta yeni trendleri takip etmeniz ve sürekli geliştirme yapmanız faydalı olacaktır. Bu sürekli geliştirme düşündüğünüz kadar da zahmetli bir iş değil, müşterilerin ne aradığını bildikten ve mevcut zorlukları iyi analiz edip çözüm yolu bulmalısınız.

0

#ui, #ux

Bugün çok çok ince bir çizgide duran (ki bu çizginin de ince olması adına yaraşır bir davranıştır) bir kavramdan, minimalizmden ve minimal UI tasarımı konusundan bahsedeceğiz.

Minimalizm’i (haliyle) kısaca tanımlamak gerekir; sade ve basit. Minimalizm aslında her şeye uyarlanabilir bir anlayıştır. Edebiyatta, müzikte, sanatta, yaşam şeklide, giyimde, konuşmada… her şeyde minimalizm etkisini gösterebilir ve bu kadar farklı dallarda kullanılsa bile anlamını ve etkisini yitirmez.

Görsel sanatlarda minimalizm 60’lı yıllarda iyice gelişmeye başlamış bir akımdır. Minimalizmin temel ilkesi yalnızca gerekli öğeleri kullanmak ve kişilerin algısını tek bir şeye odaklamaktır.

“Daha fazla yere değil, daha az şeye ihtiyacınız var.”

Joshua Becker

Minimalizm, daha az şey kullanarak daha fazla şey söylemekle ilgili değildir. Bu akım söylemek istediğini en kısa, en basit ve en estetik şekilde söyleyebilmektir ve bu (öyle gözükmese bile) aslında çok da kolay değildir.

SURF – Interactive storytelling by Nick Herasimenka

Minimalizmin karakteristik özellikleri

– Basitlik
– Açıklık
– Dikkatli bir oran ve kompozisyon
– Genellikle büyük miktarda boş alan
– Temel unsur olarak tipografi
– İşlevsel olmayan, dekoratif tüm unsurların ortadan kaldırılması

Liste pek tabi uzatılabilir; ama bu hem vakit kaybı hem de bu yazının ruhuna aykırı olacaktır. 🙂

Minimal UI Tasarımı

Bugün web site ya da uygulama arayüz tasarımlarında minimalizm yoğun olarak kullanılmaktadır. Mümkün olduğunca kullanıcı dostu ve basit bir arayüz tasarımı yapmak amacıyla yola çıkıldığı için, bu yolun minimalizme varması da işten bile değildi zaten.

Flat design

Flat design (düz tasarım) modern dijital arayüzlerde minimalizmin en büyük destekçisidir. Flat design’ın en belirgin özelliği gerçekçi skemorfik görseller yerine 2 boyutlu görseller kullanmasıdır. Düz tasarımda genellikle daha az öğe, daha az kıvrım vardır ve gölge, ışık, renk geçişi veya doku kullanmaktan da kaçınılır. Bu da çok farklı ekran boyut ve çözünürlüklerinde çalışmanın en iyi şekilde görünebilmesini sağlar.

avsc. 6 by Wojciech Zieliński 

Sıkça yapılan bir hata olarak düz tasarım ve minimalizm birbirine karıştırılır; fakat aslına düz tasarım tek başına minimalist bir yaklaşım demek değildir. Düz tasarımda grafikler ile ilgilenilirken, minimalizm genel olarak düzen ve kompozisyonla ilgilenir. Düz tasarım mantığında yapılan bir iş bu haliyle minimalist olmayabilir.

Monochrome ve sınırlı renk paleti

Daha önce renkler ile ilgili birkaç yazı paylaşmıştım. Minimalizmde ise işler biraz daha farklı tabi. Minimal bir arayüz tasarımında, monokrom renk paleti kullanabilir ya da olabilecek minimum seviyeye çekebilirsiniz. Kısıtlı renk paleti kullanmak renk seçiminizi daha da güçlü hale getirecektir.

Monochrome Homepage Watch by Ssilbi NG

İyi bir tipografi

Tipografi, diğer her şeyde olduğu Minimal UI tasarımı konusunda da sadece içeriği iletmeye değil aynı zamanda stili de belirlemeye yardımcı olur. Yalnızca renk seçimi ve grafik stiline dikkat edip uyumsuz bir tipografi yapmak tasarımınızın seviyesini aşağı çekecektir. Yazı tipi seçiminde, kullanılan yazı tipinin öneminden daha önce bahsetmiştim, aynı şeyler burada da geçerli.

Seçim sınırlaması

Minimalizmin, minimal UI tasarımı konusunda en güçlü olduğu nokta kullanıcı konsantrasyonudur. İşlevselliğe ve sadeliğe odaklı olması, fazladan dekoratif öğelere, fazladan detaylara sahip olmadığından kullanıcının dikkatini tek bir yere çeker ve kullanıcının siteye ne amaçla girdiyse o amaca yönelmesini sağlar.

Çabuk ve sezgisel gezinme

Minimal UI tasarımı yaparken gezinme konusu bir zorluk yaratabilir. Tasarımcı, minimal bir tasarım yaparken en yüksek öneme sahip unsurları ön plana çıkartmak zorundadır.

Gezinme öğelerini gizleyecek birçok farklı yol var; fakat kullanılmadan önce iyice üzerine düşünülmeli ve test yapılmalıdır. Örneğin “hamburger menu” üzerinden konuşursak, bazı tasarımlarda gözden kaçabilir, tasarımın içinde kaybolabilir bu üç küçük çizgi. Ya da direkt olarak kullanıcıların etkileşimini zorlaştırabilir. Minimalist bir tasarım yaparken olumlu bir kullanıcı deneyimi için sorun oluşturmamak gerekir.

Negatif alanlar

Dijital tasarımlarda beyaz alanlar, negatif alanlar olarak adlandırılır ve aslında buralar “beyaz renkli yerler” değil boşluklardır. Negatif alanlar özellikle monokrom ya da sınırlı renk paleti kullanılan tasarımlarda kontrast oluşturmada ve okunabilirliği artırmada büyük tol oynar.

Palmers Hero by Ilia Semenov 

Kontrast

Minimalizm sadelik ve işlevselliği ön planda tutarken sınırlı kaynaklarını daha etkili şekilde ön plana çıkartmak için sırtını kontrasta yani karşıtlığa dayar. Renk seçimi ve yerleşimde kontrast oluşturacak kombinasyonlar tercih edilir.

2

#ui

“Bir önceki bölümde” mobil uygulamalarda, tür farketmeksizin, bulunan ortak ekran tiplerinden bahsetmiştim. Bu bölümde ise e-ticaret mobil uygulama tasarımı yaparken size fayda sağlayacak ekran tiplerinden bahsedeceğim.

Katalog ekranı
Bir e-ticaret projesinin ilk amacı ürün satmaktır. Mümkün olabildiğince açık ve net bir şekilde bu ürünlerin de listelendiği bir sayfaya ihtiyacı vardır. Buna katalog sayfası ya da listeleme sayfası diyoruz. Katalog sayfaları için tasarımcıya düşen görev, kullanıcıların dikkatini çekip, onları ürün almaya teşvik edecek bir katalog sayfası oluşturmaktır.

Mobil uygulamalar özelinde, diğer bir çok e-ticaret uygulamasında da olduğu gibi genellikle dikey eksende kaydırarak listelenebilen bir katalog sayfası olmasında fayda var. Mobil uygulama tasarımı

Başka bir yaklaşım olarak yatay eksende listeleme yapabilirsiniz. Kullanıcı yatay eksende bir kaydırma hareketi ile diğer ürünleri görüntüleyebilir. Yatay eksenli listeleme kullanırken sezgisel bir kullanım elde edebilmek için son ürünün tamamını değil bir kısmını gösterebilirsiniz.

Ürünlerin fotoğraf ya da çizimleri elbetteki yüksek kaliteli olmalı ve kullanıcıya alacağı ürünü net bir şekilde göstermeli.

mobil uygulama tasarımı
E-commerce UI app by Cuberto

Katalog ekranında kullanıcıyı harekete geçirecek, ürünü sepete eklemesini sağlayacak bir buton da bulunmasında fayda vardır. Böyle kullanıcı beğendiği bir ürünü ya da ürünleri fazladan bir sayfayla etkileşime girmeden satın alabilirler.

Ürün detay ekranı
Bu ekran, kullanıcının ne aldığını tam olarak detayları ile öğrendiği ekrandır. Ürün detay ekranı, açık bir şekilde ürünle ilgili önemli detaylar ile birlikte sayfanın odağında bulunan ürün fotoğraf ya da çizimlerini içermelidir. Ürün görselleri ve açıklamaları ne kadar detaylıysa kullanıcının satın alma kararı vermesinde o kadar etkilidir.

mobil uygulama tasarımı
Furniture Store App by Muhammad Wildan Wari

Ödeme Ekranı (Checkout Screen)
Bu ekran, kullanıcının satın alma öncesindeki gördüğü son ekrandır. Bu noktada tasarımcıya düşen en büyük iş kullanıcıyı rahatlatmaktır. Bu sayfa, kullanıcının iletişim, adres, kredi kartı gibi belirli kişisel bilgilerini paylaştığı bir sayfa olduğundan bu sayfa tüm bu bilgilerin girildiği formlardan ayrı sayfanın o markaya ait olduğunu belirten, kopya sayfa olmadığını, güvenli bir sayfa olduğunu belirten bazı metinler, uyarılar varsa sertifikalar bulundurmalıdır.

0

#tasarım, #ui
Kabul edelim ki mobil cihazlar (genelde telefonlar) hayatımızı bir şekilde ele geçirdi. Her an elimizde bir dikdörtgenle yaşıyoruz. Gerek sosyalleşmek, gerek normal hayatımızda, gerekse de iş hayatımızı kolaylaştıran, destekleyen birbirinin alternatifi tonla uygulama mevcut. Aslında mobil UI tasarımı tek başına incelenmesi gereken bir konu sayılabilir. İşte bu noktada bir tasarımcıya düşen görev kullanıcıların ihtiyaçlarını karşılarken aynı zamanda keyifli, kolay ve tatmin bir deneyim sağlayan bir arayüz oluşturmaktır. Bu sebepten tasarımcılar mobil uygulama evreni hakkında olabildiğince bilgi sahibi olmalı, bileşenlerini ve işlevselliğini bilmelidir. İyice gelişen kod sistemleri ile artık standartlaşmış ekranları bir görüşte ayırt etmek zorlaştı. Mobil UI tasarımı hala daha eski anlayıştan izler taşıyorlar elbette; ama artık sadece işlevselliğin yanında görsellik, kolaylık gibi başka etkenlerin de kullanım tercihini etkilemesi sebebiyle epeyce bir farklılaşma söz konusu. Bu yazımda en yaygın mobil uygulama sayfalarından ve mobil UI tasarımı içerisindeki özelliklerinden bahsedeceğim.
Ortak Sayfalar
Splash Screen (Yükleme / Açılış Ekranı) Daha önce “Muhteşem Bir İlk İntiba Yaratmak” yazımda da bahsettiğim gibi ilk intiba kullanıcının bir mobil uygulama ile ilgili fikrini epeyce etkileyen önemli bir noktadır. Bir splash screen’in en az uygulama kadar ilgi görmesi gerekir. Kullanıcının deneyimin başladığı nokta olan splash screenden de memnun kalması önemlidir. Mobil UI tasarımı yaparken bunu asla ve asla unutmayın. Splash screen, genelde minimalist bir anlayışla tasarlanır. Ürünün ismini, logosunu ya da sloganı içerir. Farklı cihazlarda benzer sonuçları elde edebilmek için odak noktası olarak ekranın ortası tercih edilir. Splash Screen by Samuel Medvedowsky Splash screenler özünde birer ‘oyalayıcı’ oldukları için dikkate alınması gerekli bir iki nokta var. Splash screenden asıl uygulama elranına geçme süresi mümkün olduğunca kısa olmalıdır. Bu süre 8-10 saniyeyi geçmemelidir. Aksi halde kullanıcı sıkılmaya başlar. Kullanıcı o uygulamayı splash screenle vakit geçirmek için seçmedi. Aynı zamanda çok da kısa olmamalıdır. Yarım yamalak görüneceğine, hiç görünmesin daha iyi. O yüzden splash screen 5-8 saniye arasında gözükmelidir. Ayrıca kullanıcının splash screendeki ilerlemeyi görebilmesi de iyi olacaktır. İlerlemeyi, yükleme çubuğu ya da yüzdelik ilerleme şeklinde göstermenizde fayda var. Onboard Tutorial Screen (Uygulama içi öğretici ekranı) Öğretici ekranları uygulamanın genelini, navigasyon sistemini, kısa yolları vesaireleri kullanıcıya gösteren ekranlardır. Uygulamayı ilk kez kullananlar için özellikle etkili sayfalardır. Onboarding Animation Öğretici ekranlarının belirli bir standardı olması mümkün değildir. Tamamen o uygulamaya hastır; fakat yine de genel bir tarz yerleşmiştir. Genellikle çizimlerden oluşur ve kullanımı kolay yoldan öğretmeye yöneliktirler. Yine azımsanmayacak oranda da kullanıcının öğreticiyle daha rahat bağ kurmasını sağlayacak maskotlar da kullanılmaktadır. Ana Ekran Ana ekran herhangi bir uygulamanın en önemli bileşenidir. Mobil uygulamalar özelinde bakarsak kullanıcılar çoğu işlemi ana ekran üzerinden gerçekleştirir. Ana ekran da mobil uygulama özelinde, amaca bağlı olarak tasarlanır; fakat yine de bazı ortak bileşenler içerir. Arama çubuğu ya da arama butonu, diğer içeriklere ulaşılmasını sağlayan bağlantılar ana ekranların ortak özellikleridir. Menü Ekranı Etkileşimi kolaylaştırmak için, kullanıcıyı tek dokunmayla istediği yere götüren navigasyon bileşenidir. Ana ekranın bir parçası ya da ayrı bir menü ekranı şeklinde iki farklı yöntemle uygulamaya yerleştirilir. Mobil uygulama özelinde olmasa da kullanıcı etkileşimini kolaylaştırmak adına 7 veya daha az element barındırması tavsiye ediliyor. Daha fazla menü bileşeni gerekiyorsa kategorize etmek iyi bir fikir olabilir. mobil ui tasarımı Giriş ve profil ekranları Mobil uygulamaların çoğu kullanıcılara kişisel hesap oluşturma imkanı tanıyor. Bu yüzden bir tasarımcı giriş ve profil ekranlarını iyi bilmelidir. Giriş ekranları, kullanıcının uygulamaya giriş yapmasını mümkün olduğunca kolaylaştırmalıdır. Kullanıcı adı ve şifresini girebileceği iki form kutusu ve onay butonuyla birlikte kayıt olma seçeneği mutlaka bulunmalıdır. Profil ekranı Kullanıcıların kişisel verilerini görebildiği ya da sosyal paylaşım temelli bir uygulama ise yaptığı paylaşımlara ayrıca hesap ayarlarını, gizlilik durumu gibi seçeneklere ulaşabildiği ekrandır. Bir nevi uygulama ve kullanıcı arasındaki kişisel alandır. Dikkat edilmesi gereken en önemli noktalardan biri profil sayfası içerisindeki bilgilerin sınırlandırılmasıdır. Sınırlandırma yapılmazsa karmakarışık bir profil ekranıyla karşılaşacaktır kullanıcı. Bu sayfa mümkün olabildiğinde minimalist bir anlayışa sahip olmalıdır. İstatistik ekranı Bazı mobil uygulamalar kullanıcı etkinlikleri ile ilgili istatistikler bulundurur. Uygulama ne kadar çok veriye sahipse, istatistik ekranının tasarımı o derece zorlaşır. İstatistiklerin kullanıcı tarafından tam olarak anlaşıldığından emin olunmalıdır. Kullanıcıya, verileri açık ve kolay bir şekilde verebilmelidir. Bunu farklı şemalarla, eğriler ve tipografiler kullanarak sağlayabilirsiniz. mobil ui tasarımı Takvim Etkinlik ya da yapılacaklar listesi gibi uygulamalar başta olmak üzere başka bir çok uygulama kullanıcıya kişisel bir takvim sunar. Uygulama türüne göre göre takvimin işlevi değişse de görünüş olarak uygulamanın geneline uygun olmalıdır. Temel sayfa tiplerini tanıdık, bir sonraki bölümde spesifik uygulamalar için ortak sayfaları inceleyeceğim.
0

#ui, #ux

Arayüzde navigasyon konusu UX tasarımının temel konularından biridir. Neden çok önemlidir sorusunun cevabı ise kullanıcılar belli bir amaç için arayüzünüzle etkileşime geçecekler ve yolu düzgün göremiyorsanız hedefe ulaşmak da zorlaşır. Her geçen gün daha fazla uygulama, web sitesi vesaire gibi arayüzle karşılaşan kullanıcılar sezgisel olarak kolay bir dolaşım bekliyorlar. Bu yüzden bu web tasarım sözlüğü‘nün bu bölümünü menü, düğme, gibi dolaşım ve etkileşim bileşenlerine ayırdım.

Navigasyon (Dolaşım, Yönlendirme, Gezinme)

Temel anlamıyla, navigasyon bir aracın bir yerden başka bir yere gitmesini sağlayan faaliyettir. Bu bir makine faaliyeti de olabilir, bir insan faaliyeti de. Fakat özünde iki nokta arasındaki planlı rotayı bir başkasına aktarmak vardır denilebilir. Kullanıcı deneyimi tasarımı tarafında baktığımızda navigasyon, kullanılabilirlik seviyesini belirleyen bir kavramdır. Bu durumda bir uygulama ya da web sitesi kullanırken, kullanıcıyı yönlendiren, hedefe ulaştırmayı sağlayan ve başarılı bir şekilde etkileşime girmesini sağlayan eylemler ve tekniklerdir. Kullanıcılar için en iyi ve en kolay rotayı belirlemektir.

Navigasyon, tasarım aşamasının en başında göz önünde bulundurulmalıdır. Böylece kullanıcı dostu bir rota belirlemek kolaylaşacaktır.

Menü

En temel gezinme öğesidir. Kullanıcıların, arayüzle etkileşime geçmelerini sağlayan bir grafiksel kontrol ünitesi diyebiliriz. Temel olarak arayüzün işlevini destekler şekildedir. Örneğin bir uygulamada “Kaydet”, “Sil” “Kapat” gibi temel işlevleri bu bileşen barındırır. Ya da satın alma, kategoriler, sayfalar gibi.. Menüler, arayüzde farklı konumlarda (üst, yan, alt menü gibi) ve görünüm ve etkileşime (kayan, aşağı ya da yukarı açılan menü gibi) sahip olabilir. Tasarımcının bu yelpazede görevi yalnızca menü yerleşimi yapmak değil potansiyel ve hedef kullanıcının istek ve beklentilerini dikkate alarak, analiz yaparak işlevselliği, yerleşimi ve düzeni sağlamaktır. İyi tasarlanmış bir menü olumlu kullanıcı deneyimini artıracaktır.

Bar (Çubuk)

Etkileşimin bazı temel aşamalarını barındıran kısımdır. Genellikle uygulamalarda alt kısımda hızlıca temel etkileşimleri gerçekleştirmeye olanak sağlar. Instagram, twitter, facebook gibi sosyal medya uygulamalarının neredeyse tamamında bu bar kullanımını görebilirsiniz. Kullanıcıyı olabildiğince uygulamanın temel özelliklerini, hızlıca kullanmasını sağlayan bir bileşendir.

Temel olarak bar (ya da çubuk) türleri şu şekildedir.

Tab Bar (Sekme Çubuğu)

Genellikle mobil uygulamalarda ve yine genellikle ekranın alt kısmında konumlandırılmıştır ve uygulamanın bölümleri arasında hızlı geçiş yapmayı sağlar.


Loading Bar (yükleme çubuğu)

Mevcut eylemin hangi aşamada olduğunu yüzde ya da zaman olarak gösterir. Kullanıcı işlemin ne kadar süreceği ile ilgili fikir sahibi olmuş olur.

 


Progress Bar (İlerleme çubuğu)

Yapılan faaliyetin ne kadarının yapıldığını ve sürecin ne kadarının tamamlandığını gösterir.


Button (Düğme)

Button ya da düğme tüm arayüzlerin en popüler bileşenidir. Kullanıcıların dijital arayüzde etkileşime girmelerinin en kolay yoludur. Çünkü aslında dijital arayüzlerdeki butonlar gerçek hayattakilerin birer kopyalarıdır. Button ile ilgili daha detaylı bilgiyi “Buton Tasarımı” ile ilgili yazımdan öğrenebilirsiniz.


Switch (anahtar, şalter)

Gerçek hayattaki gibi, iki seçenek arasından bir tanesini seçmesine olanak sağlar. Açık ya da kapalı gibi. Burada önemli olan nokta iki seçenekten hangisinin seçildiğini kolayca açıklayabiliyor olmalı. Renk farklılıkları gibi etkilerle bu sağlanabilir.


Picker (seçici)

Özellikle doğum tarihi, saat gibi çoklu seçeneklerden birini seçilebilmesini sağlar. Kullanıcı örneğin doğum tarihini seçmek için açılan picker’dan tarihleri yukarı ya da aşağı kaydırarak doğru olanı bulur ve seçer.


Checkbox (tik!)

Tik atmak dediğimiz işlevin arayüze uyarlanmış hali diyebiliriz. Bir onay vermek, çoklu seçeneklerden birini işaretlemek gibi işlevlerde kullanılır.

0

#ux
Herkes biliyor ki ilk intibayı değiştirmek inanılmaz zordur. (belki ikinci bir şans yoktur bile denilebilir.) Bu durum dijital dünyada ise çeşitlilik ve rekabetten dolayı imkansıza yakındır. O yüzden kullanıcıya (özellikle yeni kullanıcıya) yaratacağınız ilk intiba çok önemlidir ve haliyle bu intiba yaratma işinde web sitenizin belli bölümlerinin daha çok etkisi vardır, belki de header tasarımı da bunun en önemli kısmıdır.

Bu yazımda bunlardan biri olan, daha önce de Web Tasarım Sözlüğü‘nde kısaca değindiğim, header’dan bahsedeceğim ve header tasarımı yaparken kullanabileceğiniz bazı ipuçları vereceğim.

Header nedir?

Header, basitçe, bir web sayfasının en üstteki kısmıdır. Sayfaya ilk girişte, daha ilk saniyede, kaydırma yapmadan gördüğünüz şeydir. Bu haliyle epeyce stratejik bir durumu vardır.

Header, genelde “menü” olarak anılsa da aslında çok daha fazla şey barındırır bünyesinde. Bir örnek ile inceleyelim.


Nasıl gözüktüğünü bir kenara bırakıp yalnızca barındırdıklarına bakıyoruz. En üstte logo, menü ve giriş butonu bulunuyor. Hemen altında da büyükçe bir görselle (belki slider da olabilir) açıklamalar ve hemen altında da kullanıcıyı etkileşime çağıran bir buton bulunuyor. En altta ise sayfayı kaydırabildiğimizi belirten bir de küçük aşağı yönlü ok bulunuyor. 

Bir header’da neler bulunur?

Header bir çok şeyi barındırabilir;

  • marka kimliği. Marka kimliği çok geniş bir içeriği kapsıyor aslında. Haliyke header e bütün bir marka kimliğini koymak hem manasız hem de imkansızdır. O yüzden marka kimliğinin logo, marka adı, slogan, maskot, kurumsal renkler gibi temel unsurları koymak gerekir.

  • Ürün ya da hizmetin temasını ve amacını belirten küçük bir alan.

  • sayfalara ve içeriğe bağlantılar

  • sosyal medya bağlantıları

  • telefon numarası, elektronik posta gibi temel iletişim bilgileri

  • eğer arayüz çok dilli ise dil değiştirme bileşeni

  • arama alanı

  • abonelik alanı

  • sepet ve istek listesi

  • bir yazılımsa indirme, uygulama mağazası, deneme sürümü gibi bağlantılar


Yukarıdaki tüm bileşenleri bir header tasarımı yaparken mutlak kullanmaya gerek yok haliyle. Ama isterseniz tabi koyabilirsiniz tamamen sizin tercihiniz; ama böyle bir durumda bilgi yüklemesi olacak. Çok daha fazla bileşenin olması ilk bakışta daha fazla şey aktarıyormuş hissiyle iyi görünebilir ancak kullanıcının dikkatini asıl yoğunlaşması gereken bileşenlerden uzaklaştırır. O yüzden header tasarımı yaparken en başta iyi bir strateji yapmalısınız.



Header neden önemlidir?

Header kısmının birden fazla önemi vardır. 

Göz önünde bulundurulması gereken ilk şey, kullanıcıların bir web sayfasıyla ilk saniyede nasıl etkileşimde bulunduğunu gösteren göz tarama modelleri. İnsanlar bir siteye giriş yaptıklarında ilk yaptıkları şey tüm içeriği taramaktır. Detaylı inceleme yapmadan önce istemli ya da istem dışı olarak içeriği genel olarak tararlar. Kendilerini bu web sitesinde zaman geçirmeye ikna edebilecek bir şey ararlar. İşte bu noktada kullanıcıyı ikna etmek konusunda en büyük rol header’a düşüyor. 

Okunabilirlik ve Hiyerarşi

Okunabilirlik gördüğünüz gibi yine karşımıza çıktı. Bir web sitesinin ilk amacı, kullanıcıya amacını anlatmaktır. Bir ürün mü tanıtıyor? Bir hizmetten mi haberdar ediyor? Bir sosyal sorumluluk projesine destek mi arıyor? Bunların tamamını, web sitelerinin çoğu metin içeriklerle kullanıcıya ulaştırır. O yüzden okunabilir olmak bir web sitesinin, tüm bileşenleri için, olmazsa olmazdır. 

Okunabilirliği artırmak için özellikle renk ve tipografi konusunda çok dikkatli olmalısınız.


Kullanıcılar, genel olarak üç şekilde web sitelerinde tarama yaparlar. Bunlar “F-modeli”, “Z Modeli” ve “Gutenberg Modeli” olarak adlandırıyoruz. Bu modellemeler ile kullanıcıyı tanıyarak arayüzünüzün başarısına katkıda bulunabilirsiniz.


header tasarımı

Bu model, daha çok bilgi ve metin, daha az görsellik barındıran durumlarda genellikle kullanılıyor olan tarama modelidir. Klasik şekilde, dört köşeye yerleşmiş olan noktalar arasında, soldan sağa, oradan da yine sol alta ve tekrar sağa doğru devam eden bir tarama biçimidir. Bu bir web sitesi de olabilir, bir afiş de olabilir, bir kitap da olabilir. İnsanlar çoğunlukla bu modeli kullanırlar.


header tasarımı

Z-Modeli’yle ise Gutenberg modeline oranla daha fazla görsellik barındıran durumlarda karşılaşıyoruz. Tarama yönü Gutenberg modeli gibi soldan sağa ve aşağı yönlü olsa da, görsel oranı daha fazla ve içerik daha çok bölündüğü için yönlenme sayısı da fazla olacaktır.



header tasarımı

Diğer bir model olan F modelinde ise kullanıcı içeriği soldan sağa düz bir şekilde tarar. Sonrasında sayfayı aşağı yönde hareket ettirir ve bu sırada yukarıdan aşağı içeriğin sol kısmını dik bir şekilde tarar. Sonrasında yine soldan sağa bir hareket yapıp, yine aynı şekilde yukarıdan aşağı dik bir tarama yapar. Özellikle arama motoru sonuçlarında rastlanılan bir tarama modelidir. (Bu tarama modelleri ile ilgili yakında daha detaylı bilgi vereceğim.)

Özetle; header’in önemi bir web arayüzü için tartışılmaz şekildedir. Saniyeler içinde karar veren kullanıcıyı “burada kalmalısın” diye ikna edici bir görevi vardır. Bununla beraber bir web arayüzü için header bölümü bir zorunluluk değildir tabi. Header’in işlevini başka yaratıcı yollarla karşılayan örnekler de mevcut. Ama header’in olup olmaması da, olursa nasıl olması gerektiği de diğer her şey gibi bir araştırma ve analiz sonucunda karar verilmesi gereken şeylerdir.

0

#makale, #tasarım

Kitap okumayı seven biriyimdir. Daha öncesinde hiç kitap önerisinde bulunmamış olsam da kapağını tasarladığım, kitabın kapak içinde adımın yazmasından gurur duyduğum bir kitap önerim olacak; Tekvin. 

Uzun zamandır bilim kurgu klasiklerine yoğunlaşmış halde ilerliyordum. Özellikle kitap diye sosyal medya fenomenlerinin basılmış “tivitleri” satıldığı için açıkçası zaten okunacak bir şey de olmadığı için yalan söylemeyeyim Türk yazarların kitaplarını okumuyordum. Telvin’in prologu diyebileceğimiz birinci bölümünü ilk okuduğumda açıkçası inanamadım. Hemen mesaj attım Arif Ergin’e.

Yıllardır tanıdığım, birlikte çok güzel işlere imza attığımız Arif, yazdığı kitabı anlattığında ve kapak tasarımı yapmamı rica ettiğinde açıkçası heyecan duymadım desem yalan olur. Kitabın konusu epeyce ilgimi çekti. Herkesin dediği gibi resmen Dan Brown’ın Türkiye şubesi gibi bir kitap vardı ortada. Kabala, yaratılış, herkesin ismini duyduğu; ama hakkında çok az hatta neredeyse hiç fikir sahibi olmadığı Osman Hamdi Bey, küresel ekonomi… Olaylar olaylar!

Büyük bir heyecanla alttaki tasarımı hazırladım. Basılıp basılmayacağını tabi bilmiyorum. Çünkü Doğan Kitap, (ki kendilerini bu konuda çok takdir ederim) bünyesinde tasarımcılar barındıran ve çok güzel tasarımlar yapan bir yayınevi ve dışarıdan birinin çalışmasını kullandıklarını hiç duymadım. Fakat ilk taslak ortaya çıktığında ekrana bakıp dedim ki bu kitabın kapağı budur! Alternatif yapmama gerek dahi yok! Onlar da benimle aynı fikirde olmalılar ki kapak olarak benim tasarımım kullanıldı.

tekvin

Şimdi kendimi övmem bittiği için gelelim kitaba…

Kitabın arka kapak ve tanıtımı şu şekilde;

“Gizemli bir tablo…

Yeryüzünün efendilerine rağmen kurulmuş bir ülke…

Ve bu ülkenin kaderi üzerinde oynanan büyük oyun…

İşadamı Hakan Turan’ın hayatı, manevi kız kardeşi Melek’in kaçırılması ile bir gecede altüst olur. Kız kardeşinin izini süren Hakan, kendini paranın kadim efendileri arasındaki bir savaşın ve yıllar önce gerçekleşmiş cinayetlerle kurgulanmış bir bilmecenin tam ortasında bulur. Tüm ülkeyi kaosa sürükleyen bu sırrın anahtarı Osman Hamdi Bey’in gizemli bir tablosundadır. Mihrap ismiyle de bilinen Tekvin’de…

Biz, Yeni Dünya Düzeni’ni yeraltının derinliklerinde karanlık bir mağara gibi tasarladık. Bu mağaranın bir ucunda, içeri ışık süzülen bir boşluk var. İnsanların sırtlarını ışığa çevirdik. Onları kollarından, boyunları ve bacaklarından zincirlerle bağladık. Öyle ki sadece karşılarındaki karanlık mağara duvarını görüyorlar. Işıkla aralarından bir sürü nesne geçiyor ve ışık bu nesneleri mağaranın duvarına gölge olarak yansıtıyor. İnsanlar, nesneleri değil, sadece onların duvara yansıyan gölgelerini görebiliyorlar.”

Kitap, tanıtım yazısından anlaşıldığı gibi çok büyük. Hem hikaye olarak hem de fiziksel olarak. 500 küsür sayfalık bir büyüklükten bahsediyorum. Ama bu 500 küsür sayfalık büyüklük içi boş uzun cümlelerden dolayı değil. Anlattığı hikaye, mekanlar, karakterler arasındaki bağlantılar da çok büyük. Kendine mekan olarak başta İstanbul’u seçmiş olsa da aslında tüm dünyayı saran, yüzlerce yılı içine alan bir hikayeden bahsediyoruz. Kitap için diyebileceğimiz şey aslında devasa!

“Yeni nesil” Türk romancılığının düştüğü fenomen ve kaybeden edebiyatı bataklığından sonra Tekvin, resmen kurtarıcı gibi bence.

Gidin, alın okuyun.

0

#tasarım, #ux

UX tasarımı ile ilgili en detay noktalarından biridir içeriklerde bölümlendirme. Peki bu bölümlendirmeyi nasıl yapacağız? Sonsuz kaydırma (infinite scrolling) mı yoksa sayfalama (pagination) şeklinde mi? İki tarzın da artıları ve eksilerini inceleyerek seçim yapmanızda yardımcı olmaya çalışacağım.


SONSUZ KAYDIRMA (INFINITE SCROLL)

Sonsuz kaydırma, içeriğin bölümleri arasında belirlenmiş bir bitiş çizgisi olmadan, sayfayı kaydırdıkça içeriğin diğer bölümlerin yüklenmesini sağlayan bir tekniktir. İçeriği okurken ya da görürken deneyim sekteye uğramaz, devamlı bir haldedir. Bu yönüyle cazip gelse de her içerik/site/uygulama için genel bir çözüm değildir.

Artı 1 – kullanıcı katılımı

Sonsuz kaydırma yöntemiyle, kullanıcıyı sayfanızda ya da uygulamanızda daha fazla kalmasını sağlayabilirsiniz. İçerikleri görüntülemek için sayfayı kaydırmaya devam etmesi de etkileşimi artıracaktır. Özellikle sosyal medya gibi bir içerik denizinde sonsuz kaydırma, içeriklerin yüklenmesini beklemeden etkileşime girmek için çok etkili bir yoldur.

Sonsuz kaydırma, kullanıcıların belirli bir şeyi aramadığı “keşif” odaklı sayfa ve uygulamalar için neredeyse bir zorunluluk sayılabilir. Sonsuz kaydırma ile keşfettiği içerikler sayesinde daha fazla zaman harcayacak ve etkileşiminizi artıracaktır.

Artı 2 – kaydırma tıklamadan iyidir.

Kaydırma, tıklama ya da dokunmadan daha iyi bir deneyim sunar. Fare tekerlekleri ya da dokunmatik ekranlar bu kaydırma işlemini çok hızlı hale getirdiler. Sürekli ve uzun bir içerik için sonsuz kaydırma, metni sayfalara ayırmaktan daha kullanışlıdır.

Artı 3 – kaydırma mobil cihazlar için daha iyidir.

Özellikle dokunmatik ekranlar sonrasında kaydırma hareketi çok daha kolay bir hal aldı. UX tasarımı işte bu yüzden daha da önemli hale geldi. Kullanıcılar sezgisel olarak içerikle etkileşime geçmeye başladılar. Mobil cihazlardaki kontroller sonsuz kaydırma için mükemmeldir.

Eksi 1 – sayfa performansı

Sayfanın hızlı yüklenmesi, kullanıcı deneyiminin her şeyidir. Tüm deneyimi planlarken ilk önce aklınıza bu gelmeli. İstediğiniz kadar benzersiz biz deneyim tasarlayın, sayfa yüklenme süresi uzunsa kullanıcınıza veda etmeye hazırlıklı olun. İşte sonsuz kaydırmanın handikaplarından biri de bu. Sayfayı kaydırmaya devam ettikçe yüklenen veri artacak ve bir noktadan sonra yükleme performansı düşmeye başlayacak. Bu performans düşüşü özellikle kısıtlı donanım sahibi cihazlarda takılmalara bile sebep olabilir.

Eksi – 2: yer belirleme

Nerede kalmıştık? Kullanıcılar içeriğin belirli bir noktasına geldiklerinde oraya bir işaret koyamazlar. Oldu ki içeriğinizin yarısında bir şekilde sayfadan ayrıldı. Sonra geri döndüğünde ne yapacak? En baştan aşağı doğru kaydıracaklar. Kullanıcı bunu yapmak istemez.

Dünyanın en büyük pazaryeri sitelerinden Etsy, 2012 yılında arama sonuçlarında sonsuz kaydırma tekniğini kullandı. Sonuç? Kullanıcı etkileşimi azalmaya başladı. İnsanlar uzunca bir listeyi gözden geçirdikten sonra, listenin başındaki ya da sonunda bir ürüne gitmek için az önce yaptığı kaydırma işlemini tümden geriye doğru yapmak zorundaydılar ve yapmak istemediler.

Eksi – 3: saçma kaydırma çubukları

Kaydırma çubuğunun uzunluğu ve konumu sayfanın içerdiği veri miktarıyla orantılıdır. Bir içeriği okurken kaydırma çubuğu 150px yüksekliğinde ve sayfanın sonuna yaklaşmış haldeyken, bir sonraki cümleye geçmek için kaydırdığınızda 70px’e düşse ve sayfanın ortasına gelse kullanıcı ne hisseder? Siz ne hissedersiniz?
Bu can sıkıcı histen kurtulmak için bazı arayüzlerde kaydırma çubuğunu gizleyenler çıktı. Durumu kurtarmak yerine daha vahim hale getirmek denen şey işte tam olarak bu.



SAYFALAMA (PAGINATION)

En klasik yöntemdir. İçerik belirli bölümlerinden sayfalara ayrılır. Sayfanın sonuna geldiğinizde sayfa numaralarını görürsünüz.

Artı – 1: iyi dönüşüm

Sayfalamanın en büyük artısı içeriğin boyutunu kestirebilmenizdir. Özellikle listeleme sayfalarında kullanıcının aradığı şeye ulaşmasında kolaylık sağlar.

Google arama sonuçlarını sayfalayarak vermesi iyi bir örnektir. Kullanıcı aradığı şeyin alaka düzeyinin, sayfa sayısıyla ters orantılı olduğunu bilir ve ona göre hareket eder.

Artı 2 – kontrol hissi

Sonsuz kaydırmada bir noktadan sonra istediğiniz kadar kaydırın sona gelmeyecekmiş gibi hissedersiniz. (sosyal medya siteleri ve uygulamalarında durum neredeyse buna yakındır zaten)

Kullanıcılar mevcut sonuçların sayısını bilirse sonsuz kaydırma’ya nazaran daha bilinçli hareket ederler ve sonuç sayısını bildikleri için aradıkları şeye ulaşmaları ne kadar vakitlerini alacağını tahmin edebilirler.

Artı – 3: yer bulma

Sayfalandırılmış bir arayüzde kullanıcı aradığı şeyin konumu hakkında sezgisel olarak bilgi sahibi olabilirler. Ya da okuduğu içeriğin neresinde kaldığıyla ilgili zihinlerinde bir yer işareti oluşturabilirler.

Özellikle e-ticaret site ve uygulamalarında sayfalama kullanmak çok iyidir. Çünkü kullanıcıların azımsanmayacak bir kısmı online alışverişini yarıda bırakıp başka bir şeylerle uğraşıp, sonra tekrar geri dönüp alışverişlerine devam ediyor. Bu noktada o kullanıcıyı hızlıca kaldığı noktaya yönlendirebilmek gerekir.

Eksi: Ekstra İşlem

Sayfalamanın en büyük eksisi kullanıcının diğer sayfaya geçmek için, geçiş için gerekli bağlantıyı bulması, tıklaması ve yeni sayfanın yüklenmesi gerekiyor. (düğmeler ile ilgili yazıma ulaşmak için buradan buyurun)

Sayfa geçişlerindeki ekstra işlemden ziyade asıl problem çoğu web sayfası ya da uygulama sayfalarda sınırlı içerik göstermesi. Sayfa başına içerik oranını iyi ayarlanmış olmazsa kullanıcılar çok fazla ekstra tıklama yapmak zorunda kalabilir.

Hangisini ne zaman kullanmalıyız?

Sonsuz kaydırmanın en etkili olduğu yerler, içeriğin kullanıcılar tarafından oluşturulduğu sosyal medya tarzında, akış temelli site ve uygulamalardır.

Sayfalandırma, daha çok bir hedefe yönelik site ve uygulamalarda daha işlevseldir.

Google iki tekniği harmanlamak konusunda çok iyi bir örnektir. Google Görseller, arama sonuçlarını, kullanıcıların metinlere göre daha hızlı tarayabilmeleri sebebiyle sonsuz kaydırmayı kullanır. Fakat normal arama sonuçları metin olduğu için klasik sayfalama tekniği kullanılır.

Sonuç
Sonsuz kaydırma ya da sayfalama tekniklerinden birini seçmeden önce iki tekniğin de artı ve eksilerini tartmalı ve arayüz tasarladığınız ürüne uygunluğunu düşünmelisiniz. UX tasarımı yaparken göz önünde bulundurmanız gereken nokta uygunluk ve işlevsellik.  UI ve UX Tasarımı ile ilgili diğer yazılarımı da okumanızı tavsiye ederim…

0