Otel Rezervasyon Uygulaması Tasarımı: Ana Ekran Yenilemesi, Öncesi ve Sonrası

Bir seyahat uygulamasının ana ekranı, kullanıcıya herhangi bir şey sormadan önce onun bir yerlere gitmeyi istemesini sağlamalı. Aşağıdaki ilk taslak tam tersini yapıyor: dört alanlı bir formla açılıyor, destinasyonları düz kelimelerle listeliyor ve tek bir fiyatı altı satıra yayıyor. Düzeltme her özelliği koruyor, sadece gördüğün şeylerin sırasını değiştiriyor.

Ekranın tamamı, öncesi ve sonrası

Acemi taslak

Düzeltilmiş

Soldaki ekranda ilk gördüğün şey bir iş: nereye, giriş, çıkış, misafir, sonra gradyan bir buton. Yerler ancak formdan sonra, beş gri metin hapı olarak çıkıyor. Sağda ise arama tek bir kart ve ekranın yarısından fazlası yerlerin ve konaklamaların fotoğrafları.

Her özellik yerinde duruyor. Hâlâ yere, tarihe ve misafire göre arama yapabiliyor, destinasyonlara göz atabiliyor ve otel fiyatlarını görebiliyorsun. Düzeltme evrak işini tek bir kompakt karta taşıdı ve alanı insanların seyahat uygulamasını açma sebebine geri verdi.

Düzeltme 1: Soruyu sor, sloganı bırak

Önce

Sonra

Bir kalp ve zilin yanında "Dünyayı keşfet, bizimle mükemmel konaklamanı bul!" yazısı; karşısında noktalı bir zilin yanında "Sırada nereye?" yazısı.

Ana ekrandaki slogan şirket için yazılır. Soru ise telefonu tutan kişi için yazılır ve doğrudan altındaki arama kartını işaret eder. "Sırada nereye?" aynı zamanda bir arkadaşının soracağı şeydir ve bir seyahat uygulamasının istediği ton tam olarak bu.

Kalp başlıktan çıktı, çünkü kaydedilen yerlerin zaten kendi sekmesi var. Zil kaldı ve yeni bir şey olduğunda üzerinde nokta çıkıyor, çünkü fiyat düşüşü ya da rezervasyon değişikliği, araya girmeye değer tek şey.

Düzeltme 2: Tek arama kartı, tarih ve misafirler çip olarak

Önce

Sonra

Dört üst üste alan (destinasyon, giriş, çıkış, misafir) ve turuncu gradyan bir buton; karşısında tek bir destinasyon alanı, çip olarak "14 - 16 Kas" ve "2 misafir" ile yuvarlak bir ok butonu.

Dört alanlı form, kişiden tek bir yer görmeden önce her kararı vermesini istiyor. Uygulamayı açan çoğu insan buna hazır değil: göz atıyorlar. Ekranın üçte birini kaplayan bir form onlar için bir duvar.

Tarih ve misafir sayısı aramalar arasında nadiren değişir, bu yüzden düzeltme bunları mantıklı varsayılanlarla çip olarak gösteriyor ve değişmesi gerektiğinde dokunulabiliyor. Yazı yazılması gereken tek alan destinasyon. Giriş ve çıkış çifti tek bir çip oluyor, "14 - 16 Kas", çünkü kimse bir konaklamayı iki ayrı tarih olarak düşünmez.

Düzeltme 3: İsimleri değil yerleri göster

Önce

Sonra

Gri metin hapları olarak "Lizbon, Kyoto, Cape Town, Bali, Paris"; karşısında her adın altında ülkesi yazan Lizbon ve Kyoto fotoğraf karoları, bir sonraki karo kenardan yarım görünüyor.

İnsanlar destinasyonu gözleriyle seçer. "Kyoto" gibi bir kelime okuyucudan yeri hayal etmesini ister; alacakaranlıkta bir pagoda fotoğrafı hayal etme işini onun yerine yapar. Bu bölümün bütün işi bu ve metin hapları bunu yapamaz.

Sağ kenardan kesilen karo bilinçli. Okla ya da noktayla uğraşmadan satırın kaydığını anlatıyor, yani tek bir kaydırmayla keşfedilecek daha çok yer var.

Düzeltme 4: Konaklama başına tek fiyat

Önce

Sonra

-%30 rozetli küçük bir görsel, beş yıldız, şehir, üstü çizili 320 $, gecelik 224 $, "+38 $ vergi ve ücretler" ve iki yeşil avantaj; karşısında 4,8 puanlı büyük bir fotoğraf, ad, "224 $ gece" ve "Lizbon, Ücretsiz iptal".

Taslak kart fiyatı aynı anda dört şekilde gösteriyor: eski fiyat, yeni fiyat, birim ve ek ücretler; fotoğrafın üstündeki indirim rozeti de aynı şeyi beşinci kez söylüyor. Okuyucu otelden hoşlanıp hoşlanmadığına karar vermeden önce hesap yapmak zorunda kalıyor.

Düzeltme tek bir sayı ve tek bir detay gösteriyor. Fotoğraf daha büyük, çünkü konaklamayı satan fotoğraf. Detay ise en çok endişeyi gideren olan ücretsiz iptal, puan da çizilmiş beş yıldızın yerine karşılaştırabileceğin bir sayı koyuyor.

Daha küçük düzeltmeler

• Beş değil dört sekme. Keşfet, Kaydedilenler, Seyahatler ve Profil. Ana Sayfa ve Keşfet tek sekmede, Keşfet'te birleşti, çünkü keşfetmenin yapıldığı yer ana ekran.
• İnsanların kullandığı kelimeler. "İstek listesi" "Kaydedilenler" oldu, "Rezervasyonlar" ise "Seyahatler" oldu; gezginlerin gerçekten söylediği kelimeler.
• Tek vurgu rengi. Taslak buton için turuncu gradyan, avantajlar için yeşil, indirimler için kırmızı kullanıyordu. Düzeltme eylemler için siyahı kullanıyor ve rengi fotoğrafların getirmesine izin veriyor.
• Daha kısa adlar. "Grand Riviera Resort & Spa" kartta "Grand Riviera Resort" oldu, böylece ad fiyatın yanında tek satıra sığıyor.

Kendi seyahat uygulamanı denetle

Figma dosyasını al

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

Ücretsiz Figma dosyası

Otel rezervasyonu ana ekranı, öncesi ve sonrası

Her iki ekran ve düzeltilen her parça Figma bileşeni olarak. Ücretsiz, yalnızca görüntüleme, taslaklarına çoğalt.

Figma'da aç

SSS

Bir otel rezervasyonu uygulamasının ana ekranı önce ne göstermeli?

Kısa bir soru, tek bir arama alanı ve yerlerin fotoğrafları. Tarih ve misafirler arama kartında düzenlenebilir çipler olarak durabilir, böylece göz atmak herhangi bir formdan önce gelir.

Otel fiyatları uygulamada nasıl gösterilmeli?

Konaklama başına tek net fiyat ve ücretsiz iptal gibi tek bir destekleyici detay. Zorunlu ücretlerin geçerli olduğu yerlerde bunları başlık fiyatına dahil et.

Bir seyahat uygulaması destinasyonları fotoğraf olarak mı metin olarak mı göstermeli?

Fotoğraf olarak. İnsanlar yerleri görsel olarak seçer ve ekran kenarında kesilen bir karo, ekstra kontrole gerek kalmadan satırın kaydığını gösterir.

Bir rezervasyon uygulamasında kaç sekme olmalı?

Dört ya da beş. Aynı yere çıkan iki sekmeyi birleştir ve sekmeleri Kaydedilenler ve Seyahatler gibi gezginlerin kullandığı kelimelerle adlandır.

Kaynaklar

• Her iki ekran da bize ait, Figma'da tasarlandı ve ölçüldü.
• Fotoğraflar Unsplash üzerinden: Vali Sachadonig, Zion C, Asher Pardey, Roberto Nickson ve Travis Chen.
• Haksız veya aldatıcı ücretlere ilişkin FTC kuralı, kısa dönemli konaklamayı kapsıyor, 12 Mayıs 2025'ten itibaren yürürlükte.
• İlk olarak App Brainy üzerinde bir carousel olarak yayımlandı.