Koncepty i prototypy

Nie można sobie zapewnić reputacji tym, co ma się zamiar zrobić. Sprawa jest prosta – fantazjuj, próbuj, a potem ruszaj w świat i zrób to!

Henry Ford

Koncepty i założenia ogólne

Koncepty i założenia ogólne

Koncepcje wynikają z wartości zaproponowanych podczas budowania strategii. Ich celem jest tworzenie ogólnych korzyści i łagodzenie złych doświadczeń użytkownika (user’s pain). Są to ogólne założenia dotyczące tego, jak te potrzeby mają spełniać funkcje produktu objęte zakresem projektu.

Sieci połączeń

Siatki połączeń (Wireflows) to diagramy przedstawiające strukturę produktu, mające zalety schematu blokowego, ale oferujące więcej informacji. Przy tworzeniu tego typu diagramu wykorzystuje się makiety wysokopoziomowe, pomiędzy którymi umieszczane są odpowiednie połączenia i wizualizowane są bramki logiczne. W związku z tym ten diagram wizualizuje procesy i projekty interakcji, a nie interfejs użytkownika projektu.

Zastosowanie Wireflows pozwala na wizualizację zakresu działania całego projektu i relacji między jego procesami a sekcjami. Pozwoli ocenić liczbę i organizację ekranów. Jest to również, obok interaktywnego prototypu, zdecydowanie najłatwiejsza forma wizualizacji ścieżki, którą będzie przechodził użytkownik wykonując poszczególne zadania w ramach tworzonego systemu.

Wireflows są również przydatne do oceny potencjalnie wrażliwych punktów przed utworzeniem makiet niskiego poziomu lub projektów graficznego interfejsu użytkownika. Ten typ diagramu przydaje się również później, na etapie produkcji, ponieważ ułatwia programistom zrozumienie procesu i powiązań między jego poszczególnymi ekranami.

Sieci połączeń

Wireframing

Wireframing

Wireframing to etap, na którym w oparciu o koncepcje tworzone są wysokopoziomowe makiety (lo-fi). Nie mają na celu przedstawiania graficznego interfejsu użytkownika, a jedynie architekturę informacji i projekt funkcjonalny, czyli to, w jaki sposób produkt będzie spełniał cele użytkowników.

Podczas wireframingu opracowujemy rozwiązania dotyczące tego, jak powinny zachowywać się elementy globalne, takie jak nagłówek, nawigacja, stopka, okna modalne itp. Dobrze wykonany wireframing powinien obejmować wszystkie założenia funkcjonalne produktu opracowanego w fazie strategii, tak aby można było bezproblemowo zaprojektować UI.

Tworzenie makiet wysokiego poziomu oszczędza również czas podczas wizualizacji różnych sugestii dotyczących rozwiązywania problemów. W krótkim czasie możliwe jest przygotowanie różnych wersji makiet tych samych elementów strony czy aplikacji.

Konceptualny Interfejs użytkownika

Kolejnym etapem po przygotowaniu makiet jest Concept UI Design, czyli wstępne opracowanie wyglądu interfejsu użytkownika serwisu, aplikacji czy oprogramowania. W trakcie projektowania konceptualnego wybierany jest styl ogólny wizualny. Obejmuje takie aspekty, jak typografia, ikony i kolory, ale także wykorzystanie przestrzeni między poszczególnymi elementami.

Projekt makiet charakteryzuje się również tym, że przygotowane ekrany wyglądają „prawie tak samo”, jak będzie wyglądał finalny produkt. Jednym z celów Concept UI Design, oprócz wizualizacji interfejsu, jest przygotowanie plików do dalszego procesu projektowego UI.

Konceptualny Interfejs użytkownika

Prototypowanie produktów

Prototypowanie produktów

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.

Walidacja

Po przygotowaniu prototypu produktu przeprowadzana jest walidacja z wykorzystaniem testów z użytkownikami. Proces rozpoczyna się od znalezienia odpowiednich respondentów, a następnie rekrutacji do badań.

Testy przeprowadzane są na podstawie specjalistycznego scenariusza testów użyteczności, obejmującego przepływ (user’s flows) dla poszczególnych person. Kolejnym etapem walidacji jest przeprowadzenie testów użyteczności.

Aby wyniki były miarodajne, należy przeprowadzić co najmniej pięć takich testów. Co ciekawe, statystyki pokazują, że taka liczba wystarczy do wskazania kluczowych błędów i niedociągnięć projektowych.

Walidacja kończy się przygotowaniem raportu z testów użyteczności opisującego wyniki, wraz z cytatami użytkowników i nagraniami z samego procesu.

Walidacja

Design Sprints

Design Sprints

Skutecznym narzędziem w projektowaniu jest tzw. Google design sprint, czyli framework służący do szybkiej i taniej walidacji hipotez. Autorzy tego rozwiązania wykorzystali Google Ventures do pomocy młodym firmom technologicznym w tworzeniu lepszych produktów.

Korzystanie z Google Design Sprint składa się z następujących kroków: Zrozum – znalezienie i zrozumienie problemu; Zdefiniuj – określenie potencjalnych rozwiązań problemu; Szkic – wizualizacja rozwiązań problemu; Zdecyduj – wybierz jedno rozwiązanie problemu, nad którym warto popracować; Prototyp – przygotowanie realistycznego prototypu, który będzie można przetestować z użytkownikami; Validate – walidacja hipotezy wybranej na początku Google Design Sprint na podstawie wyników testów z użytkownikami.

...przejdź do tyłu
Budujemy strategię
przejdź dalej...
Projektujemy

Porozmawiaj z nami!
Najwyższy czas poznać sekrety naszej wysublimowanej pracy.

Zadzwoń lub napisz do nas! Z przyjemnością zaprosimy Cię na spotkanie, na którym wszystko Ci opowiemy i pomożemy rozwiązać nurtujące Cie problemy.