Próbuję z nowym formatem na blogu, gdzie w krótkich materiałach będę pokazywać wam praktyczne rozwiązania, które można zastosować w codziennej pracy. Dziś opowiem wam chwilę o prostym sposobie na dzielenie się projektem z klientem i zbieraniem feedbacku. Możecie również obejrzeć film, jeśli wolicie format video – znajdziecie go na kanale, o tu:
InVision, bo to bohater dzisiejszego wpisu – możecie kojarzyć go już z innych filmów i wpisów – wspominałam o tej platformie nie raz. Dziś skupię się na jednym narzędziu, które jest darmowe, przeglądarkowe i łatwe w obsłudze. Jest w związku z tym dość proste i ma swoje ograniczenia, ale do użytku, o którym opowiem wam dzisiaj, w zupełności wystarczy.
Ok, wyobraźmy sobie, że mamy kilka projektów, które chcielibyśmy pokazać klientowi albo naszym współpracownikom do oceny – zebrania feedbacku, czy nawet – wyłapania jakichś literówek w tekstach. Niektóre narzędzia pozwalają na eksport projektu i opcję komentowania (jak chociażby Adobe XD czy Axure). Ale nie wszystkie to mają i zdarza się, że będziemy zmuszeni znaleźć swój sposób na przerzucanie się uwagami. Najprostszym rozwiązaniem jest wysłanie obrazków w mailu i otrzymanie uwag w odpowiedzi. Nie jest to jednak specjalnie wygodne, bo musimy szukać konkretnych części, o których mowa w wiadomości i przy dużej ilości obrazków i uwag można się w tym po prostu pogubić.
Jak wykorzystać do tego InVision?
W prosty sposób! Wystarczy założyć konto na www.invisionapp.com – co jest darmowe w podstawowej wersji (wystarczy zostawić maila, ustawić hasło i potwierdzić maila przez wpisanie wygenerowanego kodu, który dostaniecie na skrzynkę pocztową). Mając potwierdzone konto waszym oczom powinien ukazać się panel główny (chyba, że zdecydujecie się przejść przez samouczek).
Na początek stworzymy nowy projekt, który będzie zbierał widoki (lub widok), który chcecie przesłać dalej. W tym celu klikacie w wielki różowy plus w prawej części ekranu, a po rozwinięciu dodatkowego menu wybieracie Prototype. To właśnie z opcji prototypowania skorzystamy żeby przygotować projekt do wysłania klientowi. Jeśli uda wam się dotrzeć do tego miejsca, kolejny ekran jaki zobaczycie poprosi was o wpisanie nazwy projektu (możecie ją później zmienić) i wybrania docelowego urządzenia, na który prototyp został stworzony – co wybrać?
Prawdopodobnie najczęściej będziecie korzystać z opcji desktop (chyba, że przygotowaliście mobilne ekrany aplikacji do oceny), ale desktopowy prototyp pozwoli wam bez problemu wrzucić każdy inny projekt – nawet ten, który z UI nic wspólnego nie ma. Wybieramy więc desktop i przechodzimy dalej.
Kolejny ekran pokazuje nam możliwości wgrywania plików. InVision posiada świetne wtyczki, które łączą Sketcha i Photoshopa (i sprytnie skracają naszą pracę). Również jeśli korzystacie z aplikacji InVision Studio możecie połączyć ją z prototypami w przeglądarce. My wybierzemy opcję trzecią i po prostu wgramy wybrane obrazki (przeciągając je na pole lub klikając w opcję Browse your files.
Jeżeli chcecie przesłać klientowi do wglądu na przykład trzy obrazki (widoki strony, ilustracje, zdjęcia, projekty ulotki), to wgrają się do InVision jako trzy osobne pliki. Każdy będzie traktowany jako osobny ekran, a w związku z tym możecie dodawać do nich dodatkowe ustawienia. Jeżeli klikniecie po prostu w jeden z w granych obrazków, przejdziecie do podglądu.
Nazwy ekranów pobierane są z nazwy pliku, ale te w każdej chwili możecie zmienić (warto pilnować takich detali i nie wysyłać do klienta plików nazwanych dupadupa.jpg albo final4323.png).
Podgląd widoku pokazuje wam jak mniej więcej klient zobaczy wasz projekt (z pominięciem tych dodatkowych opcji edycji oczywiście). W prawym dolnym rogu znajdziecie ikonę z trzema kropkami, to tam ukryte są główne ustawienia widoku. Po rozwinięciu menu zobaczycie, że możecie ustawić min. pozycję zdjęcia, jego wielkość czy kolor tła. Jeśli macie duże obrazki, a wiecie, że klient może oglądać je na małym ekranie, możecie dostosować wielkość obrazka do szerokości okna przeglądarki (wtedy klient nie będzie musiał scrollować horyzontalnie po ekranie).
Jeśli wgraliście kilka obrazków (czasem może być ich dużo, dużo więcej), a chcielibyście by wszystkie miały podobne ustawienia (np. czarne tło albo dopasowującą się szerokość), wystarczy zaznaczyć checkbox znajdujący się obok przycisku Save. Dzięki temu oszczędzacie czas na przeklikiwaniu się przez wszystkie widoki i odhaczaniu opcji, które was interesują.
Ok, przygotowaliśmy projekt do podglądu, ale to, co interesuje nas najbardziej to podzielenie się nim z klientem. W prawym dolnym rogu znajdziecie przycisk Share, który otworzy okno opcji udostępniania. Macie dwie opcje – publiczny link, który po wygenerowaniu pozwala każdemu wejść i skomentować projekt, lub zaproszenie do projektu – wpisując maile wysyłacie zaproszenie do wybranych osób. Ta druga opcja przyda wam się jeśli chcecie mieć pewność, że nikt niepowołany nie zobaczy projektów.
Co dalej? Jeśli wysłaliście klientowi link (lub zaprosiliście go przez maila), klient będzie mógł otworzyć wasz projekt w przeglądarce i po kliknięciu przycisku w prawym dolnym rogu (Add Comment) po prostu klikać na wybrane miejsca ekranu i dodawać komentarze. Dodawanie komentarzy będzie wymagało jednak rejestracji w serwisie (analogicznej do tej, którą przeszliśmy zakładając konto).
Po dodaniu komentarzy dostaniecie informację w panelu InVision i dodatkowo na maila – będziecie mogli zarządzać komentarzami – odpowiadać na nie, usuwać, oznaczać jako wykonane.
Jedyny minus tego rozwiązania jaki widzę to fakt, że klient musi założyć konto żeby móc komentować i musi oswoić się z obsługą tego narzędzia. Więc jeśli traficie na wyjątkowo oporną materię może się okazać, że to problemem nie do przeskoczenia.
Sama mam raczej pozytywne doświadczenia i jeśli wiem, że komuś może sprawić problem obsługa interfejsu na początku to po prostu pokazuję jak to wszystko ogarnąć (wystarczy kilka minut na Skype ze współdzieleniem ekranu albo screen z dwuzdaniową instrukcją jak dodawać komentarze). I jest to warte zachodu, bo ostatecznie porządkuje i upraszcza wymianę uwag.
A jak jest z wami? Macie swoje sposoby na udostępnianiu plików klientowi albo innym projektantom, by łatwo zbierać uwagi? Dajcie znać, jeśli macie coś godnego polecenia!
