Jak mam tworzyć prototypy interfejsu użytkownika lo-fi (nieinteraktywne)?

Obecnie pracuję nad zebraniem kilku podstawowych prototypów, częściowo w celu zebrania wymagań, a częściowo w celu zaprojektowania końcowego interfejsu użytkownika.

W tej chwili próbuję zbudować ekran za pomocą notatek Post-it, z żółtymi notatkami dla informacji i różowymi dla akcji (przycisków lub menu). Chodzi o to, że możesz łatwo przenosić, usuwać i dodawać informacje. Ale jestem pewien, że istnieją bardziej wydajne metody.

Jaki jest zalecany sposób dla programistów, aby efektywnie tworzyć nieinteraktywne prototypy interfejsu użytkownika?

I dlaczego?

Wypróbowałem kilka wersji długopisu, papieru i karteczek samoprzylepnych, a one spadły jak ołowiany balon (prawdopodobnie moje umiejętności rysowania). W końcu użyłem Balsamiq , który do tej pory jest lubiany przez większość użytkowników i dostają, że jest to prototyp. Niestety, niektórzy ludzie nadal mają problemy z pomysłem, że najpierw należy dowiedzieć się, co aplikacja powinna zrobić za pomocą prototypów lo-fi i naprawdę chcą „zobaczyć coś na ekranie”, zanim cokolwiek zrobią.

Wolę tablicę.

Ułatwia zmianę w trakcie podejmowania decyzji bez przerysowywania całości. Łatwo jest udostępniać go innym (pobliskim) programistom. Za pomocą karteczek samoprzylepnych lub innych kolorów można łatwo dodawać adnotacje.

Makiety Balsamiq są zwykle pierwszym portem zawinięcia, prawie tak szybkim, jak użycie długopisu i papieru i wielokrotnego użytku.

Ponadto możesz dodać pewien stopień interaktywności, jeśli chcesz, łącząc na przykład strony.

http://balsamiq.com/

Pencil Project to dodatek do Firefoksa, który robi ładne i proste makiety.

Ołówek zapewnia różne wbudowane kolekcje kształtów do rysowania różnego rodzaju interfejsu użytkownika, od komputerów stacjonarnych po platformy mobilne. Począwszy od wersji 2.0.2, Ołówek jest dostarczany ze wstępnie zainstalowanymi szablonami interfejsu użytkownika Android i iOS. To sprawia, że ​​jeszcze łatwiej rozpocząć protypowanie aplikacji po prostej instalacji.

Popularne funkcje rysowania są również zaimplementowane w Ołówku, aby uprościć operacje rysowania ...

Używam kombinacji MS Paint i Visual Studio. Używam VS, aby przeciągnąć / upuścić wszystkie formanty, które chcę, do formularza, a następnie zrzut ekranu do farby MS, aby zmienić ich układ, aż podoba mi się wygląd.

W ten sposób mogę użyć prostych, znanych, darmowych i zawsze dostępnych narzędzi (dla mnie), aby wykpić mój interfejs użytkownika, a klient może zobaczyć interfejs użytkownika, który prawdopodobnie będzie wyglądał po zakończeniu aplikacji. Ponadto często VS kończy dla mnie początek mojego projektu.

Edycja: odpowiedź Toby'ego zaprowadziła mnie do Balsamiq , i jest to teraz moje główne narzędzie wyboru makiet UI do prezentacji innym ludziom.

Nadal czasami wyciągam MSPaint lub długopis / papier, ale zwykle dzieje się tak tylko wtedy, gdy szkicuję podstawowy projekt interfejsu użytkownika na własne potrzeby lub gdy chcę przedstawić klientowi dwie opcje ukończonego ekranu (np. „Czy chcesz przyciski Tutaj czy Tutaj? ” )

Wygląda na to, że używasz dobrych metod, ale napotykasz opór, gdy ludzie akceptują użyteczność szybkiego prototypowania. Wszyscy uwielbiają kodować, ale jeśli za pół godziny nadal będą walczyć z JScrollBars, a ty wygenerowałeś 12 makiet, mogą zrozumieć, że siła tych narzędzi jest w szybkiej iteracji .

To powiedziawszy, różne podejścia low-fi mają różne zalety:

• Prototypowanie tablicy jest przydatne, ponieważ każdy może wziąć udział i pomaga ugruntować pomysły, ale jest to tylko narzędzie do dyskusji. Chcesz coś o krok dalej, jeśli chcesz powtórzyć projekt, choćby dlatego, że trudno jest usunąć stary znacznik. ;)

• Prototypowanie papieru jest przydatne, ponieważ ludzie rozumieją, że jest ono nietrwałe i otwarte na zmiany, i można je szybko iterować, a nadal można uzyskać bardzo dobre wyniki. Wykonaj test użyteczności z niektórymi użytkownikami na papierowym prototypie, a możesz uzyskać świetne opinie na temat projektu bardzo szybko, przy dość niskim koszcie. Ludzie naprawdę się angażują, kiedy widzą i czują interfejs na papierze.

• Balsamiq to skrót do szybkiego tworzenia prototypów papieru, które można ponownie wykorzystać. Drukuję zrzuty ekranu i używam ich jako papierowych prototypów. Używam go również podczas spotkań, aby pomijać pomysły, jakie mamy - podobnie jak w przypadku prototypowania tablicy. Użyłem do tego również Visio i OmniGraffle.

• Prototypy do wycinania i wklejania są przydatne do iteracji istniejącego projektu - zrób zrzut ekranu, pokrój go w edytorze obrazów i miksuj i dopasowuj za pomocą nowych elementów sterujących (z Balsamiq lub z innego miejsca). Po raz kolejny Twoim celem jest szybka iteracja prototypu, a nie coś, co wygląda dobrze.

Nigdy nie robię prototypów z użytkownikami. Robię to z zespołem projektowym, w oparciu o dane użytkowników, które posiadamy. Użytkownicy nie są projektantami ; jeśli potraktujesz ich jako projektantów, skończysz z wodnistym sosem pomidorowym, gorzką kawą (dzięki Malcolm Gladwell) i samochodem The Homer. Zbierz wkład użytkownika do swojego projektu i użyj go, aby udoskonalić projekt z zespołem projektowym.

Moje pierwsze makiety są zawsze ołówkiem, papierem lub tablicą, ale kiedy podstawy zostaną przybite, zwykle przechodzę do HTML. Mam kilka zastępczych obrazów, które po prostu mówią „Nagłówek”, „Baner”, „Obraz”, „Wykres” i tym podobne. Kilka prostych CSS do rozplanowania rzeczy w pewnym sensie i gotowe. Odrobina JS przypisana do kontrolki może dać ci pozory funkcjonalności, a ludzie po prostu lepiej ją „rozumieją”.

Jedyny problem polega na tym, że jestem prawdopodobnie najgorzej żyjącym projektantem interfejsu użytkownika na świecie i czasami muszę przypominać ludziom, że po prostu zbieram wymagania, nie pokazując im, jak będzie wyglądać ukończona rzecz. Często ustawiam tło na różowe lub coś w tym stylu, więc za każdym razem, gdy ktoś pyta „Czy to musi być różowy?” Mogę przeciwstawić się: „To tylko makieta, prawdziwa rzecz będzie wyglądać inaczej” (lub „Będziesz musiał porozmawiać o tym z projektantem”).

Najpierw używam długopisu i papieru, a następnie po narysowaniu interfejsu użytkownika kilka razy, próbuję zrobić to w programie PowerPoint 2 lub 3 razy. Posiadanie 5 lub 6 iteracji przed przejściem do właściwego edytora pomaga mi ograniczyć niepoprawne interfejsy użytkownika (takie jak generowanie treści Y na podstawie pola tekstowego X, gdy użytkownik jeszcze nawet nie widział X). Widzę to jako szansę na natychmiastowe uwolnienie się od głupków.

Pióro i papier / tablica, a także możesz używać Visio lub czegoś podobnego (Visio jest wyposażony w szablony interfejsu użytkownika do typowych elementów sterujących). Czasami robię zdjęcia istniejącego (podobnego) interfejsu użytkownika, który mamy, a następnie wycinam i wklejam nowy interfejs za pomocą programu do malowania, takiego jak Paint.NET.

Kilka razy robiłem szybkie prototypowanie w Delphi. Ułatwia to bardzo szybkie złożenie razem układu ekranu, znacznie szybciej niż w programie PowerPoint lub Visio. Powstały plik exe można dołączyć do wiadomości e-mail bez żadnych zależności. Ponieważ używam go do prototypowania aplikacji internetowych, nie ma niebezpieczeństwa pomylenia prototypu z wersją w połowie ukończoną.

Próbowałem zrobić to samo z Sencha Ext Designer, ale system układu Ext JS jest trudniejszy w użyciu i wydawało mi się, że to bardziej obciążenie niż wygoda w szybkim powtarzaniu pomysłów.

Nie zawsze używam tego samego podejścia. Niektóre techniki, których używam to (w przybliżonej kolejności częstotliwości):

• Tablica (do interaktywnego prototypowania / dyskusji. Zrób zdjęcie później!)

• Projektant GUI w stylu RAD (Visual Studio, NetBeans, Delphi)

  • Bądź w tym dobry, a może stać się jednym z najszybszych sposobów tworzenia prototypów aplikacji „Windows, widżetów i formularzy”. Bonus: prototypy mogą wyglądać naprawdę profesjonalnie, w zależności od tego, jak szybko je poskładasz. Czasami mogą nawet służyć jako punkt wyjścia do stworzenia prawdziwej rzeczy po zatwierdzeniu prototypu.
    
    

• Papier i długopis / ołówek (zwykle do burzy mózgów dla mnie)

• Statyczne pliki HTML / CSS / JS na dysku

  • Wyobrażam sobie, że aplikacja do projektowania WYSIWYG nie zaszkodziłaby tutaj, ale zwykle po prostu hakuję surowy HTML. Zresztą nie robię ich dużo.
    
    

• Narzędzia do rysowania wektorowego - Illustrator / Inkscape / Visio / PowerPoint / Impress

• Narzędzia grafiki rastrowej - Photoshop / Gimp

• Sztuka ASCII ;-)