UI और UX क्या हैं?
इंटरफ़ेस इंसान और मशीन के मिलने की जगह है। फ़ोन में स्क्रीन, लिफ़्ट में बटन-पैनल।
- UI (यूज़र इंटरफ़ेस): जो दिखे और छुआ जाए: बटन, आइकन, मेनू, शब्द, रंग, लेआउट।
- UX (यूज़र एक्सपीरियंस): इस्तेमाल का पूरा अनुभव: चीज़ें मिलती हैं? जल्दी होता है? भरोसा लगता है या उलझन?
सुंदर UI होकर भी UX ख़राब हो सकता है, अगर काम में बहुत समय लगे। अच्छा डिज़ाइनर दोनों का ध्यान रखता है।
यूज़र कौन है?
डिज़ाइनर पहले असली यूज़र को समझते हैं: उम्र, कौशल, भाषा, फ़ोन और लक्ष्य। पर्सोना (persona) एक आम यूज़र का छोटा काल्पनिक परिचय है, जैसे "मीना, 62 साल, फ़ोन ज़्यादातर वीडियो कॉल और भुगतान के लिए।"
अच्छी स्क्रीन के सिद्धांत
- क्रम (hierarchy): सबसे ज़रूरी चीज़ सबसे बड़ी, मोटी या ऊपर।
- लेआउट और ग्रिड: चीज़ें सीध में; जुड़ी चीज़ें पास-पास; खाली जगह छोड़ो।
- टैप का आकार: बटन कम से कम लगभग 9 mm (48 px)।
- अँगूठे का क्षेत्र (thumb zone): मुख्य बटन नीचे बीच में।
- कंट्रास्ट और रंग: हल्के पर गहरा; सिर्फ़ रंग से अर्थ मत बताओ, शब्द या आइकन भी दो।
- एकरूपता (consistency): एक जैसा बटन हर जगह एक जैसा दिखे और काम करे।
- जवाब (feedback): टैप के बाद कुछ दिखाओ: टिक, आवाज़, लोडिंग पट्टी।
- माफ़ी (forgiveness): ग़लती वापस लेने (undo) दो, और न लौटने वाले काम से पहले पूछो।
यूज़र फ़्लो, वायरफ़्रेम और प्रोटोटाइप
यूज़र फ़्लो एक काम पूरा करने के लिए स्क्रीनों की कड़ी है, जैसे: ऐप खोलो → चीज़ चुनो → भुगतान → हो गया। कदम और टैप गिनकर पता चलता है कि कहाँ घटाना है।
- वायरफ़्रेम (wireframe): स्क्रीन का सादा ख़ाका, शीर्षक, चित्र, पाठ और बटन के लिए डिब्बे। रंग नहीं, सिर्फ़ जगह।
- मॉक-अप (mock-up): रंग, फ़ॉन्ट और आइकन के साथ तैयार दिखने वाला चित्र।
- प्रोटोटाइप (prototype): क्लिक होने वाला नमूना (कागज़ या डिज़ाइन टूल), जिससे कोड से पहले फ़्लो परखा जाए।
घर पर करो
"एक कप चाय मँगाओ" के लिए कागज़ पर 4 फ़ोन-स्क्रीन बनाओ। घर के किसी सदस्य से उँगली से "टैप" करवाओ और तुम कागज़ बदलते जाओ। जहाँ वे रुकें, वह स्क्रीन दोबारा बनाओ।
परखना और सबके लिए डिज़ाइन
यूज़र टेस्टिंग: असली लोगों को काम दो, चुपचाप देखो, कहाँ अटके लिखो, फिर सुधारो। पाँच यूज़र अक्सर ज़्यादातर बड़ी दिक़्क़तें दिखा देते हैं।
सुलभता (accessibility) यानी हर कोई इस्तेमाल कर सके, कमज़ोर नज़र, रंग-अंधता, काँपते हाथ या स्क्रीन-रीडर वाले भी:
- बड़ा हो सकने वाला, ऊँचे कंट्रास्ट वाला पाठ।
- बड़े बटन, बीच में जगह।
- आइकन और चित्रों के नाम, ताकि स्क्रीन-रीडर बोल सके।
- सरल शब्द और यूज़र की अपनी भाषा।
अच्छा UX ईमानदार भी होता है: ऐसी चालें नहीं जो ग़लती से ख़रीदवाएँ या डेटा ले लें ("डार्क पैटर्न")।
मुख्य सूत्र और परिभाषाएँ
- UI = जो दिखे और छुआ जाए; UX = पूरा काम कैसा लगे
- बटन का न्यूनतम आकार ≈ 9 mm ≈ 48 px
- फ़्लो में टैप = स्क्रीनों की संख्या − 1
- क्रम: बड़ा, मोटा, ऊपर = पहले दिखे
- वायरफ़्रेम → मॉक-अप → प्रोटोटाइप → यूज़र टेस्ट → सुधार (दोहराओ)
- पर्सोना = आम यूज़र का छोटा परिचय
हल किए गए उदाहरण
1. फ़्लो की स्क्रीन: होम, खोज, सामान, कार्ट, पता, भुगतान, हो गया। कितने टैप लगेंगे?
7 स्क्रीन, तो 7 − 1 = 6 टैप। पहली बार के बाद पता याद रख लें तो एक स्क्रीन और एक टैप घट सकता है।
2. बटन स्क्रीन पर 5 mm चौड़ा है। ठीक है? क्या बदलोगे?
नहीं, यह लगभग 9 mm से छोटा है। इसे कम से कम 9 mm (48 px) चौड़ा-ऊँचा करो और पास के बटनों से जगह छोड़ो।
3. फ़ॉर्म ग़लती को सिर्फ़ डिब्बा लाल करके दिखाता है। समस्या क्या है, हल क्या?
रंग-अंध लोग लाल रंग शायद न पहचानें। डिब्बे के पास शब्दों में संदेश ("10 अंकों का फ़ोन नंबर लिखें") और एक आइकन भी दो।
4. बुज़ुर्गों के ऐप में ऊपर कोने में छोटा स्लेटी "आगे" लिंक है। तीन सुधार बताओ।
इसे बड़ा बटन (≥ 9 mm) बनाओ, नीचे अँगूठे के क्षेत्र में रखो, और ऊँचा कंट्रास्ट दो (गहरा बटन, सफ़ेद अक्षर) व साफ़ शब्द "आगे बढ़ें"।
आम गलतियाँ
- UI और UX को एक ही समझना। सुंदर स्क्रीन भी इस्तेमाल में कठिन हो सकती है।
- बटन बहुत छोटे या बहुत पास-पास रखना।
- सिर्फ़ रंग (लाल/हरा) से अर्थ बताना।
- असली यूज़र से परखने की जगह अपने हिसाब से डिज़ाइन करना।