Tarif Uygulaması Tasarımı: Ana Ekran Yeniden Tasarımı, Önce ve Sonra

Bir tarif uygulaması, bir ekranın sahip olabileceği en iyi varlıkla başlar: güzel görünen yemek. Aşağıdaki ilk taslakta gerçek tarifler ve iyi fotoğraflar var, sonra hepsi dört şeyi sayan bir arama kutusu, gökkuşağı gibi kategoriler, ana fotoğrafta küçük büyük harfler ve her satırda üç ikonla boğuluyor. Düzeltme tüm içeriği koruyor ve yemeğe nefes alacak yer veriyor.

Ekranın tamamı, önce ve sonra

Junior taslak

Düzeltilmiş

Sol ekranın sunacağı çok şey var ve hepsini bir anda söylüyor. Sağda aynı tarifler, bir aşçının aradığı sırayla geliyor: bul, filtrele, seç, sonra gez.

Akşam yemeğini seçmeden önce bir kişinin ne okuması gerektiğini sayın. Taslakta: alt satırlı bir karşılama, bir arama kutusu, bir filtre düğmesi, bir zil, altı renkte kategori çipleri, fotoğraf üzerinde bir başlık, büyük harflerle beş bilgilik bir satır, fotoğraf üzerinde iki düğme ve ardından dört satırın her birinde üç ikon. Düzeltilmiş ekran her adımda daha azını istiyor ve rakamlar bunu gösteriyor.

Düzeltme 1: arama ne bulduğunu söylesin

Önce

Sonra

Dört şeyi sayıp yer yetmeyen bir placeholder'a karşı iki şey ve bir filtre.

Taslağın placeholder'ı "Tarif, malzeme, mutfak, ch..." ve dördüncü kelimenin ortasında kesiliyor. Placeholder, bir arama kutusunun söyleyebildiği tek cümledir; bu yüzden kutunun ne yaptığını söylemeli ve sığmalı. Taslaktaki liste sığmıyor ve yarım kalan ipucu hata gibi okunuyor.

Düzeltme, insanların gerçekten yazdığı iki şeyi adlandırıyor: tarifler veya malzemeler. Mutfak ya da diyet gibi geri kalan her şey, yanındaki filtre düğmesinin işi.

Filtre düğmesi de dolu kiremit renkli kareden beyaza döndü. Dolu bir düğme satırdaki en gürültülü şeydir ve o, arama değil filtreydi. Zil bu satırdan çıkıp karşılamanın yanına taşındı; böylece satır bir arama ve bir düğmeden ibaret.

Düzeltme 2: her kategori için tek stil

Önce

Sonra

Beş renkte ve her biri ikonlu beş kategoriye karşı tek stil ve tek dolu çip.

Her kategorinin kendi rengi olunca renkler hiçbir şey ifade etmez. Kahvaltı şeftali, öğle yeşil, akşam mor. Bunların hiçbiri bir aşçıya hangisinin açık olduğunu söylemiyor ve taslakta seçili durum hiç yok.

Düzeltmede her çip beyaz ve sade, seçili olan "Tümü" ise marka kiremit rengiyle dolu. Renk artık tek bir bilgiyi taşıyor: neyin açık olduğunu.

Çipler ayrıca daha büyük, yani dokunması daha kolay ve sıra, kaydığı sağ kenarda soluyor. Taslakta sıra ekran kenarında öylece kesiliyor ve "Vegan" ikiye bölünüyor. Solma "daha fazlası var, kaydır" der. Sert kesik hiçbir şey söylemez.

Düzeltme 3: bilgiler fotoğrafın altına

Önce

Sonra

Açık renk bir tabak üzerinde büyük harflerle bir başlık ve beş bilgiye karşı altındaki kartta bir başlık ve ikonlu üç bilgi.

Taslak, açık renkli bir tabak ve açık renkli bir masa üzerine 15 px'lik bir başlık ve 9 px'lik beyaz büyük harflerden bir satır koyuyor. Fotoğrafın bütün amacı tabak ve metin, onun üzerinde, ona karşı kaybolan tek renkte duruyor. Satır, bir aşçının karar vermesi için gereken bilgileri taşıyor: süre, zorluk ve porsiyon. Fotoğrafın en zor okunan kısmı da onlar.

Düzeltme metni fotoğrafın altındaki bir karta, koyu renk yazıyla taşıyor. Bu akşam pişirip pişirmemeye karar veren üç bilgi yerini koruyor ve her birinin ikonu var: 30 dk için saat, Kolay için çubuk grafik, 4 porsiyon için iki kişi. Kişi ikonları bir kez öğrenir, sonra satırı bir bakışta okur. Düzeltilmiş kart kalori ve puanı çıkarıyor; onlar tarif sayfasında durabilir.

Fotoğraftaki düğmeler, kalp ve paylaşımdan oluşan ikiden tek bir kaydete indi. Bir aşçının tarif kartından istediği eylem bu, çünkü bir tarifin sonradan pişirilmesinin yolu kaydetmekten geçer.

Düzeltme 4: bir satır, bir tarif, bir süre ve bir seviyedir

Önce

Sonra

Bir şef imzası ve her biri üç ikonlu dört satıra karşı süre, seviye ve iki sessiz ikonlu üç satır.

Taslağın her satırında bir küçük resim, bir isim, süre, zorluk ve "Şef Anna'dan" yazan bir satır ve üç ikon var: kalp, yer imi ve paylaş. Kalp ve yer imi "bunu beğendim" demenin iki yolu ve dört satırlık bir liste bu seçimi on iki kez basıyor.

Düzeltmede her satırda daha büyük bir fotoğraf, isim ve süre ile zorluktan oluşan tek bir satır var. Sağda iki ikon var, paylaş ve kaydet, siz isteyene kadar yoldan çekilen açık gri tonda. İlk tarif kaydedilmiş durumun nasıl göründüğünü gösteriyor: yer imi, seçili kategoriyle aynı renk olan marka kiremit rengiyle doluyor. "Popüler Tarifler" başlığı "Popüler"e kısalıyor, çünkü uygulama zaten tarifler hakkında.

Düzeltilmiş liste dört yerine üç tarif gösteriyor; böylece kartın sekme çubuğunun üstünde nefes alacak yeri var.

Daha küçük düzeltmeler

• Beş değil dört sekme. Ana Sayfa, Ara, Kaydedilenler ve Profil; Ana Sayfa, Ara, Kaydedilenler, Planlayıcı ve Profil'in yerini alıyor.
• Tek bir boşluk. Taslak solda 14 px, sağda 12 px kullanıyordu. Düzeltme iki yanda 20 px ve bloklar arasında 14 px kullanıyor.
• Daha kısa bir karşılama. "Selam Maya! Bugün ne pişirmek istersin?" ifadesi "Mutfakta ne var, Maya?" oldu.
• Tek marka rengi. Kiremit rengi, #C8553D, seçili çipi, kaydedilmiş yer imini, aktif sekmeyi ve küçük etiketleri işaretliyor. Başka hiçbir şey renkli değil.
• Gerçek bir yazı ölçeği. Metin, 8 ile 18 px'ten 11 ile 22 pt'lik iOS boyutlarına geçti.

Kendi tarif uygulamanızı denetleyin

Figma dosyasını alın

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

Ücretsiz Figma dosyası

Tarif uygulaması ana ekranı, önce ve sonra

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

Figma'da aç

SSS

Bir tarif uygulaması ana ekranı ne göstermeli?

Ne bulduğunu söyleyen bir arama kutusu, bir kategori sırası, süresi, zorluğu ve porsiyonuyla öne çıkan bir tarif ve popüler tariflerin kısa bir listesi. Kalori, puan ve şef imzası tarif sayfasında yer alabilir.

Bir tarif arama çubuğu ne demeli?

Kutunun ne bulduğunu, sığacak kadar az kelimeyle söyleyin: "Tarif veya malzeme ara". Bulabileceği her şeyin uzun listesi kesilir ve fazlalıklar bir filtreye aittir.

Bir tarif uygulamasında kategori çipleri nasıl görünmeli?

Hepsi için tek stil, seçili çip marka renginde dolu. Sıranın kaymasına ve kenarda solmasına izin verin ki insanlar daha fazlası olduğunu görsün.

Bir tarifin süresi ve zorluğu nereye konmalı?

Fotoğrafın altına, her biri küçük bir ikonla tek satırda: süre için saat, zorluk için seviye, porsiyon için insanlar. Yemek fotoğrafı üzerindeki metin okunması zordur ve yemeği gizler.

Bir tarif listesi satırında kaç ikon olmalı?

İki veya daha az. Kaydet ve paylaş yeterli, sessiz bir gri de onların yemekle yarışmasını engeller.

Kaynaklar

• İki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. Kullanıcı, şefler ve tarif listesi alıştırma için uyduruldu.
• Fotoğraflar Pexels üzerinden: Tamra Creatives Agency, Willians Huerta, Kei Scampa, Ana Palade, adrian vieriu ve Surendra Shrestha.
• Apple Human Interface Guidelines: Typography, düzeltilmiş ekranda kullanılan iOS metin boyutları için.
• W3C: Web Content Accessibility Guidelines 2.2, Contrast (Minimum), görseller ve arka planlar üzerindeki metin için.
• İlk olarak App Brainy üzerinde bir carousel olarak yayımlandı.