എന്റെ ആദ്യത്തെ വെബ്സൈറ്റ് നിർമ്മിക്കാൻ ഇരുന്നപ്പോൾ ഉണ്ടായ ആവേശം വലുതായിരുന്നു. കോഡിംഗ് പഠിക്കുക എന്നതാണ് പ്രയാസകരമായ കാര്യം എന്ന് ഞാൻ കരുതി—ടാഗുകൾ മനഃപാഠമാക്കുക, ഫങ്ക്ഷനുകൾ മനസ്സിലാക്കുക, സിന്റാക്സ് ശരിയാക്കുക എന്നിവയെല്ലാം. ഞാൻ തെറ്റിദ്ധരിച്ചു. കോഡ് എഴുതുക എന്നത് എളുപ്പമുള്ള കാര്യമായിരുന്നു എന്ന് പിന്നീട് മനസ്സിലായി. ആളുകൾക്ക് ആശയക്കുഴപ്പമോ നിരാശയോ ഇല്ലാതെ ഉപയോഗിക്കാൻ കഴിയുന്ന ഒന്നായി ആ വരികളെ മാറ്റുക എന്നതായിരുന്നു യഥാർത്ഥ വെല്ലുവിളി. ഡെവലപ്മെന്റ് എന്നത് ഒറ്റപ്പെട്ട രീതിയിൽ ടൈപ്പ് ചെയ്യലല്ലെന്നും, മറിച്ച് നിങ്ങളുടെ സ്റ്റാക്ക് (stack) എന്തുതന്നെയായാലും അത് ഉപയോഗിക്കുന്ന മനുഷ്യരുടെ പ്രശ്നങ്ങൾ പരിഹരിക്കുക എന്നതാണെന്നും ആ ആദ്യ പ്രോജക്റ്റ് എന്നെ പഠിപ്പിച്ചു. സമയം, ഉറക്കം, ആദ്യകാല ഉപഭോക്താക്കൾ എന്നിവ നഷ്ടപ്പെടുത്തുന്ന തരത്തിലുള്ള വലിയ തെറ്റുകൾ ഞാൻ ചെയ്തുപോയി. അതിൽ ഏറ്റവും പ്രധാനപ്പെട്ട അഞ്ച് കാര്യങ്ങൾ താഴെ പറയുന്നവയാണ്.
പുറത്തിറക്കുന്നതിന് മുമ്പ് പൂർണ്ണത തേടി സമയം കളയുന്നത്
എന്തിനെയും പൂർണ്ണതയോടെ അവതരിപ്പിക്കണമെന്ന ചിന്തയിൽ ഞാൻ കുടുങ്ങിപ്പോയി. ഒരു ഷേഡ് മാറ്റാനായി മണിക്കൂറുകളോളം ഹെക്സ് കോഡുകൾ (hex codes) മാറ്റിയും, ബോർഡർ-റേഡിയസ് (border-radius) മൂല്യങ്ങൾ എട്ട് പിക്കസലിൽ നിന്ന് പത്തു പിക്കസലിലേക്ക് മാറ്റിയും തിരികെയും ചെയ്തുകൊണ്ട് ഞാൻ വൈകുന്നേരങ്ങൾ ചിലവഴിച്ചു. ഒരു സന്ദർശകൻ പോലും കാണുന്നതിന് മുമ്പ് ഹെഡ്ലൈൻ കോപ്പി അഞ്ചുതവണ മാറ്റി എഴുതി. ഞാൻ ഗുണനിലവാരം മെച്ചപ്പെടുത്തുകയാണെന്ന് എന്നോട് തന്നെ പറഞ്ഞു, എന്നാൽ യഥാർത്ഥത്തിൽ ഗുണനിലവാരത്തിന്റെ മറവിൽ ഞാൻ കാര്യങ്ങൾ നീട്ടിവെക്കുകയായിരുന്നു. ഫലം? ഞാൻ മൂന്നാഴ്ച വൈകിയാണ് സൈറ്റ് പുറത്തിറക്കിയത്. സൈറ്റ് ലൈവ് ആയപ്പോൾ, ഞാൻ ഏറെ കഷ്ടപ്പെട്ട് ശരിയാക്കിയ ബട്ടണിന്റെ വളവിനെക്കുറിച്ച് ഒരു ഉപഭോക്താവ് പോലും പരാതിപ്പെട്ടില്ല. പകരം, ഫോം സബ്മിറ്റ് ചെയ്യുമ്പോൾ സൈറ്റ് ക്രാഷ് ആകുന്നുണ്ടോ എന്നതിനെക്കുറിച്ചാണ് അവർ ശ്രദ്ധിച്ചത്.
പാഠം ഇതായിരുന്നു: ആദ്യം നിങ്ങളുടെ ജോലി പുറത്തിറക്കുക. നിങ്ങൾക്ക് ലഭിക്കാത്ത ഫീഡ്ബാക്കിനെ അടിസ്ഥാനമാക്കി മാറ്റങ്ങൾ വരുത്താൻ കഴിയില്ല. ഘടന കൃത്യമാക്കുക, പ്രധാന ഫീച്ചറുകൾ പ്രവർത്തിക്കുന്നുണ്ടെന്ന് ഉറപ്പുവരുത്തുക, എന്നിട്ട് അത് ലൈവ് ചെയ്യുക. പരിഷ്കരണങ്ങൾ വെർഷൻ രണ്ട് (version two) ചെയ്യേണ്ടതാണ്, വെർഷൻ സീറോയിൽ (version zero) അല്ല. എന്താണ് യഥാർത്ഥത്തിൽ തകരാറുള്ളതെന്നും എന്താണ് വെറുതെ അപൂർണ്ണമെന്ന് നിങ്ങൾക്ക് തോന്നുന്നതെന്നും നിങ്ങളുടെ ഉപഭോക്താക്കൾ പറഞ്ഞുതരും.
അമിതമായി കാര്യങ്ങൾ നിർമ്മിക്കാൻ ശ്രമിക്കുന്നത്
പുസ്തകങ്ങൾ ശുപാർശ ചെയ്യുന്നതിനുള്ള ഒരു ലളിതമായ ടൂൾ എന്ന നിലയിലാണ് എന്റെ പ്രോജക്റ്റ് തുടങ്ങിയത്. രണ്ടാമത്തെ ആഴ്ച ആയപ്പോഴേക്കും ഞാൻ ഒരു യൂസർ ലോഗിൻ സിസ്റ്റം, ഡൈനാമിക് റേറ്റിംഗ് ഗ്രാഫ്, കമന്റ് സെക്ഷൻ, ഡാർക്ക്-മോഡ് ടോഗിൾ, ഇമെയിൽ ഡൈജസ്റ്റ് എന്നിവയെല്ലാം പ്ലാൻ ചെയ്തു കഴിഞ്ഞിരുന്നു. അവയൊന്നും ശരിയായി പ്രവർത്തിച്ചില്ല. ലോഗിൻ ഫ്ലോ പലപ്പോഴും പരാജയപ്പെട്ടു. ഗ്രാഫിൽ കാണിക്കാൻ യഥാർത്ഥ ഡാറ്റ ഉണ്ടായിരുന്നില്ല. കമന്റ് സെക്ഷനിൽ ഒരേ കമന്റുകൾ തന്നെ വീണ്ടും വരാൻ ഇടയാക്കി. ഇതിനിടയിൽ, സൈറ്റിന്റെ പ്രധാന ലക്ഷ്യമായ പുസ്തകങ്ങളുടെ ലിസ്റ്റ് കാണിക്കുന്ന ഫീച്ചർ, പകുതി പണി തീരാത്ത മറ്റ് ഫീച്ചറുകൾക്കിടയിൽ കുടുങ്ങിപ്പോയി. ഇത് ഹോംപേജിൽ വരുന്നവരെ ആശയക്കുഴപ്പത്തിലാക്കി.
പത്ത് കാര്യങ്ങൾ മോശമായി ചെയ്യുന്ന ഒരു സങ്കീർണ്ണമായ സൈറ്റിനേക്കാൾ നല്ലത്, ഒരു പ്രശ്നം കൃത്യമായി പരിഹരിക്കുന്ന ലളിതമായ ഒരു സൈറ്റാണ്. അടുത്ത വരി കോഡ് എഴുതുന്നതിന് മുമ്പ്, നിങ്ങളുടെ ഉൽപ്പന്നം ഉപഭോക്താവിനായി ചെയ്യുന്ന പ്രധാന ജോലി എന്താണെന്ന് തീരുമാനിക്കുക. അത് നിർമ്മിക്കുക. പരിശോധിക്കുക. അത് വിശ്വസനീയമാകുന്നതുവരെ പരിഷ്കരിക്കുക. ഉപഭോക്താക്കൾ ഒരു ഡാഷ്ബോർഡോ സോഷ്യൽ ഫീഡോ ആവശ്യപ്പെട്ടാൽ അപ്പോൾ അത് ചേർക്കാം. അതുവരെ, ഒരു മൂർച്ചയുള്ള കത്തി മാത്രം ആവശ്യമുള്ളപ്പോൾ ഒരു സ്വിസ് ആർമി നൈഫ് (Swiss Army knife) നിർമ്മിക്കാനുള്ള ആഗ്രഹം നിയന്ത്രിക്കുക.
കാഴ്ചയിലെ ഭംഗിക്ക് പിന്നിലെ അനുഭവം അവഗണിക്കുന്നത്
മനോഹരമായ ഫോണ്ടുകളും സ്റ്റൈലിഷ് ആയ കളർ പാലറ്റുകളും തിരഞ്ഞെടുക്കാൻ ഞാൻ മണിക്കൂറുകൾ ചിലവഴിച്ചു. ഹീറോ സെക്ഷന്റെ ബാക്ക്ഗ്രൗണ്ട് ഗ്രേഡിയന്റിൽ ഞാൻ അമിതമായി ശ്രദ്ധ കേന്ദ്രീകരിച്ചു. എന്നാൽ സൈറ്റ് ഉപയോഗിക്കുമ്പോൾ ഉണ്ടാകുന്ന അനുഭവം ഞാൻ അവഗണിച്ചു. കംപ്രഷൻ ചെയ്യാത്ത വലിയ PNG ചിത്രങ്ങൾ ഉപയോഗിച്ചതിനാൽ പേജുകൾ ലോഡ് ആകാൻ ഒരുപാട് സമയമെടുത്തു. നാവിഗേഷൻ ലേബലുകൾ കാണാൻ ഭംഗിയുണ്ടായിരുന്നെങ്കിലും അവ എങ്ങോട്ടാണ് കൊണ്ടുപോകുന്നത് എന്ന് ആളുകൾക്ക് മനസ്സിലാക്കാൻ പ്രയാസമായിരുന്നു. ബട്ടണുകൾ സ്റ്റൈലിഷ് ആയിരുന്നുവെങ്കിലും ഫോണിൽ ടാപ്പ് ചെയ്യാൻ പ്രയാസമുള്ളത്ര ചെറുതായിരുന്നു.
വിഷ്വൽ ഡിസൈനും യൂസർ എക്സ്പീരിയൻസും (user experience) ഒന്നല്ല എന്ന് ഞാൻ കഠിനമായ പാഠത്തിലൂടെ പഠിച്ചു. ഒരു ബാനർ ഇമേജിനായി സന്ദർശകർ സെക്കന്റുകൾ കാത്തുനിൽക്കേണ്ടി വന്നാലോ, അല്ലെങ്കിൽ രണ്ട് ക്ലിക്കുകൾക്കുള്ളിൽ നിങ്ങളെ എങ്ങനെ ബന്ധപ്പെടാം എന്ന് മനസ്സിലാക്കാൻ കഴിഞ്ഞില്ലെങ്കിലോ, എത്ര മനോഹരമായ ഇന്റർഫേസ് ആണെങ്കിലും അത് പരാജയമാണ്. ഓരോ ഇന്ററാക്ഷനും ലളിതമാക്കുക. നാവിഗേഷൻ ലേബലുകൾ ലളിതമായ ഭാഷയിൽ നൽകുക. ചിത്രങ്ങൾ കംപ്രസ്സ് ചെയ്യുക. ബട്ടണുകൾ ടാപ്പ് ചെയ്യാൻ പാകത്തിൽ വലുതാണെന്ന് ഉറപ്പുവരുത്തുക. വേഗതയും വ്യക്തതയും അവസാനം ചേർക്കേണ്ട അധിക സൗകര്യങ്ങളല്ല; മറിച്ച് അവയാണ് മറ്റെല്ലാറ്റിന്റെയും അടിസ്ഥാനം.
സ്വന്തം കമ്പ്യൂട്ടറിൽ മാത്രം പരിശോധിക്കുന്നത്
ഒരു ലാപ്ടോപ്പിൽ, ഒരു ബ്രൗസറിൽ, ഒരു സ്ക്രീൻ റെസല്യൂഷനിൽ മാത്രമാണ് ഞാൻ സൈറ്റ് നിർമ്മിച്ചത്. എന്റെ കമ്പ്യൂട്ടറിൽ എല്ലാം തികഞ്ഞതായിരുന്നു. എന്നാൽ ഒരു സുഹൃത്ത് അത് ഐഫോണിൽ (iPhone) തുറന്നപ്പോൾ ബട്ടണുകൾ ഒന്നിനു മുകളിൽ ഒന്നായി വന്നു. ടെക്സ്റ്റുകൾ കONTENE-ൽ നിന്ന് പുറത്തേക്ക് വന്നു. മറ്റൊരു സുഹൃത്ത് മാക്കിലെ (Mac) സഫാരിയിൽ (Safari) ഉപയോഗിച്ചപ്പോൾ CSS ഗ്രിഡ് ലേഔട്ട് പൂർണ്ണമായും തകർന്നുപോയി. എനിക്ക് വർക്ക് ചെയ്യുന്നുണ്ടെങ്കിൽ എല്ലാവർക്കും വർക്ക് ചെയ്യും എന്ന് ഞാൻ കരുതിയിരുന്നു. ആ തെറ്റായ ധാരണ കാരണം ഒരു വാരാന്ത്യം മുഴുവൻ എനിക്ക് തിരുത്തലുകൾക്കായി കഷ്ടപ്പെടേണ്ടി വന്നു.
എന്റെ തെറ്റ് ആവർത്തിക്കരുത്. സൈറ്റ് പബ്ലിഷ് ചെയ്യുന്നതിന് മുമ്പ് ക്രോം (Chrome), ഫയർഫോക്സ് (Firefox), സഫാരി (Safari), എഡ്ജ് (Edge) എന്നിവയിൽ പരിശോധിക്കുക. ഫോണുകളും ടാബ്ലെറ്റുകളും ലാപ്ടോപ്പുകളും എങ്ങനെയിരിക്കും എന്ന് അറിയാൻ ബ്രൗസറിലെ ഡെവലപ്പർ ടൂളുകൾ ഉപയോഗിക്കുക. എല്ലാ ലിങ്കുകളും ക്ലിക്ക് ചെയ്യുക. എല്ലാ ഫോമുകളും സബ്മിറ്റ് ചെയ്യുക. വിൻഡോയുടെ വലിപ്പം മാറ്റി നോക്കുക. ടെസ്റ്റിംഗിൽ നിങ്ങൾ കണ്ടെത്തുന്ന പിശകുകൾ പരിഹരിക്കുക എന്നത്, ഉപഭോക്താക്കൾ കണ്ടെത്തുന്നതിനേക്കാൾ എളുപ്പമുള്ള കാര്യമാണ്.
ഫീഡ്ബാക്കിനെ വ്യക്തിപരമായ ആക്രമണമായി കാണുന്നത്
പ്രോജക്റ്റ് പങ്കുവെക്കുന്നത് എന്നെ പരിഭ്രമിപ്പിച്ചു. ആളുകൾക്ക് അത് ഇഷ്ടപ്പെട്ടില്ലെങ്കിലോ? ഞാൻ ചിലവഴിച്ച ഒരു ഫീച്ചർ ഒഴിവാക്കാൻ ഒരു സഹപ്രവർത്തകൻ നിർദ്ദേശിച്ചപ്പോൾ