इस लेख में, मेरी दुनिया के एक मोबाइल एप्लिकेशन को डिजाइन करने में तीन महीने के अनुभव के उदाहरण के रूप में, मैं इस बारे में बात करूंगा कि हम सृजन के सभी चरणों से कैसे गुजरे, क्यों कागज पर अपने विचारों को आकर्षित करें, कैसे हमने फोंट के साथ संघर्ष किया और अन्य कठिनाइयों को पार किया, हमने UX परीक्षण कैसे किया और बहुत कुछ किया अन्य।
विरासतयह सब इस तथ्य के साथ शुरू हुआ कि पहली कठिनाई जिसने हमें एप्लिकेशन के डिजाइन को विकसित करने में इंतजार किया था, तथाकथित विरासत-डिजाइन के साथ काम कर रहा था। हमारे हाथ में एक ऐसा उत्पाद था जिसे हमें समझने और समझने की जरूरत थी कि पिछले डिजाइनर ने क्या रूपक इस्तेमाल किए थे।
प्रोफ़ाइल उदाहरण दिखाता है कि यह "पहले" कैसे था और "बाद" क्या बन गया।
परियोजना की संरचनापहला कदम परियोजना का एक संरचनात्मक आरेख तैयार करना था। तैयारी में, माइंडजेट कार्यक्रम का उपयोग किया गया था, जो आपको विशाल मन के नक्शे बनाने की अनुमति देता है। इसमें सभी विवरण, स्क्रिप्ट, पेज थे। चित्र मन के नक्शे का एक छोटा सा टुकड़ा दिखाता है।
वास्तव में, यह एक पेड़ की पदानुक्रम वाली एक विषम फ़ाइल है, जिसमें लगभग हर पृष्ठ और उपयोगकर्ता लिपियों का वर्णन है।
अनुप्रयोग परिदृश्य का उपयोग करेंअगला चरण कस्टम स्क्रिप्ट का विकास था। मैं आपको सूचनाओं के उदाहरण के साथ इसके बारे में अधिक बताऊंगा।
सबसे पहले, स्क्रिप्ट को संकलित करते समय, प्रत्येक स्क्रीन पर उपयोगकर्ताओं को प्राप्त होने वाले लक्ष्य की पहचान की जाती है। सूचनाओं के मामले में, लक्ष्य यह है कि आप अपने वातावरण में होने वाली घटनाओं, यानी उपयोगकर्ता से जुड़ी हर चीज, अपने दोस्तों, सहकर्मियों आदि के बारे में जानकारी रखें। अधिसूचना प्राप्त करने के बाद, उपयोगकर्ता संबंधित पृष्ठ पर जा सकता है। सूचना के प्रकार के आधार पर अलग-अलग परिदृश्य संभव हैं (खेल से सूचनाएं, दोस्ती के निमंत्रण, टिप्पणी, "पसंद" के निशान)। एक उपयोगकर्ता गेम या किसी अन्य उपयोगकर्ता की प्रोफ़ाइल पर जा सकता है, किसी को संदेश लिख सकता है, और इसी तरह। इन सभी विकल्पों को संभावित चौराहों को ध्यान में रखते हुए, मन के नक्शे में "पंजीकृत" होना चाहिए।
प्रतियोगी अनुभव विश्लेषणइसलिए, परिदृश्यों का विस्तार किया जाता है, आप अगले चरण में जा सकते हैं - प्रतियोगियों के अनुभव का विश्लेषण। किसी भी एप्लिकेशन को प्रोटोटाइप करते समय यह चरण आवश्यक है: यह अनुमति देता है, सबसे पहले, पहिया को सुदृढ़ करने के लिए नहीं, और दूसरी, किसी भी संभावित त्रुटियों से बचने के लिए।
मुख्य रूप से माना जाता है, निश्चित रूप से, प्रत्यक्ष प्रतियोगी हैं। हमने न केवल शीर्ष सामाजिक नेटवर्क का अध्ययन किया, बल्कि कम लोकप्रिय भी हैं। हमने अनुप्रयोगों की एक विशाल परत का अध्ययन किया: उन सभी का अध्ययन किया जाना था, उनके व्यवहार को समझा, वे उपयोगकर्ता के साथ कैसे संवाद करते हैं, वे कैसे जानकारी प्रस्तुत करते हैं।
हमने अप्रत्यक्ष प्रतियोगियों के अनुभव का भी विश्लेषण किया। उदाहरण के लिए, हमारे संगीत अनुभाग के लिए, ये आईट्यून्स और अन्य विशिष्ट अनुप्रयोग हैं। अगर तस्वीरों की बात आती है, तो हमने पूरी तरह से हर चीज में तस्वीरें लीं - इंस्टाग्राम, मोबली आदि पर। यह सब हमें समझ में आया कि दर्शक विभिन्न अनुप्रयोगों में कैसे व्यवहार करते हैं।
पहले पेपरहमने ए 4 पेपर के पूरे ढेर को नीचे लिखा, प्रत्येक स्क्रीन पर विस्तार से काम किया। कागज पर क्यों? इसलिए किसी समस्या को हल करना शुरू करना मनोवैज्ञानिक रूप से आसान है। यह हमेशा स्पष्ट होता है कि कहां से "नृत्य" करना है - पहले आप एक वर्ग खींचते हैं, और बाकी सब पहले से ही बनाया गया है। यह मनोवैज्ञानिक बाधा को दूर करने में मदद करता है, और एक शीट पर विचारों को "डालना" करना बहुत आसान है।
उपकरण चयनतो, कागज का एक पहाड़ खींचा जाता है। अब आपको यह समझने की आवश्यकता है कि एप्लिकेशन का ग्राफिक लेआउट किस स्थिति में बनाया जाएगा। फ़ोटोशॉप को तुरंत इसकी निरर्थक कार्यक्षमता के कारण चिह्नित किया गया था: इसकी क्षमताओं ने डिजाइनर को सभी विवरणों में तल्लीन करने के लिए लुभाया। इस तरह के एक विस्तृत अध्ययन में बहुत अधिक समय लगता है, आप प्रत्येक भाग पर लगभग अंतहीन काम कर सकते हैं, और परिणाम का अनुमान लगाना मुश्किल है।
अगला उम्मीदवार InDesign था। मुझे यह कार्यक्रम बहुत पसंद है, क्योंकि एक समय पर मैंने पत्रिकाओं को बनाया और आम तौर पर सभी प्रकार के कागज उत्पादों का एक बहुत। InDesign की तुलना में तेजतर्रार, आप शायद इसे नहीं पा सकते हैं। हालांकि, उनकी एक समस्या तुरंत दिखाई दी: आधा-पिक्सेल। इनडिजाइन प्रिंटिंग के लिए तेज किया जाता है, जहां यह इतना महत्वपूर्ण नहीं है। लेकिन जब आप डिजिटल माहौल के लिए कुछ करने के लिए बैठते हैं, तो यह एक बड़ी समस्या बन जाती है। कागज पर ध्यान केंद्रित करने के साथ जुड़ी एक और जटिलता पृष्ठों के लिए पहचान संख्या है: जब आप एक नया पृष्ठ जोड़ते हैं, तो संरचना पूरी तरह से अलग हो जाती है, यह समझना असंभव है कि प्रत्येक पृष्ठ से कहाँ जाना है और अंत में यह सब दुर्घटना, क्रोध और बहुत समय बर्बाद होने के साथ समाप्त होता है।
अगला अप एक्सुर था। यह डिजाइनिंग के लिए एक आदर्श कार्यक्रम है, इसमें सबसे शक्तिशाली प्रोटोटाइप टूल है, टाइमिंग हैं, आप उन कार्यों का अनुकरण कर सकते हैं जो एक व्यक्ति मोबाइल फोन पर करता है। लेकिन अंतिम चित्रों को इसमें नहीं बनाया जा सकता है, पहले आपको इन सभी स्क्रीन को खींचना होगा, इसे एक्सुर में भरना होगा और इसे एक एकल प्रोटोटाइप में कम करना होगा।
नतीजतन, आतिशबाजी का चयन किया गया था। यह एक एडोब उत्पाद है जो अन्य एडोब उत्पादों - इलस्ट्रेटर, फ़ोटोशॉप के साथ काफी कसकर एकीकृत है - इसलिए इसमें डिजाइन करना सुविधाजनक था। वह HTML के लिए अंतिम विकल्प निर्यात करता है, जो सुविधाजनक है। इसके अलावा, फोन से लेकर आपके प्रबंधन, सहकर्मियों आदि तक सब कुछ सीधे प्रदर्शित किया जा सकता है।
Vayrfreymyएक और बड़ा कदम वायरफ्रेम है। आमतौर पर वह "पेपर" चरण का अनुसरण करता है - हम कह सकते हैं कि यह एक तरह का विचार है। इस स्तर पर, मैं अभी भी विवरण में नहीं जाता हूं, इससे कोई फर्क नहीं पड़ता कि बटन किस रंग के हैं, लेकिन मैं पहले से ही उन ब्लॉकों पर भरोसा कर रहा हूं जो मेरे पास कागज पर थे। आप पहले से ही क्लिक करने योग्य प्रोटोटाइप इकट्ठा कर सकते हैं और अपने सहयोगियों के साथ देख सकते हैं कि यह कैसे काम करता है, आसानी से या नहीं। यह एक प्रकार का प्रोटोटाइप निर्माता है, जिसकी बदौलत हमारा कार्यक्रम पहले से ही अमल में लाना शुरू कर रहा है।
वायरफ्रेम के विकल्पों पर विचार करें जो संवाद और बाएं मेनू के लिए बनाए गए थे। लगभग तुरंत आप देख सकते हैं कि प्रमुख कहाँ स्थित हैं, और जहाँ बाकी सब कुछ है। ब्लॉकों को उनके स्थानों पर रखे जाने के बाद, यह केवल ग्राफिक्स के साथ इसे अंतिम रूप देने के लिए रहता है।
क्लिक करने योग्य लेआउटयह आतिशबाजी में कुछ इस तरह दिखता है:
फ़िरोज़ा ब्लॉक क्लिक करने योग्य हैं। बेशक, यह सिर्फ हिमशैल का टिप है। लगभग 100 पृष्ठ थे जो एक-दूसरे को ले गए और लगातार आपस में पार हो गए। इस समय, मुख्य बात भ्रमित होने की नहीं है; लेकिन सामान्य तौर पर, आप पहले से ही दिखा सकते हैं कि उत्पाद अंतिम रूप में कैसा दिखेगा।
एनीमेशनहम काम की अगली परत पर आ गए हैं। प्रोटोटाइपिंग एनीमेशन बहुत महत्वपूर्ण है - यह हमें डेवलपर के साथ एक संवाद में लाता है और यह सुनिश्चित करने में मदद करता है कि: क) सभी बदलाव तार्किक रूप से लागू किए जाते हैं और उपयोगकर्ता नेविगेट कर सकता है, और बी) आप और डेवलपर एक ही भाषा बोलते हैं और एक ही विचार रखते हैं कि ये बदलाव लागू हो जाएंगे।
कभी-कभी आप बहुत सारे काम विस्तार से कर सकते हैं (उदाहरण के लिए, ड्रैग-टू-रिफ्रेश, जिसे एनीमेशन के रूप में भी विकसित किया गया था), ताकि आप इसे डेवलपर्स को दे सकें। iOS अच्छा एनीमेशन टूल प्रदान करता है, और आमतौर पर प्रोग्रामर इसे स्वयं करते हैं।
एंड्रॉइड के साथ, यह नारकीय रूप से जटिल है, आपको प्रत्येक फ्रेम को काटना होगा। इससे धीरे-धीरे पागल हो जाओ। फिर आपको अभी भी चार अलग-अलग आकारों में करने की आवश्यकता है। अंत में, आपको एहसास होता है कि आप एंड्रॉइड के लिए एनिमेशन बनाना नहीं चाहते हैं और इसे iOS के लिए करना चाहते हैं।
नतीजतन, हम अभी भी यह सुनिश्चित करने में कामयाब रहे कि माय वर्ल्ड आईओएस और एंड्रॉइड, साथ ही मोबाइल वेब पर एक दृश्य पहचान बनाए रखता है। हमारे आवेदन, सामान्य रूप से, पहले से ही अपनी अंतिम उपस्थिति के करीब है, मुखौटा सजावट शुरू होती है।
एकल फ़ॉन्टइस पहचान की उपलब्धि ने एक ही फ़ॉन्ट में बहुत योगदान दिया। यह ज्ञात था कि मोबाइल वेब के कार्यान्वयन में कोई समस्या नहीं होगी: यह एक मुफ्त फ़ॉन्ट चुनने और मोबाइल वेब के लिए
फ़ॉन्ट चेहरे के माध्यम से इसे जोड़ने के लिए पर्याप्त था। IPhone और Android में एक "फ़ॉन्ट अनुकूलन" सुविधा भी है। मुझे अविश्वसनीय रूप से खुशी हुई कि हम सभी प्लेटफार्मों पर और भी समान होंगे। हालांकि, यहां समस्याएं शुरू हुईं।
डेवलपर्स हर दिन मेरे पास आए और कहा कि मैं एक बदमाश था और डिफ़ॉल्ट फोंट के लिए सहमत होना चाहिए। जिस फ़ॉन्ट को चुना गया था, iOS पर ओपन संस, एक अलग फ़ॉन्ट कनेक्ट करने के लिए चेतावनी और आवश्यकताएं जारी करता था: iOS को लगता था कि अक्षर गलत तरीके से संरेखित थे (वास्तव में, नेत्रहीन कुछ भी नहीं बदला गया)। इस तथ्य से जुड़ी समस्याएं भी थीं कि आईओएस के पास लाइन रिक्ति का अपना विचार था - वे बस विशाल थे। प्रोग्रामर के लिए धन्यवाद जो हैक द्वारा सिस्टम को हैक करने में सक्षम थे और चयनित फ़ॉन्ट को आंख को अच्छा बनाते हैं।
Android, बेशक, कोई कम समस्या नहीं दी। किसी कारण से, उनका मानना है कि नेविगेशन बार को सिस्टम फोंट के साथ आना चाहिए। इसके अलावा, अगर यह फ़ॉन्ट हर जगह समान होता, तो सब कुछ इतना दुखी नहीं होता। लेकिन नहीं! प्रत्येक शेल का अपना फ़ॉन्ट होता है, जिसे डेवलपर द्वारा प्यार से चुना जाता है। उदाहरण के लिए, सैमसंग पर यह कॉमिक सैंस के समान एक फ़ॉन्ट था। अंत में, फोंट के साथ सभी विसंगतियां दूर हो जाती हैं, अगले चरण पर जाएं।
परियोजना के लिए एकल ग्रिडफ़ॉन्ट्स और एनिमेशन एकमात्र घटक नहीं हैं जो एकीकरण को प्रभावित करते हैं। तीसरा "व्हेल" एक एकल ग्रिड है, जिसे तुरंत तीन प्लेटफार्मों के लिए विकसित किया गया था। मॉड्यूल के रूप में क्या लेना है और क्या तब से अन्य सभी तत्वों का निर्माण करने के लिए - इस सवाल ने मुझे लगभग दो दिनों तक पीड़ा दी जो मैंने गणनाओं में बिताए।
प्रारंभ में, यह समझना आवश्यक था कि ऑपरेटिंग सिस्टम के डेवलपर्स द्वारा कौन से स्थिरांक पहले से ही निर्धारित किए गए थे (उदाहरण के लिए, आईओएस में यह 44 पिक्सल के आकार के साथ एक नेविगेशन बार है) और ग्रिड के निर्माण के दौरान इसे ध्यान में रखना चाहिए। नतीजतन, 4x4 पिक्सल को एक माइक्रोमॉड्यूल के रूप में चुना गया था। क्षैतिज लय 4-पिक्सेल खांचे के साथ छह-स्तंभ पर आधारित थी।
आइकन सेटहमारे प्रोग्राम के अंतिम ग्लॉस को आइकनों का उपयोग करके दिया गया था। मैं लंबे समय से रूपरेखा के आइकनों को देख रहा हूं - मुझे वास्तव में आइकनवर्क का काम पसंद आया है। हमने एक मॉड्यूल बनाया जिसके तहत माई वर्ल्ड के आइकन बनाए गए थे। जब iOS 7 का पहला बीटा सामने आया, तो मैंने सोचा: "बुरा नहीं है, हम इस प्रवृत्ति पर चोट कर रहे हैं।" तब और भी कई समानताएँ थीं, जिन्हें हम iOS 7 में नहीं देख रहे थे, उन्होंने पहले ही आवेदन में लागू कर दिया था। इसलिए, हम iOS 7 एप्लिकेशन के बाजार में प्रवेश करने वाले सबसे पहले में से एक हैं।
प्रयोज्यता परीक्षणतो, सब कुछ तैयार है, सही प्रतीक तक, परीक्षणों का समय आ गया है। अब यह स्पष्ट हो जाएगा कि हमारी गणना कितनी सही है, हम उपयोगकर्ता के व्यवहार की भविष्यवाणी करने में कितने सही थे, क्या हम प्रत्येक एप्लिकेशन स्क्रीन की कार्यक्षमता और उपयोगिता को संतुलित कर सकते हैं। प्रयोज्यता परीक्षण हमेशा डेवलपर के लिए एक चुनौती है। परीक्षण के लिए, सभी इंटरैक्शन परिदृश्यों की परिकल्पना और पंजीकरण करना आवश्यक है: उपयोगकर्ता कैसे व्यवहार करेगा, जहां वह क्लिक करेगा और प्राप्त करेगा, हमें उपयोगकर्ताओं से क्या प्राप्त करना चाहिए (यह समझने के लिए कि परिणाम हमारी अपेक्षाओं को पूरा करता है)।
इसके अलावा, यह और अधिक कठिन है: हमने एक पूरे के रूप में हमारे आवेदन का परीक्षण किया। स्क्रीनशॉट में जो दिखाया गया है, वह केवल संरचना का हिस्सा है, और आगे के परीक्षणों के लिए प्रोटोटाइप में तत्वों की संख्या में काफी वृद्धि हुई है।
मैं क्या सलाह दे सकता हूं: इस स्तर पर छोटे से छोटे पिक्सेल तक, सभी विवरणों को चाटना आवश्यक नहीं है। सबसे महत्वपूर्ण बात यह है कि आप जांचते हैं कि क्या उपयोगकर्ता उस मार्ग का अनुसरण कर रहा है जिसे आपने सही तरीके से निर्धारित किया है। यदि वह आपकी ज़रूरत की गति के साथ सब कुछ पूरा करता है, अर्थात, वह जल्दी से जानकारी प्राप्त करता है, तुरंत समझ जाता है कि उसके लिए एक निश्चित स्थान पर जाना कितना महत्वपूर्ण है, जहां कौन सा अनुभाग स्थित है, वह कैसे खोजना है जिसके साथ वह बात करना चाहता है, जहां सूचनाएं हैं, आदि। आदि, कि टोपी में बात है।
संपादन और प्रयोगप्रयोज्य परीक्षण हमने लगभग अंतःक्रियात्मक रूप से आयोजित किए। हम अगले कमरे में बैठे और आवेदन के साथ काम कर रहे लोगों को देख रहे थे। मान लें कि हमने देखा कि उत्तरदाताओं ने "मित्र खोजें" बटन पर प्रतिक्रिया नहीं दी है: तो हमने तुरंत पटाखे खोले और "मित्र खोजें" को "गुड" में बदल दिया। हमने अगले परीक्षण प्रतिभागियों को एक नया प्रोटोटाइप पेश किया और देखा कि वे कितनी तेजी से प्रतिक्रिया करते हैं। यदि सिद्धांत ने काम किया, तो उन्होंने इसे छोड़ दिया।
रूपक जाँचपरीक्षण का यह चरण आपको यह समझने की अनुमति देता है कि उपयोगकर्ता द्वारा माउस को कितनी सही तरीके से माना जाता है। सामान्य तौर पर, मैं पिक्टोग्राम और आइकन का बहुत बड़ा प्रशंसक नहीं हूं। मुझे लगता है कि शब्दों में लिखना बहुत बेहतर है (वैसे, जाहिरा तौर पर, जब आईओएस 7 पर काम कर रहे थे, तो हमने भी इसी से शुरुआत की थी, सब कुछ मूल रूप से हर चीज में मौखिक हो गया)।
हम विशेष रूप से दो रूपकों के उपयोगकर्ताओं के लिए समझ में रुचि रखते थे। पहला एक वृत्त है। यदि आप पिछली स्लाइड्स को देखते हैं, तो नेविगेशन बार में हमारे पास 3 बटन हैं: मानक बबल (डायलॉग), प्लस (एक नई प्रविष्टि जोड़ना), और, वास्तव में, एक सर्कल जो भविष्य के लोगो की अवधारणा से पैदा हुआ था। एक बार हमारे पास एक वैचारिक लोगो का विचार था: एक ग्रह के प्रभामंडल जैसा एक चक्र। यह रूपक, परिणामस्वरूप, अनुप्रयोग में प्रवाहित हुआ और सूचनाओं को इंगित करने के लिए उपयोग किया जाने लगा। सबसे आश्चर्य की बात यह है कि जैसे ही एक अधिसूचना आई, सभी उपयोगकर्ता समझ गए कि इस आइकन के पीछे क्या छिपा था।
दूसरा रूपक जिसमें हमें दिलचस्पी थी वह हीरा था। उसके पीछे तस्वीरों की ऑटो-एन्हांसमेंट थी। जैसा कि यह निकला, उपयोगकर्ताओं ने इस रूपक को नहीं पहचाना; हमने हीरा छोड़ दिया, लेकिन एक संकेत जोड़ा: जब आप उस पर क्लिक करते हैं, तो "फोटो में सुधार" संदेश प्रकट होता है।
एक अन्य बिंदु जो प्रयोज्य परीक्षणों को स्पष्ट करता है वह उस पोस्ट में अवतारों का स्थान है जिस पर किसी अन्य व्यक्ति ने टिप्पणी की थी। पहले तो हमारे पास एक विचार था जिसके अनुसार दो अवतारों को एक दूसरे के करीब रखना आवश्यक नहीं है, क्योंकि यह धारणा के लिए मुश्किल है, और हमने कमेंटेटर को सीधे घटना के तहत रखा।
कागज पर सब कुछ ठीक था। लेकिन जब हमने इसे उपयोगकर्ताओं को दिखाया, तो वे इस संस्करण को नहीं समझ पाए, लेकिन उन्होंने दो अवतारों के पास होने पर विकल्प को चुना।
पत्थरों को इकट्ठा करने का समयऔर यहां पत्थरों को इकट्ठा करने के लिए रिलीज, समय है। यही है, ऐप स्टोर, Google Play और अन्य स्रोतों से समीक्षा। जब आप टिप्पणी "सामान्य रूप से देखते हैं, तो आपकी सेटिंग स्क्रीन कहाँ है?", इसके बारे में सोचने का समय है। यदि यह एक समीक्षा है (उपयोगकर्ता ने हमारे आवेदन को केवल "ड्यूस" दिया है), तो, सिद्धांत रूप में, आप कानों को छोड़ सकते हैं। लेकिन अगर उनमें से कई हैं, तो आप स्पष्ट रूप से कहीं गलत थे।
एक पूरे के रूप में हमारा आवेदन उपयोगकर्ताओं द्वारा अच्छी तरह से प्राप्त किया गया था। AppStore और Google Play में, इसे औसतन 4 अंक मिले। अद्यतन के तुरंत बाद हमें मिली प्रतिक्रिया का एक हिस्सा मैत्री प्रस्ताव की अधिसूचना से संबंधित है, जहां उपयोगकर्ता पृष्ठ की पेशकश पर नहीं जा सकता है। यह तय हो गया है। एक और कमी संदेश को हटाने और साफ़ करने के साथ कठिनाइयों का कारण बनी, जिसके लिए उपयोगकर्ताओं ने हमारे आवेदन को 4 अंक दिए। अंत में, हमने सिर्फ एक गियर जोड़ा, जो संवाद में इस तरह की सेटिंग्स के लिए एक रूपक बन गया।
इस एप्लिकेशन पर काम एक बार फिर से डिजाइन और अनुप्रयोगों के निर्माण में कई चरणों के महत्व की पुष्टि करता है: संरचनात्मक अध्ययन और उपयोगकर्ता परिदृश्य, "पेपर" डिजाइन, त्रुटियों का विश्लेषण और प्रतियोगियों की सफल खोज। हमें विभिन्न प्लेटफार्मों पर एनीमेशन और फोंट के साथ समस्याओं को हल करने में समृद्ध अनुभव मिला, और एक तैयार आवेदन का परीक्षण करते समय उपयोगकर्ताओं के वास्तविक व्यवहार के बारे में बहुत सारे डेटा एकत्र किए।
टिप्पणियों में इसी तरह के अपने अनुभव साझा करें!