UX i UI, co to takiego i jak je rozróżnić? Często słyszysz UX to, UI tamto… ale czym się różnią te terminy, sfery?
O User Experience, User Interface, ale nie tylko – Bolek Drapella z SaunaGrow.com rozmawia z Krzyśkiem Stola, CEO Blue Owl eCommerce Software House.
Dowiesz się na co zwracać uwagę, jak budować właściwie priorytety myśląc o użyteczności Twojej strony, produktu. Zapraszamy!
Transkrypcja odcinka:
Bolek Drapella: Krzyśku, bardzo miło mi cię widzieć, miło mi się z tobą spotkać. Cieszę się, że przyjąłeś zaproszenie do naszego podcastu, Rozmów Saunowych. Krzyśku, bardzo proszę cię, przedstaw się, nie tylko z imienia, bo to już mamy za sobą, ale powiedz, czym się zajmujesz, bo temat jest niesamowicie ważny dla wszystkich przedsiębiorców, i na początku i na dalszych etapach wzrostowych.
Krzysiek Stola: Mi również bardzo miło, że mogę gościć w podcaście, mam nadzieję, że coś ciekawego będę w stanie wydusić z siebie i to się przyda komukolwiek, gdziekolwiek. Imię moje znacie, więc na nazwisko mam Stola. Co robię na co dzień? Na co dzień jestem właścicielem, wspólnikiem spółki, która wdraża commerce’y. Wdrażamy commerce’y, czyli robimy warsztaty, projektujemy, implementujemy platformy commerce’owe na silnikach otwartych, czyli WordPress, Ucommerce, PrestaShop, Magento. To jest nasza praca codzienna, natomiast ja, oprócz tego, że zarządzam firmą, to także jestem osobą, która, powiedzmy, nadzoruje dział, tak zwany warsztatowo-analityczno-projektowy. Taka jest moja specjalizacja – warsztat, design thinking, plus do tego jeszcze UXTY. Oprócz pracy zawodowej, jestem też czynnym wykładowcą akademickim, doktorantem, tak, jeszcze robię doktorat – taka ciekawostka na marginesie. Natomiast wykładam też na podyplomówce na CDV tutaj, w Poznaniu u nas, na podyplomówce związanej z budowaniem startupów. Tam mam taki temat, „Startup, pomysł na biznes”, więc wpisuję się chyba w treść podcastu. Wykładam też na Wyższej Szkole Handlu i Usług i tam z kolei na MBA bardziej zarządzanie strategiczne, project management. Takie, jak by to powiedzieć, szerokokątne zastosowania.
Natomiast z tego co wiem, dzisiaj mamy porozmawiać sobie troszeczkę więcej o UX-ie, UI-u i zastosowaniu tegoż zwłaszcza w biznesach e-commerce, tak że mam nadzieję, że coś ciekawego tutaj powiem. To tak w skrócie albo przydługo.
BD: Super. Zanim przejdziemy do UX i UI, bo zaraz cię poproszę o rozszyfrowanie tych skrótów, krótka anegdota. Bardzo lubię doktorantów, którzy są czynni zawodowo, bo inaczej jest, jak w słynnym dowcipie:
Czym się różni balkon od doktoranta?
Balkon jest w stanie utrzymać całą rodzinę, a doktorant, jak pracuje zawodowo, to jak najbardziej jest w stanie.
Jak można połączyć tą pasję naukową, rozwój, wykładanie i nauczanie innych, z praktyczną wiedzą – to to zupełnie inaczej smakuje, też po stronie studentów.
KS: Tak, zgodzę się. Ja generalnie w ogóle jestem takim pasjonatem dydaktyki. Wiesz, ja ci powiem, że ja poszedłem na te studia bardziej w związku z dydaktyką, niż nauką jako taką, bo cóż, jak już znam ten system od środka, to widzę, że ta nauka nie jest taka sexy. Natomiast dydaktyka mnie zawsze jarała, ja lubię po prostu przekazywać wiedzę i uczyć ludzi. Myślę, że to też jest nawiązanie do tego, że prowadzę warsztaty, dużo pracuję z biznesem, z przedsiębiorcami, to mi zostało. To jest według mnie fajne, natomiast sama sensu stricte nauka jako taka, no niestety, ten system wygląda troszeczkę dziwnie od środka i myślę, że to jest temat na kolejny podcast, zupełnie inny.
BD: Osobny temat, ale faktycznie dorzucanie praktyki do nauki zupełnie zmienia ten wymiar.
KS: Dokładnie tak. Zwłaszcza pod kątem podyplmówek i MBA, które prowadzę, to jest tam kluczowe. Tam w zasadzie osoba, dydaktyk bez praktyki jest bezwartościowy, bo tam masz samych praktyków. Oni czekają i chłoną twoje doświadczenie, twoją wiedzę i za to płacą, a nie za to, że ty im wyłożysz teorie.
BD: To jest ta różnica, płacą, więc chcą się czegoś nauczyć, a nie są, bo jest to darmowa szkoła wyższa.
KS: Dokładnie tak.
BD: Krzyśku, przechodzimy do UX i UI. Jak w ogóle rozróżnić jedno od drugiego, bo bardzo często po slashu używa jednego po drugim. Zacznijmy więc od definicji dla osób, które powinny o tym myśleć, a niekoniecznie to robią.
KS: Zasadniczo, powinno się całkowicie odróżniać te dwie rzeczy i można powiedzieć, że specjalistów, którzy zajmują się jednym i drugim elementem, jest bardzo mało. Zazwyczaj mamy specjalistów, którzy się zajmują UX-ami, zaraz przejdę do tego, co to jest, i zazwyczaj mamy specjalistów, którzy się zajmują UI-em. To są dwie oddzielne osoby, a między nimi jeszcze jest szereg różnych osób, które mogą się zajmować pewnymi elementami z poszczególnych zagadnień. Natomiast uogólniając, załóżmy, że mamy dwie części, czyli:
UX-a, który po angielsku brzmi user experience, po polsku to się tłumaczy na doświadczenie użytkownika, a potem mamy UI, czyli user interface, czyli po prostu interfejs użytkownika.
Mówiąc na chłopski rozum, o co w tym wszystkim chodzi?
Jeżeli chodzi o UX (user experience) – mówimy o wszelkich, kwestiach związanych z czystym odbiorem produktu, czyli usługi jako takiej. Czy ona jest użyteczna, czyli czy jest prosta w odbiorze, zrozumiała dla użytkownika. Jakby to przedstawił Don Norman – korzystając z tej usługi, czy produktu, my nawet nie wiemy, że z niego korzystamy, robimy to nieświadomie i jesteśmy zadowoleni. Czyli przykładowo:
Chwytając kubek kawy, wiem, że to jest jakiś kubek. Mogę go uchwycić, tak, mam jakiś uchwyt, który mieści się w mojej dłoni. Są oczywiście założone do tego zasady ergonomii. Natomiast to jest właśnie UX (user experience) – chwytam kubek, piję z tego kubka i jestem zadowolony. Robię to nieświadomie, nie myślę o tym, jak mam uchwycić ten kubek, żeby z niego wypić.
Natomiast UI, czyli user interface – to jest cała otoczka graficzno-animacyjno-wyglądowa całości. Czyli dla mnie UI-em, w takim kubku byłoby to, że on jest koloru złotego. To jest jego UI i podoba mi się, dlatego że ten kolor mi się pozytywnie kojarzy ze złotym medalem olimpijskim, na przykład.
Więc to są podstawowe różnice. Osoba, która zajmuje się UX-em zazwyczaj skupia się na tym, jak dostosować produkt czy usługę do użytkownika. Przebadać potrzebę użytkownika, zaprojektować pewne rozwiązania w taki sposób (bardzo prosty), żeby pokazać użytkownikowi, jak coś może funkcjonować, jak może funkcjonować dobrze a nawet lepiej – tak, żeby ten użytkownik korzystając z tego, nie miał świadomości, że przechodzi przez jakiś system, usługę, czy produkt.
Natomiast osoba, która się zajmuje UI-em, to jest osoba, która to koloryzuje. Maluje, dodaje temu barwy, kolorytu, czcionki, typografii, obrazu, dźwięku, animacji – w taki sposób, żeby osoba, która to odbiera, czyli de facto użytkownik, odbierała to w określony sposób, który odpowiednio kształtuje emocje.
I pozwól, że jeszcze na koniec wspomnę.
Te dwa elementy się ze sobą bardzo mocno łączą. Często mamy taką sytuację, że rozdziela się UX-a od UI-a – róbmy UX, a UI to nieważne, albo zróbmy UI, bo UX jest nieważny. I to jest bardzo duży błąd, bo nie ma dobrego UX-a bez UI-a i nie ma dobrego UI-a bez UX-a.
BD: Czy to nie jest tak, że UI się zawiera w UX-ie?
KS: Nie, UI jest przedłużeniem UX-a, nie zawiera się w środku, jest pewnym dobudowaniem. Fazę UX-a moglibyśmy w pewnym momencie zamknąć. Weźmy bardzo prosty przykład:
Budujemy stronę internetową. Budując stronę internetową w kontekście UX-a, musielibyśmy przeprowadzić następujący, bardzo szybki proces – po pierwsze wyjście do użytkownika i poznanie jego potrzeb, czyli jakich elementów na tej stronie potrzebuje twój klient. I klient chce mieć stronę główną, oferta, produkty, kontakt i blog, czyli masz podstawową architekturę. Potem ten UX-owiec tą podstawową architekturę spisuje, na diagramach, BPMN-ach, jak zwał tak zwał, a następnie przekłada to na czarno-biały prototyp, nawet na kartce, rozrysowuje przy kliencie, poszczególne sekcje, zakładki, pokazuje, że tu będzie przycisk, tutaj tyle treści, to przejście do tej strony i tak dalej. I na tym moglibyśmy zamknąć tą część UX-ową, czyli takie czarno-białe narysowanie klientowi, zgodnie z architekturą i pewnym drzewkiem, informacji związanych z tą stroną internetową, jak wygląda ten UX.
I teraz mogłaby wejść zupełnie oddzielna osoba, czyli UI. On wie, że ma do zaprojektowania, czyli do pomalowania, nadpisania, cały proces, który się składa z określonych zakładek, wie, że tu powinno być tyle treści, tu mniej więcej takie. I teraz on nakłada na to swoją wizję, kreatywność, zmysł artystyczny i maluje cały obraz, w taki sposób, żeby to pokazać naszemu klientowi. Czyli on ma płótno, zestaw farb i jakiś delikatny szkic ołówkiem oraz ramkę – to jest jego obszar pracy, w który wchodzi i wypełnia swoją wizją. Tak można przedstawić UI.
BD: No dobrze, ale ja spróbuję się z Tobą trochę nie zgodzić. Może to jest jakieś moje spaczenie, moje rozumienie, a może też ludzie, którzy pracują nie tylko w internecie, ale w ogóle nad produktami, nad ich konstrukcją, też tak to postrzegają. Dla mnie ten UX (user experience) jest czymś znacznie szerszym niż tylko nadanie ramy. Dla mnie to jest szersze spojrzenie, holistyczne, na całość doświadczenia klienta, czyli jest taka jakby iteracja, po tym, jak UI wejdzie i naniesie te swoje kolorki, farbki i tak dalej, to wraca znowu do kogoś, kto patrzy na to z perspektywy doświadczenia klienta, czy nadal to doświadczenie jest pozytywne, czy nie ma przez błędy UI, jakiegoś zakłócenia, niezrozumienia. I druga myśl taka, że dla mnie UX jest szerszą odpowiedzialnością, bo nawet jeśli to już nie web developer odpowiada za ten element, tylko marketingowiec, który przyprowadził nam klienta z innymi oczekiwaniami, oczekiwania tego klienta były inne nie z powodu tego, co jest na stronie, tylko z powodu tego, jak reklama była na przykład wysłowiona, czy co było obiecane w reklamie, to przez to UX to jest myślenie znacznie bardziej całościowe o tym, jak klient w interakcji z daną marką się czuje. Czyli to nie jest chyba tylko ta ramka, szkic, czy szkielet strony, tylko znacznie szersza odpowiedzialność. Nie można powiedzieć, nie, to nie moja broszka, to nie mój dział. To też jest nadal UX. Czy też tak to widzisz, czy nie jest to aż tak szerokie?
KS: Nie, znaczy, powiem ci tak – bardzo dobre skojarzenie i bardzo dobre pytanie, i pogłębienie tej kwestii. Ja odniosłem się do pewnych stanowisk, do podziału obowiązków. Bo, jeszcze przez UX-em moglibyśmy wpuścić badacza, który działa niezależnie i on jest osobą, która zbiera wszystkie doświadczenia, robi warsztaty z klientami, robi testy. Potem znowu wchodzi do tej fazy po UI-u, znowu testuje to co ktoś tam pomalował – pewien produkt, który mamy. Trzeba sprawdzić z użytkownikami, zrobić iterację tego produktu, wrócić z powrotem do fazy projektowej, dobudować pewne funkcjonalności, których jeszcze nie mamy. Tak że, jak najbardziej się z tym zgadzam. To, o czym powiedziałeś, to jest taki UX, jako szerokokątne doświadczenie klienta. Ja bym to nawet określił sformułowaniem customer experience, czyli generalnie doświadczenie klienta. To jest bardzo ważna rzecz, o której nie powiedziałem, a która koresponduje z tym, o czym wspomniałeś przed chwilą.
Tak naprawdę UX i UI, nie możemy zamykać do branży, powiedzmy IT. To jest tak naprawdę budowanie wszystkiego.
Generalnie customer experience, czy human center design, czyli generalnie projektowanie, tworzenie produktów, usług, procesów produktu, całości systemów, ekosystemów, skoncentrowanych tak naprawdę na człowieku, czyli nawet nie użytkowniku. Tutaj mamy human center, a tu mamy user center – sprowadziliśmy człowieka do roli użytkownika, czyli jakby umniejszyliśmy istotę ludzką do roli pewnego elementu w grze. A mówimy o tym, że to jest tak naprawdę human center design, czyli budowanie doświadczeń klienta w całym procesie interakcji z pewnym systemem, czy ekosystemem. Jeżeli te ekosystemy potem zawężamy, czyli na przykład zawężamy je do chociażby takiej branży e-commerce’owej czy w ogóle commerce’owej jako takiej. Czyli jak przedstawić na przykład doświadczenie klienta w sklepie stacjonarnym, gdzie on wchodzi, gdzie widzi, dotyka namacalnie pewne produkty, czuje je, chłonie wzrokiem, doświadcza wszystkimi zmysłami, które posiada – jak takie doświadczenie przełożyć do e-commerce’u?, czyli sprawdzanie po ekosystemach.
Byłem kiedyś na wycieczce w jednym z takich fajnych sklepów w Poznaniu. Nie wiem, czy ty bywasz w Poznaniu, ale jest sklep na Podgórnej, prowadzi go Tomek Muller. Bardzo fajna postać, specjalizuje się w modzie męskiej oraz w wysokoprocentowych, dobrej jakości alkoholach, między innymi whisky. Prowadzi jeszcze taki fajny podcast i na ulicy Podgórnej ma sklep, który został zaprojektowany, stworzony z myślą o jak najlepszym doświadczeniu klienta. Wchodząc tam, zaprojektowali całą przestrzeń zakupową, czyli ten commerce standardowy – taki realny sklep. Myśleli na każdym kroku, jak ty się powinieneś czuć, przechodząc przez poszczególne punkty styku z zakupem produktów, które są tam wystawione. Czyli tu masz bar, podłoga jest z określonego materiału, to wszystko ma określony zapach, witryna wygląda w określony sposób, klient obsługiwany jest w określony sposób, z określonym schematem obsługi. Wszystko, co składa się na cały, powiedzmy, ekosystem sklepowy, jest zamknięte w tym całkowitym doświadczeniu klienta. I tutaj nie wyróżniamy już żadnego UX-a, UI-a, czy badaczy. To jest cały ekosystem, który został od początku do końca zaprojektowany.
I pozwól, że jeszcze na koniec powiem o tym, o czym Ty wspomniałeś. Na przykład z marketerem: marketer wypuścił w social mediach reklamę banerową i na reklamie banerowej jest napisane 50% gratis na pierwsze zakupy w twoim sklepie internetowym. Czyli teraz klient jest w social mediach, nagle ta reklama mu się wyświetla i wchodzi na nasz sklep internetowy. Czyli tak naprawdę jego doświadczenie związane z naszą marką, jest już budowane na etapie pierwszego wyświetlenia tego banneru. Ten szerokokątny UX dzieje już na etapie pierwszego kontaktu klienta z marką. Pierwszego momentu kiedy zobaczy, usłyszy, np. u kolegi, koleżanki zobaczy ubranie i też chce je mieć. W tym momencie zaczyna się już doświadczenie zakupowe i od tego momentu moglibyśmy mówić, że projektowanie tych punktów jest bardzo istotne. Może zaraz do tego jeszcze przejdę, bo pewnie masz pytania, przydługa wypowiedź, mówiłem ci, żebyś mnie stopował i przerywał.
BD: Będę cię stopował za chwilę, między innymi dlatego, że Rozmowy Saunowe cieszą się tym, że są zazwyczaj dość krótkie. Wywiad, czy rozmowa zawsze są dłuższe, bo dwie osoby mają coś do przekazania, jest interakcja, ale im krócej tym lepiej. Głównie dlatego, że w saunie się nie siedzi zazwyczaj dłużej niż 15 minut, więc jak dojdziemy do dwóch takich seansów saunowych, to będzie w sam raz.
Chciałbym spróbować teraz zejść na konkretne przykłady – tak, żeby słuchaczom łatwiej było sobie zobrazować, jakie błędy z obszaru UX w e-commerce’ie, czyli internetowych biznesach, najczęściej ludzie popełniają i najczęściej o tym zapominają? Czyli, ja to nazywam, takie powolne gotowanie żaby. Jak sklep był mały, to nie było problemem a jak już urósł a nadal jest tak samo, bo zawsze było, to już nie jest ta droga. Gdybyś miał przedstawić 2-3 przykłady czegoś, co jest źle ogarnięte UX-owo a bardzo wiele sklepów, właścicieli sklepów o tym nie myśli.
KS: Kilka rzeczy, skupmy się na 2-3, tak jak powiedziałeś. Pierwsza kwestia to jest menu. Odpowiednia konstrukcja całego segmentu, czyli bierzemy pod uwagę dwa obszary głównie, tj. desktop i mobile, czyli urządzenia, w których najczęściej są wyświetlane commerce’y. Odpowiednio ułożone menu, z względu na to jaką mamy strukturę sklepu. Sklep jest duży, czy mały, jak dużo jest produktów, w jaki sposób w takim menu je możemy zaprezentować? Czy to będzie megamenu rozsuwane czy jakieś proste menu, czy to będzie menu, które od razu ma w górnym pasku konkretne pozycje, które my sprzedajemy na sklepie? Bardzo ważna rzecz, o której ludzie zapominają i traktują to macoszemu. Natomiast klient, który wchodzi na sklep, będzie z tego korzystał najczęściej. Bardzo fajnie – ma banery, rotatory produktów, promocje, jakieś super przyciski et cetera. Ale nie – kluczem jest właśnie drzewko kategorii. Jeżeli zrobimy dobrze drzewko kategorii, będzie ono logiczne i dostosowane do potrzeb naszego użytkownika, to jest właśnie pierwsza i najważniejsza rzecz. Druga kwestia, jeżeli chodzi o menu, to jest zapominanie o tym, że użytkownicy lubią mieć to samo wszędzie. Ja się z tym dosyć często spotykam, zwłaszcza w kontekście nowoczesnych, stylistycznych, modernistycznych e-commerce’ów, gdzie menu klasyczne, desktopowe, czyli wylistowane, zamienia się w tak zwane menu hamburgerowe, czyli takie, które występuje na mobile’u i to jest podstawowy błąd. Nie wolno tak robić z uwagi na to, że użytkownicy są przyzwyczajeni do listowanego menu na desktopie i oni nie wiedzą w ogóle, że takie menu chowane jest gdziekolwiek i nie potrafią z tego korzystać. Są różne menu, częściowo jest pokazane, częściowo jest schowane, różnego rodzaju hybrydy. Ja osobiście jestem zwolennikiem tego, że menu desktopowe powinno być wylistowane maksymalnie, bez żadnego chowania, natomiast dopiero menu mobilne, może być faktycznie spakowane pod hamburgera, bo to jest naturalny element, który występuje. Kolejność to jest umieszczenie przycisku menu na mobile’u. Bardzo często się spotykam ostatnio z taką sytuacją, że przycisk menu jest umieszczony w lewym górnym rogu. Jeżeli jesteś osobą praworęczną, a większość osób jest praworęcznych, nie jesteś w stanie jedną ręką kliknąć w to menu. Musisz sobie pomóc, nosem na przykład. Zdarza mi się korzystać z nosa, jak mam rękawiczki. Natomiast jest to po prostu podstawowy błąd i tego trzeba unikać. Wszystkie elementy kluczowe akcji powinny się znajdować jak najbliżej ergonomii użytkownika, więc po prostu palca kciuka i palców dłoni, bo zasady ergonomii tu są ignorowane całkowicie. To jest pierwsza rzecz.
BD: Jeszcze zanim uciekniemy z menu, bo mam pytanie do menu – czy nie masz wrażenia, że ten hamburger w wersjach desktopowych wynika z pewnego podejścia nawet nie mobile first, ale mobile only? To po prostu jest to, że dana strona nie ma zrobionej nawet wersji jakby desktopowej, tylko ma już na tyle dużo ruchu z mobile’u, np. 60-70%, że desktop jest traktowany per noga, czyli to, co jeszcze 10, 5 lat temu było, mobile jest już od dekady, odwrotnie. Teraz już coraz więcej sklepów, marek ma więcej ruchu mobilnie niż desktopowo.
KS: To się zgadza, jak najbardziej.
BD: Czy to wynika z lepszego ruchu na mobile’u, czy po prostu z braku dorobienia lepszej wersji desktopowej?
KS: Znaczy, ja w ogóle powiem przewrotnie, ja jestem zwolennikiem tezy desktop first i już ci powiem dlaczego. Bo zdecydowanie lepiej i łatwiej i szybciej projektuje się rzeczy na desktopie i redukuje do mobile’a niż odwrotnie, niż projektując mobile i rozbudowując do desktopu. To jest jak z kartką papieru, zdecydowanie łatwiej robi się coś na dużym formacie niż na mniejszym – z uwagi na to, że do mniejszego łatwiej jest odejmować pewne elementy. A weź teraz zrób cokolwiek na małym formacie i spróbuj to rozbudować do dużego formatu, jest o wiele trudniej, ponieważ musisz zacząć wymyślać, jak przestrzeń zagospodarować. Robiąc odwrotnie, czyli wychodząc z desktopu – robiąc dobrze desktop, a następnie eliminując pewne elementy, oczywiście mobile się robi niezależnie, ale eliminując pewne elementy z desktopu, zdecydowanie łatwiej jest zaprojektować mobile. Bo już gros elementów masz i teraz tylko decydujesz, co dla tego użytkownika faktycznie będzie istotne w moim sklepie. Na desktopie możemy zrobić jakiś bannerek, jeszcze jeden dodatkowy, jeszcze coś tam – detale, które na desktopie działają, bo mamy duży ekran i zdecydowanie więcej czasu użytkownika na ekranie desktopowym niż na mobile’u. Na mobile’u to jest raz, dwa, trzy, szybka akcja, kluczowe elementy tylko i wyłącznie. Dlatego ja jestem zwolennikiem tezy desktop first.
BD: Pierwsze słyszę, ale to ciekawe podejście.
KS: To jest trochę przewrotne, natomiast ja po prostu uważam, z praktyki , że jest to zdecydowanie prostsza perspektywa. Natomiast, odpowiadając na to pytanie, być może jest to prawda, to znaczy, właśnie zaniedbywanie ekranu desktopu z uwagi na to, że ten ruch desktopowy często już jest marginalny – nie jest to nawet 30%, często w niektórych przypadkach to jest po 10%, bo większość tych transakcji jednak odbywa się już na mobile’u.
BD: Przykład Instagrama, który długo nie ma w ogóle wersji desktopowej i ona jest z założenia uboga, tam nic nie dodasz, to funkcjonuje tylko jako jakaś dziwna hybryda.
KS: Tak, to się zgadza. Natomiast to, co jest jeszcze ważne – mimo wszystko nadal dużo sklepów internetowych, zwłaszcza e-commerce’ów zaniedbuje mobile’a. Wszyscy niby wiedzą, że jest obecnie era mobile ale zaniedbania w tym zakresie są duże, mimo wszystko, cały czas.
I trzeba o tym pamiętać, że zdecydowanie łatwiej jest wszystko zrobić na desktopie, bo jak się ma przestrzeń, to jest łatwiej umieścić treści i rozłożyć odpowiednio przestrzenie. Tam się projektuje zdecydowanie łatwiej. Zdecydowanie trudniej jest natomiast, przełożyć ilość informacji, którą chcemy przekazać użytkownikowi z desktopu na mobile. To jest zdecydowanie trudniejsze zadanie, bo tu ilość trzeba w jakiś sposób zredukować.
BD: Różne ekrany, każdy piksel różnicy pokaże, że coś, co źle osadziliśmy, jakiś istotny element, typu przycisk „wyślij” nie jest widoczny na pierwszym foldzie albo w ogóle nie jest widoczny, bo jest za dużo tekstu i scrolla nie zrobimy.
KS: RWD wszystko zrobiło, rozwaliło wszystko totalnie. Jak nie było RWD wszystko było proste, wszystko było kwadratowe.
BD: Responsive Web Design.
KS: Tak, Responsive Web Design – wszystko jest rozwalone i klienci tego nie rozumieją do końca. My współpracujemy z klientami – oni nie rozumieją – przecież u mnie na telefonie tego nie widać. Nie widać, bo Pana telefon jest ciut większy i szerszy niż projektowany ekran, na którym opierał się developer, który projektował apkę. Tak że tutaj znowu te mankamenty.
BD: Ważne, że jemu nie działa i to też słuszne podejście, bo innym też może nie działać. Ale to już jest temat rzeka dostosowania HTML-a do przeglądarek i do których wersji, jak daleko wstecz i do którego Internet Explorera próbować jeszcze się zrównywać.
KS: Tak, praktyka jest taka teraz, że coraz mniej firm w ogóle dba o Internet Explorer. My w ogóle już nie mamy w umowach Internet Explorer, to jest wymarła przeglądarka.
BD: Zło konieczne.
KS: Natomiast pozwól, że jeszcze wrócę do tych dwóch kluczowych, ważnych rzeczy. Druga kwestia, na którą warto zwrócić uwagę pod kątem UX-a, to jest drzewko kategorii. Czyli, po pierwsze zaprezentowanie tego menu, ale przede wszystkim ułożenie logiczne tego menu – to w jaki sposób drzewko kategorii jest ułożone, jak logicznie jest przedstawione menu. Zwłaszcza w sklepach skomplikowanych, takich platformach B2B na przykład, gdzie to nie jest takie proste, jak w sklepie z ubraniami, gdzie mamy kategorie: damska, męska, dziecięca i unisex i tam jakaś x – to jest proste, to jest easy i wszyscy to rozumieją. Ale jak mamy sklep, gdzie sprzedajemy na przykład śrubki, i te śrubki musimy jakoś podkategoryzować, gdy tych śrubek mamy 50 różnych rodzajów i każdy klient kupuje inne i każdy klient inaczej myśli o tych śrubkach – weź teraz bądź mądry.
BD: Jak się do tego podchodzi? Idzie się do kogoś, kto wyznacza trendy? Tam gdzie ludzie zazwyczaj kupują – jakieś Castoramy, OBI i inne -ntam idą, tam szukają, więc wykorzystujemy te mechanizmy, które już się zakorzeniły?
KS: Już ci mówię. Akurat mieliśmy przykład sklepu z farbami. Nie sklepu, to jest bardziej strona, która przypomina sklep z farbami. I tam się opieraliśmy na badaniach, które firma miała wykonane z użytkownikami. Opieraliśmy się na helpdesku i na pytaniach użytkowników, jakie kierują do nas – z jakimi pytaniami wracają. My wiemy mniej więcej, czego oni nie rozumieją i na podstawie tego, budujemy architekturę informacji, żeby, krótko mówiąc, ułatwić im życie. Jedyną opcją jest NVP – to jest stworzenie czegoś, podłączenie się pod Analiticsa, podłączenie się pod Hotjara, lub inne narzędzie mapowania ciepła i sprawdzanie tego. Nie ma tutaj mądrego – to jest analiza ekspercka. Tak samo, jak byś Ty podszedł i powiedział, że według ciebie to będzie tak i tak, bo takie jest twoje doświadczenie z wielu lat pracy, w e-commerce’ie. A moje doświadczenie będzie troszeczkę inne, ja powiem swoją analizą ekspercką, że ja robię to inaczej. A teraz, jeszcze badania kosztują, analizy kosztują, nie każdą firmę na to stać. Małego polskiego e-commerce’a, średniej firmy nie stać na to, żeby zrobić badania z użytkownikami, które kosztują dziesiątki tysięcy.
BD: No właśnie, ale z użytkownikami, teraz chociażby przez takie narzędzia, jak Hotjar, czy inne opcje mapowania heatmap, można już robić badania. Niby nadal ilościowe, ale jednak już jakby elementy jakościowe można zbadać w znacznie mniejszym budżecie.
KS: To się zgadza, zwłaszcza, że możesz nagrywać te wszystkie akcje użytkowników. Ale co jest bardzo ważne, to są tylko działania ex post, to nie jest ex ante. Bo mówimy też o działaniach ex ante, czyli możemy po prostu przeprowadzać. My mamy klientów, z którymi robiliśmy badania ex ante, robiliśmy badania jakościowe z użytkownikami, testowaliśmy z nimi prototypy ale powiem ci szczerze, dopiero jak masz ilościówkę, to znaczy, jak ci wejdzie na ten sklep tysiąc, 2 tysiące, 10 tysięcy, 100 tysięcy ludzi i sprawdzasz ich, to się okazuje, że te 15 osób, które zrobiłeś na jakościówce, to była jakaś tam grupa, ale cała ta reszta ma inne przemyślenia, inne funkcje szuka i tak dalej. Nie zawsze te badania jakościowe 1 do 1 przekładają się potem na tą ilość.
BD: Ja mam takie wrażenie, bo też swego czasu pracowałem w agencji interaktywnej i dla bardziej majętnych klientów, wtedy to akurat była marka Heyah, robiliśmy rzeczywiście badania jakby przed wykonaniem. Było badanie layoutów, czasami skomplikowanych i bardziej innowacyjnych, to wygrał taki, który był bardzo trudny w użyciu, ale faktycznie wszystkim się spodobał, tak, więc to było ciekawego, że z tych badań wyszło. I to były badania po 20 osób w pięciu różnych miastach, kilka serii, niesamowite koszty w ogóle, zaangażowanie, szkła weneckie, badacze, nagrywania i tak dalej. Ale mam wrażenie, że takie badania miały wtedy większy sens, bo sam development danej aplikacji, szczególnie w taki zupełnie inny sposób, nie na gotowych narzędziach, tylko praktycznie od zera, powodował, że opłacało się takie badania zrobić wcześniej. NVP wtedy, skrót nie istniał jeszcze, może już idea gdzieś tam istniała, ale po prostu znacznie droższe było wykonanie finalnie takiej aplikacji, więc opłacało się testować przed. Teraz, przy NVP, przy testach AB, które można uruchomić praktycznie na byle czym, jak już jest jakiś ruch, zaraz zadam pytanie, jaki ruch powinien być, żeby testy AB miały sens, ale mam takie wrażenie, że podejście linowe pokazuje, że można szybciej coś wypluć, postawić na produkcję i zobaczyć, jak to działa, niż czekać waterfallowo aż zrobimy piękny 12-miesięczny projekt, żeby się na koniec okazało, że to jednak nie jest to, czego chcieli użytkownicy. To jest też kwestia zmiany podejścia i technologii, że teraz łatwiej jest zrobić NVP?
KS: Na pewno, zwłaszcza w e-commerce’ie, gdzie możemy naprawdę bardzo szybko coś postawić, nawet na jakimś gotowcu, czy szablonie.
My często sugerujemy klientom – zróbmy fajny proces – postawmy coś, nawet z bazowymi funkcjonalnościami i potem sprawdzajmy to.
Jak powiedziałem przed chwilą, my projektujemy pewną rzecz i do końca tak naprawdę nie wiemy, czy ten projekt chwyci, czy ta logika, którą my się kierujemy, czy to drzewko kategorii, które wymyśliliśmy faktycznie się sprawdzi. Dlatego my zawsze sugerujemy wyprodukować i dopiero potem sprawdzić, jak to działa. I teraz znowu jest kwestia tego, co jest głównym kosztem, jak powiedziałeś, w takim przykładzie Heyah, to był duży koszt wyprodukowania aplikacji. Natomiast w tej chwili, na przykład jeżeli chodzi o e-commerce’y, to dużym kosztem jest integracja tych e-commerce’ów. Duża część budżetu to nie jest nawet cały front, projektowanie, co potem zintegrowanie, zmerge’owanie tego e-commerce’a z jakimś systemem RP, z jakimiś platformami marketplace, z różnymi systemami wysyłek, płatności et cetera – cała ta architektura, którą trzeba połączyć. A jak masz jeszcze skomplikowane platformy B2B, gdzie musisz się łączyć po jakichś AXML-ach różnego typu, musisz budować własne rozwiązania do tych platform, to zżera gros budżetu. Warstwa interfejsu, którą my widzimy jako klienci danego sklepu, ostatecznie coraz częściej jest kwestią mniej kosztowną w całej produkcji. I dlatego ona też jest mniej kosztowna, żeby potem do niej wracać i w iteracyjny sposób, zaczytując te dane, to sprawdzać. Teraz to, co zawierało Twoje kolejne pytanie, czyli ile osób powinno wejść na tą stronę, żeby dane były wartościowe. Powiem ci tak – tak naprawdę znowu zależy to od narzędzia, jakim badamy, ale weźmy pod uwagę chociażby mapę ciepła. Zasadniczo ruch nawet na poziomie, powiedzmy, 2 do 5 tysięcy osób, unikalnych użytkowników to już jest wystarczająco, żeby coś z tego widzieć.
BD: Dziennie, miesięcznie, tygodniowo?
KS: Wiesz co, do tego testu, poczekajmy, aż uzyskamy 5 tysięcy wejść unikalnych i sprawdźmy sobie wtedy, jak to tam wyglądało. I tak sugeruję – mniej więcej, od 2 do 5 tysięcy minimum. Oczywiście im więcej mamy, tym pewne zachowania użytkowników widzimy lepiej, bo to ciepło, te punkty robią się coraz gęstsze i widzimy, że ten button jest klikalny, a ten inny nie jest. To rozumieją, a tego nie. Natomiast potem, jeśli chcieć z tego zrobić, analizę jakościową, czyli na przykład wziąć firmę i pooglądać co ci ludzie tam robią, to byś zgłupiał – życia by Ci stary nie starczyło, żeby przeanalizować wszystkie możliwe akcje. Z tego, co słyszałem ostatnio, pojawiają się na rynku programowania, które ci podpowiadają lepszej jakości filmy. Jakimś mechanizmem sztucznej inteligencji wybierają te, które są najbardziej jakościowe i te ci podsuwają, jako badaczowi. Więc jest to coraz lepsze, łatwiejsze w użyciu, natomiast zasadniczo potem chcąc z tego zrobić analizę jakościową, musisz wybrać pewne akcje i sprawdzić sobie, co funkcjonuje.
BD: Ale pytanie, na ile ta analiza jakościowa jeszcze ma sens w momencie, kiedy masz konwersję? To oczywiście zależy, co chcesz osiągnąć w danej zmianie, bo to nie zawsze jest konwersja, ale testy AB, jest zawsze prosty wynik. Wiesz, co przejdzie dalej, gdzie jest większa konwersja i tam nawet nie musisz zgłębiać poszczególnych z tych tysięcy przypadków użycia. Tylko tam, gdzie zadziałało lepiej, gdzie użytkownik przeszedł dalej z większym efektem. Wspomniałeś o tych, 2 tysiącach osób, trzeba pamiętać, że to jest 2 tysiące osób, które dojdzie do etapu, który testujemy. To nie jest 2 tysiące osób, które wejdzie nam na stronę główną, tylko jeśli testujemy coś na etapie płatności, to już przez wszystkie alejki konwersji, jak ktoś dojdzie do płatności. Żeby mieć faktycznie 2 tysiące ludzi na tym etapie oznacza, że musimy mieć pewnie ze 100 tysięcy ludzi, użytkowników na stronie, żeby dojść do tego momentu, tak?
KS: Zgadza się, wszystko zależy od tego, co testujesz, i tak samo jest, jeśli chodzi o analizę jakościową. Analiza jakościowa przydaje się, jeżeli na przykład testujesz jakiś konkretny element, na którym ci bardzo zależy. Wtedy faktycznie warto wejść głębiej i prócz samej analizy ilościowej, czyli jaką masz tam konwersję, jaką masz klikalność tego przycisku i tak dalej, warto poświęcić troszeczkę czasu i przeanalizować chociażby nagrania wideo z tej konkretnej podstrony, na której jesteś, gdzie ten użytkownik jest, co on tam robi i dlaczego, na przykład, nie kliknął albo kliknął w ten przycisk. Czy on się scrolluje, czy on sprawdza, jak dużo czasu spędza na tej stronie, wtedy warto sięgnąć do danych już czysto ilościowych. Konkretny, dany element sprawdzasz – zrobiłeś jakiś konfigurator, jakieś rozwiązanie bardziej niestandardowe i zależy ci na większej ilości informacji – wtedy warto do tego sięgnąć. Pewnie ciężko by było robić analizę jakościową strony głównej albo karty produktu, na które wchodzi tysiące ludzi, przewijających się przez sklep.
BD: Jeszcze odnośnie kosztów, o których mówiliśmy. Na pewno zupełnie innym kosztem i innym wyzwaniem jest to, jeśli jest to e-commerce, który dopiero zaczyna i na kilka tysięcy użytkowników w skali testu trzeba poczekać, bo tam jakikolwiek błąd mniej boli. Wyobraźmy sobie na przykład jakąkolwiek zmianę w Allegro. Tam oczywiście nigdy testy nie są robione tak, że 50% użytkowników widzi to a 50% to, tylko bierzemy pół promila użytkowników i połowa z tego pół promila widzi to, a druga połowa z tego pół promila widzi to i dopiero wtedy są jakieś hipotezy, z czasem rozwijane – taka zmiana na żyjącym organizmie, który generuje potężne pieniądze. To jest też ryzyko kosztu, jeśli coś zepsujemy. Kwestią nie jest to, jak szybko dojdziemy do optymalnego rozwiązania, tylko że każda minuta w takim silniku, w takim organizmie, to są stracone potężne pieniądze.
KS: Zgadza się. Mówimy o zupełnie innej skali. Jak pracujemy dla małych klientów, tak jak powiedziałeś, zanim uzbierają odpowiednią liczbę użytkowników, to mija czas. Druga sprawa, że startując z e-commerce’em, musisz przyjąć jakieś założenia, więc tutaj akurat badania warsztatowe. Nawet zrobienie sobie wewnętrznie warsztatu, pomiędzy projektantem a klientem, który względnie rozumie potrzeby swojego docelowego użytkownika, już daje dużo na starcie. Już jest łatwiej ten sklep zaprojektować tak, żeby on chociaż względnie odpowiadał potrzebom użytkownika. Jednak, dopiero po czasie my tak naprawdę jesteśmy w stanie zebrać jakieś wartościowe dane, które pozwolą nam na ostateczne uzyskanie odpowiedzi, czy myśmy to dobrze zrobili czy też nie. Natomiast w przypadku takich kolosów, jak Allegro czy nawet większe sklepy, powiedzmy, taka Vistula, czy Bytom – oni mają tysiące użytkowników dziennie i jest im po prostu łatwiej, tak jak mówisz, zrobić nawet testy AB częściowe, gdzie testują pewnie elementy. Nie wiem, czy słyszałeś tą historię Facebooka, że oni mają jakieś środowisko, nie wiem czy to Nowa Zelandia, czy jakiś inny kraj, gdzie po prostu testują wszystkie funkcjonalności.
BD: A nie Nowa Gwinea?
KS: Albo coś takiego, wiesz. Wiem, że oni wybrali jakiś konkretny kraj, gdzie im jakby wyszło, że tamto społeczeństwo najbardziej odpowiada jakby społeczeństwu globalnemu, które używa tego Facebooka i tam po prostu wrzucają. Jakakolwiek nowinka jest, to najpierw jest tam, sprawdzają, czy jest okej czy nie jest okej, jak nie jest okej to ją wywalają, a jak jest okej, to puszczają w całym tym ekosystemie Facebooka.
Tak, jak są lokale wyborcze, które zazwyczaj dobrze reprezentują całą populację. Ten jeden konkretny jakby, w tej małej miejscowości, która faktycznie zgadza się jakby z populacją, najbardziej jest reprezentatywna, nie wiedzieć czemu.
Tak, coś w tym jest bardzo podobnego, nie.
BD: Krzyśku, staramy się trzymać rzeczywiście dwóch cyklów saunowych w naszych wywiadach. Ostatnie pytanie do ciebie, jakiego typu usługi można u was zamówić? Mówiliśmy o tym UX, UI, liznęliśmy kilka tematów, design thinkingu nie ruszyliśmy, może uda się kiedyś oddzielnie. Powiedz, jakiego typu usługi można u was zamówić?
KS: Wiesz, to co na samym początku powiedziałem. My się zajmujemy kompleksowym tworzeniem sklepów internetowych. Nie robimy sklepów na szablonach, staramy się, żeby każdy sklep to był indywidualny projekt graficzny z wcześniej przeprowadzonymi warsztatami. Czyli taki warsztat strategiczny na początek, potem na podstawie warsztatu przygotowania architektury informacji, backlogu produktu. Na tej podstawie przygotowanie projektów graficznych dedykowanych wersji desktop oraz mobile, a następnie dopiero, na samym końcu, zaprogramowanie, wdrożenie tego i wypuszczenie na produkcję. Tak to u nas wygląda i tego się trzymamy – kompleksowe, od początku do końca, przejście przez projektowanie sklepu internetowego. Łatwiej powiedzieć czym się zajmujemy, jesli oddzielić to, czym się nie zajmujemy. Nie zajmujemy się SEO – od tego są inne firmy, z którymi współpracujemy. Nie zajmujemy się social media marketingiem – od tego też są inne firmy, z którymi współpracujemy, to tak w skrócie.
BD: Czyli, parafrazując, mówiłeś o WordPressie i Ucommerce’ie, czyli jakby łączycie technologię ogólnodostępną, ale nie wykorzystujecie gotowych szablonów, tylko szablon piszecie.
KS: Piszemy od zera. Wiesz co, jeszcze w kontekście Presty, często korzystamy z szablonów z uwagi na to, że to znacząco przyśpiesza budowanie Presty i klienci często z tego korzystają. Bo Presty też budujemy i korzystamy z gotowych szablonów, natomiast zdarza się też, że budujemy Presty od zera. Natomiast im bardziej zaawansowana technologia, to ten sklep jest droższy. Czyli sklep Ucommerce’owy to jest ten najniższy level, potem jest Presta, która jest troszeczkę droższa. No i wiadomo, jak byśmy weszli na Magento, to to są już konkretne pieniądze.
BD: Super. Krzyśku, bardzo serdecznie dziękuję za rozmowę. Mam nadzieję, że zaciekawiło to tych słuchaczy, którzy słyszeli o UX-ie i UI-u i tylko odmieniają to przez przypadki, a nie zawsze o tym pamiętają. Mam nadzieję, że zachęciło to Was do refleksji i do zastanowienia się, czy to, co się u Was dzieje – w sklepie, z usługą – czy to są usługi czy produkty w pełni optymalne i czy nie mogą być lepsze.
KS: Bolek, dziękuję bardzo za poświęconą chwilę i umożliwienie wypowiedzi. Mam nadzieję, że faktycznie coś ciekawego się nasi użytkownicy z tego dowiedzieli, bo UX jest tematem, który jest trendy, jest na topie i będzie na topie jeszcze bardziej w niedługim czasie, więc warto sięgnąć po więcej.
Kliknij w obrazek, aby posłuchać lub nagrać komentarz głosowy