馃帹 uxowy.dev #22
10 min czytania

馃帹 uxowy.dev #22

Na naszej zamkni臋tej grupie na FB pojawi艂y si臋 ju偶 pierwsze pytania. I聽co聽najwa偶niejsze - pierwsze odpowiedzi. Je艣li Ci臋 jeszcze tam nie ma, to wbijaj 艣mia艂o i... pytaj, odpisuj, dziel聽si臋 - mamy wsp贸lny cel, wi臋c warto mie膰 ze sob膮 sta艂y kontakt 馃槈 (link do do艂膮czenia do grupy znajdziesz na ko艅cu tego maila).

A co w dzisiejszym wydaniu newslettera?
B臋dzie du偶o mi臋ska:

  1. Product Design - co to jest i jak mog臋 to zrobi膰?
  2. #PrzemoPatterns: Avatar
  3. Kogo warto obserwowa膰 馃憖
  4. 10 aplikacji zbudowanych na no-code

Zaczynamy!


Product Design - co to jest i jak mog臋 to zrobi膰?

UI, UX, Product Design | 藕r贸d艂o, 藕r贸d艂o

Gloria Lo - Product Designer chyba wszystkim znanej aplikacji Canva, po otrzymaniu wielu pyta艅 "co to jest Product Design", "jak wygl膮da proces PD?" itd. postanowi艂a wyja艣ni膰 wszystkim ocb w jednym artykule.

Tutaj wersja skr贸cona:

Czym jest Product Design?

Defining Product Design. 殴r贸d艂o, 殴r贸d艂o

Product Design bazuje na procesie Design Thinking, o聽kt贸rym pisali艣my ju偶 w聽3聽wydaniu newslettera. To skupiony na u偶ytkowniku (i聽rozwi膮zaniu jego prawdziwych problem贸w) spos贸b wprowadzania innowacji.

The Product Design Process. 殴r贸d艂o

To startujemy z etapami procesu Product Designu:

1. Empathise

Evaluate product-market fit before building a product. 殴r贸d艂o

Sprawd藕my najpierw product-market-fit, podczas user research'u.

鉁 User Research

Jak mo偶emy zrobi膰 user research?

  • Wywiad: jedna z jako艣ciowych metod badawczych, oparta o uprzednio przygotowany scenariusz z聽pytaniami, polegaj膮ca na odpowiednim poznaniu u偶ytkownik贸w z grupy docelowej, jak i zdefiniowaniu ich problem贸w, motywacji i cel贸w. Najwi臋kszym plusem wywiadu jest jego dynamika i nieprzewidywalno艣膰 - nie wiemy, gdzie nas zaprowadzi i co nowego przed nami "odkryje". Wad膮 wywiad贸w jest ich koszt (鈴 i 馃挵).
  • Ankieta online: dzi臋ki niej mo偶emy zebra膰 bardzo du偶膮 ilo艣膰 danych w聽kr贸tkim czasie. To szybki i聽tani spos贸b, aby pozna膰 odpowiedzi na nurtuj膮ce nas pytania. Wad膮 ankiety jest brak g艂臋bszego wej艣cia w聽problem, jak mo偶emy to zrobi膰 podczas np. wywiadu.
  • Badanie kontekstowe (contextual inquiry): obserwacja standardowych zachowa艅 naszego u偶ytkownika, jego przyzwyczaje艅, tego, jak dzia艂a w聽naturalnym 艣rodowisku itd. Pozwala nam lepiej wczu膰 si臋 w naszych u偶ytkownik贸w i聽"wej艣膰 w聽ich聽buty".
  • Research rynku: to obczajka, jak podobne problemy rozwi膮za艂a nasza konkurencja. Ogarniamy zastosowane tam patterny i聽uczymy si臋 na ich b艂臋dach.

鉁 User analysis

Po zebraniu powy偶szych danych, przechodzimy do analizy naszego u偶ytkownika. Mo偶emy to zrobi膰 za pomoc膮 Affinity Mapping. Pozwoli nam to przekszta艂ci膰 dane zebrane z聽research'u w pomocne spostrze偶enia (insighty).

Affinity mapping exercise used to group common issues. 殴r贸d艂o

W du偶ym skr贸cie, metodyka 鈥瀉ffinity mapping鈥 polega na zgrupowaniu podobnych sobie szczeg贸艂owych wniosk贸w w聽wi臋ksze, bardziej og贸lne zdefiniowane kategorie. Dzi臋ki temu 艂atwiej, a tak偶e - przede wszystkim efektywniej - opracowa膰 rozwi膮zania i wysnu膰 odpowiednie wnioski.

鉁 Persona

Persony okre艣lamy po to, aby wiedzie膰 dla kogo tworzymy nasz produkt. To podstawowe dane o naszym u偶ytkowniku - jego cechy, motywacje, cele, i frustracje. Modelowe persony powinny bazowa膰 na zebranych danych i by膰 wynikiem ich uog贸lnienia w pewien archetyp u偶ytkownika. Gdy bazujemy na danych zebranych w wyniku r臋cznie wykonanego, tzw. 鈥瀌esk-researchu鈥 m贸wimy wtedy o proto-personach. Lepsze takie, ni偶 偶adne 馃槈.

Example of a user persona (Image credit: Adobe)

2. Define

Znamy ju偶 naszego u偶ytkownika i lepiej go rozumiemy. Czas na podj臋cie decyzji, kt贸re problemy rozwi膮偶emy i okre艣lenie jasnego celu - problem statement definition.

鉁 How Might We

Mo偶emy wykorzysta膰 do tego metod臋 HMW - zaczynamy od "how might we..." (albo "jak mo偶emy..."), aby znale藕膰 jak najwi臋cej pomys艂贸w na okre艣lone wcze艣niej problemy. Warto wiedzie膰, 偶e jest to metoda strategiczna, a nie czysto projektowa, dzi臋ki kt贸rej w 艂atwiejszy spos贸b mo偶na wygenerowa膰 rozwi膮zania do zdefiniowanych problem贸w.

Przyk艂ady:

  • How might we encourage people working from home to adopt better health and wellness habits?
  • How might we ensure more people pay their taxes before the deadline?
  • How might we make customers feel that their information is safe and secure when creating an account?

3. Ideate

Inaczej zwana faz膮 ideacji, polega na rozwi膮zywaniu wcze艣niej postawionych problem贸w, zdefiniowanych przez poznane dane. To tutaj generujemy pomys艂y, przez szereg r贸偶nych 膰wicze艅, dobranych w聽zale偶no艣ci od aktualnych potrzeb opracowywanego produktu. W du偶ym uproszczeniu to brainstorm wielu pomys艂贸w i rozwi膮za艅 okre艣lonych wcze艣niej problem贸w.

The process of generating a broad set of ideas on a given topic, with no attempt to judge or evaluate them.
- Nielsen Norman Group

鉁 Badania konkurencji

Zawsze warto skorzysta膰 na wiedzy naszej konkurencji. Mo偶emy do tego wykona膰 competitive analysis (analiz臋 konkurencji).

Sprawd藕my, co oferuje nasza konkurencja, jaki jest UX ich rozwi膮za艅, flow, design聽itd.

Przyk艂ady:

Headspace - mental health and meditation app. 殴r贸d艂o
Zen mode - app that locks you out of your phone so that you鈥檙e forced to take a break away from the screen. 殴r贸d艂o

Na podstawie powy偶szego, mo偶emy okre艣li膰, 偶e nasz u偶ytkownik przechodzi podobne kroki:

  1. Sign up of login
  2. Define their goals
  3. Receive a task to complete
  4. Perform the task and;
  5. Track their progress over time

鉁 User Journey

User journey to po prostu proces, kt贸ry u偶ytkownik musi przej艣膰, aby rozwi膮za膰 sw贸j problem / osi膮gn膮膰 cel. To seria nast臋puj膮cych po sobie krok贸w i akcji.

鉁 Szkic

Przelej powy偶sze na papier - naszkicuj pierwsz膮 wizj臋. To ma by膰 szybkie i聽"niedoskona艂e". Nie skupiaj si臋 na pierdo艂ach. Je艣li nie wiesz jak zacz膮膰, skorzystaj z metody zapo偶yczonej z Google Design Sprintu: Crazy 8鈥檚.

Example sketch for a health and wellness app. 殴r贸d艂o

鉁 Design "princliples"

Okre艣l najwa偶niejsze aspekty wizualnej strony produktu. Niech to b臋dzie "gwiazda polarna" dla przysz艂ych design贸w.

Przyk艂ad dla aplikacji "mental health":

  • Simple but not overwhelming
  • Human and empathetic, not robotic
  • Motivating and engaging, not a chore
  • Flexible and personalised, not forced
  • Encourages LESS screen time, not more

4. Prototype

Stw贸rz prototyp, polecamy Figm臋. Mo偶esz zrobi膰 w niej zar贸wno design, jak i聽prototyp aplikacji. Mo偶emy te偶 skorzysta膰 z dostarczonych boilerplate i projekt贸w w Figma Community, aby nie robi膰 wszystkiego od zera.

鉁 Components

Master component with instances. 殴r贸d艂o

Aby nasz design by艂 sp贸jny, u偶ywajmy komponent贸w. Tutorial, jak u偶ywa膰 komponent贸w w Figmie - tutaj.

鉁 Prototyping

殴r贸d艂o

Dodaj interakcje i przej艣cia pomiedzy ekranami aplikacji. Tutaj znajdziesz tutorial, jak to zrobi膰 w Figmie. Mo偶esz skorzysta膰 z Figma Mirror, aby przetestowa膰 sw贸j prototyp bezpo艣rednio na urz膮dzeniu mobilnym.

5. Test

Przetestuj prototyp z u偶ytkownikami i zbierz jak najwi臋cej feedbacku.

鉁 Usability testing

Usability testing to wa偶na cz臋艣膰 procesu, kt贸ra pozwoli nam na zebranie feedbacku, jeszcze zanim zbudujemy co艣 wi臋kszego. Wykryjemy najwi臋ksze b艂臋dy u偶yteczno艣ci i聽zaoszcz臋dzimy czas wprowadzaj膮c zmiany na prototypie, a聽nie na realnie dzia艂aj膮cej aplikacji.

Mamy tutaj r贸偶ne metody:

  • Moderated: jeste艣my obecni podczas test贸w,聽aby by膰 w聽stanie odpowiednio reagowa膰 na przebieg testu, zadawa膰 pog艂臋bione pytania i wynie艣膰 z takiej sesji jak najwi臋cej cennych uwag.
  • Unmoderated: nie jeste艣my obecni podczas test贸w.
  • Guerrilla testing: zbieranie feedbacku od du偶ej grupy ludzi, kt贸rzy nie s膮 w og贸le zwi膮zani z produktem, cz臋sto w聽miejsach publicznych. To pro艣ba o odpowied藕 na kr贸tkie pytanie lub pro艣ba o wykonanie szybkiego testu.
  • Dog-fooding: to testowanie "u siebie". Warto wykona膰 testy u偶yteczno艣ci najpierw "in-house", przed wypuszczeniem ich do szerszego grona.

Wg. researchu Jakoba Nielsen'a wystarczy 5 tester贸w, aby聽wykry膰 ponad 85% problem贸w z u偶yteczno艣ci膮 naszej aplikacji.

鉁 Measuring success

Potraktuj dostarczenie produktu jako pocz膮tek drogi. Sprawdzaj, jak dzia艂a w prawdziwym 偶yciu i w jaki spos贸b faktycznie u偶ytkownicy z聽niego korzystaj膮.

Mo偶esz do tego wykorzysta膰 narz臋dzia, takie jak: Hotjar, Google Analytics czy Mode Analytics.

Narz臋dzia analityczne to jednak nie wszystko. Mo偶esz zadawa膰 pytania wewn膮trz aplikacji, dalej zbiera膰 wywiady, tworzy膰 ankiety w emailach itd.

Nie zapomnij o zwyk艂ej rozmowie z u偶ytkownikami i聽utrzymywaniu relacji z nimi.

鉁 A/B testing

R贸b iteracje z testami A/B, aby doj艣膰 do najlepszego rozwi膮zania.

Na koniec:

Bonus: film "Lunch & Learn about Product Design"

Gloria prowadzi艂a "warsztat" z powy偶szego procesu, zach臋camy do oblukania nagrania. To bardzo przyjemny spos贸b zrozumienia tego procesu, z podaniem przyk艂ad贸w i聽"good聽practises":


#PrzemoPatterns: Avatar

馃 Co to jest?

Avatar w aplikacji wizualizuje nasz膮 osob臋 i聽cz臋sto niesie ze sob膮 inne dodatkowe funkcje, jak np. przej艣cie do ustawie艅 u偶ytkownika. Jest wi臋c istotny z聽punktu widzenia estetycznego, jak i聽u偶ytkowego.

O czym zatem pami臋ta膰, by korzystanie z tego elementu by艂o naprawd臋 user-friendly?

鈩癸笍 Wskaz贸wki

  • Gdy u偶ytkownik wybierze ju偶 jakie艣 zdj臋cie/grafik臋, stw贸rzmy podgl膮d, jak b臋dzie wygl膮da艂 nasz avatar, jeszcze przed opublikowaniem
  • Je艣li chcemy, aby efekt wizualny avatara mo偶na by艂o zmieni膰, dodajmy do niego jaki艣 wska藕nik symbolizuj膮cy edycj臋 np. ikon臋 o艂贸wka
  • Gdy u偶ytkownik nie zamierza przes艂a膰 swojego wizerunku, powinni艣my udost臋pni膰 mu zast臋pcz膮 grafik臋 np. ikon臋 lub inicja艂y u偶ytkownika. Dobr膮 opcj膮 jest tak偶e ilustracyjna alternatywa, kt贸ra nadal mo偶e przekaza膰 osobowo艣膰 u偶ytkownika
  • Poinformujmy u偶ytkownika, jakie typy plik贸w s膮 dozwolone (.jpeg, .png, .svg itp.) oraz czy obowi膮zuje jaki艣 limit wagowy pliku
  • Dajmy zna膰, 偶e avatar zosta艂 zaktualizowany, np.: toastem
  • Gdy mamy tak膮 mo偶liwo艣膰, zezw贸lmy na przyci臋cie i聽zmian臋 rozmiaru avatara, przed jego zapisem

Przyk艂ady (藕r贸d艂o: uxdesign.cc):


Kogo warto obserwowa膰?

DesignSense

Na kanale YT znajdziecie 艣wietne filmy z redesign贸w, daily challenge'贸w i聽aktualnych trend贸w. To mega pozytywna dawka dobrych design贸w.

YouTube: DesignSense
Instagram: @designsense99
Dribbble: DesignSense


10 aplikacji zbudowanych na no-code

Resources | 藕r贸d艂o
殴r贸d艂o

Poni偶ej lista aplikacji, kt贸re by艂y zbudowane za pomoc膮 narz臋dzi no-code. Ciekawe. I pokazuje, co mo偶emy w dzisiejszych czasach zbudowa膰, bez pisania kodu. 馃憖

1. Chant

Zbudowane za pomoc膮: Adalo

Chant is a social media app built for creatives.

2. Outsite

Zbudowane za pomoc膮: Webflow

Outsite is an original web application that helps freelancers and remote workers find interesting places to spend time in and communities to hang out with.

3. Kollecto

Zbudowane za pomoc膮: Strikingly, Typeform, Plasso, Stripe i聽Paypal.

Kollecto is a web app for sharing, collecting, and buying art.

4. Plato

Zbudowano za pomoc膮: Bubble

Plato 鈥 a tailored mentorship every company can use for its team.

5. Ensemble19

Zbudowano w 3 dni za pomoc膮: Bubble

Ensemble19 allows companies and individuals to make donations or buy vouchers for future spending.

6. Qoins

Zbudowano za pomoc膮: Bubble

Qoins is an app that helps people to pay off their debts through the service of financial coaching.

7. N贸z Delivery

Zbudowano za pomoc膮: Bubble

N贸z Delivery 鈥 is an app for food delivery.

8. Rebel Book Club

Zbudowano za pomoc膮: Strikingly, Typeform, GoCardless.

Rebel Book Club is an international platform connecting book enthusiasts.

9. Mmirror

Zbudowane za pomoc膮: Bubble

Mmirror platform provides users with services for A/B testing.

10. Comet

Zbudowane za pomoc膮: Bubble

Comet is a perfect tool for freelancers to find a job, and for employers to hire qualified professionals.

To wszystko na dzi艣. Przyznaj, 偶e by艂o co obczaja膰, co nie? 馃槢

A na koniec, klasycznie - memik. Taki tematyczny:

Zassane z kana艂u #memy-it spo艂eczno艣ci Zaprogramuj 呕ycie 鉂わ笍

Pom贸偶 innym wiedzie膰 wi臋cej

Znasz kogo艣, kto powinien do艂膮czy膰 do naszej spo艂eczno艣ci? Je艣li tak, to wy艣lij do tej osoby link do skr贸tu z ostatnich wysy艂ek: uxowy.dev/lista. I聽niech do艂膮czy do馃帹聽uxowy.dev!

Dobrego weekendu!

Aaaa, i bym zapomnia艂 - do艂膮cz do naszej grupy ziomk贸w na FB 馃槈

Je艣li jeszcze nie ma Ci臋 na li艣cie 馃

Wysy艂amy jeden email tygodniowo, w ka偶dy pi膮tek, o godz. 12:00.
Warto艣ciowa wiedza o UI/UX dla developera mo偶e wyl膮dowa膰 do Twojej skrzynki.