Araç Kiralama Uygulaması Tasarımı: Kiralama Ana Ekranı Yeniden Tasarımı, Önce ve Sonra

Bir kiralama uygulamasının ana ekranında tek bir işi var: insanı istediği arabaya ulaştırmak. Aşağıdaki ilk taslakta sürücünün ihtiyacı olan her şey var ama beş alanlı bir formla açılıyor, hiçbir şeye işaret etmeyen bir banner'da %25 indirim diye bağırıyor ve arabaları en sona bırakıyor: 100x60 piksel, özellikleri de 8 px yazıyla.

Düzeltme her işlevi korur ve arabaları öne alır. Turo'nun düzenini izler: beyaz zemin, tek arama alanı ve fiyatın fotoğrafın altında durduğu tam genişlikte araba kartları. Aşağıdaki her değişiklik kopyalayabileceğiniz bir değişiklik.

Tüm ekran, önce ve sonra

Junior taslağı

Düzeltilmiş

Solda arabalar ekrandaki en küçük şey. Sürücü daha bir tanesini görmeden beş form alanını, bir onay kutusunu, bir düğmeyi, bir banner'ı ve üç açılır menüyü geçiyor. Her araba, 8 px özellikler ve bir BOOK düğmesi olan 100x60'lık küçük bir görsel.

Sağda ekran, sürücünün karar verdiği sırayla okunuyor: nerede, hangi tür, hangi araba. Arama tek bir 48 px alan, araba fotoğrafları 350x190 ve yazılar taslağın 8 ila 15 px'ine karşılık 13 ila 18 px.

Ne değişti, ölçülmüş

Düzeltme 1: formu tek alana katlayın

Önce

Sonra

Alış yeri, teslim yeri, alış tarihi, dönüş tarihi, Değiştir bağlantılı sürücü yaşı onay kutusu, turuncu Araç Ara düğmesi ve bir satır ince yazı içeren Kiralık Araç Bul. Karşısında yuvarlak tek bir alan: bir büyüteç, SFO'dan alış ve sağ kenarda 8-10 Kas.

Taslak, tek bir araba göstermeden önce sürücüden form doldurmasını istiyor. Cevapların çoğu zaten belli: teslim yeri alış yeriyle aynı, yaş 25 üstü, tarihler bu hafta sonu. Form yine de hepsini aynı ağırlıkta soruyor, yani sürücünün karar vermesi gereken tek şey, dokunmayacağı dört şeyden fazla ilgi görmüyor.

Düzeltilmiş ekran önemli iki cevabı, nerede ve ne zaman, tek alanda tutuyor. Bu, Uber'in varış alanında kullandığı kalıbın aynısı. Dokununca teslim yeri, dönüş saati ve sürücü yaşıyla bir sayfa açılıyor; yani hiçbir şey kaldırılmadı, sadece bir dokunuş ötesine taşındı.

Tekrar kullanılacak kural: varsayılanları gösterin, yalnızca değişeni sorun.

Düzeltme 2: teklifi gerçek bir arabaya koyun

Önce

Sonra

Tam genişlikte turuncu bir banner: BU HAFTA SONU %25'E VARAN İNDİRİM!!! ve sağda *T&C apply. Karşısında uzun bir araba kartı: fotoğrafta %25 indirim etiketi, Sport Coupe, 2 koltuk ve Otomatik, günlüğü 89$ ve üstü çizili 119$.

"%25'e varan indirim" diyen bir banner neyde olduğunu söylemiyor. Sürücü kaydırıp hangi arabaya uygulandığını tahmin etmek zorunda kalıyor ve üç ünlem ile 10 px'lik "T&C apply" bir tekliften çok uyarı gibi okunuyor.

Düzeltilmiş ekranda indirim ait olduğu arabanın üzerinde. Fotoğrafta küçük bir etiket %25 indirim diyor, fiyat satırı yanında eski 119$ ile günlük 89$ gösteriyor. 119$'ın %25 eksiği 89,25$, yani rakam dürüst ve teklifin artık sattığı bir şey var. Turo da aynısını yapıyor, fırsatı ilanın üstünde değil ilanın üzerinde tutuyor.

Tekrar kullanılacak kural: teklifin bir nesnesi olmalı. İndirim yaptığı şeye iliştirin.

Düzeltme 3: üç açılır menüyü tek sıraya çevirin

Önce

Sonra

Her birinde ok işareti olan, Tip, Fiyat ve Koltuk yazan üç eşit açılır menü. Karşısında tek sıra hap çipler: siyah seçili Tümü, sonra sağ kenardan taşan Elektrikli, SUV, Coupe ve Cabrio.

Açılır menü, dokunulana kadar seçeneklerini saklar; yani sürücü Elektrikli, SUV ve Coupe'nin var olduğunu öğrenmek için Tip'i açmak zorunda. Üçünün yan yana durması da Fiyat ve Koltuğa, insanların gerçekten kullandığı tek filtreyle, yani araba türüyle, aynı ağırlığı veriyor.

Çipler seçenekleri dokunmadan gösteriyor. Seçili çip siyaha dolu, sıra kayıyor ve son çip ekran kenarında kesiliyor; bu da sürücüye daha fazlası olduğunu söylüyor. Fiyat ve Koltuk hâlâ var, artık arama alanının filtrelerinden açılıyorlar.

Tekrar kullanılacak kural: bir filtrenin beş veya daha az değeri varsa gösterin. Menünün arkasına saklamayın.

Düzeltme 4: her arabaya tam genişlikte fotoğraf verin

Önce

Sonra

Popüler Arabalar altında dört satır; her birinde 100x60 fotoğraf, isim, 8 px özellik satırı, fiyat ve turuncu BOOK düğmesi. Karşısında iki tam genişlikte kart: kalpli 350x190 fotoğraf, sonra tek satırda isim ve fiyat ve altında bir ayrıntı satırı.

Ürün bu ve taslak ona en az yeri veriyor. 100x60'ta bir araba renkli bir şekilden ibaret. Özellik satırı koltuk, vites, yakıt, 0-100 süresi, sigorta ve puanı 8 px'e sığdırıyor; hiçbiri okunmuyor ve hepsi fiyatla yarışıyor.

Düzeltilmiş kart arabaya köşeleri yuvarlatılmış 350x190 bir fotoğraf veriyor ve ismi ile günlük fiyatı tek satıra koyuyor. Altında tek bir 13 px ayrıntı satırı duruyor: koltuk ve vites. BOOK düğmesi gitti çünkü kartın tamamı düğme: dokununca arabanın kendi sayfası özellikleri, puanları ve Kirala'yı gösteriyor.

Tekrar kullanılacak kural: ürün listesi fotoğraf listesidir. Fotoğraf, isim ya da fiyat olmayan her şey bir dokunuş daha derine gider.

Daha küçük düzeltmeler

• Tek marka rengi. Turuncu (#FF5A1F) yalnızca %25 indirim etiketini işaretliyor. Taslak onu banner'da, arama düğmesinde, onay kutusunda, Değiştir bağlantısında, dört BOOK düğmesinde ve aktif sekmede kullanıyor.
• Daha büyük kenar boşluğu. Solda 14 ve sağda 12 yerine iki yanda 20 px, bloklar arasında 14.
• Daha sakin bir başlık. Taslağın kalbi ve zili logonun yanında duruyor. Düzeltilmiş başlık zili tutuyor, kalp artık Kaydedilenler sekmesi.
• Yüzen sekme çubuğu. 62 px'lik yüzen çubukta dört sekme (Keşfet, Seyahatler, Kaydedilenler, Profil) ve üçüncü araba altından geçiyor, bu da sayfanın devam ettiğini söylüyor.
• Tek ikon stili. Taslağın sekme çubuğunda dolu ve çizgili ikonlar karışıktı, şimdi hepsi çizgili.
• Görevlerle eşleşen isimler. Rezervasyonlar Seyahatler oldu, Arama ise en üstteki alan oldu.
• Kırpılan metin. "Haftanın Arabası" ve 0-100 satırı gitti, çünkü hiçbiri araba seçmeye yardım etmiyordu.

Kendi kiralama uygulamanızı denetleyin

Figma dosyasını alın

Ücretsiz dosyada junior taslağı, düzeltilmiş ekran ve her parça bileşen olarak var.

Ücretsiz Figma dosyası

Araç kiralama ana ekranı yeniden tasarımı, önce ve sonra

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

Figma'da aç

SSS

Bir araç kiralama uygulamasının ana ekranı nasıl tasarlanmalı?

Alış yeri ve tarihlerle tek bir arama alanıyla açın, ardından bir sıra araç tipi, sonra her fotoğrafın altında isim ve fiyat olan tam genişlikte araba kartları koyun. Teslim yerini, dönüş saatini ve sürücü yaşını arama alanının bir dokunuş arkasında tutun.

Bir araç kiralama aramasında kaç alan olmalı?

İlk ekranın ihtiyacı kadar: nerede ve ne zaman. Teslim yeri, dönüş saati ve sürücü yaşı genelde varsayılanlarını korur, bu yüzden arama alanından açılan bir sayfada durabilirler.

Araç kiralama indirimi nereye konmalı?

Uygulandığı arabaya. Fotoğrafta bir etiket ve yeni fiyatın yanında üstü çizili eski fiyat, örneğin 119$ ve günlüğü 89$, sürücüye neyin ne kadar indirimli olduğunu söyler. Hiçbir şeye işaret etmeyen bir banner söylemez.

Araç tipleri açılır menü mü olmalı, çip mi?

Beş civarında seçenek varsa çip. Kaydırılan bir sıra Tümü, Elektrikli, SUV, Coupe ve Cabrio'yu dokunmadan gösterir ve ekran kenarında kesilen bir çip daha fazlası olduğunu gösterir.

Bir kiralama uygulamasında araba fotoğrafları ne kadar büyük olmalı?

Sütunun tam genişliği, telefonda yaklaşık 350x190 piksel. 100x60'lık küçük bir görsel arabayı renkli bir şekle çevirir ve sürücü onu değerlendiremez.

Kaynaklar

• İki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. Uygulama Torque, fiyatlar ve özellikler uydurma ve hiçbir marka ya da model adı geçmiyor. Düzen Turo'yu izliyor: beyaz zemin, tek arama alanı ve fiyatın fotoğrafın altında durduğu tam genişlikte araba kartları. Tek alanlı arama Uber'deki varış alanını izliyor.
• 119$'ın %25 eksiği 89,25$, günlüğü 89$ olarak gösterilmiştir.
• İkonlar Phosphor'dan (MIT). Durum çubuğu ölçülmüş gerçek bir iPhone ekran görüntüsünden çizildi.
• Fotoğraflar Pexels'ten: Dextar Studio, Jae Park, miata7 MX-5, Furkan Ceylan ve Can AGBULUT.
• İlk olarak App Brainy üzerinde carousel olarak yayımlandı.