Wireframe i prototypy: kluczowe elementy strategii projektowania UX

Wireframe i prototypy są podstawą systematycznie planowanej strategii projektowania UX. Poczynając od tworzenia wireframe'ów, powtarzający się cykl korekt pozwala na rozwój bezbłędnego produktu. A jakościowy prototyp jest niezbędny do skutecznego przekazania idei projektu i wprowadzenia go w życie.

Pomyślne zaprojektowanie strony internetowej jest wynikiem poprawnie zaimplementowanego UX. "Wireframe", "prototypy" lub makiety produktów są trzema najważniejszymi elementami designu, często związanymi ze strategią projektowania UX. Choć ludzie używają tych terminów zamiennie, specjaliści od projektowania dokładnie wiedzą, że wireframe i prototyp służą różnym celom, wyglądają inaczej, a nawet komunikują różne rzeczy.

Przeanalizujemy te wyniki projektowe, aby dowiedzieć się, co robią, dlaczego są przydatne i jak pasują do procesu projektowania UX:

---

Czym jest wireframe i jak wygląda?

Wireframe jest schematem projektu, który opowiada historie o przyszłym designie. Został stworzony, aby nadać konkretny kształt Twoim abstrakcyjnym pomysłom. Wireframe to projekt układu o niskiej wierności, który rysuje obrys struktury i zapewnia wizualny opis interfejsu użytkownika. Wireframe jest sposobem sprawdzenia poprawności lub unieważnienia założeń poprzez symulację doświadczenia bez potrzeby tworzenia prawdziwej rzeczy.

• Rysowanie wireframe'ów wymaga użycia elementów graficznych w skali szarości, takich jak linie, pola i inne kształty geometryczne.
• Wireframe'y nie wyglądają dokładnie jak prawdziwy gotowy produkt. Są to makiety o ograniczonych cechach wizualnych.
• Symbole zastępcze w wireframe'ach zastępują elementy projektu, takie jak obrazy, tekst i wideo. Te elementy zastępcze mogą ewoluować do rzeczywistych elementów graficznych w przyszłych iteracjach w celu lepszego zrozumienia.

---

Cel tworzenia wireframe'ów

Podstawowym celem tworzenia wireframe'ów jest przekazywanie informacji o architekturze, treści i układzie:

• Kształtowanie pomysłów: wireframe służy do utrwalenia pomysłu i nadania mu odpowiedniego kształtu.
• Komunikacja pojęć: łatwiej jest wizualizować koncepcję i uzyskać dogłębne zrozumienie tej koncepcji za pomocą wireframe.
• Poprawna ocena: dzięki wireframe'om łatwiej jest przeanalizować ogólną cenę wykonania projektu, ocenić wysiłki i sprawdzić wykonalność.
• Sprzedaż pomysłów klientom: wireframe pomaga sprzedać pomysły, dając klientom ich wizualizację.
• Testowanie użyteczności: można zidentyfikować obszary poprawy w wireframe'ach, ponieważ są bardzo elastyczne w dostosowywaniu i włączaniu sugestii.

---

Metody tworzenia wireframe'ów

Istnieją różne sposoby na tworzenie wireframe'ów, niektóre z popularnych są wymienione poniżej:

Szkicowanie

Wireframe można szkicować ręcznie, aby zwizualizować różne pomysły. Jest to preferowana metoda wireframingu, gdy projekt wymaga wielu iteracji i szeregu sesji burzy mózgów przed sfinalizowaniem stałego układu i struktury.

---

Oprogramowanie

Precyzyjne wireframe'y są tworzone z pomocą takiego oprogramowania jak Illustrator i Adobe Photoshop.

---

Wskazówki dotyczące wireframingu

Poniżej znajduje się lista wskazówek, o których warto pamiętać przy tworzeniu modeli wireframe:

• Nie komplikuj: podstawowym celem wireframe jest sprawdzenie podstawowych funkcji i zapewnienie przeglądu projektu. Krótko mówiąc, wireframes powinny przekazywać ideę w najprostszy możliwy sposób.
• Współpracuj z innymi i zbieraj opinie: podziel się s wireframe'm z innymi, aby zebrać opinie. Słuchanie tego, co inni mają do powiedzenia na temat realizacji wyobrażonego pomysłu, pomogłoby w szybkim ulepszeniu wireframe'u projektu.
• Nie poświęcaj zbyt wiele czasu na dopracowywanie elementów projektu: zaleca się, aby nie poświęcać wiele czasu na estetykę, ponieważ wireframes są zaprojektowane do sprawdzania podstawowych funkcji. Kolory i obrazy można udoskonalić podczas końcowych etapów prototypowania interfejsu użytkownika.
• Nie używaj falszywej zawartości: używanie fałszywej treści zabiłoby główny cel tworzenia wireframe'ów. Użytkownik rozprasza swoją uwagę i nie jest w stanie skorelować się z różnymi ekranami. Chociaż wireframe'y mają być tworzone w krótkim czasie, zaleca się użycie prawdziwej zawartości. Jeśli ostateczna treść nie będzie gotowa do tego czasu, dobrym wyborem będzie użycie podobnego rodzaju zapisu.

---

Czym jest prototyp?

Wyjaśniając prostymi słowami, prototyp jest wierną reprezentacją projektu, która zawiera rzeczywiste dane, interakcje i animacje. Prototypy przypominają gotowy produkt, jeśli chodzi o wygląd i styl symulowania interakcji z interfejsem użytkownika.

Prototypowanie to etap, w którym wyobrażona idea jest bardziej pogłębiana, w celu stworzenia interaktywnego doświadczenia. W tej fazie projektanci i programiści wchodzą w interakcję z prototypami, aby stworzyć ostateczny produkt.

---

Iteracyjny cykl życia rozwoju prototypów

Doskonałe wrażenia użytkownika, interfejs i projekt są wynikiem systematycznie wdrażanego cyklu życia prototypu. Pozwala to projektantom na szybkie przeglądanie wielu iteracji projektów, testowanie ich wydajności i tworzenie jeszcze lepszych wrażeń użytkowników na stronach.

• Przeprowadź szczegółowe badania w celu zidentyfikowania wymagań użytkowników końcowych i zrozumienia koncepcji przyszlego projektu;
• Stwórz hipotezę, która określa problem i spełnia wymagania użytkownika;
• Stwórz wireframe o niskiej wierności, aby umieścić swoje pomysły na papierze i zrozumieć ich;
• Zaprojektuj prototypy o wysokiej wierności, aby poczuć atmosferę i ogólny wygląd gotowego produktu;
• Użyj prototypu, aby przetestować założenia i zmierzyć swoją hipotezę;
• Zidentyfikuj obszary do poprawy i ponownie przeprowadź proces, aby zbliżyć się do gotowego produktu.

Wierność prototypów wzrasta na każdym etapie rozwoju. Jeśli problem zostanie wykryty na wczesnym etapie, można go lekko usunąć. Rozwiązywanie problemów na późniejszych etapach staje się trudniejsze i bardziej kosztowne. To sprawia, że konieczne jest zwrócenie uwagi na najdrobniejsze szczegóły na etapie prototypowania, aby uniknąć późniejszych zmian.

---

Popularne narzędzia do prototypowania

Narzędzia do prototypowania dla projektantów są o różnych rozmiarach i kształtach. Oto niektóre z najlepszych narzędzi do prototypowania:

---

Invision Studio

Invision Studio jest jednym z najlepszych narzędzi do prototypowania, ze względu na potężnę funkcje tworzenia wysokowydajnych wireframe'ów, szybkich prototypów z mikro-interakcjami. Intuicyjne możliwości rysowania elementów opartych o wektory, elastyczne warstwy i nieskończone płótno umożliwiają projektantom szybkie przekształcanie pomysłów w projekty.

---

UXPin

UXPin to web narzędzie do tworzenia prototypów ze spójnym interfejsem i dziesiątkami wbudowanych bibliotek. To narzędzie jest bardzo przydatne przy tworzeniu szybkich makiet, statycznych wirefram'ów oraz interaktywnych prototypów. Dodawanie efektów animacji i innych elementów interaktywności jest stosunkowo łatwe dzięki UXPin.

---

Proto.io

To web narzędzie makieta zawiera wiele mobilnych widgetów i możliwość przeglądania prototypów w trybie offline. Narzędzie Proto.io służy do tworzenia prototypów o niskiej i wysokiej wierności.

---

Axure

Axure jest jednym z najbardziej popularnych i solidnych narzędzi do prototypowania, które pomaga w tworzeniu skomplikowanych interakcji. Różne biblioteki wzorów umożliwiają projektantom szybkie prototypowanie pomysłu bez potrzeby tworzenia złożonych kształtów od zera.

---

AdobeXD

Jest to specjalne oprogramowanie do projektowania UX używane do tworzenia zaawansowanych elastycznych modeli krawędziowych, które pozwala płynnie przełączać się między modelami wireframe'ami a prototypami. Oprogramowanie AdobeXD potrafi przekształcić wireframe'y w prototypy o niskiej wierności bez użycia jakichkolwiek innych narzędzi.

---

Co nowego w prototypowaniu i wireframe'ingu?

Rozwój technologii doprowadził do powstania nowych i lepszych narzędzi do wireframingu i prototypowania. Nowe technologie uczenia maszynowego (ML) i sztucznej inteligencji (AI) łączą się z prototypowaniem, aby stworzyć bardziej zautomatyzowane narzędzia i programy. Spójrzmy na następujące przykłady:

---

Ink to Code od Microsoft

Ink to Code wykorzystuje funkcje uczenia maszynowego systemu Windows 10 do rozpoznawania obiektów. Jest to rewolucyjne narzędzie w świecie prototypowania, które pozwala programistom bezpośrednio eksportować ręcznie rysowane szkice wireframe do Visual Studio.

Narzędzie Ink to Code zostało opracowano w celu przyspieszenia procesu prototypowania. Podstawą tego narzędzia byli członkowie projektu Garage; jednak jest on obecnie obsługiwany i sponsorowany przez zespół Xamarin.

---

---

Zalety i funkcji narzędzia nk to Code są następujące:

• Programiści mogą używać rysika do szkicowania elementów wireframe i przygotowania układu interfejsu na ekranie dotykowym.
• Te ręcznie rysowane szkice są zmieniane i przekształcane w proste, symetryczne pudełka w celu uzyskania bardziej atrakcyjnego wyglądu interfejsu.
• Elementy projektu i symbole są automatycznie konwertowane na pola tekstowe, akapity, etykiety, obrazy i przyciski, wykorzystując możliwości uczenia maszynowego.
• Niezależni projektanci mogą tworzyć i ulepszać prototypy poprzez ciągłe iteracje i udostępniać je innym.
• Jest to najlepsze narzędzie do wspólnego prototypowania, odpowiednie dla osób posiadających doświadczenie w zakresie zarówno projektowania, jak również kodowania.

---

Ten artykuł został przetłumaczony z angielskiego. Orygimał można znaleźć tutaj: Wireframes and Prototypes: Key Elements of UX Design Strategy.

---

Konwertowanie szkiców projektu na kod źródłowy produktu

Airbnb wykorzystuje potencjał sztucznej inteligencji do automatyzacji rutyny rozwoju produktu. Narzędzie AI czerpie pomysły z deski kreślarskiej i natychmiast zamienia je w rzeczywiste produkty.

Opracowanie tego narzędzia ma na celu ułatwienie pracy. Wykorzystanie tego narzędzia AI może zautomatyzować cały proces od ideacji, wireframingu, prototypowania, projektowania do opracowania gotowego produktu. Ten film pomoże lepiej zrozumieć funkcje narzędzia.

Systematycznie udokumentowany projekt systemu Airbnb przyczynił się do postępu i rozwoju tego narzędzia do prototypowania opartego na sztucznej inteligencji. Predefiniowane komponenty, standardowe adnotacje i wytyczne projektowania są podawane do systemu AI w celu klasyfikacji różnych składników. System sztucznej inteligencji identyfikuje standardowe, ręcznie rysowane elementy projektu Airbnb i automatycznie przekształcił je w rzeczywisty kod źródłowy.

Benjamin Wilkins, projektant technologii w Airbnb dokonał przeglądu wyników tego narzędzia AI i ocenił wyniki jako bardziej niż zadowalające. Wyraził także zaufanie do ogromnego potencjału tego systemu.

Airbnb eksperymentował z wykorzystaniem tej technologii w różnych scenariuszach:

• tworzenie prototypów live code z rysunków tablicy
• przekształcenie makiet o wysokiej wierności na specyfikacje komponentów
• przekształcenie kodu produktu na pliki projektowe do iteracji przez projektantów.

Badania i rozwój tego narzędzia idą w dobrym kierunku. Wilkins uważa, że prototypowanie wspomagane sztuczną inteligencją wkrótce stałoby się integralną częścią wewnętrznego pakietu produktów firmy Airbnb.

---

* * *

Wireframe'y i prototypy są integralną częścią strategii projektowania UX. Używanie wireframe'ów o niskiej wierności na wczesnych etapach projektowania i rozwoju umożliwia mapowanie ogólnych przepływów użytkowników i architektury informacji. Wysoce wierny prototyp pomaga głębiej zrozumieć produkt. Ponadto identyfikuje i koryguje błędy w celu opracowania bezbłędnego produktu.

Podsumowując, można powiedzieć, że systematycznie planowany wireframing i prototypowanie zapewnia płynną nawigację, logiczny przepływ stron i wyjątkowe wrażenia użytkownika.