बड़ा असर डालने वाली छोटी UI डिजाइन टिप्स

 (adhamdannaway.com)
20 पॉइंट द्वारा GN⁺ 8 시간 전 | अभी कोई टिप्पणी नहीं है. | WhatsApp पर शेयर करें
  • UI डिजाइन को कलात्मक संवेदना से ज्यादा लगातार लागू होने वाले तार्किक नियमों के आधार पर placement/spacing/typeface/color के फैसले लेकर तेज़ और अनुमानित तरीके से बेहतर किया जा सकता है
  • संबंधित elements को whitespace से group करना, समान function के लिए समान form इस्तेमाल करना, और size/color/contrast/position से स्पष्ट visual hierarchy बनाना बुनियादी सिद्धांत हैं
  • सजावटी colors और गैर-ज़रूरी borders कम करें, और colors का इस्तेमाल links और buttons जैसी interact करने योग्य चीज़ों को बताने के लिए चुनिंदा रूप से करना चाहिए
  • WCAG 2.1 AA मानदंडों के अनुसार UI elements में 3:1, और छोटे text में 4.5:1 या उससे अधिक contrast ratio होना चाहिए, और color के अलावा underline या shape जैसे संकेत भी देने चाहिए
  • एक sans-serif typeface और regular/bold weights के इर्द-गिर्द layout रखें; बड़ी x-height/sentence case/left alignment/1.5 या उससे अधिक line height लागू करने से readability और consistency बेहतर होती है

तार्किक नियमों से UI बेहतर करने का तरीका

  • UI डिजाइन में layout/spacing/typography/color के साथ usability/accessibility/psychology भी साथ में सोचनी पड़ती है, इसलिए choices आसानी से जटिल हो सकती हैं
  • intuition से elements को इधर-उधर कर के अच्छा दिखने वाली स्थिति खोजने के बजाय, reuse किए जा सकने वाले rules system को लागू करने से तेज़ी से आधारयुक्त decisions लिए जा सकते हैं
  • short-term rental accommodation detail screen को example बनाकर, जटिल और इस्तेमाल में कठिन शुरुआती screen को step by step ठीक किया गया
  • लक्ष्य brand decoration जोड़ना नहीं, बल्कि पहले intuitiveness/accessibility/basic visual polish सुनिश्चित करना है

1. whitespace से संबंधित elements को group करें

  • जानकारी को छोटे-छोटे संबंधित groups में बांटने से screen structure को जल्दी समझना और याद रखना आसान होता है
  • elements को group करने के चार तरीके हैं
    • उन्हें एक ही container में रखना
    • संबंधित elements के बीच spacing कम करना
    • उन्हें मिलते-जुलते shape में दिखाना
    • उन्हें लगातार line के साथ align करना
  • container सबसे मजबूत grouping cue है, लेकिन screen पर गैर-ज़रूरी decoration बढ़ा सकता है
  • whitespace और alignment ज्यादा subtle होते हुए भी screen को सरल बनाए रखने का तरीका हैं
  • example में content के बीच spacing बढ़ाकर अलग-अलग information groups को स्पष्ट रूप से अलग किया गया

2. consistent form और behavior बनाए रखें

  • मिलते-जुलते elements को product के अंदर ही नहीं, बल्कि familiar दूसरे products की तुलना में भी समान दिखना और काम करना चाहिए
  • predictable behavior से users को हर बार इस्तेमाल का तरीका दोबारा सीखने की जरूरत घटती है और errors की संभावना कम होती है
  • example के icons में filled form और outline form मिले हुए थे, जिससे filled icon को selected state समझने की गलतफहमी हो सकती थी
    • सभी icons को rounded corners और 2pt outline से एक जैसा कर visual weight मिलाया गया
    • सिर्फ icons से अर्थ समझने में कठिनाई वाले users और screen reader users के लिए text labels जोड़े गए
  • एक जैसे shape वाले elements के उसी तरह काम करने की उम्मीद की जाती है, इसलिए function अलग हो तो visual treatment भी अलग होना चाहिए
  • example में non-interactive icon container Book now button जैसा दिख रहा था, इसलिए blue color और button style हटाया गया

3. स्पष्ट visual hierarchy बनाएं

  • सारी जानकारी समान महत्व की नहीं होती, इसलिए जितना महत्वपूर्ण element हो, उसे उतना ज्यादा prominent दिखाना चाहिए
  • size/color/contrast/spacing/position/depth को adjust करने से users screen को जल्दी scan कर के अपनी रुचि का area खोज सकते हैं
  • Squint Test वह तरीका है जिसमें आंखें थोड़ी सिकोड़कर या screen को blur करके देखा जाता है कि important elements और screen का purpose फिर भी समझ आता है या नहीं
  • शुरुआती screen में कई elements लगभग समान strength से compete कर रहे थे, लेकिन bottom-left का main action button लगभग दिख ही नहीं रहा था
  • main button पर high-contrast background color और bold font लागू कर उसे screen का सबसे prominent element बनाया गया
  • body description अपने महत्व की तुलना में बहुत ज्यादा emphasized थी, इसलिए बाद में color और typography adjust कर hierarchy कम की गई

4. गैर-ज़रूरी decoration हटाएं

  • जो lines/colors/backgrounds/animations meaning convey नहीं करते या elements को group नहीं करते, वे ध्यान भटका सकते हैं और cognitive load बढ़ा सकते हैं
  • example image के आसपास की white space और border जानकारी देने के लिए जरूरी नहीं थे, इसलिए हटाए गए
  • decorative elements घटाने से screen सरल होती है और core information व actions पर focus करना आसान होता है

5. color को स्पष्ट role दें

  • color को decoration से ज्यादा meaning convey करने के लिए सीमित रूप से इस्तेमाल करना सुरक्षित है
  • black-and-white state से शुरू कर के सिर्फ जरूरत की जगह color जोड़ने वाला approach प्रभावी है
  • brand color को text links और buttons जैसे interactive elements पर लागू करने से क्या click किया जा सकता है, यह users को सिखाना आसान होता है
  • cards जैसे elements, जिनका form खुद interactivity दिखाता है, उनमें जरूरी नहीं कि color जोड़ा ही जाए
  • example में blue title और star rating non-interactive elements थे, फिर भी clickable जैसे दिख रहे थे, इसलिए color हटाया गया
  • नतीजे में interactive elements और सामान्य information के बीच distinction ज्यादा स्पष्ट हो गया

6. UI elements पर 3:1 या उससे अधिक contrast ratio लागू करें

  • contrast ratio दो colors की perceived brightness के difference को 1:1 से 21:1 तक के ratio में व्यक्त करता है
  • WCAG 2.1 AA मानदंडों में form fields/icons/buttons जैसे UI elements के लिए कम से कम 3:1 contrast ratio जरूरी है
  • example में photo के ऊपर arrow background image के अनुसार ठीक से न दिख सकता था
    • gray icon और opaque white background लागू कर photo से स्वतंत्र contrast ratio सुनिश्चित किया गया
    • background container जोड़ने से press करने योग्य area भी बड़ा और स्पष्ट हो गया
  • शुरुआती main button में भी background के साथ contrast कम था, जिससे low-vision users को button shape अलग करना कठिन हो सकता था
  • button का contrast ratio 3:1 से ऊपर बढ़ाकर accessibility और visual hierarchy दोनों सुधारे गए
  • contrast ratio को WebAIM Contrast Checker या Contrast Figma plugin से measure किया जा सकता है

7. text पर पर्याप्त contrast ratio लागू करें

  • WCAG 2.1 AA मानदंड text size और weight के हिसाब से अलग contrast ratio मांगते हैं
    • 18px या उससे छोटे text के लिए कम से कम 4.5:1 जरूरी है
    • 18px से बड़े bold text या 24px से बड़े regular text के लिए कम से कम 3:1 जरूरी है
  • photo count display में background के साथ contrast कम था, इसलिए gray container की opacity बढ़ाई गई और text shadow जोड़ा गया
  • location text का color बहुत हल्का था और font भी पतला था, इसलिए उसे darker gray में बदला गया
  • contrast ratio criteria पूरा होने पर भी बहुत पतला font पढ़ना कठिन हो सकता है, इसलिए weight को भी अलग से adjust करना चाहिए

8. state को सिर्फ color से अलग न करें

  • color vision deficiency वाले users के लिए कुछ color combinations अलग करना मुश्किल हो सकता है या वे color को पहचान ही नहीं सकते
  • meaning/state/interactivity को सिर्फ color से convey नहीं करना चाहिए
  • example का Reviews link blue color हटाने पर सामान्य text से अलग नहीं दिखता था
  • underline जोड़कर बदला गया ताकि color न दिखने पर भी link होना पहचाना जा सके

9. एक sans-serif typeface इस्तेमाल करें

  • typeface Helvetica जैसे common style वाले fonts का set है, और bold/regular जैसी size और weight variations individual fonts होती हैं
  • interfaces में आम तौर पर readable, neutral और simple एक sans-serif typeface इस्तेमाल करना सुरक्षित है
  • example title का decorative serif typeface पढ़ने में कठिन था और accommodation photos या service mood से मेल नहीं खा सकता था
  • body जैसे sans-serif typeface से unify कर usability और visual consistency बढ़ाई गई

10. बड़ी lowercase height वाला typeface चुनें

  • lowercase की height बताने वाला x-height बड़ा और letters के बीच पर्याप्त spacing वाला typeface छोटे size में भी पढ़ने में आसान होता है
  • example का League Spartan अपेक्षाकृत low x-height वाला था
  • ज्यादा बड़ी x-height वाले Inter में बदलकर छोटे body text की readability बढ़ाई गई

11. uppercase usage सीमित करें

  • लोग individual letters से ज्यादा पूरे word की shape पहचानकर जल्दी पढ़ते हैं
  • सिर्फ uppercase में लिखे words सभी मिलते-जुलते rectangular shape बन जाते हैं, जिससे letters को एक-एक कर जांचना पड़ता है और पढ़ना कठिन हो जाता है
  • location information को all uppercase से sentence case में बदलकर सिर्फ first word और proper nouns को uppercase दिखाया गया
  • all uppercase का इस्तेमाल केवल उन छोटे expressions तक सीमित रखना चाहिए जहां emphasis सचमुच जरूरी हो

12. सिर्फ regular और bold weights इस्तेमाल करें

  • कोई typeface कई weights देता हो, तब भी सभी इस्तेमाल करने से screen पर visual noise बढ़ता है और consistent management मुश्किल हो जाता है
  • design system को regular और bold के इर्द-गिर्द सरल रखना बेहतर है
    • headings और emphasized text के लिए bold इस्तेमाल करें
    • छोटे सामान्य text के लिए regular इस्तेमाल करें
    • अगर bold बहुत heavy लगे तो semi-bold से replace किया जा सकता है
    • बहुत thin या बहुत thick weights को छोटे text में नहीं, सिर्फ बड़े headings में सीमित रूप से इस्तेमाल करें
  • example का location text light weight में था, इसलिए contrast बढ़ाने के बाद भी पढ़ना कठिन हो सकता था
  • regular में बदलकर readability बढ़ाई गई और इस्तेमाल होने वाले weights की variety घटाई गई

13. pure black text से बचें

  • pure black white background के साथ बहुत high contrast बनाता है, जिससे लंबे समय तक पढ़ने पर आंखों की थकान बढ़ सकती है
  • white background पर pure black की जगह dark gray इस्तेमाल करना सुरक्षित है
  • example के कई black elements को dark gray में बदलकर readability adjust की गई
  • importance की तुलना में बहुत ज्यादा prominent दिख रहे accommodation description पर lighter gray लागू कर visual hierarchy कम की गई

14. लंबे text को left-align करें

  • English left-to-right पढ़ी जाती है और screen को F-shape में scan करने की tendency होती है, इसलिए left alignment सबसे stable है
  • headings या short sentences को center-align करने पर भी जल्दी पढ़ा जा सकता है
  • लंबे body text को center-align करने से हर line का start position बदलता है, जिससे next line खोजना कठिन हो जाता है
  • justified और center alignment खासकर cognitive disabilities वाले users के लिए लंबे text को पढ़ना कठिन बना सकते हैं
  • example के accommodation description को center alignment से left alignment में बदलकर ऊपर के text के साथ consistency भी सुनिश्चित की गई

15. body line height को 1.5 या उससे अधिक set करें

  • line height दो text lines के बीच vertical distance है
  • सही line spacing एक ही line को दोबारा पढ़ने की जरूरत घटाती है और लंबे text को आराम से पढ़ने में मदद करती है
  • body text की line height कम से कम 1.5(150%) होनी चाहिए, और आम तौर पर 1.5~2 range उपयुक्त होती है
  • example में line height को 1(100%) से 1.5(150%) तक बढ़ाकर readability बेहतर की गई

बदलावों का परिणाम और लागू करने के सिद्धांत

  • 16 rules को क्रम से लागू करते हुए complex screen को ज्यादा simple, readable और accessible form में बदला गया
  • brand personality के अनुरूप decoration बाद में जोड़ी जा सकती है, लेकिन पहले information structure/interaction distinction/contrast ratio/typography जैसी basics को ठीक करना चाहिए
  • subjective taste के बजाय objective rules इस्तेमाल करने से intuitive और accessible UI को तेज़ी से design किया जा सकता है
  • बार-बार लागू किए गए rules धीरे-धीरे design workflow की natural foundation बन जाते हैं, और उसी के ऊपर नए expression styles और decorations experiment किए जा सकते हैं

संबंधित पढ़ाई

अभी कोई टिप्पणी नहीं है.

अभी कोई टिप्पणी नहीं है.