बीबीसी के लिए डिज़ाइन और वेबसाइट डिज़ाइन

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

समाचार वेबसाइट नॉन-स्टॉप से ​​गुजरने वाली सूचनाओं के तेजी से प्रवाह के लिए एक वातावरण तैयार करना एक चुनौती है, इसके विपरीत कुछ भी नहीं। बीबीसी वर्ल्ड सर्विस के यूएक्स डिजाइनरों और विशेषज्ञों की एक टीम दुनिया भर के विभिन्न दर्शकों के लिए खानपान, 27 भाषाओं में डेस्कटॉप और मोबाइल ब्राउज़र के लिए समाचार साइट बनाती है। इस लेख में हम आपके साथ इस अनुभव को साझा करेंगे।




बीबीसी वर्ल्ड सर्विस के कुछ समाचार साइटें रूसी, अरबी, चीनी और ब्राज़ीलियाई हैं।

---

समाचार वस्तुओं का डिजिटल डिजाइन

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



प्रत्येक मुद्दे के लिए विशेष रूप से डिज़ाइन किए गए पेपर अखबार लेआउट का एक उदाहरण। 26, 27 और 28 जून, 2011 को इज़राइली समाचार समाचार पत्र येडियट ऐन्ब्रोटॉट के कवर।

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

---

समाचार साइट बेंटो बॉक्सिंग के समान है

मैं जापानी बेंटो बॉक्स के साथ समाचार साइट की तुलना करना पसंद करता हूं। ट्रे के किनारों के अंदर विभिन्न आकृतियों और आकारों के छोटे व्यंजन हैं जिन्हें विभिन्न संयोजनों में व्यवस्थित किया जा सकता है। यही बात हमारे डिजाइन के साथ भी होती है। छोटी प्लेटों में निहित भोजन साइट की बदलती समाचार सामग्री है। व्यंजन और मुक्केबाजी के बीच सामंजस्य उन संवेदनाओं को निर्धारित करेगा जो हम भोजन के साथ अनुभव करते हैं।



पारंपरिक बेंटो बॉक्स।

भोजन आकर्षक लगता है, मानो इसे खाने के लिए कह रहे हों। लेकिन क्या यह इतना आकर्षक होगा अगर सभी व्यंजन एक बड़े अनपेक्षित ढेर में एक ट्रे पर ढेर कर दिए गए थे? इस आशय को प्राप्त करने के लिए, जो बेंटो को पकाते हैं, उन्हें भोजन (सामग्री) और उन लोगों के स्वाद को समझना चाहिए जो रात्रिभोज (उपयोगकर्ता व्यवहार) करना चाहते हैं।

---

समझ सामग्री: पदानुक्रम, वॉल्यूम, टोन

डिजाइन पर हमारे काम की शुरुआत से, हम पत्रकारों के साथ मिलकर काम कर रहे हैं। हम भविष्य की सामग्री से परिचित हो जाते हैं, और संपादकों से सामग्री प्रकार को महत्व देने के लिए कहते हैं। तो हमें सामग्री का एक पदानुक्रम मिलता है।

हम पत्रकारों से यह भी सीखते हैं कि एक दिन में मुख्य पृष्ठ से कितनी सामग्री जाती है। उदाहरण के लिए, हम रुचि रखते हैं कि कितने लेख हैं जो संपादकों द्वारा सबसे दिलचस्प के रूप में चुने गए हैं, कितने विषयगत और क्षेत्रीय लेख हैं। अधिकांश देशों में, सामग्री की पठनीयता का चरम सुबह और दोपहर के भोजन के ब्रेक में होता है, और उस समय टीम सबसे अधिक संख्या में लेख लिखेगी।

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

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

---

उपयोगकर्ता के व्यवहार और स्वाद को समझना

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

समाचार साइट में क्या गुण होने चाहिए? उपयोगकर्ता साइट पर कौन से कार्य हल करना चाहता है? उपयोगकर्ता व्यवहार के आंकड़े और विश्लेषण हमें बताते हैं कि आगंतुकों को पसंद है:

• नवीनतम समाचारों को तुरंत देखें;
• विभिन्न प्रकार की सामग्री देखें
• पता है कि सभी जानकारी यथासंभव ताजा है;
• सुनिश्चित करें कि साइट इसके लिए केवल महत्वपूर्ण जानकारी प्रदान करती है;
• किसी विशिष्ट विषय (उदाहरण के लिए, प्रौद्योगिकी समाचार) पर समाचार पढ़ने का अवसर मिलता है;
• स्रोतों की तुलना करें - नवीनतम समाचारों पर विभिन्न बिंदुओं को देखें;
• आरामदायक पढ़ने के लिए एक बिना वातावरण वाला वातावरण है;
• जान लें कि वे जो समाचार पढ़ रहे हैं, वह विश्वसनीय स्रोत द्वारा प्रदान किया गया है।

---

उपयोगकर्ता के व्यवहार और सामग्री के अनुरूप डिज़ाइन बनाएं

हमारे पास उपकरणों का एक सेट है जिसके साथ हम एक बेंटो बॉक्स का प्रभाव बनाते हैं। आइए उनमें से कुछ को देखें।
।

मॉड्यूलर ग्रिड

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



ग्लोबल एक्सपीरियंस लैंग्वेज से ग्रिड। तीन संभावित संयोजनों में से दो।
।

सूचना और ब्लॉक नामों का वितरण

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



बीबीसी हिस्पैनिक वेबसाइट पर पदानुक्रम और सामग्री का समूहन।

प्रत्येक सामग्री समूह के नाम (शीर्ष समाचार ब्लॉक के अपवाद के साथ) हैं, जो नेविगेशन मेनू की श्रेणियों में परिलक्षित होते हैं। ब्लॉक के नाम हमारी साइटों पर दोहरी भूमिका निभाते हैं: एक तरफ, वे स्पष्ट रूप से यह स्पष्ट करते हैं कि यह किस प्रकार की सामग्री है या वह लेख किस प्रकार का है, और दूसरी तरफ, वे साइट को जल्दी से ब्राउज़ करने में आपकी सहायता करने के लिए दृश्य एंकर के रूप में काम करते हैं।



बीबीसी हिस्पैनिक और चीनी वेबसाइट पर विषय समूह के नाम के उदाहरण।

ग्रिड में सामग्री के स्थान का संयोजन, सामग्री में नामों के लिए दृष्टिकोण, ब्लॉक और विभिन्न छवियों के बीच रिक्त स्थान पृष्ठ पर दृश्य ताल सेट करता है।

।

साइट संरचना

उपयोगकर्ता को यह खोजने में मदद करने की आवश्यकता के बीच एक घर्षण है कि वह क्या खोज रहा है और साइट पर विभिन्न सामग्रियों को दिखाने की आवश्यकता है। एक अंतरराष्ट्रीय समाचार एजेंसी के रूप में, हमारे पास एक और समस्या है: हमारी समाचार साइटें लगभग हमेशा अग्रणी स्थानीय समाचार एजेंसियों के साथ प्रतिस्पर्धा करती हैं। इसलिए, हमें ध्यान से सोचना होगा कि उपयोगकर्ताओं को कौन सी श्रेणियों को दिखाना है, ताकि साइट उनके लिए प्रासंगिक हो और उन्हें उस विषय पर सामग्री खोजने में मदद मिले जो उन्हें रुचती है।

इसे बेहतर ढंग से समझाने के लिए, हम साइट का उपयोग करने के लिए दो परिदृश्यों के बारे में बात करेंगे। मारिया प्रौद्योगिकी समाचार पढ़ना चाहती हैं। उसे ऐसी सामग्रियों की जरूरत होती है जो उसे सहज रूप से मिल जाए। रोड्रिगेज ह्यूगो शावेज की नवीनतम हरकतों के बारे में जानना चाहता है। साइट संरचना को इन दोनों पात्रों को संतुष्ट करना चाहिए।

मैरी के लिए, हमारे पास कई शीर्ष-स्तरीय श्रेणियां हैं, जैसे कि प्रौद्योगिकी। श्रेणियाँ हमेशा एक ही स्थान पर स्थित होती हैं, चाहे वह नेविगेशन हो या पृष्ठ पर सामग्री वाला क्षेत्र।

रोड्रिगेज के लिए, हमारे पास शावेज जैसे विषय हैं। आप किसी भी लेख के लिए एक विषय असाइन कर सकते हैं - यह ब्लॉग पर टैग के समान काम करता है। वायु सेना के पत्रकारों को इन लेखों को अपने लेखों में निर्दिष्ट करने का अवसर है, लेकिन वे एक नियंत्रित शब्दकोश तक सीमित हैं - इसकी आवश्यकता है ताकि यह ऐसा न हो जिसमें केवल कुछ लेख हों। यह संपादकों को विषयों की सूची को नियंत्रित करने की भी अनुमति देता है।

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



विषयों के साथ मॉड्यूल साइट पर लेखों के अधिक विस्तृत वर्गीकरण को प्रकट करते हैं।

।

टाइपोग्राफी

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



बर्मी वर्णमाला के लिए एक टाइपोग्राफिक पदानुक्रम को परिभाषित करें।

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



लेख के लिए मॉड्यूल का एक उदाहरण: एक वीडियो प्लेयर (बाईं ओर) और सिर्फ पाठ (दाईं ओर) के साथ।

।

समाचार का समय

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



"स्क्रॉलिंग न्यूज" ब्लॉक में समय-समय पर अपडेट अपडेट को हाइलाइट किया जाता है।
इसके अलावा, हम मुख्य समाचार जोड़ने के समय के साथ ध्यान देने योग्य ब्लॉक दिखाते हैं जब तक कि जोड़ने के क्षण से एक घंटा बीत चुका होता है।
।

साइट पर आगे की यात्रा

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



मुख्य पृष्ठ के एक लघु संस्करण के रूप में लेख पृष्ठ: सही स्तंभ मुख्य पृष्ठ और संपूर्ण साइट से सामग्री प्रदर्शित करता है।

---

और यह सब एक उद्देश्य के लिए

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

।
अनुवादकों से पुनश्च: मुझे आशा है कि आपको लेख अच्छा लगा होगा। हमें खुशी होगी यदि आप हमें अनुवाद में त्रुटियों का संकेत देते हैं, ताकि हम उन्हें जल्दी ठीक कर सकें। कृपया मुझे पीएम में लिखें :)