Historia makiet funkcjonalnych – jak często pomijalny element stał się królem w internecie

Jeszcze całkiem niedawno, a dokładnie ponad 10 lat temu, termin „makieta funkcjonalna” był zarezerwowany dla profesjonalistów pracujących nad wielkimi portalami, skomplikowanymi aplikacjami, których tworzenie zlecały zazwyczaj duże, rozwinięte już firmy z wielkimi budżetami.

W tamtych czasach większość amatorskich stron internetowych była projektowana przy użyciu kreatorów takich jak Front-page, Pajączek, czy Adobe Dreamwaver, a tylko nieliczni wchodzili na ścieżkę oddzielania kodu od grafiki (zapoczątkowanego po spopularyzowaniu języków xhtml oraz css).

Zamawiając wtedy stronę internetową od freelancera, prawdopodobnie można było się spodziewać otrzymania prawie ukończonej szaty graficznej strony internetowej, zrobionej w stu procentach według wyobrażenia wykonawcy.

Mało kto słyszał o briefie kreatywnym, bo wystarczyło kilka pytań wymienionych przez maila, żeby uznać etap przedstawienia wymagań jako ukończony.

Internet był dużo prostszy w tych czasach, w których większość zleceń tworzenia stron internetowych odbywało się bez jakiejkolwiek umowy, przelewy internetowe dopiero raczkowały i żeby zapłacić za jakąś usługę trzeba było wykonać normalny przelew.

Makiety funkcjonalne dotyczyły wtedy częściej budowy, niż stron internetowych, a ilość osób realnie znająca się na tym drugim była bardzo ograniczona.

Oddzielenie projektowania graficznego od projektowania interfejsów

Oczywiście możliwości projektowania makiet internetowych zaistniały wraz z projektowaniem szat graficznych (sięgającym pierwszych wersji Photoshopa, czy wspomnianego edytora wysiwyg Front-page 2000), jednak projektanci internetowi stali się bardziej świadomi w momencie, w którym warstwa graficzna została oddzielona od warstwy informacyjno-funkcjonalnej.

Jednym z pierwszych spopularyzowanych narzędzi do tworzenia makiet internetowych był program Balsamiq, stworzony przez projektanta internetowego włoskiego pochodzenia, który chciał uprościć sobie pracę nad projektami, tworząc tym samym narzędzie składające się z powtarzalnych elementów takich jak buttony, obrazki, linki, paragrafy treści – z których składa się większość stron internetowych.

Narzędzie to szybko zystało na popularności ze względu na jego prostotę oraz niską cenę. Pomimo użycia najbardziej komicznego fontu tj. Comic-sans, łatwość makietowania spowodowała, że narzędzie to zostało sprzedane w setkach tysięcy, jeżeli nie milionach egzemplarzy i do dzisiaj cieszy się popularnością.

Rozwój dziedziny projektowania makiet funkcjonalnych

W tamtych latach (tj. na przełomie 2009/2010 roku) po kryzysie ekonomicznym z którego większość świata wylizywała się, internet zmienił się nie do poznania. Każda z firm zaczęła mieć świadomość tego, że bez strony internetowej skazuje się na niepowodzenie.

Z tego powodu większość firm posiadających przestarzałe strony internetowe zdecydowało się na ich odświeżenie, co w znaczący sposób wpłynęło na rozwój branży stron internetowych.

Agencje interaktywne prześcigały się rozwiązaniami, ale także cenami. Technologia z roku na rok stawała się coraz bardziej zaawansowana, a jednocześnie coraz bardziej dostępna.

Dzięki potrzebie zwiększenia konkurencyjności firm (którym udało się przetrwać kryzys) branża rozkwitła na nowo, dając tym samym możliwość znalezienia zleceń lub pracy dla szeregu profesji.

Boom na aplikacje do makiet oraz wysyp specjalistów (wszyscy designerzy podpisujący się jako UX designerzy)

Przed spopularyzowaniem makiet funkcjonalnych dla grafika jednym z lepszych tytułów na stronie internetowej był „projektant graficzny”. W momencie w którym rynek zorientował się, że osiągnięcie wysokiej jakości produktów wymaga zatrudnienia przynajmniej kilku specjalistów z różnych płaszczyzn projektowania.

Na tamtym etapie dla przeciętnego grafika najszybszym sposobem na zwiększenie stawki godzinowej było dopisanie do swojego tytułu magicznych literek „UX” (User Experience), które jeszcze przez parę lat były nie do końca rozumiane i niepoprawnie używane przez większość osób z branży.

Po kilku latach od wysypu masy specjalistów skoncentrowanych na doświadczeniach (notabene nie mających zbyt wiele doświadczenia w tym temacie), rynek zaczął krystalizować się, a klienci zaczęli widzieć, że projektant interfejsów oraz doświadczeń użytkownika (czyli po angielsku ux/ui designer) jest na wagę złota.

Oszczędzający płacą dwa razy drożej (w postaci kiepsko działającego serwisu)

Edukacja klienta, jak i twórców stron internetowych (czym dla wielu było projektowanie makiet w uproszczeniu) odbiła się wysokim kosztem dla tego pierwszego, który często chcąc zapłacić możliwie najniższą cenę, za to, co jest niewidoczne, wybierał tańszego „projektanta UX”, dostając tym samym niskiej jakości efekt końcowy.

Z biegiem czasu rynek odpowiednio nasycił się, a duża część z branży wraz z kolejnymi projektami nauczyło się czego wymagać od projektantów interakcji i doświadczeń użytkownika.

Część specjalistów z branży zaczęło systematyzować wiedzę w postaci ebooków, książek i kursów, które przekazywały wiedzę na temat sposobów którymi można zaprojektować aplikację czy stronę internetową.

Jak wygląda proces przygotowania makiet funkcjonalnych w profesjonalnym studio

Zakres przygotowania makiet funkcjonalnych może się różnić, w zależności od wielkości projektu, a także od możliwości finansowych klienta. Jeżeli makiety są zamówione, to najczęstszym elementem umowy są właśnie one. W przypadku bardziej zaawansowanych projektów makiety mogą być wzbogacone o:

  • specyfikację funkcjonalną,
  • schemat architektury informacji,
  • diagram przedstawiający ścieżki poruszania sie po stronie,
  • rozpisanie poszczególnych person z grupy docelowej
  • raporty i wyniki badań przeprowadzonych na użytkownikach poprzednich stron internetowych,

i wiele innych elementów, zwiększających możliwość zrozumienia skomplikowanych projektów.

Wewnątrz zespołu odpowiadającego za projektowanie aplikacji lub serwisu cały proces najczęściej zaczyna się od burzy mózgów, pozwalających przewidzieć wszystkie możliwe elementy na stronie, informacje, które mogłyby się na niej znaleźć.

Takie podejście w systemie design thinking zakłada, że nie ma złych pomysłów i każdy w zespole może podzielić się tym, co siedzi mu w głowie, będąc pewnym, że jego idea nie zostanie skrytykowana.

Tak zgromadzone idee poddane ocenie stawały się małymi elementami, z których później projektowane były makiety niskiej jakości (low fidelity), najczęściej na papierze za pomocą flamastrów.

Takie proste makiety pozwalały skupić się na najważniejszych elementach niskiego poziomu, nie poświęcając uwagi na estetykę tych elementów, a jedynie na funkcję i aspekt informacyjny.

Z zaakceptowanych makiet niskiej jakości tworzone są później makiety wysokiej jakości (high fidelity), które po podlinkowaniu między poszczególnymi elementami jako prototypy przedstawiają wstępne doświadczenia i interakcje, z jakimi spotka się późniejszy użytkownik.

W jaki sposób zapoznawać się z makietami i jak najlepiej wykorzystać etap ich projektowania

Bez względu na to, czy zamawiamy identyfikacje wizualną, materiały promocyjne, czy serwis internetowy – każdy z odbieranych etapów powinien mieć przynajmniej kilka dni na zapoznanie się całego zespołu decyzyjnego, dzięki czemu możliwe będzie „przetrawienie projektu”.

Dla większości klientów nowy etap w życiu produktu czy narzędzia, jest etapem mocno emocjonalnym, z narzuconymi często nierealnymi terminami, które nie wpływają dobrze na finalny efekt. O ile wszyscy wiemy, że czas to pieniądz – niestety w przypadku makiet pośpiech jest złym doradcą. Koszta zmian strony internetowej, aplikacji webowej czy mobilnej aplikacji, są kilkukrotnie większe na etapie projektowania graficznego i nawet kilkudziesięciokrotnie większe na etapie programowania.

Właśnie dlatego warto dać sobie czas, by pochylić się nad makietą, nie akceptując w ciemno to, co otrzymaliśmy. Większość specjalistów daje przynajmniej kilka dni czasu na decyzję i przesłanie feedbacku. Dobrze jest ten czas wykorzystać na ponowne przeczytanie założeń, by później zapoznać się z argumentacją zespołu projektantów na temat poszczególnych rozwiązań. Te kilka dni czasu na decyzję pozwoli ochłonąć, dająć poczucie spokoju i koncentracji na tym co ważne.

Jak dobrać zespół dopasowany do naszych potrzeb i jak porównać portfolio stworzonych serwisów i aplikacji

Wybór odpowiedniego zespołu jest jednym z ważniejszych elementów, które wpłyną na końcowy efekt, jaki otrzymamy. W przypadku bardzo technicznego projektu (takiego jak aplikacja do obsługi w konkretnej branży np. restauracyjnej) warto zdecydować się na wyspecjalizowany zespół, który miał już wiele kilkuset godzinnych projektów na koncie. Takie projekty do najtańszych nie należą, ponieważ nierzadko jedna robocza godzina projektanta moze kosztować nawet paręset złotych.

Jeżeli jednak nasze potrzeby są znacznie mniejsze i potrzebujemy projektu dobrej strony internetowej, na której wzrośnie zaangażowanie prowadzące do zakupu lub kontaktu na stronie, być może warto znaleźć zespół specjalistów dostarczających kompleksowe rozwiazania (tj. branding studio – które dostarczy także identyfikacje wizualną, copywriting, a ostatecznie połączy to z makietami w wysokiej jakości web design).

Czasami wyspecjalizowany zespół może spowodować przerost formy nad treścią i przepalenie zbyt dużej ilości budżetu jeden z kilku elementów wpływających na ostateczny sukces. Rzadko kto ma nielimitowany budżet na zrealizowanie projektu, a o ile sam szkielet informacji – do którego można sprowadzić makiety funkcjonalne – jest bardzo istotny, większość internautów ma dzisiaj wysokie wymagania na wielu płaszczyznach (nie tylko w kontekście jakości dostarczanych treści, estetyki graficznej, ale także szybkości ładowania strony uzależnionej od jakości wdrożenia).

Dlatego warto, aby do nowego projektu odpowiednio się przygotować, badając realizacje marek, które dobrze przedstawiają możliwości przygotowania realizacji, różnymi stylami graficznymi dopasowanymi do odpowiedniej branży i danej marki. To właśnie takie zespoły specjalistów potrafią spojrzeć na projekt wielowarstwowow, przygotowując realizacje, które nie będą przemijały wraz z zakończeniem danego trendu, a zamiast tego będą świeże i interesujące przez lata.