Przygotowanie profesjonalnej strony WWW lub aplikacji nie może obyć się bez etapu przygotowania szkiców lub makiet funkcjonalnych. Czym jest użyteczność i jaka jest różnica między makietą a prototypem dowiecie się z artykułu.
Czym jest użyteczność?
Użyteczność (z ang. usability), to łatwość obsługi serwisu WWW, aplikacji lub jakiegokolwiek produktu, również cyfrowego. Projektowanie użyteczności ma na celu uzyskanie wysokiej satysfakcji klienta i wywołanie pozytywnych doświadczeń. Badania pokazują, że doświadczenie użytkownika, czyli User Experience, stanowi bardzo ważny element w procesie podejmowania decyzji o zakupie, ponownym zakupie lub poleceniu produktu. To w ostatnim czasie razem z Customer Expierence (CX), Digital Experience (DX) i User Experience (UX) gorące tematy dotyczące digital marketingu.
Przygotowanie makiet funkcjonalnych
Podczas projektowania serwisów WWW i aplikacji, makietowanie lub prototypowanie ma na celu zniwelowanie kosztów wynikających z wdrożenia rozwiązania, które nie spełnia celu biznesowego i zarazem nie jest przyjazne dla użytkownika. Pamiętaj, że im precyzyjniej zaprojektujesz ścieżkę użytkownika do wyznaczonego celu, tym szybciej zobaczysz zwrot z inwestycji. Projektować makietę strony lub aplikacji może dosłownie każdy. Umiejętność tworzenie makiet nie wymaga talentów plastycznych, a jedynie logicznego myślenia. Warto poznać kilka podstawowych zasad UX, zanim przejdziesz do pracy nad makietami.
Makiety funkcjonalne low-fi i high-fi, przykłady
Makiety funkcjonalne strony WWW lub aplikacji możesz przygotować w sposób maksymalnie uproszczony tj. lo-fi (z ang. low fidelity mockups) jak też maksymalnie szczegółowy hi-fi (z ang. high fidelity mockups). Decyzja, którą wersję rozwiązania zastosować, należy do Ciebie, ponieważ Ty wiesz najlepiej, co jest najlepsze dla Twojego projektu. Jeśli nie wiesz, możesz się zdać na agencję interaktywną, która będzie wdrażała Twój projekt. Makiety różnią się poziomem szczegółowości w 3 aspektach:
- projektu wizualnego,
- treści,
- interakcji.
Projekt graficzny makiet stron WWW i aplikacji
W wersji uproszczonej makiety lo-fi projekt graficzny może być wykonany odręcznie na serwetce, kartce, tablicy suchościeralnej (whiteboard) lub w jakimkolwiek programie komputerowym umożliwiającym narysowanie kilku prostokątów. To najczęściej widok kilku najważniejszych elementów, bez szczegółowego opisu. Projekt graficzny makiety w wersji hi-fi zawiera logo projektu, kolorystykę, wstępną koncepcję gridów (siatek), adekwatne do tematyki projektu grafiki oraz nagłówki, oraz przyciski z dbałością o ich proporcje i treść. Projekt makiety hi-fi nadaje się do testowania na użytkownikach, ponieważ jest zbliżony do wersji ostatecznej, jaka zostanie na kolejnych etapach prac dopracowana graficznie i oprogramowana.
Projekt treści makiet strony internetowej lub aplikacji
Treści w makiecie lo-fi to najczęściej kilka ogólnych nagłówków symulujących miejsca, w których prezentowane będą różne tematy i główne call to action. Wypełniaczem najczęściej stosowanym w tym przypadku jest „lorem ipsum”, który nic nie oznacza. W wersji makiety hi-fi nie ma miejsca na nic nieznaczące wyrazy. Makieta powinna zawierać dokładnie takie teksty, jakie planujesz opublikować i nawigację zgodną z architekturą informacji (strukturą). Jeśli zastanawiasz się skąd je wziąć, spojrzyj na swoją stronę WWW i kopiuj konkretne treści z aktualnej WWW.
Interakcje w makiecie strony internetowej lub aplikacji
W przypadku makiet rzadko spotykamy się z interakcjami, ponieważ te typowe są dla prototypów. Jeśli występują, są najczęściej proste, stawiające na umowność i duże uproszczenie.
Oprogramowanie do przygotowania makiet stron internetowych i aplikacji
W zależności od tego, jak złożony jest projekt, takie powinieneś zastosować rozwiązanie. Jeśli projekt jest prosty i decydujesz się na niską jakość, wystarczy jakikolwiek Notatnik z możliwością rysowania – nawet ten dostępny na smartfonie – lub jeden z programów pakietu Office, czyli Power Point lub Word. W przypadku projektu bardziej złożonego powinieneś zapoznać się z oprogramowaniem profesjonalnym, które jeśli masz smykałkę do grafiki, okaże się całkiem proste do opanowania.
Oprogramowanie do przygotowania makiet i prototypów
Spośród tych najpopularniejszych programów do przygotowanie makiet lub prototypów serwisów WWW lub aplikacji polecamy:
AXURE – prosty na pierwszy rzut oka program do makietowania na systemy Windows i macOS, będący niejako ojcem założycielem oprogramowania do makietowania. Łatwy w użyciu ze względu na dużą ilość komponentów i bibliotek gotowych elementów. Jeśli potrzebujesz interakcji, wydaje się bardziej skomplikowany niż konkurencja, ale jak już się nauczysz jego obsługi, pozwala na naprawdę dużo. Minusem i plusem zarazem jest siermiężność wyglądu gotowych elementów. Umożliwia pracę grupową i prezentację projektu online.
XD – prosty program do przygotowania makiet pochodzący ze stajni ADOBE, którego nikomu nie trzeba przedstawiać. Dostępny na Windows i macOS. Pozwala na przygotowanie makiety, prototypu, a potem płynne przejście do projektowania graficznego, dzięki funkcjonalnościom rodem z Adobe Photoshop i Illustrator. Znakomicie zintegrowany z Photoshopem pozwala na edycję grafik w sposób bardziej zaawansowany niż u konkurencji. Korzystamy z niego w pracy codziennej. Umożliwia pracę zespołową, łatwy podręczny podgląd projektu i prezentację online.
Sketch – program stworzony do projektowania interfejsów aplikacji mobilnych, webowych i stron internetowych. Dostępny wyłącznie na komputery z system macOS. Interfejs programu daje się lubić, a makiety przygotowywane w Sketch są za każdym razem „ładne”. Dodawanie interakcji jest tak łatwe, jak projektowanie, nie trzeba być programistą, aby je umieścić w projekcie. Korzystamy z niego w pracy codziennej. Jak większość produktów zaadoptowanych przez Apple, działa i się nie zwiesza. Popracujesz na nim samodzielnie i bez problemów w zespole projektowym.
MIRO – program stworzony do zapisywania pomysłów, myśli, schematów, projektów i makiet interfejsów na tablicy online (z ang. whiteboard). Zmienione w ostatnich latach miro stawia na styl i wielofunkcyjność. Dostępny online daje swobodę zalogowania się i pracy z każdego miejsca na świecie na dowolnym komputerze. Niestety dostępność wyłącznie online powoduje, że złożone projekty mogą się, albo wolno wczytywać albo nie działać płynnie. Biblioteka komponentów i gotowych elementów dla makiet funkcjonalnych jest dość skromna i raczej stworzona jest pod prosty projekt serwisu WWW lub aplikacji. Tak jak wiele narzędzi ma „swój styl”, który nie zawsze pasuje do projektu. Idealny do pracy zespołowej. Konto bezpłatne pozwala na realizację projektu bez większych niedogodności, tak więc testuj go do woli. My wykorzystujemy do opisywania procesów, schematów, mapy myśli i pracy nad architekturą informacji.
Makieta funkcjonalna to nie jest prototyp
Wiele osób myli szkice i makiety (z ang. mockups) z prototypami. Makiety i szkice są statyczne i z tego powodu nie są prototypami. Idea symulacji działania interfejsów jest cechą prototypów. Dlatego materiałów statycznych — takich jak szkice, siatki i makiety — nie uznajemy za prototypy. Prototyp WWW służy symulacji działania gotowego produktu. Umożliwia zespołom produktowym testowanie użyteczności i wykonalności ich projektów.
Podsumowanie
Szkicowanie i makietowanie to nieodłączny element procesu projektowego. Jeśli jesteś właścicielem projektu i zamierzasz go samodzielnie zrealizować, możesz bez problemu naszkicować to, co chcesz w projekcie umieścić. Taki materiał na 100% przyda się każdemu projektantowi lub agencji, aby zrozumieć potrzeby projektowe i poznać Twoje oczekiwania. Jeśli nie masz w planach makietowania, taką pracę powinna wykonać za Ciebie agencja. Jeśli ta wmawia Ci, że ten etap nie jest istotny i podsuwają Ci projekt graficzny pod nos, lepiej zastanów się, czy warto ryzykować pracę z kimś, kto przedkłada formę nad treść. Dobre praktyki i procesy służą uporządkowaniu prac i utrzymywaniu jednego standardu jakości. Odbiór i ocenę makiet najlepiej dokonać odpowiadając sobie na pytania zawarte w Ocena makiet funkcjonalnych serwisu WWW lub aplikacji.
Linki do programów:
https://www.axure.com
https://www.adobe.com/pl/products/xd.html
https://www.sketch.com
https://miro.com/online-whiteboard/
https://www.figma.com/prototyping/
https://www.invisionapp.com/cloud/prototype
https://www.mockflow.com
https://www.figma.com/prototyping/
https://www.uxpin.com/
