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

Bir emlak ana ekranının tek bir işi vardır: kişiyi "bakıyorum" noktasından açmak istediği bir ilana ulaştırmak. Aşağıdaki ilk taslak hiçbir şeyi bozmuyor. Her özellik çalışıyor. Sadece okurdan her şeyi aynı anda kavramasını istiyor: bir arama alanı, beş yuvarlak kategori, dört farklı düğme, bir banner ve dokuz küçük ayrıntılı bir kart.

Düzeltme her özelliği korur, ama sırayı, boyutu ve stil sayısını değiştirir.

Ekranın tamamı, önce ve sonra

Junior taslağı

Düzeltilmiş

Solda göz bir arama alanıyla, beş kategori dairesiyle, üç farklı stilde dört kontrolle, tam genişlikte mavi bir bannerla, bir yıldızla, bir okla, her fotoğrafın üstünde iki üst üste düğmeyle ve ilan ayrıntılarının üstünde duran yüzen bir Harita düğmesiyle karşılaşır. Hiçbiri tek başına yanlış değil. Birlikte ise okunacak bir ilk şey yok.

Sağda ekran yukarıdan aşağıya okunur: sen kimsin, ne arıyorsun, kiralık mı satılık mı, ne tür bir ev, sonra tek büyük bir ilan. Banner hâlâ orada, ama aşağıda, daha küçük, aramayla yarışamayacağı yerde bekliyor.

Düzeltme 1: tek arama satırı, tek Kiralık veya Satılık kontrolü

Önce

Sonra

Mikrofonlu çerçeveli bir arama alanı, beş yuvarlak kategori ikonu, ardından dolgulu bir Kiralık düğmesi, düz bir Satılık kelimesi, çerçeveli bir Sırala düğmesi ve bir Filtre bağlantısı. Karşısında tek mavi filtre düğmeli gri bir arama alanı ve tek segmentli kontrolün iki yarısı olarak Kiralık ve Satılık.

Taslak tek satıra dört kontrol koyuyor ve her birine farklı bir görünüm veriyor: Kiralık dolgulu bir düğme, Satılık çıplak metin, Sırala çerçeveli, Filtre ise ikonlu düz bir bağlantı. Okur bunların hangisinin düğme, hangisinin sekme, hangisinin anahtar olduğunu hiçbirini kullanmadan önce çözmek zorunda.

Düzeltme her işe tek bir biçim verir. Arama ve filtre aynı satırda durur, çünkü filtreleme aramanın parçasıdır. Kiralık ya da Satılık tam olarak iki şey arasında bir seçimdir ve segmentli kontrol tam bunun için vardır: iki seçenek de görünür kalır, seçili olan net biçimde yanar. Sırala yoldan çekilir, çünkü ancak sonuçlar olunca önem kazanır.

Tekrar kullanılacak kural: iki kontrol aynı türden bir iş yapıyorsa aynı görünmeli. Farklı işler yapıyorlarsa görünmemeli.

Düzeltme 2: seçileni gösteren kategoriler

Önce

Sonra

Her birinin altında küçük bir etiket olan beş ince çerçeveli daire, burada yalnızca mavi etiket Apartman'ın seçili olduğunu söylüyor. Karşısında ikon ve kelimenin tek satırda durduğu dolgulu çipler, burada Apartmanlar düz mavi ve sonraki çipler kenardan taşıyor.

Taslakta neyin seçili olduğunun tek işareti, bir dairenin altındaki küçük metinli mavi bir etiket. Daireler birbirinin aynısı görünüyor, bu yüzden göz aktif olanı bulmak için etiketleri tek tek okumak zorunda.

Düz dolgulu bir çip, soru sorulmadan cevabı verir. Seçili durum, metindeki küçük bir fark değil, farklı bir renk ve ağırlıktır. Çipler ayrıca yüksekliklerinden geniştir, böylece ikon ve kelime tek satırda durur ve tüm satır daha az yer kaplar. Sağ kenarda kesilen çip, satırın kaydırılabildiğini gösterir, ok gerekmez.

Düzeltme 3: sırayla okunan bir ilan kartı

Önce

Sonra

Bir yıldız ve okla Öne Çıkan İlanlar, "1 Year Old" rozetli ve artı ile kalp düğmeli bir fotoğraf, mavi aylık 2.400 $, Satılık ve Kiralık hapları, bir adres ve yüzen Harita düğmesinin kestiği yatak odası ve banyo ayrıntıları. Karşısında tek kalpli büyük yuvarlatılmış bir fotoğraf, ardından aylık 2.400 $, 2 yatak odalı daire, Alfama, Lizbon ve 2 yo, 2 banyo, 980 sq ft.

Bir eve bakan kişi aynı sırayla dört soru sorar: ne kadar, nedir, nerede ve ne kadar büyük. Düzeltme kartı bu sıraya koyar, satır başına bir cevap. Fiyat en büyük metindir, sonra ev türü, sonra yer ve ayrıntılar için daha hafif satırlar gelir.

Taslak cevapları karıştırıyor. Fiyat, yalnızca kiralık bir evde Satılık ve Kiralık yazan iki hapla aynı satırı paylaşıyor. Adres ayrıntıların üstünde ama fiyatın altında, farklı bir renkte duruyor. Ayrıntılar küçük 9 punto metin ve sonuncusu Harita düğmesinin altında gizli, yani okur çoğu insanın karşılaştırdığı bir sayıyı, alanı, kaybediyor.

Fotoğraftan ayrıca "1 Year Old" rozeti ve artı düğmesi kaldırıldı. Her görselde iki yüzen düğme, okurun henüz vermediği kararları ister. Bir kalp yeter ve fotoğraf daha büyük, çünkü evi satan fotoğraftır.

Tekrar kullanılacak kural: kart bir cümledir. Kelime sırasına karar verin, sonra her kelimeye tek bir stil verin.

Düzeltme 4: tek ikon stilinde dört sekme

Önce

Sonra

Ana Sayfa, Mülklerim, Mesajlar, Favoriler ve Daha Fazla, dolgulu ve çizgili ikonlar karışık. Karşısında Ana Sayfa, Kaydedilenler, Mesajlar ve Profil, hepsi çizgili ikon, yalnızca Ana Sayfa mavi.

Taslakta beş sekme var ve üçü birbirine yakın: Mülklerim, Favoriler ve Daha Fazla, kaydedilmiş ya da sahip olunan bir evin olabileceği yerler gibi geliyor. İkonları da dolgulu şekilleri (ev, mesajlar) çizgilerle (bina, kalp) karıştırıyor, bu yüzden aktif sekmeyi sadece daha kalın çizilmiş bir sekmeden ayırmak zor.

Düzeltme tek ikon stilinde dört sekme kullanır, böylece sekmeler arasındaki tek fark hangisinin aktif olduğudur. "Favoriler" "Kaydedilenler" olur, kartın üzerindeki kalple uyumlu daha kısa bir kelime. "Daha Fazla" "Profil" olur, arkasında ne olduğunu söyleyen bir ad. Apple'ın yönergeleri sekme çubuğunu en üst düzey bölümler arasında gezinme olarak tanımlar, yani aslında artıkların menüsü olan bir hedef orada yer almaz.

Küçük düzeltmeler

• İçinde bir insan olan başlık. Düzeltme bir karşılama, düz mavi dairede baş harfli bir avatar ve kırmızı noktalı bir zil ekler. Taslakta başlık yok, yani hiçbir şey bunun kimin uygulaması olduğunu söylemiyor.
• Tek kenar boşluğu. Taslak solda 12, sağda 16 kullanıyor, bu yüzden hiçbir şey ekran kenarıyla hizalanmıyor. Düzeltme her satırın iki yanında 20 kullanır.
• Tek aralık ölçeği. Boşluklar 4, 8, 12 veya 16. Her boşluk aynı kısa listeden geldiğinde satırlar ayırıcı olmadan da birbiriyle ilişkili görünür.
• Platformdan bir yazı ölçeği. Taslağın metni örüntüsüz biçimde 9 ile 15 px arasında. Düzeltme 11 ile 22 pt arası iOS boyutlarını kullanır, insanların okuyabildiği boyutlar.
• Daha sakin bir banner. "List your home for Free" italik vurgu kelimesini, ev çizgisini ve içindeki ikinci düğmeyi kaybetti. Artık tek oklu tek bir satır.

Kendi emlak uygulamanızı denetleyin

Figma dosyasını alın

Ücretsiz dosyada iki ekran, düzeltilmiş ekranın her parçası bileşen olarak, renk değişkenleri, iOS yazı stilleri ve fotoğraf kaynaklarının olduğu bir beni-oku var.

Ücretsiz Figma dosyası

Emlak ana ekranı, önce ve sonra

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

Figma'da aç

SSS

Bir emlak uygulaması ana ekranı önce ne göstermeli?

Tek filtre düğmeli bir arama alanı, ardından Kiralık veya Satılık ve mülk türü. İlanları hemen altına koyun, banner ve ikincil tekliflerden sonra gelsin.

Bir mülk uygulamasında Kiralık ve Satılık nasıl gösterilmeli?

İki yarımlı bir segmentli kontrol olarak, böylece iki seçenek de her zaman görünür ve seçilen net biçimde vurgulanır. Arka arkaya dört farklı düğme stili insanları tahmin etmeye iter.

Bir mülk ilan kartında neler olmalı?

Önce fiyat, sonra ev türü, yer ve yatak odası, banyo ve alan gibi temel ayrıntılar. Fotoğrafta tek bir favori düğmesi yeterli.

Bir emlak uygulamasında kaç sekme olmalı?

Dört iyi bir sayı: Ana Sayfa, Kaydedilenler, Mesajlar ve Profil. Favoriler ve Mülklerim gibi aynı yer gibi duyulan iki sekmeden kaçının.

Hangi kategorinin seçili olduğu nasıl gösterilir?

Seçili çipi marka rengiyle doldurun, diğerlerini nötr tutun. Bir dairenin altındaki metin renginde küçük bir değişiklik kolayca gözden kaçar.

Kaynaklar

• İki ekran da bize ait, Figma'da tasarlandı ve ölçüldü.
• Fotoğraflar Unsplash üzerinden Luke van Zyl, A. L. Brown ve Annie Spratt'tan, Unsplash Lisansı kapsamında.
• Apple Human Interface Guidelines: Tab bars.
• Apple Human Interface Guidelines: Typography, iOS yazı boyutları.
• İlk olarak App Brainy üzerinde karusel olarak yayımlandı.