आयरनहैक यूएक्स/यूआई डिजाइन बूटकैंप की तीसरी परियोजना

टीम

और इस बार टीम, ठीक है, कोई टीम नहीं है!
यह एक सोलो प्रोजेक्ट है।

परियोजना के बारे में

हमारे यूआई कौशल में सुधार करें। इसके लिए हमें एक अपेक्षाकृत ज्ञात मोबाइल एप्लिकेशन को चुनना पड़ा। फिर देखना है कि हम क्या सुधार कर सकते हैं।

इसलिए मैंने डिस्कॉर्ड एप्लिकेशन के मोबाइल संस्करण पर काम करना चुना।

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

हमें काम करने के लिए 3 और 7 पृष्ठों के बीच चयन करना था। इसलिए मैंने ऐप के माध्यम से जाना और अपनी खुद की कुंठाओं के आधार पर अपनी पसंद बनाई, लेकिन इन पेजों के तत्वों के आधार पर काम करने के लिए अलग-अलग यूआई पहलुओं पर काम किया (मेनू, प्रोफाइल, कार्ड ...)

और विशेष रूप से यह बहुत बहुत लंबा मेनू...

दृश्य प्रतियोगी विश्लेषण

चूंकि डिस्कोर्ड मूल रूप से गेमर्स के लिए एक ऐप है, इसलिए मैं यह देखने गया कि प्रतिस्पर्धी क्या पेशकश कर रहे थे जो समान और / या अलग थे।

रंग पट्टियाँ

यहां इन तीन प्रतिस्पर्धियों द्वारा उपयोग किए जाने वाले रंग पटल हैं

और यहाँ डिस्कॉर्ड मोबाइल ऐप से एक है

अनुमानी विश्लेषण

इन छोटे शोधों के बाद, यह अनुमानी विश्लेषण के अति जंगली नाम की वापसी है।

उपयोगकर्ता इंटरफ़ेस डिज़ाइन के लिए दस सबसे लोकप्रिय प्रयोज्य अनुमानों का अनुसरण करते हुए और मैंने एक तालिका में उन अनुमानी त्रुटियों की पहचान की है और नोट किया है जो मुझे मिलीं।

द्वितीय शोध

मैं ब्रांड के बारे में और जानना चाहता था, इसलिए मैं अपने सबसे अच्छे दोस्त डॉ. गूगल से कुछ सवाल पूछने गया।

और मैं देख सकता था कि डिस्कोर्ड ने एक डिजाइन प्रणाली विकसित की थी जिसका अध्ययन करने के लिए मैं उत्सुक था।

आप इसे यहाँ पृष्ठ के तल पर पा सकते हैं।

पहली बात जिसने मुझे मारा वह यह है कि डिज़ाइन सिस्टम का रंग पैलेट उनके मोबाइल ऐप में इस्तेमाल होने वाले रंग से बिल्कुल अलग है ...

मुझे क्या करने का मन है

डिजाइन सिस्टम के साथ एप्लिकेशन को फिर से कनेक्ट करें
सभी एक्सेसिबिलिटी त्रुटियों को ठीक करें
इस बहुत बहुत लंबे मेनू को सरल और पुनर्व्यवस्थित करें ...
समावेशन जोड़ें

डिज़ाइन सिस्टम के साथ पुन: कनेक्ट करें

इसके लिए, मैंने बस दस्तावेज़ में मौजूद रंग पैलेट और फ़ॉन्ट लिया।

टेक्स्ट के लिए
व्हिटनी ब्रांड के लिए जिंटो नोर्ड

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

पहुंच संबंधी सभी त्रुटियों को ठीक करें

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

इस बहुत लंबे मेनू को सरल और पुनर्व्यवस्थित करें…

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

मैंने उपनाम के लिए इस लेआउट के साथ प्रोफाइल पेज का एक हिस्सा फिर से काम करना चुना, जो मेरे मानसिक मॉडल के साथ इसे संशोधित करने के लिए क्लिक करना चाहता था (जो स्पष्ट रूप से मामला नहीं था ...)

समावेशन जोड़ें

इस लक्ष्य के लिए, मुझे यह स्वीकार करना होगा कि मुझे नहीं पता था कि कैसे या क्या करना है, यह विषय इतना बड़ा है।

इसलिए मेरे पास डिफॉल्ट थीम के रूप में डिस्कॉर्ड के आधिकारिक "ब्लरपल" के साथ अलग-अलग कलर थीम जोड़ने का विचार था, फिर एक गुलाबी थीम और अधिक तटस्थ रंगों के साथ दो थीम।

और मैंने एक अधिक तटस्थ आइकन के लिए एक रॉकेट आइकन (बहुत मर्दाना) को भी संशोधित किया और इसके उद्देश्य के लिए अधिक उपयुक्त।

गतिविधियों का ओवरले

मैंने कार्ड के लेआउट को संशोधित करके इसे और अधिक पठनीय और हवादार बनाने के लिए गेम सेक्शन पर भी काम किया।

पहले और बाद का अवलोकन

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

पहला लिंक

दूसरा लिंक

मैंने इस परियोजना से क्या सीखा?

मेरे पास प्रोजेक्ट पर बहुत अच्छा समय था, मुझे वास्तव में यूआई में गोता लगाने और फिग्मा के बारे में अधिक जानने में मज़ा आया।

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

यदि आपके पास कोई सुझाव है कि मैं क्या बेहतर कर सकता था या मेरे द्वारा की गई किसी भी गलती को इंगित करने के लिए बेझिझक एक टिप्पणी छोड़ दें।
पढ़ने के लिए धन्यवाद।