FAQ: UX i design

Question 1

Czym jest architektura informacji?

Accepted Answer

Architektura informacji (AI) dotyczy tworzenia i przedstawiania informacji (tekstowych oraz graficznych) w sposób czytelny i intuicyjny dla odbiorcy. Organizacja treści to grupowanie ich w odpowiednie kategorie oraz ich odpowiednie nazywanie, nadawanie im hierarchii, tworzenie przejrzystej nawigacji, umieszczanie odpowiednich grup treści w intuicyjnie kojarzonych do tego miejscach. Dzięki odpowiednio zaprojektowanej architekturze informacji klient, wchodząc na nasz sklep internetowy, wie w jaki sposób dostać się do pożądanej przez niego kategorii produktowej, jak przefiltrować wyniki np. po rozmiarze oraz wie w jaki sposób może przejść do finalizacji zamówienia (szuka ikonki koszyka, znajdującego się w górnym prawym rogu). AI ma także wpływ na SEO: odpowiednie zaplanowanie treści ułatwi robotom indeksującym pozycjonowanie naszego sklepu w wyszukiwarce internetowej, np. zastosowanie czytelnych linków oraz nawigacji "okruszkowej" - czyli przedstawianie użytkownikowi jego aktualnej lokalizacji w serwisie, która umożliwia mu szybki powrót do poprzedniego miejsca w strukturze strony.

Question 2

Co to jest audyt UX?

Accepted Answer

Audyt UX to proces, podczas którego ekspert sprawdza czy dany serwis jest dobrze zaprojektowany pod kątem użyteczności: czyli czy użytkownicy, podczas korzystania z serwisu, realizują zamierzone przez siebie cele. W przypadku sklepu internetowego oznacza to, że użytkownicy przykładowo:
 umieją wyszukać interesujący ich produkt,
 mogą go wygodnie obejrzeć, nawet na małym ekranie,
 znajdują wszelkie potrzebne informacje dotyczące nie tylko samych produktów, ale także wysyłki czy zwrotów w sposób wygodny, efektywny i satysfakcjonujący. 
Za pomocą audytu UX można więc zweryfikować, czy podczas korzystania z serwisu nie występują problemy i niedogodności, które mogą zdezorientować użytkownika i potencjalnie sprowokować go do porzucenia strony. Identyfikacja i naprawa słabych punktów doświadczenia zakupowego jest jednym ze sposobów, który pozwoli podnieść konwersję w sklepie internetowym.
Audyt jest przeprowadzany za pomocą różnych metod (jak np. wędrówka poznawcza czy analiza heurystyczna) oraz na podstawie danych z narzędzi takich jak Google Analytics czy Hotjar. W toku analizy i audytu najczęściej identyfikuje się błędy użyteczności oraz hipotezy do testów w podziale na 3 kategorie - krytyczne, istotne i mniej istotne. Raport powinien tym samym szeregować priorytety oraz zawierać konkretne rekomendacje, ułatwiające wdrożenie poprawek.

Question 3

Co to jest packshot?

Accepted Answer

Packshot to przedstawienie produktu za pomocą statycznego lub ruchomego (obrotowego) obrazu. Dla przygotowania packshotu potrzebne jest wykonanie zdjęć lub sekwencji zdjęć dokładnie pokazujących produkt pod różnymi kątami. Do tego typu fotografii używa się białego tła, stołu lub namiotu bezcieniowego oraz profesjonalnego oświetlenia. Po obróbce zdjęcia te składa się w prezentację, którą klient może manipulować na ekranie swojego urządzenia, by dokładnie obejrzeć produkt.

Question 4

Czym jest UI?

Accepted Answer

UI to skrót od angielskiego zwrotu User Interface, oznaczającego interfejs użytkownika. To wszelkie elementy związane z warstwą wizualną, dzięki którym strona/aplikacja udostępnia użytkownikowi swoje poszczególne funkcjonalności. Mówiąc o projektowaniu UI (lub wymiennie stosowanym - GUI, od ang. Graphical User Interface) mamy na myśli proces tworzenia, rozmieszczania i stylowania (dobierania odpowiedniej kolorystyki i typografii) poszczególnych podstron i elementów na stronie takich jak menu, karta produktowa, formularz zakupowy czy ikony związane z dodaniem produktu do koszyka. Odpowiednio zaprojektowane UI odpowiada za rozumienie działania poszczególnych części serwisu - dobrze zaprojektowany interfejs jest intuicyjny i czytelny dla użytkownika.
Warstwa UI/GUI powinna też być zgodna z identyfikacją wizualną i komunikacją marketingową marki, by sklep stanowił spójny wizualnie element z innymi kanałami styku z naszym klientem. Warto jednak pamiętać, by projektowanie UI było oparte o dobre praktyki i techniczne wymagania, ponieważ czasem kreatywna wizja projektantów jest w stanie znacząco pogorszyć UX serwisu.

Question 5

Czym jest UX?

Accepted Answer

UX to pojęcie, które obejmuje wszystkie aspekty związane z doświadczeniem użytkownika (ang. user experience). Jest to całość wrażeń doświadczanych przez użytkownika serwisu, e-sklepu, aplikacji mobilnej czy innego, dowolnego produktu. Praca projektantów i badaczy UX skupia się na budowaniu pozytywnych doświadczeń - platforma powinna być atrakcyjna, funkcjonalna i użyteczna, a korzystanie z niej powinno dawać użytkownikowi przyjemność i satysfakcję, powinien móc za jej pomocą realizować określone przez siebie cele.Przykładowo, w e-commerce dobrze zaprojektowany UX przejawia się w wygodnym przeglądaniu contentu produktowego (użytkownik może znaleźć interesujące go parametry produktu, filtrować poszczególne kategorie) czy intuicyjnym formularzu zamówienia: użytkownik jest informowany, na którym etapie procesu się znajduje, może wygodnie wybierać spośród przedstawionych mu opcji, a ze strony systemu otrzymuje pełne informacje i pomoc w razie błędów.

Question 6

Kto powinien zaprojektować GUI sklepu internetowego lub aplikacji?

Accepted Answer

GUI (ang. Graphical User Interface, czyli graficzny interfejs użytkownika), często wymiennie stosowany z UI, to w uproszczeniu graficzna warstwa naszego sklepu internetowego, aplikacji lub serwisu. Jest ona niezwykle istotna szczególnie w branżach beauty czy fashion , gdzie liczy się nie tylko użyteczność i funkcjonalności serwisu, ale również strona wizualna i oddanie charakteru marki.

Przy budowie e-sklepu projektowanie GUI może odbywać się w różnych modelach:

1. Klient ma projektantów / grafików na pokładzie i samodzielnie projektuje warstwę graficzną, a software house odpowiada za pozostałe etapy wdrożenia (w tym UX),
2. Software house odpowiada za całość stworzenia sklepu, łącznie z etapem GUI,
3. Za GUI oraz wdrożenie odpowiadają dwie zewnętrzne firmy – przykładowo kiedy Klient chce zlecić stronę wizualną swojej agencji kreatywnej, która odpowiada za komunikację marki.

Każde z tych rozwiązań ma swoje plusy i minusy, natomiast żeby dokonać właściwego wyboru warto odpowiedzieć sobie na kilka kluczowych pytań:

1. Czy odpowiada nam stylistyka projektanta / zespołu projektującego, czy ma doświadczenie w projektowaniu dla naszej branży?
2. Czy specjalizuje się w tworzeniu interfejsów dla sklepów internetowych lub aplikacji?
3. Czy zna choćby podstawy UX, front-end developmentu oraz SEO?
4. Czy zna specyfikę projektowania na daną platformę e-commerce lub system operacyjny (np. sklepu Magento lub aplikacji na iOS i Androida)?

Z doświadczenia wiemy, że etap GUI może wywołać wiele problemów, w tym znaczące opóźnienie całego harmonogramu czy podniesienie kosztów developmentu. Najczęściej jest to spowodowane kierowaniem się odpowiedzią tylko na pierwsze pytanie, gdy tak naprawdę kluczowe są trzy kolejne. Jeśli projektant nie zna technicznych aspektów projektowania, najczęściej okazuje się, że finalny projekt wymaga wielu modyfikacji, by był możliwy do wdrożenia lub znacząco podnosi koszt budowy sklepu.

Oczywiście najłatwiej jest zarządzać projektem, w którym jeden podmiot odpowiada za całość procesu, w tym etap GUI. Jeśli jednak świadomie zdecydujemy się na rozdzielenie tych kompetencji pomiędzy różne strony, kluczowe jest zadbanie o dobrą współpracę i bieżącą komunikację między nimi, tak, żeby projekty graficzne były na bieżąco konsultowane z UX designerem czy front-end developerem.

Question 7

Jaka jest różnica między makietami Lo-Fi a High-Fi?

Accepted Answer

Makiety to graficzne przedstawienie w jaki sposób będzie wyglądała dana aplikacja. Końcówka fi to skrót od angielskiego słowa fidelity, czyli wierność. Stworzenie makiet Lo-Fi to pierwszy etap projektowania etap projektowania UX - pierwsze rozmieszczenie elementów i funkcjonalności można stworzyć na czystej kartce papieru lub za pomocą programów takich jak Azure, Balsamiq czy Adobe XD. Przy pomocy takich pierwszych szkiców jesteśmy w stanie omówić podstawowe wymagania biznesowe, które powinny być ustalone ze wszystkimi zaangażowanymi w projekt. Dzięki makietom Lo-Fi możemy szybko sprawdzić czy użytkownicy rozumieją jak działa produkt, czy jest dla nich intuicyjny i czy spełnia ich potrzeby. Na tym etapie warto skonsultować się także z programistami odpowiedzialnymi później za wdrożenie: tym sposobem oszczędzimy czas i pieniądze, na przykład rezygnując z konkretnego elementu sklepu, który byłby czasochłonny lub niemożliwy do wykonania w konkretnej technologii. Mając gotowe makiety Lo-Fi dużo łatwiej wycenić koszt jej wdrożenia przez programistów. 
Makiety High-Fi będą już odwzorowywały bardziej szczegółowy wygląd strony czy aplikacji - naniesione zostają kolory, grafiki, treści czy interakcje (np. w jaki sposób mają przesuwać się poszczególne ekrany w aplikacji). Dzięki stworzeniu makiet o wysokim poziomie szczegółowości możemy zobaczyć czy całościowa wizja jest zgodna z potrzebami i założeniami całego zespołu e-commerce, jeszcze przed stworzeniem finalnego produktu czy usługi.
Najczęściej makiety Hi-Fi nie są jeszcze finalnym GUI (lub UI) serwisu, czyli docelową warstwą graficzną. Mimo, że często są już do niej mocno zbliżone, to ostateczne szlify, łącznie z designerską wizją, są wprowadzane dopiero w etapie projektowania GUI.

Question 8

Jak product design może pomóc w budowie sklepu internetowego?

Accepted Answer

Product design (czyli projektowanie produktu) jest bardzo szerokim i intensywnie rozwijającym się pojęciem i może mieć zastosowanie w wielu branżach. W obszarze związanym z e-commercem i technologią, pomaga np. świetnie przekuć ogólny pomysł na sklep internetowy czy aplikację, w konkretny i bardzo szczegółowy plan ich stworzenia Podczas procesu projektowania, za pomocą takich narzędzi jak Product Canvas czy user stories będziesz w stanie połączyć wizję oraz wiedzę biznesu, marketingu, IT i UX w konkretny produkt cyfrowy. Holistyczne podejście, które bierze pod uwagę wszystkie zainteresowane strony, pomoże spełnić najważniejsze oczekiwania zarówno głównych interesariuszy w firmie, jak i docelowych użytkowników.

Dzięki takiemu podejściu możemy znacząco ułatwić i przyspieszyć proces tworzenia:
szczegółowej specyfikacji funkcjonalnej serwisu lub aplikacji,
architektury IT,
harmonogramu i kosztu wdrożenia.

Dodatkowe korzyści pracy w takim podejściu to również:
stworzenie spójnej wizji oraz poczucia wspólnego celu w zespole,
(jeśli w pracach uczestniczy software house czy inny zewnętrzny partner) wzajemne poznanie obu zespołów i ich sposobu pracy,
(jak wyżej) świeże spojrzenie zewnętrznych specjalistów na Twój projekt i potrzeby Twojego biznesu.

Jednak co najważniejsze, zaczynając tworzenie sklepu internetowego od etapu product design, będziesz w stanie:
zminimalizować ryzyko nieprzewidzianych kosztów oraz wydłużenia harmonogramu projektu,
szybko i efektywnie przejść do kolejnych faz projektu, jak np. projektowanie UX.

Jeżeli chcesz dowiedzieć się, jak dzięki product design uniknąć nieoczekiwanych kosztów oraz opóźnień przy projektowaniu sklepu internetowego czy aplikacji, przeczytaj nasz artykuł.

Question 9

Na co zwracać uwagę przy projektowaniu sklepu w wersji mobilnej?

Accepted Answer

Projektując wersję mobilną sklepu internetowego należy pamiętać o znacznie ograniczonej przestrzeni wyświetlania - każdy piksel powinien być więc dobrze zagospodarowany, a fonty czytelne. Klikalne elementy (np. ikona filtrowania, dodania do koszyka) powinny być takiej wielkości, aby móc bez problemu trafić w nie za pomocą kciuka, nie klikając przy tym sąsiednich przycisków. Najważniejszy element nawigacji, czyli menu, powinno być zawsze dostępne dla użytkownika - np. w formie belki na górze ekranu - dzięki czemu użytkownik, nawet przeglądając długą listę produktów, może przenieść się w inne miejsce na sklepie. By dopełnić komfortowego doświadczenia użytkownika używaj gestów, które automatycznie stosują użytkownicy smartfonów: pozwól na rozciąganie zdjęć, swipe'owanie. Rozwijaj poszczególne zakładki czy kategorie płynnie - staraj się nie przeładowywać stron bez potrzeby lub otwierać nowych okien - na smartfonie przeklikiwanie się między kilkoma kartami w przeglądarce będzie wyjątkowo niewygodne.

Question 10

O czym warto pamiętać projektując UX sklepu internetowego?

Accepted Answer

Proces projektowania UX możemy podzielić na kilka głównych etapów: zdefiniowanie potrzeby biznesowej, analiza potrzeb użytkowników i research konkurencji, projektowanie (UX, UI), wdrożenie, testowanie i optymalizacja. Aby zaprojektować jak najbardziej użyteczny sklep internetowy, należy pamiętać o wielu kwestiach, np.: 
 jakich informacji będzie poszukiwał użytkownik, 
 przez jakie atrybuty i cechy będzie chciał filtrować produkty, 
 czy proces składania zamówienia powinien uwzględniać nietypowe założenia (np. podanie specyficznych danych czy informacji do przesyłki),
 czy wszelkie komunikaty i ikony będą intuicyjne i łatwe do zrozumienia dla użytkownika,
 czy serwis będzie wygodny do przeglądania na urządzeniach mobilnych.

Zależnie od wybranej technologii, należy pamiętać o możliwościach i ograniczeniach platformy - zależnie od tego, czy będzie to SaaS, platforma open-source czy sklep dedykowany, musimy być przygotowani na różny poziom elastyczności wobec naszych potrzeb. Zmiany dotyczące na przykład większej personalizacji procesu składania zamówienia (np. dodanie dodatkowego kroku, w którym użytkownicy mogą wybrać gratis do swojego zamówienia), może wiązać się z dodatkową pracą programistów, a co za tym idzie, zwiększać budżet projektu.

Pojęcia z ecommerce, Magento 2 i AI