Ako sa robí toto?

20. 10. 2021 15:59:50

Zdravím, snažím sa získať prácu UX/UI juniora. Dostala som zadanie na kávomat. Chcem spraviť nasledovnú udalosť. Na spôsoby platby používam komponenty. Keby si používateľ zvolí hotovosť, tak by ho to presmerovalo na stránku s výzvou (daj hotovosť), keby si navolil zvyšné 4 formy platby, vždy by ho to presmerovalo na tú konkrétnu stránku (s tým, že ešte po týchto stránkach nasledujú nejaké operácie typu chcete účtenku ap.). Ktorá funkcionalita sa na takéto logické operácie používa? Na YouTube som zatiaľ nenašla obdobný tutoriál.

34669

20. 10. 2021 15:59:50

https://webtrh.cz/diskuse/ako-sa-robi-toto/#reply1492392

Tomáš Marek

(23 hodnocení)

20. 10. 2021 16:29:37

Nevím jestli chápu otázku správně, ale mluvíš o tvorbě interaktivního prototypu? Vpravo nahoře klikneš Prototype tam si můžeš propojovat prvky s framem a tvořit animace.

https://i.imgur.com/i1LHKTX.png

20. 10. 2021 16:29:37

https://webtrh.cz/diskuse/ako-sa-robi-toto/#reply1492391

nikafit.sk

20. 10. 2021 16:41:22

Napsal streetcz;1633193
Nevím jestli chápu otázku správně, ale mluvíš o tvorbě interaktivního prototypu? Vpravo nahoře klikneš Prototype tam si můžeš propojovat prvky s framem a tvořit animace.

https://i.imgur.com/i1LHKTX.png

Áno, to viem, len keď si človek navolí hotovosť, tak dá potvrdiť a ide na stránku. Keby si dá bezkontaktnú/mobilnú/bitcoin, musí to potvrdiť a vždy mu nabehne iná možnosť. Tam je ako keby 5 možných scenárov. Ako to spraviť tak, aby jeden button smeroval na rôzne možnosti v závislosti od zvolenej alternatívy? Dá sa to vôbec vo Figme spraviť?

20. 10. 2021 16:41:22

https://webtrh.cz/diskuse/ako-sa-robi-toto/#reply1492390

Tomáš Marek

(23 hodnocení)

20. 10. 2021 16:51:19

Dá. Musíš mít nadesignované všechny ty obrazovky pro jednotlivé stavy. Pak to jen propojíš s tlačítky.

https://i.imgur.com/NFlXpkX.png

---

Jo už to asi chápu :D ne, toto nepůjde ve Figmě. Propoj jednotlivá tlačítka výběru a klientovi řekni, že v prototypu nelze naanimovat to confirm tlačítko.

---------- Příspěvek doplněn 20.10.2021 v 16:59 ----------

Ok zamyšlení číslo 3 :D jo jde to vlastně. Takto

https://i.imgur.com/u22igmD.png

A ty jednotlivé stavy se ještě musí vracet na další výběry. Takže ve finále to je trošku chaos, ale snad pomohlo

https://i.imgur.com/bsOxKni.png

20. 10. 2021 16:51:19

https://webtrh.cz/diskuse/ako-sa-robi-toto/#reply1492389

nikafit.sk

20. 10. 2021 17:00:43

Napsal streetcz;1633196
Dá. Musíš mít nadesignované všechny ty obrazovky pro jednotlivé stavy. Pak to jen propojíš s tlačítky.

https://i.imgur.com/NFlXpkX.png

---

Jo už to asi chápu :D ne, toto nepůjde ve Figmě. Propoj jednotlivá tlačítka výběru a klientovi řekni, že v prototypu nelze naanimovat to confirm tlačítko.

Aha :D čiže som stratila 2 dni zbytočne? :D Nejaký iný tool to nevie? Sketch, Adobe XD? :D A to som tam ešte chcela, aby tam nabiehala suma v závislosti od zvolených počtov a volieb :D To je tiež nemožné? :D

---------- Příspěvek doplněn 20.10.2021 v 20:13 ----------

Napsal streetcz;1633196
Dá. Musíš mít nadesignované všechny ty obrazovky pro jednotlivé stavy. Pak to jen propojíš s tlačítky.

https://i.imgur.com/NFlXpkX.png

---

Jo už to asi chápu :D ne, toto nepůjde ve Figmě. Propoj jednotlivá tlačítka výběru a klientovi řekni, že v prototypu nelze naanimovat to confirm tlačítko.

---------- Příspěvek doplněn 20.10.2021 v 16:59 ----------

Ok zamyšlení číslo 3 :D jo jde to vlastně. Takto

https://i.imgur.com/u22igmD.png

A ty jednotlivé stavy se ještě musí vracet na další výběry. Takže ve finále to je trošku chaos, ale snad pomohlo

https://i.imgur.com/bsOxKni.png

Ja to ale robím cez komponenty :D viacero možností je na 1 plátne :D ide to aj tak? :D

20. 10. 2021 17:00:43

https://webtrh.cz/diskuse/ako-sa-robi-toto/#reply1492388

Pavel Mareš

(19 hodnocení)

21. 10. 2021 07:25:24

Napsal nikafit.sk;1633200
Aha :D čiže som stratila 2 dni zbytočne? :D Nejaký iný tool to nevie? Sketch, Adobe XD? :D A to som tam ešte chcela, aby tam nabiehala suma v závislosti od zvolených počtov a volieb :D To je tiež nemožné? :D

---------- Příspěvek doplněn 20.10.2021 v 20:13 ----------

Ja to ale robím cez komponenty :D viacero možností je na 1 plátne :D ide to aj tak? :D

To co chceš neumí žádný program. Adobe XD umí teda navíc "hover" a "trigger" stavy, ale ne dynamicky měnit obsah na plátně na základě zadané hodnoty.

Ber to tak, že podsunuješ obrázky uživateli v realu. Taky ti vytisknutej obrázek neukáže úplně jiný stav. Viz - https://dribbble.com/shots/2070332-Healthy-Eating-App-User-Flow/attachments/371192

Přesně tam vidíš krásně 2a a 2b obrazovky. Nemáš obrazovku 2 kde zobrazíš a/b na základě toho co uživatel stiskl. Aktuálně toho chceš moc hele.

21. 10. 2021 07:25:24

https://webtrh.cz/diskuse/ako-sa-robi-toto/#reply1492387

VelkyVont

21. 10. 2021 08:00:41

Ahoj, hele z ux hlediska - uživatel chce rychle kávu - Confirm je zbytečný. Stačí když klikne na vybranou možnost platby. A pokud se spletl, tak má na další obrazovce zpět. Účtenku z kávomatu určitě chtít nebude, ani není zákonně potřeba si myslím. Uxák musí proces zjednodušit, udělat blbuvzdorným a navýšit prodeje. :D

21. 10. 2021 08:00:41

https://webtrh.cz/diskuse/ako-sa-robi-toto/#reply1492386

nikafit.sk

21. 10. 2021 08:05:51

Napsal Doctore97;1633231
To co chceš neumí žádný program. Adobe XD umí teda navíc "hover" a "trigger" stavy, ale ne dynamicky měnit obsah na plátně na základě zadané hodnoty.

Ber to tak, že podsunuješ obrázky uživateli v realu. Taky ti vytisknutej obrázek neukáže úplně jiný stav. Viz - https://dribbble.com/shots/2070332-Healthy-Eating-App-User-Flow/attachments/371192

Přesně tam vidíš krásně 2a a 2b obrazovky. Nemáš obrazovku 2 kde zobrazíš a/b na základě toho co uživatel stiskl. Aktuálně toho chceš moc hele.

A keby to riešim cez takýto komponent, ako som vytvorila? Ja to už asi moc hypujem :D mám to ako zadanie pre získanie pozície juniora v agentúre (čiže sa to ešte učím). Ja si to celkom asi komplikujem. 34670

21. 10. 2021 08:05:51

https://webtrh.cz/diskuse/ako-sa-robi-toto/#reply1492385

Pavel Mareš

(19 hodnocení)

21. 10. 2021 08:08:56

Napsal nikafit.sk;1633234
A keby to riešim cez takýto komponent, ako som vytvorila? Ja to už asi moc hypujem :D mám to ako zadanie pre získanie pozície juniora v agentúre (čiže sa to ešte učím). Ja si to celkom asi komplikujem. 34670

No nechápeš k čemu jsou komponenty a jak se s nima pracuje. To je první věc. Vytvoříš jednu a dáš jí styly. A pak ji nakopíruješ na obrazovku a měníš. Tím pádem vše vychází z té původní.

Tohle není web / WordPress builder.

Doporučil bych XD, v tom se tohle dělá lépe – ačkoliv sem zastánce Figmy, tak XD má plno věcí propracované lépe.

21. 10. 2021 08:08:56

https://webtrh.cz/diskuse/ako-sa-robi-toto/#reply1492384

Jiří Foret

(10 hodnocení)

21. 10. 2021 08:10:50

Nevím o jakou pozici se jedná, ale nevidím jediný důvod proč by součástí mělo být nějaké funkční "demo". Pokud to tedy ty nechceš dodat jako něco navíc. Jde přece o UX jak píše VelkyVont. Prostě co nejjednodušší proces a aby to i hezky vypadalo (UI). Takže jasná přehledná flow a hezký design. Asi každý si kupoval někdy kávu z automatu a stačí se podívat jak je to řešený v reálu. Tam třeba zkusit najít něco na zlepšení, pokud tam něco je (přemýšlet se mi nad tím nechce). Každopádně bych vylepšil ten design. Tam je ještě velký prostor pro zlepšení :). Napadá mě ještě Framer, ten to sice asi neumí to co ty chceš ale z hlediska prototypů má skvlěý funkce.

21. 10. 2021 08:10:50

https://webtrh.cz/diskuse/ako-sa-robi-toto/#reply1492383

Pavel Mareš

(19 hodnocení)

21. 10. 2021 08:32:31

Mě dostává, jak se někdo zeptá "Jak v programu udělám XY" a prostě musí přijít "edukovaná hlava" a říct "máš to špatný, předělat" nebo "je tam co k zlepšení" ... neke, ona se hlásí na juniora ... chlapci, až se bude ptát na názor, tak sem všema deseti pro pomoci, ale tady se na názor neptá :D

:D "Každopádně bych vylepšil ten design." :D kurnik, od toho se přece hlásí na to místo, ale musí ukázat co v ní je ... jasně, že jí tady z fleku pár z nás může udělat design, kterej by klient přijal ve vteřině, ale má to bejt její práce :D

21. 10. 2021 08:32:31

https://webtrh.cz/diskuse/ako-sa-robi-toto/#reply1492382

Smazaný účet hvLPwPN09D

(3 hodnocení)

21. 10. 2021 08:33:49

Snaha a vysoké cíle se mi líbí, určitě si vem na ten pohovor i tohle a popiš co bylo úmyslem ;-) U juniorů se cení, že se nespokojí se základy, ale že se chtějí učit a jít dál. Začni na novo a udělej to jednoduše, jen pár uživatelsky přívětivých screenů, propoj a popiš funkcionalitu. Nemusíš z toho dělat seniorní zakázku, abys dostala juniorní job. hlavní je vědět proč to vypadá jak to vypadá a proč jsou ty funkce navrženy a propojený zrovna tímhle způsobem.

21. 10. 2021 08:33:49

https://webtrh.cz/diskuse/ako-sa-robi-toto/#reply1492381

Tomáš Marek

(23 hodnocení)

21. 10. 2021 15:58:38

1) Prototyp = vzor. Slouží k ukázce UI výstupu. Je zbytečné snažit se dělat 1:1 prototyp. Pálí se tím čas.

Kdybych byl zaměstnavatel, tak dám práci někomu, kdo udělal rychle funkční/dostačující prototyp, než někomu, kdo to ladil do detailu a spálil tím 30 hodin. Opravdu nikdo nepotřebuje mít funkční volbu množství v prototypu.

2) Komponent je ve své podstatě stejný jako klasická složka. S tím rozdílem, že drží stav elementů uvnitř této ''složky''. Takže když máš na plátně 50x komponent A a změníš cokoliv uvnitř (barva,...), tak se provede změna na všech 50 místech. Když budeš mít normální složku/groupu, tu zkopíruješ 50x a změníš cokoliv v jedné znich, tak změna bude pouze v té jedné.

3) Já prototypy nedělám, ale jsem si jist, že propojení tlačítko na tlačítko je nesmysl. Propojuješ vždy nějaký element (tlačítko,...) na Frame/obrazovku/artboard. Propojit element s dalším elementem je nesmysl. Po kliknutí na element č.1 na obrazovce č.1 se ti v prototypu zobrazí pouze element č.2, samotný. Což je pičovina :D

21. 10. 2021 15:58:38

https://webtrh.cz/diskuse/ako-sa-robi-toto/#reply1492380

Mike

(18 hodnocení)

22. 10. 2021 10:53:39

Axure umí to, co chceš, čistě.

22. 10. 2021 10:53:39

https://webtrh.cz/diskuse/ako-sa-robi-toto/#reply1492379

nikafit.sk

23. 10. 2021 13:13:16

Napsal Bred_;1633237
Nevím o jakou pozici se jedná, ale nevidím jediný důvod proč by součástí mělo být nějaké funkční "demo". Pokud to tedy ty nechceš dodat jako něco navíc. Jde přece o UX jak píše VelkyVont. Prostě co nejjednodušší proces a aby to i hezky vypadalo (UI). Takže jasná přehledná flow a hezký design. Asi každý si kupoval někdy kávu z automatu a stačí se podívat jak je to řešený v reálu. Tam třeba zkusit najít něco na zlepšení, pokud tam něco je (přemýšlet se mi nad tím nechce). Každopádně bych vylepšil ten design. Tam je ještě velký prostor pro zlepšení :). Napadá mě ještě Framer, ten to sice asi neumí to co ty chceš ale z hlediska prototypů má skvlěý funkce.

súhlasím, s dizajnom nie som tiež spokojná, evidentne nemám nápad na niečo ľúbivé, no najskôr riešim funkčnosť. :-)

---------- Příspěvek doplněn 23.10.2021 v 13:18 ----------

Napsal Doctore97;1633239
Mě dostává, jak se někdo zeptá "Jak v programu udělám XY" a prostě musí přijít "edukovaná hlava" a říct "máš to špatný, předělat" nebo "je tam co k zlepšení" ... neke, ona se hlásí na juniora ... chlapci, až se bude ptát na názor, tak sem všema deseti pro pomoci, ale tady se na názor neptá :D

:D "Každopádně bych vylepšil ten design." :D kurnik, od toho se přece hlásí na to místo, ale musí ukázat co v ní je ... jasně, že jí tady z fleku pár z nás může udělat design, kterej by klient přijal ve vteřině, ale má to bejt její práce :D

Ďakujem za obhájenie a súhlasím :-) . Som si vedomá tých medzier, ktoré tam sú. Vo Figme robím ani nie 2 mesiace, takže snažím sa posúvať a každá konštruktívna kritika je vítaná. :-)

23. 10. 2021 13:13:16

https://webtrh.cz/diskuse/ako-sa-robi-toto/#reply1492378

Pro odpověď se přihlašte.

Přihlásit