होटल बुकिंग ऐप डिज़ाइन: होम स्क्रीन का रीडिज़ाइन, पहले और बाद में
एक जूनियर होटल बुकिंग होम स्क्रीन जो चार फ़ील्ड के फ़ॉर्म से शुरू होती है, और वही स्क्रीन सुधरी हुई। हर बदलाव आमने-सामने, हर बदलाव की वजह, और मुफ़्त Figma फ़ाइल।
ट्रैवल ऐप की होम स्क्रीन को किसी से कुछ पूछने से पहले उसे कहीं जाने का मन बनाना होता है। नीचे का पहला ड्राफ़्ट इसका उल्टा करता है: वह चार फ़ील्ड के फ़ॉर्म से खुलता है, जगहों को सादे शब्दों में गिनाता है और एक कीमत को छह लाइनों में फैला देता है। सुधार हर फ़ीचर को रखता है और बस यह बदलता है कि आपको क्या किस क्रम में दिखे।
पूरी स्क्रीन, पहले और बाद में
जूनियर ड्राफ़्ट
सुधारा हुआ
बाईं ओर, स्क्रीन पर सबसे पहले एक काम है: कहाँ, चेक-इन, चेक-आउट, मेहमान, फिर ग्रेडिएंट बटन। जगहें फ़ॉर्म के बाद ही दिखती हैं, पाँच धूसर टेक्स्ट पिल्स के रूप में। दाईं ओर, सर्च एक कार्ड है, और आधी से ज़्यादा स्क्रीन जगहों और ठिकानों की तस्वीरों से भरी है।
हर फ़ीचर बचा रहा। आप अब भी जगह, तारीख़ और मेहमानों से खोज सकते हैं, डेस्टिनेशन देख सकते हैं और होटल की कीमतें देख सकते हैं। सुधार ने कागज़ी कार्रवाई को एक छोटे कार्ड में समेटा और जगह उस वजह को लौटा दी जिसके लिए लोग ट्रैवल ऐप खोलते हैं।
| जूनियर ड्राफ़्ट | सुधारा हुआ | |
|---|---|---|
| किसी कंटेंट से पहले इनपुट | 4 फ़ील्ड और 44 px का बटन | 1 फ़ील्ड और 2 चिप्स |
| डेस्टिनेशन | 5 टेक्स्ट पिल्स | शहर और देश के साथ फ़ोटो टाइल |
| हर होटल कार्ड पर कीमत की लाइनें | 6 | 1, साथ में एक डिटेल |
| हेडर | एक नारा और दो आइकन | एक सवाल और एक आइकन |
| टैब | 5 | 4 |
सुधार 1: सवाल पूछिए, नारा छोड़िए
पहले
बाद में
दिल और घंटी के बगल में "Explore the World, Find your perfect stay with us!", बनाम बिंदु वाली घंटी के बगल में "Where to next?"।
होम स्क्रीन पर नारा कंपनी के लिए लिखा जाता है। सवाल फ़ोन पकड़े इंसान के लिए लिखा जाता है, और वह सीधे नीचे के सर्च कार्ड की ओर इशारा करता है। "Where to next?" वही है जो कोई दोस्त पूछता, और ट्रैवल ऐप को यही लहजा चाहिए।
दिल हेडर से हट गया क्योंकि सेव की हुई जगहों का अपना टैब पहले से है। घंटी रही, कुछ नया होने पर बिंदु के साथ, क्योंकि कीमत गिरना या बुकिंग में बदलाव ही वह एक चीज़ है जिसके लिए टोकना वाजिब है।
सुधार 2: एक सर्च कार्ड, तारीख़ें और मेहमान चिप्स के रूप में
पहले
बाद में
चार ऊपर-नीचे फ़ील्ड (डेस्टिनेशन, चेक-इन, चेक-आउट, मेहमान) और नारंगी ग्रेडिएंट बटन, बनाम एक डेस्टिनेशन फ़ील्ड जिसमें "Nov 14 to 16" और "2 guests" चिप्स हैं और एक गोल तीर बटन।
चार फ़ील्ड का फ़ॉर्म इंसान से कहता है कि एक भी जगह देखने से पहले हर फ़ैसला कर लो। ऐप खोलने वाले ज़्यादातर लोग इसके लिए तैयार नहीं होते: वे बस घूम-फिर कर देख रहे होते हैं। स्क्रीन का एक तिहाई घेरने वाला फ़ॉर्म उनके लिए दीवार है।
तारीख़ें और मेहमान खोजों के बीच कम ही बदलते हैं, इसलिए सुधार उन्हें समझदार डिफ़ॉल्ट वाले चिप्स के रूप में दिखाता है, जो बदलना हो तो टैप किए जा सकते हैं। सिर्फ़ डेस्टिनेशन ही ऐसा फ़ील्ड है जिसमें टाइप करना पड़ता है। चेक-इन और चेक-आउट की जोड़ी एक चिप "Nov 14 to 16" बन जाती है, क्योंकि कोई ठहरने को दो अलग तारीख़ों की तरह नहीं सोचता।
सुधार 3: जगहों के नाम नहीं, जगहें दिखाइए
पहले
बाद में
"Lisbon, Kyoto, Cape Town, Bali, Paris" धूसर टेक्स्ट पिल्स में, बनाम Lisbon और Kyoto के फ़ोटो टाइल जिनमें हर नाम के नीचे देश है, और अगला टाइल किनारे से झाँकता हुआ।
लोग डेस्टिनेशन आँखों से चुनते हैं। "Kyoto" जैसा शब्द पाठक से जगह की कल्पना करवाता है; शाम के वक़्त पगोडा की फ़ोटो यह कल्पना ख़ुद कर देती है। इस सेक्शन का पूरा काम यही है, और टेक्स्ट पिल्स यह नहीं कर सकतीं।
दाएँ किनारे पर कटा हुआ टाइल जानबूझकर है। वह तीरों या बिंदुओं के बिना बता देता है कि पंक्ति स्क्रॉल होती है, यानी एक स्वाइप में और जगहें खोजने को मिलेंगी।
सुधार 4: हर ठहरने की एक कीमत
पहले
बाद में
-30% बैज वाला छोटा थंबनेल, पाँच सितारे, शहर, कटा हुआ $320, $224 प्रति रात, "+$38 taxes and fees" और दो हरे पर्क, बनाम 4.8 रेटिंग वाली बड़ी फ़ोटो, नाम, "$224 night" और "Lisbon, Free cancellation"।
ड्राफ़्ट वाला कार्ड कीमत एक साथ चार तरह से दिखाता है: पुरानी कीमत, नई कीमत, यूनिट और अतिरिक्त शुल्क, और फ़ोटो पर डिस्काउंट बैज इसे पाँचवीं बार कहता है। होटल पसंद आया या नहीं, यह तय करने से पहले पाठक को हिसाब लगाना पड़ता है।
सुधार एक संख्या और एक डिटेल दिखाता है। फ़ोटो बड़ी है क्योंकि ठहरने को बेचती फ़ोटो ही है। डिटेल वही है जो सबसे ज़्यादा चिंता हटाती है, यानी मुफ़्त कैंसिलेशन, और रेटिंग पाँच बने सितारों की जगह एक ऐसी संख्या देती है जिसकी तुलना की जा सके।
छोटे सुधार
- पाँच नहीं, चार टैब। Explore, Saved, Trips और Profile। Home और Explore एक टैब, Explore, में मिल गए, क्योंकि होम स्क्रीन ही वह जगह है जहाँ एक्सप्लोर होता है।
- लोगों के बोले जाने वाले शब्द। "Wishlist" "Saved" बना और "Bookings" "Trips" बना, वे शब्द जो यात्री सच में बोलते हैं।
- एक एक्सेंट। ड्राफ़्ट में बटन के लिए नारंगी ग्रेडिएंट, पर्क के लिए हरा और डिस्काउंट के लिए लाल था। सुधार में कार्रवाइयों के लिए काला है और रंग फ़ोटो लाती हैं।
- छोटे नाम। कार्ड पर "Grand Riviera Resort & Spa" "Grand Riviera Resort" बन गया, ताकि नाम कीमत के बगल में एक लाइन में आ जाए।
अपने ट्रैवल ऐप का ऑडिट कीजिए
| सवाल | यह क्यों मायने रखता है |
|---|---|
| क्या कोई फ़ील्ड भरने से पहले कोई जगह देख सकता है? | होम स्क्रीन पर बुक करने वालों से ज़्यादा घूमने वाले होते हैं |
| क्या तारीख़ें और मेहमान पहले से भरे हैं और चिप्स के रूप में बदले जा सकते हैं? | वे खोजों के बीच कम ही बदलते हैं |
| क्या डेस्टिनेशन फ़ोटो में हैं? | लोग जगहें आँखों से चुनते हैं |
| क्या हर ठहरने की एक ही कीमत दिखती है? | चार कीमतें पाठक से हिसाब लगवाती हैं |
| क्या कोई दो टैब एक ही जगह ले जाते हैं? | दोहरे दरवाज़े लोगों को उलझाते हैं |
Figma फ़ाइल पाइए
मुफ़्त फ़ाइल में दोनों स्क्रीन कंपोनेंट के रूप में हैं, हर सुधार पहले और बाद की जोड़ी में है, साथ में कलर वेरिएबल और iOS टेक्स्ट स्टाइल हैं।
मुफ़्त Figma फ़ाइल
होटल बुकिंग होम स्क्रीन, पहले और बाद में
दोनों स्क्रीन और हर सुधरा हिस्सा Figma कंपोनेंट के रूप में। मुफ़्त, सिर्फ़ देखने के लिए, अपने ड्राफ़्ट्स में डुप्लिकेट कर लें।
FAQ
होटल बुकिंग ऐप की होम स्क्रीन पर सबसे पहले क्या दिखना चाहिए?
एक छोटा सवाल, एक सर्च फ़ील्ड और जगहों की फ़ोटो। तारीख़ें और मेहमान सर्च कार्ड में बदले जा सकने वाले चिप्स के रूप में रह सकते हैं, ताकि किसी भी फ़ॉर्म से पहले ब्राउज़िंग आए।
ऐप में होटल की कीमतें कैसे दिखानी चाहिए?
हर ठहरने की एक साफ़ कीमत, साथ में मुफ़्त कैंसिलेशन जैसी एक सहायक डिटेल। जहाँ अनिवार्य शुल्क लागू हों, उन्हें हेडलाइन कीमत में शामिल कीजिए।
ट्रैवल ऐप को डेस्टिनेशन फ़ोटो में दिखाने चाहिए या टेक्स्ट में?
फ़ोटो में। लोग जगहें देखकर चुनते हैं, और स्क्रीन के किनारे पर कटा टाइल बिना अतिरिक्त कंट्रोल के बता देता है कि पंक्ति स्क्रॉल होती है।
बुकिंग ऐप में कितने टैब होने चाहिए?
चार या पाँच। जो भी दो टैब एक ही जगह ले जाते हों उन्हें मिला दीजिए, और टैब के नाम वे शब्द रखिए जो यात्री इस्तेमाल करते हैं, जैसे Saved और Trips।
स्रोत
- दोनों स्क्रीन हमारी अपनी हैं, Figma में डिज़ाइन और नापी गई।
- फ़ोटो Unsplash से, Vali Sachadonig, Zion C, Asher Pardey, Roberto Nickson और Travis Chen की।
- अनुचित या भ्रामक शुल्कों पर FTC नियम, जो अल्पकालिक आवास को कवर करता है, 12 मई 2025 से प्रभावी।
- पहली बार App Brainy पर कैरोसेल के रूप में प्रकाशित।
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
