Naqshadaynta UI/UX

Waxa guddiyadu raadiyaan

• Waxaad naqshadaysaa adigoo ka duulaya isticmaalayaasha, ee kama duulaysid dookhaaga: waxaad sheegi kartaa cidda isticmaalayaashu ahaayeen, dhibaatada ay qabeen iyo sida aad u ogaatay, adigoo la hadlay, daawaday ama xog akhriyey.
• Hab cad oo ka bilaabma dhibaatada ilaa xal la tijaabiyey, iyo caddayn in naqshaddaadu isbeddeshay sababo la xidhiidha waxa aad ka baratay cilmi-baadhista ama tijaabada.
• Xirfad Figma oo dhab ah: auto layout, components iyo variants, prototypes la riixi karo, iyo faylal habaysan oo developer furi karo oo isticmaali karo.
• Naqshadayn ku habboon xaaladda gudaha: taleefanno Android ah oo yaryar oo jaban, internet gaabis ah ama qaali ah, dad aan app-yada u baran, iyo shaashado Soomaali iyo Ingiriisi ah.
• Wada-shaqayn developers iyo maareeyayaasha product-ka: naqshado macquul ah, wareejin cad, ixtiraamka xadka farsamada, iyo aqbalaad deggan in aan wax walba la dhisin.

Su'aalaha ay weydiiyaan

1. 1“Nagu soo mari hal case study oo portfolio-gaaga ka mid ah.”

   Sababta ay u weydiiyaan: Badanaa tani waa su'aasha ugu horreysa. Waxay hubinayaan inaad sheekada ka sheegi karto dhibaatada ilaa natiijada, iyo waxa adigu gaar ahaan ku samaysay kooxda dhexdeeda.

   Sida looga jawaabo

   • Ku fur dhibaatada iyo isticmaalayaasha, kadib doorkaaga iyo cidda kale ee kooxda ku jirtay.
   • Dooro laba go'aan oo muhiim ah oo sheeg cilmi-baadhista ama tijaabada keentay mid kasta.
   • Ku xidh natiijada, ama waxa aad baratay haddii aan la bilaabin, iyo waxa aad beddeli lahayd.

   This was the sign-up flow for a small delivery app in Hargeisa. I was the only designer, working with two developers. Many users stopped at the registration form, so I watched five people try it on their own phones. Most got stuck on the email field because they did not use email. We changed sign-up to a phone number with an SMS code and cut the form from eight fields to three. After launch, the developers' data showed more people finishing sign-up. Next time I would test before building the first version.

2. 2“Sidee u samaysaa cilmi-baadhista isticmaalayaasha marka waqtiga ama miisaaniyaddu yar tahay?”

   Sababta ay u weydiiyaan: Shirkado badan oo halkan ah ma laha miisaaniyad cilmi-baadhis. Waxay rabaan inay ogaadaan inaad weli ogaan doonto waxa isticmaalayaashu u baahan yihiin, habab fudud, halkii aad isticmaalayaasha gebi ahaanba ka boodi lahayd.

   Sida looga jawaabo

   • La hadal qiyaastii shan isticmaale oo dhab ah; taasi horeba way muujinaysaa dhibaatooyinka waaweyn badankood.
   • Isticmaal waxa horeba jira: wicitaannada adeegga macaamiisha, cabashooyinka WhatsApp, faallooyinka app-ka iyo analytics.
   • Weydii su'aalo furan oo ku saabsan waxa dadku sameeyeen, ee ha weydiin su'aalo hoggaamiya oo ku saabsan waxa ay jecel yihiin, natiijooyin gaaban kooxda la wadaag.

3. 3“Maxay ku kala duwan yihiin UI iyo UX?”

   Sababta ay u weydiiyaan: Hubin aasaasi ah oo ah inaad UX u aragto waayo-aragnimada oo dhan, UI-na lakabka muuqaalka, iyo inaadan naqshadaynta u arkin qurxin oo keliya.

   Sida looga jawaabo

   • UX waa sida ay u shaqayso iyo sida loo dareemo: socodka, tallaabooyinka, iyo in dadku dhammayn karaan hawshooda.
   • UI waa waxa dadku arkaan oo taabtaan: qaab-dhismeedka, farta, midabka, badhamada iyo astaamaha.
   • Bixi hal tusaale oo degdeg ah oo UI wanaagsan uusan badbaadin karin socod xun.

4. 4“Sidee ugu naqshadayn lahayd isticmaalayaal leh taleefanno jaban iyo internet gaabis ah?”

   Sababta ay u weydiiyaan: Tani waa xaaladda dhabta ah ee isticmaalayaal badan oo Soomaaliya iyo Somaliland ah. Waxay hubinayaan inaad ka fikirto cabbirka shaashadda, qiimaha data-da, internet-ka go'a iyo dadka aan app-yada u baran.

   Sida looga jawaabo

   • Ka bilow shaashad Android ah oo yar, ee ha ka bilaabin laptop, boggaggana ka dhig kuwo fudud.
   • Naqshadee xaaladaha loading, khaladka iyo offline-ka oo leh badhan “isku day mar kale” oo cad, foomamkana ha kaydiyaan horumarka.
   • Isticmaal badhamo waaweyn, erayo Soomaali ah oo fudud, oo ku tijaabi taleefan jaban oo dhab ah iyo data mobile.

   I start on a small Android screen, because that is what most of our users have. I keep pages light: compressed images, system fonts where possible and no autoplay video. Every screen has a loading state and a clear error with a retry button, because connections drop. Forms save progress, so a user who loses signal does not start again. I use large buttons and simple Somali words, and before handoff I test on a real low-cost phone over mobile data, not on office Wi-Fi.

5. 5“Sidee u samaysaa naqshad qof kastaa isticmaali karo (accessible)?”

   Sababta ay u weydiiyaan: Waxay hubinayaan inaad u naqshadayso dadka araggoodu daciifka yahay, kuwa midabbada kala garan waayo ama gacmahoodu gariiraan, iyo qof kasta oo taleefan ku isticmaalaya qorrax kulul.

   Sida looga jawaabo

   • Sheeg xeerka contrast-ka: ugu yaraan 4.5:1 qoraalka caadiga ah (WCAG AA), oo sheeg inaad ku hubiso qalab contrast.
   • Weligaa midab keliya ha u isticmaalin macne; khaladaadka iyo xaaladaha ku dar astaan ama erayo.
   • Meelo farta lagu taabto oo waaweyn, calaamado muuqda oo ku yaal meelaha foomka, qoraal cabbirkiisu akhrin karo iyo alt text sawirrada.

6. 6“Sidee naqshadahaaga ugu wareejisaa developers-ka?”

   Sababta ay u weydiiyaan: Naqshadeeyeyaal badan ayaa sameeya shaashado qurux badan oo aan la dhisi karin. Guddiga, oo badanaa developer ku jiro, wuxuu hubinayaa inaad kooxda la shaqayso oo aad gudbiso wax kasta oo ay u baahan yihiin.

   Sida looga jawaabo

   • Developers-ka ku soo dar ka hor inta naqshaddu dhammaan si ay u sheegaan waxa ay adag tahay in la dhiso.
   • Faylal Figma oo nadiif ah: components, auto layout, layers magac leh, frames lagu calaamadeeyey inay diyaar u yihiin horumarinta.
   • Naqshadee xaalad kasta (madhan, loading, khalad, guul), ku dar qoraallo gaaban oo ku saabsan dhaqanka, oo dib u eeg shaashadaha la dhisay.

   I share designs with the developers before they are final, so they can tell me what is hard to build. In Figma I use components and auto layout, name my layers and mark which frames are ready for development. I design every state, not only the happy path: empty, loading, error and success. I add short notes for behaviour, like what happens after a failed payment. When they finish, I check the screens on a real phone and list any differences in one shared document.

7. 7“Noo sheeg mar ay tijaabadu muujisay in naqshaddaadu khaldan tahay.”

   Sababta ay u weydiiyaan: Waxay rabaan is-hoosaysiin iyo caado tijaabin. Naqshadeeye aan weligii la caddayn inuu khaldamay, malaha weligii kuma tijaabin isticmaalayaal dhab ah.

   Sida looga jawaabo

   • Sheeg waxa aad u malaysay iyo sababta ay waqtigaas ugu muuqatay mid sax ah.
   • Sharax waxa tijaabadu muujisay, erayo fudud, adigoon isticmaalayaasha eedayn.
   • Sheeg waxa aad beddeshay iyo waxa aad hadda si kale u samayso bilowga mashruuca.

   On a bill-payment screen I hid the account number field behind an icon to make the page look clean. In testing, three of the five people could not find it and thought the app was broken. I had designed for how it looked, not for how people used it. I brought the field back as the first thing on the screen with a clear Somali label. Since then, I test my first rough prototype with a few people before I polish anything.

Tusaalooyinka jawaabaha waa English, luqadda guddiyada badankoodu isticmaalaan. Adigu erayadaada ku sheeg.

Mawduucyada dib u eeg

• User research (interviews, observation)Barashada waxa isticmaalayaashu sameeyaan iyo waxa ay u baahan yihiin adigoo la hadlaya oo daawanaya iyagoo isticmaalaya product. Ogow farqiga u dhexeeya “maxaad samaysay markii u dambaysay?” iyo su'aal hoggaamisa sida “ma jeclaan lahayd feature-kan?”
• Personas and user journeysPersona waa sharaxaad gaaban oo isticmaale caadi ah oo ku salaysan cilmi-baadhis, ee aan male ahayn. Journey map wuxuu muujiyaa tallaabooyinka, dareenka iyo meelaha xanuunka marka qofkaasi isku dayo inuu yool gaadho, sida biil bixinta.
• User flows and information architectureUser flow waa jidka shaashadaha iyo go'aannada lagu dhammaynayo hal hawl. Information architecture waa sida waxyaabaha iyo menu-yada loo kooxeeyo oo loo magacaabo si dadku wax u helaan. Filo inaad flow ku sawirto whiteboard.
• Wireframes, mockups and prototypesWireframe waa qaab-dhismeed faahfaahin yar oo sanduuqyo cawl ah si loogu heshiiyo dhismaha. Mockup wuxuu ku darayaa muuqaalka dhabta ah. Prototype waa la riixi karaa si dadku u tijaabiyaan socodka. Waxaa laga yaabaa inay weydiiyaan goorta mid kasta la isticmaalo.
• Figma (auto layout, components, variants)Auto layout wuxuu frames-ka ka dhigaa kuwo la weynaada ama la yaraada waxa ku jira. Components waa walxo dib loo isticmaali karo; variants waa noocyadooda, sida badhan xaaladaha caadiga, la riixay iyo la xidhay. Diyaar u ahow inaad mid toos u dhisto.
• Design systemsMaktabad la wadaago oo midabbo, qaababka farta, kala fogaanshaha iyo components leh iyo xeerarka isticmaalkooda, si product-ka oo dhami isugu ekaado oo isugu dhaqmo. Waxaa laga yaabaa inay weydiiyaan sida aad ugu bilaabi lahayd koox yar.
• Accessibility and WCAG contrastWCAG waa heerka caadiga ah ee accessibility-ga. Heerka AA wuxuu doonayaa contrast ugu yaraan 4.5:1 qoraalka caadiga ah iyo 3:1 qoraalka waaweyn. Sidoo kale: midab keliya ha ku tiirsanaan, calaamadee meelaha foomka, meelaha farta lagu taabtana ka dhig kuwo waaweyn.
• Mobile-first and responsive designNaqshadaynta shaashadda ugu yar marka hore, kadibna lagu daro tablets iyo kombiyuutarrada. Responsive waxay ka dhigan tahay in qaab-dhismeedku la qabsado ballac kasta oo shaashad ah. Isticmaalayaal badan oo halkan ah waxay haystaan shaashado Android ah oo cidhiidhi ah iyo data xadidan.
• Usability testingIn dad dhab ah la siiyo hawl prototype ku saabsan, la daawado adigoon caawin, oo la qoro meelaha ay ku xayiraan. Qiyaastii shan isticmaale badanaa waxay helaan dhibaatooyinka ugu waaweyn. Ogow sida aad hawl u qori lahayd iyo sida aad natiijooyinka u diiwaangelin lahayd.
• Usability heuristicsXeerar caan ah oo lagu qiimeeyo interface: muuji xaaladda nidaamka, ku hadal luqadda isticmaalaha, oggolow dib-u-celin (undo), ka hortag khaladaadka, ahaw mid joogto ah. Waxay faa'iido leeyihiin marka ay kaa codsadaan inaad dhaleeceyso app-kooda.
• UX metrics (task success, drop-off, conversion)Task success waa inta isticmaale ee dhammaysa hawl; drop-off waa meesha ay kaga baxaan socodka; conversion waa inta gaadha yoolka, sida lacag bixin la dhammaystiray. Guddiyadu waxay jecel yihiin naqshadeeyeyaasha hubiya in isbeddel caawiyey iyo in kale.

Hawlaha la sameeyo ee laga yaabo in lagu siiyo

1. 1Tartan naqshadayn toos ah, 45 daqiiqo ilaa laba saac: tusaale ahaan, “naqshadee hab macaamiishu ku bixiyaan biilka biyaha” ama “ballan ka qabso xarun caafimaad”. Marka hore weydii cidda isticmaalayaashu yihiin iyo xaddidaadaha, si cod dheer ah u sheeg waxa aad u malaynayso, socodka sawir ka hor shaashad kasta, oo ku dar xaaladaha khaladka.
2. 2Tartan guriga la gaysto oo dhawr maalmood ah. Tus habkaaga, ee ha tusin shaashadaha ugu dambeeya oo keliya: dhibaatada, malo-awaalka, socodka, wireframes, hal fikrad oo la tijaabiyey. Ku ekoow waqtiga ay soo jeediyaan; haddii brief-ku u eg yahay product dhan oo ay bilaabi lahaayeen, si edeb leh u weydii baaxadda.
3. 3Soo bandhigid portfolio oo 20 ilaa 30 daqiiqo ah oo hal ama laba case study ah, badanaa developer iyo maareeye product ah ayaa su'aalo weydiinaya. Saacad ku celceli, link-yada Figma ama PDF u diyaari si offline ah haddii internet-ku go'o.
4. 4“Maxaad ka hagaajin lahayd app-kayaga ama website-kayaga?” Product-kooda taleefankaaga ku isticmaal ka hor wareysiga, qor laba ama saddex dhibaato oo mid kastaa leh sababta iyo talo, oo ixtiraam muuji: dadkii dhisay ayaa laga yaabaa inay guddiga ku jiraan.

Su'aalaha portfolio-ga

• Laba ama saddex case study oo dhammaystiran ayaa ka fiican labaatan sawir shaashadeed oo qurux badan: dhibaatada, isticmaalayaasha, doorkaaga, habka, go'aannada iyo natiijada.
• Tus qaybta dhexe ee aan nadiifka ahayn: qoraallada cilmi-baadhista, sawirro-gacmeed, wireframes, natiijooyinka tijaabada iyo waxa isbeddelay sababtooda.
• Daacad ka ahow doorkaaga iyo in la bilaabay iyo in kale, calaamadee mashaariicda fikradda ah, weligaana ha tusin shaashadaha qarsoodiga ah ee macmiil ogolaansho la'aan.
• Portfolio-ga ka dhig mid degdeg u furma oo taleefanka lagu akhrin karo, oo hubi in link kasta oo prototype Figma ah uu furmo login la'aan.

Khaladaadka ka fogow

• Tusidda shaashadaha ugu dambeeya oo keliya, dhibaato, isticmaalayaal iyo sababo go'aannada la'aan.
• Ku naqshadaynta frame iPhone weyn ama laptop marka isticmaalayaasha badankood haystaan taleefanno Android ah oo yaryar iyo data xadidan.
• Naqshadaynta jidka guusha oo keliya, iyadoo aanay jirin xaalado madhan, loading, khalad ama offline ah.
• Ka hadlidda “isticmaalayaasha” adigoon la hadlin midkoodna, ama been-abuurka faahfaahinta persona iyo natiijooyinka cilmi-baadhista.
• Qoraal cawl khafiif ah iyo badhamo aad u yaryar maxaa yeelay “way nadiif u muuqdaan”, inkastoo ay ku dhacaan contrast-ka oo ay adag tahay in la taabto.
• Faylal Figma oo qasan oo leh layers aan magac lahayn iyo components la kala furfuray oo aanay developers-ku ka shaqayn karin.

Hubin degdeg ah

5 su'aalood. Mid kasta ka jawaab si aad u aragto sharaxaadda.