Jak zaprojektować makietę strony internetowej zgodnie z zasadami UX?
Mówi się, że jeśli w dzisiejszych czasach kogoś nie ma w internecie, ten nie istnieje. Tym bardziej, jeśli mowa o firmie. Dlatego, jeśli chcesz zwiększyć swoje zyski i zdobyć wiernych klientów, musisz zainwestować w profesjonalną stronę internetową, przygotowaną zgodnie z zasadami UX. Aby tego dokonać, z pomocą przychodzi tzw. makieta strony internetowej. Czym ona jest i dlaczego warto ją zaprojektować, postaram się wyjaśnić w poniższym artykule.
Co to jest makieta strony www i dlaczego warto ją zrobić?
Makieta serwisu to prototyp, wstępny szkic strony, dzięki któremu możemy sprawdzić, jak będzie funkcjonowała jeszcze przed jej stworzeniem. Pozwala to zaoszczędzić sporo czasu oraz pieniędzy, ponieważ wprowadzanie zmian na istniejącej już stronie jest czasochłonne i w niektórych przypadkach, bardzo kosztowne. Tymczasem, makieta pozwala na zmiany bez ponoszenia jakichkolwiek kosztów. Ponadto, czasami może się też okazać, że naprawa znalezionych błędów po postawieniu serwisu jest niemożliwa. Wówczas nie pozostaje już nic innego, jak tylko mieć nadzieję, że nie wpłynie to negatywnie na odbiór serwisu przez użytkowników. Kolejną zaletą prototypowania jest również możliwość testowania na własnej skórze. Możesz wcielić się w rolę użytkownika, który odwiedza Twój serwis pierwszy raz i sprawdzić, czy strona jest intuicyjna, prosta oraz efektywna. Na tym etapie jeśli dostrzeżesz błąd, możesz go poprawić szybko i, co najważniejsze, za darmo!
Jeśli chcesz dowiedzieć się więcej o samym User Experience, zapraszamy do naszego wcześniejszego artykułu na ten temat! https://www.seogroup.pl/czym-jest-user-experience/
Podział makiet ze względu na poziom szczegółowości
Zanim przystąpisz do tworzenia makiety Twojego serwisu, warto, abyś poznał na jakie kategorie zostało podzielone prototypowanie.
I. Prototypowanie Lo-Fi (Low-fidelity) – prototypowanie w niskim odzwierciedleniu szczegółów. Do tworzenia tego typu makiet najczęściej wykorzystuje się tylko kartkę i długopis. Jest to najtańszy i najprostszy sposób tworzenia wstępnego projektu strony. W tym przypadku najważniejsze jest przetestowanie funkcjonalności serwisu, nie jego wyglądu.
Zalety makiet typu Lo-Fi:
- zaprezentowanie pozycji poszczególnych elementów strony,
- szybkość i łatwość w stworzeniu wstępnego projektu,
- skupianie się tylko i wyłącznie na technicznych aspektach projektu,
- oszczędność czasu,
- możliwość zaangażowania całego zespołu,
- możliwość testowania wyłącznie użyteczności,
- możliwość testowania już na początkowym etapie projektowania.
II. Prototypowanie aplikacji Hi-Fi (High-fidelity) – makiety z wysokim odzwierciedleniem szczegółów strony. Przy tego typu projektowaniu, makiety zawierają nie tylko funkcjonalne elementy strony, ale również kolorystyczne.
Zalety makiet typu Hi-Fi:
- tego typu prototypy są bardzo zbliżone do ostatecznego produktu i odzwierciedlają go praktycznie w stu procentach
- możliwość testowania elementów graficznych,
- zobrazowanie tego, jak finalnie będzie wyglądała aplikacja,
- korzystniejsza forma przedstawienia projektu w przypadku, gdy pokazujemy go np. zarządowi,
- ze względu na realistyczny wygląd, zachowania osób testujących są bardziej naturalne.
Programy do tworzenia makiet
Jak wspomniałam wyżej, makiety typu Lo-Fi można tworzyć przy użyciu najbardziej dostępnych narzędzi, jakimi są kartka i długopis. Istnieją natomiast programy, dzięki którym możemy tworzyć profesjonalne makiety. W większości są płatne, a jeśli istnieje opcja darmowa, jest ona ograniczona w ilości dostępnych opcji. Zdarza się oczywiście, że producenci niektórych oprogramowań oferują swoim użytkownikom okres próbny, który trwa najczęściej 7 dni. Z założenia jest to wystarczający czas na podjęcie decyzji, czy testowany program jest dla Ciebie. Poniżej przedstawiam zestawienie najbardziej popularnych programów do prototypowania.
Moqups.com – bez wątpliwości jego ogromną zaletą jest opcja korzystania z podstawowej wersji w pełni za darmo, wystarczy się zarejestrować. Jeśli zależy Wam jednak na zwiększeniu możliwości projektowych, istnieje możliwość wykupienia subskrypcji, która to umożliwia. Ponadto, moqups jest dość prostym oraz intuicyjnym programem, co z pewnością dla osób, które nie posiadają doświadczenia w projektowaniu, będzie dużym plusem.
UXPin – co prawda, jest to płatny program. Natomiast producent oferuje swoim użytkownikom darmowy okres próbny, który trwa 7 dni. Bez wątpienia, jest to wystarczający czas, żeby sprawdzić, czy ten program jest dla Ciebie. W przeciwieństwie do moqups.com, UXPin nie należy do najbardziej intuicyjnych programów, dlatego nauka operowania nim może zająć laikowi więcej czasu.
Axure – to jeden najpopularniejszych programów do projektowania makiet. Dzięki temu, w sieci możemy znaleźć wiele tutoriali oraz poradników, które pomogą w nauce jego obsługi. Jego zaletą jest również to, że jest bardzo rozbudowany, dzięki czemu oferuje swoim użytkownikom wiele opcji do wyboru. Podobnie jak w przypadku UXPin, jest płatnym programem, ale oczywiście istnieje możliwość jego przetestowania przez 7 dni darmowego okresu.
Adobe XD – należy na pewno do grona intuicyjnych i prostych w obsłudze programów. Jedną z jego zalet jest możliwość udostępniania projektów w zespole. Jego mobilność na pewno wpływa na jego atrakcyjność. Jak wszystkie aplikacje z rodziny Adobe, tak i XD jest płatny, z możliwością próbnego okresu, który trwa standardowo, 7 dni. Dzięki swojej popularności podobnie jak w przypadku Axure istnieje dużo darmowych tutoriali wyjaśniających jego obsługę. Jeśli korzystasz z innych aplikacji Adobe, to XD będzie dla Ciebie idealnym wyjściem, ponieważ producent zapewnia swoim użytkownikom kompatybilność z innymi aplikacjami Adobe.
Adobe Illustrator – co prawda, nie jest to program stworzony z myślą o projektowaniu makiet. Natomiast dzięki swojej prostocie i intuicyjności, może doskonale sprawdzić się do prototypowania. Program działa na podstawie wektorów, dzięki którym projekt będzie zawsze w świetnej jakości, niezależnie od wymiarów. Być może przy projektowaniu makiet nie jest to najważniejsza kwestia, ale z pewnością jest to duży plus. Ogromną zaletą wszystkich programów Adobe jest chmura, do której trafiają wszystkie wykonane projekty. Dzięki temu masz pewność, że żadna z Twoich prac nie zniknie nawet w przypadku awarii sprzętu.
Balsamiq – jest to dość proste i intuicyjne narzędzie do prototypowania. I to chyba właśnie w tej prostocie tkwi jego siła i potencjał. W przeciwieństwie do np. programów Adobe producent oferuje aż 30-dniowy okres próbny. Dużą jego zaletą jest również możliwość pracy nad jednym projektem przez cały zespół.
Sketch – podobnie jak Adobe Illustrator, Sketch został stworzony do projektowania grafiki wektorowej. Natomiast nic oczywiście nie stoi na przeszkodzie, aby był również świetnym narzędziem do prototypowania. Niestety, działa tylko w systemie macOS, dlatego nie jest tak ogólnodostępny jak pozostałe wymienione programy. Mimo to wciąż pozostaje jednym z popularniejszych narzędzi projektowych. Możemy z niego korzystać przy projektach zespołowych w postaci przekazywania widoku innym czy udostępniania plików w chmurze.
Każdy z tych programów ma do zaoferowaniu wiele. Bez wątpliwości przed zakupem któregoś z nich, warto przetestować kilka.
Projektowanie krok po kroku
Przed rozpoczęciem projektowania warto się przygotować. Poniżej lista najbardziej istotnych według mnie elementów:
- sprawdź serwisy swojej bezpośredniej konkurencji, która istnieje na rynku już dłuższy czas i osiąga sukcesy,
- określ grupę docelową, do której kierujesz swoje produkty. Poznaj użytkownika swojej strony – w tym przypadku warto przygotować personę (reprezentacja potencjalnego klienta, użytkownika),
- nie lekceważ kartki i długopisu – w początkowym etapie projektowania ta archaiczna metoda może się okazać bardzo pomocna i skuteczna. Jest to najprostszy i najtańszy sposób na szybkie przelanie swoich pomysłów,
- wybierz oprogramowanie, które sprosta Twoim oczekiwaniom. Obecnie na rynku istnieje wiele programów do prototypowania – jeśli zakładasz tworzenie wielu projektów, warto przetestować kilka najpopularniejszych i wybrać ten, na którym najlepiej Ci się pracuje. Nawet jeśli okaże się być najdroższą opcją, warto zainwestować,
- pamiętaj również o UI, czyli aspektach wizualnych swojej witryny. UX i kwestie użyteczności są oczywiście bardzo ważne. Natomiast nie zapomnij, że dla użytkownika odbiór estetyczny serwisu jest równie istotny,
- testuj, testuj i jeszcze raz testuj! Pamiętaj, że makieta jest tworzona po to, aby sprawdzić Twój serwis zanim jeszcze zostaną wydane pieniądze i poświęcony czas na stworzenie serwisu
Podsumowanie
Reasumując, warto poświęcić czas na zaprojektowanie makiety strony internetowej zgodnie z zasadami UX. Jak wspomniałam w artykule, pozwala to zaoszczędzić czas oraz pieniądze. Ponadto, wstępny szkic serwisu umożliwia uniknięcie problemów powstających po jego postawieniu. Jeśli chcesz osiągnąć sukces dzięki swojej witrynie, czytaj o UX i zacznij prototypowanie już dziś.
pytanie w jakich rozdzielczościach makietujesz ? i dlaczego nie ma Figmy ?? ;)