Jak dobrze, że pewnego popołudnia znajoma wymieniała mi ważne wydarzenia dla „jueksów” i uwzględniła na tej liście WaysConf ? A z moimi konferencyjnymi wydarzeniami bywało różnie. Często pozostawała w głowie niepokojąca myśl w stylu „Eee, to o czym była właściwie mowa?”. Ta historia nie powtórzyła się w przypadku WaysConf. Czułam, że nie tylko dowiedziałam się rzeczy. Czuję również, że je od teraz WIEM. Laury zasługi spływają na praktyczny aspekt wystąpień oraz na pieczołowicie sporządzane notatki. Fragment drugiego otrzymujesz tutaj za friko ?

Czego możesz się spodziewać? Podobnie, jak w pierwszym tekście, na początku lista polecanych narzędzi lub uzupełniających źródeł. Dalej kilka inspirujących cytatów. Później krótkie streszczenia złożone z wypunktowanych wskazówek oraz wybranych slajdów z prezentacji. Całość okraszam dodatkowymi linkami, które pozwolą tobie lepiej wgryźć się w temat. Jeżeli zapoznasz się z tym wszystkim, to gratulacje dla ciebie – Ty również możesz powiedzieć, że WIESZ ?

Lista streszczonych wystąpień

• The Voice of the Customer – o mankamentach badań deklaratywnych | Iga Mościchowska, Co-founder w [ation] centre
• Tworzenie eliksirów no-code: od przepływu e-maili po niesamowitą aplikację | Wojtek Woźniak, No-code dev w Tonik
• Narzędzia i automatyzacje, które pozwoliły mi pracować 10x wydajniej | Grzegorz Róg, CEO easy_
• 5 pułapek design systemu | Oleksii Drozdenko, Lead Designer, Design Systems & Language w Booking.com
• Nigdy pilne, rzadko ważne: jak znaleźć i podnieść wartość UI dla różnych typów projektów | Łukasz Tyrała, Principal Designer w Grafana Labs
• Neuroróżnorodność, co UX powinien wiedzieć, żeby projektować (nawet lepsze) rozwiązania a11y. | Małgorzata Łozińska, Senior UX/UI & Product Designer
• Twój as w rękawie jest w przeglądarce: DevTools dla projektantów | Patryk Szymański, Senior UX Designer w CCC
• Analityka design systemu: jak mierzyć implementację i sukces komponentów stworzonych w Figmie | Olga Zelenska, Design Team Lead w Infor Design, Michał Grzegorzak, Product Designer Associate w Infor
  

Polecane źródła i narzędzia

? MailerLite, dzięki któremu można stworzyć newsletter (i nie tylko).

? Webflow i Bubble.io do tworzenia stron no-code.

? Nocode8.club – społeczność fascynatów no-code.

? Lottie Creator do tworzenia animacji.

? Rize – mierzenie czasu spędzanego w różnych aplikacjach (mierzenie w tle z wykorzystaniem AI).

? Make – narzędzie do automatyzacji.

? Przeglądarka Arc, która wielu osobom zastępuje Chrome.

? Texts lub Beeper – agregacja skrzynek odbiorczych ze wszystkich kanałów. Można też podpiąć konto z ChatGPT.

? Superhuman – automatyczne etykietowanie maili, automatyczne przenoszenie maili do innej skrzynki.

? Zencal – z powodzeniem może zastąpić Calendly, można sprzedawać płatne spotkania, można go też obudować automatyzacjami, można zaprosić cały zespół i synchronizować kalendarze

⌨️ Keyboard Maestro do efektywniejszej pracy na komputerze.

? Shortcut – automatyzowanie prostych i złożonych czynności. 

? Airtable – Excel na sterydach, baza danych zbiera wszystkie rzeczy. Pozwala agregować dane w sposób, który umożliwia dystrybucję ich w inne miejsca.

? Whalesync – zmiana czegoś na stronie dzięki zmianie w Airtable.

? OpenAI – na przykład do automatycznego tłumaczenia na język angielski.

? EasyCart – służy do sprzedaży produktów cyfrowych.

? Webhook – link, na który wyślą się wszystkie dane z koszyka po zakupie.

? Notion, który może tobie służyć tak, jak Grzegorzowi Róg – jako drugi mózg ?

?️ Accessibility posters od UK Home Office (pdf).

?️ Zbiór narzędzi DevTools dla projektantów zebrane przez Patryka Szymańskiego.

Najważniejsze cytaty do zapamiętania

? To, co ludzie mówią nie zawsze równa się temu, co ludzie robią – stanowi to problem Voice of Costumers. Dlatego powinniśmy skupić się bardziej na tym, co ludzie robią ~ Iga Mościchowska

? Tylko VoC z pogłębionymi metodami badawczymi może zaprowadzić badacza dalej ~ Iga Mościchowska

? W no-code jesteśmy grupą ludzi, którzy wpisują swoje problemy w Google XD ~ Wojtek Woźniak

? Moja mantra jest taka, żeby nie logować się nigdzie i żeby wszystko działało w tle ~ Grzegorz Róg

? Nie nudź ludzi samymi kwestiami UI. Zawsze staraj się łączyć wizualne aspekty z wartością dla biznesu. Dzięki temu będzie łatwiej zrozumieć, dlaczego to jest ważne ~ Łukasz Tyrała

? Użyteczne i brzydkie wygrywa z bezużytecznym i ładnym ~ Łukasz Tyrała

? Projektując dostępie, projektujemy dla wszystkich – również dla tych z czasowymi ograniczeniami ~ Małgorzata Łozińska

? W tym wszystkim chodzi o dane, które potwierdzają wartość projektowania ~ Olga Zelenska, Michał Grzegorzak

Streszczenia wystąpień

Streszczenie streszczeniem. Czyli, że ja mam kontekst, a ty nie. Jeżeli cokolwiek przeczytasz i nie będzie ciebie opuszczać myśl, że… nie rozumiesz, napisz o tym w komentarzu. Alternatywa ➡️ przeczytaj dodatkowe linki, które dorzucam pod koniec każdego akapitu. Uzyskasz wtedy „pełniejszy obraz” danego tematu.

➡️ The Voice of the Customer – o mankamentach badań deklaratywnych

Parafrazują Igę Mościchowską, VoC jest łatwe do zdobycia i analizowania, ale trudne, jeśli chcemy na tej podstawie wysnuć wiążące wnioski. Dlaczego nie jest to doskonałe narzędzie do wyciągania informacji na temat rzeczywistych potrzeb klienta? Poniżej odpowiedź ⤵️

? Kim jest prelegentka?

Iga Mościchowska jest doświadczoną projektantką i współzałożycielką [ation] center, firmy oferującej kursy mistrzowskie, warsztaty i narzędzia dla ludzi produktu. Jest kierownikiem studiów podyplomowych UX & Product Design na AGH oraz mentorem w programie akceleracyjnym Google for Startups. Więcej na stronie WaysConf.

? Wyłapane wskazówki

1. VoC ma znaczenie, bo jest źródłem feedbacku na temat marki/produktów.
2. Wiele firm po to sięga, bo wydaje się to łatwe.
3. Jednak to, co ludzie mówią nie zawsze równa się temu, co ludzie robią – stanowi to problem Voice of Costumers. Dlatego powinniśmy skupić się bardziej na tym, co ludzie robią.
4. Efekt negacji – gdy ludzie opisują swoje doświadczenia, często koncentrują się na negatywnych aspektach.
5. Ludzie mówią tylko o tym, czego są świadomi – to istotna informacja na temat deklaratywnych badań.
6. Wady metod deklaratywnych:
   • Słaby związek pomiędzy postawami a zachowaniami.
   • Koncentrowanie się na ekstremalnych opiniach.
   • Obarczone efektem negacji.
   • Niski wskaźnik ukończenia (np. ankiety).
   • Niska jakość informacji zwrotnej.
   • Brak świadomości własnych potrzeb wśród użytkowników.
7. Jeżeli chcemy się dowiedzieć więcej, musimy włączyć obserwacyjne metody badawcze.
8. Jak właściwie korzystać z VoC?
   • Korzystać z danych z uważnością i ostrożnością.
   • Zdobywać za pomocą monitorowania i eksploracji.
   • Pogłębiać zdobyte informacje za pomocą innych metod badawczych.
9. Tylko VoC z pogłębionymi metodami badawczymi może zaprowadzić badacza dalej.

✅ Dodatkowe linki

• Poradnik od Nielsen Norman Group na temat tego, kiedy korzystać z jakich metod badawczych.
• Porównanie danych deklaratywnych i behawioralnych od Netquest.

➡️ Tworzenie eliksirów no-code: od przepływu e-maili po niesamowitą aplikację

Wojtek Woźniak to taki czarodziej, co to tworzy cyfrowe produkty i nie używa przy tym ani linijki kodu. Na WaysConf 2023 podzielił się przepisami na te cuda. Prawdopodobnie i ty możesz działać no-code. O ile posiadasz trzy, „sekretne” skille ?

? Kim jest prelegent?

Wojtek Woźniak, no-code ops w Tonik, używa narzędzi takich jak Webflow, Bubble.io, Make.com, Zapier i wszystkiego, co pojawia się na górze listy Product Hunt. Jego najnowszy projekt to Mi Casa, platforma wymiany domów. Więcej na stronie WaysConf.

? Wyłapane wskazówki

1. Trzy skille, jakie powinny posiadać osoby zajmujące się no-code:
   • Uważność – słuchać, co ludzie mówią, obserwować, co robią. Analizować siebie – ciągła autorefleksja.
   • Komunikacja – pytać o pomoc, mówić o tym, co się robi, używać prostego i zrozumiałego języka.
   • Wyszukiwanie odpowiedzi – korzystać z YouTube’a, pytać na forach, zadawać pytania na X (dawniej Twitter).
2. W no-code wydarza się taka magia, że jak czegoś potrzebujesz, to wkrótce pojawia się narzędzie, które ci to daje.
3. W no-code jesteśmy grupą ludzi, którzy wpisują swoje problemy w Google.
4. Narzędzia, które Wojtek wykorzystywał (i wykorzystuje) w swojej pracy: MailerLite – do tworzenia newslettera, Upwork – strona, na której można dostać swoje pierwsze zlecenie, Webflow – do tworzenia stron no-code, Lottie Builder – do tworzenia animacji, Bubble.io – bardziej zaawansowany Webflow.

✅ Dodatkowe linki

• Możliwość zgłoszenia się na listę oczekujących na przyjęcie do społeczności no-code stworzonej przez Wojtka – Nocode8.club.
• Bubble Academy, gdzie dowiesz się wszystkiego, żeby zacząć tworzyć strony w Bubble.io.
• Darmowy kurs Webflow 101, w którym poznasz podstawy projektowania i rozwijania stron internetowych.

➡️ Narzędzia i automatyzacje, które pozwoliły mi pracować 10x wydajniej

Większość narzędzi, które opisywał Grzegorz Róg, była wykorzystywana tylko przez nielicznych obecnych na jego wystąpieniu. Bo to chyba tak trochę jest z tymi wszystkimi narzędziami. Że się trzeba ich nauczyć i poświęcić czas na ich konfigurację. A tego DODATKOWEGO czasu przecież… nie ma 😉 Podejrzewam, że gdyby dokonać jednak kalkulacji, to rachunek powiedziałby jedno. Więcej wydajesz na mniej zautomatyzowaną pracę, choć wydaje ci się, że nie ?

? Kim jest prelegent?

Grzegorz Róg tworzy bardziej inteligentną, opartą na technologii, edukację online. Seryjny przedsiębiorca, prowadzący wiele przedsięwzięć. Wielki zwolennik automatyzacji i no-code, wykorzystujący roboty do wspierania rozwoju firm internetowych. Konsultant firm z listy Fortune 500, autor ponad stu kursów, książek i artykułów.

? Wyłapane wskazówki

1. Moja mantra jest taka, żeby nie logować się nigdzie i żeby wszystko działało w tle.
2. Automatyzacja nie zabija kreatywności i można dzięki niej być w dziesięciu miejscach na raz.
3. Polecane narzędzia:
   • Rize – mierzenie czasu spędzanego w różnych aplikacjach (mierzenie w tle z wykorzystaniem AI).
   • Make – narzędzie do automatyzacji.
   • Przeglądarka Arc, która wielu osobom zastępuje Chrome.
   • Texts lub Beeper – agregacja skrzynek odbiorczych ze wszystkich kanałów. Można też podpiąć konto z ChatGPT.
   • Superhuman – automatyczne etykietowanie maili, automatyczne przenoszenie maili do innej skrzynki.
   • Zencal – z powodzeniem może zastąpić Calendly, można sprzedawać płatne spotkania, można go też obudować automatyzacjami, można zaprosić cały zespół i synchronizować kalendarze
   • Keyboard Maestro do efektywniejszej pracy na komputerze.
   • Shortcut – automatyzowanie prostych i złożonych czynności. 
   • Airtable – Excel na sterydach, baza danych zbiera wszystkie rzeczy. Pozwala mu agregować dane w sposób, który umożliwa dystrybucję w inne miejsca.
   • Whalesync – zmiana czegoś na stronie dzięki zmianie w Airtable.
   • OpenAI – na przykład do automatycznego tłumaczenia na język angielski.
   • EasyCart – służy do sprzedaży produktów cyfrowych.
   • Webhook – link, na który wyślą się wszystkie dane z koszyka po zakupie.
   • Notion – Grzegorz przechowuje tam cały swój second brain – wszystkie najważniejsze rzeczy. Notion nie służy mu jako statyczne miejsce na tekst. Zamiast tego wyświetlia w jednym miejscu treści z systemów, z których korzysta. Robi to za pośrednictwem Make. Tworzy też wpisy na Notion i decyduje, gdzie coś opublikować.

✅ Dodatkowe linki

• Lista linków od Grzegorza.
• Dodatkowa lista 43 narzędzi, które mogą poprawić twoją produktywność, zebrana przez Proofhub.

➡️ 5 pułapek design systemu

Miło uczyć się na cudzych błędach, prawda? ? Oleksii Drozdenko dzieli się swoją prawdziwą historią i lekcjami wyciągniętymi z procesu tworzenia design systemu.

? Kim jest prelegent?

Oleksii Drozdenko jest Lead Designerem w Booking.com. Systemowy myśliciel, pasjonat tworzenia produktów i usług na dużą skalę. Okazjonalny prelegent — ostatnio w Figma Config i Awwwards. Więcej na stronie WaysConf.

? Wyłapane wskazówki

1. Pięć pułapek design systemu (przekreślone) i na co je zamienić?
   • Opcjonalny design system ➡️ Obowiązkowy design system
   • Pokrycie wszystkich wzorców ➡️ Skalowalny i wszechstronny system
   • System specyficzny dla danej platformy ➡️ System niezależny od platformy
   • Wsparcie ad-hoc ➡️ System z otwartą możliwością współpracy
   • Wiedza plemienna i ręczne wprowadzanie zmian ➡️ Automatyzacja, automatyzacja, automatyzacja!
   • BONUS: Tunelowe patrzenie na design system ➡️ Myślenie o swoich klientach
2. Jak projektować z myślą o wielu platformach?
   • Potrzebne jest „jedno źródło prawdy” dla wszystkich zasobów.
   • W przypadku Booking.com był to projekt „Cross-platform alingement”.

✅ Dodatkowe linki

• Przykład design systemu od Booking.com dostępny na Figma Community.
• Nagranie wystąpienia Oleksii Drozdenko i Nicole Saidy podczas konferencji Config, gdzie opowiadali o multi-platformowym design systemie dla Booking.com.

➡️ Nigdy pilne, rzadko ważne: jak znaleźć i podnieść wartość UI dla różnych typów projektów

Z racji tego, że nadal uczę się zawodu, nowością była dla mnie informacja przekazana przez Łukasza Tyrałę – że UI często spychany jest na dalszy plan. Z drugiej strony nie muszę być doświadczoną projektantką, żeby wiedzieć, że rzeczy ładne, ale bezużyteczne są… bez sensu ? Ale i UI ma swoją wartość. Trzeba się „tylko” nauczyć ją dostrzegać, nazywać i wyjaśniać ją innym.

? Kim jest prelegent?

Łukasz Tyrała to Principal Designer w Grafana Labs. 15 lat doświadczenia w projektowaniu, 10 lat doświadczenia jako edukator z zakresu UX. Ogólnie dużo ma różnych liczb na swoim koncie i z częścią z nich zapoznasz się na jego stronie.

? Wyłapane wskazówki

1. Paradoks ➡️ ludzie lubią ładne rzeczy, ale trudno określić, dlaczego to jest ważne.
2. Znaj swój kontekst – musisz wiedzieć, kiedy możesz być zafiksowany na UI, a kiedy nie.
3. Użyteczne i brzydkie wygrywa z bezużytecznym i ładnym.
4. Nowa waluta w dzisiejszym świecie ➡️ wartość:
   • Musisz wiedzieć, jak ją pokazać.
   • Musisz też wiedzieć, jak ją określić.
5. Nie nudź ludzi samymi kwestiami UI. Zawsze staraj się łączyć wizualne aspekty z wartością dla biznesu. Dzięki temu będzie łatwiej zrozumieć, dlaczego to jest ważne.
6. Czasami musisz odpuścić i nie przejmować się już wyglądem przycisków.

✅ Dodatkowe linki

• Artykuł od UX Planet o tym, dlaczego UX jest ważniejszy od UI.
• Interaction Design Foundation wyjaśnia, czym jest UI design.
• Manifest Łukasza Tyrały.

➡️ Neuroróżnorodność, co UX powinien wiedzieć, żeby projektować (nawet lepsze) rozwiązania a11y

Być może i Ty, tak samo jak Małgorzata Łozińska, posiadasz kilka cech neuroatypowych. I najpewniej dzięki nim jesteś w stanie lepiej empatyzować z wyzwaniami, jakie stoją przed neuroróżnorodnymi ludźmi korzystającymi z cyfrowych produktów. Jak zatem projektować z myślą o wszystkich?

? Kim jest prelegentka?

Małgorzata Łozińska to Product Designerka, która między innymi bada związek między emocjami, kolorem, kontrastem i wysokością czcionki a łatwością ich czytania i zrozumienia przez różne grupy ludzi, ze szczególnym uwzględnieniem „dostępności” w najszerszym znaczeniu. Miłośniczka zrównoważonego rozwoju, projektowania skupionego na człowieku i uważności. Więcej na stronie Waysconf.

? Wyłapane wskazówki

1. Projektując dostępie, projektujemy dla wszystkich – również dla tych z czasowymi ograniczeniami.
2. Należy się skupiać nie na projektowaniu aplikacji, ale na tworzeniu rozwiązań.
3. Dla osób neuroróżnorodnych jest szczególnie istotne, żeby strony internetowe zachowywały się w przewidywalny sposób.
4. Wytyczne dotyczące projektowania stron i aplikacji:
   • Daj użytkownikom wystarczająco dużo czasu na przeczytanie i skorzystanie z treści.
   • Twórz strony internetowe, aby otwierały się, wyglądały i działały w przewidywalny sposób.
   • Zadbaj o to, aby informacje i obsługa interfejsu były zrozumiałe.
   • Prezentuj treść tak, aby nie wywoływała napadów padaczkowych.
   • Daj możliwość korzystania z kolorowych masek, która ułatwi czytanie – w zależności od czyichś preferencji.
   • Zadbaj o jasne określanie statusu przycisku CTA.
   • Stosuj jasny i czytelny układ na stronie.
   • Nie przytłaczaj użytkowników zbyt dużą ilością opcji wyboru.

✅ Dodatkowe linki

• Projektowanie z myślą o dostępności – zestaw plakatów od UK Home Office.
• Poradnik od Interaction Design Foundation na temat projektowania z myślą o neuroróżnorodności.
• Neurodiversity Design System.

➡️ Twój as w rękawie jest w przeglądarce: DevTools dla projektantów

Z tym wystąpieniem wydarzyła się taka niefortunność, że zjawiłam się o czasie, a tu już prelekcja się na dobre rozkręciła ? Na szczęście karkołomnym okazało się zebranie tych wszystkich „devtoolowych” instruktaży. A nawet zbędnym. Bo wszystko dostajesz i ty w poręcznym przewodniku od Patryka Szymańskiego ⤵️

? Kim jest prelegent?

Patryk Szymański jest projektantem UX z 5-letnim doświadczeniem w branży SaaS i eCommerce. Obecnie Senior UX Designer w CCC. Specjalizuje się w projektowaniu interakcji, rozwoju produktu i w badaniach UX. Więcej na stronie WaysConf.

✅ Dodatkowe linki

• Poradnik Patryka opisujący narzędzia DevTools – wersja na komputer.
• Poradnik Patryka opisujący narzędzia DevTools – wersja na mobile.
• Alternatywna lista DevTools od Cloud Four.

➡️ Analityka design systemu: jak mierzyć implementację i sukces komponentów stworzonych w Figmie

Nie samą biblioteką komponentów projektant żyje. Jeszcze warto (trzeba?) ją analizować. Dowiesz się wtedy, które komponenty należy udoskonalić, a których już nie musisz utrzymywać. Oleksii i Michał, członkowie zespołu odpowiedzialnego za design system dla Infor, pokazują, w jaki sposób udało im się poprawić skuteczność dotychczasowego design systemu.

? Kim są prelegenci?

Olga Zelenska zdobywała doświadczenie w projektowaniu ilustracji i grafiki, później przeszła do projektowania wizualnego i projektowania produktu, a ostatecznie została liderem zespołu projektowego w Infor Design, kierując biblioteką komponentów Figma. Swoją codzienną pracę opiera na unikalnych doświadczeniach zdobytych w trakcie kariery zawodowej, danych badawczych i intuicji projektowej. Więcej na stronie WaysConf.

Michał Grzegorzak z wykształcenia architekt, od 2021 w świecie UX/UI. Dołączył do Infor jako Product Designer w 2022 roku, gdzie zainteresowała go fascynująca dziedzina systemów projektowania. Więcej na stronie WaysConf.

? Wyłapane wskazówki

1. W tym wszystkim chodzi o dane, które potwierdzają wartość projektowania.
2. Cele, jakie sobie postawili dla biblioteki komponentów w Figmie:
   • Komponenty bardziej elastyczne.
   • Dostosowane do możliwości dostępnych w Figmie.
   • Biblioteka komponentów, która lepiej służy jej użytkownikom.
3. Ich cel nadrzędny dla analizy design systemu ➡️ zrozumieć, gdzie jesteśmy i jak dostać się tam, gdzie chcemy być.
4. Metryki wykorzystane podczas analizy design systemu:
   • Siatka 8px
   • Opis komponentu
   • Warianty
   • Wykorzystanie funkcji Autolayout
   • Ograniczniki (constraints)
   • Nazewnictwo struktury
   • Style tekstu
   • Style kolorystyczne
   • Recenzja tekstów
   • Suma ocen dla powyższego = finalna ocena komponentów
5. Co dało im przeprowadzenie analizy design systemu?
   • Określenie zakresu pracy dla komponentów w bibliotece.
   • Bardziej ustruktyruzowany i kontrolowany proces pracy.
   • KPI, które ilustrowały wpływ audytu na kondycję komponentów.
6. Co daje ocena poziomu wykorzystywania komponentów?
   • Komponenty, które używane są najczęściej ➡️ Można je priorytetyzować.
   • Najczęściej odłączane komponenty ➡️ Można je udoskonalić.
   • Komponenty wykorzystywane tylko przez określony zespół lub nieużywane wcale ➡️ Można zdecydować, czy chce się je nadal utrzymywać.
7. Co chcieliby wiedzieć przed realizacją audytu design systemu?
   • Związek pomiędzy developerami i projektantami i jak możemy na siebie wpływać.
   • Struktura atomowa komponentów.
   • Angażowanie większej liczby osób z różnych zespołów na różnych etapach audytu.
   • Upewnienie się, że wszyscy interesariusze rozumieją, dlaczego jest przeprowadzany audyt design systemu.

✅ Dodatkowe linki

• Infor Design System Web Components Beta Library.
• Opis Design System Analytics na blogu Figmy.

I to by było na tyle ?

? Jeszcze więcej wskazówek znajdziesz w pierwszym podsumowaniu WaysConf.

? O UX i UI przeczytasz w dedykowanej zakładce na mojej stronie, choć nie jest to lektura do przysłowiowej „kawki”.

? A tutaj znajdziesz komplet informacji na temat WaysConf: https://www.waysconf.com/