Kahve Uygulaması Tasarımı: Sipariş Ana Ekranı Yeniden Tasarımı, Öncesi ve Sonrası

Biri kahve uygulamasını tek bir iş için açar: bir içecek sipariş etmek ve gidip almak. Aşağıdaki ilk taslakta doğru şeyler var, ama hepsini aynı anda söylüyor: uzun bir mağaza satırı, puanlar hakkında bağıran bir banner, sekiz sekme ve her fotoğrafın altında bir EKLE düğmesi. Düzeltme mağazayı, puanları ve menüyü koruyor, ama her birine tek ve sakin bir yer veriyor.

Tüm ekran, öncesi ve sonrası

Junior taslak

Düzeltilmiş

Solda kişi bir karşılama, bir mağaza satırı, bir puan bannerı, bir sekme şeridi ve bir düğme ızgarasıyla karşılaşıyor, hepsi aynı ses seviyesinde. Sağda blok başına okunacak tek şey ve satır başına tek eylem var.

Düzeltme 1: nerede olduğunu bir kez söyle

Önce

Sonra

Kutuya sıkıştırılmış bir mağaza satırı ve bir teslim alma kartı.

Taslak mağazayı tek satıra sıkıştırıyor: "Downtown Store - 123 Main St (0.3 mi) - Open until 9PM", sonunda ok işareti olan çerçeveli kutuda küçük puntolu 54 karakter. Ad, sokak, mesafe ve saatler aynı ağırlıkta, bu yüzden göz ihtiyacı olan tek bilgiyi bulmak için tüm satırı okuyor.

Düzeltme satırı bir teslim alma kartına çeviriyor. "Pickup at Downtown" başlık, "0.3 mi · Open until 9 pm" altında tek gri satır ve "Change" sağda marka mavisiyle gerçek bir eylem olarak duruyor. Sokak adresi ana ekranda yok. Karşılama büyük bir "Good morning, Leo" oldu ve ünlemler gitti.

Tekrar kullanılacak kural: uzun satırı bir başlığa, bir ayrıntıya ve bir eyleme böl. Ok işaretli bir kutu "bana dokun" demeyi, "Change" diyen bir kelimeden daha belirsiz yapar.

Düzeltme 2: ilerleme olarak puanlar

Önce

Sonra

Bağıran bir banner ve bir ilerleme çubuğu.

Taslağın bannerı maviden tereyağı sarısına geçiyor ve beyaz yazısı okunması en zor olan sarı uçta duruyor. "You have 1,250 points! Redeem now for FREE drinks!!!" diyor ve altındaki Redeem Now hapı soluk sarı yazılı beyaz. Puanları olduğunu söylüyor ama bir şeye ne kadar yaklaştığını söylemiyor.

Düzeltme tek bir koyu mavi kart. Üstte "Rewards" ve "1,250 points" duruyor, büyük satır ise "250 points to a free drink". Altındaki tereyağı rengi ilerleme çubuğu %83 doluyor, yani 1.500'ün 1.250'si, ve küçük satır bedava içeceğin nerede olduğunu söylüyor. Kişi mesafeyi görüyor, ilginç olan sayı bu.

Tekrar kullanılacak kural: puan bakiyesi bir sayıdır, ilerleme ise bir hikayedir. Hikayeyi göster, sayı kenarda dursun.

Düzeltme 3: dört çip, biri seçili

Önce

Sonra

Kenardan taşan sekiz sekme ve dört çip.

Taslakta sekiz kategori var: Coffee, Tea, Cold Drinks, Seasonal, Bakery, Breakfast, Merch ve Gift Cards. Sağ kenardan taşıyorlar, yani "Merch" "Mer" olarak kesiliyor ve kişi daha fazlası olduğunu öğrenmek için yana kaydırmak zorunda. Seçili olan ince bir alt çizgiyle işaretli.

Düzeltme dört çip gösteriyor: All, Coffee, Cold drinks ve Bakery. All kafe mavisiyle dolu, diğerleri beyaz, böylece seçili olan bir bakışta belli. Diğer kategoriler bu ekranda yok; gerçek bir uygulama onları Menü sekmesinde, bir dokunuş ötede tutardı.

Tekrar kullanılacak kural: bir filtre sırası ekrana sığmalı. Kendi listesini göstermek için yana kaydırma gerekiyorsa, daha azını göster.

Düzeltme 4: ürün başına bir satır

Önce

Sonra

Her birinin altında tereyağı rengi düğme olan kart ızgarası ve üç satır.

Taslak ürünleri kart ızgarası olarak gösteriyor: büyük fotoğraf, ad, fiyat ve büyük harflerle tereyağı rengi "ADD +" düğmesi. Sekmelerin altında iki buçuk sıra kart ekranı dolduruyor, düğmelerdeki tereyağı rengi her fotoğrafın altında tekrar ediyor ve "View Menu" bağlantısı beyaz üstünde soluk sarı.

Düzeltme her ürünü 60 px fotoğraf, ad, tek gri satır ve fiyat içeren bir satır yapıyor, sağda tek bir yuvarlak mavi "+" var. Izgara iki buçuk kart gösterirken bir kartın içine üç satır sığıyor ve her satırdaki tek düğme ekle düğmesi. "Full menu" marka mavisiyle.

Tekrar kullanılacak kural: her ürünün eylemi aynıysa, eylem küçük ve hizalı olmalı, böylece göz adları ve fiyatları tek bir kenar boyunca okur.

Daha küçük düzeltmeler

• Tek sol kenar. Taslağın boşlukları solda 14 px, sağda 12 px idi. Düzeltme iki yanda 20 px ve bloklar arasında 16 px kullanıyor.
• Gerçek bir yazı ölçeği. Metin 9 ile 18 px yerine 11 ile 28 pt iOS boyutlarına geçti.
• Beş değil dört sekme. Home, Menu, Order, Rewards ve Account, Home, Menu, Rewards ve Account oldu. Order sekmesi çubuktan çıktı.
• Dört renkli palet. Kafe kobalt #2342A8, koyu mavi #15276B, tereyağı #F3C77A ve krem #F5EFE4, bir gradyanın ve gri zeminin yerini alıyor.

Kendi sipariş ekranını denetle

SSS

Kahve sipariş uygulamasının ana ekranı önce ne göstermeli?

Değiştir bağlantılı tek kartta teslim alma mağazasını, sonra ödül ilerlemesini, sonra kategorileri ve popüler ürünleri. Kişi neyi sipariş ettiğinden önce nereden sipariş verdiğini görmeli.

Sadakat puanı bölümü nasıl tasarlanır?

Sonraki ödüle olan mesafeyi bir ilerleme çubuğu ve "250 points to a free drink" gibi sade bir satırla göster, bakiyeyi kenara koy.

Bir menüde kaç kategori sekmesi olmalı?

Ekrana yana kaydırmadan sığabildiği kadar, genellikle dört. Gerisini Menü sekmesine koy, bir dokunuş ötede.

Menü ızgara mı liste mi olmalı?

Sipariş için satır listesi daha iyi çalışır, çünkü adlar ve fiyatlar tek kenarda hizalanır ve her satırın tek küçük ekle düğmesi yeter. Izgara fotoğraflara göz atmaya uygundur.

Ekle düğmesi ne kadar büyük olmalı?

Görünen daire daha küçük olsa bile dokunmak için en az 44 x 44 punto. Düzeltilmiş ekran satır başına bir yuvarlak mavi düğme kullanıyor.

Kaynaklar

• İki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. Mağaza, adresi, fiyatlar ve puanlar uydurma.
• Menü fotoğrafları Pexels üzerinden Duc Nguyen, Melissa Jansen van Rensburg, Marcelo Verfe, Juan Pablo Serrano, Skyler Ewing ve Vinícius Vieira ft.
• Apple Human Interface Guidelines: Typography, düzeltilmiş ekranda kullanılan iOS yazı boyutları için.
• Apple Human Interface Guidelines: Accessibility, 44 pt dokunma hedefi boyutu için.
• Kivetz, Urminsky ve Zheng, The Goal-Gradient Hypothesis Resurrected, Journal of Marketing Research, 2006, sadakat kartı doldukça müşterilerin daha sık satın alması için.
• İlk olarak App Brainy üzerinde bir carousel olarak yayımlandı.