Yunit 7 / 11

Artificial Intelligence sa Prototyping at High Definition Design

Mga nadagdag:

  • Kakayahang gumawa ng mabilis na mga prototype na skeleton, sample na nilalaman at mga ideya sa micro-interaksyon gamit ang artificial intelligence
  • Kakayahang gumawa ng makatotohanang teksto at data ng placeholder para sa prototype at subukan ang disenyo sa totoong paggamit
  • Kakayahang mapanatili ang pare-pareho at lohika ng bahagi kapag inililipat ang output ng AI sa tool sa disenyo (Figma atbp.)

Ang prototype ay isang naki-click, nasasabing imitasyon ng isang disenyo; Ito ay isang simulation na maaaring maranasan ng gumagamit tulad ng sa totoong produkto. Ang high-fidelity na disenyo, sa kabilang banda, ay disenyo na naging mas malapit sa panghuling produkto na may kulay, palalimbagan, totoong nilalaman at mga micro na pakikipag-ugnayan. Ang layunin sa yugtong ito ay gawing masusubok ang ideya na "parang ito ay totoo." Malakas ang AI dito sa tatlong paraan: mabilis na paggawa ng mga skeleton at variation, pagbibigay ng makatotohanang content at data ng placeholder, at pagmumungkahi ng mga ideya sa micro-interaction. Ngunit ang pagpapanatili ng pare-pareho at lohika ng bahagi kapag inililipat ang output sa tool sa disenyo-iyon ay, ang pag-angkop sa system sa system nang hindi ito ginugulo-ay isang gawain ng tao.

Layunin ng prototype: upang subukan ang tamang tanong sa murang halaga

Ang prototyping ay may isang layunin: upang subukan ang isang palagay nang mura, nang walang pagsulat ng code. "Naiintindihan ba ng user ang daloy na ito?", "Pinapabilis ba ng layout na ito ang kanyang gawain?" Iyon ang dahilan kung bakit ang prototype ay hindi kailangang maging kasing perpekto ng tunay na produkto; ito ay kailangang maging tunay na sapat upang kumbinsihin na mailarawan ang tanong na susuriin.

Pinapabilis ng artificial intelligence ang kredibilidad na ito. Ngunit may panganib: ang mataas na resolution ay parang "tapos na". Kapag nakakita ang mga stakeholder ng isang pinakintab na prototype, maaaring mapagkamalan nilang ito ang pinal na desisyon; Gayunpaman, ito ay isang hypothesis pa rin. Palaging sabihin nang malinaw kung ano ang sinusubukan ng prototype at kung ano ang bukas pa.

Pag-iingat: Ang pinakintab na prototype ay nagpapalaki sa kapanahunan. Kung hindi mo ito i-frame bilang "ito ay isang tool sa pagsubok, hindi ang pangwakas na disenyo; sinusubok namin ang tanong na ito" kapag ipinapakita ito sa stakeholder, malilikha ang maling inaasahan.

Makatotohanang nilalaman: pag-save ng prototype mula sa kasinungalingan

Ang pinakamalaking kasinungalingan ng isang prototype ay ang mga perpektong placeholder tulad ng "Lorem ipsum" at "First Name Last Name". Sa totoong mundo, mahaba ang mga pangalan, minsan walang laman ang mga listahan, minsan negatibo ang mga numero, minsan luma na ang mga petsa. Kapag ang prototype ay puno ng perpektong nilalaman, itinatago nito ang mga tunay na problema.

Dito mahalaga ang AI: gumagawa ito ng makatotohanang nilalaman ng placeholder at data na may iba't ibang haba, iba't ibang estado. Maaari mong ilapit ang prototype sa tunay na paggamit sa mga kahilingan gaya ng "Bigyan mo ako ng 20 makatotohanang pangalan ng produkto, ang ilan sa mga ito ay napakahaba", "Sumulat ng 5 iba't ibang walang laman na sitwasyon ng kaso", "Gumawa ng sample na data ng account kasama ang negatibong balanse." Kaya, ang pagsubok ay sumusubok sa katotohanan, hindi ang ideal.

Uri ng nilalaman

pekeng (nakaliligaw)

Makatotohanan (na may artificial intelligence)

Pangalan

"Pangalan Apelyido"

Mga halimbawang may maikli, mahaba, solong pangalan, espesyal na karakter

Listahan

laging puno

Blangko, 1-item, 100-element na variation

Numero

laging positibo

Zero, negatibo, napakalaking halaga

text

perpektong haba

Umaapaw na pamagat, napakaikling paglalarawan

petsa

ngayon

Nakaraan, hinaharap, "ngayon lang", "3 taon na ang nakalipas"

Mga micro na pakikipag-ugnayan: maliit ngunit mapagpasyahan

Ang mga microinteraction ay maliliit, iisang sandali ng pakikipag-ugnayan, tulad ng feedback kapag pinindot mo ang isang button, isang field na nagiging berde kapag napuno, isang naglo-load na animation, atbp. Lumilikha ito ng pakiramdam ng user na "narinig ako ng system." Ang AI ay isang mahusay na kasosyo sa brainstorming para sa pagbuo ng mga ideya sa micro-interaction (kailan, anong feedback, anong estado ang nagbabago). Ngunit ang bawat micro-interaction ay dapat na timbangin sa mga tuntunin ng performance, accessibility, at distraction; ang magarbong ngunit hindi kinakailangang animation ay nagpapabagal sa karanasan.

tatlong mini case

Case 1 — Pagbagsak ng order gamit ang totoong data. Pinuno ng isang team ang prototype ng 30 makatotohanan (napakahaba ng ilang) pangalan ng produkto na nabuo ng AI. Umapaw ang dalawang layout ng card; Ang problema ay nahuli at naayos bago ang pagsubok. Aralin: ang makatotohanang nilalaman ay maagang nagbubunyag ng mga nakatagong error.

Case 2 — Ang pinakintab na prototype ay lumikha ng mga maling inaasahan. Isang designer ang naghanda ng high-resolution na prototype para sa "flow testing lang" ngunit ipinakita ito sa mga stakeholder nang walang framing. Sinabi ng stakeholder na "mahusay, i-publish natin ito"; samantalang ang pagiging naa-access at nilalaman ay hindi pa umiiral. Aralin: malinaw na sabihin kung ano ang sinusubukan ng prototype.

Case 3 — Nasira ang consistency ng component. Ang screen sketch mula sa AI ay naglalaman ng ibang istilo ng button kaysa sa button sa sistema ng disenyo. Kapag ini-port ito sa Figma, nakalimutan ng taga-disenyo na i-link ito sa bahagi ng system; Mayroong dalawang magkaibang mga pindutan sa produkto. Aralin: kapag inililipat ang output sa tool, ang pagkonekta nito sa mga umiiral na bahagi ay kinakailangan.

Nakokopyang mga prompt

Bumuo ng makatotohanang nilalaman ng placeholder para sa screen na ito:- 20 <<uri ng elemento>> mga pangalan: ang ilan ay masyadong maikli, ang ilan ay masyadong mahaba, ang isa ay may espesyal na character.- 4 na walang laman na sitwasyon ng case.- 3 extreme na halimbawa ng data (zero, negatibo, sobrang laki). Layunin: upang subukan ang prototype na may tunay, hindi perpekto, paggamit. Konteksto: <<screen/produkto>

Ipanukala ang prototype skeleton para sa daloy na ito (listahan ng screen + pangunahing elemento sa bawat screen): Gawain: "<<gawain>>". Ang tanong na gusto kong subukan ay: "<<hypothesis>>". Magmungkahi lamang ng sapat na mga screen upang subukan ang tanong na ito; huwag mo nang dagdagan pa.

Magmungkahi ng 4 na ideya sa micro-interaction para sa pakikipag-ugnayang ito (pindutin ang pindutan, pag-verify sa field, pag-load, tagumpay). Para sa bawat: trigger, feedback, mungkahi sa tagal, at tala sa pagiging naa-access (sensitivity ng paggalaw, anunsyo ng screen reader).Konteksto: <<interaksyon>>

Suriin ang screen sketch na ito para sa pagiging tugma sa aking sistema ng disenyo: gawin ang button, typography, spacing, at kulay na sumunod sa aking mga umiiral nang panuntunan sa bahagi ("<<buod>>"). Ilista ang bawat item na hindi tugma at kung saang bahagi ng system dapat itong konektado. Draft: <<teksto>>

Mahinang prompt / Malakas na prompt

Mahina: "Magbigay ng sample na nilalaman para sa prototype na ito."

Ang resulta: perpektong haba, pare-pareho, pekeng nilalaman na nagtatago ng mga tunay na problema.

Strong: "Bumuo ng 20 pangalan ng produkto; ang ilan ay masyadong mahaba, ang isa ay may espesyal na karakter; magdagdag ng 4 na walang laman na case at 3 gilid na mga halimbawa ng data; layuning subukan ang prototype sa totoong paggamit."

Ang resulta: Content na talagang nagtutulak sa layout, na nagbubukas ng mga bug nang maaga.

Ang pagkakaiba: ang isang malakas na prompt ay nangangailangan ng iba't-ibang + edge case + layunin.

Mga karaniwang pagkakamali

  • Pagsubok na may perpektong nilalaman. Itinatago ng mga mahuhusay na placeholder ang mga totoong problema.
  • Napagkakamalang pinakintab na prototype ang pinal na desisyon. Kung hindi tapos ang pag-frame, magaganap ang mga maling inaasahan.
  • Pagdaragdag ng hindi kinakailangang screen. Ang prototype ay dapat sapat upang subukan ang hypothesis; sayang ang oras ng sobra.
  • Pagsira sa lohika ng bahagi. Ang pagkalimot na ikonekta ang mga bahagi ng system kapag dinadala ang mga ito sa sasakyan ay magbubunga ng hindi pagkakapare-pareho.
  • Magarbong ngunit hindi kinakailangang micro-interaction. Pagdaragdag ng animation nang hindi isinasaalang-alang ang pagganap at pagiging naa-access.

Sa buod

Ang prototyping ay isang paraan upang murang subukan ang isang hypothesis nang walang pagsusulat ng code; Ang mataas na resolution ay ginagawang kapani-paniwala, ngunit ito rin ay lumilikha ng ilusyon ng "tapos na". Pinapalakas ng AI ang yugtong ito gamit ang mabilis na skeleton, makatotohanang nilalaman ng placeholder, at mga ideya sa micro-interaction. Ang pinakamahalagang kontribusyon nito ay ang magkakaibang at matinding data na nagbibigay-daan sa iyong subukan ang prototype gamit ang tunay, hindi perpekto, konteksto. Responsibilidad ng tao na malinaw na i-frame kung ano ang sinusuri ng prototype, pinapanatili ang pagkakapare-pareho ng bahagi at estilo kapag inililipat ang output sa tool sa disenyo.

Gawain ng aplikasyon

  1. Sumulat ng isang hypothesis na pangungusap na gusto mong subukan para sa isang daloy.
  2. Gamit ang pangalawang prompt, gumawa ng prototype skeleton na sapat upang subukan ang hypothesis na ito.
  3. Gamit ang unang prompt, lumikha ng makatotohanan, edge-case na placeholder na nilalaman at punan ang prototype.
  4. Gamit ang ikatlong prompt, bumuo ng 2-3 ideya sa micro-interaksyon at suriin ang mga tala sa pagiging naa-access.
  5. Sa ikaapat na prompt, suriin at itama ang draft para sa pagkakapare-pareho ng sistema ng disenyo.

checklist

  • [ ] Malinaw kong isinulat ang hypothesis na sinusuri ng prototype.
  • [ ] Sinubukan ko gamit ang makatotohanan at gilid na nilalaman ng case.
  • [ ] Binabalangkas ko ang prototype bilang isang "tool sa pagsubok" para sa stakeholder.
  • [ ] Pinanatili ko ang bilang ng mga screen na sapat upang subukan ang hypothesis.
  • [ ] Tinitimbang ko ang mga micro-interaction laban sa accessibility at performance.
  • [ ] Napanatili ko ang pare-pareho sa pamamagitan ng pagbubuklod ng output sa mga bahagi ng system.