Wszystko, co musisz wiedzieć o szkicowaniu UX

Jeśli wykonałeś jakąkolwiek poważną pracę twórczą, zbyt dobrze znasz blok twórczy. Czujesz się jak uderzenie w ceglaną ścianę: żaden z pomysłów, które jesteś w stanie sobie wyobrazić, nie jest wystarczająco dobry lub nie sprawdzi się w prawdziwym życiu.

Dla projektantów to uczucie jest aż nazbyt znajome. Jednak, jak każdy skomplikowany problem bez jasnego rozwiązania, inteligentny proces może spowodować wszystkie różnice. Tu właśnie pojawia się szkicowanie UX.

Szkicowanie UX jest kluczowym, ale często pomijanym aspektem projektowania doświadczeń użytkownika. Szkicowanie jest bardzo skutecznym sposobem komunikowania projektu, umożliwiając projektantom wypróbowanie wielu pomysłów i powtórzenie ich, zanim zdecydują się na jeden.

W tym poście zamierzam omówić wszystko, co musisz wiedzieć o szkicowaniu UX, w tym następujące punkty:

• Wprowadzenie do szkiców UX i makiety
• Podstawy, narzędzia i techniki szkicowania UX
• Wyjaśnianie szkiców za pomocą notatek, adnotacji, liczb
• Wskazówki i porady dotyczące szkicowania UX
• Mini-metody zaprojektowane w celu zwiększenia jakości i produktywności
• Wszystko, co musisz wiedzieć o Wireflows
• Krótki przewodnik po szkicowaniu przepływu UX

Szkicowanie UX to proces dwuetapowy

W projektowaniu należy uwzględnić wiele opcji, co skutkuje wyborem i wykonaniem tej najlepszej. Projektanci rozważają swoje możliwości, a następnie przystępują do dopracowywania szczegółów, dzięki czemu projektowanie UX jest procesem dwuetapowym:

• Generowanie pomysłów

Na początkowym etapie powstaje wiele pomysłów, ale ponieważ nie można ich w pełni ukształtować, często zdarza się, że niektóre elementy są niekompletne lub ich brakuje. Najważniejsze jest rozważenie różnych podejść i podjęcie decyzji, które jest najbardziej efektywne w kontekście zadania i różnych ograniczeń projektu.

• Dodawanie szczegółów i udoskonaleń

Krok po kroku ustalasz kilka obiecujących wariantów i przystępujesz do opracowywania szczegółów, przez co niektóre pomysły stają się nieodpowiednie.

Szkice UX i szkielety: wprowadzenie i klasyfikacja

Twoje makiety mogą się różnić w zależności od takich czynników, jak pożądany poziom szczegółowości, kolory i styl, czy zamierzasz je komuś pokazać i tak dalej.

Wyróżniłem następujące typy szkiców:

• Szkic: Generowanie pomysłów

To są wstępne szkice. Szczegóły niższego poziomu są po prostu odnotowywane. Stosowana jest ograniczona liczba kolorów.

Rysuję wiele podstawowych szkiców, aby rozpatrzyć problem pod różnymi kątami i rozważyć różne rozwiązania. Rysując takie szkice, staram się też generować jak najwięcej wariantów rozwiązań.

Na tym konkretnym etapie niekompletność uwalnia mój umysł, dlatego tak ważne jest, aby na tym etapie nie ugrzęznąć w drobiazgach. Moim celem jest wygenerowanie jak największej liczby pomysłów i wybranie najbardziej obiecujących.

• Model szkieletowy: specyfikacja, faza szczegółowa

Zwykle wybieram obiecujące szkice i przeglądam szczegóły, po czym wybieram najlepszy wariant i dopracowuję go bardziej szczegółowo.

Nie oznacza to jednak każdego szczegółu . Oczywiste rzeczy można po prostu odnotować. Co więcej, niektóre aspekty będą trudne do opisania na papierze.

Na tym etapie rysuję wszystkie ważne szczegóły , ale jeszcze nie rysuję szkieletów w Balsamiq. Gdy wszystko jest już zrobione na papierze, zaczynam rysować w Sketchu.

Narzędzia cyfrowe zapewniają o wiele większą swobodę twórczą niż papier i można łatwo skierować uwagę na drobiazgi. Na przykład możesz skupić się na „polerowaniu pikseli” zamiast na projektowaniu.

• Szkic projektu wizualnego

Jest to rzadko stosowane podejście, ale czasami może być pomocne. Różne rozwiązania wizualne są rozważane na wczesnym etapie projektu, ale stworzenie cyfrowych szkiców dla nich wszystkich może zająć dużo czasu. Dlatego najpierw rysuję szkice projektowe na papierze, aby rozważyć różne opcje i wybrać kierunek projektowania wizualnego.

• Podział komponentów/elementów

Technikę tę uważam za przydatną, gdy mam już ogólny pomysł i myślę o określonej funkcjonalności strony lub integralnych częściach komponentów interfejsu. Rysuję różne elementy strony, wchodząc w szczegóły, a następnie rysuję różne możliwe pozycje elementów strony.

Elementy, nawet te najprostsze, muszą mieć stan; można nacisnąć przycisk i ma blok tekstowy, który może być pusty lub nie. Im jest bardziej złożony, tym więcej ma stanów.

Pierwsze kroki z podstawami

• Przygotuj swoje narzędzia. Znajdź najwygodniejsze z możliwych miejsce, duży stół z dużą ilością miejsca. Weź dużo papieru i przygotuj kilka pisaków i markerów.
• Rozgrzać się. Aby się przygotować, polecam narysować kilka linii, kółek, podstawowe szablony i ikony.
• Określ swoje cele. Zdecyduj, co chcesz narysować. Ustaw swój cel i zdecyduj, jaką historię chcesz opowiedzieć. Określ żądany poziom szczegółowości. Zdecyduj, czy jesteś gotów dużo rysować.
• Zdefiniuj grupę docelową. Jeśli robisz to dla siebie, nie musisz się martwić o wygląd swojego szkicu. Jeśli jednak zamierzasz pokazać swoje rysunki klientowi, upewnij się, że masz trochę więcej czasu na dodanie większej ilości szczegółów do swojego szkicu.
• Ustaw ramy czasowe. Ustalenie, ile czasu jesteś gotowy przeznaczyć na szkicowanie, powiedzmy 30 minut, pomoże Ci skupić się na pracy.

Teraz wszystko gotowe i możesz zacząć:

• Narysuj krawędzie. Narysuj ramki, okno przeglądarki lub telefonu, część interfejsu i tak dalej.

• Dodaj największe lub podstawowe elementy: menu, stopkę, główną treść.

• Dodaj szczegóły. Dodaj odpowiednie szczegóły, ale na tym etapie zachowaj prostotę.

• Dodaj adnotacje i notatki. Są one wymagane tylko wtedy, gdy planujesz udostępniać szkice. Mogą być jednak przydatne, nawet jeśli robisz je tylko dla oczu.

• Szkicuj alternatywy. Naszkicuj kilka szybkich alternatyw dla swojego rozwiązania.

• Wybierz najlepsze rozwiązanie. Wybierz najlepsze opcje.

• Dodaj cień i fazę. Jest to szczególnie ważne w przypadku udostępniania. Dodaj cień, aby szkic był atrakcyjny wizualnie, co jest ważne, jeśli planujesz udostępnić go członkom zespołu i/lub klientom.

• Zapisz szkic. Zrób zdjęcie lub umieść je w folderze. Mam na stole kilka papierowych tac na szkice.

• Dzielić. Zwykle korzystam z jednej z następujących metod udostępniania:
  • Skanuj szkice za pośrednictwem Evernote i udostępniaj bezpośredni link innym członkom zespołu lub interesariuszom.
  • Zrób zdjęcie i prześlij do InVision.
  • Przesyłaj i mapuj obrazy do Realtimeboard.
  • Lub po prostu e-mailem ze zdjęciem.
• Przejrzyj szkice i dodaj notatki. Zrób sobie przerwę, a chwilę później wróć do swoich szkiców. Spójrz na nie jeszcze raz. Czy szkic nadal ma dla Ciebie sens? Dobry szkic musi być łatwy do naśladowania.

Wyjaśnianie szkiców za pomocą dodatkowych elementów

Znajdź lub narysuj odpowiedni szkic, a następnie dodaj do niego następujące szczegóły:

1. Tytuł. Czasami dodanie tytułu jest dobrą opcją. Napisz opis i datę, jeśli to konieczne, u góry szkicu. Tytuł pomoże ci zrozumieć, na co patrzysz i czy szkic jest odpowiedni. Jest to szczególnie przydatne, jeśli masz dużo szkiców lub zamierzasz pokazać innym.

2. Adnotacje. Adnotacje to nazwy i uwagi umieszczone w pobliżu elementu w celu wyjaśnienia jego zawartości lub innych atrybutów. Dodają szczegóły, które wyjaśniają inne elementy i zwykle są trudne do narysowania. Na przykład może to być nazwa bloku, niektóre szczegóły interakcji, wyjaśnienie obrazu, kilka pomysłów na przyszłe odmiany projektu i tak dalej. Możesz sprawdzić jeden z moich przykładów, aby zobaczyć, jak wygląda szkic adnotacji.

3. Liczby. Ponumeruj elementy szkicu lub same szkice. Możesz zdecydować, jak je uporządkować (np. według przepływu interakcji, kolejności, w jakiej je utworzyłeś itp.). Może to być również przydatne podczas dyskusji (zwłaszcza dyskusji zdalnych), ponieważ Twoi współpracownicy i klienci mogą po prostu wskazać numer szkicu w swojej opinii, a Ty zrozumiesz, do którego z nich odnoszą się ich komentarze.

4. Strzałki. Możesz użyć strzałek, aby wskazać przejścia między ekranami. Mogą być również używane do łączenia różnych części szkiców, wskazywania sekwencji działań i tak dalej. Ponieważ znaczenie strzałki może się różnić, tuż nad strzałką możesz dodać opis lub wyjaśnienie tego, co strzałka ma oznaczać. Oto przykład podstawowego szkicu przedstawiającego przejście i kilka różnych stanów.

5. Notatki. Podobnie jak adnotacje, notatki służą do wyjaśniania pojęć. Notatki różnią się jednak od adnotacji rozmieszczeniem. Nie są one dołączone do elementu ani nie znajdują się w pobliżu opisywanego elementu, podobnie jak w tym przykładzie. Notatki można umieszczać na górze lub na dole strony. Mogą nawet opisywać elementy, które nie zostały uwzględnione w projekcie, pytania, które możesz mieć, ogólne wyjaśnienia, nienaszkicowane pomysły i tak dalej.

6. Gesty. Gesty są istotne w przypadku projektowania urządzeń dotykowych. Rysowanie gestem ręki może wymagać praktyki. Istnieje kilka wariantów gestów służących do wskazywania różnych rodzajów czynności, dlatego lepiej zawczasu zdecydować, jak wyznaczyć konkretną czynność (o ile nie jest to oczywiście oczywiste) i poćwiczyć jej rysowanie.

7. Opinia. Możesz otrzymać sugestie dotyczące naprawy lub ulepszenia szkicu po pokazaniu go innym lub po ponownym spojrzeniu na niego samodzielnie. Często przydatne jest oznaczenie takiej opinii innym kolorem, aby ułatwić odróżnienie opinii od oryginalnego szkicu.

Możesz użyć różnych kolorów dla różnych typów elementów. Czasami używam koloru czarnego do rysunków, niebieskiego do linków, ciemnozielonego do notatek, czerwonego do tytułów i informacji zwrotnych. Spróbuj użyć różnych kolorów w swoich szkicach, ale upewnij się, że wybór kolorów jest spójny!

Bardziej szczegółowe porady i wskazówki

1. Nie martw się o jakość. Nie patrz na szkice na Dribbble; dotyczą czegoś zupełnie innego . Pamiętaj, że głównym celem szkiców jest pomoc w jaśniejszym myśleniu, znajdowaniu lepszych rozwiązań i oszczędzaniu czasu.

2. Ćwiczyć. Na początek możesz spróbować narysować kilka aplikacji. Otwórz aplikację internetową lub mobilną i spróbuj skopiować ekran, opisując elementy w notatkach. Kiedy masz trochę wolnego czasu, poćwicz rysowanie podstawowych elementów konstrukcyjnych swoich projektów. Ogólnie praktyka czyni mistrza. Za jakiś czas stanie się częścią twojego projektanta.

3. Kup folder. Często nie pracuję w biurze, ale raczej w kawiarni lub domu. Szkice papierowe są bardzo podatne na uszkodzenia, więc kup prosty folder, aby były bezpieczne i zdrowe.

4. Zabierz ze sobą narzędzia, gdziekolwiek jesteś. Dzięki temu możesz w dowolnym momencie utrwalić swój pomysł na papierze, w przeciwnym razie możesz po prostu stracić myśl lub nie być w stanie zapamiętać jej wystarczająco szczegółowo. Zawsze mam przy sobie notes, kilka kartek A4 i długopisy.

5. Podziel się z innymi. Bardzo ważne jest, aby angażować innych ludzi i komunikować się z zespołem. Zaangażowanie innych i uzyskanie ich opinii, zwłaszcza na wczesnym etapie, pomaga zaoszczędzić czas i zasoby na dłuższą metę. Możesz również zachęcić innych do narysowania sposobu, w jaki wyobrażają sobie projekt.

6. Tace na papier. Pomyśl o umieszczeniu tac papieru na stole roboczym. Na przykład mam trzy z nich: do zadań przychodzących, do szkiców i czystych kartek papieru.

7. Eksperymentuj i dostosowuj. Moje rekomendacje oparte są na moim doświadczeniu. Z czasem dowiesz się, co najbardziej Ci odpowiada; jakie metody, jaka kolejność kroków, co dokładnie wypełnia Twój potencjał twórczy. Dostaniesz się tam tylko wtedy, gdy będziesz ciągle próbował czegoś nowego, dlatego ważne jest, aby eksperymentować z różnymi formatami, stylami i wypróbowywać nowe szablony.

8. Użyj szablonów. Szablony zaoszczędzą czas i domyślnie uwzględnią ograniczenia formatu, uwalniając więcej czasu na skupienie się na tym, co jest ważne.

Dodatkowe mini-metody ulepszania szkiców

Niekoniecznie są to wskazówki i triki, ale zbiór metod, narzędzi i sugestii, które powinny zwiększyć Twoją produktywność lub poprawić jakość szkiców.

1. Utwórz tablicę szkicu. Jedną z największych zalet używania pióra i papieru zamiast cyfrowego narzędzia do szkicowania jest to, że można go przykleić do ściany. Wszyscy w Twoim zespole mogą to zobaczyć i uczestniczyć (chociaż polecam organizowanie sesji powtórkowych).
   
   • Sam zobaczysz swoje szkice, a to pobudzi twoje myślenie i pozwoli ci zobaczyć duży obraz, nie pojedyncze fragmenty, ale cały system. Zobaczysz interakcje między częściami i ich wzajemne dopasowanie.
     
   • Utwórz tablicę do szkicowania — dołącz szkice z tablicy. Jeśli w Twoim biurze nie ma tablicy, możesz użyć podwójnej taśmy samoprzylepnej lub kartek samoprzylepnych, aby przykleić szkice do ściany. Jeśli nie chcesz przyklejać się do ściany, zamiast tego możesz znaleźć duży kawałek tekturowego papieru. Zdecydowanie polecam używanie desek do szkicowania, ponieważ są one jednym z najlepszych narzędzi do projektowania.
2. Użyj tablicy. Tablica to świetne narzędzie do rysowania. Ma szereg zalet:
   • Jest to współpraca i łatwo jest zaangażować innych członków zespołu w dyskusję, a także w rysunek. Nawet jeśli ich pomysły nie pasują do siebie, zrozumiesz ich sposób myślenia i pomoże ci być na tej samej stronie.
     
   • Markery nie pozwalają skupić się na szczegółach, trzeba myśleć o sprawach ogólnych. Szkice są otwarte na interpretację.
     
   • Tablica jest łatwa do czyszczenia i wprowadzania poprawek.
     
   • Jest dużo miejsca i bez problemu można przemyśleć cały przepływ systemu.
     
   • Za pomocą magnesów możesz dołączać szkice, wydruki i materiały referencyjne.

3. Prototypy. Stwórz klikalny prototyp, aby ocenić swój projekt. Postaraj się uzyskać informację zwrotną na temat niektórych elementów. Działa to szczególnie dobrze, gdy używasz szablonów — twoje szkice mają ten sam rozmiar. Oczywiście znacznie łatwiej będzie narysować szkice o tym samym rozmiarze, jeśli użyjesz szablonu. Postaram się to jeszcze bardziej ułatwić, udostępniając kilka szablonów, które możesz pobrać i używać: Mobile, Przeglądarka wielookienkowa, Przeglądarka przewijania, Persony.

   

4. Użyj drukarki i skanera. Narysuj ramkę ręcznie (możesz użyć linijki, aby dokładniej narysować), a następnie po prostu zeskanuj ją za pomocą skanera lub aplikacji mobilnej i wydrukuj. Możesz edytować swój szablon w edytorze obrazów przed wydrukowaniem. Możesz usunąć niepotrzebne szczegóły lub powielić niektóre elementy. Możesz także wydrukować gotową stronę witryny, zdjęcia i inne elementy opisowe. Możesz wkleić wycięcia do swojego szkicu.

5. Użyj Evernote do skanowania. Evernote to świetne narzędzie do projektowania. Możesz w nim przechowywać i udostępniać swoje szkice, tworzyć motywy i używać znaczników do organizowania szkiców. Szczególnie imponujące są możliwości trybu „Skaner”. Umieszczasz przed nim swój szkic, a on go „skanuje”, dzięki czemu otrzymujesz kopię szkicu. Następnie możesz zaprosić swoich współpracowników do Evernote i przekazać im link do swojej notatki. Ponieważ istnieje aplikacja mobilna na tablety i telefony, zawsze możesz mieć swoje szkice pod ręką.

6. Szkicowanie hybrydowe. Aby nadać swoim szkicom trochę życia i realizmu, możesz połączyć je ze zdjęciami. Oznacza to, że musisz zrobić zdjęcie, a następnie narysować na nim jakąś historię z elementami interfejsu. Może to również pomóc w zauważeniu pewnych problemów z interakcją i szczegółów.

7. Śledzenie świata rzeczywistego. Jeśli chcesz stworzyć storyboard, zilustrować doświadczenie w określonym kontekście (np. osoba korzystająca ze smartfona na dworcu autobusowym), musisz uwzględnić wizerunki ludzi, miejsc i różnych rzeczywistych obiektów. Mogą być trudne do narysowania, zwłaszcza jeśli nie opanowałeś umiejętności rysowania, ale oto prosta wskazówka: zrób zdjęcie obiektu lub sytuacji, a następnie uzyskaj kontur kluczowych obiektów za pomocą edytora obrazów. Otrzymany kontur możesz później wykorzystać w swoich szkicach. Oczywiście, jeśli masz tablet i rysik , będzie to jeszcze prostsze.

Wireflow: opisywanie przepływu i rozgałęzień systemu

Wireflow jest zasadniczo sekwencją przepływu systemu, ekran po ekranie, z rozgałęzieniami i punktami decyzyjnymi. Powinniśmy zastanowić się, w jaki sposób użytkownik podchodzi do swojego zadania, w jaki sposób przechodzi z ekranu na ekran i jak jego ogólne wrażenia z produktu na przestrzeni czasu.

Wireflow lub to, co rysujesz i sposób, w jaki jest połączone, można zorganizować według następujących podejść:

• Sekwencja. Sekwencja to prosta podróż, ekran po ekranie. Może to być również historia z punktami decyzyjnymi; pokazujesz nie tylko podróż, ale także punkty decyzyjne i różne ścieżki, które użytkownik może wybrać. Możesz pokazać strukturę interakcji z ekranem.
• Zmiany stanu. Przedstawiają różne stany ekranu niektórych elementów oraz warunki lub akcje, które powodują przejścia między tymi stanami.
• Ekran a elementy ekranu. Możesz narysować całe ekrany lub rozważyć mikrointerakcje i interakcje.
• Platformy. Możesz rozważyć jedną platformę lub wiele platform.
• Zakres. Czy przedstawisz część podróży użytkownika czy całą podróż? Interakcja jednego użytkownika z systemem czy interakcje wielu użytkowników?

Generalnie staram się zdefiniować następujące typy wireflow, w zależności od organizacji i praktycznego zastosowania:

1. Mapowanie ogólnego przepływu i przepływu na wysokim poziomie. Szybko naszkicuj przesunięcia ekranu i narysuj ogólną podróż związaną z użytkowaniem produktu. Tutaj możesz uwzględnić kontekst i opcjonalnie możesz pokazać interakcję użytkownika. Na przykład usługa zakupów eCommerce to dość długa podróż, która może obejmować wiele kroków: jak użytkownik znalazł sklep, kroki, które przeszedł, aby zamówić produkt, jak zapłacił i tak dalej.

2. Przepływ ekranu. Koncentruje się to na określonym przepływie funkcjonalnym przez system. Może to być mała prosta sekwencja ekranów lub podróż z rozgałęzieniami. Na przykład użytkownik przesyłający zdjęcia lub wideo.

3. Schemat nawigacji. Narysuj ekran i opcje, które zawiera. To nie ma na celu odwzorowania podróży. Ten krok zawiera informacje, które pokazują opcje, które użytkownik może wybrać, wskazówki dla użytkowników i różne części aplikacji. Schemat nawigacji tworzę zwykle na początku projektu. Służy do zrozumienia, jak powinna być skonstruowana nawigacja (jakie punkty należy uwzględnić, ile poziomów jest potrzebnych).

4. Stany ekranu. Narysuj ekran lub stany elementów (przykładem może być okno dialogowe przesyłania pliku). W takim przypadku na przykład ekran będzie miał następujące stany:

   • Pusty
   • Użytkownik ściąga plik w aktywnym obszarze
   • Trwa przesyłanie pliku
   • Plik został przesłany
   • Tam jest błąd

Szkicowanie przepływu UX: szybki przewodnik

Proces projektowania wireflow jest podobny do modelu wireframe. Wiele kroków jest podobnych lub identycznych, ale istnieją pewne ważne różnice:

Określ, co musisz narysować. Zdecyduj dokładnie, co chcesz narysować (np. ogólną historię lub fragment swojego projektu). Chcesz generować różne opcje lub przemyśleć szczegóły jednej podróży? Zdecyduj, czy pokażesz komuś swoje szkice, czy nie.

Zdefiniuj klatki kluczowe i przejścia, które należy uwzględnić w rysunku. Jeśli dodasz wszystkie ekrany i przesunięcia, Twój przebieg będzie bardzo długi i złożony. Zastanów się, które kluczowe ekrany powinieneś pokazać, aby przekazać istotę interakcji, która pomaga wykonać Twoje zadanie. To samo dotyczy przesunięć ekranu. Musisz wybrać, które zmiany będą bardziej przydatne w wyrażaniu swojego pomysłu. Sprawdź ten przykład w celach informacyjnych.

Określ punkt początkowy. Jaki będzie początek Twojej podróży? Możesz zacząć od punktu wejścia, tj. początku podróży, na przykład tego, co widzi użytkownik, gdy loguje się do Twojej aplikacji. Alternatywnie możesz zacząć od punktu środkowego lub od najciekawszych/trudnych/ważnych ekranów lub etapów procesu. Możesz też zacząć od końca, z wynikiem końcowym osiągniętym przez użytkownika, i opisać kroki, jakie wykonał, aby dojść do tego punktu.

Zdecyduj, co będzie dalej. Po narysowaniu kroków początkowych zdecyduj, co dalej, odpowiadając na następujące pytania:

• W którą stronę ten krok prowadzi użytkowników?
• W którą stronę chcesz, żeby poszli?
• Co muszą zrobić, żeby się tam dostać?

Naszkicuj alternatywne trasy, wpisy. Pomyśl o alternatywnych sposobach, w jakie użytkownik może przejść do każdego kroku:

• Co się stanie, jeśli połączenie internetowe użytkownika ulegnie awarii?
• Jakie mają inne opcje?
• Co może się nie udać w przypadku błędu użytkownika lub aplikacji, co się stanie?
• Co się stanie, jeśli użytkownik zamknie aplikację na tym etapie?
• Gdzie użytkownik zacznie następnym razem, gdy uruchomi aplikację?

Pomyśl o alternatywnych przepływach. Przeanalizuj historię, zaprojektuj alternatywny przepływ i naszkicuj go.

Dodaj adnotacje, notatki, szczegóły. Dodaj elementy wyjaśniające, które wyjaśnią nieoczywiste szczegóły.

Zapisać. Wykonaj cyfrową kopię szkicu.

Dzielić. Udostępnij szkic (np. przez Evernote lub InVision).

Niezbędne porady i wskazówki dotyczące szkicowania UX Flow

Najpierw narysuj schemat. Jeśli masz zamiar przemyśleć dość długą podróż, lepiej zrób szybki szkic, aby zrozumieć, ile potrzebujesz miejsca i nie przegapić ważnych kroków lub szczegółów. Trudno byłoby później dodać je do papierowego szkicu.

Nie twórz ogromnej mapy ze zbyt dużą ilością szczegółów. Szkice papierowe nie mają przycisku cofania , więc wprowadzanie zmian będzie trudne. Możesz narysować szczegóły zbyt dokładnie, a to odciągnie Twoją wyobraźnię od generowania różnych wariantów na wysokim poziomie. Zamiast tworzyć ogromny schemat, który ilustrowałby cały system, spróbuj skupić się na kluczowych skryptach i spróbuj poświęcić osobną stronę dla każdego skryptu.

Wytnij niepotrzebne detale i połącz różne poziomy szczegółowości. Nie trzeba rysować wszystkich opisów interakcji, dlatego staraj się wykorzystywać tylko kluczowe elementy swojej podróży. Rysując ogromną mapę interakcji, nie musisz szczegółowo analizować każdego ekranu. Niektóre ekrany mogą być po prostu reprezentowane przez kilka kwadratów, a inne, kluczowe ekrany, mogą być szczegółowo opracowane.

Wypróbuj różne rozmiary papieru. Wypróbuj różne formaty papieru, A3 lub A5. Rozmiar arkusza papieru ograniczy Cię i wpłynie na Twój proces na różne sposoby. Mały arkusz papieru nie pozwoli Ci dodać wielu ekranów lub szczegółów, ale może pomóc Ci skoncentrować się na głównych pomysłach. Za pomocą dużej kartki papieru można narysować jedną wielką podróż, dużo szczegółów i dodatkowe notatki. Alternatywnie możesz umieścić na nim kilka małych podróży.

Pomóc mogą również karteczki samoprzylepne. Możesz także spróbować użyć karteczek samoprzylepnych. Możesz narysować na nich oddzielne ekrany lub przypisy, albo możesz narysować dodatkowe stany elementów szkicu. Ich zaletą jest to, że można je łatwo wymienić, można też po prostu przenieść notatkę w inne miejsce. Na przykład, jeśli przepływ się zmienił, możesz po prostu zmienić kolejność swoich notatek post-it.

Użyj szablonów. Staraj się używać szablonów. Zaoszczędzą czas i umożliwią tworzenie bardziej klikalnych prototypów wysokiej jakości.

Spróbuj użyć tablicy. Tablica ma wiele zalet. Staje się coraz bardziej popularny, ponieważ pozwala na odrysowanie ogromnej podróży z wieloma gałęziami. Możesz narysować wiele elementów aplikacji na papierze, a następnie po prostu przymocować je do tablicy za pomocą magnesów, dodając je do podróży.

Szkicowanie cienia. Cienie mogą pomóc w zaznaczeniu ważnych elementów i dodają atrakcyjności wizualnej Twojemu szkicowi. Używam trzech różnych rodzajów cieni:

• Linie biegnące w kierunku światła - to nie zawsze wygląda pięknie, ale możesz użyć podziałki i podnieść przedmioty na różne „wysokości”.
• Obrysowanie jakiejś części ciemniejszym kolorem (tylko spód lub spód i prawa strona)
• Korzystanie ze znacznika Pro (lub jego odpowiednika w aplikacji, której używasz do rysowania)

Elementy rysunkowe. Sprzeciw w stylu „Nie umiem tak dobrze rysować” może stłumić twoją inicjatywę. Właściwie jest to łatwiejsze niż się wydaje. Nawet najbardziej złożone szkice składają się na ogół z kilku podstawowych bloków, jak w tym przykładzie. Jeśli potrafisz narysować punkt, linię, trójkąt, kwadrat i okrąg, masz podstawowe klocki, których potrzebujesz, aby narysować wszystko do swojego szkicu.

Kładąc wszystko razem. Podstawowe elementy, przyciski, przyciski radiowe i listy rozwijane składają się z podstawowych elementów. Po nauczeniu się rysowania tych elementów możesz je łączyć i rysować złożone bloki i komponenty.

Zakończyć

Celem tego posta nie było stworzenie ostatecznego, uniwersalnego przewodnika po szkicowaniu UX lub szkicowaniu w ogóle, ponieważ projektanci mają różne potrzeby i osobiste preferencje.

Jak widać, to dużo do omówienia. Projektanci używają niezliczonych narzędzi, technik i podejść do tworzenia szkiców UX i jest to raczej subiektywne. Niektóre techniki mogą, ale nie muszą działać dla różnych osób pracujących nad różnymi projektami. Jeśli dopiero zaczynasz, zdecydowanie powinieneś poeksperymentować. Ciągła praktyka i eksperymentowanie pomogą Ci znaleźć to, co działa dla Ciebie.

Do Ciebie należy wybór wskazówek i technik, które będą najlepiej pasować do Twojego projektu i Twojego podejścia do projektowania. Czy masz jakieś dodatkowe wskazówki dotyczące szkicowania dla innych użytkowników UX? Zapraszam do podzielenia się nimi w sekcji komentarzy.

• • •

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