જ્યારે હું મારી પહેલી વેબસાઇટ બનાવવા માટે બેઠો, ત્યારે ઉત્સાહ સાચો હતો. મને લાગ્યું કે અઘરો ભાગ કોડિંગ શીખવાનો હશે—ટેગ્સ યાદ રાખવા, ફંક્શન્સ સમજવા, સિન્ટેક્સ સાચો રાખવો. હું ખોટો હતો. કોડ લખવો એ તો સરળ ભાગ હતો. સાચી પડકાર એ હતો કે આ લાઈનોને એવી રીતે બદલવી કે જેથી લોકો મૂંઝવણ કે હતાશા વગર તેનો ઉપયોગ કરી શકે. તે પહેલા પ્રોજેક્ટથી મને શીખવા મળ્યું કે ડેવલપમેન્ટ એ માત્ર એકલતામાં ટાઈપિંગ કરવા વિશે નથી, પરંતુ એવા લોકો માટે સમસ્યાઓ ઉકેલવા વિશે છે જેમને તમારા stack સાથે કોઈ લેવાદેવા નથી. મેં એવી ભૂલો કરી જેના કારણે મારો સમય, ઊંઘ અને શરૂઆતના યુઝર્સનો બગાડ થયો. તેમાંથી પાંચ ભૂલો સૌથી અલગ તરી આવતી હતી.
શિપિંગ કરતા પહેલા સંપૂર્ણતા પાછળ દોડવું
હું સંપૂર્ણતાના જાળમાં ફસાઈ ગયો હતો, તે પહેલા કે મેં કોઈ વસ્તુને સંપૂર્ણ કહેવાનો અધિકાર મેળવ્યો હોય. મેં આખી બપોર હેક્સ કોડ્સ (hex codes) બદલવામાં, border-radius ની કિંમતોમાં આઠ પિક્સેલથી દસ પિક્સેલ અને ફરી પાછા ફેરવવામાં, અને એક પણ વિઝિટર આવતા પહેલા હેડલાઇન કોપી પાંચ વાર ફરીથી લખવામાં વિતાવી દીધી. મેં મારી જાતને કહ્યું કે હું તેને વધુ સારું બનાવી રહ્યો છું, પરંતુ ખરેખર હું ગુણવત્તાના બહાને કામ ટાળી રહ્યો હતો. પરિણામ? મેં ત્રણ અઠવાડિયા મોડા લોન્ચ કર્યું. જ્યારે સાઇટ અંતે લાઈવ થઈ, ત્યારે બટનનો જે વળાંક (curve) મેં ઘણો વિચારવામાં વિતાવ્યો હતો, તેના વિશે એક પણ યુઝરે કંઈ કહ્યું નહીં. તેમને માત્ર એમાં રસ હતો કે ફોર્મ ક્રેશ થયા વગર સબમિટ થાય છે કે નહીં.
આ પાઠ મને યાદ રહી ગયો: તમારું કામ પહેલા લોન્ચ કરો. તમે એવા ફીડબેક પર સુધારો કરી શકતા નથી જે તમને મળ્યો જ નથી. માળખું મજબૂત બનાવો, મુખ્ય ફંક્શન કામ કરે છે તેની ખાતરી કરો અને તેને લાઈવ કરો. સુધારા (refinement) વર્ઝન ૨ માટે છે, વર્ઝન ૦ માટે નહીં. તમારા યુઝર્સ તમને કહેશે કે ખરેખર શું તૂટેલું છે અને શું તમે માત્ર અધૂરું હોવાનું કલ્પના કરો છો.
ખૂબ જ વહેલું અને ઘણું બધું બનાવવું
મારો પ્રોજેક્ટ પુસ્તકોના સૂચનો શેર કરવા માટેના એક સાદા સાધન તરીકે શરૂ થયો હતો. તે જ તેનો મુખ્ય હેતુ હતો. બીજા અઠવાડિયા સુધીમાં, મેં યુઝર લોગિન સિસ્ટમ, ડાયનેમિક રેટિંગ ગ્રાફ, નેસ્ટેડ કોમેન્ટ સેક્શન, ડાર્ક-મોડ ટોગલ અને ઈમેલ ડાયજેસ્ટનું આયોજન કરી લીધું હતું. તેમાંથી એક પણ બરાબર કામ કરતું નહોતું. લોગિન ફ્લો અડધા સમયમાં તૂટી જતો હતો. ગ્રાફમાં દર્શાવવા માટે કોઈ વાસ્તવિક ડેટા નહોતો. કોમેન્ટ સેક્શનમાં ડુપ્લીકેટ કોમેન્ટ્સ આવતી હતી. આ દરમિયાન, પુસ્તકોની યાદી બતાવવાનું મૂળ ફીચર—જેના માટે આ સાઇટ હતી જ—તે અડધા અધૂરા અને તૂટેલા વધારાના ફીચર્સ નીચે દબાઈ ગયું હતું, જેના કારણે હોમપેજ પર આવનાર કોઈપણ વ્યક્તિ મૂંઝાઈ જતી હતી.
એક સાદી સાઇટ જે એક સમસ્યાને સારી રીતે ઉકેલે છે, તે દસ કામો ખરાબ રીતે કરતી જટિલ સાઇટ કરતા હંમેશા શ્રેષ્ઠ રહેશે. તમે કોડની બીજી લાઇન લખતા પહેલા, તમારું પ્રોડક્ટ યુઝર માટે કયું એક કામ કરે છે તે નક્કી કરો. તે બનાવો. તેનું પરીક્ષણ કરો. જ્યાં સુધી તે વિશ્વસનીય ન બને ત્યાં સુધી તેને સુધારો. જો યુઝર્સ ખરેખર ડેશબોર્ડ અથવા સોશિયલ ફીડ માંગે, તો તમે તે પછી ઉમેરી શકો છો. ત્યાં સુધી, જ્યારે માત્ર એક તીક્ષ્ણ રસોડાના છરીની જરૂર હોય, ત્યારે સ્વિસ આર્મી નાઈફ (Swiss Army knife) બનાવવાની ઈચ્છાને રોકી રાખો.
દેખાવ પાછળના અનુભવને અવગણવો
મેં સુંદર ફોન્ટ્સ અને સ્ટાઇલિશ કલર પેલેટ પસંદ કરવામાં કલાકો વિતાવ્યા. મેં હીરો સેક્શનના બેકગ્રાઉન્ડ ગ્રેડિયન્ટ પર ઘણો સમય આપ્યો. પછી મેં સાઇટ વાપરવામાં ખરેખર કેવી લાગે છે તેના પર ધ્યાન આપવાનું છોડી દીધું. પેજ લોડ થવામાં ઘણો સમય લેતું હતું કારણ કે મેં કમ્પ્રેશન વગરના ફૂલ-રિઝોલ્યુશન PNGs વાપર્યા હતા. નેવિગેશન લેબલ્સમાં એવા ચતુર શબ્દો હતા જે દેખાવમાં સારા લાગતા હતા પણ લોકોએ લિંક ક્યાં લઈ જશે તેનો અંદાજ લગાવવો પડતો હતો. બટનો પાતળા અને સ્ટાઇલિશ હતા પણ ફોન સ્ક્રીન પર ટેપ કરવા માટે ખૂબ નાના હતા.
મેં કઠિન અનુભવ દ્વારા શીખ્યું કે વિઝ્યુઅલ ડિઝાઇન અને યુઝર એક્સપિરિયન્સ (user experience) એકબીજાના પર્યાય નથી. જો મુલાકાતીઓએ બેનર ઈમેજ માટે કેટલાક સેકન્ડ રાહ જોવી પડે, અથવા જો તેઓ બે ક્લિકથી ઓછા સમયમાં તમારો સંપર્ક કેવી રીતે કરવો તે સમજી ન શકે, તો સુંદર ઇન્ટરફેસ પણ નિષ્ફળ જાય છે. દરેક ઇન્ટરેક્શનને સરળ બનાવો. નેવિગેશન માટે સાદી ભાષાનો ઉપયોગ કરો. તમારી એસેટ્સ (assets) ને કમ્પ્રેસ કરો. તપાસો કે ટેપ ટાર્ગેટ્સ પૂરતા મોટા છે. સ્પીડ અને સ્પષ્ટતા એ અંતમાં ઉમેરવામાં આવતા બોનસ નથી; તે એ પાયો છે જેના પર બાકીની બધી વસ્તુઓ ટકેલી છે.
માત્ર મારા પોતાના મશીન પર ટેસ્ટિંગ કરવું
મેં આખી સાઇટ એક જ લેપટોપ પર, એક જ બ્રાઉઝર પર અને એક જ સ્ક્રીન રિઝોલ્યુશન પર બનાવી હતી. મારા મશીન પર બધું જ દોષરહિત લાગતું હતું. પછી એક મિત્રએ તેને તેના iPhone પર ખોલી. બટનો એકબીજા પર ચડી ગયા. ટેક્સ્ટ તેના કન્ટેનરની બહાર નીકળી ગયું. બીજા એક મિત્રએ Mac પર Safari વાપર્યું, અને આખું CSS ગ્રીડ લેઆઉટ બગડી ગયું. મેં મનમાં એવું માની લીધું હતું કે જો તે મારા માટે કામ કરે છે, તો તે બધા માટે કામ કરશે. આ ધારણાને કારણે મારે આખું વીકેન્ડ તાકીદના સુધારા (hotfixes) કરવામાં અને ક્ષમા માંગવામાં વિતાવવું પડ્યું.
મારી ભૂલ દોહરાવશો નહીં. તમે પબ્લિશ કરો તે પહેલા, તમારી સાઇટને Chrome, Firefox, Safari અને Edge માં ચલાવી જુઓ. વિવિધ પહોળાઈના ફોન, ટેબ્લેટ અને લેપટોપનું અનુકરણ કરવા માટે તમારા બ્રાઉઝરના ડેવલપર ટૂલ્સનો ઉપયોગ કરો. દરેક લિંક પર ક્લિક કરો. દરેક ફોર્મ સબમિટ કરો. વિન્ડોનું કદ બદલીને જુઓ. ટેસ્ટિંગ દરમિયાન તમે જે બગ્સ (bugs) પકડો છો તે પ્રોડક્શનમાં યુઝર્સ દ્વારા શોધવામાં આવતા બગ્સ કરતા ઘણા સસ્તા પડે છે.
ફીડબેકને વ્યક્તિગત હુમલા તરીકે લેવો
પ્રોજેક્ટ શેર કરવાથી હું ગભરાઈ ગયો હતો. જો લોકોને તે ન ગમ્યું તો? જ્યારે એક સહકર્મીએ એ ફીચર છોડી દેવાનું સૂચન કર્યું જેના પર મેં ખર્ચેલ