Kin Wallet User Interface को डिज़ाइन करना

प्रोजेक्ट आवश्यकताएँ

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

इस उत्पाद के पिछले पुनरावृत्ति के दौरान (टोकन वितरण कार्यक्रम में भाग लेने वाले उपयोगकर्ताओं के लिए उपलब्ध कराया गया संस्करण), यह निर्णय लिया गया था कि वॉलेट में किन ब्रांड का लुक और फील होगा।

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

इस कारण से, हमें इस बात का अहसास हुआ कि इस संस्करण को यथासंभव दुबला रखना महत्वपूर्ण होगा।

नियोजन उपयोगकर्ता IA संरचना की यात्रा करता है

ज्ञानप्राप्ति

यूजर्स को @KikTeam बॉट के जरिए वॉलेट में पेश किया जाएगा। यह हमें Kik उपयोगकर्ताओं को इस नए अनुभव से परिचित कराने के लिए - चैटिंग - से परिचित होने पर टैप करने की अनुमति देता है।

वॉलेट सूचना वास्तुकला (IA) - विभिन्न संरचनाओं की जांच

हमने इस परियोजना के दो पुनरावृत्तियों के दौरान दो संभावित IA संरचनाओं को देखा।

  1. सुविधाओं का एक मजबूत सेट जिसमें लेन-देन इतिहास और परिजनों को कमाने का एक बड़ा हिस्सा शामिल है।
  2. एक लीनर सेट जिसमें केवल बैलेंस और ऑप्शन / अर्न ऑप्शन शामिल हैं।

पहला पुनरावृत्ति

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

दो नए पृष्ठों (कमाई और लेन-देन के इतिहास) के लिए, हमने दो पारंपरिक डिज़ाइन पैटर्न देखे:

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

हमने सूची लेआउट और बड़े कार्ड का उपयोग करके भी पता लगाया:

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

दूसरा पुनरावृति

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

बटुए का यह संस्करण सरल होगा, केवल एक पृष्ठ और लेआउट के साथ, हेडर के साथ, और टैब के साथ दो प्रकार की सूचनाओं के बीच अंतर करने के लिए:

  1. परिजन संतुलन और उपयोगकर्ता जानकारी।
  2. दो तरफा अर्थव्यवस्था की पेशकश - कमाने और खर्च करने के अवसर।

इस संरचना के उपयोग से हमें पदानुक्रम के दो स्तर बनाने की अनुमति मिली।

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

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

यूआई डिजाइन

देखो और महसूस करो

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

किन शैली गाइड से: हीरो और स्पॉट चित्रण, लोगो का उपयोग, रंग और टाइपोग्राफीवॉलेट यूआई

एनिमेशन और स्क्रीन संक्रमण

हमने दो प्रकार के एनीमेशन का उपयोग किया

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

संक्रमण

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

लोगो से तत्वों का उपयोग करके (गोल आकार से बने गोले), हमने अपनी गति और दिशा में आगे बढ़ने वाले व्यक्तियों के लिए एक रूपक बनाया लेकिन फिर भी एक साथ आ रहे हैं।

सूक्ष्म बातचीत

हमने माइक्रो-इंटरैक्शन को न्यूनतम रखने की कोशिश की और केवल उन्हें उपयोगकर्ता क्रियाओं के फीडबैक के रूप में उपयोग किया।

किनारे के मामले

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

आगे क्या होगा

उपयोगकर्ता प्रतिक्रिया प्राप्त करना!

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