डिजाइन Yandex.Maps एक विज्ञान और जुनून के रूप में

मेरा नाम एंड्री कर्मात्स्की है, और मैं Yandex.Maps के डिजाइन पर काम का नेतृत्व करता हूं। वसंत में, मैं नोवोसिबिर्स्क से कोडफेस्ट 2013 सम्मेलन में गया, जहां मैंने इस बारे में बात की कि हम यांडेक्स के डिजाइन को कैसे विकसित करते हैं। संचित ज्ञान को एक छोटी सी कहानी में ढालने का यह एक अच्छा अवसर था जिसे मैं आपके साथ साझा करना चाहूंगा।

मुझे कार्ड क्यों पसंद हैं?

कार्ड मुझे उनकी सुंदरता से मोहित करते हैं, जो बहुत सारे अर्थ छिपाता है - जानकारी श्रमसाध्य रूप से एकत्र और संरचित।

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



आज, कई वर्षों के बाद, प्रौद्योगिकी और एल्गोरिदम आपको कार्टोग्राफी में अविश्वसनीय चीजें बनाने की अनुमति देते हैं।

स्टैमेन डिजाइन द्वारा जल रंग ।


स्टैमेन डिजाइन द्वारा मानचित्र टाइलें। OpenStreetMap द्वारा डेटा

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

लेकिन एक नक्शा सिर्फ एक तस्वीर नहीं है। सूचना की सही प्रस्तुति महत्वपूर्ण निर्णय लेने में मदद करती है।



जितनी अधिक सटीक और पूर्ण जानकारी प्रस्तुत की जाती है, उतने ही सही ढंग से निर्णय लिए जाएंगे। उदाहरण के लिए, एक कमांडर का कार्य कार्ड।


आई। डी। पोम्ब्रिक और एन। ए। शेवचेंको की पुस्तक "द कमांडर वर्किंग मैप" से

मानचित्र डेटा की सही प्रस्तुति जीवन को बचा सकती है। यह लंदन के डॉक्टर जॉन स्नो की कहानी से अच्छी तरह से पता चलता है, जिन्होंने 1854 में सोहो जिले में हैजा के प्रकोप के दौरान निवासियों का साक्षात्कार किया और नक्शे पर हैजा के मामलों को चिह्नित किया।



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



और ऐसी कई कहानियां हैं - जब एक सही ढंग से बनाए गए नक्शे ने लोगों की मदद की - बहुत कुछ

तो मुझे कार्ड्स करना क्यों पसंद है? कार्टोग्राफिक डिज़ाइन सूचना का डिज़ाइन है, और सूचना डिज़ाइन है:

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

कुछ लोग इस तरह वेब मैपिंग का अर्थ बताते हैं:



B यह हम क्या करते हैं के बहुत करीब है। तो, Yandex.Maps के डिजाइन। अच्छा नक्शा बनाने के लिए हमें आपको बताना होगा कि हमें क्या जानना चाहिए।

प्रसंग और पर्यावरण

मैंने पहले ही कहा है कि एक मानचित्र डेटा है, और किसी भी डिजाइन के बिना, यह इस तरह दिखेगा।



बस सड़कों की एक परत। और यदि आप एक नदी और इमारतों की एक परत जोड़ते हैं, तो ऐसा है।



और हमें लगातार कुछ के साथ आने की जरूरत है ताकि लोग हमारे मैप्स को इन तस्वीरों में न देखें।

यह एक साधारण पर्यवेक्षक को लग सकता है कि लगभग Yandex.Maps में कुछ भी नहीं बदलता है। लेकिन अगर आप समय के स्लाइस को देखते हैं, तो यह ध्यान देने योग्य हो जाता है कि हम लगातार कुछ नया और प्रयोग कर रहे हैं।



लेकिन अन्य लोग काम करते हैं और अपने उत्पादों में सुधार करते हैं। उन्हें देखना चाहिए और देखना चाहिए कि उन्होंने क्या किया है।





यह महत्वपूर्ण है कि यह न भूलें कि कागज पर कार्ड विकसित हुए हैं और कई वर्षों से उस पर "जीवित" हैं, इसलिए कागज कार्ड का अध्ययन करने से बहुत अनुभव प्राप्त किया जा सकता है:



लेकिन Yandex.Maps एक इंटरैक्टिव उत्पाद है, और बस पैमाने पर स्विच करके, उपयोगकर्ता कई स्थिर (पेपर) नक्शे स्विच करता है। इसका मतलब यह है कि हमारा नक्शा दृष्टिगत रूप से सुसंगत होना चाहिए, चाहे इस पर कितनी भी जानकारी प्रदर्शित की गई हो। पैमाने पर स्विच करने के साथ नक्शे के डिजाइन को बदलना उपयोगकर्ता के लिए अनुमानित होना चाहिए।



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



हमारे कार्ड का उपयोग मोबाइल फोन पर किया जाता है: धूप के दिन और रात में दोनों। और, ज़ाहिर है, सैकड़ों हजारों ड्राइवर यात्री डिब्बे में उसकी तरह दिखते हैं।



मोबाइल तकनीक के विकास के बावजूद, हमारा कार्ड छप रहा है। और प्रिंटर हमेशा अच्छी तरह से प्रिंट नहीं करते हैं।



वैसे, मास्को में पैदल चलने वालों में से एक - पैदल यात्री इस समय मानचित्र का एक प्रिंटआउट देख रहे हैं, जब वे मेट्रो से एस्केलेटर पर चढ़ते हैं, तथाकथित "अंतिम मील" के माध्यम से जाने की तैयारी करते हैं। और बहुत अच्छी लाइटिंग नहीं है।

उपयोगकर्ताओं

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

अनुरोधों के हीटमैप से पता चलता है कि लोग राजमार्गों के साथ शहरों और क्षेत्रों में रुचि रखते हैं।



चूंकि हम एक इंटरेक्टिव मानचित्र बना रहे हैं, इसलिए यह विचार करना अत्यावश्यक है कि उपयोगकर्ताओं के विभिन्न पैमानों पर अलग-अलग अनुरोध हैं।

यदि यह बहुत अशिष्ट है, तो विभिन्न पैमानों का उपयोग करने के लिए परिदृश्य लगभग इस प्रकार हैं:

1. एक आदमी पूरी दुनिया को देखता है। वह अपने हित के देश को खोजने के लिए महाद्वीपों को खोजना और पहचानना चाहता है।
2. एक व्यक्ति एक देश को देखता है (जैसा कि ऊपर की तस्वीर में है)। वह शहरों के स्थान और उनके बीच के संबंधों में रुचि रखते हैं।
3. एक आदमी पूरे शहर को देखता है। उसके लिए क्षेत्रों और मुख्य राजमार्गों को देखना महत्वपूर्ण है: राजमार्गों की मुख्य धमनियां बड़े शहरों को आपस में पहचानने योग्य और अलग बनाती हैं।
4. एक आदमी इलाके को देखता है। जिले की सड़कें और अधिक स्थानीय हिस्से उसके लिए महत्वपूर्ण हैं।
5. एक आदमी क्वार्टर को देखता है या सड़क पर देखता है। वह अपने मार्ग / खोज हित के "अंतिम मील" में रुचि रखते हैं।

यदि आप थोड़ा और सोचते हैं, तो अपने उपयोगकर्ताओं की बेहतर समझ के लिए, आप ट्रैफ़िक का उपयोग करने वालों से अनुरोधों के आंकड़ों को देख सकते हैं।



यह पता चला है कि हमारे पास दो दुनिया हैं जो एक मध्यम पैमाने पर कहीं और अंतर करती हैं: पैदल यात्री और मोटर यात्री। इसका मतलब यह है कि शहर के नक्शे के डिजाइन को इन दो समूहों की जरूरतों के आधार पर विकसित किया जाना चाहिए और यह समझना होगा कि मानचित्र का पैमाना अब और अधिक महत्वपूर्ण है।



नीचे दिए गए चित्र में दो अलग-अलग "मास्को के नक्शे" की उपस्थिति को चित्रित किया जा सकता है।



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

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



और दूसरी तस्वीर में मैंने अपने "पैदल यात्री" मास्को को चित्रित किया: ऐसे क्षेत्र जहां मुझे अभिविन्यास के लिए मानचित्र की आवश्यकता नहीं है।



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


नोवोसिबिर्स्क का मध्य भाग: क्षेत्र, मेट्रो और सड़कें

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



स्मृति के अलावा, एक व्यक्ति की दृष्टि है। इसलिए, किसी व्यक्ति की दृश्य क्षमताओं को ध्यान में रखना आवश्यक है। विभिन्न अनुमानों के अनुसार, ग्रह की पुरुष आबादी के 10% तक रंग धारणा विकार हैं । महिलाओं में, वे बहुत कम आम हैं - केवल 0.5% में।

डिज़ाइन

थ्री ट्रंक स्टाइल्स का नियम

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

सड़कों की परत - 1 शैली, प्रदर्शन श्रेणियां अलग नहीं होती हैं। शहर की संरचना को समझना और समझना पूरी तरह से असंभव है।



चूंकि सड़कें सभी अलग-अलग हैं, इसलिए यह विचार उठता है कि प्रत्येक प्रकार की सड़क का अपना दृश्य प्रतिनिधित्व होना चाहिए। और यह थोड़ा साफ हो जाता है। सड़कों के 7 प्रकार = प्रदर्शन के 7 प्रकार।



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



अब पढ़ना आसान लगने लगा है।

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



सड़कों को प्रदर्शित करने की हमारी पद्धति को हमने "राजमार्गों की 3 शैलियों का नियम" कहा। हमने पहले पीपुल्स कार्ड के डिजाइन में और फिर इस्तांबुल कार्ड के डिजाइन में इसका परीक्षण करने का फैसला किया।



हमें परिणाम पसंद आया, और हमने मास्को के नक्शे के डिजाइन में नियम लागू किया।

रंग और पैलेट

नए मानचित्र पैलेट के साथ प्रयोग भी कई और दिलचस्प थे। मैं आपको कुछ मजेदार विकल्प दिखाऊंगा।


© OpenStreetMap


© OpenStreetMap

सहमत हूं, ऐसा नहीं है। तो हम सोचने लगे कि कैसे एक गर्म और पहचानने योग्य यैंडेक्स.मैप पर वापस लौटें।


© OpenStreetMap

यह पहले से ही गर्म है।


© OpenStreetMap

और अंत में, यहां एक अवधारणा है जिसे हम पसंद करते हैं।


© OpenStreetMap

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

pictograms

डिस्प्ले लॉजिक और कलर स्कीम के अलावा, मैप में पोर्टोग्राम हैं।

आइकन - कार्ड उपयोगकर्ता के लिए एक दृश्य एंकर। मानचित्र की रंगीन पृष्ठभूमि पर आइकन को समझने योग्य, पठनीय और पर्याप्त रूप से अलग होना चाहिए। और इस मामले में जब हमारे पास कई आइकन हैं, तो उन्हें एकल दृश्य श्रृंखला बनानी चाहिए।

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

मास्को का नया स्वरूप

अर्जित ज्ञान और प्रयोगात्मक परिणामों के साथ सशस्त्र, पिछली गर्मियों के अंत में हमने मास्को के नक्शे को बदलने का फैसला किया। तो, हमने क्या किया।

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



फिर, हस्ताक्षर के साथ काम की महारत के कारण, नक्शे को अगले पैमाने पर पढ़ना आसान हो गया। यहाँ भी हमने मुख्य परिवहन केंद्र के रूप में स्टेशनों की पहचान की है।



और नक्शे के इस पैमाने पर, मेट्रो स्टेशनों पर हस्ताक्षर दिखाई दिए। हम ऐसा करने में कामयाब रहे ताकि तस्वीर को अधिभार न डालें।



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



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



अब हम अपने नक्शे की जाँच करते हैं। तो यह मुद्रित दिखता है।



और इसलिए नक्शे पर टैग का एक गुच्छा है।



रंग बिगड़ा हुआ उपयोगकर्ता भी देखने में थोड़ा आसान हो गया है। अगला कदम इन लोगों के लिए ट्रैफिक जाम का डिज़ाइन है, यह अब एक बड़ी समस्या है।



उपयोगकर्ताओं ने मानचित्र पर परिवर्तनों को बहुत सकारात्मक रूप से लिया। सबसे पहले मैं बहुत चिंतित था: लोगों के पास मानचित्र डिजाइन में परिवर्तन पर बहुत अधिक प्रतिबिंब है। अनुभव व्यर्थ थे।

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