वेब डिजाइन में छवि हिंडोला - लाभ और सर्वोत्तम आचरण

की कोई कमी नहीं है हिंडोला सुविधा स्लाइड शो वेब पर। वास्तव में, इस प्रवृत्ति ने कुछ भी नहीं किया है पिछले 5-10 वर्षों में वृद्धि पहले से कहीं अधिक ब्राउज़र समर्थन के साथ। लेकिन क्या छवि हिंडोला वास्तव में प्रयास के लायक हैं? वे किस प्रकार के लाभों का उत्पादन करते हैं, और उन्हें लेआउट में कैसे उपयोग किया जाना चाहिए?

मैं कुछ साझा करना चाहूंगा सामान्य रुझान, जीवंत उदाहरण और विचार छवि हिंडोला में रुचि रखने वाले वेब डिजाइनरों के लिए। इन गतिशील स्लाइडर्स पर भारी बहस होती है, लेकिन मुझे लगता है कि सही संदर्भ में तैयार किए जाने पर वे मूल्य जोड़ते हैं.

ई-कॉमर्स के लिए उत्पाद हिंडोला

ई-कॉमर्स की दुनिया होम पेज और प्रोडक्ट पेज पर घूमने वाले हिंडोले से भरी हुई है। के लिए लक्ष्य है एक स्पष्ट सूचना घनत्व बनाए रखें फ़ोटो और पाठ के साथ एक अद्वितीय अभी तक मूल्यवान कहानी बताओ उत्पादों को बेचने में मदद करने के लिए.

वहां दो प्राथमिक प्लेसमेंट ई-कॉमर्स उत्पाद स्लाइडर के लिए:

1. एक दुकान के होम पेज पर
2. एक उत्पाद पृष्ठ पर

वे दोनों अलग तरह से काम करते हैं लेकिन उसी लक्ष्य की सेवा करें - एक दृश्य तरीके से उत्पादों को बेचने के लिए.

उदाहरण 1: एयू लिट फाइन लिनेन - होम पेज

एयू लिट फाइन लिनेन्स के होम पेज पर एक नजर डालें, कि एक फुलस्क्रीन ऑटो-घूर्णन हिंडोला का उपयोग करता है विभिन्न उत्पादों को दिखाने के लिए, जैसे कि duvets, तकिए, और बेड कवर.

तस्वीरें पूरी चौड़ाई लें मुख पृष्ठ का, और वे गुना के ऊपर अच्छी तरह से दिखाई देते हैं. वास्तव में, यह स्लाइडर पृष्ठ पर उतरते समय आपका ध्यान आकर्षित करने के लिए सबसे पहली चीज होनी चाहिए। प्रत्येक स्लाइड साइट पर एक अलग पृष्ठ की ओर ले जाती है खरीदारी के अनुभव के माध्यम से ग्राहकों का मार्गदर्शन करें.

यह स्लाइडर पृष्ठ पर पहली बार उतरने पर डराने वाला हो सकता है, लेकिन इसके साथ बटन लिंक तथा ओवरले पाठ यह उन आगंतुकों के लिए भी बहुत उत्साहजनक हो सकता है, जो बस और दुकान में गोता लगाना चाहते हैं.

उदाहरण 2: ईडन फोन केस - उत्पाद पृष्ठ

आप ईडन फोन केस उत्पाद पृष्ठ पर अधिक विशिष्ट उदाहरण देख सकते हैं। यह एक का उपयोग करता है ऑटो घूमने वाला स्लाइडर उत्पाद की छवियों को दिखाने के लिए.

मुझे ये थोड़े ही लगते हैं “बहुत ज्यादा” ई-कॉमर्स की दुनिया में। जब मैं एक उत्पाद को देखना चाहता हूं छवियों के बीच स्विच करने के नियंत्रण में.

बेहतर विकल्प छवियों की एक गैलरी करना है आगंतुक को दिए गए नियंत्रण के साथ. उदाहरण के लिए, मानव द्वारा डिजाइन पृष्ठ का उपयोग करता है प्रत्येक तस्वीर के लिए थंबनेल जो बहुत अधिक उत्साहजनक है, और उपयोगकर्ता को अधिक नियंत्रण प्रदान करता है.

वेब पोर्टफोलियो हिंडोला

इन स्लाइड्स के कारण ऑनलाइन वेबसाइट पोर्टफोलियो थोड़ा अलग है हमेशा दूसरे पृष्ठ पर क्लिक न करें. यह सच है कि कुछ एक मामले का अध्ययन करने या एक परियोजना के बारे में लिखने के लिए नेतृत्व करेंगे, लेकिन पोर्टफोलियो वेबसाइटों पर कई हिंडोला बस के लिए हैं दृश्य कार्य दिखाओ.

उदाहरण 1: Biboun - होम पेज

बिबौन नाम के तहत काम करने वाले फ्रांसीसी कलाकार ए हिंडोला स्लाइडर मुख पृष्ठ पर कलाकृति के स्निपेट्स की विशेषता. अलग-अलग स्लाइड पोर्टफोलियो में आंतरिक पृष्ठों की ओर ले जाती हैं एक पूरी परियोजना को कवर करें कई तस्वीरों के साथ.

यह शायद है एक स्लाइडर करने के लिए सबसे अच्छा तरीका है एक पोर्टफोलियो वेबसाइट पर। जब तक उन विशिष्ट कार्यों का प्रदर्शन होने का कारण नहीं है, तब तक काम की एक यादृच्छिक सूची को दिखाना व्यर्थ है.

सभी टुकड़े हैं अति सुंदर Biboun के स्लाइडर में, और यह ज्यादा जगह नहीं लेता या तो। हालांकि मुझे पता है कि कुछ लोग अच्छे कारण के लिए ऑटो-रोटेटिंग स्लाइडशो से नफरत करते हैं, ऐसे न्यूनतम लेआउट पर मुझे इस डिज़ाइन सुविधा के बारे में शिकायत करने में मुश्किल होती है.

उदाहरण 2: आरोन ब्लाइस की वेबसाइट - होम पेज

मैं वास्तव में हारून ब्लाइस की वेबसाइट पर पाया गया उदाहरण पसंद करता हूं क्योंकि वह एक पोर्टफोलियो के रूप में अपने काम को दिखाता है, लेकिन ज्यादातर इस वेबसाइट का उपयोग करता है अपने कला वीडियो बेचते हैं. आरोन ब्लाइस ने कुछ दशकों तक डिज़नी में काम किया और उनके पास इसे साबित करने का कौशल है.

जबकि उनकी साइट पर होम पेज स्लाइडर ऑटो-रोटेट करता है, मुझे यह अविश्वसनीय रूप से कष्टप्रद या जगह से बाहर नहीं लगता है। प्रत्येक स्लाइड छवि के लिए प्रासंगिक सामग्री का एक सा है, और यह हारून की मदद करता है अपने नवीनतम वीडियो पाठों पर ध्यान आकर्षित करें युवा कलाकारों को सिखाते हैं कि कैसे विशिष्ट कौशल में महारत हासिल करें.

एक महान पोर्टफोलियो हिंडोला दृश्यों पर केंद्रित है, तथा आगंतुकों को और आगे ले जाता है वेबसाइट में। यदि आप इन दोनों चीजों को प्राप्त कर सकते हैं, तो मैं व्यक्तिगत पोर्टफोलियो वेबसाइट में इस तरह की सुविधा के खिलाफ नहीं हूं.

आम डिजाइन के रुझान

यदि आप मेरे कुछ उपरोक्त उदाहरणों को देखते हैं तो आप देखेंगे कि आमतौर पर दो अलग-अलग प्रकार के स्लाइडर होते हैं: पूर्ण स्क्रीन तथा निश्चित चौड़ाई.

ये शैलीगत विकल्प अक्सर लेआउट से संबंधित है और यह कितनी सामग्री धारण कर सकता है। यदि कोई लेआउट पृष्ठ की पूरी चौड़ाई फैलाता है, तो यह स्लाइडर को चौड़ा करने के लिए भी समझ में आता है। लेकिन यह आपको मजबूर भी करता है उच्च-गुणवत्ता वाली छवियां ढूंढें अभी भी बड़े रिज़ॉल्यूशन मॉनिटर पर पूर्ण स्क्रीन पर अच्छा दिखता है.

मैं व्यक्तिगत रूप से निश्चित चौड़ाई शैली पसंद करता हूं, जैसे आप दो कला पोर्टफोलियो उदाहरणों में देखेंगे। य़े हैं नियंत्रित करने के लिए बहुत आसान है, और वे अक्सर हैं उतना लंबा नहीं - आगंतुकों के लिए इसे आसान बनाना बस उन्हें अनदेखा करें अगर वे चाहें.

ऑटो-एडवांसिंग स्लाइड्स के मूल्य पर भी विचार करें, और यह कितना मुश्किल हो सकता है उपयोगकर्ताओं को इस सामग्री को पकड़ने के लिए। नीलसन नॉर्मन ग्रुप द्वारा एक बढ़िया केस स्टडी है जिसमें दिखाया गया है कि यह बेहतर है ऑटो-एडवांस स्लाइडर्स नहीं है.

मैं इस दृष्टिकोण के साथ इस अर्थ में बोर्ड पर हूं कि यह है स्मृति पर कम गहन ब्राउज़र में कम एनिमेशन और गति के साथ, और अधिकांश लोगों को या तो ऑटो-घूमने वाले हिंडोला पसंद नहीं है - और आपको हमेशा चाहिए अपने दर्शकों को पूरा करें.

हालांकि मैं यह नहीं कह सकता कि यह ऑटो-एडवांसिंग स्लाइडर को जोड़ने के लायक नहीं है, खासकर तब से जब आप स्थैतिक स्लाइडर्स के साथ हैं उतने विचार नहीं मिलते, और आपको भी चाहिए अपनी पहली स्लाइड को सबसे महत्वपूर्ण बनाएं कई उपयोगकर्ता अगली स्लाइड पर नहीं जाएंगे। यह तय करना कि स्लाइडर को ऑटो-रोटेट करना है या नहीं दुर्भाग्य से परीक्षण और त्रुटि का क्षेत्र.

हर कीमत पर किससे बचना है

यहां एक महत्वपूर्ण बात यह है कि मैं व्यक्तिगत रूप से सोचता हूं अंतर्गत आता है “हर कीमत पर बचें”. नीचे दिए गए स्क्रीनशॉट पर एक नज़र डालें या क्लिक करें, और यह अनुमान लगाने की कोशिश करें कि यह क्या हो सकता है.

Yozenn कैफे वेबसाइट एक फुलस्क्रीन हेडर स्लाइडर का उपयोग करती है। यह ऑटो-रोटेट नहीं करता है जो बहुत अच्छा है, हालांकि स्लाइड भी सजावट के अलावा कोई उद्देश्य नहीं है.

तस्वीरें कहीं भी लिंक न करें, और वे कुछ मुट्ठी भर उत्पादों को दिखाते हैं। वे सब बस हो सकता है होम पेज बैकग्राउंड में जोड़ा गया बिना भ्रम और जावास्क्रिप्ट के अतिरिक्त किलोबाइट को बचाने के लिए स्लाइडर के बिना.

मेरा तर्क है कि इस पृष्ठभूमि के फिसलने की सुविधा पहले से ही तंग वेबसाइट पर बहुत अधिक मूल्य नहीं जोड़ती है। यदि छवियों में लिंक या साथ वाले पाठ होते हैं तो वे कम से कम अधिक प्रासंगिक होंगे.

अपने हेडर अनुभाग में उन चित्रों का उपयोग करने के लिए स्वतंत्र महसूस करें, जो पूरे पृष्ठ को लेते हैं, हालांकि यदि वे कहीं भी लिंक न करें या कोई वास्तविक जानकारी न दें फिर उन्हें हिंडोला में मत बदलो.

इंटरएक्टिव विशेषताएं

जिस तरह से उपयोगकर्ता एक हिंडोला नेविगेट करते हैं वह डिजाइन को ही प्रभावित करता है। वहां एक नेविगेशन शैलियों की विविधता, लेकिन ये सबसे लोकप्रिय हैं:

• डॉट-आधारित नेविगेशन
• तीर चलाना
• थंबनेल नेविगेशन
• सूची लिंक या शीर्षक आइटम

सबसे आम है डॉट नेविगेशन जो आपको सैकड़ों आधुनिक वेबसाइटों पर मिलेगा.

उदाहरण 1: घर पर ठाठ - होम पेज

ठाठ एट होम एक बेहतरीन उदाहरण है स्लाइडर के नीचे तीन छोटे डॉट्स नेविगेशन को निरूपित करने के लिए। प्रत्येक छवि स्वचालित रूप से और संबंधित डॉट श्रृंखला में घूमती है काले से भर जाता है. अन्य दो खाली डॉट्स संभावित स्लाइड्स को निरूपित करें उपयोगकर्ताओं को ब्राउज़ करने के लिए.

यह है एक लोकप्रिय डिजाइन पैटर्न कि कई उपयोगकर्ता पहले से ही पहचानते हैं। यह हैमबर्गर मेनू के समान श्रेणी में आता है जो कई डिजाइनरों को पसंद नहीं है, लेकिन उपयोगकर्ता पहले से ही इसे पहचानते हैं, और सहज रूप से जानते हैं कि इसका उपयोग कैसे करना है.

उदाहरण 2: शुद्ध चक्र - होम पेज

शुद्ध चक्र का मुख पृष्ठ एक का उपयोग करता है डॉट और एरो नेविगेशन का संयोजन. इस तरह से उपयोगकर्ताओं के पास आगे और पीछे नेविगेशन है, लेकिन यह भी देखें “संपूर्ण” पथ प्रदर्शन नीचे में डॉट लिंक के माध्यम से.

मैं वास्तव में देखने के लिए कठिन इस उदाहरण में डॉट लिंक पाते हैं। दृश्य स्लाइड के साथ कठिनाई यह है कि कई तत्वों को भेद करना आसान नहीं है, इसलिए तीर और डॉट्स कर सकते हैं आसानी से पृष्ठभूमि में मिश्रण.

उदाहरण 3: IGN - होम पेज

IGN के होमपेज पर आपको एक और मिलेगा ऑटो-घूमने वाला हिंडोला वह उपयोग करता है नेविगेशन के लिए शीर्षक लिंक. यह उन प्रकाशकों के लिए बहुत सामान्य है जो चाहते हैं सुर्खियों में बेचते हैं उत्पादों के बजाय। प्रत्येक लिंक व्यक्तिगत स्लाइड पर जाता है जो अंततः होता है लेख पृष्ठ पर जाता है.

ये लिंक थंबनेल के साथ प्रतिस्थापित किया जा सकता है, या यहां तक ​​कि प्रत्येक कहानी से थंबनेल शामिल करें - हालांकि हिंडोला में दृश्य पहलू दिखाया गया है, इसलिए थम्बनेल को छोड़ने से वास्तव में जगह बचती है.

विभिन्न वेबसाइट विभिन्न कारणों से अलग-अलग नेविगेशन शैलियों का उपयोग करती हैं. अपने आगंतुकों के लक्ष्य पर विचार करें, और सबसे अच्छा उपयोगकर्ता अनुभव के लिए डिजाइन.

चाबी छीन लेना

आपको निशाना लगाना चाहिए वास्तविक मूल्य, या अतिरिक्त जानकारी का उत्पादन करें हिंडोला के साथ। यह वह जानकारी हो सकती है जो आगंतुक के पास पहले नहीं थी, या यह उन पन्नों को जन्म दे सकता है जो आगंतुक को अन्यथा नहीं मिले होंगे.

ऑटो-घूमने वाले हिंडोला से बचने की कोशिश करें, और केवल प्रमुख लैंडिंग पृष्ठों पर उनका उपयोग करें (मुख पृष्ठ एक उदाहरण है)। जब तक हिंडोला है एक उद्देश्य है, तथा एक विज्ञापन की तरह नहीं दिखता है, आपका डिज़ाइन अच्छा होना चाहिए.

यदि आप वेब हिंडोले के बारे में अधिक जानकारी चाहते हैं, तो नीचे दिए गए कुछ पोस्ट देखें:

• ब्रैड फ्रॉस्ट द्वारा हिंडोला
• एक उपयोगकर्ता के अनुकूल होमपेज हिंडोला डिजाइन करने के लिए 8 UX आवश्यकताएँ
• हिंडोला प्रयोज्य: सामग्री अधिभार के साथ वेबसाइटों के लिए एक प्रभावी यूआई डिजाइनिंग