તમે કદાચ પહેલા પણ ત્યાં આવ્યા છો. અમે વપરાશકર્તાઓને મોડલ બતાવવા વચ્ચે કેવી રીતે પસંદ કરીએ છીએ અને અમે તેમને અલગ, નવા પૃષ્ઠ પર ક્યારે નેવિગેટ કરીશું? અને શું તે બિલકુલ વાંધો છે? ખરેખર, તે કરે છે. નિર્ણય વપરાશકર્તાઓના પ્રવાહ, તેમના સંદર્ભ, વિગતો જોવાની તેમની ક્ષમતા અને તેની સાથે ભૂલની આવર્તન અને કાર્ય પૂર્ણતાને પ્રભાવિત કરે છે. ખોટા સમયે અને ખોટા સ્થળે - બંને વિકલ્પો વિક્ષેપકારક અને નિરાશાજનક હોઈ શકે છે. તેથી અમે તેને યોગ્ય રીતે મેળવીશું. સારું, ચાલો જોઈએ કે તે કેવી રીતે કરવું. મોડલ્સ વિ. ડાયલોગ્સ વિ. ઓવરલે વિ. લાઇટબોક્સ જ્યારે અમે ઘણીવાર એક મોડલ UI ઘટક વિશે વાત કરીએ છીએ, ત્યારે અમે ઘણી વાર તમામ વિવિધ પ્રકારના મોડલ વચ્ચેની ઝીણી, જટિલ ઘોંઘાટને અવગણીએ છીએ. હકીકતમાં, દરેક મોડલ સરખા હોતા નથી. મોડલ્સ, સંવાદો, ઓવરલે અને લાઇટબોક્સ - બધા સમાન લાગે છે, પરંતુ તે વાસ્તવમાં તદ્દન અલગ છે:
સંવાદ એ "વાતચીત" (વપરાશકર્તા ↔ સિસ્ટમ) માટે સામાન્ય શબ્દ. ઓવરલેએક પૃષ્ઠની ટોચ પર પ્રદર્શિત એક નાની સામગ્રી પેનલ. મોડલ વપરાશકર્તાએ ઓવરલે + પૃષ્ઠભૂમિ અક્ષમ સાથે ક્રિયાપ્રતિક્રિયા કરવી આવશ્યક છે. NonmodalUserએ ઓવરલે + પૃષ્ઠભૂમિ સક્ષમ સાથે ક્રિયાપ્રતિક્રિયા કરવી આવશ્યક છે. મોડલ પર ધ્યાન કેન્દ્રિત કરવા માટે લાઇટબૉક્સ મંદ પૃષ્ઠભૂમિ.
જેમ કે અન્ના કાલે હાઇલાઇટ કરે છે, મોટાભાગના ઓવરલે ખોટા સમયે દેખાય છે, નિર્ણાયક કાર્યો દરમિયાન વપરાશકર્તાઓને વિક્ષેપિત કરે છે, નબળી ભાષાનો ઉપયોગ કરે છે અને વપરાશકર્તાઓના પ્રવાહને તોડે છે. તેઓ સ્વભાવે વિક્ષેપકારક છે, અને સામાન્ય રીતે તેની મજબૂત જરૂરિયાત વિના ઉચ્ચ સ્તરની તીવ્રતા સાથે.
ચોક્કસ વપરાશકર્તાઓને તેમની ક્રિયાના પરિણામોની ઊંચી અસર હોય તો તેમની ગતિ ધીમી અને વિક્ષેપિત થવી જોઈએ, પરંતુ મોટાભાગના દૃશ્યો માટે બિન-મોડલ્સ વધુ સૂક્ષ્મ અને વપરાશકર્તાના ધ્યાન પર કંઈક લાવવા માટે વધુ મૈત્રીપૂર્ણ વિકલ્પ છે. જો કંઈપણ હોય, તો હું હંમેશા તેને ડિફોલ્ટ હોવાનું સૂચન કરું છું. મોડલ્સ → એકલ, સ્વ-સમાયેલ કાર્યો માટે ડિઝાઇનર્સ તરીકે, અમે ઘણીવાર મોડલને અપ્રસ્તુત અને હેરાન કરનાર તરીકે બરતરફ કરીએ છીએ — અને ઘણી વખત તે હોય છે! - છતાં તેમની પાસે તેમનું મૂલ્ય પણ છે. તેઓ સંભવિત ભૂલો વિશે વપરાશકર્તાઓને ચેતવણી આપવા અથવા ડેટાના નુકસાનને ટાળવામાં મદદ કરવા માટે ખૂબ જ મદદરૂપ થઈ શકે છે. તેઓ સંબંધિત ક્રિયાઓ કરવામાં અથવા પૃષ્ઠની વર્તમાન સ્થિતિમાં વિક્ષેપ પાડ્યા વિના વિગતોમાં ડ્રિલ ડાઉન કરવામાં પણ મદદ કરી શકે છે. પરંતુ મોડલ્સનો સૌથી મોટો ફાયદો એ છે કે તે વપરાશકર્તાઓને વર્તમાન સ્ક્રીનનો સંદર્ભ રાખવામાં મદદ કરે છે. તેનો અર્થ ફક્ત UI નથી, પણ સંપાદિત ઇનપુટ, સ્ક્રોલિંગ સ્થિતિ, એકોર્ડિયનની સ્થિતિ, ફિલ્ટર્સની પસંદગી, સૉર્ટિંગ વગેરે પણ છે.
અમુક સમયે, વપરાશકર્તાઓએ ઝડપથી પસંદગીની પુષ્ટિ કરવાની જરૂર છે (ઉદા., ઉપર બતાવ્યા પ્રમાણે ફિલ્ટર્સ) અને પછી ત્યાંથી તરત જ આગળ વધવું. ઑટો-સેવ એ જ હાંસલ કરી શકે છે, અલબત્ત, પરંતુ તે હંમેશા જરૂરી અથવા ઇચ્છિત હોતું નથી. અને UI ને અવરોધિત કરવું એ ઘણીવાર સારો વિચાર નથી. જો કે, મોડલ્સનો ઉપયોગ કોઈપણ કાર્યો માટે થતો નથી. સામાન્ય રીતે, અમે તેનો ઉપયોગ એકલ, સ્વયં-સમાયેલ કાર્યો માટે કરીએ છીએ જ્યાં વપરાશકર્તાઓએ કૂદકો મારવો જોઈએ, કાર્ય પૂર્ણ કરવું જોઈએ અને પછી તેઓ જ્યાં હતા ત્યાં પાછા ફરવું જોઈએ. આશ્ચર્યજનક રીતે, તેઓ ઉચ્ચ-અગ્રતા, ટૂંકી ક્રિયાપ્રતિક્રિયાઓ (દા.ત. ચેતવણીઓ, વિનાશક ક્રિયાઓ, ઝડપી પુષ્ટિકરણ) માટે સારી રીતે કાર્ય કરે છે. જ્યારે મોડલ્સ મદદ કરે છે: 🚫 મોડલ્સ ઘણીવાર વિક્ષેપજનક, આક્રમક અને ગૂંચવણમાં મૂકે છે. ✅ જો વપરાશકર્તાઓ વિક્ષેપને મહત્વ આપશે તો જ મોડલ બતાવો. ✅ મૂળભૂત રીતે, બિન-અવરોધિત સંવાદોને પ્રાધાન્ય આપો ("નોનમોડલ્સ").✅ વપરાશકર્તાઓને સંવાદને પછીથી ઘટાડવા, છુપાવવા અથવા પુનઃસ્થાપિત કરવાની મંજૂરી આપો. પૃષ્ઠો → જટિલ, મલ્ટિ-સ્ટેપ વર્કફ્લો માટે મોડલ્સમાં વિઝાર્ડ્સ અથવા ટેબ કરેલ નેવિગેશન ખૂબ સારી રીતે કામ કરતું નથી, જટિલ એન્ટરપ્રાઇઝ પ્રોડક્ટ્સમાં પણ - ત્યાં, સાઇડ પેનલ્સ અથવા ડ્રોઅર્સ સામાન્ય રીતે વધુ સારી રીતે કામ કરે છે. જ્યારે વપરાશકર્તાઓને ડેટા પોઈન્ટ્સની તુલના કરવાની અથવા સંદર્ભિત કરવાની જરૂર હોય ત્યારે મુશ્કેલીઓ શરૂ થાય છે — છતાં મોડલ્સ આ વર્તણૂકને અવરોધિત કરે છે, તેથી તેઓ તેના બદલે એક જ પૃષ્ઠને બહુવિધ ટેબમાં ફરીથી ખોલે છે.
વધુ જટિલ પ્રવાહો અને બહુ-પગલાની પ્રક્રિયાઓ માટે, એકલ પૃષ્ઠો શ્રેષ્ઠ કાર્ય કરે છે. પૃષ્ઠો જ્યારે વપરાશકર્તાના સંપૂર્ણ ધ્યાનની માંગ કરે ત્યારે પણ વધુ સારી રીતે કાર્ય કરે છે અને અગાઉની સ્ક્રીનનો સંદર્ભ ખૂબ મદદરૂપ નથી. અને ડ્રોઅર્સ પેટા-કાર્યો માટે કામ કરે છે જે સરળ મોડલ માટે ખૂબ જટિલ છે, પરંતુ સંપૂર્ણ પૃષ્ઠ નેવિગેશનની જરૂર નથી. મોડલને ક્યારે ટાળવું: 🚫 ભૂલ સંદેશાઓ માટે મોડલ્સ ટાળો. બંને ટાળોપુનરાવર્તિત કાર્યો માટે ઘણા જટિલ, કાર્ય-ભારે ઉત્પાદનોમાં, વપરાશકર્તાઓ પોતાને એક જ કાર્યો વારંવાર, વારંવાર અને ફરીથી કરતા જોવા મળશે. ત્યાં, મોડલ અને નવા પેજ નેવિગેશન બંને ઘર્ષણ ઉમેરે છે કારણ કે તેઓ પ્રવાહમાં વિક્ષેપ પાડે છે અથવા વપરાશકર્તાઓને તમામ વિવિધ ટેબ અથવા દૃશ્યો વચ્ચે ખૂટતો ડેટા એકત્રિત કરવા દબાણ કરે છે. ઘણી વાર, વપરાશકર્તાઓ તૂટેલા અનુભવ સાથે સમાપ્ત થાય છે, ક્યારેય ન સમાપ્ત થતી પુષ્ટિઓથી ભરપૂર, અતિશયોક્તિયુક્ત ચેતવણીઓ, વર્બોઝ સૂચનાઓ અથવા ફક્ત સંદર્ભ બિંદુઓ ખૂટે છે. સોલિયસ સ્ટેબ્યુલિસે ઉલ્લેખ કર્યો છે તેમ, આ દૃશ્યોમાં, વિસ્તરણ કરી શકાય તેવા વિભાગો અથવા ઇન-પ્લેસ એડિટિંગ ઘણીવાર વધુ સારી રીતે કાર્ય કરે છે - તેઓ વર્તમાન સ્ક્રીન પર કાર્યને એન્કર રાખે છે. વ્યવહારમાં, ઘણા દૃશ્યોમાં, વપરાશકર્તાઓ તેમના કાર્યોને એકલતામાં પૂર્ણ કરતા નથી. તેમને ડેટા જોવાની, કૉપિ-પેસ્ટ મૂલ્યો, વિવિધ સ્થળોએ એન્ટ્રીઓને રિફાઇન કરવાની અથવા તેઓ તેમના કાર્યોમાં કામ કરતી વખતે સમાન રેકોર્ડ્સની સમીક્ષા કરવાની જરૂર છે. કાર્ય દરમિયાન પૃષ્ઠભૂમિ ડેટાની ઍક્સેસ જાળવવામાં ઓવરલે અને ડ્રોઅર્સ વધુ મદદરૂપ થાય છે. પરિણામે, સંદર્ભ હંમેશા તેની જગ્યાએ રહે છે, સંદર્ભ અથવા કોપી-પેસ્ટ માટે ઉપલબ્ધ છે. મોડલ્સ અને પેજ નેવિગેશનને એવી ક્ષણો માટે સાચવો જ્યાં વિક્ષેપ ખરેખર મૂલ્ય ઉમેરે છે — ખાસ કરીને ગંભીર ભૂલોને રોકવા માટે. મોડલ્સ વિ. પેજીસ: એ ડિસીઝન ટ્રી થોડા સમય પહેલા, Ryan Neufeld એ ડિઝાઇનર્સને મોડલ અને પૃષ્ઠો વચ્ચે પસંદગી કરવામાં મદદ કરવા માટે ખૂબ જ મદદરૂપ માર્ગદર્શિકા મૂકી હતી. તે 7 વિભાગોમાં વિભાજિત પ્રશ્નો સાથે એક સરળ PNG ચીટશીટ અને Google દસ્તાવેજ નમૂના સાથે આવે છે. તે લાંબુ, અત્યંત સંપૂર્ણ, પરંતુ અનુસરવા માટે ખૂબ જ સરળ છે:
તે ભયાવહ લાગે છે, પરંતુ તે એકદમ સરળ 4-પગલાની પ્રક્રિયા છે:
સ્ક્રીનનો સંદર્ભ. સૌપ્રથમ, અમે તપાસ કરીએ છીએ કે શું વપરાશકર્તાઓને અંતર્ગત સ્ક્રીનના સંદર્ભને જાળવવાની જરૂર છે. કાર્ય જટિલતા અને અવધિ. સરળ, ધ્યાન કેન્દ્રિત, બિન-વિચલિત કાર્યો મોડલનો ઉપયોગ કરી શકે છે, પરંતુ લાંબા, જટિલ પ્રવાહ માટે પૃષ્ઠની જરૂર છે. અંતર્ગત પૃષ્ઠનો સંદર્ભ. પછી, અમે તપાસીએ છીએ કે શું વપરાશકર્તાઓને વારંવાર પૃષ્ઠભૂમિમાં ડેટાનો સંદર્ભ લેવાની જરૂર છે અથવા જો કાર્ય એક સરળ પુષ્ટિ અથવા પસંદગી છે. યોગ્ય ઓવરલે પસંદ કરી રહ્યા છીએ. અંતે, જો ઓવરલે ખરેખર સારો વિકલ્પ હોય, તો તે અમને મોડલ અથવા નોનમોડલ (નોનમોડલ તરફ ઝુકાવ) વચ્ચે પસંદગી કરવા માર્ગદર્શન આપે છે.
રેપિંગ અપ જ્યારે પણ શક્ય હોય, સમગ્ર UI ને અવરોધિત કરવાનું ટાળો. UI ને આંશિક રીતે આવરી લેતો, પરંતુ નેવિગેશન, સ્ક્રોલિંગ અને કોપી-પેસ્ટ કરવાની મંજૂરી આપતો સંવાદ તરતો રાખો. અથવા મોડલની સામગ્રીને બાજુના ડ્રોઅર તરીકે બતાવો. અથવા તેના બદલે વર્ટિકલ એકોર્ડિયનનો ઉપયોગ કરો. અથવા જો તમારે ઘણી બધી વિગતો બતાવવાની જરૂર હોય તો વપરાશકર્તાઓને એક અલગ પૃષ્ઠ પર લાવો. પરંતુ જો તમે વપરાશકર્તાઓની કાર્યક્ષમતા અને ઝડપ વધારવા માંગતા હો, તો કોઈપણ કિંમતે મોડલ ટાળો. તેનો ઉપયોગ વપરાશકર્તાઓને ધીમું કરવા, તેમનું ધ્યાન આકર્ષિત કરવા, ભૂલોને રોકવા માટે. જેમ કે થેરેસી ફેસેન્ડેને નોંધ્યું છે તેમ, કોઈને વિક્ષેપિત થવું ગમતું નથી, પરંતુ જો તમારે કરવું જ જોઈએ, તો ખાતરી કરો કે તે એકદમ મૂલ્યવાન છે. "સ્માર્ટ ઇન્ટરફેસ ડિઝાઇન પેટર્ન" ને મળો તમે સ્માર્ટ ઈન્ટરફેસ ડિઝાઈન પેટર્ન્સમાં મોડલ્સ અને વિકલ્પો વિશે સંપૂર્ણ વિભાગ શોધી શકો છો, વાસ્તવિક જીવનના પ્રોજેક્ટના 100s વ્યવહારુ ઉદાહરણો સાથેનો અમારો 15h-વિડિયો કોર્સ — આ વર્ષના અંતમાં લાઈવ UX તાલીમ સાથે. મેગા-ડ્રોપડાઉનથી લઈને જટિલ એન્ટરપ્રાઇઝ કોષ્ટકો સુધીની દરેક વસ્તુ — દર વર્ષે 5 નવા સેગમેન્ટ ઉમેરવામાં આવે છે. મફત પૂર્વાવલોકન પર જાઓ. 15%ની છૂટ બચાવવા માટે BIRDIE કોડનો ઉપયોગ કરો. સ્માર્ટ ઇન્ટરફેસ ડિઝાઇન પેટર્નને મળો, ઇન્ટરફેસ ડિઝાઇન અને UX પરનો અમારો વિડિયો કોર્સ.
વિડિયો + UX તાલીમવિડિયો માત્ર વિડિયો + UX તાલીમ$ 495.00 $ 699.00
વિડિઓ + UX તાલીમ25 વિડિઓ પાઠ (15 કલાક) + લાઇવ UX તાલીમ મેળવો. 100 દિવસની મની-બેક-ગેરંટી. વિડિયો માત્ર$ 300.00$ 395.00
વિડિઓ કોર્સ 40 વિડિઓ પાઠ (15h) મેળવો. દર વર્ષે અપડેટ થાય છે. 2 વિડિયો કોર્સ સાથે UX બંડલ તરીકે પણ ઉપલબ્ધ છે.
ઉપયોગી સંસાધનો
પૉપઅપ્સના વિવિધ પ્રકારો, અન્ના કાલે દ્વારા Uxcel દ્વારા UI મોડલ્સ ડિઝાઇન કરવા માટેની શ્રેષ્ઠ પદ્ધતિઓ અમે ઘણા બધા ડૅમ મોડલનો ઉપયોગ કરીએ છીએ: એડ્રિયન એગર દ્વારા UX માર્ગદર્શિકા મોડલ અને નોનમોડલ ડાયલોગ્સ, થેરેસી ફેસેન્ડેન દ્વારા આધુનિક એન્ટરપ્રાઇઝ UI ડિઝાઇન: મોડલ ડાયલોગ્સ, જેમ્સ જેકોબ્સ દ્વારા ડિઝાઇન સિસ્ટમ્સમાં મોડલ્સ
