⌘ K
Filipino
Proseso ng disenyo

Mga daloy ng app at indibidwal na screenshot: paano pag-aralan ang pagkakasunod-sunod

Matutunan kung paano suriin ang mga pagkakasunud-sunod ng screenshot ng app para sa istruktura ng gawain, mga pagbabago sa estado, at mga puwang sa paglipat, at kung saan humihinto ang mga indibidwal na reference ng UI sa isang interactive na daloy.

Pangkat editoryal ng ScreenKits6 min basahin
Konseptuwal na mga screen sa pamimili na pinagdurugtong ng mga palaso mula sa pagpili ng produkto hanggang sa pagkumpleto.
Konseptwal na likhang sining ng editoryal; hindi isang nakunan na interface ng app.

Ang isang indibidwal na screenshot ay kapaki-pakinabang para sa pag-aaral ng layout, hierarchy, o visual pattern. Ngunit ang isang gawain sa produkto ay nagbubukas sa paglipas ng panahon: ang isang tao ay nagsisimula sa isang lugar, gumagawa ng mga pagpipilian, nakatagpo ng system o mga estado ng app, at maaaring maabot ang isang resulta o ma-stuck. Upang pag-aralan ang karanasang iyon, suriin ang mga screenshot bilang isang nakaayos na pagkakasunud-sunod at itanong kung ano ang ibig sabihin ng mga agwat sa pagitan ng mga ito.

Bahagyang biswal na sanggunian pa rin ang sunod-sunod na screenshot. Hindi nito pinatutunayan ang bawat ruta, lugar na maaaring i-tap, animation, kondisyon ng error, o kinalabasan para sa user. Tinutulungan ka ng ScreenKits na mag-browse ng mga nakuhang screen ng app at maghambing ng mga pattern; gamitin ang sarili mong prototype o pananaliksik upang malaman kung paano talaga kumikilos ang isang daloy.

Mga pangunahing punto

  • Magsimula sa layunin at senaryo ng user, pagkatapos ay ayusin ang mga nauugnay na screen sa pagkakasunud-sunod na kinakailangan ng gawain.
  • I-annotate ang estado, mga desisyon, at mga transition sa pagitan ng mga pagkuha sa halip na ituring ang mga katabing larawan bilang isang na-verify na recording ng pakikipag-ugnayan.
  • Itala ang nawawalang ebidensya at subukan ang tunay na interface kapag mahalaga ang gawi, timing, o mga alternatibong landas.

1. Paghiwalayin ang isang screen reference mula sa isang daloy

Sinasagot ng isang screenshot ang mga tanong tungkol sa isang nakunan na estado: Ano ang kitang-kita? Paano napapangkat ang impormasyon? Ano ang hitsura ng pangunahing aksyon? Ang isang pagsusuri sa daloy ay nagdaragdag ng mga relasyon: Anong layunin ang nagdadala ng isang tao dito? Anong aksyon ang nagpapasulong sa kanila? Ano ang mga pagbabago pagkatapos ng pagkilos na iyon, at paano sila makakabawi o makakadaan sa ibang ruta?

Panatilihing naiiba ang tatlong uri ng ebidensya. Ang isang indibidwal na screenshot ay isang still image. Ang isang nakaayos na pagkakasunud-sunod ng screenshot ay nagmumungkahi ng isang posibleng pag-unlad sa pamamagitan ng mga nakuhang estado. Ang isang interactive na pag-record o prototype ay nagpapakita ng gawi sa paglipas ng panahon, ngunit maaari pa ring sumasaklaw lamang sa isang landas at isang hanay ng mga kundisyon. Ang isang sequence ay hindi awtomatikong isang tappable flow, isang kumpletong paglalakbay, o isang analytics record.

Ang pagkakaibang ito ay ginagawang mas kapaki-pakinabang ang library ng screenshot, hindi mas kaunti. I-browse ang lahat ng mga halimbawa ng ScreenKits upang mangolekta ng mga visual na sanggunian, pagkatapos ay gumawa ng sarili mong mapa ng gawain, mga sangay, at mga hindi nasagot na tanong. Gumamit ng mga kategorya upang paliitin ang konteksto, o i-filter para sa mga halimbawa ng onboarding kapag sinusuri ang isang pagkakasunud-sunod ng unang paggamit.

2. Magsimula sa gawain, hindi sa pile ng imahe

Pumili ng isang konkretong senaryo, gaya ng "mag-save ng produkto para sa ibang pagkakataon" o "tapusin ang pag-set up ng bagong account." Pangalanan ang layunin ng tao sa kanilang mga termino; Ang pagsagot sa isang form o pagpindot sa isang button ay karaniwang isang hakbang, hindi ang layunin. Inilalarawan ng Nielsen Norman Group ang pagtatasa ng gawain bilang pag-aaral ng layunin, mga hakbang, ang kanilang pagkakasunud-sunod at istraktura, at ang impormasyong kailangan sa daan. Nagbibigay iyon sa iyong pagsusuri ng isang kapaki-pakinabang na yunit ng pagsusuri: ang gawain at ang landas sa pamamagitan nito.

Susunod, tipunin ang mga screen na mukhang may-katuturan at ayusin ang mga ito sa isang pansamantalang pagkakasunud-sunod. Lagyan ng label ang bawat isa ng kung ano ang tila nangyayari, tulad ng pag-browse, pagpili, pagkumpirma, paghiling ng pahintulot, tagumpay, o pagbawi. Markahan ang pagkakasunud-sunod bilang isang hypothesis maliban kung alam mo kung paano ginawa ang mga pagkuha. Kung ang isang screen ay maaaring magkasya ng higit sa isang punto sa gawain, tandaan ang kalabuan sa halip na pilitin ang katiyakan.

Para sa mas malakas na mapa, magdagdag ng mga alternatibong path at kundisyon sa tabi ng pangunahing sequence: isang bumabalik na user, isang tinanggihang pahintulot, isang di-wastong field, isang walang laman na resulta, o isang nawalang koneksyon. Ang mga sangay na ito ay madalas na naglalantad ng mga tanong sa disenyo na hindi masasagot ng isang pinakintab na happy-path gallery.

  • Isulat ang gumagamit, sitwasyon, at nilalayon na kinalabasan sa isang pangungusap.
  • Ayusin ang maliwanag na mga hakbang at lagyan ng label ang ebidensya sa likod ng utos na iyon.
  • Magdagdag ng malamang na mga sangay, kinakailangan, at mga hakbang sa pagbawi bilang hiwalay na mga tala.

3. Suriin kung ano ang mga pagbabago sa pagitan ng mga screen

Ang paglipat ay kung saan nangyayari ang pangangatwiran. Para sa bawat katabing pares, isulat ang trigger na pinaniniwalaan mong nag-uugnay sa kanila, kung ano ang nagbago, at kung ano ang dapat na maunawaan ng tao ngayon. Nagpatuloy ba ang isang pagpipilian? Kinilala ba ng app ang isang pag-save? Ang susunod na screen ba ay isang bagong destinasyon, isang pansamantalang dialog, o isang prompt ng pahintulot ng system? Kung hindi ipinapakita ng ebidensya ang gatilyo, markahan itong hindi alam.

Subaybayan ang estado pati na rin ang patutunguhan. Ang isang form ay maaaring blangko, bahagyang kumpleto, hindi wasto, isinumite, o ibalik pagkatapos ng pagkaantala. Ang isang screen ng pagbili ay maaaring may alok, estado ng pag-load, error, at kumpirmasyon. Dalawang halos magkaparehong pagkuha ay maaaring magbunyag ng makabuluhang pagbabago sa estado; dalawang visual na magkaibang mga screen ay maaaring kabilang sa magkahiwalay na mga ruta. Gumamit ng mga label o anotasyon upang ang iyong sequence ay hindi magpahiwatig ng sanhi na hindi mapapatunayan ng mga pagkuha.

Ang pag-navigate ay nangangailangan ng oryentasyon at pagbawi. Inilalarawan ng Mga Alituntunin ng Human Interface ng Apple ang mga tab bar bilang nabigasyon sa mga nangungunang antas na seksyon at tandaan na ang pagpapanatili sa estado ng nabigasyon ng bawat seksyon ay nakakatulong sa mga tao na lumipat nang hindi nawawala ang kanilang lugar. Ilapat ang ganoong uri ng tanong sa mga sanggunian: maaari bang sabihin ng isang tao kung saang lugar sila naroroon, bumalik sa naunang konteksto, o mag-iwan ng may gabay na gawain? Ang isang still na larawan ay maaaring magmungkahi ng affordance, ngunit tanging ang pagsubok sa pakikipag-ugnayan ang makapagtatag kung paano ito kumikilos.

  • Para sa bawat paglipat, itala ang trigger, nakikitang feedback, resultang estado, at kumpiyansa.
  • Bumalik, kanselahin, laktawan, subukang muli, at ipagpatuloy ang mga landas kung saan nauugnay.
  • Paghiwalayin ang mga screen ng app mula sa operating-system UI at mga panlabas na destinasyon.

4. Piliin ang tamang ebidensya para sa tanong

Sinasagot ng iba't ibang artifact ang iba't ibang mga tanong sa disenyo. Magsimula sa pinakamagaan na kapaki-pakinabang na sanggunian, pagkatapos ay lumipat sa isang prototype, recording, o obserbasyon ng user kapag ang tanong ay nakasalalay sa aktwal na gawi.

Uri ng sanggunianKapaki-pakinabang para saAno ang hindi nito maitatag nang mag-isa
Indibidwal na screenshotBiswal na hirarkiya, teksto, mga pattern ng component, at isang nakuhang estadoAno ang sanhi ng estado, kung ano ang nangyari bago o pagkatapos, o kung gumagana ang mga kontrol
Nakaayos na pagkakasunod-sunod ng mga screenshotPaghahambing ng maliwanag na pag-unlad, paulit-ulit na pattern, at mga puwang sa paglipat ng kandidatoKung kumpleto ang pagkakasunod-sunod, kasama ang bawat sangay, o interactive ang mga transition
Interactive na prototype o recordingPagsusuri ng tinukoy na landas, timing, feedback, at gawi sa pakikipag-ugnayanPaano kumilos ang lahat ng user, lahat ng posibleng ruta, o mga resulta sa labas ng naitala na sitwasyon
Pananaliksik sa naobserbahang gawainPag-aaral kung saan nag-aalangan ang mga tao, kung ano ang inaasahan nila, at kung paano sila nakakabawi sa kontekstoPangkalahatang konklusyon mula sa maliit o hindi kinatawang sample

5. Isang repeatable annotated flow review

Gamitin ang checklist sa ibaba para sa isang maikling pagpuna o isang mas malalim na handoff. Panatilihing partikular ang bawat anotasyon at hiwalay na mga obserbasyon mula sa mga pagpapalagay. Kung sinusuri mo ang iyong sariling produkto, subukan ang naka-map na gawain gamit ang isang prototype o gumaganang build at baguhin ang mapa kapag ang naobserbahang gawi ay naiiba.

  • Tumukoy ng isang user, konteksto, at nakikitang layunin ng pagtatapos.
  • Mag-order ng mga nauugnay na pagkuha; lagyan ng label ang bawat isa bilang nakumpirma, hinuha, o hindi alam.
  • Para sa bawat hakbang, tandaan ang pagkilos ng user, tugon sa interface, kasalukuyang estado, at susunod na desisyon.
  • Markahan ang mga puwang: nawawalang trigger, hindi malinaw na pag-unlad, nawalang konteksto, walang feedback, o walang ruta sa pagbawi.
  • Magdagdag ng mga kahaliling at pagkabigo na estado, kabilang ang paglaktaw, pabalik, pagkansela, walang laman, error, at mga kaso na tinanggihan ng pahintulot.
  • Suriin kung ginagawa ng mga label at hierarchy na maunawaan ang susunod na pagkilos at kasalukuyang lokasyon.
  • Gawing tanong ang bawat kawalan ng katiyakan para sa isang prototype walkthrough o naobserbahang sesyon ng gawain.
  • Itala ang pinagmulan at petsa ng ebidensya para malaman ng mga tagasuri sa ibang pagkakataon kung ano ang kinakatawan ng mapa.

Mga karaniwang tanong

Pareho ba ang pagkakasunod-sunod ng mga screenshot at isang app?

Hindi. Ang sequence ay isang set ng still captures na nakaayos upang magmungkahi ng pag-unlad. Inilalarawan din ng daloy ng app ang mga pagkilos, transition, estado, at posibleng mga sangay. Tratuhin ang isang pagkakasunud-sunod ng screenshot bilang bahagyang visual na ebidensya maliban kung ang gawi sa pakikipag-ugnayan at saklaw ay na-verify nang hiwalay.

Paano ko dapat i-annotate ang mga nawawalang screen o transition?

Isulat ang iyong nalalaman, kung ano ang iyong hinuha, at kung ano ang hindi alam. Tandaan ang pagkilos ng user, inaasahang feedback, resultang estado, at anumang nawawalang pagbawi o alternatibong landas. Gumamit ng prototype o naobserbahang session para sagutin ang mga tanong na hindi kayang lutasin ng mga nakuha.

Maaari ba akong gumamit ng mga sanggunian sa screenshot para sa pananaliksik ng gumagamit?

Maaari nilang suportahan ang paghahambing ng disenyo at tulungan kang bumuo ng mga hypotheses, ngunit hindi nila ipinapakita kung paano kumilos ang mga kalahok o kung ano ang kanilang naiintindihan. Upang matutunan iyon, bigyan ang mga tao ng makatotohanang gawain sa isang prototype o gumaganang interface at obserbahan ang kinalabasan.

Mga mapagkukunan at karagdagang pagbabasa

Gawing inspirasyon ang iyong susunod na daloy.

Mag-browse ng mga totoong screen, ihambing ang mga pattern, at tingnan kung paano magkasya ang mga piraso.

I-explore ang mga screen ng app