Bitki Mağazası Uygulaması Tasarımı: E-ticaret Ana Ekranı Yeniden Tasarımı

Bir bitki mağazasında kolay kısım zaten halledilmiş: ürünler fotoğrafta güzel duruyor. Aşağıdaki ilk taslakta gerçek bitkiler ve gerçek fotoğraflar var, ama hepsi kalabalık bir başlığın, üç açılır filtrenin, uzun bir bakım ipucu bloğunun ve her kartın altındaki yedi öğenin altına gömülmüş. Düzeltme her özelliği koruyor ve bitkilere nefes alacak yer açıyor.

Tüm ekran, önce ve sonra

Junior taslak

Düzeltilmiş

Soldaki ekranda bir alışverişçi, tek bir bitki tam görünene kadar bir başlığı, bir filtre çubuğunu, üç cümlelik tavsiyeyi ve bir yığın ürün detayını okumak zorunda. Sağda ise üç kısa bloğun hemen ardından ilk bitkiler beliriyor, her kart fiyatıyla bütün bir bitki ve yeşil tek bir iş için kullanılıyor: dokunulabilen şeyler.

İndirim iki ekranda da duruyor. Pilea 24,99 $, üstü çizili 31,00 $; salon palmiyesi 28,00 $, üstü çizili 35,00 $. Mağaza, fiyatlar ve yorumlar alıştırma için uydurulmuştur; bitkiler gerçek.

Düzeltme 1: logo, arama ve sepet, başka hiçbir şey

Önce

Sonra

Bir menü, logo ve üç küçük ikon; karşısında aynı logo ve iki büyük yuvarlak düğme.

Taslak başlıkta bir menü, logo, arama, bir kalp ve bir sepet var. Kalp bir istek listesi, düzeltilmiş ekran istek listesine Kaydedilenler adında bir sekme veriyor, yani kalbin artık başlıkta yaşamasına gerek yok. Sepet yerini koruyor, çünkü bir mağazada üstte bulunmasını beklediğiniz tek kontrol o ve rozeti içinde kaç ürün olduğunu gösteriyor.

Kalan ikonlar daha büyük: dört küçük ikon yerine iki adet 44 px düğme. Telefon tek elle tutulur ve büyük bir hedefe basmak daha kolaydır. Logo iki ekranda da aynı yazı işareti, mesele de bu: başlık markayı yeniden şekillendirerek değil, bir şeyleri çıkararak düzeltildi.

Rozet kırmızıdan marka yeşiline döndü. Kırmızı nokta bir şeyin yanlış ya da acil olduğunu söyler. Ürün sayısı ikisi de değil.

Düzeltme 2: açılır menü değil, görebileceğiniz filtreler

Önce

Sonra

Kapalı açılır menüler olarak Kategori, Fiyat ve Boyut ile bir Sırala bağlantısı; karşısında çip olarak İç mekan, Dış mekan, Sukulentler ve Evcil hayvan dostu, İç mekan seçili.

Açılır menü seçeneklerini saklar. Kullanmak için alışverişçi ona dokunur, bir liste okur, seçer ve liste yine kapanır. Üç açılır menü, ekrandaki tek bir bitki bile değişmeden önce üç böyle gidiş geliş demek. Üstelik içinde ne olduğunu değil, nasıl bir filtre olduğunu söylüyorlar.

Çipler seçenekleri ortada gösterir. İç mekan, dış mekan, sukulentler ve evcil hayvan dostu, bir bitki alıcısının gerçekten sorduğu sorular; yani tek dokunuş birini cevaplar ve yeşil seçili çip mevcut durumu gösterir. Dört çip 350 px'lik satıra 6 px boşlukla sığıyor, böylece hiçbiri kesilmiyor ve hiçbiri kaydırma gerektirmiyor.

Düzeltme 3: bütün bir bitki olan kart

Önce

Sonra

Bir fotoğraf, bir rozet, bir kalp, iki isim, bir fiyat, yıldızlar, bir yorum sayısı ve tam genişlikte bir düğme; karşısında bir fotoğraf, kısa bir isim, bir fiyat ve tek bir yuvarlak düğme.

Taslak kart fotoğrafın altına yedi şey yığıyor: bitkinin Latince adı, yaygın adı, fiyat, eski fiyat, yıldızlar, yorum sayısı ve tam genişlikte bir Sepete Ekle düğmesi. Fotoğrafın üzerinde ise bir indirim rozeti ve bir kalp duruyor. Bunların hepsi ekranın yarısı genişliğindeki bir kartın içinde.

Düzeltme iki satır ve bir düğme bırakıyor. İsim kısa ("Pilea", "Calathea") ve fiyat onun altında, indirim varsa eski fiyat üstü çizili. Geniş Sepete Ekle çubuğunun yerini yuvarlak bir artı düğmesi alıyor, çünkü ürün kartındaki artı, alışverişçilerin zaten bildiği bir kalıp.

Fotoğraflar da değişti. Taslağın kırpmaları bitkileri kesiyor ve saksılar hizalanmıyor. Düzeltme her fotoğrafı, bütün bitki kare yüksekliğinin yaklaşık %70'ini ortalanmış olarak kaplayacak ve her saksı aynı çizgide olacak şekilde kırpıyor. Böylece bir kart sırası dört farklı resim gibi değil, bir sıra gibi okunuyor.

Düzeltme 4: üç bilgi olarak bakım ipuçları

Önce

Sonra

Yeşil bir kutuda üç cümlelik tavsiye; karşısında her biri bir etiket ve tek kelimeyle üç ikon.

Taslak doğru şeyleri söylüyor, ama alışverişçinin onları bulmak için üç cümle okuması gerekiyor. Üç bilgi su, ışık ve bitkinin evcil hayvanlar için güvenli olup olmaması ve her biri tek kelimeyle söylenebilir: haftalık, dolaylı, güvenli.

Düzeltme her bilgiye bir ikon, küçük bir etiket ve kalın yazılmış o kelimeyi veriyor. Kartın tamamı bir bakışta okunuyor. "Bunu kedimin yanına koyabilir miyim?" diye tarayan bir bitki alıcısı, okumadan "Evcil hayvanlar: Güvenli" yazısını buluyor.

Daha küçük düzeltmeler

• Beş değil dört sekme. Ana Sayfa, Mağaza, Kaydedilenler ve Profil. İstek listesi Kaydedilenler oldu, sepet de sekme çubuğundan başlığa taşındı.
• Tek bir kenar boşluğu. Taslak solda 14 px, sağda 12 px kullanmıştı. Düzeltme iki yanda 20 px ve bloklar arasında 12 ile 14 px kullanıyor.
• Fotoğraflarda rozet yok. Kırmızı -%20 ve mavi YENİ rozetleri ile her fotoğraftaki kalp gitti. İndirim hâlâ görünüyor, çünkü üstü çizili fiyat duruyor.
• Tek vurgu rengi. Taslağın yeşiline kırmızı ve mavi rozetler eşlik ediyordu. Düzeltme dokunulabilen her şey için tek bir marka yeşili, #1F7A4D, kullanıyor.
• Gerçek bir tipografi ölçeği. Metin 8 ile 20 px'ten 11 ile 20 pt'lik iOS boyutlarına geçti.
• Daha kısa bir bölüm başlığı. "Popüler Bitkiler", "Popüler" oldu, çünkü ekran zaten bitkiler hakkında.

Kendi mağaza uygulamanızı denetleyin

Figma dosyasını alın

Ücretsiz dosyada iki ekran bileşen olarak, her düzeltme önce ve sonra çifti olarak, renk değişkenleri ve iOS metin stilleri bulunuyor.

Ücretsiz Figma dosyası

Bitki mağazası ana ekranı, önce ve sonra

İki ekran ve düzeltilen her parça Figma bileşeni olarak. Ücretsiz, salt görüntüleme, taslaklarınıza çoğaltın.

Figma'da aç

SSS

Bir e-ticaret uygulaması ana ekranı önce ne göstermeli?

Logo, arama ve sepetin olduğu kısa bir başlık, ardından çip olarak filtreler ve ilk ürünler. Ürün olmayan her şeyi, örneğin ipuçlarını veya bannerları, küçük tutun.

Bir alışveriş uygulamasında filtreler açılır menü mü olmalı, çip mi?

İnsanların en çok kullandığı birkaç filtre için çip. Çipler seçenekleri dokunmadan gösterir ve seçili olan mevcut durumu belli eder. Fiyat ve boyut gibi uzun listeler için açılır menü ya da filtre sayfası kullanın.

Bir alışveriş uygulamasındaki ürün kartı ne göstermeli?

Bütün ürünün fotoğrafı, bir isim, bir fiyat ve tek bir ekle düğmesi. Puanlar ve uzun isim gibi detaylar ürün sayfasında durabilir.

Bir uygulamada bakım talimatları nasıl gösterilir?

İkonlu birkaç kısa bilgi olarak, her biri tek kelimeyle, örneğin Su: Haftalık. Uzun cümleler bir dokunuş daha derinde yaşayabilir.

Bir alışveriş uygulamasında kaç sekme olmalı?

Dört ya da beş. Kopyaları insanların zaten baktığı yerlere katlayın, örneğin sepeti başlığa ve istek listesini Kaydedilenler sekmesine.

Kaynaklar

• İki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. Mağaza, fiyatlar ve yorumlar uydurulmuştur; bitki isimleri gerçek.
• Fotoğraflar Pexels üzerinden Kulbir, Gül Işık ve Kaboompics'e ait.
• Apple Human Interface Guidelines: Typography, düzeltilmiş ekranda kullanılan iOS metin boyutları için.
• İlk olarak App Brainy üzerinde bir karusel olarak yayımlandı.