1. Fiyat ve oda karşılaştırmasının rolü (neden bu ekran kazanır/kaybettirir?)
Bu ekranın rolü bilgi sunmak değil; rate plan presentation mantığıyla karar vermeyi kolaylaştırmaktır. Kullanıcı burada yalnız en düşük fiyatı değil; oda farkını, board tipini, iptal koşulunu ve toplam değer algısını birlikte okur. Karar kolaylaşınca kullanıcı:
- •tabloyu/ekranı terk etmez,
- •tekrar fiyat aramak için başka sitelere gitme ihtiyacı azalabilir (yönlü içgörü),
- •doğru paketi seçer ve rezervasyon akışına geçer.
Otel özelinde zorluk şudur: aynı oda tipi, farklı board (AI/UAI/HB), farklı iptal koşulu, farklı avantaj ve bazen farklı ödeme koşullarıyla gelir. UX’in görevi bu karmaşayı sade bir sözlüğe indirgemektir; özellikle board type clarity in hotel booking sağlanmadığında kullanıcı en ucuz seçenekle en uygun seçeneği karıştırır.
Sadeleştirme: oda adı ve board sözlüğü
- •Oda adlarını 5–7 kelimeyi geçirmeyin (“Deluxe Sea View with Balcony…” gibi uzamasın).
- •Board türlerini netleştirin: AI/UAI/HB/BB → kısa açıklama satırıyla destekleyin.
- •“Rate Plan” dilini kullanıcı diline çevirin: “Ücretsiz iptal”, “Ön ödemeli”, “Esnek”.
☑ Mini Check (Rol)
- •Kullanıcı 10 saniyede “en iyi 2 seçenek”i seçebiliyor mu?
- •Oda adı ve board türü anlaşılır mı?
- •Toplam fiyat ve iptal aynı yerde mi?
- •Ek ücretler sürpriz yaratıyor mu?
Ne yapmalıyım?
- • Oda adlarını ve board/paketleri tek bir sözlükte standardize edin.
- • “Toplam fiyat + iptal”i her seçenek için aynı konuma yerleştirin.
- • “En çok tercih” rozetini doğru kriterle kullanın (rastgele değil).
- • Fiyat sunumunu online satışta rate plan sunumu yaklaşımıyla birlikte ele alın; karşılaştırma ekranı gelir tarafında da aynı mantığı taşımalıdır.
2. Oda ve fiyat karşılaştırma ekranı nasıl tasarlanmalı?
AEO özet (4–6 madde; tablo/kart/paket artı–eksi)
- Tablo, detaylı karşılaştırma için iyidir: çok özellik ve çok seçenek varsa netlik sağlar; mobilde yatay scroll şarttır.
- Kart, hızlı karar için iyidir: 3–5 paket/oda gösterilecekse “en çok tercih edilen”i öne çıkarır; karşılaştırma derinliği sınırlıdır.
- Paket/board sunumu, belirsizliği azaltır: AI/UAI/HB gibi board’lar kısa açıklama satırıyla standardize edilmelidir.
- İptal ve ek ücretler “gizli” kalmamalı; her seçenek altında tek satır özet + detay açılır alan kullanılmalıdır.
- Mobilde tabloda “sticky ilk kolon” ve “yatay kaydır” işareti okunurluğu artırır; skeleton loader ile geç açılan fiyatlar kullanıcıyı bekletmez.
- Seçim CTA’sı her satır/kartta aynı yerde olmalı ve rezervasyon akışını başlatmalıdır.
☑ Mini Check
Kart, fiyat kutusu ve rezervasyon CTA’sı gibi öğeler tek ekranda yarışıyorsa otel oda kartı tasarımı prensipleriyle görsel hiyerarşiyi netleştirmek gerekir.
- •Tablo/kart seçimi içerik yoğunluğuna göre mi yapıldı?
- •Mobilde “yatay kaydır” net mi?
- •İptal + toplam fiyat aynı blokta mı?
- •CTA konumu tutarlı mı?
Ne yapmalıyım?
- • 6+ seçenek varsa tablo, 3–5 seçenek varsa kart yaklaşımıyla başlayın.
- • Her seçenek için “4 çekirdek” bilgiyi sabitleyin: oda tipi, board, toplam fiyat, iptal özeti.
- • Ek ücretleri ayrı sayfaya gömmeyin; açılır detayla aynı yerde verin.
3. Tablo bazlı karşılaştırma UX’i (zorunlu alanlar ve okunurluk)
Tablo, çok seçenekli resort otellerde (Antalya/Belek/Side) en güçlü araçtır; çünkü aynı anda hem oda hem board farklarını gösterebilir. Ama tablo kötü yapılırsa “Excel” gibi görünür ve kullanıcı kaçar.
Karşılaştırma tablosunda zorunlu alanlar
- •Room Type (oda tipi)
- •Board Type / Rate Plan (AI/UAI/HB + kısa açıklama)
- •Total Price (toplam fiyat; vergiler dahil/harç notu)
- •Cancellation Policy (iptal özeti)
- •2–4 kritik fark (manzara, metrekare, konsept avantajı)
Yapılması gerekenler / kaçınılması gerekenler (mini tablo)
| Yapılması gereken | Kaçınılması gereken |
|---|---|
| 4 çekirdek bilgi sabit | 12 kolonla boğmak |
| İptal özeti tek satır | “Detay için tıklayın” deyip boş bırakmak |
| Mobilde yatay scroll işareti | Kullanıcıya sürpriz scroll |
| Sticky ilk kolon | Kaydırınca oda adını kaybetmek |
☑ Mini Check (Tablo)
- •Kolon sayısı kontrol altında mı (maks 6–7)?
- •Sticky ilk kolon var mı (oda adı kaybolmuyor mu)?
- •“Yatay kaydır” sinyali net mi?
- •Fiyat yüklenirken skeleton/placeholder var mı?
Ne yapmalıyım?
- • Tabloyu 4 çekirdek bilgi + 2–4 farkla sınırlayın.
- • Mobilde sticky ilk kolon + yatay kaydır ipucu ekleyin.
- • Fiyatlar dinamik geliyorsa skeleton loader kullanın; “boş ekran” bırakmayın.
4. Kart/Paket bazlı sunum (AI, UAI, HB vb.) ve rozetler
Kart yapısı, hızlı seçim içindir: 3–5 seçenek gösterir, en çok tercih edileni öne çıkarır ve kullanıcıyı CTA’ya taşır. Özellikle paket/board kararında kartlar iyi çalışır; ama kartlar bilgi saklarsa güven düşer. Burada kritik olan rate plan sunumu ile board tipi netliğini aynı karar bloğunda toplamak ve kullanıcıyı gereksiz detay ekranlarına göndermemektir.
Kart yapısında “en çok tercih edilen” rozetini kullanma
“Best Seller Badge” (En çok tercih edilen) rozetini:
- •gerçekten satış/veri temelli bir kriterle kullanın,
- •kartı görsel olarak öne çıkarın (ama “reklam” gibi değil),
- •rozetin yanında kısa gerekçe verin: “Esnek iptal + en iyi fiyat/değer”.
Paket mesajı: fiyat–değer algısını güçlendirme
Fiyatı yalnız “rakam” olarak değil; değer cümlesiyle bağlayın:
- •“AI + ücretsiz iptal — aileler için ideal”
- •“HB — daha esnek planlar”
- •“Ön ödemeli — en iyi fiyat”
☑ Mini Check (Kart)
- •Kartta 4 çekirdek bilgi var mı (oda/board/fiyat/iptal)?
- •“En çok tercih” rozeti gerekçeli mi?
- •CTA her kartta aynı yerde mi?
- •Ek ücretler saklanmıyor mu?
Ne yapmalıyım?
- • Kart sayısını 3–5 ile sınırla; “daha fazla” için tabloya geçir.
- • Rozeti veriyle kullan; rozet enflasyonu yapma.
- • Değer mesajını 1 satırda ver; uzun açıklamayı açılır detayda tut.
5. Oda & Paket Karşılaştırma UI Şablonunu İndir — Pricing UI
Oda & Paket Karşılaştırma UI Şablonunu İndir — Pricing UI (v1.0)
Bu şablon, otel oda/paket fiyatlarını tablo ve kart formatında standartlaştırarak misafirin “hangi oda bana uygun?” sorusunu hızla cevaplamasını sağlar. AI/UAI/HB gibi board türlerini netleştirir, iptal ve ek ücretleri tek bakışta şeffaf gösterir. Mobil yatay scroll ve sticky kolon kurallarıyla okunurluğu korur.
Kim Kullanır?
Otel gelir/pazarlama ekibi + UX tasarımcı + web geliştirme ekibi.
Nasıl Kullanılır?
- Oda tipleri ve board sözlüğünü çıkarın (maks 5–7 oda, 3–5 board).
- Kart ve tablo şablonlarını doldurun; “4 çekirdek bilgi”yi sabitleyin.
- Mobilde yatay scroll kurallarını uygulayıp ölçüm KPI’larını takip edin.
Ölçüm & Önceliklendirme (Kısa sürüm)
- ▢ ✅ A. Sözlük (standart isimler)
- ▢ ✅ B. Kart Şablonu (3–5 seçenek)
- ▢ ✅ C. Tablo Şablonu (6+ seçenek)
- ▢ ✅ D. Ek ücret ve şeffaflık bloğu
- ▢ ✅ E. Kontrol listesi
PDF içinde: Problem→Kök Neden→Çözüm tablosu + 14 gün sprint planı + önce/sonra KPI tablosu
6. İptal koşulları ve ek ücretlerin gösterimi (güven katmanı)
İptal ve ek ücretler belirsizse, kullanıcı ödeme adımında vazgeçer. Bu yüzden iptal ve ücretler “sonradan okunacak detay” değil; karar bilgisidir.
Kullanıcı OTA tarafında zaten benzer ekranlara alışkındır; bu yüzden otelin kendi sitesinde direkt rezervasyon fiyat karşılaştırması beklentisini karşılayan bir şeffaflık seviyesi sunulmadığında, fiyat güveni hızla düşebilir.
İptal politikası: 1 satır özet + detay
Örnek özet formatları:
- •“X tarihe kadar ücretsiz iptal”
- •“İade yok (ön ödemeli)”
- •“Kısmi iade — şartlar için detay”
Ek ücretler: sürpriz yok yaklaşımı
- •Vergiler dahil/dahil değil net yazın
- •Resort’larda transfer, özel servis gibi ücretleri “opsiyonel” etiketleyin
- •“Toplam fiyat” satırında kapsamı belirtin (vergiler, harçlar)
☑ Mini Check (Şeffaflık)
- •İptal özeti her seçenek için görünür mü?
- •Vergi/harç bilgisi net mi?
- •Opsiyonel ücretler etiketli mi?
- •Kullanıcı “son anda” sürpriz yaşamıyor mu?
Ne yapmalıyım?
- • İptal özetini “kart/tablo” içinde sabitleyin; gizlemeyin.
- • “Toplam fiyat” tanımını standardize edin (vergiler/harçlar).
- • Opsiyonel ücretleri etiketleyin ve açıklayın; güveni artırın.
7. Mobilde karşılaştırma tabloları (yatay scroll netliği)
Mobilde tablo kaçınılmazsa, kullanıcıya “bu yatay kayar” sinyalini açıkça vermek gerekir. Aksi halde kullanıcı tabloda kaybolur veya anlamaz.
Mobil yatay scroll için 5 pratik
- Sticky ilk kolon (oda adı)
- “Yatay kaydır →” ipucu (ilk ekranda)
- Kolon sayısını azalt
- Başlık satırını sabitle (sticky header)
- Yüklenme anında skeleton/placeholder
☑ Mini Check (Mobil)
- •Sticky kolon var mı?
- •Scroll ipucu görünür mü?
- •Tablo okunur mu, yoksa “mini yazı” mı?
- •CTA mobilde kolay tıklanır mı?
Ne yapmalıyım?
- • Mobilde tablonun mini sürümünü tasarla; her şeyi sığdırmaya çalışma.
- • Yatay scroll’u işaretle; sticky kolonla kaybolmayı önle.
- • Mobilde kart seçeneğini default, tabloyu detay olarak kurgula.
- • Karşılaştırmadan ödeme adımına geçişte rezervasyon akışında fiyat netliği korunmalı; tarih, oda ve ödeme adımlarında kullanıcı aynı fiyat mantığını görmelidir.
8. Teknik notlar (kısa): Offer/HotelRoom, erişilebilir tablo ve markup
Bu bölüm kısa olmalı; amaç doğru yönlendirmek. Fiyat, oda ve board bilgisinin teknik olarak da tutarlı kalması; hem reklam trafiğinden gelen kullanıcıyı hem de rezervasyon motoruna ilerleyen kullanıcıyı aynı gerçeklikte tutar.
- •Fiyat bloklarında structured data (Offer / HotelRoom) düşünün; doğru uygulama, arama sonuçlarındaki anlamlandırmayı destekleyebilir.
- •Tablo markup’ı erişilebilir olmalı: başlık hücreleri (th), okuma sırası, ekran okuyucu uyumu.
- •Mobil yatay scroll deneyimi kullanıcıya net gösterilmeli; “sticky kolon” ve yüklenme iskeleti (skeleton) faydalıdır.
İç linkler (performans ve satış bağlamı)
- •online satışta rate plan sunumu ile web’deki fiyat mimarisini aynı mantıkta tutun.
- •kanal bazlı fiyat tutarlılığı olmadan web, OTA ve PMS arasında güven kaybı oluşabilir.
- •reklam trafiği için oda karşılaştırma deneyimi özellikle kampanya landing akışında ilk karar hızını doğrudan etkiler.
UI & UX Tasarım hizmetiyle otel fiyat ve oda karşılaştırma deneyiminizi sadeleştirin ve süreç detayları için UI & UX Tasarım hakkında sık sorulan sorular sayfasına göz atın.
Bir Sonraki Adım
Oda/board/paket karmaşasını azaltıp fiyat–değer algısını güçlendirecek karşılaştırma ekranı planı için analiz alın.
Sık Sorulan Sorular
Otel web sitemde oda ve fiyat karşılaştırmasını nasıl göstermeliyim?▾
Tablo mu kart mı kullanmalıyım?▾
İptal koşulları UX’te nasıl sunulmalı?▾
“En çok tercih edilen oda” rozeti dönüşümü artırır mı?▾
“Misafir odaları karıştırıyor, ne yapmalıyım?”▾
Mobilde karşılaştırma tablosu nasıl olmalı?▾
Ek ücretleri nasıl göstermeliyim?▾
İlgili İçerikler