Yemek Siparişi Uygulaması Tasarımı: Ana Ekran Yeniden Tasarımı, Önce ve Sonra

Bir yemek siparişi ana ekranının tek bir işi var: aç bir insanı birkaç saniyede bir restorana ulaştırmak. Aşağıdaki ilk taslak bu işte başarısız oluyor. Bunun nedeni tek bir parçanın çirkin olması değil, her parçanın aynı anda dikkat istemesi. Çözüm yeni özellikler ya da yeni bir stil değildi. Her parça tek bir şey söyleyene kadar bir şeyleri çıkarmaktı.

Tüm ekran, önce ve sonra

Junior taslak

Düzeltilmiş

Göz ilk restorana varmadan önce neleri işlemek zorunda, bir sayalım. Solda: tam bir sokak adresi, iki başlık ikonu, iki ikon daha içeren bir arama çubuğu, üç satır metin ve bir düğme içeren gradyan bir afiş, carousel noktaları, beş renkte beş halka, alev ikonlu bir bölüm başlığı ve tek bir fotoğraf üzerinde üç rozet. Sağda: bir yer adı, bir sepet, bir arama çubuğu, beş kutucuk, bir teklif ve bir kart.

Sağdaki ekranda, soldakinin sahip olduğu hiçbir özellik eksik değil. Adres, arama, kategoriler, teklif ve restoranlar hâlâ orada. Sadece her biri diğerleriyle yarışmayı bıraktı.

Düzeltme 1: Nereye olduğunu tek kelimeyle söyle

Önce

Sonra

Taslak, bir iğnenin yanında küçük puntoyla, kelimenin ortasında kesilmiş tam sokak adresini gösteriyor: 221B Baker Street. Düzeltme ise kişinin o adrese verdiği adı, "Ev"i, büyük yazıyor ve değiştirilebileceğini söyleyen bir ok işareti koyuyor.

Kimse kendi adresini okumak için bir teslimat uygulaması açmaz. Tek bir şeyi doğrulamaları gerekir: bu doğru yere mi gidiyor? Kendi seçtikleri bir etiket, Ev, İş, Annem, bunu bir sokak adından daha hızlı cevaplar ve tek kelime olduğu için her uzunlukta okunaklı kalır. Tam adres, onu düzenlediğin ekranda, bir dokunuş ötede durmalı.

Düzeltme ayrıca başlıktaki profil ikonunu da kaldırıyor. Taslakta iki kez vardı: bir kez üstte, bir kez de Hesap sekmesi olarak. Aynı odaya açılan iki kapı, insanlara bunların farklı odalara çıkıp çıkmadığını düşündürür.

Düzeltme 2: Tek şekil, tek seçili durum

Önce

Sonra

Önce, 5 kategorinin her biri kendi renkli halkasına sahip bir daire içinde duruyor: sarı, yeşil, mavi, pembe, mor. Sonra, kutucuklar tek bir şekli ve tek bir nötr çerçeveyi paylaşıyor; yalnızca seçili olan, Pizza, kenarlığında ve etiketinde marka kırmızısını alıyor.

Bir arayüzde renk bir sinyaldir ve beş renk beş sinyal gönderir. Sırayı tarayan okuyucu, yeşilin ne anlama geldiğini ve suşinin neden mavi olduğunu sormak zorunda kalır. Cevap hiçbir şey, ki sorun da bu: bilgi gibi görünen dekorasyon.

Renk yalnızca tek bir şey için harcandığında bir anlam taşır. Tek bir kırmızı kutucuk, tek kelime etmeden "buradasın" der. Gerisini fotoğraflar halleder, çünkü yemek fotoğrafları zaten ekrandaki en renkli şeydir ve yardıma ihtiyaçları yoktur.

Düzeltme 3: Tek teklif, tek mesaj

Önce

Sonra

Taslak afiş, "MEGA İNDİRİM!", teklifi, kodu, minimum siparişi ve küçücük puntoyla "Şartlar geçerlidir" ifadesini üst üste yığıp ardından bir düğme koyuyor. Düzeltme %50 İNDİRİM'i koruyor ve üç şey söylüyor: ne zaman (Sadece bugün), kimin için (20$ üzeri ilk siparişin) ve kopyalayabileceğin bir düğme olarak kod.

Sorun hiçbir zaman teklif değildi. %50 indirim sipariş vermek için iyi bir sebep ve düzeltme onu aynı boyutta tutuyor.

Değişen, onun etrafındaki her şey. "MEGA İNDİRİM!" ve "%50 İNDİRİM" aynı şeyi iki kez söylüyordu. Küçük yazı dört bilgiyi 9 px ile, çubuklarla ayırarak tek satıra sıkıştırıyordu. "Şimdi sipariş ver" düğmesinin gidecek bir yeri yoktu, çünkü henüz sipariş verilecek tek bir restoran yok.

Artık eylem kodun kendisi. Dokunmak YUMMY50'yi kopyalıyor; bir kişinin bu afişten ödeme ekranına taşıması gereken tek şey bu. Şartlar da geçerli oldukları yere, ödeme ekranına taşındı.

Görsel de değişti. Taslak, burgeri turuncu bir gradyanın üzerinde yüzen bir daire olarak kesiyor. Düzeltme onu marka kırmızısı üzerinde fotoğraflıyor; böylece yemek, kartın üstüne yapıştırılmış bir etiketin içinde değil, kartın kendisinin üzerinde duruyor.

Düzeltme 4: Tek rozet, iki bilgi

Önce

Sonra

Önce, fotoğraf üç rozet taşıyor (Ücretsiz teslimat, %20 İNDİRİM, Sponsorlu) ve alttaki metin mutfakları, teslimat süresini, ücreti, fiyat seviyesini, minimum siparişi ve açılış saatlerini sıralıyor. Sonra, tek bir rozet, ad, puan ve iki bilgi: ne kadar sürer ve ne kadar tutar.

Bir listedeki restoran kartı yaklaşık bir saniyede okunur ve o saniyede kişi iki şeye karar verir: bu yemeği istiyor muyum, beklemeye ve ücrete değer mi. Düzeltilmiş kart tam olarak bunları cevaplıyor. Fotoğraf birincisini cevaplıyor. "25 ile 35 dk, 2,99$ teslimat" ikincisini.

Eski kartta kalan her şey gerçek bilgi, ama ilk bakış bilgisi değil. Mutfak listesi zaten fotoğrafta görünüyor. 15$ minimum sipariş ve gece 11 kapanış saati ancak seçim yaptıktan sonra önem kazanıyor, o yüzden restoranın kendi sayfasına ait.

"Sponsorlu" işletme içindir, müşteri için değil ve yan yana üç rozet birbirini yok eder. Öncelik sırasına göre seçilen tek bir rozet okunur.

Beş küçük düzeltme

Yukarıdaki dört parça büyük olanlar. Bu beş değişiklik de en az onlar kadar bilinçli:

• Tek bir kenar boşluğu. Taslak solda 12 px, sağda 16 px kullanıyordu, bu yüzden hiçbir şey hiçbir şeyle hizalanmıyordu. Düzeltme iki yanda 20 px kullanıyor ve ekrandaki her kenar bu çizgide duruyor.
• Bir tipografi sistemi. Taslakta 9 ile 30 px arasında, aralarında hiç basamak olmayan metinler vardı. Düzeltme 11 ile 22 pt arasındaki iOS metin stillerini kullanıyor; böylece her boyutun bir rolü var ve hiçbiri okunamayacak kadar küçük değil.
• Daha sessiz bir arama çubuğu. Taslağın aramasının içinde bir mikrofon ve bir filtre ikonu vardı, ayrıca kesilecek kadar uzun bir yer tutucu metin. Düzeltme tek ikon ve daha kısa bir ipucu tutuyor: "Yemekler, restoranlar veya mutfaklar".
• Carousel noktası yok. Bir afişin altındaki noktalar daha fazla afiş vaat eder. Çoğu insan onları hiç kaydırmaz ve noktalar bakılacak bir şey daha ekler. Tek bir teklifin noktaya ihtiyacı yok.
• Beş değil dört sekme. Favoriler sekme çubuğundan çıktı. Kaydetme hâlâ her kartın kalbinde gerçekleşiyor ve dört sekme her birine daha fazla alan ve daha kolay bir hedef veriyor.

Kendi ana ekranını denetle

Uygulamanın ana ekranını bu kontrol listesinin yanına tut. Her "hayır", bağıran bir parça demek.

Figma dosyasını al

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

Ücretsiz Figma dosyası

Yemek siparişi ana ekranı, önce ve sonra

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

Figma'da aç

SSS

Bir yemek siparişi uygulamasının ana ekranı önce ne göstermeli?

Siparişin nereye gittiğini, bir arama çubuğunu, kategorileri ve tek bir teklifi, sonra restoranları. Her restoran kartında bir fotoğraf, ad, puan, teslimat süresi ve teslimat ücreti olmalı.

Bir restoran kartında kaç rozet olmalı?

Bir. Yan yana üç rozet birbirini yok eder; müşteri için en önemli olanı seç, mesela ücretsiz teslimat.

Bir yemek uygulaması her kategori için farklı bir renk kullanmalı mı?

Hayır. Her kategoriye aynı şekli ve nötr bir çerçeve ver, marka rengini yalnızca seçili olana harca; böylece renk "buradasın" anlamına gelir.

Dönüşüm sağlayan bir promosyon afişi nasıl tasarlanır?

Tek teklifi bir kez söyle: indirim, kimin için olduğu ve kod. Eylemi kod yap, kopyalamak için dokunulabilir olsun ve şartları ödeme ekranına taşı.

Bir yemek siparişi uygulamasında kaç sekme olmalı?

En fazla dört ya da beş. Burada dört sekme (Ana Sayfa, Arama, Siparişler, Hesap) her birine daha fazla alan verdi ve kaydetme her karttaki kalple halledildi.

Kaynaklar

• İki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. Tablodaki ölçümler Figma dosyalarından alındı.
• Yemek fotoğrafları Unsplash üzerinden Fernando Andrade, sina piryae, Mahmoud Fawzy, Anna Pelzer, Alana Harris, Thimotius Timmy ve Poul Hoang'a ait. Promosyon burgeri Pexels'ta Elements Interactive'e ait; stüdyo arka planı yapay zekâ kullanılmadan, renkle marka kırmızısıyla değiştirildi.
• iOS metin boyutları Apple'ın Human Interface Guidelines, Typography belgesinden.
• İlk olarak App Brainy üzerinde carousel olarak yayınlandı.