Podstawowe szkolenie online z UX/UI

Pierwsza lekcja drugiego rozdziału, jednocześnie wprowadzająca w tematykę UX. W nagraniu poruszono terminologię User Experience i na bazie przykładu wytłumaczono czym ona jest i jak ją należy rozumieć w kontekście projektowania UX.

Następnie pokrótce omówione zostały lekcje, które stanowią części składowe tego rozdziału. Przybliżono temat drugiej lekcji, który będzie się skupiał na różnicach pomiędzy badaniami ilościowymi i jakościowymi. Kolejno wspomniano o następnych etapach kursu, na które składa się przedstawienie konstrukcji ankiety, wytłumaczenie i przedstawienie Person w ramach projektowania UX, zapowiedź Mapy Empatii, Customer Journey, Flow Mapy oraz wyjaśnienie czym są scenariusze i jak je napisać. Dalej przytoczony został temat Architektury Informacji i jej kluczowe znaczenie w planowaniu treści. Następnie wytłumaczono pojęcie Wireframe’ów, gdzie przy okazji wspomniana została aplikacja UXPin jako narzędzie do ich tworzenia. Omówione również zostały nagrania, stanowiące koniec rozdziału, czyli część skupiająca się na tworzeniu pierwszych prototypów oraz testowaniu.

Całość filmu kończy fragment, gdzie przedstawione zostały oczekiwania względem umiejętności, jakie osoba oglądająca ten kurs powinna osiągnąć po zakończeniu tego rozdziału.

Ta lekcja skupia się na badaniach w ramach procesu UX oraz wyjaśnieniu różnic jakie wynikają z poszczególnych kategorii badań. Początek nagrania to wprowadzenie do zagadnienia i wytłumaczenie znaczenia jakie mają badania w trakcie pracy designera UX. Następnie skupiono się na omówieniu badań jakościowych, aby przybliżyć ich specyfikę oraz uwypuklić co odróżnia je od bardziej powszechnych badań ilościowych. Następna część lekcji tłumaczy kiedy przeprowadzać dany rodzaj badań oraz po co je stosować w trakcie trwania prac projektowych.

Druga połowa nagrania to prezentacja, przedstawiająca wspomniane wcześniej różnice, gdzie każdy fragment pokazywanej grafiki jest dogłębnie omawiany i tłumaczony. Do lekcji załączony jest plik, gdzie można samodzielnie prześledzić poszczególne rozbieżności pod względem poszczególnych kategorii badań.

Trzecia lekcja dotyczy ankiety, jako elementu składowego etapu projektowania UX. Na początku omówiono jak powinna być przemyślana oraz skonstruowana ankieta.

Następnie przedstawiono przykład przygotowanego w Formularzach Google kwestionariusza, który powstał w ramach stworzonego dla tego kursu projektu. Do lekcji załączony został plik z prezentowaną ankietą oraz analizowane na nagraniu wyniki badania.

To nagranie zawiera omówienie tematu jakim są Persony, tworzone w trakcie procesu projektowego. Na początku wytłumaczono czym są persony oraz jakie elementy składowe powinna zawierać matryca, prezentująca profil takiego protoplasty. Następnie zwrócono uwagę na czas, kiedy technikę budowania person należy wykonać, aby jak najlepiej odzwierciedlały one potencjalnego użytkownika. Pierwszą część filmu zamyka wyjaśnienie po co UX designer powinien stosować tą metodę.

Kolejny fragment filmu to przedstawienie przykładowo stworzonego profilu persony oraz omówienie poszczególnych części prezentowanej matrycy w kontekście tworzonego produktu. Do lekcji załączono plik zawierający podgląd prezentowanej techniki.

Ta lekcja skupia się na przedstawieniu techniki jaką jest Mapa Empatii. To właśnie w pierwszej części tego filmu omówione zostało czym jest taka mapa oraz co ją charakteryzuje. Następnie wytłumaczono kiedy jest najlepszy czas, w trakcie trwania procesu projektowego, na przeprowadzenie tej techniki wraz z klientem oraz zespołem produktowym. Pierwszą część nagrania jest zakończona poprzez wytłumaczenie po co projektant UX powinien stosować taką Mapę Empatii.

Kolejny fragment nagrania stanowi przedstawienie już uzupełnionej mapy oraz omówienie jej poszczególnych elementów. Załączony został również plik z wyeksportowanym podglądem prezentowanego przykładu.

Omawiana w tej lekcji technika dotyczy ścieżki klienta. Na początku nagrania wyjaśniono czym jest Customer Journey oraz jak należy przeprowadzić to ćwiczenie w ramach warsztatów projektowych. Następnie wytłumaczono kiedy jest odpowiedni czas na zastosowanie tej metody, aby była ona najbardziej wydajna i dostarczała wiarygodne wyniki. Ostatni fragment pierwszej części nagrania to odpowiedź na pytanie po co stosować tą technikę w procesie projektowym.

Następnie zaprezentowany został przykład Customer Journey, stworzonej na potrzeby projektu. Do lekcji załączony został plik z prezentowaną mapą.

Jest to siódma lekcja w ramach rozdziału UX. Na początku nagrania wyjaśniono czym są scenariusze użycia oraz powiedziano co odróżnia je od innego rodzaju scenariuszy, a mianowicie tych stosowanych podczas testów oprogramowania. Następnie poruszono kwestię tego – kiedy należy pisać tego rodzaju scenariusze oraz jakie one mają zastosowanie na etapie projektowania UX.

Druga część lekcji to przedstawienie przykładów scenariuszy użycia i porównanie ich do historyjek testowych. Lekcja również zawiera plik z prezentowanymi przykładami.

Ta lekcja skupia się na technice Flow Mapy. W prezentowanym filmie wyjaśniono czym jest ta metoda oraz w celu zobrazowania tematu przytoczono przykład procesu rejestracji, jednocześnie odnosząc się do narzędzia Flow Mapy. Następnie wytłumaczono kiedy jest odpowiedni moment do stosowania tej techniki, aby otrzymane z niej rezultaty były jak najlepsze. Część dotycząca wstępu została zakończona wyjaśnieniem sedna jakie kryje się za stosowaniem tego narzędzie.

Kolejny fragment nagrania prezentuje przykładową Flow Mapę, którą stworzono na podstawie produktu, wymyślonego na potrzeby tego kursu. Do załączników z tej lekcji została dodana zaprezentowana w filmie mapa.

Jest to kolejna lekcja w ramach rozdziału UX. Omówiono w niej dokładnie czym jest Architektura Informacji oraz jaki ona ma wpływ na tworzony produkt. Następnie wyjaśniono jaki ma cel dobrze zaprojektowana architektura. Podane zostały przykłady zastosowania Architektury informacji w nośniku fizycznym (czyli gazeta), jak również w produkcie wirtualnym (sklep internetowy).

W następnej części nagrania przedstawiono zaprojektowaną architekturę dla przykładowej strony z zapisem na newsletter. Do lekcji załączony jest plik, który zawiera zaprezentowany w nagraniu przykład.

Jest to dziesiąta lekcja, poświęcona kwestiom związanym z makietami, zwanymi po angielsku wireframes. We wstępie przywołano definicję wireframe w kontekście projektowania UX. Posłużono się odpowiednim przykładem, aby dokładnie zobrazować różnice pomiędzy makietami, a projektami tworzonym na dalszych etapach procesu projektowego.

W kolejnym etapie przedstawiono dwie kategorie wireframe’ów – low-fi oraz hi-fi. Wyjaśniono czym one są, jakie mają znaczenie w trakcie pracy nad produktem, a także omówiono różnice wynikające z istnienia wspomnianych rodzajów makiet. Końcówka wstępu skupia się na wytłumaczeniu po co tworzyć takie wireframe oraz jakie wynikają korzyści z ich stosowania. Do lekcji załączone zostało archiwum zawierające plik otwarty (podatny na edycję) z programu UXPin oraz pliki PDF stanowiące jednocześnie podgląd prezentowanych w filmie przykładów.

Ta lekcja w pierwszej części została poświęcona wyjaśnieniu czym jest UXPin oraz wytłumaczeniu kiedy należy korzystać z tego narzędzia w odniesieniu do procesu projektowego.

Następnie program został dokładnie zaprezentowany. Na początku przedstawiono część aplikacji, która jest poświęcona zarządzaniu projektami. Później skupiono się na wyjaśnieniu działania poszczególnych narzędzi i reszty interfejsu z którego korzystano w kolejnej części tego nagrania.

Drugi fragment nagrania prezentuje proces odtwarzania wcześniej zaprojektowanej makiety strony internetowej. Działanie to ma na celu usprawnienie i nabranie wprawy w korzystaniu z programu UXPin. Do tej lekcji załączone są również pliki otwarte, zawierające gotowe wireframe’y, a także dodatkowe pliki, potrzebne do dalszej pracy w ramach tego ćwiczenia.

Jest to przedostatnia lekcja w rozdziale UX. Skupia się ona na przybliżeniu informacji związanych z prototypowaniem. Na początku wyjaśniono czym jest prototyp oraz skorzystano z przykładu w celu lepszego zobrazowania tego zagadnienia. Następnie omówiono kiedy następuje najlepszy moment do wykreowania pierwszych prototypów. Część związana ze wstępem została zamknięta poprzez poruszenie tematu związanego z celem tworzenia tego typu interaktywnych widoków, gdzie również przedstawiono korzyści płynące z ich zastosowania.

Kolejny fragment nagrania jest to prezentacja procesu budowania przykładowego prototypu w aplikacji UXPin. Do lekcji załączony jest plik otwarty ze wspomnianego programu, którym można się posłużyć w celu weryfikacji swoich działań w ramach tego ćwiczenia.

Ta lekcja zamyka rozdział związany z User Experience, skupiając się głównie na fazie przygotowywania produktu, aby poddać go testom. W początkowym fragmencie nagrania wytłumaczono czym są scenariusze testowe oraz podano przykład takiej historyjki. W dalszej części wytłumaczono kiedy należy przeprowadzać takie testy oraz po co się to robi.

Następnie zaprezentowano przykład tego, jak skonstruowany jest taki scenariusz testowy oraz omówiono jego poszczególne elementy. Do lekcji został załączony plik poglądowy, który może posłużyć do lepszego zapoznania się z prezentowanym przykładem.

Lekcja wprowadza do ostatniego rozdziału kursu, poświęconego projetkowaniu UI. Rozwinięty i przetłumaczony został skrót UI oraz czym on jest w praktyce, na przykładzie strony internetowej.

Przedstawiony został plan lekcji, zaczynając od pojęcia Accessibility, przez Design system, siatki, responsywność, wprowadzenie do programu Figma, tworzenie prototypów, kończąc na przedstawieniu form testowania wdrożonych produktów.

Rozdział kończy podsumowanie umiejętności, które uczestnicy kursu powinni nabyć po obejrzeniu wszystkich lekcji z tego rozdziału.

Na wstępie wyjaśnione zostało zagadnienie Accessibility, jego istota w projektowaniu stron, aplikacji i innego rodzaju produktów. Podczas lekcji wskazano jedno ze źródeł opisujących szereg norm i zasad w kontekście Accessibility, czyli Web Content Accessibility Guidelines (WCAG 2.0). Wspomniany dokument jest miejscem, gdzie dokładnie wytłumaczono, w jaki sposób zadbać o jak najwyższy poziom dostępności na stronach internetowych. W dalszej części lekcji podano przykłady celowości dostosowywania projektów pod względem standardów accessibility oraz w jaki sposób region, z którego pochodzi klient lub rynek działania produktu, ma wpływ na wymagania, co do jego stosowania.

Na końcu podano przykład prawidłowo i nieprawidłowo zaprojektowanego elementu, pod względem accessibility. Do lekcji załączony został plik, który zawiera zaprezentowany przykład.

To trzecia lekcja rozdziału UI, przedstawiająca pojęcie Design systemu. W prosty sposób zostało wytłumaczone, czym jest Design system oraz co zawiera. Następnie, opisano na jakim etapie się go tworzy i w jakim celu powinno na bieżąco się go aktualizować. W dalszej części tej lekcji podano celowość jego tworzenia oraz korzyści płynące z powielania, zarówno dla designer’ów, deweloperów, jak i użytkowników.

Lekcję zakończono prezentacją przykładowego Design systemu. Natomiast w załącznikach można znaleźć plik otwarty do programu Figma oraz PDF zawierający podgląd prezentowanej biblioteki.

Lekcję rozpoczyna wyjaśnienie zagadnienie responsywności oraz siatki, zwanej gridem. Wyjaśniono, kiedy i w jakim celu należy stosować grid oraz dlaczego warto tworzyć projekty pod inne urządzenia.

Na koniec, zaprezentowano siatkę zwaną Bootstrap’em i przykłady mockup’ów na urządzenia mobilne. Do lekcji załączono podglądy w formie plików PDF oraz archiwum z plikiem otwartym, który można otworzyć przy pomocy aplikacji Figma.

W tej lekcji omówiono, czym są mockup’y oraz przedstawiono narzędzie do ich tworzenia. Wyjaśniono również, na jakim etapie oraz w jakim celu należy je tworzyć. Przedstawiono powiązanie pomiędzy stworzonymi przez projektantów mockup’ami, a ich dalszym wykorzystaniem przez programistów.

Lekcję kończy prezentacja aplikacji Figma, gdzie dokładnie został omówiony cały interfejs programu, wraz z narzędziami potrzebnymi do pracy na dalszych etapach tej lekcji. Ostatnia część nagrania została poświęcona odtworzeniu wcześniej zaprojektowanego mockup’u strony internetowej. Działanie to ma na celu usprawnienie i nabranie wprawy w korzystaniu z programu Figma. Do tej lekcji załączone są również pliki otwarte, zawierające gotowe mockup’y, a także dodatkowe pliki, potrzebne do dalszej pracy w ramach tego ćwiczenia.

Lekcja opisuje, czym są prototypy, w kontekście UI (we wcześniejszym rozdziale zostały one omówione w rozdziale UX na przykładzie makiet). W dalszej części lekcji wyjaśniono kiedy i w jakim celu należy tworzyć prototypy oraz jakie mają znaczenie w dalszej części pracy, czyli testach na użytkownikach.

Kolejny fragment nagrania jest to prezentacja procesu budowania przykładowego prototypu w aplikacji Figma. Do lekcji załączony jest plik otwarty ze wspomnianego programu, którym można się posłużyć w celu weryfikacji swoich działań w ramach tego ćwiczenia.

Ostatnia lekcja tego rozdziału prezentuje narzędzia do testowania oprogramowania. Na początku omówione zostało czym są testy A/B oraz zaprezentowano konkretny przykład ich zastosowania. Dalej, wytłumaczono pojęcie heatmap’y i sposobu ich działania, na przykładzie strony internetowej. Kolejnym wymieniony narzędziem jest Google Analytics, które przedstawiono jako oprogramowanie do zbierania takich informacji o użytkownikach jak dane demograficzne, czas spędzony na stronie, czy ścieżkę użytkownika w obrębie odwiedzanej strony internetowej. W dalszej części wyjaśniono, kiedy należy przeprowadzać te testy oraz jaki jest ich cel. Na koniec zaprezentowano przykładowe testy.