- उपयोगकर्ता को तुरंत समझ आने वाले design idioms सीखने का बोझ कम करते हैं और एकसमान interaction संभव बनाते हैं
- अतीत के desktop software युग में operating system और guidelines की वजह से menu structure और shortcuts जैसे interfaces एकरूप थे
- इसके विपरीत browser-based software युग में frameworks और custom implementations के फैलाव से interface की consistency टूट गई
- Apple और Substack सीमित customization और एकीकृत design system के साथ आधुनिक idioms की सफलता के उदाहरण दिखाते हैं
- product designers को मौजूदा idioms का पालन करना चाहिए और clarity तथा consistency को प्राथमिकता देकर पूरे web में standardized user experience की ओर बढ़ना चाहिए
डिज़ाइन idioms
- checkbox को ऐसे प्रतिनिधि design idiom के रूप में प्रस्तुत किया गया है जिसे उपयोगकर्ता बिना अलग से सीखे तुरंत समझ सकता है
- login बनाए रखना है या नहीं, यह पूछने के लिए कई input methods संभव हैं, लेकिन व्यवहार में लगभग हमेशा checkbox ही इस्तेमाल होता है
- यह उपयोगकर्ता और developer दोनों के लिए परिचित standardized interaction pattern की तरह काम करता है
एकरूप interfaces
- interface वह माध्यम है जिससे उपयोगकर्ता system के साथ interact करता है, और जितना कम सोचना पड़े, उतना बेहतर interface माना जाता है
- उदाहरण के लिए,
Command+C shortcut से copy करने की सुविधा हर जगह एक जैसी काम करनी चाहिए
- लेकिन मौजूदा web software environment में interface consistency गायब हो गई है
- date selection, card number input जैसी बुनियादी सुविधाएँ भी हर site पर अलग तरह से implement की जाती हैं
- shortcuts और interaction methods हर app में अलग होने से उपयोगकर्ता को हर बार फिर से सीखना पड़ता है कि “कहाँ क्या दबाना है”
desktop software युग
- Windows 95~7 काल का desktop software उच्च interface consistency बनाए रखता था
- “File, Edit, View” menu structure हर program में एक जैसा मौजूद होता था
- menu items के नीचे की रेखा keyboard shortcut को दर्शाती थी, और
ALT+F, N आदि से उन्हें चलाया जा सकता था
- नीचे का status bar मौजूदा स्थिति (page, word count, mode आदि) को स्पष्ट रूप से दिखाता था
- text-based menus केंद्र में थे, और icons तभी इस्तेमाल होते थे जब उनका अर्थ स्पष्ट हो
- ये idioms सिर्फ Microsoft Word तक सीमित नहीं थे, बल्कि पूरे Windows ecosystem में एकरूप थे
- Windows XP की logout screen में भी हर button को साफ़ तौर पर button की तरह दिखाया जाता था, और shortcuts भी दिखाए जाते थे
- ऐसी consistency operating system और GUI libraries की सीमाओं की वजह से संभव थी, और Microsoft सैकड़ों पन्नों की design guidelines बाँटता था ताकि developers उनका पालन करें
browser software युग
- मौजूदा web application युग को heterogeneous interfaces का युग बताया गया है
- Figma और Linear जैसे उत्कृष्ट web apps में भी common icons या shortcuts नहीं हैं
- हर app अपने आप में अच्छी तरह design किया गया है, लेकिन interaction patterns एक-दूसरे से अलग हैं
- एक ही company के भीतर भी Gmail, GSuite और Google Docs का अनुभव अलग-अलग है
- नतीजतन उपयोगकर्ता productive flow में रहने के बजाय कौन-सा control कहाँ है, यह खोजने में समय बिताते हैं
-
mobile transition का प्रभाव
- touchscreen के आगमन के साथ mouse और keyboard केंद्रित design patterns को फिर से गढ़ा गया
- mobile और desktop दोनों को साथ support करने की स्थिति में बीच का अधूरा UI फैल गया
- उदाहरण: mobile के hamburger menu का desktop पर भी वैसे ही इस्तेमाल होना
- modular component reuse culture गलत patterns की नकल करके quality गिराती है
- 10 साल से अधिक समय के संचय के परिणामस्वरूप UI/UX quality का पीढ़ीगत क्षरण हुआ
-
HTML से आगे idioms की कमी
- शुरुआती web में नीले underline वाले links जैसे स्पष्ट idioms मौजूद थे, लेकिन अब हर site की styling अलग है
- HTML/CSS standards सख्त हैं, लेकिन व्यवहार में अधिकतर लोग React·TypeScript आधारित build systems इस्तेमाल करते हैं
- नतीजतन standard HTML elements की जगह custom implementations बेतहाशा बढ़ गए हैं, जिससे accessibility समस्याएँ भी पैदा होती हैं
- उदाहरण:
<a> की जगह onclick लगे <span> का इस्तेमाल, जिससे screen reader functionality टूट जाती है
- Figma जैसे WebAssembly आधारित apps भी मौजूद हैं जो HTML से पूरी तरह बाहर निकल जाते हैं
- browser के back button, shortcuts जैसी basic features की अनदेखी होती है, और human-computer interaction का नया paradigm फिर से बनाया जाता है
- frontend development speed और possibility-केंद्रित ढंग से आगे बढ़ा है, इसलिए consistent idioms का जमना मुश्किल है
- countless frameworks और interaction formats की मौजूदगी से एकल standard स्थापित करना संरचनात्मक रूप से कठिन हो गया है
idiomatic design की सफलता के उदाहरण
- Apple को आधुनिक समय में मज़बूत design idioms बनाए रखने वाले प्रतिनिधि उदाहरण के रूप में गिना जाता है
- fonts, buttons, colors सहित पूरे design system में एकरूपता है, और पूरे iOS में consistent interaction experience मिलता है
- यही consistency “it just works” जैसा भरोसा पैदा करती है
- Substack भी सीमित customization और पहले से तय aesthetic defaults के जरिए स्थिर user experience देता है
- Apple और Substack के design principles सफलता के माध्यम से industry standards में फैलते हैं और अंततः नए idioms के रूप में स्थापित हो जाते हैं
product designers के लिए पालन करने योग्य सिद्धांत
- product developers के लिए जहाँ तक संभव हो मौजूदा design idioms का पालन करना usability और compatibility बढ़ाने का रास्ता बताया गया है
- HTML/CSS के मूल idioms का पालन करें: links को underline, color, pointer cursor और
<a> tag के साथ implement करें
- मूल HTML elements को JavaScript से दोबारा implement न करें, उदाहरण: React Button की जगह
<button> इस्तेमाल करें
- browser idioms का पालन करें: back button काम करे, URL copy करने पर वही interface खुले, CTRL+click से नया tab खुले
- अगर सामान्य idioms से हटना पड़े, तो कम-से-कम संगठन के भीतर consistent rules बनाए रखें
- text को प्राथमिकता, icons को न्यूनतम, और icons तभी इस्तेमाल करें जब वे सार्वभौमिक रूप से समझे जा सकें
- visual elements में स्पष्टता, सौंदर्य से पहले होनी चाहिए
- निर्णय कठिन हो तो उत्कृष्ट websites के उदाहरण और पुरानी interface design books देखें
- अंततः लक्ष्य ऐसा भविष्य है जहाँ पूरे web में date picker या card input forms एक जैसे काम करें,
और कई दशकों की पुनरावृत्ति व सुधार के बाद web सर्वोत्तम idioms की ओर अभिसरित हो
अभी कोई टिप्पणी नहीं है.