Projektujemy
Lepiej użyć gumki na papierze niż młota na placu budowy.
Frank lloyd Wright
Architektura informacji
Architektura informacji
Jednym z najbardziej istotnych, a jedocześnie bardzo niedocenionych elementów projektowania, jest architektura informacji (IA – Information Architecture), czyli sposób organizacji i oznaczania informacji na stronie internetowej lub w oprogramowaniu. Składa się z czterech komponentów: (1) uporządkowania treści w struktury, (2) odpowiedniego nazewnictwa, (3) nawigacji będącej systemem ułatwiającym poruszanie się po serwisie oraz (4) mechaniki wyszukiwania, pozwalającej użytkownikowi na intuicyjne formułowanie zapytań.
W architekturze informacji treści są zwykle grupowane według jednego z kilku przyjętych schematów. Schemat tematyczny dotyczy zestawiania podobnych rzeczy. Diagram zadań zawiera elementy o tej samej funkcjonalności (np. Formularze kontaktowe). Diagramy oparte na metaforach odnoszą się do świata rzeczywistego – możemy je znaleźć np. w sklepach internetowych, gdzie produkty są pogrupowane podobnie jak półki sklepowe.
Dobrze zaprojektowana architektura informacji zapewnia wygodne i intuicyjne użytkowanie, umożliwiając użytkownikowi szybkie dotarcie do poszukiwanych treści. Architektura informacji jest niejako szkieletem każdego bardziej rozbudowanego projektu, a przy jego budowaniu wykorzystujemy różne, wcześniej opisywane narzędzia jak cart sorting, proto-persony…
Mapa strony
Aby móc spojrzeć na projekt jako całość i zobaczyć, jak obszerny jest, warto na wstępie stworzyć mapę witryny. To znane i powszechnie używane od lat narzędzie w sposób hierarchiczny wizualizuje strukturę i poszczególne sekcje projektowanej strony internetowej, co jest solidnym punktem wyjścia do budowania architektury informacji.
Przygotowanie mapy serwisu przynosi ogrom korzyści. Tworzy ona podstawę organizacji projektu, dzięki której możemy wywnioskować, jak zorganizowana powinna być nawigacja. Pozwala nam również zdecydować, gdzie będą znajdować się określone treści. Pokazuje relacje między poszczególnymi podstronami, jest również przydatna podczas wstępnej oceny fazy rozwoju. Mapa strony pozwala też dobrze zaplanować późniejsze pozycjonowanie w wyszukiwarkach Goolge, Bing czy Yahoo!, dzięki temu, że mapa pokazuje, które obszary powstająca strona będzie pokrywać merytorycznie, a które funkcjonalnie. Ponieważ w przypadku SEO niezwykle istotne jest, aby nie powielać słów kluczowych, nie mówiąc już o duplikowaniu całych akapitów treści – wcześniejsze przygotowanie mapy strony pomaga zaplanować, gdzie je umieścić.
Mapa strony
Kontent
Kontent
User Experience Design to projektowanie interaktywnych produktów w taki sposób, aby interakcja z nimi zapewniała użytkownikom pozytywne doświadczenia. Dobrze zaprojektowany produkt cyfrowy powinien wyglądać atrakcyjnie dla użytkownika oraz być funkcjonalny i użyteczny. Stosowanie takiego produktu powinno dawać użytkownikom przyjemność i satysfakcję w osiąganiu zamierzonych celów. User Experience Design skupia się na określeniu, jak dany produkt ma się zachowywać w odpowiedzi na działania użytkownika oraz w jakim języku ma się z nim komunikować. Ponadto określa, gdzie użytkownik powinien szukać określonych informacji i jak będzie nawigował między tymi informacjami. Warto jednak zaznaczyć, że User Experience Design nie skupia się na projektowaniu warstwy graficznej produktów interaktywnych – tym właśnie zajmuje się projektowanie interfejsu użytkownika. Przyjazny interfejs użytkownika jest jednak jednym z elementów budujących pozytywne doświadczenia użytkowników.
UX Core i UI Core
Jak każda czynność, projektowanie można podzielić na etapy. Jednym z nich jest stworzenie tak zwanego „rdzenia projektu”. Szacuje się, że jest to 30-40% pracy związanej z każdym projektem, który pod względem dostępnej funkcjonalności oferuje główną ścieżkę użytkownika, czyli proces, przez który może przejść w celu zaspokojenia swoich potrzeb. „Rdzeń projektu” zwany czasem także „Duszą projektu” to nie tylko główne założenia użyteczności, ale także styl wizualny – na jego ekranach znajduje się również projekt graficzny interfejsu użytkownika.
To część projektu gotowa do testów użyteczności – stanowi punkt wyjścia do walidacji koncepcji, ponieważ na jej podstawie można już wystarczająco określić, jak produkt będzie wyglądał i czy będzie spełniał podstawowe potrzeby użytkownika. Na jej podstawie tworzony jest prototyp produktu.
Opracowanie rdzenia projektu zazwyczaj pozwala też przyspieszyć dalszą pracę nad projektem, ponieważ projekt pozostałej treści oparty jest na jego założeniach. Ponadto pozwoli Ci zaprezentować kontrahentom, jak będzie działać produkt i zobaczyć już na koniec całego projektu. Bardzo często obejmuje większość tego, co po zaprogramowaniu i wdrożeniu określa się jako minimalny opłacalny produkt.
UX Core i UI Core
Projektowanie UX
Projektowanie UX
User Experience Design to projektowanie interaktywnych produktów w taki sposób, aby interakcja z nimi zapewniała użytkownikom końcowym możliwie najbardziej pozytywne doświadczenia. Dobrze zaprojektowany produkt cyfrowy powinien: (a) wyglądać atrakcyjnie dla użytkownika oraz (b) być funkcjonalny i użyteczny.
Korzystanie z dobrze zaprojektowanego produktu (lub usługi) daje użytkownikom przyjemność i satysfakcję w osiąganiu zamierzonych celów. User Experience Design skupia się na określeniu, jak dany produkt ma się zachowywać w odpowiedzi na działania użytkownika oraz w jakim sposobem ma się z nim komunikować. Ponadto określa, gdzie użytkownik powinien szukać określonych informacji i jak będzie nawigował między tymi informacjami. Rzeczy źle zaprojektowane dają o sobie znać w najprostszy sposób: irytacja.
Warto jednak zaznaczyć, że User Experience Design nie skupia się na projektowaniu warstwy graficznej produktów interaktywnych – tym właśnie zajmuje się projektowanie interfejsu użytkownika. Przyjazny interfejs użytkownika jest jednak jednym z elementów budujących pozytywne doświadczenia użytkowników.
Projektowanie UI
User Interface Design to przede wszystkim warstwa wizualna produktów cyfrowych. Obejmuje odpowiedni dobór czcionek, ikon, kolorów i zdjęć, a także właściwe wykorzystanie przestrzeni między elementami. W interfejsie użytkownika stylizowane są wszystkie komponenty, takie jak przyciski, formularze, ramki i tabele.
W przypadku projektowania interfejsu użytkownika na platformy z systemem Android, Windows czy iOS często stosuje się poradniki i wytyczne opisane przez samych producentów systemów. Przykładem takiego ujednoliconego stylu jest Material Design stworzony przez Google lub Fluent Design System opracowany przez Microsoft.
Ponadto dobry projekt interfejsu użytkownika uwzględnia aktualne trendy. Niecałą dekadę temu dominował skeuomorfizm zorientowany na realizm, później mocno abstrakcyjny flat design, a dziś różnorodne rozwiązania łączące zalety obu podejść. Ostatecznie chodzi o to, aby produkt cyfrowy był częścią wizerunku marki, a także tworzył pozytywne wrażenia estetyczne dla użytkowników.
Projektowanie UI
Mikrointerakcje
Mikrointerakcje
Na doświadczenie użytkownika wpływają nie tylko procesy, informacje, czy graficzny interfejs użytkownika, ale także mikrointerakcje i ruch. Mikrointerakcje to krótsze i dłuższe animacje, które pojawiają się podczas korzystania z oprogramowania lub strony internetowej. Projektowanie mikrointerakcji i ruchu zajmuje się określaniem sposobu uruchamiania tych animacji i jest jednym z kluczowych elementów intuicyjnej nawigacji w produkcie cyfrowym.
Motion design
Na doświadczenie użytkownika wpływają nie tylko procesy, informacje, czy graficzny interfejs użytkownika, ale także mikrointerakcje i ruch. Mikrointerakcje to krótsze i dłuższe animacje, które pojawiają się podczas korzystania z oprogramowania lub strony internetowej. Projektowanie mikrointerakcji i ruchu zajmuje się określaniem sposobu uruchamiania tych animacji i jest jednym z kluczowych elementów intuicyjnej nawigacji w produkcie cyfrowym.
Motion design
Prototypowanie
Prototypowanie
W celu przeprowadzenia badań użyteczności i walidacji przygotowywany jest prototyp produktu, którego celem jest uzyskanie jak największego podobieństwa wizualnego oraz zbliżonej funkcjonalności do produktu końcowego.
Prace nad prototypem produktu rozpoczynają się od stworzenia całej struktury prototypu, a następnie szczegółowo prototypowane są poszczególne ekrany. Zwykle jednak prototyp nie obejmuje pełnej funkcjonalności produktu, a tylko działanie dla poszczególnych osób, które chcemy sprawdzić podczas testów.
Kiedy testy użyteczności są przeprowadzane w celu walidacji nowej koncepcji, prototyp produktu staje się użytecznym narzędziem. Charakteryzuje się zbliżoną interaktywnością i klikalnością i jak największym podobieństwem wizualnym do rzeczywistego produktu. Ma niejako „udawać prawdziwy produkt”, aby podczas testów badani mogli go swobodnie używać. Najczęściej jednak prototyp produktu nie obejmuje wszystkich funkcji projektowanego systemu, a jedynie oddaje ducha rozwiązania i główne ścieżki (user flows), po których będą się poruszać przyszli użytkownicy.
Choć wdrożenie interaktywnego prototypu produktu wymaga nieco więcej pracy niż statyczne ekrany, to ostatecznie jego zastosowanie pozwala zaoszczędzić na kosztach produkcji. Wymagane poprawki wskazane przez testy użyteczności są wprowadzane do projektu przed jego wdrożeniem.
Rola prototypu produktu nie musi ograniczać się tylko do testowania użyteczności. Może również pomóc zainteresowanym stronom zrozumieć projektowane rozwiązania lub być wykorzystywane podczas prezentacji mających na celu przyciągnięcie inwestorów. Prototypowanie towarzyszy wynalazkom od zarania dziejów i jest równie skuteczne w tworzeniu produktów cyfrowych.
Testy użyteczności
Testy użyteczności (Usability testing) to jedna z najskuteczniejszych metod weryfikacji, czy zastosowane rozwiązania są wygodne i zrozumiałe dla użytkowników oraz czy przekładają się na realizację założonych celów biznesowych. Testy pozwalają sprawdzić, jak prawdziwi użytkownicy poruszają się po oprogramowaniu lub witrynie i gdzie napotykają problemy ze zrozumieniem treści lub wykonaniem jakiejś czynności.
Specjalistyczne i odpowiednio dopasowane pytania wykwalifikowanego badacza pozwalają dowiedzieć się, jakich zmian oczekiwaliby użytkownicy, aby poprawić jakość ich doświadczeń.
Testowanie użyteczności jest zwykle stosowane w dwóch przypadkach: Pierwszym przypadkiem jest weryfikacja obecnego rozwiązania, pozwalająca określić jego mocne i słabe strony, a także zebrać informacje potrzebne do opracowania poprawek. Drugi przypadek to weryfikacja nowej koncepcji.
Przeprowadzenie takiego testu na wcześniej przygotowanym prototypie, przed przekazaniem projektu programistom do zakodowania, oszczędza czas i pieniądze. Łatwiej jest zmienić model niż gotowy produkt. Przed Testami użyteczności przeprowadzana jest rekrutacja do wybranych zadań. Przebieg testu jest rejestrowany, a uzyskane nagrania audio-wideo pozwalają na wyciągnięcie wniosków i przygotowanie raportu.
Testy użyteczności
Specyfikacja funkcjonalna
Specyfikacja funkcjonalna
Specyfikacja funkcjonalna do obszerny dokument opisujący projekt. Opisuje między innymi główne cele i założenia projektu (np. cel biznesowy projektu), różne funkcje systemu, interakcje pomiędzy systemem a użytkownik, wytyczne dla frameworków, badania czy też statystyki dla komputerów stacjonarnych (Desktops), tabletów, smartfonów.
Specyfikacja funkcjonalna jest tworzona w oparciu o możliwości stosowanego frameworku z uwzględnieniem ewentualnych rozszerzeń zewnętrznych – dlatego jest napisana jasnym, zrozumiałym dla każdego językiem. Dokument ten zawiera nie tylko opisy tego, jak powinien zachowywać się produkt, ale także załączniki w postaci wykazu ekranów, plików i przewodnika po stylach. Jest to zatem komplet informacji potrzebnych klientowi lub deweloperowi po projektowania.
Pliki produkcyjne i przewodnik po stylach
Stworzenie plików produkcyjnych oraz stylów „Production Files & Styleguide” zamyka etap projektowania interfejsu użytkownika i zawiera szereg elementów potrzebnych do produkcji. Znajdziemy tam: system projektowania (kolory, czcionki, siatka (grid), ikony, wygląd przycisków itp.), ekrany UI dostarczane przez wybrane narzędzie (Figma, Invision Inspect Mode, Zeplin itp.), animacje interakcji, mikrointerakcje, a także pliki źródłowe jako pakiet przygotowany do archiwum klienta.
Pliki produkcyjne i przewodnik po stylach
Warsztaty z zespołem deweloperskim
Warsztaty z zespołem deweloperskim
Warsztaty z deweloperami, realizowane pod koniec fazy projektowania, mają na celu rozwianie wątpliwości programistów i usprawnienie procesu produkcyjnego. Składają się z prezentacji projektu i jego funkcji oraz sesji pytań i odpowiedzi.
