Co to jest tworzenie szkieletów?

Jeśli kiedykolwiek zdarzyło Ci się projektować stronę internetową lub aplikację bez szkieletu, wiesz, dlaczego proces tworzenia szkieletu ma znaczenie. Jak bez szkieletów można sobie wyobrazić, co się chce osiągnąć? Jak ustala się kolejność przepływów użytkowników lub jak wiadomo, jakie treści mają się pojawiać na poszczególnych ekranach?

„To frustrujące, gdy ludzie komentują kwestie wizualne, podczas gdy tak naprawdę potrzebujesz opinii na wyższym poziomie. Czy to naprawdę najważniejsza kwestia?” – mówi Tom Lowry, dyrektor ds. rzecznictwa w Figma. Doskonały produkt i projekt strony internetowej zaczynają się od przemyślanego projektu szkieletu – zapoznaj się z poradami profesjonalistów i narzędziami do tworzenia szkieletów Figma, aby osiągnąć sukces na każdym etapie tworzenia szkieletu.

Co to jest szkielet?

Szkielety to podstawowe projekty, które pomagają zespołom uzgodnić wymagania, dzięki czemu rozmowy dotyczące projektowania UX są skoncentrowane i konstruktywne. Pomyśl o swoim szkielecie jako o szkielecie aplikacji, strony internetowej lub innego produktu końcowego. Twój szkielet pokazuje zespołowi projektowemu i interesariuszom podstawowe zarysy najważniejszych stron internetowych, komponentów i funkcji, w tym:

• Układy ekranów
• Paski nawigacji
• Komponenty projektu UX i UI
• Interaktywne elementy

Na wczesnych etapach projektowania szkice o niskiej wierności wykorzystują tekst lorem ipsum i proste ramki jako symbole zastępcze dla obrazów i filmów. Pomaga to zespołowi projektowemu, copywriterom i innym członkom zespołu skupić się na podstawowej funkcjonalności, aby obrać właściwy kierunek działania.

Rozpoczęcie pracy od czystego, oszczędnego projektu szkieletu daje również projektantom UI/UX możliwość wprowadzania zmian. Mogą zbierać wczesne opinie od użytkowników testujących podstawowe elementy UX/UI, nie rozpraszając ich szczegółami wizualnymi projektu. Zespoły projektowe testują różne koncepcje, ścieżki użytkownika i szablony, dążąc do uzyskania najlepszego środowiska użytkownika.

3 rodzaje projektów szkieletu

Możliwości projektowania UX mogą wydawać się nieskończone, ale większość projektów szkieletów stron internetowych dzieli się na trzy podstawowe poziomy wierności. W drodze do uzyskania produktu końcowego można wykorzystać wszystkie trzy rodzaje projektów szkieletu.

1. Szkielety o niskiej wierności to podstawowe szkielety skupiające się na układzie, nawigacji i architekturze informacji. Pokazują, jak będzie wyglądał interfejs, ilustrując przepływy użytkowników z kluczowymi elementami projektu interfejsu użytkownika. Fizyczne szkice na tablicach mogą być użyteczne na wczesnych etapach tworzenia szkieletu, chociaż nie zawsze łatwo je udostępniać, zapisywać lub przerabiać. Dzięki narzędziu do tworzenia szkieletu online Figma, możesz szybko tworzyć, udostępniać i iterować szkielety o niskiej wierności.
2. Szkielety o średniej wierności pomagają projektantom iterować i kształtować ostateczny projekt. Zespoły projektowe mogą dodawać adnotacje i treść, eksperymentując z różnymi podejściami do przepływów użytkownika i elementów projektu interfejsu użytkownika, mapując podstawową funkcjonalność i kluczowe interakcje. To umożliwia zespołom ustalenie ostatecznego szkieletu projektu przed dodaniem komponentów wizualnych.
3. Szkielety wysokiej wierności wyglądają jak wczesne modele produktów, zawierają interaktywne i wizualne elementy projektu, ale nie mają funkcjonalności prototypów niskiej jakości. Na tym etapie procesu projektowania możesz dodać elementy marki, takie jak czcionki, kolory i logo. W ten sposób można uchwycić wygląd i styl produktu końcowego do testów użytkowników.

Kiedy pominąć etapy tworzenia szkieletów

Wiele zespołów projektowych zakłada, że muszą zacząć od szkieletu o niskiej wierności, a następnie go rozwijać. Ma to sens podczas opracowywania nowych koncepcji produktów, ponieważ pozwala uzgodnić kluczowe elementy, wprowadzić zmiany, a następnie dodać szczegóły projektu wizualnego. Jednak według Toma istnieją argumenty przemawiające za przejściem od razu do projektowania szkieletów o wysokiej wierności.

„Jeśli masz już ustalony system projektowania, a projekt, który rozważasz, jest podobny do innych już istniejących, rozmowy prawdopodobnie nie będą zbytnio zbaczać z tematu szczegółów wizualnych projektu” – wyjaśnia Tom. „W takich przypadkach zbadanie pomysłu projektowego z większą dokładnością może być równie szybkie i równie skuteczne”.

7 najlepszych praktyk w projektowaniu szkieletów

Efektywny szkielet może przypominać prosty szkic na serwetce lub też skomplikowaną statyczną makietę produktu. Stosując te najlepsze praktyki w projektowaniu szkieletów, można szybciej uzgodnić kierunki działania z zespołem i przejść do realizacji najlepszego rozwiązania.

1. Określ swoje cele projektowe.

Zanim zaczniesz szkicować lub eksperymentować z szablonami szkieletów, określ swoje cele projektowe. Weź pod uwagę potrzeby użytkowników i działania, które chcesz, aby podjęli, aby je zaspokoić. Być może możesz pomóc użytkownikowi rozwiązać problem poprzez zakup przydatnego produktu lub zapisanie się do biuletynu edukacyjnego. Dostosuj działania zespołu projektowego do tego celu, aby projekty szkieletów stron internetowych przyczyniały się do realizacji celów użytkownika.

2. Wybierz odpowiedni rozmiar dla swojego szkieletu.

Twoje szkielety powinny odpowiadać wielkości ekranu, którego będzie używać docelowa grupa użytkowników. Oczywiście strona internetowa lub aplikacja będzie wyglądać inaczej na laptopie niż na urządzeniu mobilnym. Mając to na uwadze, standardowe rozmiary szkieletów dla różnych typów ekranów są następujące:

• Urządzenia mobilne: 393 piksele szerokości na 852 piksele wysokości
• Tablet 11 cali: 834 piksele szerokości na 1194 piksele wysokości
• Komputer: 1440 pikseli szerokości na 1024 piksele wysokości

3. Projekt szkieletu powinien być prosty.

Rozpocznij tworzenie szkieletu, używając kolorów w skali szarości, ograniczając czcionki i zastępując grafiki ramkami. Upewnij się, że Twój projekt spełnia podstawowe wymagania użytkowników. Jeśli skupisz się na szczegółach, takich jak błędy ortograficzne lub schematy kolorów, możesz przeoczyć wadę w środowisku użytkownika. W przypadku prostych projektów na wczesnym etapie wystarczające mogą być skrócone podglądy lub karty. Jednak w przypadku interfejsów bogatych w treści Tom zaleca stosowanie prawdziwych treści zamiast tekstu zastępczego „lorem ipsum”. „Kiedy zaczynasz stosować architekturę informacji w interfejsie użytkownika, wyświetlanie pozycji menu 1-2-3-4 nie jest zbyt przydatne” – wyjaśnia. „Należy użyć rzeczywistych treści.”

4. Zachowaj spójność projektu.

Szkielety nie powinny rozpraszać uwagi ani wprowadzać zamętu. Podobne komponenty powinny wyglądać tak samo we wszystkich szkieletach, aby były łatwe do uchwycenia, iteracji i kodowania. Nawet jeśli między dwoma powiązanymi komponentami występują niewielkie różnice, różne projekty mogą powodować niepewność wśród programistów na różnych stronach i w różnych iteracjach.

5. Spraw, aby nawigacja była intuicyjna

Przepływy użytkowników powinny być płynne i intuicyjne. Podczas stosowania architektury informacji do szkieletu strony należy rozważyć, gdzie może być konieczne wsparcie w postaci wskazówek dotyczących nawigacji i orientacji. Jeśli użytkownicy muszą korzystać z mapy strony, oznacza to, że należy poprawić nawigację i architekturę informacji.

6. Nie przywiązuj się zbytnio do swojego szkieletu.

Nawet szkielet o wysokiej wierności jest wciąż wersją roboczą, która wymaga zmian, aby stać się ostatecznym produktem. Gdy zespół projektowy sfinalizuje projekt szkieletu, nadchodzi czas na współpracę z programistami i innymi członkami zespołu kreatywnego w celu dodania funkcjonalności.

7. Wykorzystaj narzędzia do tworzenia szkieletów.

Zespoły projektowe potrzebują szkieletów, które mogą udostępniać, zapisywać i przekształcać w prototypy online. Zestaw do tworzenia szkieletów Figma zawiera narzędzia do projektowania typu „przeciągnij i upuść”, które ułatwiają zarówno początkującym, jak i profesjonalistom tworzenie dostosowanych, wysokiej jakości szkieletów.

Lista kontrolna projektu szkieletu strony internetowej

Proces tworzenia szkieletu pomaga w planowaniu, budowaniu i współpracy podczas cyklu projektowania i rozwoju — ale skąd wiadomo, kiedy jest on zakończony? Gdy już odhaczysz zadania z listy rzeczy do zrobienia związanych z tworzeniem szkieletu, Twój szkielet będzie gotowy do stworzenia modeli i prototypów o wyższej wierności.

Po ukończeniu szkieletu projektu wróć do pierwotnego zakresu prac. Teraz, gdy udało Ci się nakreślić zarys produktu końcowego, możesz dopracować swoje szacunki. Nawet jeśli to tylko szkic z elementami zastępczymi, Twój szkielet powinien pokazywać:

• Jakie ekrany są niezbędne, aby spełnić potrzeby użytkowników
• Przepływ użytkowników przez lejki konwersji
• Kwestie związane z użytecznością, w tym nawigacja i organizacja
• Główne cele i przepływy użytkowników dla każdego ekranu
• Kluczowe elementy projektu interfejsu użytkownika oraz zawartość i funkcje interaktywne na każdym ekranie
• Jak komponenty projektu łączą się, tworząc szablony ekranów

Kiedy zespół projektowy rozpoczyna proces projektowania, możesz nie wiedzieć dokładnie, jak powinien działać lub wyglądać końcowy produkt. Początkujący mogą ulec pokusie, aby pominąć tworzenie szkieletów i oprzeć się na istniejących modelach projektów — może to jednak skutkować mało inspirującym i mało pomocnym środowiskiem użytkownika. Szkielety skupiają uwagę twórców na potrzebach użytkowników i pomagają zespołom w koordynacji działań podczas całego procesu projektowania i rozwoju. Szkielet pozwala pracownikom zapoznać się z projektem na wczesnym etapie, zanim poświęcisz dużo czasu na dopracowanie szczegółów – mówi Tom. „Im wcześniej uda się skoordynować działania większej liczby osób w organizacji, tym więcej czasu można zaoszczędzić w przyszłości”.

Istnieje duża szansa, że końcowy produkt będzie wyglądał zupełnie inaczej niż początkowy szkielet projektu — i to dobrze! Tworzenie szkieletu daje Ci swobodę eksperymentowania, dokonywania zmian, próbowania nowych koncepcji i podejmowania ryzyka. Dzięki szkieletowej strukturze można łatwo modyfikować przepływy pracy i elementy projektu, które trudno byłoby dostosować na późniejszym etapie procesu projektowania. Dzięki procesowi tworzenia szkieletów metodą prób i błędów ostateczny projekt będzie wyglądał i działał lepiej.

Szkielety stawiają środowisko użytkownika na pierwszym miejscu, koncentrując kreatywną uwagę na elementach, które są niezbędne dla środowiska użytkownika, włączając:

• Przepływy i scenariusze użytkownika
• Poprawki układu środowiska użytkownika dotyczące potencjalnych problemów
• Funkcjonalność nawigacji i orientacji
• Hierarchia informacji wbudowana w szablony ekranów

Jak rozpoznać, że udało Ci się stworzyć idealny szkielet strony internetowej

Ocena skuteczności szkieletu bez danych ilościowych jest trudna, ale Tom twierdzi, że istnieje kilka wskaźników jakościowych, które można zastosować. Zaleca przeprowadzenie moderowanych testów użytkowników, aby sprawdzić, czy użytkownicy są w stanie przejść przez proces korzystania z serwisu bez instrukcji — zamiast „potykać się lub nie wiedzieć, co robić dalej”.

Kolejnym znakiem sukcesu szkieletu jest zgodność z oczekiwaniami interesariuszy. „Jeśli po sesji twórczej czujesz, że udało Ci się uzyskać oczekiwane opinie i możesz śmiało przejść do kolejnych etapów, to moim zdaniem Twój szkielet okazał się naprawdę udany” – mówi Tom.

Jednak jeśli interesariusze skupiają się na drobnych szczegółach lub kwestiach estetycznych zamiast na podstawowych potrzebach użytkowników, jego zdaniem „może to oznaczać, że należy obniżyć poziom wierności szkieletu”. Zmniejsz nieco poziom dopracowania udostępnianych artefaktów, aż uzyskasz potrzebną informację zwrotną.

Twórz i dostosowuj projekty szkieletów z Figma

Zespoły potrzebują szkieletów, aby wspólnie opracowywać projekty UX/UI i przeprowadzać burze mózgów — a zestaw szkieletów Figma pomoże Ci rozpocząć pracę. Możesz weryfikować pomysły i przyspieszać procesy projektowania na platformie współpracy Figma design platform oraz błyskawicznie rozpocząć projekty związane z projektowaniem stron internetowych dzięki bezpłatnemu zestawowi do tworzenia szkieletów stron internetowych firmy Figma.

Aby uzyskać więcej informacji i inspiracji, Tom zaleca nawiązanie kontaktu ze społecznością Figma. „Nasza społeczność dzieli się mnóstwem pomysłów dotyczących szkieletów stron i szablonów interfejsu użytkownika” – mówi.