Prototypowanie treści na pierwszym miejscu

Treść jest podstawowym towarem gospodarki cyfrowej. To złoto, które przekształcamy w luksusowe doświadczenie, diament, który zawieramy w programach lojalnościowych i sprzedaży dodatkowej. Jednak jako projektanci często podłączamy go po fakcie. Prototypujemy naszą interakcję i projekt wizualny do wyczerpania, ale akceptujemy, że „prawdziwe słowa” można po prostu wrzucić później. Jest lepszy sposób.

Coraz częściej tworzone przez nas towary cyfrowe działają w ramach dynamicznego systemu treści, funkcjonalności, kodu i intencji. Nasze produkty i usługi dryfują i rozlewają się na strony partnerskie, kanały mediów społecznościowych i niezliczone elektroniczne agregatory, z których wszystkie dążą do kształtowania zachowań i zrozumienia odwiedzających. Systemy opierają się na systemach i, w krótkim czasie, stworzyliśmy kolosa, którego szerokość przyprawia o zawrót głowy.

Dalsze czytanie na SmashingMag:

• Optymalizacja projektu pod kątem szybkiego testowania prototypów
• Wybór odpowiedniego narzędzia do prototypowania
• Prototypowanie treści w responsywnym projektowaniu stron internetowych
• Wskrzeszenie prototypów interfejsu użytkownika

Chociaż w przeszłości byliśmy całkiem dobrzy w rozwiązywaniu prostych systemów (pomyśl o statycznych witrynach internetowych i intranetach), okazuje się, że duże dynamiczne systemy są nieco bardziej skomplikowane — i mniej przewidywalne. W miarę wzrostu systemów stają się one wykładniczo bardziej złożone, a wraz ze wzrostem złożoności ich zachowanie staje się coraz bardziej nieliniowe i trudne do przewidzenia dla nas, biednych małp. W dużych systemach błędy zaokrąglania do tysięcznego miejsca po przecinku mogą radykalnie zmienić wyniki (Mitchell 33). Ponieważ Internet zbliża się do biliona węzłów, to jest świat, dla którego wszyscy teraz projektujemy.

Jednak te proste systemy, do których jesteśmy przyzwyczajeni , mogą stanowić klucz do projektowania bardziej złożonych przestrzeni. Jak ujął to teoretyk systemów John Gall: „Złożony system, który działa, niezmiennie wyewoluował z prostego systemu, który działa”. W przestrzeni projektowania cyfrowego, jeśli zapewnimy, że nasze najprostsze dynamiczne systemy treści, struktury i tworzenia znaczeń działają zgodnie z założeniami na podstawowym poziomie, możemy położyć podwaliny pod większe, bardziej złożone systemy, które również działają zgodnie z przeznaczeniem.

Jednym ze sposobów, w jaki my, jako projektanci, możemy utrzymać naszą złożoność w rzędzie, jest wprowadzenie naszych treści do procesu prototypowania na początku. Podejście oparte na treści zachęca nas do wcześniejszej konfrontacji z ograniczeniami i możliwościami naszych treści oraz do funkcjonalnego testowania proponowanych rozwiązań z użytkownikami żądnymi treści, zanim zostaną podjęte ważne decyzje projektowe.

W tym artykule pokażę, jak wykorzystać prosty zestaw narzędzi open-source, aby wprowadzić prawdziwą, dynamiczną treść do procesu prototypowania od pierwszego dnia. Takie podejście pozwala skupić się na tym, jak użytkownicy rozumieją Twoje treści od samego początku projektu, a następnie budować elementy strukturalne, wizualne i techniczne na tym fundamencie zrozumienia.

Model białej skrzynki dla treści

Jednym z narzędzi używanych przez badaczy systemów do zrozumienia zachowania systemów dynamicznych jest model „białej skrzynki”. Badacz systemów Gerald Weinberg pisze, że podczas gdy zachowanie modelu czarnej skrzynki jest „doskonale ukryte”, to zachowanie modelu białoskrzynkowego jest „doskonale ujawnione”. W przypadku złożonych systemów ta przejrzystość jest ważna: Weinberg zauważa dalej, że „nawet najprostsze systemy czasami zawierają niespodzianki dla swoich konstruktorów” (172).

Celem prototypowania content-first jest stworzenie modelu white box dla naszej treści, jej wewnętrznej struktury i wspierającej architektury informacji. Pozwoli nam to odkryć na wczesnym etapie procesu projektowania, w jaki sposób nasi użytkownicy końcowi budują znaczenie na podstawie ustrukturyzowanej treści oferowanej przez nasze systemy cyfrowe. Poświęcając czas na dopracowanie struktury naszych systemów treści u podstaw, przygotowujemy grunt pod integrację tych prostych systemów z większymi, bardziej złożonymi, działającymi systemami.

Aby stworzyć białą skrzynkę dla treści cyfrowych, musimy wziąć pod uwagę trzy rzeczy:

• samą treść , złożoną z pakietów treści o różnym stopniu szczegółowości, w zależności od rodzaju i celu treści;
• struktura , zarówno na poziomie strony lokalnej lub ekranu, jak i na poziomie globalnej witryny lub aplikacji;
• zaangażowanie użytkownika w kontekst i postawę (komputer stacjonarny, tablet lub telefon), w których nasze treści zostaną ostatecznie skonsumowane.

Aby pozostać „doskonale widocznym”, model ten musi być również przejrzysty w swojej funkcjonalności, aby członkowie zespołu projektowego mogli zrozumieć, dlaczego model zachowuje się tak, jak się zachowuje. Ten ostatni element — przejrzystość w połączeniu z zaangażowaniem użytkownika — ma kluczowe znaczenie dla modelu białej skrzynki: nie budujemy prototypu tylko po to, aby zademonstrować funkcjonalność, ale raczej po to, by uczyć się, poprawiać i udoskonalać naszą podstawową strukturę treści w oparciu o sposób, w jaki słowa i używane przez nas struktury są interpretowane przez ich docelowych odbiorców.

Podejście do tworzenia prototypów najpierw dla treści jest przydatne, gdy projektujesz istniejące treści, ale jest to również dobry sposób na zaangażowanie zespołu redakcyjnego w proces tworzenia treści. Uzyskiwanie prawdziwych słów, obrazów i zasobów przed użytkownikami na wczesnym etapie projektu daje każdemu czas na dostrojenie, dostosowanie lub zmianę kierunku w celu osiągnięcia celów projektu. Jeśli Twój plan projektu zakłada przestrzeganie strategii „uzupełnij słowa później”, prototypowanie najpierw treści daje szansę uzyskania kilku odmian treści przed użytkownikami — a następnie uzyskania reakcji użytkowników przed zainteresowanymi stronami.

Framework do tworzenia prototypów przede wszystkim po treści

Biorąc pod uwagę zasady i cele opisane powyżej, przygotowałem framework startowy do stworzenia tego rodzaju prototypu. W dużej mierze w duchu myślenia systemowego, narzędzie to opiera się na luźnym połączeniu prostszych systemów, z których każdy dobrze wykonuje proste podstawowe zadanie.

Dla tego frameworka zebrałem Excel, Jekyll, ZURB Foundation i Browsersync i połączyłem je wszystkie razem za pomocą skryptu Gulp. Wybrałem te konkretne aplikacje i frameworki, ponieważ są one szeroko dostępne, są open source (w większości), mają aktywne społeczności wsparcia i mają doskonałą dokumentację.

Możesz pobrać kopię przykładowego projektu omówionego poniżej oraz zestaw startowy do tworzenia prototypów opartych na zawartości najpierw ze strony projektu w serwisie GitHub. Przyjrzyjmy się, jak poszczególne elementy do siebie pasują i co każdy z nich robi.

Przewyższać

Excel — lub dowolny program do obsługi arkuszy kalkulacyjnych, który zapisuje dane w formacie XLSX — służy do tworzenia i edytowania treści strukturalnych i systemów kategoryzacji. Za każdym razem, gdy zapisujesz dokument, każdy pakiet w zestawie treści (reprezentowany przez wiersz w arkuszu kalkulacyjnym) jest eksportowany zarówno jako strona Jekyll, jak i dokument JSON. Pozwala to na wykonywanie zarówno stronowych, jak i globalnych operacji na treści oraz propagację zmian w treści na całą witrynę za pomocą jednego polecenia „zapisz”.

Jekyll

Jekyll to generator statycznych witryn internetowych typu open source, który służy do wyrażania dynamicznej struktury między pakietami treści, stronami i kategoriami. Jekyll reprezentuje zawartość zapisaną w arkuszu kalkulacyjnym jako zmienne i umożliwia wykonywanie operacji na tych zmiennych w celu stworzenia struktury. Jekyll zapewnia również znaczniki „jeśli/to” do stosowania logiki warunkowej oraz pętli for przechodzenia i filtrowania zestawów treści.

Fundacja

ZURB Foundation, platforma front-end typu open source dla urządzeń mobilnych, służy do wyrażania hierarchii informacji i strukturyzacji zachowań responsywnych. Siatki Foundation, definicje stylów i zachowania responsywne umożliwiają tworzenie niemal każdego standardowego wzorca układu sieci Web, po prostu stosując klasy do elementów HTML.

Synchronizacja przeglądarki

Wreszcie, Browsersync wyświetla Twój prototyp w przeglądarce i aktualizuje CSS i strony, gdy wprowadzasz zmiany. Browsersync umożliwia również dostęp do prototypu z dowolnego urządzenia podłączonego do tej samej sieci. Oznacza to, że możesz zobaczyć automatyczne aktualizacje na telefonie i tablecie podczas wprowadzania zmian na laptopie.

Połączone razem, narzędzia te umożliwiają budowanie prototypów w środowisku podobnym do dynamicznych systemów, które będą tworzyć ostateczne środowisko produkcyjne, ale bez cierpienia z powodu baz danych, usług w chmurze i opóźnień w sieci, które spowalniają pracę, gdy trzeba się przenieść szybko wypróbować pomysły.

Jeśli wpadasz w panikę, ponieważ dotyczy to kodu…

Nie panikuj. Narzędzia te są przyjazne dla projektantów i mają doskonałe społeczności wsparcia. Nie musisz być programistą front-end, aby urzeczywistniać swoje pomysły. Musisz znać podstawy HTML i CSS. Te języki nie są trudne — a ich nauka nie zniszczy Twojej zdolności do dobrej pracy projektowej. Jak powiedział legenda projektowania krojów, Erik Spiekermann: „Musisz się nauczyć, jeśli nie kodować, to przynajmniej docenić kod, zrozumieć kod. Ponieważ kod jest tym, czym były nakrętki i śruby sto lat temu. Najlepszym sposobem na rozpoczęcie jest nurkowanie.

Przykład prototypowania treści na pierwszym miejscu: The Green Lake Community Center

Aby lepiej zrozumieć, jak wygląda prototypowanie treści w praktyce, weźmy kolekcję treści cyfrowych ze świata rzeczywistego.

Oto scenariusz. Green Lake Community Centre oferuje zajęcia, programy i wydarzenia dla członków społeczności w sąsiedztwie Green Lake. Niestety, wszystkie aktualne informacje o klasie, programie i wydarzeniach są dostępne online tylko w formacie PDF, który z kolei jest dostępny tylko w witrynie centrum o stałej szerokości, zoptymalizowanej pod kątem komputerów. Ujrzeć:

Aby dotrzeć do członków społeczności, którzy coraz częściej próbują uzyskać dostęp do informacji o zajęciach, programach i wydarzeniach za pośrednictwem swoich telefonów komórkowych, centrum zdecydowało się uruchomić witrynę internetową poświęconą programom mobile-first. Ta inicjatywa ostatecznie posłuży jako katalizator dla ogólnomiejskiej, responsywnej strony internetowej poświęconej parkom i rekreacji.

Jak każdy inny projekt, zacznę od analizy heurystycznej i konkurencyjnej oraz od analizy dostępnych danych o ruchu i użytkownikach. Jeśli interesariusze i użytkownicy końcowi są dostępni, na pewno z nimi porozmawiam. Gdy poczuję, że dobrze znam cel witryny, przeanalizuję kilka podstawowych, wysokopoziomowych architektur informacji i pomysłów na interfejs użytkownika na papierze.

Gdy wstępne podejście do projektowania zaczyna nabierać kształtu, mogę użyć przepływu pracy prototypowania treści, aby moje początkowe pomysły — i, co ważniejsze, treść, którą te pomysły mają służyć — wprowadzić do kontekstu, w którym zostaną ostatecznie wykorzystane — w tym przypadku przeglądarka. Przyjrzyjmy się szczegółowo, jak wygląda ten proces.

Przechwytywanie treści

W tym przykładzie możesz zobaczyć, w jaki sposób ustrukturyzowana zawartość, którą przechwytuję w arkuszu kalkulacyjnym struktury prototypowania zawartości, jest automatycznie zapisywana w szablonie strony za każdym razem, gdy zapisuję plik _data . Tutaj wykorzystałem arkusz „katalogu” do uporządkowania treści. Zmienne „Tytuł”, „opis”, „kategoria” i „tagi” są już zawarte w szablonie strony, więc te wartości są aktualizowane od razu. Do wiersza treści możesz dodać dowolną liczbę innych kolumn — pamiętaj tylko, aby w szablonie uwzględnić odpowiednią zmienną (więcej na ten temat poniżej).

Arkusze „Katalogu” i „Podawanie” są również zawarte w zestawie startowym i zawierają różne kategorie (kolumny) dla odpowiednich typów zawartości. Każdy arkusz eksportuje zawartość do własnego folderu (w tych przypadkach „katalog”, „katalog” i „kanał”) oraz do własnego pliku JSON. Możesz dodać tyle innych arkuszy, ile potrzebujesz — po prostu pamiętaj, aby zaktualizować plik konfiguracyjny Jekyll, aby wiedział, że ma je pobrać (zobacz dokumentację wtyczki „Jekyll Data Pages Generator”, aby uzyskać szczegółowe informacje).

Dodaj więcej pakietów treści

Gdy dodaję pakiety treści (wiersze w arkuszu kalkulacyjnym), nowe strony są automatycznie dodawane do prototypu. Każdy wiersz reprezentuje pojedynczą stronę, a każda kolumna w tym wierszu reprezentuje zmienną, którą Jekyll wypełnia w szablonie podczas tworzenia strony. W tym przykładzie zawartość katalogu „Community Center” jest dość jednolita, ale jeśli opisy produktów bardzo różniły się długością, można łatwo zobaczyć (i doświadczyć), jak ta zmiana wpłynie na układ strony. Być może wtedy zdecydujesz się na inne fragmenty treści lub dodanie nowych elementów, takich jak podsumowania lub informacje o pracy.

Ten system pozwala również łatwo eksperymentować z etykietami, kategoriami i tagami. Zmieniając wartości w kolumnie „kategoria”, możesz przetestować, jak różne podejścia architektoniczne wpływają na zdolność użytkownika do łatwego odnalezienia danego fragmentu treści. Na przykład w tym przykładzie stworzyłem systemy organizacyjne oparte na typie klasy i grupie wiekowej uczestnika. Dzięki temu mogę w łatwy sposób testować różne podejścia nawigacyjne w menu i na stronie głównej, w miarę jak prototyp nabiera kształtów.

Dodaj strukturę i hierarchię za pomocą HTML

Gdy już będę zadowolony z zawartości, zacznę zawijać ją w znaczniki, tak aby jej struktura była zrozumiała dla użytkowników. Traktuj tutaj zmienne jak tekst i oznaczaj je tak, jakbyś oznaczał tekst w „płaskim” pliku HTML. Wyniki powinny wyglądać dość przewidywalnie (to dobrze).

System szablonów Jekyll pobierze utworzone przez Ciebie szablony stron i opakuje je szablonem globalnym zawierającym nagłówek i ikonę nawigacji. Oto, co oznacza „układ: domyślny”: Nazywamy szablon „domyślny” jako opakowanie tego szablonu. Możesz zagnieżdżać szablony tak głęboko, jak chcesz, chociaż więcej niż jeden lub dwa poziomy szablonów są zwykle niepotrzebne. Aby uwzględnić powtarzające się elementy, takie jak listy stron i łącza globalne, możesz również użyć „zawiera”, które wstawiają określony fragment kodu do szablonu podczas renderowania witryny. Sprawdź oficjalną dokumentację Jekyll, aby uzyskać więcej informacji na temat szablonów i dołączeń.

Dodaj logikę za pomocą znaczników Jekylla

Jekyll pozwala dodać podstawową logikę, włączając podstawowe tagi, które są specyficzne dla jego systemu szablonów. Tutaj używam znacznika for , aby przechodzić przez listę klas Centrum społeczności Green Lake (która została utworzona, gdy dodałem wiele pakietów treści powyżej) i renderuję każdą klasę centrum społeczności na liście jako łącze:

Możesz również użyć instrukcji if do tworzenia warunków. Tutaj używam instrukcji if , aby ukryć link do strony klasy, na której aktualnie się znajduję:

Jeśli twoja głowa właśnie eksplodowała, nie panikuj. Dodawanie logiki to swego rodzaju zaawansowana funkcja. Twój prototyp będzie działał dobrze, jeśli będziesz trzymać się zmiennych treści i HTML. System szablonów Jekylla jest jednak bardzo czytelny dla człowieka i łatwy do pobrania. Sprawdź szybkie wprowadzenie przez jego twórców, jak działają podstawowe elementy.

Dodaj styl i responsywne zachowanie dzięki CSS Foundation

Gdy pierwszy szkic struktury HTML jest już na miejscu, mogę dodać styl do prototypu, po prostu dołączając klasy CSS i zapisując dokument. Front-end framework ZURB Foundation, który jest już połączony w zestawie startowym, zapewnia klasy stylów dla szerokiej gamy wzorców aplikacji internetowych i natywnych. W pokazanym tutaj przykładzie, po prostu wrzucając dwie różne klasy, nadałem mojemu mobilnemu prototypowi bardziej „dotykowe” wrażenie i wprowadziłem znacznie jaśniejsze poczucie hierarchii wizualnej. Te zmiany są automatycznie propagowane do całej zawartości korzystającej z tego szablonu.

Foundation ułatwia również uwzględnienie zachowania responsywnego z myślą o urządzeniach mobilnych i korzystanie z dziesiątek gotowych komponentów układu, kontenera i multimediów. Ponieważ to wszystko CSS, możesz modyfikować i dostrajać wszystko według własnego gustu. W tych przykładach zmodyfikowałem podstawową paletę kolorów Foundation do stylu „monochromatycznego szkieletu”, ale możesz dostosować Foundation do dowolnego stylu. Dowiedz się więcej o korzystaniu z Foundation, przeglądając jej dokumentację lub tutoriale lub biorąc udział w zajęciach (nawiasem mówiąc, zajęcia są doskonałe).

Otrzymuj opinie wcześnie i poprawiaj je w miarę postępu

Po umieszczeniu treści tworzenie i testowanie wielu odmian struktury jest łatwe. Etykiety, kategorie, słowa kluczowe i inne metadane można zmieniać bezpośrednio w arkuszu treści. Podobnie, wariacje struktury, przepływu i wyświetlania strony to tylko kwestia tworzenia alternatywnych wersji szablonów Jekyll. Wszystkie te zmiany zostaną natychmiast wprowadzone kaskadowo w prototypie w momencie, gdy klikniesz „Zapisz”.

Aby ukończyć pierwszą wersję prototypu Green Lake Community Center, stworzyłem trzy odmiany mobilnej strony głównej. W tym przypadku wszystko, co musiałem zrobić, to zmienić kolejność elementów w szablonie strony głównej i zamienić źródła danych na dwa elementy nawigacyjne (tj. przyciski o pełnej szerokości i kafelki obrazu).

Chociaż przedstawiłem wszystkie te kroki po kolei, pamiętaj, że Gulp (program uruchamiający zadania JavaScript, który łączy wszystkie nasze proste systemy razem) aktualizuje zmiany za każdym razem, gdy zapisujesz dokument. Oznacza to, że w dowolnym momencie możesz cofnąć się do dowolnego kroku i wprowadzić poprawki na podstawie odpowiedzi użytkowników, opinii interesariuszy lub nowych odkryć dotyczących treści lub kontekstu.

Ta elastyczność umożliwia łatwe testowanie różnych hierarchii ekranów i sposobów traktowania treści z użytkownikami — i pozwala na korzystanie z prawdziwych treści w tych testach, treści, które Twoi odbiorcy mogą doświadczyć (i na które zareagować) z pierwszej ręki. Ponieważ ostateczną formą prototypu jest HTML, CSS i JavaScript, możesz zebrać opinie użytkowników za pomocą dowolnego narzędzia testowego, z którym czujesz się najlepiej (lubię testowanie użytkowników i przeglądanie).

Prototypowy format HTML, CSS i JavaScript oznacza również, że Twoja praca będzie łatwiej informować o równoległych i kolejnych wysiłkach. Jeśli Twój ewentualny produkt zostanie na przykład zbudowany na istniejącej platformie CMS, wymagania dotyczące treści, struktury i wyświetlania, które jesteś w stanie wyrazić, pomogą Ci ocenić opcje CMS. Podobnie twój prototyp może służyć jako dokument specyfikacji dla decyzji projektowych dotyczących siatki, hierarchii, nagłówków, zachowania łączy i czcionek dla twoich programistów front-end.

Nie zapominaj jednak, że celem tworzenia prototypów content-first nie jest po prostu projektowanie w przeglądarce: celem jest wykorzystanie przeglądarki i opinii użytkowników do dostrojenia organizacji treści w celu tworzenia prostych dobrze funkcjonujące struktury.

Siłą tej metody jest umożliwienie szybkiej modyfikacji systemów tworzonych przez kategorie, etykiety i ścieżki nawigacji. Zapewnia to wyraźną przewagę nad statycznym modelowaniem treści. Jeśli zauważysz, że używasz dużo dodatkowego kodu CSS, aby Twoja dynamiczna zawartość działała tak, jak chcesz, wróć do źródła. Czy możesz podzielić zawartość na kawałki, aby działała lepiej? Dodać (lub usunąć) zestaw klas lub tagów? Wypróbuj różne warianty, aż znajdziesz proste, eleganckie rozwiązanie, które sprawi, że wszystko inne będzie się układać.

Myślenie systemowe poza siecią

Przedstawiony tutaj podstawowy przykład ilustruje, w jaki sposób podejście do prototypowania opartego na treści może pomóc nam w tworzeniu prostych działających systemów treści — systemów, które z kolei przygotowują grunt pod większe, bardziej złożone, działające systemy. Prototypowanie treści na pierwszym miejscu pomaga nam odkryć miejsca, w których drobne zmiany w modelu treści, hierarchii, kategoriach i etykietach mogą prowadzić do czystszych, bardziej eleganckich rozwiązań dla potrzeb informacyjnych naszych użytkowników.

Chociaż to narzędzie jest oparte na technologiach internetowych, sposób, w jaki konstruujemy treści w celu zrozumienia, wykracza poza poszczególne narzędzia, technologie i platformy. Jeśli Twoje treści w swojej najbardziej podstawowej formie, pozbawione wymagań i ograniczeń konkretnych wdrożeń, mają sens dla odbiorców i realizują Twoje cele komunikacyjne w prosty, elegancki sposób, to zbudowałeś już fundament, który wykracza poza pojedyncze wdrożenia technologiczne. Zbudowałeś treść, która nie wymaga konkretnej platformy lub skryptu, aby miała sens; jest to zbiór treści, który chce być rozumiany w określony sposób.

Kiedy umieszczamy treść w centrum procesu projektowego, zaczynamy rozwiązywać problemy nie o konkretną implementację, ale o zrozumienie. Wszystko inne jest krokiem pośrednim. Uznając, że ostateczną platformą, dla której projektujemy, jest ludzki umysł, możemy zidentyfikować proste struktury, które dają początek zrozumieniu i możemy pracować nad ich wzmocnieniem przez cały proces projektowania.

Prace cytowane

• Complexity, A Guided Tour , Melanie Mitchell (Nowy Jork: Oxford, 2009)
• Wprowadzenie do ogólnego myślenia systemowego , Gerald Weinberg (Nowy Jork: Dorset House, 1975)