उपयोगकर्ता अनुभव डिजाइन: ग्राहकों के लिए साइट का निर्माण कैसे करें, अपने लिए नहीं

अप्रैल के अंत में, मैंने उपयोगकर्ता इंटरफ़ेस डिज़ाइन के चरणों के बारे में RIF 2012 में एक रिपोर्ट बनाई। चूंकि कोई वीडियो नहीं है, इसलिए मैं अपनी टिप्पणियों के साथ रिपोर्ट को स्लाइड के रूप में प्रस्तुत करने का प्रयास करूंगा।



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


दर्शकों में स्टॉकहोम सिंड्रोम पैदा करने की उम्मीद में, मैं हमेशा अपना परिचय देता हूं और अपने बारे में थोड़ी बात करता हूं।

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


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


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


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


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


यह सब एक लक्ष्य के साथ शुरू होता है। पहले आप तय करें कि आप क्या करना चाहते हैं, और फिर आप इसे कैसे लागू कर सकते हैं।


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


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


निर्णय लेने से डरो मत, आपके पास अपना मन बदलने और रीमेक करने का अवसर होगा। यह दृष्टिकोण की सुंदरता है: "पहले डिजाइन, फिर प्रोग्रामिंग" - त्रुटि की कीमत बहुत बड़ी नहीं है। आप हमेशा वापस आ सकते हैं और कुछ और कर सकते हैं।


आपको यह समझने की जरूरत है कि आपका लक्षित दर्शक कौन है। यहां दो शानदार गैजेट हैं: एक विंटेज पोलरॉइड कैमरा और एक आधुनिक आईफोन। इन दोनों गैजेट्स को क्या एकजुट करता है? उपयोगकर्ताओं का एक समूह है जो वास्तव में इन चीजों को पसंद करते हैं। ये हिपस्टर्स हैं! हिपस्टर्स के साथ क्या किया जा सकता है? उन्हें खुश करने की जरूरत है! ...


तो Instagram iPhone के लिए आवेदन दिखाई दिया। यह आपको स्टाइलिश फोटो लेने के लिए प्याज बनाने की अनुमति देता है। और फिर उन्हें अपने दोस्तों के साथ साझा करें। नतीजतन, हाल ही में फेसबुक ने $ 1 बिलियन में हिपस्टर्स की खुशी का मूल्यांकन किया। अच्छी कहानी है।


तो, आपने कस्टम स्क्रिप्ट के माध्यम से सोचा है। आइए एक बहुत ही सरल तरीके से देखें: मान लें कि आपको बिंदु A से बिंदु B पर जाने की आवश्यकता है ...


लेकिन वास्तविक इंटरफ़ेस में किसी कारण से सब कुछ जटिल और भ्रमित हो जाता है। इससे कैसे बचा जाए?


आपको अपनी परियोजना की सूचना वास्तुकला पर विचार करने की आवश्यकता है ...


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


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


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

इसे "ऑनलाइन स्टोर में खरीदारी करें" कार्य की धारा होने दें। सफलता से पहले, आपको 5 स्क्रीन पर जाने की जरूरत है, कुछ का चयन करें और क्लिक करें।

यह एक अच्छा विचार है कि कैसे सरल बनाने के बारे में सोचना ...


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


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


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


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


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


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


यहाँ, उदाहरण के लिए, सेलोबी निजी विज्ञापन सेवा है। यह स्मार्टफोन का उपयोग करके विज्ञापन बनाने की प्रक्रिया को सरल बनाता है। ऑपरेशन का सिद्धांत ट्विटर के समान है। इस तरह, जो लोग पहले ट्विटर का उपयोग कर चुके हैं वे आसानी से समझ सकते हैं कि सब कुछ कैसे काम करता है।


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


इंटरफ़ेस डिज़ाइन कॉपी राइटिंग है। सबसे अच्छा इंटरफेस नहीं खींचा जाता है, लेकिन लिखा जाता है। आपको लगातार सोचना होगा कि क्या लिखना है या क्या बटन को कॉल करना है। प्रत्येक पत्र मायने रखता है ...


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


कार्य का अंतिम चरण दृश्य डिजाइन है। आइए देखें विजुअल इंटरफेस डिजाइन के ट्रेंड के बारे में ...


"क्या किसी को पता है कि एक स्क्वॉमर या एक स्क्वैमरॉफ़िक डिज़ाइन का क्या मतलब है? ... मैं व्यक्तिगत रूप से नहीं जानता था।" यद्यपि हम सभी ऐसे इंटरफेस का उपयोग करते हैं।
- अब यह इंटरफेस डिजाइन में एक वर्तमान प्रवृत्ति है। हम सिर्फ वास्तविक दुनिया की वस्तुओं को लेते हैं और उन्हें स्क्रीन पर स्थानांतरित करते हैं। उदाहरण के लिए, अब यह एक आईपैड नहीं है, लेकिन एक बुकशेल्फ़ है। आपको बस एक किताब लेने और पढ़ने की ज़रूरत है।


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


और यहां टैबलेट एक सिंथेसाइज़र बन जाता है। हर कोई जो पहले इस उपकरण से निपट चुका है, यह पता लगाएगा कि क्या करना है।


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


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


- भौतिक बटन शांत और स्पष्ट हैं। लेकिन आइकनोग्राफिक अपनी क्षमता समाप्त करने लगा है। कुछ नया चाहिए।
- माइक्रोसॉफ्ट ने कुछ नया करने का फैसला किया। विचार "नियंत्रण कक्ष" की विचारधारा को त्यागना और "पत्रिका लेआउट" की भावना में इंटरफेस बनाना शुरू करना है ...


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


आधार "अंतर्राष्ट्रीय टाइपोग्राफिक शैली" या "स्विस डिजाइन शैली" था। पिछली सदी के 50 के दशक में यह पठनीयता और स्वच्छता पर केंद्रित था। अब यह एक क्लासिक डिजाइन बन गया है। लेकिन उन दिनों यह एक क्रांति थी ...


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


मेट्रो यूआई अवधारणा खुद को आइकॉनोग्राफी और वास्तविक दुनिया की वस्तुओं की नकल के साथ विरोधाभास करती है। सभी बनावट, हाइलाइट और छाया को तुरंत छोड़ दें। निर्दयी सरलीकरण।


वापस कार कंसोल पर। मुझे यकीन है कि हर कोई कह सकता है कि आप यहां क्लिक कर सकते हैं और यहां आप ट्विस्ट कर सकते हैं।


- तो स्क्रीन पर बटन हैं। आगे यह बताने की जरूरत नहीं है कि आप इस पर क्लिक कर सकते हैं।
- लेकिन मेट्रो यूआई में, इस दृष्टिकोण को खारिज कर दिया जाता है ...


यहाँ बटन सिर्फ आयत और वृत्त हैं। सैद्धांतिक रूप! मुझे यकीन है कि अनुभवहीन उपयोगकर्ताओं को इस तरह के नियंत्रण के साथ समस्या है।


विंडोज फोन और विंडोज 8 प्लेटफॉर्म हाल ही में सामने आए हैं। अब मुख्य आवश्यकता मौजूदा अनुप्रयोगों के हस्तांतरण से संबंधित है।
- यहाँ, उदाहरण के लिए, iPhone के लिए हमारा Pravo.ru आवेदन। इसे WP7 प्लेटफॉर्म पर माइग्रेट करना होगा।
"लेकिन यह कैसे करना है?" बस iPhone इंटरफ़ेस कॉपी करें - यह गलत होगा!
- हमें मेट्रो यूआई के सिद्धांतों को ध्यान में रखते हुए इंटरफ़ेस को फिर से डिज़ाइन करना होगा।


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