Otwarcie Pon - Sob 09:00-18:00
Email info@westom.pl Zadzwoń +48 530 825 825
Otwarcie Pon - Sob 09:00-18:00
Email info@westom.pl Zadzwoń +48 530 825 825

Szkielety w UX

Szkielety są etapem przejściowym pomiędzy architekturą informacji, a ostateczną wersją gotowego produktu.

Szkielety przybierają formę diagramów i przedstawiają schemat witryny lub aplikacji. Tak jak architekt tworzy projekt budynku, tak w tym przypadku projektant tworzy projekt witryny. Dzięki szkieletom można przeanalizować treść, nawigacje czy interakcje. Nie przedstawiają szczegółowo każdego elementu witryny, raczej skupiają się na jej ogólnym schemacie.

Szkielety są doskonałym narzędziem projektowym. Tworzy się je na wczesnym etapie projektu, w którym jest miejsce na popełnianie błędów, testowanie i wprowadzanie poprawek. W tym miejscu zmiany nie są tak kosztowne, jakie były by w późniejszej fazie projektu.

Co najczęściej przedstawiają szkielety?

  • Nawigację witryny.
  • Treść – dobrze, jeśli wiadomo, jaka treść znajdzie się na witrynie. W wielu przypadkach jednak prace nad treścią na tym etapie jeszcze się nie zaczęły i trzeba przedstawić, jeśli to możliwe, reprezentatywna próbkę treści. Jeśli i to jest niemożliwe, przedstawiamy fikcyjna treść.
  • Wezwania do działania.
  • Elementy multimedialne.
  • Rozmieszczenie reklam.
  • Układ stron.
  • Wyrazistość elementów.
  • Do szkieletów zaleca się dołączenie komentarzy dotyczących funkcji i treści.

Czego nie przedstawiają szkielety?

  • Projektu grafiki.
  • Rozmiaru i rodzaju czcionki.
  • Ogólnego wyglądu witryny.

Wczesne testowanie

Szkielety pokażą Ci, które elementy witryny działają poprawnie, a które wymagają jeszcze wprowadzenia zmian. I nie ma tu znaczenia, w jakiej formie dokonujesz oceny – czy są to testy użyteczności, rozmowy z zespołem, klientem czy testowanie wśród innych ludzi z Twojego otoczenia.

Najlepszym sposobem testowania szkieletów są badania z udziałem użytkowników. W końcu to prawdziwi użytkownicy będą w przyszłości korzystać z witryny i pod ich kątem ją projektujesz. Zaletą tego rodzaju badań jest możliwość przedstawienia użytkownikom ogólnych szkieletów. Mogą być one narysowane nawet odręcznie, nie ma potrzeby zagłębiania się w szczegóły i tracenia czasu na doszlifowywanie projektu w programie komputerowym. Nie na tym etapie.

W trakcie testów zobaczysz, czy użytkownicy rozumieją nawigację i wezwania do działania. Jeśli prezentujesz w szkieletach treść, która w rzeczywistości będzie na witrynie lub chociaż jej reprezentatywną próbkę, to także otrzymasz informacje zwrotne na jej temat. Może się okazać, że będzie ona odpowiadać użytkownikom i konieczne będzie ewentualne zmienienie kilku słów, a może się zdarzyć, że będziesz musiał stworzyć treść od nowa. To samo tyczy etykiet przycisków i stylu grafiki. Może się zdarzyć, że będziesz musiał wprowadzić spore zmiany. Dlatego tak ważne są informacje zwrotne od użytkowników, na tak wczesnym etapie projektu. Teraz jeszcze jest czas na zmiany bez większych kosztów i czasu.

Prezentacja szkieletów klientom

Szkielety są świetną formą prezentowania projektu witryny klientom. Wiadomo, że nie są jeszcze ostatecznym produktem, jednak zawierają wszystkie niezbędne elementy, aby mieć ogólny obraz gotowego produktu. Klienci mogą przedstawiać swoje uwagi na temat nawigacji, interakcji oraz treści. Mogą się skupić na tym, co w tym momencie jest istotne. Ich uwaga nie będzie rozpraszana przez zbędne na tym etapie szczegóły.

Przedstawiając szkielety klientom zobaczysz, w jakim stopniu realizujesz wymagania biznesowe. Czasami się o tym zapomina na etapie tworzenia szkieletów – wysiłki są skoncentrowane głównie na użytkownikach.

Mając w ręku szkielety łatwiej Ci będzie rozmawiać z różnymi przedstawicielami zespołu. W końcu wszystkie główne założenia są na nich zaprezentowane i każdy specjalista będzie mógł się bez problemu odnieść do projektu ze swojej perspektywy. Zabierz szkielety ze sobą udając się na rozmowę do takich specjalistów, jak:

  • menedżer projektu,
  • menedżer produktu,
  • programiści,
  • graficy,
  • analitycy biznesowi,
  • specjaliści od pozycjonowania,
  • specjaliści od treści,
  • marketingowcy,

 

Prezentacja szkieletów projektantom grafiki i programistom

Szkielety służą jako streszczenie projektu dla grafików oraz programistów. Grafików warto zaangażować już w trakcie tworzenia szkieletów. Ich rola nie ogranicza się tylko do nadania koloru całej witrynie. Powinni być także współtwórcami szkieletów. Jeśli będą od początku wiedzieć jak powstaje ogólny szkielet witryny, łatwiej im będzie zaprojektować odpowiednią szatę graficzną. Szkielety nie powinny ograniczać projektantów grafiki. Wręcz przeciwnie, powinny dać im swobodę tworzenia.

Podobnie należy postępować w przypadku programistów. Zaangażuj ich w proces tworzenia szkieletów. Tak będzie im łatwiej zrozumieć, dlaczego akurat takie, a nie inne wprowadziłeś rozwiązania.

Tworzenie szkieletów, jak i cała praca nad projektem, powinno być pracą zespołową. Każdy w mniejszym, bądź w większym stopniu, ma swój wkład w rozwijany produkt. Nie da się rozgraniczyć poszczególnych etapów projektu. Nikt nie może zająć się swoją częścią, bez uprzedniej konsultacji z innymi. Wszystko w projekcie jest ze sobą połączone, dlatego tak ważna jest komunikacja i praca zespołowa. Każdy z członków zespołu musi rozumieć, dlaczego zostały podjęte akurat takie, a nie inne decyzje projektowe, bo każda decyzja ma wpływ na pracę, którą sami wykonają.

Najlepszy czas na tworzenie szkieletów

Zaleca się tworzenie szkieletów w każdym projekcie. Każdy projekt jest inny i na pewno będą się znacznie od siebie różnić. Czasami bardziej będą przypominać szkice, czasami prototypy. Tworzenie szkieletów bezpośrednio w HTML zaciera granicę między szkicami, szkieletami, prototypami i ostatecznymi wersjami witryny. Szkielety to tania i bardzo przydatna forma testowania treści i interakcji, dlatego warto ja wykorzystać w każdym projekcie.

Projektowanie szkieletów

Przed rozpoczęciem pracy nad szkieletami zbierz wszystkie niezbędne informacje:

  1. Stwórz dokładny obraz użytkowników produktu i określ, jakie mają cele. Wykorzystaj do tego modele zadań, ścieżki użytkowników, mapy doświadczeń użytkowników oraz stworzone wcześniej persony.

 

  1. Zrozum cele biznesowe projektu. Umożliwiają to rozmowy z interesariuszami oraz warsztaty ze zbierania wymagań.

 

  1. Przygotuj wcześniej architekturę informacji – wpływa ona bezpośrednio na nawigację na witrynie.

 

  1. Skorzystaj z pomysłów projektowych, które powstały w trakcie warsztatów z generowania pomysłów czy szkicowania.

Zanim jeszcze przystąpisz do właściwego tworzenia szkieletów, zastanów się na poniższymi kwestiami:

  • Punkty wejścia i wyjścia dla poszczególnych ekranów – odpowiedz sobie na pytania: Jak użytkownicy dostali się na witrynę? Z naturalnych wyników wyszukiwania z wyszukiwarek? Z portali społecznościowych? Z for internetowych? Poprzez kliknięcie linku w innych miejscach w sieci? Ze strony głównej witryny? Zobacz, czy użytkownicy podążają główną ścieżką użytkownika. Przeanalizuj ich cała drogę poruszania się na witrynie, od wejścia, aż do wyjścia.

 

  • Cele użytkowników na witrynie – co użytkownicy chcą osiągnąć na konkretnej stronie, a co klienci chcą by użytkownicy zrobili? Jakie są cele biznesowe dla konkretnej strony, a jakie cele użytkowników? Treść i układ projektujesz z myślą o użytkownikach, a wezwania do działania pod kątem celów biznesowych klienta. Lista potrzeb pozwoli Ci stworzyć skuteczny ekran.

 

  • Odbiorcy szkieletów – zastanów się, komu będziesz prezentował szkielety. Ta wiedza pozwoli Ci stworzyć najbardziej użyteczne rozwiązania. Każdy członek zespołu może potrzebować szkieletów do czegoś innego.

 

  • Menedżer projektu może ich potrzebować do zatwierdzenia projektu – w tej sytuacji nie skupiaj się na szczegółach.
  • Programiści – szkielety mogą też służyć jako specyfikacja projektu, zatem programiści muszą dobrze zrozumieć poszczególne interakcje.
  • Graficy – daj im dużo swobody, aby ich praca nie polegała tylko na kolorowaniu witryny.
  • Specjaliści od treści – możesz dać im wskazówki, ale wielu z nich woli działać całkowicie samodzielnie.
  • Specjaliści od UX – mogą chcieć zmodyfikować szkielety albo wykorzystać je w testach użyteczności.
  • Menedżerowie ds. marketingu – interesują ich nowatorskie pomysły, aby móc zaprojektować skuteczną reklamę marketingową.
  • Prawnicy – będą chcieli poznać treść i interakcje, aby sprawdzić, czy wszystko przebiega zgodnie z prawem.

 

  • Kontekst korzystania z produktu – obecnie użytkownicy nie korzystają już tylko z komputerów stacjonarnych do surfowania po sieci. Strony internetowe można przeglądać także na tabletach, telefonach czy smartfonach i to w różnej orientacji – pionowej i poziomej. Wielkość każdego ekranu jest inna, dlatego dla każdego z osobna trzeba zoptymalizować projekty. Jest to spore wyzwanie dla projektanta.

 

Tworząc szkielety powinieneś uwzględnić ekrany różnej wielkości. Możesz zastosować dwa podejścia. W pierwszym możesz stworzyć szkielet każdej strony w różnych wymiarach. W drugim podejściu tworzysz szkielet dla standardowego monitora, a programiści sami podejmą odpowiednie działania, by stworzyć strony dopasowane do różnej wielkości ekranów.

 

To, które podejście wykorzystasz, zależy od przeznaczenia szkieletów w danym projekcie. Jeśli planujesz wykorzystać szkielety w testach z udziałem użytkowników na komputerach stacjonarnych (czy laptopach), utwórz szkielety dopasowane do tradycyjnych monitorów. Jeśli jednak planujesz przetestować szkice z udziałem użytkowników na urządzeniach mobilnych, lepiej pod tym kątem przygotować szkice.

 

Tworzenie treści

Przyszedł czas na rozpoczęcie właściwej pracy nad szkieletami. Na początek przygotuj listę treści, jaka ma się znaleźć na konkretnym ekranie. Weź pod uwagę takie kwestie, jak architektura informacji, wymagania biznesowe, wymagania użytkowników, punkty wejścia i wyjścia. Na liście nie może zabraknąć elementów nawigacji oraz treści, które umożliwią osiągniecie celów i poruszanie się odpowiednimi ścieżkami.

Nie wystarczy samo określenie treści, jeszcze musisz ustalić priorytety. Każdą pozycję na liście treści przeanalizuj pod kątem celów, jakie są stawiane konkretnym ekranom. Kolejność treści dla sklepu internetowego oferującego odzież damską może prezentować się następująco:

  • Nagłówek, stopka (w tym logo), nawigacja, numer telefonu – zbudujesz w ten sposób zaufanie użytkowników do firmy.
  • Sezonowe i dostosowane do najnowszych trendów produkty – wzmocnisz wizerunek firmy, a klienci będą zadowoleni, że na bieżąco są zaspokajane ich potrzeby.
  • Dane o możliwości bezpłatnej dostawy i zwrotu – szczególnie zachęcająca opcja dla nowych użytkowników.
  • Wyróżnione produkty na stronie głównej – jeśli jakiś produkt jest szczególny, godny polecenia, to warto się nim pochwalić.
  • Firmowy blog – regularne publikowanie postów związanych z branżą firmy oznacza, że zna się na rzeczy.
  • Odnośnik do zapisania się do newslettera – pomoże osiągnąć najważniejsze cele biznesowe.

Dlaczego określenie priorytetów treści jest tak ważne?

W przypadku projektowania szkieletów na ekrany urządzeń mobilnych, przygotowanie listy treści wraz z określonymi priorytetami to już połowa sukcesu – wiadomo, jakie bloki z treścią i w jakiej kolejności mają się znaleźć na stronie. Graficy mogą wyróżnić wizualnie te miejsca, a programiści mogą przystąpić do przygotowania odpowiedniego kodu. Lista ułatwia również dokonywanie wszelkich wyborów, może np. któraś z funkcji nie jest za bardzo istotna, a trzeba poświęcić jej dużo czasu. W takiej sytuacji programiści mogą zająć się nią na samym końcu.

Rysowanie

Tworzenie szkieletów możesz od razu zacząć w specjalnie do tego stworzonym programie lub możesz to zrobić odręcznie. Rób tak, aby Tobie było wygodniej. Może się okazać, że nastąpi zmiana kolejności podczas rysowania. Kolejność ustalona na liście treści może się mieć nijak do konieczności logicznego pogrupowania elementów na tworzonym szkielecie. Jest to całkowicie naturalna rzecz i nie ma powodów do zmartwień.

Tworzenie szkieletów będzie jeszcze prostsze, gdy odpowiesz sobie na kilka pytań:

  • Jak architektura informacji przekłada się na strukturę nawigacji?
  • Czy projekt strony ułatwia użytkownikom poruszanie się na witrynie? Jeśli tak, to w jaki sposób?
  • Jakie są najważniejsze wezwania do działania? Czy ich widoczność jest wystarczająca? Czy można ją zwiększyć?
  • Co powinno się znaleźć na początku strony?

Pytań może być jeszcze więcej i nie martw się, jeśli nie odpowiesz na nie wszystkie od razu.

Teraz dla każdego elementu z listy treści, w ustalonej kolejności utwórz blok w szkielecie:

  • Szare prostokąty – w ten sposób przedstaw rysunki.
  • Tekst – elementy nawigacji.
  • Nagłówki – prawdziwe.
  • Treść – fikcyjna lub prawdziwa.
  • Prostokąty lub inne kształty – formularze i przyciski.

Układ możesz dowolnie zmieniać. Nie bój się eksperymentować. Zobacz, co sprawdza się lepiej, a co mniej. Użytkownicy w inny sposób będą się poruszać w każdym układzie, co jest spowodowane innym układem elementów.

Lorem ipsum

Lorem ipsum jest to fikcyjny tekst, który zamieszcza się na stronach internetowych w trakcie ich projektowania. Oparty jest na prawdziwym łacińskim dziele Cycerona, ale cześć słów jest usunięta, część dodana, a cześć zmodyfikowana. Jest to zrobione celowo, aby nie skupiać się na samej treści, ale na innych elementach witryny.

Tyle samo jest zwolenników stosowania tekstu Lorem ipsum, co przeciwników. Przeciwnicy uważają, że stosowanie Lorem ipsum umniejsza znaczenie prawdziwej treści. A sama treść na witrynie jest przecież niezwykle istotna. Jeśli nie przedstawi się prawdziwej treści, to jak można mówić o jej ważności?

Jednak to, czy stosować lorem ipsum czy nie, zależy od projektu. Jeśli prawdziwa treść jeszcze nie została stworzona, to w zasadzie nie ma innego wyjścia, niż umieszczenie fikcyjnej treści.

Przydatne wytyczne odnośnie stosowania treści:

  • Wpisuj prawdziwą treść, jeśli to tylko możliwe. Jeśli nie masz jeszcze dostępu do prawdziwej treści, wpisz fikcyjną, ale jej początek niech opisuje to, co ma się naprawdę znaleźć.
  • W elementach nawigacji, tytułach, nagłówkach zawsze wpisuj prawdziwą treść.
  • W tabelach zawsze umieszczaj przykłady rzeczywistych treści.
  • W tworzenie szkieletów zaangażuj specjalistów od tworzenia treści. Znacznie łatwiej będzie takim osobom stworzyć wartościowy tekst uczestnicząc w całym procesie, niż tylko wypełniać puste pola.

Szkielety i komentarze

Nie bój się dodawać komentarzy do projektu. Są one bardzo przydatne, ale to, jaka będzie ich treść zależy, komu będziesz prezentować szkielety. Komentarze ułatwią innym zrozumienie szkieletów i możesz w nich zapisać to, co nie dało się przedstawić w formie diagramu, a jest konieczne do pełnego go zrozumienia. Zostaw w komentarzu kontakt do siebie, aby każdy mógł się z Tobą wedle potrzeb skonsultować.

Rodzaje komentarzy, które można dodawać do szkieletów:

  1. Cele biznesowe oraz cele użytkowników związane z ekranem.
  2. Wszystkie możliwe punkty wejścia i wyjścia.
  3. Opisy i scenariusze poszczególnych interakcji.
  4. Scenariusze głównych ścieżek użytkowników.
  5. Powody, z jakich zostały podjęte poszczególne decyzje projektowe.
  6. Wskazówki dla autorów tekstu, grafików oraz wskazówki dotyczące plików multimedialnych.

Testowanie szkieletów

Przetestuj szkielety na współpracownikach i klientach. Udostępnij im szkielety i poproś o informacje zwrotne. Najlepiej, jeśli to zrobią w Twojej obecności. Obie strony będą mogły zadawać pytania. Możesz skorzystać z poniższej listy:

  • Czy wszystko w szkieletach jest zrozumiałe? Każdy element? Wiadomo, do czego służą konkretne ekrany?
  • Czy słowa zostały odpowiednio dobrane? Są intuicyjne?
  • Czy osoby testujące poruszają się po produkcie tak, jak sobie tego życzysz?
  • Jak ludzie reagują na wezwania do działania?
  • Czy projekt wizualny spełnia swoje zadanie?
  • Czy użytkownicy wiedzą, co mają robić?
  • Czy produkt zaspokaja ich wszystkie potrzeby?

Szkielety możesz zaprezentować całemu zespołowi projektowemu. Każdy członek zespołu czym innym się zajmuje i inny będzie jego punkt widzenia. Poznając zdanie każdej z tych osób, zaplanujesz zrównoważone rozwiązanie.

Najlepiej sprawdzi się testowanie szkieletów na prawdziwych użytkownikach. W końcu to oni będą w przyszłości korzystać z gotowego produktu. Zaproś użytkowników do testowania i zachęć ich, by robili to techniką głośnego myślenia. Niech po kolei mówią, co robią. W ten sposób wszystko na bieżąco będzie jasne i będziesz mógł zadawać przy okazji pytania, i to samo będą mogli robić użytkownicy. Przyjrzyj się, czy użytkownicy potrafią dotrzeć do celu. Potrafią znaleźć to, czego szukają? Czy jest jasno określone, co należy wykonać w następnym kroku? Jakie odczucia im w tym czasie towarzyszą?

Jeśli testowanie dotyczy sklepu internetowego sprzedającego jakieś produkty, najlepiej jest poprosić użytkowników i przejście całej ścieżki prowadzącej aż do ostatecznego zakupu.

Na koniec zbierz razem wszystkie otrzymane informacje zwrotne od użytkowników. Nie przejmuj się, jeśli większość uwag będzie negatywna. O to przecież chodzi w trakcie testowania szkieletów. Masz otrzymać szczere uwagi na ich temat. Dobrze, jeśli stanie się to teraz, niż na późniejszym etapie projektu. Teraz masz jeszcze sporo czasu na zmiany i nie stracisz stosunkowo dużo czasu i pieniędzy. Zobacz, jakich uwag jest najwięcej. Czy jakieś się powtarzają? Czy większość postrzega projekt w ten sam sposób? Co musisz zmienić? Słowa? Treści? Jest ich za mało, a może za dużo? Wezwania do działania nie funkcjonują tak, jakbyś sobie tego życzył?

Szkielety w praktyce

Szkielety zacznij tworzyć odręcznie. Będziesz mógł szybko nałożyć poprawki, czy stworzyć szkielet od podstaw. Ze specjalistycznego narzędzia do tworzenia szkieletów skorzystaj dopiero, gdy będziesz miał już ogólny zarys na papierze.

Jaki program wybrać do tworzenia szkiców? W sieci jest szeroki wybór, a wielu przypadkach wystarczy po prostu zwykły program graficzny. Przykłady przydatnych narzędzi:

  • PowerPoint – chyba każdy go ma na swoim komputerze,
  • Keynote,
  • Illustator,
  • Photoshop,
  • Excel – tak tu też można tworzyć szkice,
  • OmniGraffle – dla użytkowników Maca,
  • Visio – dla użytkowników systemu Windows,
  • Balsamiq – dla użytkowników Maca, komputerów z systemami Windows oraz Linux,
  • Axure – dla użytkowników Maca i PC,
  • Szkielety można również tworzyć bezpośrednio w HTMLu.

 

Przydatne wskazówki do tworzenia szkieletów

  • Przygotowywanie szablonu – szablon powinien być spójny i nikt nie powinien mieć problemu by go zrozumieć. Staraj się tworzyć rysunki o wymiarach dostosowanych do danej strony. Także czcionka powinna być docelowej wielkości. Tworząc szkielety korzystaj z linijek i siatek do tworzenia układu kolumnowego. Dzięki temu szkielety będą wyrównane i będą miały odpowiednią strukturę.
  • Zadania pomocnicze – takie rzeczy, jak podział strony, ustalanie tytułów, nagłówków są bardzo istotne i nie można ich lekceważyć.
  • Matryce, biblioteki, wzorce – sieć to morze możliwości. Korzystaj z internetu, aby zaopatrzyć się w wiele ciekawych materiałów związanych ze szkieletami. W sieci znajdziesz bogactwo szablonów szkieletów do wykorzystania w różnych programach graficznych. W bibliotekach wzorców projektowych znajdziesz całe wzorce do tworzenia interfejsów użytkownika.