Śmierć modelowi szkieletowemu. Prosto do High Fidelity!

Projektowanie UX to fascynująca dyscyplina. Aby robić to dobrze, praktycy muszą być dobrze zorientowani w szerokiej gamie tematów i umiejętności. Aby ćwiczyć metodologię projektowania zorientowaną na użytkownika i tworzyć łatwe w użyciu, innowacyjne rozwiązania codziennych wyzwań związanych z projektowaniem produktów, rzemiosło i zrozumienie praktyka UX obejmuje wszystko, od podstawowego rysunku, przez projektowanie narracji/podróży, po psychologię poznawczą.

Istnieje wiele różnych używanych narzędzi, generowanych artefaktów i ustaleń odkrywanych w procesie projektowania UX/UI, które są rejestrowane w asortymencie dokumentów, a nawet prototypie. Naszym najbardziej rozpoznawalnym, chlebowym artefaktem jest stary, dobry model szkieletowy.

Szkielety — zazwyczaj monochromatyczne szkielety projektów stworzone do szybkiej oceny — są świetne. Pozwalają nam przetłumaczyć informacje pochodzące od wielu niepowiązanych stron w jeden dokument, który każdy może przejrzeć. Wiele różnych stanowisk pracy ocenia modele szkieletowe; analitycy biznesowi, kierownicy projektów, dyrektorzy ds. marketingu, wszelkiego rodzaju projektanci i programiści, różni inni dostawcy i usługodawcy — nawet docelowi odbiorcy podczas testowania produktów. Model szkieletowy pozwala każdemu zobaczyć, w jaki sposób zostaną zaspokojone jego indywidualne potrzeby, i daje całemu zespołowi szansę na rozwiązanie wszystkich problemów, zanim nastąpi konieczność podnoszenia ciężkich przedmiotów.

Są plusy i minusy, ale w niektórych przypadkach sensowne jest całkowite pominięcie fazy tworzenia szkieletów. Dużo czasu można by oszczędzić, obsługując UX i projekt wizualny na poziomie high-fidelity zaraz po odkryciu lub przygotowując się do prototypowania. Dałoby to innym możliwość jednoczesnej oceny zarówno funkcjonalności, jak i wyglądu produktu, od uczestników testów użytkowników po klientów i współpracowników.

Dowiedzmy się, dlaczego makiety mogą czasami sprawiać problemy, kiedy ich pomijanie ma sens i jak dostosować proces bez wireframe do przepływu pracy.

Problem z modelami szkieletowymi

Niezależnie od tego, czy chodzi o środowisko kaskadowe, czy zwinne, typowy proces projektowania obejmuje fazy badań, definicji, tworzenia pomysłów, prototypowania, testowania i wdrażania, a także wiele punktów kontaktowych do przeglądu z zainteresowanymi stronami.

Przyjrzyjmy się procesowi projektowania, aby zobaczyć przykłady, w których projektowanie szkieletowe może być wąskim gardłem:

Powód 1: Klienci nie rozumieją, na co patrzą

Proces projektowania zwykle rozpoczyna się od pewnego rodzaju badania problemu. Desk research, wywiady z interesariuszami i wywiady z użytkownikami to tylko niektóre z działań, które można podjąć, aby uzyskać głębsze zrozumienie. Po przeprowadzeniu badań zespół projektowy zaczyna oceniać szereg pomysłów i koncepcji w celu znalezienia najlepszego rozwiązania.

Gdy koncepcja jest bardziej dopracowana, zespół projektowy często dzieli się z klientem serią makiet podczas sesji przeglądowej.

Problem w tym, że szkielety są bardzo abstrakcyjne.

Opisują coś, co jest podobne do rzeczy, ale nie rzeczywistą , która zostanie zbudowana. Na tym etapie makiety będą zawierać obrazy zastępcze i wszelkiego rodzaju TK (w przyszłości), FPO (tylko do umieszczenia) i TBD (do podjęcia decyzji), tak jak w poniższym przykładzie.

Prawdopodobnie są szczegóły dotyczące funkcjonalności, wymagań biznesowych i obsługi błędów, które zostaną wskazane na ogromnej liście adnotacji. Zazwyczaj nigdy nie ma wystarczająco dużo czasu, aby przejrzeć je szczegółowo, więc klient będzie musiał sam je przeczytać.

Podczas przeglądów szkieletowych prosimy naszych klientów, aby skupili się na opisywanej koncepcji i ocenili, czy wydaje się ona rozwiązywać problemy biznesowe i użytkowników. Jednak wciąż otrzymujemy pytania dotyczące rzeczy, które dla nas nie wydają się być ze sobą powiązane. Klienci chcą wiedzieć, czy model szkieletowy jest „ostateczną kopią”, czy mogą zobaczyć przykłady zdjęć do wyświetlenia na obrazie bohatera – lub inne pytanie dotyczące czegoś, co będzie obsługiwane w projektowaniu wizualnym, prototypowaniu interfejsu użytkownika lub rozwoju.

Modele szkieletowe mogą być zbyt abstrakcyjne dla klientów, a nawet wewnętrznych interesariuszy, aby mogli je skutecznie ocenić. Modele szkieletowe mówią ludziom, jak będzie wyglądał projekt, kiedy zostanie ukończony, ale nadal muszą wykonać dużo pracy umysłowej, aby połączyć go w ich głowach. Nasi klienci mogą, ale nie muszą być myślicielami wizualnymi, a oczekiwanie od nich, że spojrzą na projekt i wymyślą udany produkt lub witrynę, może być zbyt trudne.

Było kilku klientów, którzy specjalnie poprosili o przejrzenie projektów graficznych z adnotacjami, ponieważ znacznie łatwiej jest im łączyć kropki, prowadzić przemyślaną dyskusję i udzielać przemyślanych opinii.

Powód 2: nie zawsze nadają się do testowania przez użytkowników

Mamy nadzieję, że w procesie projektowania zaplanowano pewne testy użytkowników, ponieważ jest to dobry sposób na przetestowanie wszystkiego, od wykonalności całej koncepcji po poziom szczegółowości wyświetlany w transakcji.

Jednym z typowych sposobów testowania tego rodzaju rzeczy jest prototypowanie.

Modele szkieletowe mogą — i działają — pracować przy prototypowaniu. Zespół projektowy ogranicza się tylko do testowania przepływu i funkcjonalności, a ponieważ brakuje w nim wizualnej warstwy projektowej, style wizualne wpływające na zachowanie użytkownika można łatwo zignorować.

Czy to mądre? UX, projekt wizualny i projekt graficzny mają na siebie wpływ. Trudno je rozdzielić i odizolować w środowisku testowym. Podobnie jak w badaniu naukowym, wyniki jednej funkcji testowanej w izolacji nie mogą kontrolować ani przewidywać, jak będzie się ona zachowywać w środowisku naturalnym.

Czasami bardziej efektywne jest przetestowanie wszystkich tych rzeczy razem, całościowo.

Przykład: wielojęzyczny produkt lub usługa. Języki mogą mieć różną gramatykę, alfabety i szerokości znaków, co może mieć wpływ na ogólny projekt.

Co więcej, ponieważ treść kopii wpływa na UX, samo tłumaczenie może wpływać na UX.

Na przykład mieliśmy zadanie, w którym musieliśmy przetestować kilka różnych architektur informacji ze względu na to, jak różne koncepcje trzeba było wyjaśnić w lokalnym języku. Nie odkrylibyśmy wpływu na copywriting i tłumaczenie bez przetestowania rzeczywistej kopii w interfejsie użytkownika.

Odkryliśmy, że do opisania podobnych pojęć w lokalnym języku potrzeba więcej słów i że będziemy musieli globalnie zmienić rozmiary i kształty przycisków, aby dostosować je do obszernych sformułowań wymaganych dla tego języka. Bez skupienia się na problemach z tekstem podczas testowania rzeczywistych komponentów wizualnych w interfejsie użytkownika, nie odkrylibyśmy, że przyciski muszą zajmować całą szerokość ekranu mobilnego, co wpłynęło na nasz projekt UX.

Kluczowy wniosek: od samego początku warto przygotować interfejsy użytkownika o wysokiej wierności, szczególnie w przypadku projektu wielojęzycznego.

Powód 3: Sprawiają, że życie jest piekłem dla programistów i QA

To, co nieuchronnie dzieje się w fazie projektowania wizualnego, polega na tym, że wszystko się porusza. Ułożone na sobie obrazy stają się kafelkami. Wyśrodkowany tekst zostanie wyrównany do lewej. Ikony wyzwalacza akordeonu to + i - , ale teraz to kilka szewronów.

Jest to normalna część procesu projektowania wizualnego. Normalne jest również to, że wszelkie zmiany wprowadzone w projekcie wizualnym nie zostaną odzwierciedlone w modelach szkieletowych, ponieważ modele szkieletowe zostały „podpisane”.

Kiedy wszystkie wizualizacje zostaną zatwierdzone, nadszedł czas, aby przekazać wszystko deweloperom. W większości przypadków otrzymają zestaw szczegółowych, opatrzonych adnotacjami makiety i zestaw pięknych projektów wizualnych wraz z przewodnikiem stylu. Teraz to do nich należy powiązanie tych dwóch dokumentów i ożywienie ich.

Jest to obszar, w którym proces projektowania może naprawdę zawieść. Dajemy programistom zbyt wiele dokumentów, aby mogli się do nich odwoływać, i pozostawiamy im określenie, które informacje mają pierwszeństwo. Zwiększa to ilość czasu potrzebnego na rozmowy z pomocą techniczną i kontrolę jakości, co w naturalny sposób wpływa na czas potrzebny na wprowadzenie produktu lub aktualizacji na rynek.

Dlaczego nie dać programistom jednego dokładnego dokumentu, który zawiera wszystko? Większość klientów doceniłaby również kopię do wykorzystania jako kompletne odniesienie do pracy.

Rozwiązanie: pomiń szkielety

Oczywiście zdarzają się sytuacje, w których potrzebna jest pełna faza szkieletu, a czasami nie. Są nawet chwile, kiedy przejście od razu do wysokiej wierności całkowicie przebija fazę szkieletową.

Możesz rozważyć pominięcie fazy szkieletu, jeśli którakolwiek z poniższych sytuacji jest prawdziwa:

Na miejscu znajduje się solidny materiał odniesienia.

Spójrz na istniejącą pracę w miejscu. Mogą być już dostępne szczegółowe odniesienia do interfejsu użytkownika. Jeśli aktualizujesz istniejącą witrynę internetową lub dodajesz nową funkcję do istniejącej aplikacji, spójrz na bieżącą witrynę internetową i aplikację, aby znaleźć wzorce i style do ponownego wykorzystania.

Byłoby jeszcze lepiej, gdybyś miał dostęp do plików źródłowych istniejącej pracy. Niektóre funkcje i elementy mogły zostać utracone podczas tłumaczenia, że ​​tak powiem, podczas procesu rozwoju, a możesz odwołać się do pliku źródłowego, aby zobaczyć, jak ta funkcja powinna była zostać wykonana.

Oprócz (lub w przypadku braku) istniejącego produktu lub witryny sprawdź, czy istnieje przewodnik po stylu lub biblioteka wzorów. Klient mógł już zapłacił za branding i projekt wizualny, a te zasoby mogą zostać ponownie wykorzystane w Twoim projekcie.

Użyj jak największej liczby stylów i wzorów, aby Twoje wydruki o wysokiej wierności były jak najdokładniejsze.

Po drodze zaplanowałeś wiele iteracyjnych prototypów i testów.

Zaoszczędź sobie trochę wysiłku w ciągu tygodni prototypowania i testowania. Jeśli za pierwszym razem skonfigurujesz dokument starannie i mądrze wykorzystasz powtarzające się style, wzorce i symbole, możesz łatwo wprowadzać aktualizacje przyrostowe z wysoką wiernością i publikować je bezpośrednio w przepływie pracy prototypowania. Nie ma potrzeby tworzenia szkieletów.

Jako duży plus można upiec dwie pieczenie na jednym ogniu. Możesz otrzymywać informacje wizualne i informacje dotyczące interfejsu użytkownika wraz z opiniami dotyczącymi UX i wprowadzać wszystkie te zmiany za jednym zamachem.

Twoi uczestnicy testu są bardzo dosłowni.

Tak jak Twoi klienci i współpracownicy mogą czasami wymagać konkretnych przykładów, tak samo mogą być docelowi odbiorcy Twojego projektu.

Podczas jednego z ostatnich koncertów zaprojektowałem ekrany finansowe dla grupy docelowej o niskim poziomie umiejętności czytania i pisania. Czytanie ze zrozumieniem nie było jedynym problemem – abstrakcyjne pojęcia były często bardzo trudne do rozwiązania. Ta grupa docelowa zazwyczaj musiała omówić koncepcje finansowe na konkretnych przykładach; w przeciwnym razie nie byli w stanie naprawdę śledzić rozmowy.

Aby zrozumieć koncepcje finansowe, uczestnicy testów z tej grupy odbiorców musieli poczuć, jakby faktycznie dokonywali transakcji. Aby zrozumieć, jak działa produkt, musiał wyglądać i czuć się jak prawdziwa aplikacja.

Zapomnij o modelach szkieletowych dla takiej publiczności! W końcu spędzisz dużo czasu na wyjaśnianiu, czym one są — a Twoi odbiorcy nie będą się koncentrować na zadaniach ani na tym, co o nich myślą, ponieważ nie mogą odnieść się do używania czegoś tak nieznanego w ich życiu.

Twój klient ma ograniczony czas i/lub budżet.

Rzadko kiedy masz czas, środki i budżet na swoją korzyść. Często zdarza się, że próbujesz zmniejszyć zakres i cenę lub starasz się zobaczyć, gdzie możesz zaoszczędzić i nadal dostarczać klientom świetną usługę.

Jeśli masz klienta, którego nie stać (lub raczej nie kupi) na pełne przygotowanie UX, czy mogę zasugerować skrócenie czasu tworzenia wireframe'ów? Utwórz trochę wewnętrznie, jeśli potrzebujesz, ale utrzymuj projekt w ruchu dla swojego klienta. Przetestuj rzeczywiste, namacalne projekty i poproś klienta o reakcję na rzeczywistą pracę.

Jak zabić fazę szkieletu?

Ta część jest raczej subiektywna, ponieważ będzie zależeć od Twojego osobistego przepływu pracy i konkretnych potrzeb Twojego klienta.

Biorąc to pod uwagę, jest to „szablon” procesu, który możesz początkowo spróbować dostosować do swojego przepływu pracy, a następnie dostosować, gdy zdobędziesz więcej praktyki, pracując w ten sposób.

Krok 1: Zacznij od zwykłego procesu badań i odkrywania.

Wywiady, obserwacje terenowe, badania dokumentów, analizy konkurencji — cokolwiek zwykle robisz (lub masz zaplanowane), ukończ tę fazę tak, jak zwykle.

Krok 2: Naszkicuj trochę po drodze.

Podczas prowadzenia badań prawdopodobnie otrzymujesz pomysły na przydatne układy i wzorce, angażujące przepływy i tym podobne. Zapisz je jednak, jak zwykle. Lubię robić w notesie miniaturowe szkice, obok których pisane są notatki. Możesz chcieć szkicować na tablicy lub robić zrzuty ekranu z interesującymi wzorami interfejsu użytkownika. Cokolwiek pomoże Ci zapamiętać dobre pomysły, zrób to.

Krok 3: Przygotuj dokument o wysokiej wierności

Otwórz wybrane narzędzie do projektowania i skonfiguruj poprawnie dokument. Wybierz kilka rozmiarów obszaru roboczego i zacznij tworzyć powtarzalne kształty, grupy i symbole.

Poświęć trochę czasu, aby zapisać paletę kolorów marki jako pojedyncze próbki, tworzyć i organizować style pisma oraz tworzyć standardowe cienie i filtry, które w razie potrzeby można zastosować do wszystkich kształtów.

Poświęć dużo czasu na odpowiednie ustawienie symboli. Możesz mieć przycisk, który w zależności od stanu może mieć cztery różne kolory. Skorzystaj z nadpisań symboli — jeśli możesz — aby w razie potrzeby łatwo zastosować różne kolory i etykiety tekstowe.

Jeśli używane są jakieś niestandardowe ikony, zapisz je jako pojedyncze symbole na kwadratowym obszarze roboczym (lub innym odpowiednim kształcie). W ten sposób łatwo będzie je skalować w górę iw dół, zachowując jednocześnie odpowiednie odstępy i wyrównanie.

Krok 4: Zacznij projektować.

Twoja pierwsza runda może być nieco trudna, ponieważ przyzwyczaisz się do pracy w ten sposób i zobaczenia, gdzie sprawdza się Twój przewodnik po stylu (a gdzie nie). Oprócz tworzenia rozwiązań dla wzorców, które nie mają jeszcze zdefiniowanego stylu, spodziewaj się, że wykonasz sporo poprawek, aby uzyskać wszystkie style.

Przez cały ten proces postępuj zgodnie z dobrym „kierunkiem kopiowania” lub z prawdziwą kopią, jeśli ją masz. Nie twórz tytułów, które mówią „Tu jest tytuł strony”. Daj widzowi poczucie, co by tu było, gdyby było prawdziwe.

Podobnie nie twórz listy nazwisk, w których wszystkie mówią John Smith z numerem telefonu 555-1212. Użyj generatora list losowych lub wtyczki, aby tworzyć różne nazwy i liczby lub utwórz dowolny zestaw danych, który chcesz wyświetlić. To może wydawać się przesadą, ale pozwala rozwiązać problemy z układem i szerokością znaków oraz pomaga widzowi zrozumieć, że te pięć wpisów jest różnych.

Krok 5: Wiedz, kiedy przestać projektować.

Jest kilka szczegółów, którymi nie powinieneś się teraz zajmować, ponieważ naprawdę zajmą one zbyt dużo czasu. Być może jest to wybór dokładnego obrazu, który ma przejść do bohatera, lub zaprojektowanie niestandardowej ikony wskazującej stan pobierania. Oto niektóre przypadki, w których możesz użyć zastępczego obrazu lub ikony i przetestować prawdziwe obrazy lub ikonografię w późniejszym terminie.

Będziesz musiał zadzwonić, co jest właściwe tutaj, ponieważ będzie to zależeć od celów projektu, a także od tego, jak daleko w nim jesteś.

Pamiętaj, że może to zależeć od potrzeb uczestników testów użytkownika, aby prawidłowo ocenić pracę. Dla grupy docelowej o niskim poziomie umiejętności, o której wspomniałem powyżej, nic nie było zbyt szczegółowe. Dla każdego uczestnika stworzyłem wariant prototypu z jego prawdziwym imieniem i numerem telefonu używanym przez cały czas, aby aplikacja naprawdę wyglądała, jakby była „ich”. Im mniej musieli zakładać, tym łatwiej było im podążać i tym lepsze były moje wyniki.

Krok 6: Ciesz się wysokiej jakości opiniami i wynikami testów.

Opublikuj swoje projekty bezpośrednio w wybranym narzędziu do prototypowania i przenieś je w teren w celu przetestowania. Możesz teraz otrzymywać opinie na temat czegoś więcej niż tylko funkcjonalności. Możesz odkryć potencjalne problemy wizualne, takie jak problemy z kontrastem kolorów lub czytelnością, a także problemy z kierunkiem kopiowania lub tłumaczeniem. Możesz także wydobyć pozytywne lub negatywne odczucia użytkowników na temat wyglądu i stylu lub marki.

Są to wszystkie rzeczy, na temat których prawdopodobnie i tak otrzymałeś informację zwrotną, gdy dotarłeś do fazy projektowania wizualnego. Dlaczego nie uzyskać tych wszystkich opinii teraz? Niektóre opinie na temat wizualizacji mogą bezpośrednio wpłynąć na UX i na odwrót, więc dobrze jest opracować to wszystko w tym samym czasie, jeśli możesz.

Zawijanie

Niewątpliwie jest wiele przypadków, w których do powodzenia projektu niezbędna jest pełna faza makiety. Złożony projekt, podobnie jak responsywna aplikacja internetowa, wymaga osobnego i dedykowanego skupienia się na modelach szkieletowych. Zaoszczędziłoby to czas i pieniądze, aby opracować wszystkie wymagania biznesowe, przypadki brzegowe i obsługę błędów na etapie szkieletu, niż gdyby pełna warstwa wizualna była już opracowana i zastosowana.

Jednak w odpowiednich przypadkach przejście od razu do wysokiej wierności może poprawić twój proces:

• Popraw opinie interesariuszy . Klienci, programiści, inni projektanci i uczestnicy testów z grupy docelowej mogą dokładnie zobaczyć, co otrzymają, umożliwiając im przekazywanie opinii o wyższej jakości.
• Przyspiesz proces tworzenia prototypów . Nie tylko Twoje projekty będą gotowe do natychmiastowego przetestowania, ale możesz uzyskać informacje zwrotne na temat wielu rzeczy naraz: UX, kopii i wizualizacji.
• Dostarcz pojedynczy dokument klientom i programistom . Wyeliminuj potrzebę odwoływania się i sprawdzania różnych dokumentów, aby zrozumieć, jak powinien działać przycisk. Jest to również świetny sposób, aby Twój klient omówił pracę z jego wewnętrznymi interesariuszami, aby uzyskać jeszcze więcej informacji zwrotnych.
• Oszczędzaj czas i pieniądze . A to prawie zawsze jest dobre!

Daj temu podejściu szansę następnym razem, gdy będziesz mieć projekt, w którym masz istniejące materiały projektowe, do których możesz się odnieść, lub w przypadku, gdy będzie to miało duże znaczenie dla odbiorców, jeśli praca jest niska lub wysoka wierność.

• • •

Dalsza lektura na blogu Toptal Design:

• eCommerce UX – przegląd najlepszych praktyk (z infografiką)
• Znaczenie projektowania zorientowanego na człowieka w projektowaniu produktu
• Najlepsze portfolio projektantów UX – inspirujące studia przypadków i przykłady
• Zasady heurystyczne dla interfejsów mobilnych
• Projekt przewidujący: jak tworzyć magiczne doświadczenia użytkownika