Disenyo ng block ng gusali: isang modular na diskarte sa disenyo para sa UXers

Isang artikulo na nakakatulong na punan ang mga gaps ng mga modular na disenyo ng modelo mula sa isang pananaw sa UX.

Magsisimula ako sa isang kuwento

Kung galit ka sa mga kwento, dapat mong laktawan ang bahaging ito. Tungkol ito sa isang taga-disenyo ng UX na tungkulin sa kampeon ng isang modular na diskarte sa disenyo para sa kanyang samahan. Siya ay may maikling kayumanggi buhok at asul na mga mata. Kung hindi mo na nahulaan ngayon, ang taga-disenyo ng UX ay sa akin.

Mga walong buwan na ang nakalilipas, ang aming koponan ay nag-rally sa isang modular na diskarte sa disenyo na tinatawag na object-oriented UX (OOUX). Hindi tulad ng iba pang mga malalawak na sistema ng modyul, hinihiling sa iyo ng OOUX na tumuon sa modularizing ang iyong mga uri ng pangunahing nilalaman - kung ano ang tawag sa OOUX - at tingnan kung paano nauugnay ang mga bagay na ito sa isa't isa. Ang prosesong ito ay tumutulong sa koponan ng disenyo na ilantad ang likas na mga pagkakataon ng pag-navigate sa konteksto at itulak patungo sa mga pare-parehong module ng UI.

Well ... mabuti para sa pagdidisenyo ng mga arkitektura ng impormasyon at mga aklatan ng pattern, ngunit ano ang tungkol sa pagdidisenyo ng mga karanasan. Pagkatapos ng lahat, ang pagpapakilos ng iyong nilalaman ay kalahati lamang ng labanan. Kung pupunta ka sa mga linya ng UX, kailangan mong itanong kung bakit at paano.

Ang bakit at paano

Maaari mong sabihin sa iyong sarili: "huwag mo akong sabihin sa akin kung bakit at paano! Ako ay isang mananaliksik ng UX, dang nabbit! Kumakain ako kung bakit at paano para sa agahan. ”Kaya't ipaliwanag ko.

Hindi ako nagsasalita tungkol sa diskarte sa antas ng tampok. Hindi ako nagsasalita tungkol sa mga daloy ng proseso, wireframes at prototypes. Nagsasalita ako tungkol sa diskarte sa antas ng application. Alam mo, ang bagay na dapat nating palaging ginagawa, ngunit kahit papaano ay hindi magkakaroon ng oras para sa? At pinag-uusapan ko ang gawin itong isang mahalagang bahagi ng aming diskarte sa aming iba pang mga diskarte, tulad ng modular na disenyo.

Upang mabigyan ka ng kaunting konteksto, sabihin sa pamamagitan ng isang halimbawa. Sabihin natin na nagdidisenyo kami ng isang dating app kung saan ang isa sa mga pangunahing piraso ng nilalaman ay isang profile. Gamit ang modular na disenyo, tatanungin namin: "saan maaaring lumitaw ang nilalamang ito sa UI?" - at batay sa aming sagot, magdidisenyo kami ng mga module para sa bawat isa sa mga sitwasyong iyon. Marahil ay magdidisenyo kami ng isang profile na maaaring maipakita sa isang listahan o isang profile na umaabot sa buong display. Arkitektura ng impormasyon. Mga pattern. Suriin, suriin.

Isang

Ngunit ngayon na napagpasyahan namin kung ano, ano ang mangyayari kapag hindi natin maiisip na kailangan nating mag-isip tungkol sa kung bakit nais ng isang tao na makakita ng isang partikular na profile sa unang lugar? At paano lilitaw ang profile na iyon para sa taong iyon? Ipinapatupad ba natin ang mga diskarte na iyon pagkatapos ng katotohanan at umaasa na walang masira?

Umaasa ako na ilalagay mo ang iyong mga ulo sa labas doon, dahil ang sagot ay isang resounding no.

Sa halip na tumalon muna ang ulo sa pagdidisenyo ng aming mga module, dapat tayong magtayo ng isang istratehikong balangkas na makakatulong na itaboy ang aming mga pagsusumikap sa disenyo mula sa bawat anggulo. Sa halip na tukuyin ang mukha ng aming nilalaman - ang mga bagay na lilitaw sa UI - dapat nating simulan sa pamamagitan ng pagtukoy sa kung paano at kung bakit suportado ang nilalaman na iyon. Ito ay tinatawag na disenyo ng block ng gusali.

Ipasok ang disenyo ng block block

Sa halip na hilingin sa iyo na isipin ang tungkol sa nilalaman ng iyong mga module bago, tulad ng iba pang mga modelo, hinihiling sa iyo ng disenyo ng block block na mag-focus sa halip na diskarte sa likod ng nilalaman na iyon.

Sa disenyo ng block block, hayaan ang diskarte na magbigay ng balangkas para sa disenyo; hindi sa iba pang mga paraan sa paligid.

Pagkatapos mo lamang natukoy ang iyong mga pangunahing diskarte sa UX - ang frame na humahawak ng iyong nilalaman - maaari mo bang simulan ang pagdidisenyo kung paano ang nilalaman ay kakatawan sa interface. Ang "malaking larawan" na diskarte para sa bawat piraso ng pangunahing nilalaman ay ang iyong block ng gusali. Sama-sama, tinukoy ng iyong mga bloke ng gusali ang UX ng iyong produkto.

Ang disenyo ng block ng gusali ay modular na disenyo para sa UXers.

Ang anatomasyong block block

Upang mas maunawaan ang pamamaraang ito sa paglikha ng makabuluhan, nakabalangkas na nilalaman, bumalik tayo sa halimbawa ng dating app. Ngayon na nakilala ko ang isang piraso ng pangunahing nilalaman sa aking aplikasyon - isang profile - oras na upang dumaan at matukoy kung anong mga estratehiya ang maaaring maimpluwensyahan kung paano idinisenyo ang bloke na ito. Sa pamamagitan ng paggalugad ng ugnayan sa pagitan ng iba pang mga istratehikong hakbangin at aming nilalaman, maiisip namin nang mas kritikal tungkol sa kung paano namin lapitan ang disenyo at paghahatid ng impormasyong ito.

Ang anatomya ng profile block ay nagsisimula na magmukha.

Kapag naggalugad ng mga ugnayan sa pagitan ng mga diskarte sa antas ng aplikasyon, pinakamahusay na magsimula sa isang mataas na antas at gumana ang iyong paraan. Halimbawa, kung nakilala ko ang personas bilang isang pangunahing sangkap ng aking diskarte, maaari kong masira ang diskarte na ito sa pamamagitan ng pagkilala sa:

  • ang mga tiyak na personas na umaakit sa mga profile;
  • kung saan sa app sila ay nakikipag-ugnay sa nilalamang ito;
  • ang kanilang konteksto ng paggamit;
  • ang mga pangunahing aksyon na ginagawa nila sa mga profile;
  • at kung gaano kadalas nila naa-access ang nilalamang ito.

Ito ay maaaring magmukhang ganito:

Ang relasyon ng profile ng persona ay nagbibigay ng higit na konteksto para sa kung ano ang hitsura at nararamdaman ng mukha ng aking profile.

Kapag binigyan ko ng kaunting konteksto kung bakit ang nilalamang ito ay mahalaga sa isang tiyak na uri ng gumagamit, maaari kong simulan ang pag-iisip nang mas kritikal tungkol sa kung ano ang kailangang ma-prioritize, kung paano dapat maisaayos ang modyul upang maisulong ang mga pattern na tiyak na pag-uugali, at kung saan sa karanasan ang nilalamang ito ay kailangang maihatid.

Pinapayagan ng pamamaraang ito ang mga taga-disenyo na tumuon sa mga bagay na mahalaga at hindi mahuli sa visual apela, pakikipag-ugnay sa seduction, at iba pang mga pattern ng disenyo ng interface na mukhang mahusay, ngunit hindi suportahan ang aktwal na pag-uugali ng gumagamit.

Kung ulitin ko ang ehersisyo na ito sa mga tuntunin ng isang pangalawang estratehikong inisyatibo, makakakuha ng karagdagang mga pananaw. Depende sa bilang at pagiging kumplikado ng mga istratehikong hakbangin na mayroon ka sa lugar, mabilis itong maging isang proseso na masigasig sa oras. Inirerekumenda ko na magsimula sa hindi hihigit sa dalawang mga diskarte.

Kaya doon mo ito. Isang halimbawa ng kung paano basahin ang iyong mga paa sa disenyo ng block block. Kung sa palagay mo ito ay magiging kapaki-pakinabang na ehersisyo para sa iyong koponan sa disenyo, tingnan ang Mabilis na Gabay sa Pagsisimula sa ibaba para sa ilang mga karagdagang tip. At, siyempre, gusto kong marinig ang iyong mga saloobin sa lahat ng mga bagay na na-modululate. Idagdag ang iyong mga puna sa ibaba o maabot ang LinkedIn.

Mabilis na gabay sa pagsisimula

Natagpuan ko na maraming mga modular na modelo ng disenyo na nahuhulog sa pagbibigay ng aksyon sa kanilang mga mambabasa, kaya hayaan mo akong magbigay ng mahalagang impormasyon:

Hakbang # 1: Diskarte sa imbentaryo.

Gumagawa kami ng mga imbentaryo ng nilalaman at sangkap, kaya bakit hindi isang imbentaryo ng diskarte? Gumawa ng isang listahan ng lahat ng mga diskarte sa antas ng application na mayroon ka sa lugar. Kabilang sa mga halimbawa ang: Tao, data, konteksto ng paggamit at disenyo ng kapaligiran ng tao, pagtugon, atbp Ito ay isang magandang pagkakataon na i-pause at tanungin "mayroon ba tayong matatag na diskarte sa lugar para sa aming aplikasyon?" Kung ang sagot ay hindi, oras na upang makapunta sa trabaho.

Upang magawa: Rally mga miyembro ng koponan na nakapag-iisa na lumikha ng kanilang sariling mga imbentaryo ng diskarte.

Hakbang # 2: Tukuyin ang iyong pangunahing nilalaman.

Ito ang mga bagay na ginagawa ng iyong mga gumagamit sa iyong aplikasyon. Upang malaman ito, hadlangan ang ilang oras para sa isang session ng brainstorming sa iyong koponan. Tanungin ang iyong sarili ng mga katanungan tulad ng: "ano ang hinahanap ng aking mga gumagamit? Tingnan? Mag-download? ”Kapag nakilala mo ang isang piraso ng pangunahing nilalaman, isulat ito sa isang piraso ng papel at isabit ito sa isang dingding.

Upang magawa: Magdaos ng isang paunang sesyon ng brainstorming sa iyong koponan.

Hakbang # 3: Tukuyin kung paano at bakit.

Ngayon na natukoy mo ang iyong mga diskarte sa antas ng application at pangunahing nilalaman, oras na upang dalhin ang dalawa! Bumalik sa iyong brainstorming room para sa isang follow-up na pagpupulong, at siguraduhin na ang iyong koponan ay nagdadala ng kanilang mga diskarte sa diskarte. Para sa bahaging ito ng proseso, hayaan ang diskarte sa lugar ng iyong koponan na nai-post ang tala sa anumang pangunahing nilalaman kung saan ang diskarte na maaaring magkaroon ng epekto.

Upang magawa: Magdaos ng isang follow-up na brainstorming session sa iyong koponan.

Hakbang # 4: Ang anatomya ng isang bloke ng gusali.

Panahon na upang hatiin at talunin. Magtalaga ng mga miyembro ng koponan ng ilang bilang ng mga pangunahing uri ng nilalaman - o mga bloke ng gusali - at patunayan ito sa anatomya ng nilalamang ito.

Upang magawa: Magtalaga ng bawat miyembro ng koponan na may ilang mga uri ng nilalaman. Ang miyembro ng koponan na iyon ay dapat tukuyin ang anatomya ng nilalaman na iyon.

Hakbang # 5: Align, align, align

Bilang pangwakas na hakbang, balikan ang gang sa anyo ng isang mababang-key na pagtatanghal kung saan ang bawat miyembro ng koponan ay nagtatanghal ng anatomya ng kanilang mga bloke ng gusali. Makatipid ng oras sa dulo para sa mga katanungan, pagkakahanay at mga pagpapasya sa susunod na mga hakbang para sa pagmamaneho ng indibidwal na madiskarteng bahagi ng bawat bloke ng gusali.

Upang magawa: Mag-iskedyul ng oras para sa mga miyembro ng koponan na ipakita ang kanilang anatomy block block.

Ang artikulong ito ay dinala sa iyo ng mga RUXERS. Ang RUXERS ay isang komunidad ng mga tunay na karanasan sa karanasan ng gumagamit na nagbabahagi at tinatalakay ang pinakabagong sa disenyo, karanasan ng gumagamit, kakayahang magamit, at pananaliksik. Nasa Twitter kami - sumali sa amin!