Theory
તમારી પોતાની જ app માં ખોવાઈ જવું
FestConnect નો એક વપરાશકાર Garba Night ની વિગતોમાં ઊતરે છે, પછી બેઠકના નકશામાં, અને પછી કોઈ પેટા-પડદામાં. હવે એને events ની યાદી પર પાછા જવું છે, પણ કોઈ સ્પષ્ટ રસ્તો જ નથી. ન back નું button, ન કોઈ menu, અને પોતે ક્યાં છે એનો કશો ખ્યાલ પણ નહીં. એ app ની અંદર જ ખોવાઈ ગયો છે.
દરેક વપરાશકાર, દરેક પડદા પર, મનમાં ને મનમાં 3 પ્રશ્નો પૂછતો હોય છે: હું ક્યાં છું? હું ક્યાં જઈ શકું? હું પાછો કઈ રીતે ફરું? આ પ્રશ્નોના જવાબ આપતી વ્યવસ્થા એટલે જ NAVIGATION. તમે ઘડેલી information architecture નો એ દેખાતો ચહેરો છે: અને એ નિષ્ફળ જાય ત્યારે વપરાશકારો ફસાઈ જાય છે.
Theory
Navigation, ઔપચારિક રીતે
Navigation એટલે UI ના એ ઘટકોની વ્યવસ્થા જે વપરાશકારોને product માં ફરવા અને content શોધવા દે છે. એ નીચે રહેલી information architecture નું દેખાતું રૂપ છે: IA એટલે રચના, અને navigation એટલે વપરાશકારો એ રચના પર કઈ રીતે ફરે છે તે.
એનું અસ્તિત્વ વપરાશકારના 3 શાશ્વત પ્રશ્નોના જવાબ આપવા માટે જ છે:
- હું ક્યાં છું? (અત્યારનું સ્થાન બતાવો: ચાલુ tab ને ઉઠાવ આપો)
- હું ક્યાં જઈ શકું? (વિકલ્પોને દેખાતા રાખો)
- હું પાછો કઈ રીતે ફરું? (પાછા જવાનો કે ઘરે પહોંચવાનો સ્પષ્ટ રસ્તો)
જે app દરેક પડદા પર આ ત્રણેયનો જવાબ આપે છે એ વપરાશકારને ક્યારેય ખોવાયેલો રાખતી નથી. જે એકેયનો જવાબ નથી આપતી એ જાળ છે, પછી ભલે એનું content ગમે તેટલું સારું હોય.
At a glance
Navigation ના પ્રકાર
| પ્રકાર | એ શું છે | FestConnect નો દાખલો |
|---|---|---|
| Global / primary | મુખ્ય navigation, જે બધે હાજર હોય | નીચેનાં tabs: Events, Schedule, My Passes, Profile |
| Local / secondary | કોઈ એક વિભાગની અંદરનું navigation | Events ની અંદરનાં tabs: Cultural અને Technical |
| Contextual | Content ની અંદર જ મુકાયેલી links | કોઈ event ની અંદરની 'See seat map' link |
| Breadcrumbs | ક્રમમાં તમે ક્યાં છો એ બતાવે છે | Home > Events > Garba Night |
| Utility | ટેકો આપતાં કામ | શોધ, login, settings |
Theory
સારા navigation ના સિદ્ધાંતો
અસરકારક navigation થોડા મક્કમ નિયમો પાળે છે:
- સાતત્ય: દરેક પડદા પર એ જ navigation, એ જ જગ્યાએ: વપરાશકારો એને એક જ વાર શીખે છે
- સ્પષ્ટ નામ: વપરાશકારના શબ્દો ('My Passes'), પારિભાષિક ભારેખમ શબ્દો નહીં
- અત્યારના સ્થાનને ઉઠાવ આપો: ચાલુ tab અલગ તરી આવે, જે 'હું ક્યાં છું?' નો જવાબ આપી દે
- મુખ્ય કામ સુધી ઓછામાં ઓછા click: registration 1 કે 2 tap દૂર હોવું જોઈએ, ઊંડે દટાયેલું નહીં
- ભાર ન ભરો: 15 વસ્તુઓનું menu એ દીવાલ છે; ઉપલા સ્તર પર મર્યાદા રાખો (થોડા સ્પષ્ટ વિભાગ)
- શોધી શકાય એવું: અગત્યનું navigation સંતાડો નહીં (hamburger menu વિકલ્પોને સંતાડી દે છે: ગૌણ વસ્તુઓ માટે એ ઠીક છે, પણ મુખ્ય માટે જોખમી)
Quiz
Navigation ને નીચેનામાંથી કઈ રીતે સમજવું સૌથી યોગ્ય છે?
- સુંદર દેખાવા માટે છેલ્લે ઉમેરાયેલો શણગારનો ટુકડો
- Information architecture નું દેખાતું રૂપ, જે હું ક્યાં છું, ક્યાં જઈ શકું અને પાછો કઈ રીતે ફરું એના જવાબ આપે છે
- App ની રંગયોજના જેવી જ વસ્તુ
- ફક્ત websites પર જ જરૂરી, mobile apps પર ક્યારેય નહીં
- વપરાશકારોથી content સંતાડવાની રીત
Show the answer
Information architecture નું દેખાતું રૂપ, જે હું ક્યાં છું, ક્યાં જઈ શકું અને પાછો કઈ રીતે ફરું એના જવાબ આપે છે
Navigation એ નીચે રહેલી information architecture ની દેખાતી અને વાપરી શકાય એવી સપાટી છે: એ વપરાશકારોને એ રચના પર ફરવા દે છે અને એમના 3 સતત પ્રશ્નોના જવાબ આપે છે (હું ક્યાં છું, ક્યાં જઈ શકું, પાછો કઈ રીતે ફરું). વિકલ્પ A એને શણગાર ગણીને ક્ષુલ્લક બનાવે છે; navigation તો રચનાત્મક અને કાર્યકારી છે, સુશોભન નહીં. વિકલ્પ C એને visual design સાથે ગૂંચવે છે (રંગ તો Unit 4 નો વિષય છે). વિકલ્પ D ખોટો છે: mobile ને તો navigation ની તીવ્ર જરૂર પડે છે (નીચેનાં tabs, પાછા જવાના હાવભાવ). વિકલ્પ E એના હેતુને જ ઊલટાવી નાખે છે (એ content ને ખોલી આપે છે, સંતાડતું નથી). પરીક્ષામાં લખવા જેવો મુખ્ય સંબંધ આ છે: IA એટલે રચના; navigation એટલે વપરાશકારો એ રચના પર કઈ રીતે ફરે છે તે.
Think first
Hamburger menu નો સોદો
પડદો ચોખ્ખો રાખવા FestConnect પોતાના મુખ્ય વિભાગોને hamburger menu (ત્રણ લીટીવાળા ચિહ્ન) પાછળ મૂકી શકે, અથવા એમને હંમેશાં દેખાતાં નીચેનાં tabs તરીકે બતાવી શકે. બંનેમાં શું જતું કરવું પડે છે, અને મુખ્ય navigation માટે કયું બંધબેસે? વિચારીને પછી tap કરો.
Show the answer
Hamburger menu વિકલ્પોને એક tap પાછળ સંતાડી દે છે, અને એથી ચોખ્ખો પડદો મળે છે ખરો, પણ એની કિંમત શોધી શકાવાની ક્ષમતામાં ચૂકવવી પડે છે: આંખથી દૂર એટલે મનથી દૂર, એટલે વપરાશકારો સંતાયેલી સુવિધાઓ ઓછી વાપરે છે. નીચેનાં tabs મુખ્ય વિભાગોને હંમેશાં દેખાતા રાખે છે: તરત નજરે ચડે અને એક જ tap દૂર, પણ એની કિંમત પડદાની જગ્યામાં ચૂકવવી પડે છે.
મુખ્ય navigation માટે (એટલે કે Register કે Events જેવા થોડા પાયાના વિભાગો જે વપરાશકારોને સતત જોઈએ છે) હંમેશાં દેખાતાં tabs જ જીતે છે: તમારા સૌથી અગત્યના રસ્તા hamburger પાછળ સંતાડવાથી વપરાશકારો ખોવાઈ જાય છે. Hamburger ને ગૌણ અને ઓછી વપરાતી વસ્તુઓ માટે જ રાખો. સિદ્ધાંત આ રહ્યો: મુકામ જેટલો અગત્યનો, એનું navigation એટલું જ વધુ દેખાતું હોવું જોઈએ.
Watch out
Navigation માં થતી ભૂલો
'હું ક્યાં છું?' નો જવાબ જ નહીં: અત્યારના સ્થાનને ઉઠાવ ન આપો તો વપરાશકારો દિશા ભૂલી જાય છે.
પાછા ફરવાનો રસ્તો નહીં: દરેક પડદાને પાછા જવાનો કે ઘરે પહોંચવાનો સ્પષ્ટ રસ્તો જોઈએ; આગળ રસ્તો બંધ હોય એવા છેડા વપરાશકારોને ફસાવે છે (એ જ interaction design નો પ્રવાહનો નિયમ).
ભારે ભરખમ menus: ઉપલા સ્તરે બહુ બધી વસ્તુઓ હોય તો ગૂંગળામણ થાય છે; મુખ્ય જૂથ નાનું રાખો.
મુખ્ય navigation સંતાડવું: પાયાના વિભાગોને hamburger માં દાટી દેવાથી એમનો ઉપયોગ ઘટે છે; અગત્યના રસ્તા દેખાતા રાખો.
અસ્થિર navigation: જે navigation જગ્યા બદલે કે દરેક પડદે જુદું પડે એ વપરાશકારોને ફરી ફરી શીખવા મજબૂર કરે છે.
Theory
Unit 3 પૂરું: રચના ઘડાઈ ગઈ
FestConnect પાસે હવે વર્તન (interaction design), રચના (information architecture), નકશો (wireframes અને prototypes) અને રસ્તા (navigation) છે: એટલે કે આખું કાર્યકારી હાડપિંજર, જે એક પણ લીટી code લખ્યા પહેલાં સસ્તામાં ચકાસાઈ ગયું છે. જે હજી નથી એ છે એનો દેખાવ. Unit 4 એને સુંદર અને સ્પષ્ટ બનાવે છે: typography, રંગનું શાસ્ત્ર, layout, visual hierarchy, iconography અને branding. પહેલાં રચના, પછી શૈલી: આ જ સાચો ક્રમ છે.
Summary
Key takeaways
- Navigation એટલે UI ના ઘટકોની એ વ્યવસ્થા જે વપરાશકારોને product માં ફરવા દે છે: એટલે કે information architecture નું દેખાતું રૂપ.
- એ વપરાશકારના 3 પ્રશ્નોના જવાબ આપે છે: હું ક્યાં છું, ક્યાં જઈ શકું, પાછો કઈ રીતે ફરું.
- પ્રકાર: global કે primary, local કે secondary, contextual, breadcrumbs, અને utility.
- સિદ્ધાંતો: સાતત્ય, સ્પષ્ટ નામ, અત્યારના સ્થાનને ઉઠાવ, મુખ્ય કામ સુધી ઓછામાં ઓછા click, ભાર ન ભરવો, અને શોધી શકાય એવું રાખવું.
- Hamburger menus વિકલ્પોને સંતાડે છે (શોધવાનું અઘરું બને): ગૌણ વસ્તુઓ માટે ઠીક, પણ મુખ્ય navigation માટે જોખમી.
- IA એટલે રચના; navigation એટલે વપરાશકારો એ રચના પર કઈ રીતે ફરે છે તે.
- યાદ રાખવાની કડી: સારું navigation હંમેશાં કહી દે છે કે હું ક્યાં છું, ક્યાં જવાય, અને પાછા કઈ રીતે ફરાય.