Sneaker Uygulaması Tasarımı: Ürün Sayfası Yeniden Tasarımı, Önce ve Sonra

Bir alışverişçi sneaker sayfasını üç soruya cevap bulmak için açar: neye benziyor, ne kadar ve benim numaram var mı? Aşağıdaki ilk taslakta üç cevap da var, ama alışverişçiye onları aratıyor. Düzeltme aynı ürünü ve aynı fiyatı tutuyor, cevapları alışverişçinin sorduğu sıraya koyuyor.

Tüm ekran, önce ve sonra

Junior taslağı

Düzeltilmiş

Solda alışverişçi, ürün adından önce fotoğrafın üstünde yedi küçük işaretle karşılaşıyor. Sağda önce fotoğraf, sonra ad ve fiyat geliyor ve koyu renkli tek düğme satın aldıran düğme.

Düzeltme 1: üzerinde hiçbir şey olmayan fotoğraf

Önce

Sonra

Fotoğrafın her yerinde dört ikon ve üç rozet, karşısında bir geri ve bir kaydet düğmesi.

Taslak, tüm mağazayı ürünün üstüne yığmış. Üstte geri, paylaş, kaydet ve kırmızı "3" rozetli bir sepet sıralanıyor. Sol altta "Yeni ürün", "-%19" ve "Ücretsiz kargo" ayakkabının burnunun üstüne yığılıyor.

Düzeltme, fotoğrafta iki adet 40 px yuvarlak düğme bırakıyor: geri ve kaydet. Gerisi ait olduğu yere taşındı. İndirim fiyatın yanında, kargo satırı alttaki çubukta toplamın altında, fotoğraf sayısını gösteren noktalar da fotoğrafın altında duruyor.

Yeniden kullanılacak kural: ürün fotoğrafı üründür. Alışverişçinin ayakkabıyı değerlendirmesine yardım etmeyen her şey başka bir yere aittir.

Düzeltme 2: önce ad, sonra fiyat

Önce

Sonra

Bir rakam sırası içindeki fiyat, karşısında kendi satırındaki fiyat.

Taslak markayı 9 px gri büyük harflerle, ürün adını iki satıra sarkan şekilde yazıp ardından tek bir satır koyuyor: "$129.00 | 4.8 (2.341 yorum) | 1,2 bin satış". Beş rakam aynı boyutta tek satırı paylaşıyor ve fiyatın aralarından bulunması gerekiyor.

Düzeltme, ada büyük puntoyla kendi satırını veriyor. Fiyat da kendi satırını alıyor: büyük puntoyla "$129", yanında üstü çizili eski "$159" ve küçük bir "%19 indirim" çipi. Puan, yorumlar ve satışlar altta daha sakin bir satırda duruyor, çünkü onlar kararı destekler, kararı veren fiyattır. İki ekran da aynı rakamları taşıyor: 129 bölü 159 yaklaşık 0,81 eder, yani %19 indirim doğru.

Yeniden kullanılacak kural: bir satırı birkaç rakam paylaşıyorsa, alışverişçinin aradığı tek rakam vardır. Ona kendi satırını ve boyutunu verin.

Kontrol edilecek bir fiyat kuralı

Üstü çizili fiyatın bazı yerlerde yasal bir yanı var.

Düzeltme 3: seçileni gösteren bedenler

Önce

Sonra

Sekiz küçük kutu, karşısında durumları görülebilen çiplerden oluşan bir ızgara.

Taslaktaki beden kutuları tek sırada 41 x 32 px. Seçili beden 8,5'in kenarlığı sadece 1 px daha koyu, tükenmiş 9,5 ise stokta olan bedenlere benziyor. Üç renk noktasının da adı yok.

Düzeltme, her bedeni dörderli iki satırda 44 px'lik bir çip yapıyor. Seçili olan #111111 ile doluyor ve beyaz yazı taşıyor. Tükenen, gri üzerinde çizili, yani kimse dokunmadan önce kullanılamaz olduğu anlaşılıyor. Renklere örneklerin altında isimler geliyor: Crimson, Black ve Lime, seçili olanın etrafında bir halka var.

44 px yükseklik önemli. Apple'ın yönergesi en az 44 x 44 puntoluk bir dokunma alanı öneriyor ve sekizli bir sıradaki 32 px'lik bir kutuyu ıskalamak çok kolay.

Yeniden kullanılacak kural: her seçeneğin üç görünür durumu olmalı: müsait, seçili ve kullanılamaz. Her birini ince çizgiyle değil dolguyla söyleyin.

Düzeltme 4: satın aldıran tek çubuk

Önce

Sonra

Büyük harfli iki buton ve bir bağlantı, karşısında fiyat ve tek bir buton.

Taslak bir adet seçici, çerçeveli bir "SEPETE EKLE", siyah bir "ŞİMDİ AL" ve küçük bir "Favorilere Ekle" bağlantısıyla bitiyor. Neredeyse aynı ağırlıktaki iki buton alışverişçiye satın alma yolu seçtiriyor ve sayfayla birlikte kayıp gidiyorlar.

Düzeltme, altta sabit duran tek bir çubukla bitiyor: "$129", altında "Ücretsiz kargo" ve siyah tek bir "Sepete Ekle" butonu. Favori listesi fotoğraftaki kaydet düğmesi oldu. Tab bar da gitti, çünkü bir satın alma çubuğunun altındaki beş sekme onunla yarışır.

Yeniden kullanılacak kural: ana eyleme tek buton verin ve fiyatı yanında tutun.

Daha küçük düzeltmeler

• Tek sol kenar. Taslağın boşlukları solda 14 px, sağda 12 px'ti. Düzeltme iki yanda 20 px kullanıyor.
• Gerçek bir yazı ölçeği. Metin 9 ile 14 px'ten iOS'un 12 ile 22 pt boyutlarına geçti.
• Cümle düzeni. Büyük harfli "SEPETE EKLE" ve "ŞİMDİ AL", "Sepete Ekle" oldu.
• Daha sakin bir bağlantı. Mavi "Beden Tablosu", gri "Beden rehberi" oldu, çünkü o seçimi destekler, seçimin kendisi değildir.

Kendi ürün sayfanızı denetleyin

SSS

Bir sneaker ürün sayfası önce ne göstermeli?

Fotoğrafı, üzerinde geri ve kaydet dışında hiçbir şey olmadan. Sonra adı, ardından kendi satırında fiyatı.

Ayakkabı için beden seçici nasıl tasarlanır?

Her bedeni en az 44 px'lik bir çip yapın, seçili olanı koyu bir renkle doldurun ve tükenen bedenleri çizin. Seçili bedenin etrafındaki ince bir kenarlık okunamayacak kadar silik.

Bir ürün sayfasında indirimli fiyat nasıl gösterilmeli?

Güncel fiyatı büyük, eski fiyatı yanında üstü çizili ve indirim yüzdesini küçük bir çipte gösterin. Buradaki iki ekran da $129, $159 ve %19 indirim kullanıyor. Hangi eski fiyatı gösterebileceğinize dair yerel kuralları kontrol edin.

Bir ürün sayfasında hem Sepete Ekle hem Şimdi Al olmalı mı?

Tek ana buton daha net. Aynı ağırlıktaki iki buton, alışverişçiye satın almaya karar vermeden önce bir satın alma yolu seçtiriyor.

Bir ürün sayfasında tab bar olmalı mı?

Bu ekranda hayır. Sayfanın tek işi var ve satın alma çubuğunun altındaki bir tab bar onunla yarışıyor.

Kaynaklar

• İki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. Ürün adı, marka, fiyatlar ve yorumlar uydurmadır.
• Ürün fotoğrafı Pexels üzerinden Ahimsa - OM'a ait.
• Apple Human Interface Guidelines: Typography, düzeltilmiş ekranda kullanılan iOS yazı boyutları için.
• Apple Human Interface Guidelines: Accessibility, 44 pt dokunma alanı boyutu için.
• Avrupa Komisyonu'nun 98/6/EC Direktifi Madde 6a'nın yorumlanmasına dair bildirimi, önceki fiyat kuralı için.
• İlk olarak App Brainy üzerinde bir carousel olarak yayımlandı.