26 kroków do perfekcyjnego projektu produktu
Przez ostatnie cztery lata projektowałem kokpity menedżerskie i aplikacje oraz nauczyłem się radzić sobie z różnymi działami i wykorzystywać ich wiedzę, aby projekt był bardziej wydajny.
Dzisiaj podzielę się wszystkimi krokami, które wprowadziłem do mojej codziennej rutyny, i uważam, że jestem lepszym projektantem.
Wstępne przetwarzanie
1. Zdobądź jak najwięcej informacji (poproś o trzy przykłady)
Dla mnie nic nie zapewnia większej jasności niż prawdziwy działający przykład. Kiedy pracuję z nowym klientem lub na zupełnie nowej stronie docelowej produktu, uważam, że najłatwiejszym punktem wyjścia jest poprosić klienta o dostarczenie trzech lub czterech stron inspirujących, ponieważ to naprawdę pomaga obu stronom. Umożliwienie klientowi wprowadzenia pomysłów na stół daje możliwość łatwego zrozumienia, co lubią i czego oczekują od gotowego projektu.
Jeśli pracujesz z wieloma zespołami, powinieneś starać się spędzać z twórcami tyle czasu, ile robisz z kolegami z pracy projektantów. Nauczyłem się, że kluczem do podjęcia skutecznej decyzji projektowej jest zapewnienie jak największej rozmowy z zespołem programistów. W moim przypadku zdarzały się przypadki, w których znaleziono rozwiązanie problemu, którego sam nie mogłem wymyślić.
Celem jest wyeliminowanie tylu pytań, ile to możliwe, zanim przejdziesz do rozwoju.
2. Dowiedz się więcej o personach
Na początku muszę powiedzieć, że byłem sceptycznie nastawiony do personów, ale teraz wszystko ma dla mnie sens.
Tak więc, kompletnie kontrastując z moim starszym procesem, widzę, jak osoby są bardzo ważne podczas pracy nad funkcjami produktu, szczególnie gdy rozwiązanie ma wiele różnych przypadków krawędzi. Pomaga zrozumieć, do kogo naprawdę projektujesz. Zamierzam mieć około czterech do pięciu osób.
3. Ustal dokładne cele - co dokładnie powinniśmy śledzić?
Myślę, że większość projektantów / klientów ignoruje ten krok, ale jednym z najważniejszych aspektów projektowania dla obu stron jest zrozumienie celów projektowanego produktu. Mamy tendencję do przeskakiwania wprost do pikseli i szybkiego wypełniania interfejsu użytkownika projektu. Jeśli jest to zupełnie nowa witryna lub nowa funkcja, pamiętaj o wyznaczeniu jasnych celów, które chcesz osiągnąć jako pierwsze.
Ponieważ wszystko można śledzić, powiedz dokładnie o punktach, które zamierzasz śledzić. Mogą na przykład obejmować nowe rejestracje, liczbę klientów korzystających z usługi Paypal lub zakupy kartami kredytowymi. Zawsze upewnij się, że wiesz, jak wysoko celujesz na początku!
(Będziesz tego potrzebował mimo to do konfigurowania ścieżek na Mixpanel później w tym procesie.)
4. Skonfiguruj folder projektu i zacznij budować moodboard
Jest wiele miejsc do inspiracji - Dribbble , Behance , Pttrns itd. Łatwo jest znaleźć podobne projekty do tego, nad którym pracujesz. Ponadto może istnieć rozwiązanie problemu, którego doświadczasz i próbujesz go rozwiązać.
Kiedy rozpoczynam pracę nad nowym projektem, zawsze konfiguruję folder z folderami o nazwie - Pliki źródłowe , Ekrany i eksport , Inspiracje i zasoby . Zapisuję wszystko, co znajduję w Internecie, w folderze Inspiration, aby móc z niego później korzystać, aby stworzyć podstawowe tablice. W tym folderze można znaleźć wszystko, od wtyczek, próbek, a nawet pełne studia przypadków z Behance.
Niska wierność
5. Tablica
Jeśli chcemy dodać nową funkcję lub przeprojektować proces, usiądziemy i wszyscy na spotkaniu zaczną szkicować pomysły na tablicy, papierze, a nawet na iPadzie. Ta akcja pozwala nam umieścić wszystkich w zespole w pozycji projektanta. Później otrzymujemy dwie opcje projektu, aby zobaczyć, który z nich działa najlepiej.
Zawsze staramy się przejść przez całe doświadczenie i omówić większość skrajnych przypadków w tej części procesu. Naprawdę ważne jest, aby zająć się nimi teraz, a nie na etapie projektowania lub, co gorsza, w fazie projektowania. Wtedy możesz stracić dużo czasu i energii.
6. Mapuj wszystkie ekrany (jakie dane użytkownik musi wprowadzić)
Nadszedł czas, aby wyjść poza tablicę i wyświetlić listę wszystkich danych wejściowych i historii użytkownika. Napisz, co dokładnie użytkownik powinien wstawić na określony ekran i jak użytkownik może osiągnąć pożądane cele.
7. Zapisz wszystkie możliwe stany
Ponieważ wszystkie kokpity menedżerskie, aplikacje lub strony internetowe mają różne stany, jest to kolejny ważny krok, o którym nie należy zapominać.
Podczas projektowania musimy mieć pewność, aby rozwiązać wszystkie z nich. Miło jest mieć błyszczące wykresy i fajne zdjęcia profilowe w naszych plikach Sketch lub PSD. Jednak najprawdopodobniej użytkownicy zobaczą drugą stronę Twojej aplikacji. Zwłaszcza, gdy przychodzą do twojego produktu. Trzeba być przygotowanym. Poniżej znajduje się przykład tego, jak radzimy sobie z pustymi stanami w jednym z naszych komponentów danych.
8. Przygotuj swój pierwszy diagram
Wszystko to prowadzi do końcowej części niskiej wierności. Dzięki wynikowi zadania tablicy teraz znamy wszystkie możliwe stany, dane wejściowe użytkownika i cele. Podsumowując wszystkie interakcje, tworzę diagram i szczerze mówiąc zmieniłem styl robienia tego wiele razy: Przechodzenie z plików szkicu z zrasteryzowanymi układami do prostokąta symbolizującego każdą stronę z ich nazwiskami poniżej. Biorąc to pod uwagę, proces zawsze był bolesny, zazwyczaj kończę w sytuacji, w której chcemy zmienić lub dodać coś później w procesie. Dzięki tym rozwiązaniom jestem zwykle zmuszony do zrobienia jeszcze wielu kroków; takie jak zmiana pozycji linii, strzał i obrazów.
Ostatnio używałem Camunda Modeler , który nie jest dokładnie narzędziem do projektowania; to prosta aplikacja do tworzenia schematów technicznych. Co brzmi dziwnie, ale ta aplikacja została opracowana, aby pomóc Ci w tworzeniu podstawowych schematów. Co najważniejsze, wszystko co stworzone jest całkowicie skalowalne. Możesz łatwo przeciągnąć i upuścić dowolny punkt, a on automatycznie utworzy dla Ciebie linie i strzałki. Możesz także wybierać spośród różnych typów punktów, które mogą być pomocne w wyróżnianiu, gdy na przykład użytkownik otrzymuje wiadomość e-mail od interkomu. Camunda eksportuje do SVG, co ułatwia koloryzowanie punktów śledzenia w Sketch.
Projekt pracy
9. Moodboard
Mogę zacząć od stworzenia tablicy nastrojów, ponieważ zbieram wszystkie obrazy do folderu Inspiration. Używam tablic nastroju głównie do omawiania moich myśli z kolegami i opisywania niektórych wizualnych pomysłów, zanim zacznę od procesu pikselowego.
10. Pierwszy projekt
Projektowanie jest zawsze procesem ciągłym. Będziesz dużo powtarzać po drodze, by osiągnąć świetny wynik. Pierwszy szkic to także sposób na zebranie opinii. Nie musisz przyjść do perfekcyjnego projektu w pikselach, aby zacząć otrzymywać informacje zwrotne od swoich kolegów z drużyny, klientów lub potencjalnych użytkowników. Aby uzyskać pierwsze przemyślenia i rozpocząć dyskusję, zwykle łączę ekrany z naszych obecnych projektów. Dzięki temu możemy zacząć grać z naprawdę wyglądającymi projektami w mniej niż jeden dzień. Możesz zrobić pierwszy prosty prototyp, aby sprawdzić, czy wszystko dobrze się ze sobą łączy.
11. Napisz swoją kopię
Kopiowanie jest jednym z kluczowych aspektów decyzji użytkowników i uważam go za kluczowy element projektu. Nie ma nic gorszego niż przyjemny projekt z mylącymi oknami dialogowymi, w których użytkownicy mają trudności z odnalezieniem następnego kroku.
12. Pierwszy test wewnętrzny
Przy pierwszym projekcie możesz szybko stworzyć prototyp Podziwiać lub Invision . To jest coś, co zacząłem ostatnio robić i okazuje się, że jest to kolejny niesamowity aspekt walidacyjny. Dzięki prototypowi możesz teraz łatwo ustanowić połączenie z 3 lub 4 osobami ze swojego zespołu i udostępnić im prototypowy link i spróbować zadać kilka pytań podczas testowania konkretnych przepływów / scenariuszy.
W ten sposób możesz łatwo przetestować swoje umiejętności zadawania pytań i oczywiście przetestować decyzje dotyczące projektu na prawdziwych użytkownikach, nie martwiąc się o zmarnowane zasoby i czas. Mam tendencję do wybierania osób, które nie angażują się zbytnio w rozwój deski rozdzielczej. Staraj się także unikać oglądania kogoś, kto już wcześniej miał okazję zagrać z prototypem.
13. Etykieta
Wszyscy wiemy, jak trudno jest utrzymać porządek. Jak dostarczyć kolejną funkcję. Zazwyczaj prowadzi to do niechlujnych szkiców lub plików PSD. Wiele się nauczyłem o różnicach między pracą w charakterze jednego projektanta w startupie, pracy w zespołach lub pracy nad własnymi produktami cyfrowymi.
Kiedy pracujesz w zespole, pomyśl o swoich PSD tak, jakbyś tworzył je dla kogoś innego. Używam zasady, że jeśli masz więcej niż 8 warstw w folderze, powinieneś utworzyć nowy.
Znalazłem jedną świetną wtyczkę do Sketch, która zaoszczędziła mi wiele godzin podczas pracy nad zestawami UI: Zmień nazwę .
Wskazówka: Umieść wszystko na płótnie. Zawsze starałem się zaprojektować ładne nagłówki, podczas gdy reszta płótna była biała. Podczas projektowania nauczyłem się najpierw umieszczać wszystkie treści na miejscu - po prostu baw się układem i typografią. O wiele łatwiej jest zaprojektować ładne detale i bawić się całym pomysłem z zawartością.
14. Utwórz elementy interfejsu użytkownika i zacznij grać z klockami Lego
Prawdopodobnie spóźniam się na imprezę, a to już brzmi nieaktualnie, pisząc to. Powód, dla którego nie zrobiliśmy żadnego szkieletu w tej podróży, jest prosty. Szkic 39 zawiera coś, co uznałem za niesamowite, a mianowicie "kształty o właściwościach zmieniających rozmiar". To sprawia, że projektowanie jest łatwe dla każdego w zespole. Nasz plik Szkic to teraz czysty przeciągnij i upuść. Możesz łatwo dać każdemu z członków zespołu puste płótno i mogą tworzyć niemal hi-fiction wersje. Dzięki temu jesteśmy w stanie pominąć wszystkie narzędzia do wireframingu i zacząć od prawie prawdziwych pikseli.
To także idzie w parze z tym, że jesteśmy w stanie faktycznie przekonwertować szkielety na prawdziwe projekty. Każdy PM może stworzyć szkielet, a następnie mogę go łatwo przejąć i przekształcić na hi-fidelity.
Zasoby i dostawa
Kiedy skończysz z projektowaniem i iteracją na podstawie pierwszej opinii, jeszcze nie skończyłeś. Nadszedł czas, aby przekazać swoje projekty inżynierom / programistom.
15. Dane techniczne
Jednym z moich głównych celów jest to, aby zawsze móc komunikować swoje decyzje z zespołem i być w stanie zmniejszyć trudności dla naszych programistów tak bardzo, jak tylko mogę, aby zapewnić im najlepsze możliwe zasoby. To dla mnie zdecydowanie najważniejsza część mojej pracy jako projektanta.
Ponieważ udokumentowaliśmy całą interakcję i mamy wszystko gotowe od samego początku naszego procesu, tworzenie specyfikacji to bułka z masłem. Mam tendencję do pisania specyfikacji w Dokumentach Google lub pod ekranami w plikach Szkiców. Miło jest obsługiwać projekty z objaśnieniami wszystkich funkcji, aby każdy mógł pobrać plik w przyszłości.
16. Schemat
Ta technika jest dobra do drukowania wzorów i omawiania ich z zespołem. Ale obecnie myślę, że są lepsze opcje. Takich jak przygotowanie ostatecznego prototypu.
17. Ostateczny prototyp
Jedną z kluczowych rzeczy jest dla mnie zawsze pełna interakcja w prototypie. Zwykle kończę na posiadaniu 3-5 prototypów w drodze do ostatniej z tych małych sesji z członkami zespołu lub do pokazania konkretnych przepływów. Mam tendencję do przygotowywania wszystkich stanów w Szkicie w jednym obszarze roboczym, a następnie duplikowania tych obszarów roboczych, aby każdy stan był gotowy podczas eksportowania.
Wspaniale jest dodawać komentarze do części projektów, aby rozszerzyć specyfikację o wiele bardziej, aby nawet copywriter mógł łatwo przejść i sprawdzić rzeczywiste piksele i przepływy, jeśli każda kopia i dialog działają zgodnie z wymaganiami.
18. QuickTime Video> Notatki
Gdy nie przedstawiam rzeczy na Hangoucie zespołowi lub klientowi, wysyłam film wideo z moim udziałem, przechodząc przez prototyp i wyjaśniając wszystko, co zaprojektowałem. To miłe potwierdzenie dla mnie przed każdą prezentacją, że znam odpowiedź na każde pytanie i ewentualne fantazyjne interakcje, które postanowiłem zaprojektować. Może być również dobrze stosowany podczas pracy w odległych zespołach. Każdy ma możliwość odtworzenia całego myślenia o interakcji w dowolnym momencie.
19. Animuj
Jako miły końcowy dotyk możesz użyć Po efektach lub Zasada . Dobrze jest wyjaśnić, w jaki sposób chcesz się przenieść.
20. Styleguide
Innym ważnym punktem dla inżynierów jest wiedza, jak będą reagować w różnych sytuacjach. Pomyśl o stanach błędów wejścia lub miejscu wyświetlania komunikatów o błędach. Podobnie będzie wyglądać stan wyłączenia przycisku przesyłania, gdzie umieścić spinner itp.
Inżynierowie bardzo łatwo przechodzą przez obszar symboli Symbols i elementy stylu jeden po drugim, zanim zaczną kodować wszystkie ekrany dzięki temu, że plik Szkicu jest klockami Lego.
Ostateczne testy
Ponieważ skończymy z przekazaniem naszych projektów inżynierom, jesteśmy w stanie skupić się na ostatniej części procesu - testowaniu naszych decyzji!
21. Inspectlet / HotJar
Po przekształceniu projektów w działający kod, nie zapomnij podać swojego Inspectlet lub HotJar Fragmenty JS. Zawsze jestem podekscytowany (lub sfrustrowany), aby zobaczyć, jak użytkownicy poruszają się po naszym panelu i co robią na mojej stronie portfolio. Inspectlet jest niesamowity podczas przechwytywania całej sesji użytkownika. Działa również świetnie przy większych projektach.
Wyposażony jest w łatwe filtrowanie "/ strona", które pomaga oglądać sesje danej funkcji lub przepływu.
22. Mixpanel
Mixpanel działa świetnie dla sprawdzania poprawności naszych celów (tych, które ustawiliśmy na samym początku naszego procesu). Mixpanel pomaga sprawdzić, ilu użytkowników wykonuje określone przepływy. Ilu użytkowników spadło przed założeniem konta. Ile osób przeszło z głównej strony docelowej do sklepu i do naszego najcenniejszego produktu.
23. Google Analytics
Nie jestem w stanie kodować wielkich rzeczy, ale przynajmniej jestem w stanie pracować z plikami CSS i prostym kodem. Ostatnio byłem zainteresowany, aby zobaczyć, gdzie użytkownicy klikają i patrząc na mapy termiczne Hotjar, więc zdecydowałem się również skonfigurować podstawowy moduł do śledzenia kliknięć w Google Analytics. Możesz łatwo śledzić wszystkie kliknięcia użytkownika w witrynie.
Pomaga mi to łatwo mapować zachowanie użytkownika. Na przykład dowiedziałem się, że ludzie użyli górnej nawigacji na mojej stronie 5x więcej niż podświetlony link w tekście wstępnym. Niestety nie liczy się z kliknięciami użytkowników z AdBlockiem.
24. Domofon
Kiedy uzgodniliśmy nasze początkowe przepływy, mówiliśmy o części przepływów, z których użytkownik otrzymuje wiadomość e-mail Awiofon . Naszym obowiązkiem jest zapewnienie, że cała kopia i sama wiadomość mają sens i są rzeczywiście przydatne dla odwiedzających. Upewnij się, że Twoje e-maile kierują użytkownika do Twoich trafnych wyników i zawsze staraj się udostępniać konkretne artykuły pomocy technicznej i informacje, jak kontynuować przepływ.
Kilka ostatnich słów
25. Pozostaw Dribbble w tyle
Z tego, czego się nauczyłem i jak mój projekt zmienił się w ciągu ostatnich 4 lat, doszedłem do punktu, w którym Dribbble niekoniecznie jest miejscem, w którym chcesz stworzyć swoje projekty. Zawsze starałem się mieć ładne piksele z seksownymi zdjęciami profilu, ale to nie jest to, czego naprawdę potrzebują i będą używać prawdziwi użytkownicy.
Oto przykład, po lewej stronie zobaczysz coś, co zaprojektowałem dla Dribbble. Po prawej stronie zobaczysz coś, co zaprojektowałem, kiedy spędziłem trochę czasu oglądając ludzi edytujących ich profile i zdałem sobie sprawę, że moja wizja nie dostarcza tego, czego potrzebują.
Możesz otrzymać 500 sympatii dla jasnej zwariowanej animacji ziemniaka lub pizzy z przesuwaniem, ale najważniejsze jest to, że Twoi użytkownicy znajdą sposób na zarządzanie częstotliwością firmowych e-maili lub filtrowanie ich skuteczności.
[- Ten post został pierwotnie opublikowany na średnim , opublikowano ponownie za zgodą autora. -]