E-Commerce App Cart Design Çalışması
Anlam ve bütünlük ilişkisini inceleyeceğim yeni projem "Mobil Ürün Kart Tasarımı" ile karşınızdayım. Yine bu projede bildiklerimi ve neyi neden yaptığımı anlatmaya çalışacağım.
Genel Bakış: Kart tasarımı üzerinde bir çok nesne barındıran ve o nesnelerin farklı özellikleri olan bir yapı. Alan kullanımı, nesnelerin yerleşimini etkin kullanmak tasarımımızı öne çıkaracaktır.
Ayrıca kart tasarımı, kendi isteklerimizin dışında müşteri taleplerine göre şekillenen bir yapılar olabiliyor. Stratejimizi buna göre belirlemeliyiz. Bu cümlenin açıklamasını detaylandıracağım.
Alan: Grid yapısını doğru kurgulamak, nesnelerin yerlerini doğru konumlandırmamıza olanak sağlayacaktır. Aşağıda bunu göstermek istiyorum.
Amaç : Kartı tasarlarken ürünleri direkt olarak sepete ekletmek mi yoksa ürün detaylarına göstermek mi istiyoruz? Yoksa butona tıklandığında arkada veri kontrolü mü yaptırmak istiyoruz ?
İlişki : Tasarım yaparken, backend ve frontend için kodlanabilir olduğunu, projenin ekip tarafından yapılıp / yapılamayacağını, hangi teknolojileri kullanıp kullanmadıkları ilişkisini kurabilmeliyiz.
Breadcrumb : Kurguda özel tasarlanmış bir e-ticaret sitesi olduğunu görüyoruz. Bu sebepten kullanıcı adı Menü ikonu ve Label ile bir bar yapısı oluşturuldu. Bu yapı Breadcrumb olarak bilinir ve kullanıcının, menüye, bir önceki sayfaya ya da profile ulaşabilmesini kolaylaştırır.
Bulunabilirlik: Arama ve filtreleme alanları kullanıcı alışkanlıklarına göre konumlandırıldı. Ürün aramak ve aradığın ürünün ürünün beden, cinsiyet, ürün kategorisi gibi alanları filtreleyebiliyoruz.
Başlık: Ürün Adı ve Kategori bilgilerinin bulunduğu alan ve aldığı rating oranını gösteriyoruz. Burada kullanıcıların tercih ettiği ürünlere göre sıralama yapıp ürünleri gösterme konusunda bir feature bile geliştirilebilir.
Ürün Kartı: Gelelim basit gibi görünen fakat hem tasarım hemde kodlamaya yönelik en önemli alan olan Ürün Kartı tasarımına. Burada buton, favorilere ekleme ikonu, ürün görseleri, ürün başlığı, ürün fiyatı ve ürün adeti kısmı. Nesnelelerin yerleşimini anlatalım.
1 – Limited : isimi bir bilgilendirme texti görüyoruz. Bu textin yerleşimi ürün görselini etkilememeli, dikkat çekmeli. Doğru ürün seçilmeli .Opsiyonel kullanım için yazılım ekibine bilgi verilmeli. Çünkü veri tabanından ürün çekildiğinde opsiyonel alan buna göre belirlenecektir.
2 – Fav Iconu : Anlık veri işleminin yapıldığı, verinin diğer sayfalara çekildiği, cache işlemlerinin yürütüldüğü alandır. Yazılım ekibi çin sistemin inşa edilmesi, kodlabilirliği konusunda üzerinde durulması gereken bir alandır.
3 –Ürün görselleri : Dikkat çeken, satış amacını direkt belirten ve kartın asıl yapısını tasarlarken dikkat ettiğimiz bölümdür. Burada ben bir slider yapısı oluşturdum. Tek görsel veya bir çok görsel, renk seçenekleri gibi bilgileri de burada verebiliriz.
4- Ürün Başlığı : Dikkat çekici, gerçekçi bir başlık hem tasarımsal olarak hemde ürüne karşı dikkati arttırması amacıyla önemlidir. Bu alanları H etiketleriyle belirlemek uygulamanın web versiyonunda seo için önemlidir. Başlık boyutu bu kıstaslara göre belirlenmelidir.
5 – Ürün Fiyatı : Dikkat çekici olmalı. Kullanıcı için görünürlüğü net olmalı. Gözlerin web sitelerini ve uygulamaları soldan sağa doğru incelendiği araştırması yapıldığı için ürün fiyatının yerleşimini ve boyunu önemsemeliyiz.
6- Ürün Adeti : Bu kısım kullanıcının kolayca tıklayabildiği, icon ve yazıların bir ahenk içinde olduğu bir alan olmalı. Adet arttırılırken, azaltılırken yapının sağa sola kaymaması gerekir. Iconlar üzerine parmaklar bastığı için icon büyüklüklerine dikkat etmeliyiz.
Ürün Detayı – 1 : Detay sayfasında görsel göstermek benim tasarımımın bir parçası. Daha küçük, daha büyük resim göstermek tasarım bütünlüğünü kaybettirmeden özenle seçilmeli.
Ürün Detay – 2 : Ürün detayda kullanıcının işini kolaylaştırmak zorundayız. Çünkü ürün seçilmiş ve ayakkabı numarası varsa ürün rengi, boyutu ebatı gibi alanları kolayca seçtirmeliyiz. Ürün ile ilgili bilgileri görünür ve dikkatlice yazmalıyız.
Ürün Detay -3 : Burada yer alan fiyat alanını rengi ve boyutuna dikkat edilmeli. Bütünlük sağlanması için biçimsel özellikleri taşınmalı.
Ürün Detay – 4 : Sepete Ekle butonunun sağda olması bir kullanıcı alışkanlığıdır. Butonu sol üste almak alışkanlığı ve işlemin devamını zora sokacaktır. Yapılan tasarıma göre bu alan ile ilgili kullanıcı deneyimi araştırmaları yapılmalı.
Ürün Detay – 5 : Ben uygulamayı tasarlarken, gerçeklik üzerine kurguladım. Müthiş efektli görseller kullanmak her zaman doğru etki yaratmaz. Tabi ürün resimlerinin kaliteli ve profesyonel olarak çekilmesi albeni için çok önemli. Bu konuya da dikkat çekmek istedim.
Ürün Detay 6 : Figmada Remove BG eklentisi ile görselleri dekupe edebilirsiniz. Illustrator ya da photoshop ta diğer alternatifler arasında yer alabilir tabi.