10 narzędzi do projektowania produktów cyfrowych, które ułatwiają tworzenie interfejsów
Projektanci aplikacji mają zwykle swoje ulubione narzędzia do tworzenia interfejsów użytkownika. Korzystają z nich z przyzwyczajenia, więc nawet jeśli nie zawsze są one idealne, wielu specjalistów niechętnie szuka nowych opcji. Nauka narzędzi zabiera czas i wymaga cierpliwości, więc rezultat powinien być wart wysiłku.
W tym artykule, chcemy pokazać wam pewne mniej oczywiste narzędzia i platformy, które są relatywnie łatwe w użyciu. Wszystkie są na swój sposób wyjątkowe.
Wierzymy, że mogą stanowić wsparcie w wielu Twoich projektach. Sprawdź nasze propozycje.
Projektowanie produktów cyfrowych, czyli digital product design
Projektowanie produktów cyfrowych (ang. digital product design) to proces, który ma na celu rozwiązanie konkretnego problemu poprzez opracowanie produktu mającego działać na platformach cyfrowych. Obejmuje to np. aplikacje mobilne, webowe, na tablety, smart TV itd.
Aby projekt odniósł sukces, projektanci muszą znać perspektywę docelowych użytkowników oraz cele biznesowe firmy i trendy panujące na rynku. Powinni też wziąć pod uwagę potencjalne możliwości i przeszkody technologiczne.
Proces projektowania cyfrowych produktów
- Proces ten często opiera się na wytycznych design thinking i rozpoczyna się od researchu. Projektanci muszą dobrze poznać grupę docelową, żeby stworzyć rozwiązanie dostosowane do jej potrzeb. Produkt powinien rozwiązywać jej problemy. Na tym wczesnym etapie projektanci UX/UI zbierają również informacje o biznesie, włączając w to jego cele i kluczowe wskaźniki sukcesu (KPI).
- Następnie zespół produktowy szuka inspiracji, lepiej poznaje konkurencję, opracowuje pomysły na funkcje i wybiera priorytetowe rozwiązania, które znajdą się w projekcie UX/UI. To etap, podczas którego przeprowadzamy sesje brainstormingowe, czyli burze mózgów. Mogą być organizowane w ramach warsztatów Product Discovery. Istnieje wiele metod, które ułatwiają ideację i wybieranie priorytetów i są wykorzystywane podczas sesji warsztatowych. Należy je dobierać indywidualnie do każdego projektu.
- Kolejnym krokiem jest modelowanie, czyli wireframing. Na tym etapie designer projektuje zarysy ekranów aplikacji. Są pozbawione szczegółów, ponieważ celem jest zaprezentowanie, jak będą wyświetlane najważniejsze elementy UI. Pozwala to sprawdzić, czy struktura aplikacji jest intuicyjna. Szczegóły, takie jak kolory czy różne fonty mogą odciągać naszą uwagę od kwestii związanych z użytecznością, które są na tym etapie najważniejsze.
- Kiedy klienci zaakceptują wireframe’y, projektant UX tworzy prototyp, dodając więcej detali i interakcje. Taki prototyp można wykorzystać do testowania użyteczności.
- Czemu przeprowadzamy testy użyteczności? Celem jest sprawdzenie, czy UI jest intuicyjny i czy użytkownicy szybko zrozumieją, jak aplikacja działa. Na podstawie analizy wyników testów designer wprowadza niezbędne zmiany w swoim projekcie. Programiści mogą się później na nim opierać przy pisaniu kodu.
Na każdym etapie procesu projektowania produktów cyfrowych designer sięga po różne rozwiązania, które optymalizują jego pracę. Wypróbuj nasze propozycje narzędzi i platform i zobacz, czy sprawdzą się w Twoim projekcie.
Etap 1. Szukanie inspiracji
Jeśli działasz w branży projektowania graficznego już od jakiegoś czasu, pewnie znasz platformy Dribble i Behance. Designerzy prezentują na nich swoje realizacje i dzielą się pomysłami na UI. Bazy tych platform są dość obszerne, ale czasem to nie wystarcza. Gdzie jeszcze można szukać inspiracji?
Mobbin
URL: https://mobbin.com/
To biblioteka prezentująca ekrany aplikacji mobilnych i webowych oraz ścieżki użytkownika (user flow). Możesz tworzyć kolekcje składające się z Twoich ulubionych elementów, a nawet kopiować je bezpośrednio do Figmy. Co tydzień pojawiają się nowe treści, dzięki czemu jesteś na bieżąco z trendami panującymi w projektowaniu UI. Narzędzie Mobbin jest dostępne za darmo i w planie płatnym.
Co nam się spodobało? Przeszukiwanie bazy ze zrzutami ekranów jest proste, a do tego jest ona w całości poświęcona produktom cyfrowym.
Funkcja, którą warto sprawdzić: Istnieje możliwość wejścia w tryb prototypowania, co pozwala sprawdzić, jak wyglądają ścieżki użytkownika w aplikacji.
Refero
Na tej platformie możesz wybrać, czy chcesz wyświetlać przykłady stron www, czy aplikacji na system iOS. Obowiązuje podział na rodzaje ekranów, szablony UX, elementy UI i aplikacje. Możesz przeszukiwać treści na wiele sposobów, np. używając tagów lub tekstu.
Co nam się spodobało? Możliwość przeglądania elementów UI z wielu kategorii i opcja łączenia tagów, która pozwala otrzymywać dokładniejsze wyniki wyszukiwania.
Etap 2. Burza mózgów, czyli brainstorming
Gdy planujesz organizację warsztatów online albo po prostu chcesz przeprowadzić sesję burzy mózgów w zespole pracującym zdalnie, potrzebujesz do tego odpowiednich narzędzi. Te, które proponujemy poniżej, mają funkcje, które ułatwiają uczestnikom dzielenie się swoimi przemyśleniami.
Conceptboard
URL: https://conceptboard.com/
Użytkownicy Conceptboard mogą objaśniać swoje pomysły na wiele sposobów, włączając w to dodawanie materiałów wideo i diagramów, a nawet rysowanie prostych szkiców. Standardowe funkcje, takie jak komentarze, karteczki samoprzylepne i dodawanie obrazów również są dostępne.
Co nam się spodobało? Możesz stworzyć kilka kart w ramach jednej tablicy. Np. pierwsza może zawierać mood board, z którego będziesz korzystać na pierwszym etapie sesji brainstormingowej, a druga będzie pokazywać diagram affinity map, który przyda się później.
Funkcja, którą warto sprawdzić: Jeśli korzystasz z Microsoft Teams, możesz zintegrować Conceptboard z tym komunikatorem i pracować na tablicach w ramach swoich kanałów.
Źródło: Zrzut ekranu z https://conceptboard.com/use-cases/brainstorming/
Mentimeter
URL: https://www.mentimeter.com/
To narzędzie proponuje inne podejście do brainstormingu. Możesz korzystać z szablonów prezentacji, które składają się ze slajdów kontekstowych (stworzonych po to, by przekazywać odbiorcom wybrane informacje) oraz interaktywnych, które pozwalają angażować uczestników w większym stopniu.
Funkcja, którą warto sprawdzić: Generator Word Cloud może Ci się przydać, jeśli chcesz zadawać uczestnikom pytania w sondażach i ankietach. Ich odpowiedzi stworzą chmurę słów – im są większe, tym częściej pojawiała się dana odpowiedź.
Etap 3. Wireframing, czyli modelowanie
Na tym etapie procesu projektowego nareszcie widzimy, jak aplikacja może wyglądać. Do tego służą wireframe’y – pokazują nam ścieżkę użytkownika i strukturę aplikacji. Bez względu na to, czy projektujesz modele o wysokim czy niskim stopniu szczegółowości, te narzędzia wykorzystujące AI mogą Ci pomóc.
MockFlow
Czasem niełatwo wymyślić projekt ekranów i to nawet po przeprowadzeniu researchu. Tymczasem zegar tyka. W takich momentach może się przydać AI. Musisz tylko wpisać w MockFlow, jak Twój design powinien wyglądać, a narzędzie przygotuje odpowiednie wireframe’y.
Co nam się spodobało? Dostępnych jest wiele rozszerzeń z dodatkowymi narzędziami, które można integrować z MockFlow. Przykładowo pozwalają one na dodawanie zastępczych tekstów albo umożliwiają tłumaczenie treści na różne języki.
Funkcja, którą warto sprawdzić: Dodaj zrzuty ekranu, które Ci się podobają albo zdjęcie szkiców swoich wireframe’ów i przekształć je z pomocą Mockflow na cyfrowy projekt, który można edytować.
Źródło: Zrzut ekranu z https://mockflow.com/
Whimsical
URL: https://whimsical.com/wireframes
W naszej opinii największą zaletą tego narzędzia jest to, że jest ono proste w obsłudze i pozwala z łatwością tworzyć wireframe’y dzięki mechanizmowi “przeciągnij i upuść”. Nawet jeśli nie jesteś profesjonalnym UX designerem, a chcesz się podzielić swoimi pomysłami, to narzędzie jest na tyle intuicyjne, że przygotowanie ekranu nie powinno zająć Ci wiele czasu.
Co nam się spodobało? Podobnie jak popularna Figma, Whimsical pozwala korzystać ze skrótów klawiszowych, które optymalizują pracę projektanta. Nie tylko umożliwiają dodawanie standardowych elementów, takich jak pola tekstowe czy figury geometryczne, ale również awatarów, obrazów i menu z ikonami i ramkami.
Etap 4. Prototypowanie
Przygotowanie prototypu to świetny pomysł, niezależnie od tego, czy chcesz sprawdzić, jak aplikacja działa, przeprowadzić testy użyteczności, czy pokazać go interesariuszom. Wiele popularnych narzędzi umożliwia prototypowanie np. Figma czy Adobe XD. Poznaj nasze propozycje alternatywnych rozwiązań.
Visily
To kolejne narzędzie wykorzystujące AI, które wspiera proces projektowania. Wystarczy, że wpiszesz prompt, a narzędzie stworzy diagramy user flow, a nawet prototypy o wysokim poziomie szczegółowości. Podobnie jak w przypadku Mockflow, możesz też generować edytowalne wireframe’y w oparciu o zrzuty ekranu lub odręczne rysunki.
Co nam się spodobało? Dostępnych jest ponad 1500 szablonów UI aplikacji i stron www dla różnych branż. Możesz je wykorzystać, żeby skrócić proces projektowania interfejsu lub po to, by poszukać inspiracji.
Funkcja, którą warto sprawdzić: Magic Themes to funkcja, która pozwala wygenerować motyw aplikacji na podstawie Twojej strony lub obrazu. Możesz też automatycznie stworzyć własny motyw na bazie wybranego zestawu słów kluczowych.
Źródło: Zrzut ekranu z https://www.visily.ai/
ProtoPie
URL: https://www.protopie.io/solutions/mobile-tablet
Czasem aplikacja mobilna musi się łączyć z innymi urządzeniami, takimi jak smartwatche, telewizory czy inne smartfony. Jeśli chcesz przetestować, jak mogłoby to działać, wykorzystaj ProtoPie do budowy prototypu, który łączy dwa różne urządzenia.
Co nam się spodobało? ProtoPie umożliwia wykorzystanie zmiennych do przechowywania danych, co przydaje się podczas testowania użyteczności. Możesz wykorzystać tę opcję np. po to, by pokazywać imię uczestnika sesji. To narzędzie pozwoli mu też na przeprowadzanie niektórych obliczeń.
Funkcja, którą warto sprawdzić: Funkcja Handoff pozwala nagrywać interakcje. W ten sposób pokażesz programistom, jak aplikacja powinna się zachowywać. Dzięki temu zobaczą ścieżki użytkownika i dowiedzą się, jak pewne elementy mają działać.
Etap 5. Testowanie użyteczności
Kiedy prototyp jest gotowy, możesz pokazać go potencjalnym użytkownikom, żeby sprawdzić, czy jest on według nich intuicyjny, funkcjonalny i wart wypróbowania. Z tego powodu warto przeprowadzić testy użyteczności. Zobacz nasze przykłady narzędzi umożliwiających badania jakościowe.
Userbrain
URL: https://www.userbrain.com/en/
To narzędzie pozwala przeprowadzać testy użyteczności na aplikacjach mobilnych, webowych i prototypach. Możesz wykorzystać tę platformę do szukania uczestników lub wysłać link do testu samodzielnie zrekrutowanej grupie osób. Warto wypróbować Userbrain, gdy chcesz zdalnie przeprowadzić niemoderowane testy użyteczności.
Co nam się spodobało? Można wykorzystać szablony ze scenariuszami i zadaniami opracowanymi specjalnie z myślą o konkretnych branżach, takich jak E-commerce, Edukacja lub Saas.
Funkcja, którą warto sprawdzić: Asystant AI wynajduje momenty, które mogą się okazać ważne podczas analizy badania.
Userfeel
URL: https://www.userfeel.com/
Jeśli chcesz przeprowadzić sesje moderowane, wypróbuj Userfeel. To narzędzie sprawdzi się przy testowaniu aplikacji mobilnych, webowych i na tablety. Możesz zaprosić swoją grupą uczestników lub testerów znalezionych dzięki tej platformie.
Co nam się spodobało? Nie trzeba mieć subskrypcji – możesz płacić punktami kredytowymi za każdą sesję użytkownika osobno. To oszczędne rozwiązanie dla tych, którzy nie przeprowadzają regularnie wielu testów.
Funkcja, którą warto sprawdzić: Nie ma limitu członków zespołu, więc możesz zaprosić tylu współpracowników, ilu potrzebujesz. Każdy może oglądać nagrania wideo z testów i odnieść się do problemów, jakie uważa za istotne, kategoryzując je i dodając notatki.
Narzędzia w digital product designie: podsumowanie
Niektóre narzędzia wspomniane w tym tekście oferują wiele funkcji. Tutaj skupiamy się tylko na tych, które uważamy za szczególnie godne uwagi.
Wiemy, że często łatwiej jest korzystać z tego samego, dobrze znanego zestawu narzędzi. Czasem jednak możemy dojść do wniosku, że czegoś nam brakuje i że są bardziej dostępne lub tańsze alternatywy, które warto wykorzystać.
Właśnie z tego powodu uważamy, że warto być na bieżąco, sprawdzać nowości i eksperymentować z różnymi narzędziami. Kto wie, być może znajdziesz nowe ulubione rozwiązanie, które pomoże Ci rozwijać projekty.
