Theory
માત્ર code નહીં, experience design કરો
તમારા projectના users તેને મુખ્યત્વે તે કેવી રીતે દેખાય અને વાપરવામાં કેવું લાગે તેના આધારે judge કરશે. Confusing interface પાછળ powerful backend હોય તો userની નજરે project fail છે. System અને database design કર્યા તેમ interface પણ build કરતાં પહેલાં design કરો.
આ process તમારા UI/UX course સાથે જોડાય છે. તેમાં user experience એટલે userની journey plan કરવી અને દરેક screenના wireframes એટલે simple layout blueprints sketch કરવા. Paper પર changes cheap હોય છે; codeમાં changes expensive હોય છે. તેથી interface codeમાં improvise કરવાને બદલે પહેલાં deliberate અને usable design કરો.
Theory
User flow plan કરો
સૌ પ્રથમ user experience (UX) વિચારો: system વાપરતી વખતે userને કેવું લાગે છે અને ખાસ કરીને user flow, એટલે goal achieve કરવા user કયા steps લે છે.
Event systemમાં studentની journey trace કરો: app ખોલવી, events browse કરવાં, event પસંદ કરવો, register કરવું અને confirmation મેળવવું. આ flowથી path smooth છે કે awkward અને confusing steps ધરાવે છે તે દેખાય છે. Good flow userને સરળતાથી goal સુધી પહોંચાડે છે; bad flow userને ગુમાવી શકે છે.
Featuresની યાદી કરતાં userના point of viewથી journey વિચારો. આ જ systemને 'માત્ર કામ કરતું' અને 'pleasant to use' વચ્ચે અલગ કરે છે.
Theory
Wireframes: દરેક screenના cheap blueprints
Wireframe screenના layoutનું simple, low-fidelity sketch છે. તેમાં boxes અને labels બતાવે છે કે title ક્યાં, events list ક્યાં અને register button ક્યાં હશે. તેમાં સામાન્ય રીતે colours, images અથવા final styling નથી. તે finished design નહીં, blueprint છે.
Wireframeનો હેતુ structure અને placement cheaply plan કરવાનો છે. Team અથવા usersને બતાવીને feedback મેળવો અને minutesમાં layout બદલવો, codeમાં hours invest કર્યા પહેલાં. પછી wireframe front-end development guide બને છે: developer layout invent કરવાને બદલે agreed design implement કરે છે.
Key screensના wireframes sketch કરો, clear અને usable layout પર focus કરો અને build કરતાં પહેલાં iterate કરો.
Quiz
UI/UX planningમાં wireframe શું છે?
- Screenનું final, fully styled અને coloured version
- Screenના layoutનું simple, low-fidelity sketch, જેમાં boxes અને labelsથી structure તથા placement બતાવવામાં આવે છે
- Database schema
- Page માટેનું server-side code
Show the answer
Screenના layoutનું simple, low-fidelity sketch, જેમાં boxes અને labelsથી structure તથા placement બતાવવામાં આવે છે
Wireframe screenના layoutનું simple, low-fidelity sketch છે. Boxes અને labelsથી elements ક્યાં હશે તે બતાવીને coding પહેલાં structure અને placement plan કરવામાં આવે છે. Option A ખોટું છે: wireframe final styled design નથી; તે colours અને final visualsને intentionally દૂર રાખે છે. Option C database schema છે, screen layout નહીં. Option D backend logic છે, UI sketch નહીં. Wireframes cheap interface blueprints છે જે usability problems વહેલી શોધવા અને front-end development guide કરવા મદદ કરે છે.
Think first
Real screens codeમાં બનાવવા પહેલાં wireframes શા માટે sketch કરવાં?
તમને interface code આવડે છે. તો rough sketches પર પહેલાં time શા માટે વેડફવો? પછી tap.
Show the answer
કારણ કે rough sketch બદલવામાં SECONDS લાગે છે, જ્યારે coded screen બદલવામાં HOURS લાગી શકે છે. Wireframeથી feedback લઈ usability problems cheap રીતે fix કરી શકાય છે, implementationમાં expensive time invest કરતા પહેલાં.
સીધું real screen code કરશો તો layout, styling અને interactionsમાં time જાય છે. પછી design confusing લાગે અથવા user better arrangement suggest કરે તો built screen ફરીથી બનાવવી પડે. અનેક screensમાં આવું થવાથી projectનો ઘણો સમય reworkમાં બળી જાય છે.
Wireframe boxes અને labelsથી બને છે, તેથી layoutના અનેક options minutesમાં try કરી શકાય છે. Elements rearrange કરો, problems શોધો અને almost no costમાં સુધારો કરો. આ usability issues fix કરવાનો સૌથી સસ્તો સમય છે: code પહેલાં.
Wireframes collaboration અને feedback પણ સરળ બનાવે છે. Team, mentor અથવા potential userને simple sketch બતાવી early input મેળવો; fully built screenમાં feedback implement કરવો મુશ્કેલ અને costly બને છે. Colours અને final visuals છોડવાથી team પહેલાં STRUCTURE અને FLOW પર focus કરે છે, button blue હોવો જોઈએ કે નહીં તેના પર નહીં.
Agreed wireframe front-end developer માટે clear GUIDE બને છે અને report માટે design decisions document કરે છે. Wireframing wasted time નથી; તે interface સાચું કરવાની cheap અને fast રીત છે. Mistakes જ્યાં free હોય ત્યાં sketch કરો, પછી codeમાં build કરો.
Summary
Key takeaways
- Project build કરતાં પહેલાં UI કેવી દેખાશે અને UX કેવી લાગશે તે design કરો.
- User flow plan કરો: user goal achieve કરવા કયા steps લે છે, જેમ કે browse, choose, register અને confirm.
- Smooth flow userને goal સુધી સરળતાથી પહોંચાડે છે; flow mapping awkward steps દેખાડે છે.
- Wireframe દરેક screenના layoutનું simple, low-fidelity sketch છે, જેમાં boxes અને labels હોય છે અને colours/final styling નથી.
- Wireframes structure અને placement plan કરવા, feedback મેળવવા અને coding પહેલાં cheap iteration માટે ઉપયોગી છે.
- Sketch બદલવામાં seconds લાગે છે, coded screen બદલવામાં hours લાગી શકે છે; તેથી wireframes usability problems વહેલી અને સસ્તી રીતે શોધે છે.
- Memory hook: user flow plan કરો, key screensના wireframes sketch કરો અને paper પર interface સાચું કર્યા પછી build કરો.