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

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

इंटरफ़ेस पर मेरे काम की शुरुआत तक, ए 1 पे पहले से ही अपनी ताकत के साथ इंटरनेट भुगतान स्वीकार करने के लिए एक कार्य प्रणाली थी: उच्च तकनीकी क्षमताओं, धोखाधड़ी संरक्षण, भागीदारों और ग्राहकों के लिए एक सहायता सेवा, सुव्यवस्थित कार्य प्रक्रियाएं, आदि। हालाँकि, सिस्टम में उपयोगकर्ता मित्रता की भारी कमी थी।

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

भुगतान प्रणाली के उपयोगकर्ताओं को तीन बड़े समूहों में विभाजित किया जा सकता है:

• व्यापारी / भागीदार - वेबसाइट स्वामी
• खरीदार - उपयोगकर्ता विक्रेता की साइटों पर खरीदारी करते हैं
• कंपनी के कर्मचारी

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

1. अनुसंधान: सिस्टम के साथ बातचीत करते समय उपयोगकर्ताओं के लक्ष्यों, उद्देश्यों और जरूरतों का अध्ययन करना।
2. ऑडिट: मौजूदा इंटरफ़ेस समस्याओं को पहचानें और ठीक करें। UI को मानकीकृत करने के लिए प्रयोज्यता दिशानिर्देश बनाएं।
3. डिज़ाइन: पहले दो चरणों के परिणामों के आधार पर, सिस्टम के नए संस्करण के लिए इंटरफ़ेस डिज़ाइन करें।
4. परीक्षण: एक नए इंटरफ़ेस की शुरूआत के बाद KPI को मापें, उपयोगकर्ताओं से प्रतिक्रिया प्राप्त करें।
5. काइज़ेन (निरंतर सुधार): निरंतर छोटी प्रणाली में सुधार।

अध्ययन

एक परियोजना पर काम के सक्रिय चरण में, अनुसंधान का समय बहुत सीमित है। इस मामले में, गहराई से साक्षात्कार या तुलनात्मक प्रयोज्य परीक्षण की लंबी श्रृंखला उपयुक्त नहीं है।

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

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

इससे हमें परिदृश्यों को परिभाषित करने की अनुमति मिली और वर्तमान कार्यक्षमता और सामग्री उपयोगकर्ताओं और KPI के विभिन्न उपसमूहों की आवश्यकताओं को पूरा करती है, जिसके अनुसार आप परिणामों को ट्रैक कर सकते हैं।

वेब विश्लेषिकी

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

समर्थन टिकट

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

फोरम, सोशल नेटवर्क और ब्लॉग

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

पूछताछ

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

1. A1Pay (संकेतक, रिपोर्ट, आदि) में कौन सी जानकारी आप जांचते हैं और सबसे महत्वपूर्ण मानते हैं?
2. आप इसे कितनी बार जांचते हैं?
3. क्या आपके पास पर्याप्त जानकारी है जो आप प्राप्त करते हैं? क्या कोई संकेतक हैं जो आपको खुद की गणना करना है?
4. क्या आपको A1Pay सिस्टम में कोई कठिनाई है? कृपया हमें इसके बारे में अधिक बताएं।

प्रश्नावली में खुले प्रश्न शामिल थे, जिससे उच्च-गुणवत्ता की जानकारी प्राप्त की जा सकती थी।

आडिट

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



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

संचालन की पुष्टि

महत्वपूर्ण संचालन जहां डेटा को पुनर्प्राप्त नहीं किया जा सकता है (उदा। विलोपन) में पुष्टि की कमी है। निम्नलिखित नियम तैयार किया गया था:



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

संदर्भ प्रणाली में मदद करें

तकनीकी सहायता सेवा की अपील को देखते हुए, कुछ शर्तों के अर्थ, प्रणाली या शर्तों के सिद्धांतों ने सवाल उठाए।



इसे टेम्पलेट के दाईं ओर एक संदर्भ सहायता आइकन रखने का प्रस्ताव दिया गया था, जो ज्ञानकोष में वर्तमान स्क्रीन (सेवा, संचालन, आदि) का वर्णन करता है। मदद एक नई विंडो में खुलती है।

UI के मानकीकरण से सिस्टम में अपेक्षित सुधार और नई कार्यक्षमता का निर्माण होता है।

प्रोटोटाइप

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



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



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

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

यात्रा के आंकड़ों और अध्ययन डेटा के आधार पर नेविगेशन तत्वों का आदेश दिया गया था। सबसे लगातार संचालन और मॉड्यूल ऊपर और बाईं ओर स्थित हैं।

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

डैशबोर्ड डिज़ाइन के बारे में, आप स्टीफन Few की उत्कृष्ट पुस्तक , सूचना डैशबोर्ड डिज़ाइन: डेटा का प्रभावी दृश्य संचार पढ़ सकते हैं, हारून हरस्मैन की प्रस्तुति देख सकते हैं या डैशबोर्ड जासूस वेबसाइट पर उदाहरण देख सकते हैं।

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

डिज़ाइन

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



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



इस स्तर पर, डिजाइनर ने एक लोगो भी चित्रित किया।

समाधान सत्यापन और अगले चरण

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



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

प्रत्येक स्प्रिंट (हम SCRUM पर काम करते हैं) में सुधार और बातचीत में सुधार किया जाता है।

निष्कर्ष

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

एक वेब सेवा या उत्पाद के भीतर एक यूएक्स विशेषज्ञ का काम कई पुनरावृत्तियों के साथ यूसीडी पद्धति के अनुसार संभव है।

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