Raport: EdTech i nowe technologie w branży edukacji (2021) - Krajobraz branży, trendy, historie sukcesu

Pobierz raport (za darmo!)

Wireframe – co to i dlaczego Twój produkt powinien go mieć?

 

Proces tworzenia produktu zawsze jest niesamowity. Niezależnie, co chcesz stworzyć, powinien dostarczyć maksymalnie wysoką użyteczność Twojego produktu dla danej grupy odbiorczej. Startując jednak od przysłowiowego “zera”, często wiele elementów nie jest jasna. Czasem dostajemy zapytania, czy możemy od razu projektować UI. Poniżej jednak prezentuję kilka argumentów, dlaczego warto zatrzymać się na fazie wireframe. 


Wireframe – co to?

Zacznijmy jednak od określenia sobie czym jest Wireframe. 

Wireframe najogólniej służy do zaprezentowania struktury strony, układu, pokazania architektury informacji czy zobrazowania przepływu użytkowników. Bardzo często prezentują koncept. Ograniczone są w stylistyce i kompozycji do najbardziej podstawowych kolorów (biel i czerń). Mogą one być tworzone zarówno w formie rysunku na kartce papieru, jak i przy użyciu bardziej zaawansowanych programów jak Moqups, Invision czy Figma.

Należy jednak zaznaczyć, że w trakcie naszej pracy spotykamy się z wieloma określeniami wireframe. Bardzo często klienci czy partnerzy wymiennie używają pojęć: makiet, mockups, prototypes czy interaktywny design. Na potrzeby artykułu ograniczmy się jednak do samych wireframe.

 

W naszej pracy, wireframe najczęściej przedstawiamy w dwóch prostych kategoriach:

Low fidelity Wireframe made in balsamiq

Źródło: https://blog.balsamiq.com/3-1/
  • Low fidelity. Często tworzymy je na warsztacie z klientem w procesie tzw. sketch prototyping. Główną zasadą nie jest stworzenie idealnych, dokładnych Wireframe, a naszkicowanie ekranów, które pokazują ideę biznesu, produktu czy usługi… Przygotowane w ten sposób materiały służą głównie do prowadzenia dyskusji. Dzięki schematycznemu zobrazowaniu widoków nawiązujemy rozmowę z naszym klientem i poznajemy jego punkt widzenia.

Źródło: własne
  • High fidelity. To Wireframe bardzo zbliżone do designu. Określiłbym je „szarymi blokami”. Powinny być w one najlepiej w czarno-białej kolorystyce. Dobrą praktyką jest zaznaczenie elementów klikalnych odrębnym kolorem, np. intensywnym niebieskim, aby było wiadomo, że ten element będzie łączem – zobrazowaniu user flow i ścieżek użytkowników. 

 

Potrzebujesz narzędzi, które pozwolą Ci określić user flow? Skorzystaj z naszej Biblioteczki Narzędzi Lean!

Dostęp po zapisie do naszego newslettera : >



    Zgadzam się na przetwarzanie moich danych osobowych przez Project: People Sp. z o.o. w celu komunikacji marketingowej, a tym samym wysyłania mi newslettera, informacji o usługach, promocjach lub nowościach zgodnie z Polityką prywatności

    Dlaczego warto tworzyć wireframe?

     

    1. Moment na zastanowienie, jak chcemy zorganizować treść

    Częsty błąd, który obserwuję to jednoczesne tworzenie wireframe i układanie treści oraz tworzenie ładnego UI. Bardzo mało specjalistów potrafi organizować treść i jednocześnie nadawać im odpowiedni wygląd. Podzielenie etapu na moment, w którym układamy sobie treści oraz na moment, w którym robimy wszystko “ładne” jest niezwykle owocne. 

    Wireframe pozwala zobrazować treść. Kiedy mamy poukładane sekcje możemy wysłać widoki do przedyskutowania w każdym dziale. Bardzo często dzięki takim konsultacjom dowiadujemy się, że w poszczególnych działach są tematy do wewnętrznej dyskusji. Dla zespołu jest to moment, kiedy może wspólnie zastanowić się nad merytoryczną treścią np. oferty.

     

    1. Weryfikacja User Flow 

    Sporo członków zespołu nie ma wyobraźni przestrzennej, aby zobrazować sobie dokąd prowadzą poszczególne ekrany. Kiedy opowiadamy o User Flow czy architekturze to ciężko im sobie wyobrazić, jak to będzie wyglądało w praktyce. Makiety to moment, kiedy pierwszy raz widzą rezultat naszej pracy. Na klikanych makietach jesteśmy w stanie odwzorować kompletne User Flow, czyli faktyczne przejścia z jednego ekranu na drugi.  Posiadając wireframe możemy dosłownie przeklinać się przez niezaprogramowany serwis . To właśnie wtedy wyjdą też braki stanów błędów, ekranów i połączeń między stworzonymi elementami. Co więcej, zdarzyło nam się na podstawie makiet przetestować cały koncept biznesowy i kompletnie go zmienić. Z perspektywy klienta – pomimo że prace badawcze znacznie się wydłużyły, to zaoszczędził on setki tysięcy złotych na development aplikacji, której nikt by nie używał. 

     

    1. Łatwiejsza estymacja prac programistycznych

    Zamknięta aplikacja, a dokładnie jej szkic, dużo bardziej ułatwia estymacje prac przez zespoły programistyczne. Co więcej, pozwalamy im już teraz zaplanować sobie prace i rozpocząć cześć np. backendową. W momencie kiedy będziemy mieli przygotowany Style Guide oni natychmiast rozpoczną pracę.  Z perspektywy klienta, jest to ogromna oszczędność czasu i pieniędzy na potencjalne przyszłe zmiany. 

     

    1. Lepszy moodboard i style dla użytkownika

    Kiedy mamy makiety i zazwyczaj czekamy na weryfikację treści merytorycznych to spokojnie możemy zacząć już pracować nad moodboardem czy stylem. Jest to nic innego jak styl w jakim stworzymy nowy produkt czy serwis.  To moment, w którym możemy się poświęcić wyłącznie szukaniu inspiracji, aby stworzyć niezwykły design. Co więcej po dyskusji nad wireframe dużo  łatwiej jest dobrać styl graficzny, bo wiemy jak będzie wyglądała mniej więcej strona internetowa. Nie musimy się już też zastanawiać, jak zorganizować treść.

     

    1. Moment na stworzenie copywritingu

    Treści na stronie wpływają na design. W momencie, kiedy wiemy, że w ofercie znajdą się nie 3-4 usługi, a będzie ich więcej, układ na designie przybierze kompletnie inna formę. Dobrze dopasowany tekst, który może powstać na podstawie naszych makiet, również wpłynie na design. Przykładowo zawsze lepiej dobrać ikonkę, która jest spójna z treścią niż ogólną, kompletnie niezwiązaną z tekstem.

     

    1. Przyjemniejsze projektowanie 

    Kiedy ustalimy wszystkie szczegóły dotyczące contentu. Projektowanie jest naprawdę bardziej przyjemnym doświadczeniem. Dzięki pełnemu zrozumieniu potrzeb, ograniczamy liczbę poprawek. Zazwyczaj praca idzie tutaj błyskawicznie. Przy skomplikowanych systemach czasem wystarczy opracowanie Style Guide, aby programiści poradzili sobie z wdrożeniem.

     

    Pozornie wydawać by się mogło, że dodatkowy etap, w którym układamy “szare klocki”, jest zbędny. W praktyce widzimy jednak, że dla osoby tworzący produkt może on być przełomowy. To właśnie tutaj dowiemy się czego brakuje w naszym procesie. Jesteśmy w stanie również zwalidować koncept naszej aplikacji, a przez to zaoszczędzić sporo pieniędzy. 

    Jeśli potrzebujesz stworzyć makiety dla Twojego produktu, napisz do nas wiadomość 😉 

     

    Artykuły to za mało?

    Chcesz poznać cały proces i dowiedzieć się, jak mógłby wyglądać w Twojej organizacji?

    Umów się na bezpłatną konsultację
    Tomasz Osowski
    Pomaga firmom stworzyć doskonałe doświadczenie użytkownika zapewniając jednocześnie odpowiednią rentowność biznesu. Jego zadanie to stworzyć produkty i usługi, które są potrzebne i przynoszą satysfakcję zarówno odbiorcom jak i właścicielom biznesu.

    Certyfikowany Trener Biznesu i rozwoju osobistego, Certyfikowany moderator Design Thinking. Przedsiębiorca od kilku lat. Szczerze zakochany w metodologii Lean. Zawsze stara się dostarczyć produkt na rynek jak najszybciej przy najmniejszym nakładzie kapitałowym.

    Współpracował z firmami: T-mobile, Ecard, inPost, ING, Nationale Nederlanden, Brainly, Publicis, Netguru. Organizator konferencji DesignWays Conf.

    Uwielbiamy ciasteczka!

    Nie wierzysz? Odwiedź nas w naszym biurze i sprawdź! Ciasteczka serwujemy z pyszną kawą. Dowiedz się więcej

    Zgoda