UX/UI डिज़ाइन: अनुसंधान से हैंडऑफ़ तक की असली प्रक्रिया

UX बनाम UI: वह अंतर जो पैसे खर्च करता है

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

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

क्यों अंतर व्यावसायिक है, शैक्षणिक नहीं

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

तो यहाँ काम करने का सूत्र है: UX यह तय करता है कि क्या कोई लक्ष्य तक पहुँचता है, UI यह तय करता है कि क्या वे वहाँ पहुँचने के रास्ते में आप पर भरोसा करते हैं। आपको दोनों की आवश्यकता है। लेकिन जब आपको पहले क्या ठीक करना है, यह चुनना हो, तो लॉजिक को ठीक करें।

डिज़ाइन क्या नहीं करता

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

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

चरण 1. अनुसंधान, लक्ष्य और प्रतियोगी समीक्षा

डिज़ाइन उस प्रश्न से शुरू होता है "इस साइट पर क्या होना चाहिए", न कि "आपको कौन सा रंग पसंद है"। जब तक इसका उत्तर नहीं दिया जाता, हर संशोधन स्वाद पर बहस की जाती है - और स्वाद एक ऐसा तर्क है जिसे कोई नहीं जीतता।

हम जो पहले स्थापित करते हैं

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

डेटा महंगा नहीं होना चाहिए। बिक्री कॉल रिकॉर्डिंग, चैट थ्रेड, ऑन-साइट खोज क्वेरी, हीटमैप, ग्राहक जो सबसे अधिक प्रश्न पूछते हैं — यह पहले से ही अनुमान लगाने के लिए पर्याप्त है। यदि एनालिटिक्स चल रहे हैं, तो देखें कि लोग कहाँ छोड़ते हैं और किस चरण पर।

प्रतिस्पर्धी समीक्षा — नकल के लिए नहीं

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

एक ह्यूरिस्टिक समीक्षा

यदि एक साइट पहले से मौजूद है, तो इसे किसी भी चीज़ को खींचने से पहले बुनियादी वेबसाइट उपयोगिता सिद्धांतों के खिलाफ चलाएँ: क्या यह स्पष्ट है कि आप कहाँ हैं; क्या सिस्टम की स्थिति दिखाई देती है; क्या किसी क्रिया को पूर्ववत किया जा सकता है; क्या त्रुटियाँ समझने योग्य हैं; क्या इंटरफ़ेस ग्राहक की भाषा बोलता है; क्या आपको स्क्रीन के बीच चीज़ों को अपने सिर में रखना पड़ता है। दो दिनों का यह प्रक्रिया एक समस्या सूची उत्पन्न करती है, जिसका आधा हिस्सा बिना किसी पुनः डिज़ाइन के ठीक किया जा सकता है।

चरण 2. पृष्ठों के बजाय उपयोगकर्ता परिदृश्य

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

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

आपको कितने परिदृश्यों की आवश्यकता है

एक सेवाओं की साइट के लिए, आमतौर पर तीन से पांच। अधिक होने पर आप बिखर जाते हैं; कम होने पर आप कुछ खो रहे हैं। एक सामान्य सेट: "इस कंपनी के बारे में कभी नहीं सुना, बस शोध कर रहा हूँ", "एक प्रतियोगी के साथ तुलना कर रहा हूँ, एक को चुनने का कारण ढूंढ रहा हूँ", "पहले से ही तय कर लिया है, जल्दी संपर्क करना चाहता हूँ", "मौजूदा ग्राहक, एक संपर्क या दस्तावेज़ की आवश्यकता है"।

विभिन्न राज्य, विभिन्न स्क्रीन

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

• खाली — फ़िल्टर ने कुछ नहीं पाया, कार्ट खाली है, अभी तक कोई आदेश नहीं हैं। व्यक्ति क्या देखता है, और वे अगला कहाँ जाते हैं?
• लोड हो रहा है — यह वह है जो स्क्रीन पर है जबकि डेटा यात्रा कर रहा है।
• त्रुटि — सर्वर डाउन है, भुगतान विफल हो गया, एक फ़ील्ड गलत है।
• ओवरफ्लो — एक तीन-लाइन का उत्पाद नाम, 40 आइटम, एक 2,000-शब्द की समीक्षा।
• सफलता — फ़ॉर्म भेजा गया है। अब क्या? "धन्यवाद" एक उत्तर नहीं है; लोग जानना चाहते हैं कि कब कोई कॉल करेगा।

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

चरण 3. सूचना आर्किटेक्चर

सूचना आर्किटेक्चर वह है जहाँ चीजें रहती हैं और उन्हें क्या कहा जाता है।यह पहले पिक्सेल के अस्तित्व से पहले आपके आधे नेविगेशन समस्याओं का समाधान करता है।

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

वे नियम जो समय बचाते हैं

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

पृष्ठ के भीतर प्राथमिकता

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

ब्लॉक क्रम भी डिज़ाइन है - और यह वह हिस्सा है जो सबसे अधिक पैसा लाता है। हमने अपने लेख में ब्लॉक अनुक्रम की तर्क को तोड़ा है लैंडिंग पृष्ठ संरचना: समान तंत्र, एकल पृष्ठ में संकुचित।

बिना मॉकअप के आर्किटेक्चर का परीक्षण

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

चरण 4. वायरफ्रेम: बिना मेकअप का कंकाल

एक वायरफ्रेम एक स्क्रीन का काले और सफेद स्कीमैटिक है: क्या क्या आता है, क्या अधिक महत्वपूर्ण है, कार्रवाई कहां है।कोई फैंसी प्रकार नहीं, कोई छायाएँ नहीं, कोई फोटोग्राफी नहीं। जानबूझकर।

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

एक वायरफ्रेम में क्या होना चाहिए

• वास्तविक शीर्षक और लेबल, न कि Lorem ipsum। डमी टेक्स्ट लंबाई और अर्थ दोनों के बारे में झूठ बोलता है।
• तत्वों की वास्तविक संख्या: यदि कैटलॉग में 12 आइटम हैं, तो तीन न बनाएं।
• पिछले चरण से हर प्रमुख राज्य।
• मुख्य स्क्रीन के मोबाइल और डेस्कटॉप संस्करण तुरंत, न कि "हम इसे बाद में अनुकूलित करेंगे"।

कितने स्क्रीन बनानी हैं

सभी नहीं। आप पृष्ठ प्रकार बनाते हैं: होम, सेवा पृष्ठ, कैटलॉग, आइटम पृष्ठ, फॉर्म, लेख, संपर्क, उपयोगिता पृष्ठ (404, धन्यवाद)। बाकी सब उसी ब्लॉकों से बनता है। यदि हर नए पृष्ठ को एक नए मॉकअप की आवश्यकता है, तो आपके पास एक प्रणाली नहीं है — आपके पास चित्रों का ढेर है।

यह बहस करने के लिए सबसे सस्ता स्थान है

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

चरण 5. UI अवधारणा: विश्वास कैसा दिखता है

एक बार संरचना पर सहमति हो जाने के बाद, दृश्य परत आती है। इसका काम सजावट नहीं है — यह संरचना को स्पष्ट बनाना और विश्वास अर्जित करना है।

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

एक UI अवधारणा किससे बनी होती है

• टाइपोग्राफी।टाइप पेयरिंग, आकार, लाइन ऊँचाई, लाइन लंबाई। यह साइट के अनुभव का 80% है, क्योंकि एक साइट ज्यादातर टेक्स्ट होती है।
• रंग।एक तटस्थ आधार, एक उच्चारण लक्षित क्रिया के लिए, त्रुटियों और सफलता के लिए कार्यात्मक रंग। उच्चारण केवल उसी पर खर्च करें जो महत्वपूर्ण है, अन्यथा यह काम करना बंद कर देता है।
• ग्रिड और ताल।हर गैप को देखने के बजाय एक स्पेसिंग स्टेप (4 या 8 का गुणांक, कहें) का उपयोग करें।
• चित्रण।आपके अपने काम और लोगों की तस्वीरें परफेक्ट स्टॉक से बेहतर हैं, क्योंकि कोई भी स्टॉक पर विश्वास नहीं करता।
• स्वर।इंटरफेस बोलता है: औपचारिक, मित्रवत, तकनीकी। यह एक निर्णय है, न कि एक दुर्घटना।

एक कॉन्सेप्ट एक स्क्रीन है, पूरे साइट नहीं

आमतौर पर आप होम पेज या एक प्रमुख सेवा पृष्ठ को दो या तीन दिशाओं में प्रस्तुत करते हैं। लक्ष्य एक भाषा पर सहमत होना है, अंतिम निर्माण पर हस्ताक्षर करना नहीं है। असली परियोजनाओं में वह भाषा कैसी दिखती है, यह देखना आसान है पोर्टफोलियो: विभिन्न क्षेत्रों को एक अलग दृश्य स्वर की आवश्यकता होती है, हालांकि उनके पीछे की प्रक्रिया समान होती है।

और आवश्यक बात: एक कॉन्सेप्ट का मूल्यांकन "क्या यह लक्ष्य की सेवा करता है" पर किया जाता है, "क्या मुझे यह पसंद है" पर नहीं। इस पर अधिक जानकारी फीडबैक अनुभाग में है।

चरण 6. डिज़ाइन प्रणाली और घटक

एक डिज़ाइन सिस्टम तैयार किए गए ईंटों का एक सेट है और उनके साथ निर्माण के लिए नियम हैं।बटन, फ़ील्ड, कार्ड, शीर्षक, स्पेसिंग, स्थिति - एक बार परिभाषित और हर जगह पुन: उपयोग किया जाता है।

बिना सिस्टम के, हर नई स्क्रीन को फिर से खींचा जाता है। छह महीने बाद साइट में सात ग्रे शेड, चार बटन आकार और तीन प्रकार के उत्पाद कार्ड होते हैं, और कोई नहीं याद करता कि क्यों। एक सिस्टम के साथ, एक नया पृष्ठ घंटों में बनता है, दिनों में नहीं, और यह पूरे का हिस्सा जैसा दिखता है।

सिस्टम में क्या है

• टोकन।रंग, प्रकार के आकार, त्रिज्याएँ, छायाएँ, स्पेसिंग स्टेप - नामित वेरिएबल के रूप में, न कि मौके पर आविष्कृत मान।
• घटक।हर स्थिति (डिफ़ॉल्ट, होवर, फोकस, दबाया गया, लोड हो रहा है, अक्षम) के साथ एक बटन, एक त्रुटि और संकेत के साथ एक इनपुट, एक कार्ड, एक मोडल, एक तालिका, पृष्ठांकन।
• संरचना नियम।कौन सा शीर्षक कब, ब्लॉकों के बीच कितना स्थान, तत्वों का ओवरफ्लो पर कैसे व्यवहार करना।
• पैटर्न।फॉर्म, फ़िल्टर, चेकआउट - घटकों से बने मानक असेंबली।

क्यों ग्राहक को परवाह करनी चाहिए, केवल डिज़ाइनर नहीं।

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

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

चरण 7. प्रोटोटाइप, डेवलपर हैंडऑफ और डिज़ाइन QA

एक प्रोटोटाइप एक क्लिक करने योग्य मॉकअप है जिसमें आप एक पूरे परिदृश्य में चल सकते हैं इससे पहले कि एक भी कोड की पंक्ति मौजूद हो।यह उस प्रश्न का उत्तर देता है जिसका एक स्थिर चित्र उत्तर नहीं दे सकता: "जब मैं इसे दबाता हूँ तो क्या होता है?"

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

हैंडऑफ में वास्तव में क्या होता है

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

एक अच्छा हैंडऑफ़ "यहाँ फ़ाइल का लिंक है" नहीं है। यह एक बैठक है जहाँ डिज़ाइनर और डेवलपर मॉकअप के माध्यम से चलते हैं और गैर-स्पष्ट भागों को ज़ोर से कहते हैं। आधे घंटे की बातचीत एक सप्ताह के संदेशों को बचाती है।

डिज़ाइन QA: निर्माण के बाद की जांच

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

मोबाइल-प्रथम और सुलभता साधारण भाषा में

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

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

मोबाइल पर क्या जांचें

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

सुलभता: चार चीजें जो आपको 80% परिणाम देती हैं

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

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

कॉपी डिज़ाइन का एक हिस्सा है

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

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

शब्द जो इंटरफेस को ठीक करते हैं

• बटन परिणाम का वर्णन करते हैं।"एक उद्धरण प्राप्त करें" "सबमिट" से बेहतर है। एक व्यक्ति को क्लिक करने के बाद क्या होता है, यह जानना चाहिए।
• शीर्षक उत्तर देते हैं, वे चिढ़ाते नहीं हैं।"चिकित्सा क्लीनिक के लिए वेबसाइटें" काम करती हैं; "हम भविष्य बनाते हैं" काम नहीं करता।
• त्रुटियाँ बताती हैं कि क्या करना है।"अमान्य प्रारूप" बुरा है। "फोन नंबर +44… के रूप में दर्ज करें" अच्छा है।
• लेबल अनुमान लगाने से बेहतर हैं।यदि किसी क्षेत्र को कुछ विशेष की आवश्यकता है, तो इसे त्रुटि से पहले कहें, बाद में नहीं।
• कम शब्द, वही अर्थ।हर अतिरिक्त वाक्य आवश्यक वाक्य के पढ़े जाने की संभावनाओं को कम करता है।

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

उपयोगी फीडबैक कैसे दें, और कितने संशोधन राउंड सामान्य हैं

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

एक उपयोगी टिप्पणी का सूत्र

समस्या के बारे में बात करें, समाधान के बारे में नहीं। आकार है: जो मैं देखता हूँ → जो मुझे चिंता देता है → जो यह जोखिम उठाता है. उदाहरण के लिए: "पहली स्क्रीन नहीं कहती कि हम राष्ट्रीय स्तर पर काम करते हैं। ग्राहक इस बारे में पहले कॉल पर पूछते हैं — मुझे डर है कि उनमें से कुछ फॉर्म तक नहीं पहुंचेंगे।" यह कुछ ऐसा है जिस पर एक डिज़ाइनर काम कर सकता है। "बटन को लाल बनाओ" एक समाप्त समाधान है, और यह शायद बटन के बारे में नहीं है।

साइन-ऑफ को तेज़ करने वाले नियम

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

सामान्यतः कितने राउंड होते हैं

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

महंगे, सामान्य गलतियाँ

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

चेकलिस्ट: विकास में जाने से पहले एक डिज़ाइन का मूल्यांकन करना

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

अर्थ

• 5 सेकंड में पहला स्क्रीन आपको बताता है: यह कौन सी कंपनी है, यह क्या पेश करती है, किसके लिए, और अगला कदम क्या है।
• प्रत्येक स्क्रीन में एक मुख्य क्रिया होती है, और यह दृश्य रूप से मुख्य होती है।
• मुख्य आपत्तियों का उत्तर दिया गया है: कीमत या कीमत की सीमा, समयसीमाएँ, गारंटी, आप कौन हैं।
• हर दावे का समर्थन किया गया है: केस स्टडी, नामों के साथ समीक्षाएँ, नंबर जिन्हें आप वास्तव में साबित कर सकते हैं।

संरचना

• ब्लॉक्स "उत्तर → विवरण → प्रमाण → कार्रवाई" का पालन करते हैं।
• नेविगेशन: 5–7 आइटम, ग्राहक के शब्दों में लेबल, 3 क्लिक के भीतर कुछ भी महत्वपूर्ण।
• एक ही चीज़ के बारे में दो पृष्ठ नहीं।

पूर्णता

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

सिस्टम और पहुंच

• बटन, फ़ील्ड और कार्ड एक सेट से आते हैं बजाय कि प्रत्येक स्क्रीन के लिए फिर से बनाया जाए।
• स्पेसिंग एकल चरण का पालन करती है; आवश्यकतानुसार रंगों की संख्या ठीक है।
• पाठ का विपरीत पर्याप्त है, ध्यान स्पष्ट है, फ़ॉर्म कीबोर्ड द्वारा पूरा किया जा सकता है।
• छवियों में वैकल्पिक विवरण हैं, फ़ील्ड में लेबल हैं, त्रुटियों में मानव पाठ है।

निर्माण की तत्परता

• एक डेवलपर ने साइन-ऑफ से पहले मॉकअप की समीक्षा की और पुष्टि की कि यह समय पर बनाया जा सकता है।
• व्यवहार का दस्तावेजीकरण किया गया है: क्लिक, उद्घाटन, एनिमेशन, फ़ॉर्म व्यवहार।
• यह स्पष्ट है कि प्रशासन में क्या संपादित किया जा सकता है और क्या हार्ड-कोडेड है।
• किसी को निर्माण के बाद डिज़ाइन QA स्वीकार करने के लिए नामित किया गया है।

यदि हर आइटम हाँ है, तो इसे आत्मविश्वास के साथ सौंप दें। यदि तीन से अधिक नहीं हैं, तो आप तैयार नहीं हैं - और निर्माण उन छिद्रों को पैच नहीं करेगा, यह उन्हें कंक्रीट में सेट कर देगा। क्या आप अपनी वर्तमान साइट या उन मॉकअप्स पर एक बाहरी नज़र चाहते हैं जो किसी ने आपके लिए बनाए हैं?संपर्क करें — हम इसे इसी सूची के खिलाफ चलाएंगे और आपको ईमानदारी से बताएंगे कि पहले क्या ठीक करना है।

अक्सर पूछे जाने वाले प्रश्न