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ą.
źródło
Odpowiedzi:
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.
źródło
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/
źródło
Pencil Project to dodatek do Firefoksa, który robi ładne i proste makiety.
źródło
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? ” )
źródło
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.
źródło
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”).
źródło
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.
źródło
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.
źródło
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.
źródło
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)
Papier i długopis / ołówek (zwykle do burzy mózgów dla mnie)
Statyczne pliki HTML / CSS / JS na dysku
Narzędzia do rysowania wektorowego - Illustrator / Inkscape / Visio / PowerPoint / Impress
Narzędzia grafiki rastrowej - Photoshop / Gimp
Sztuka ASCII ;-)
źródło