Projektowanie stron internetowych CMS: przewodnik po aplikacjach zawierających treści dynamiczne

Techniki UI/UX dla dynamicznego, opartego na treści świata mediów online.

Zdecydowana większość aplikacji internetowych i aplikacji mobilnych, zwłaszcza w przestrzeni mediów online, jest obsługiwana przez systemy zarządzania treścią (CMS), takie jak WordPress, Drupal i inne. Systemy te powstały, aby sprostać potrzebom ery Internetu, w której zawartość jest królem i dynamiczna — zmienia się stale i często.

W przeszłości większość stron internetowych była statyczna — nie została stworzona, aby ewoluować i rozwijać się bezproblemowo. Obecnie uważa się je za żywe systemy i istnieje optymalny sposób ich projektowania.

Poniżej znajduje się przewodnik dla projektantów cyfrowych, którzy chcą poszerzyć swój repertuar poza statyczne witryny internetowe i strony docelowe oraz zacząć efektywnie projektować dla dynamicznych aplikacji opartych na treści, takich jak witryny z wiadomościami, blogi, a nawet sieci społecznościowe, w których użytkownicy regularnie publikują treści. Aby dokonać tego przejścia, projektanci będą musieli zrozumieć, w jaki sposób tego typu aplikacje są zwykle skonstruowane, a także przyjąć nastawienie „najpierw treść” w procesie projektowania.

Wzorce CMS Web Design IA w aplikacjach opartych na CMS

Projektanci powinni mieć mentalny model typowych wzorców architektury informacji w aplikacji opartej na CMS, zwłaszcza jeśli pracują nad UX (użytkownikiem) i projektują go od podstaw. Istnieje kilka typów stron, które są wspólne i integralne z tymi aplikacjami i często łączą się ze sobą w przewidywalny sposób, gdzie „post” działa jako główny składnik. Zasadniczo nie ma teoretycznego ograniczenia liczby stanowisk, które może zawierać wniosek.

Pierwsza strona

Jest to formalny punkt wejścia i często jest synonimem strony głównej. Jest to bardzo powszechne, zwłaszcza gdy jest dużo treści, do których można uzyskać dostęp, ponieważ pomaga podkreślić lub wyróżnić to, co najważniejsze. Ta strona zazwyczaj pokazuje skrócone wersje postów bez ujawniania zbyt wielu szczegółów.

Strona posta

Jeśli „post” jest podstawową jednostką aplikacji opartej na CMS, to na stronie posta wyświetlane są wszystkie publiczne informacje o poście. Jest to prawdopodobnie jedyna naprawdę krytyczna strona w aplikacji i może to być strona z artykułem lub strona informacyjna o konkretnym wydarzeniu, osobie, grupie, produkcie itp. W niektórych większych aplikacjach może istnieć wiele rodzajów postów i postów. wyznaczone strony.

Strona listy/kategorii

Ten typ strony jest pomocny w umożliwieniu użytkownikom nawigowania przez wszystkie dostępne posty i filtrowania ich według kategorii, atrybutów lub innych kryteriów. Opcja sortowania jest również powszechna, gdy ilość treści do przewijania jest znaczna.

Strona wyszukiwania

Dedykowana strona do wyszukiwania nie jest niezbędna w przypadku mniejszych aplikacji, ale zawsze jest pomocna. Czasami można go połączyć lub zintegrować ze stroną kategorii/listy.

Profil użytkownika/autora

Ta strona jest dedykowana każdemu autorowi lub użytkownikowi, który tworzy jeden lub więcej postów. Czasami pomija się go w małych witrynach z wiadomościami i blogach jednego autora, ale ma kluczowe znaczenie w przypadku dużych witryn z wiadomościami wielu autorów, sieci społecznościowych opartych na treści i innych aplikacji generowanych przez użytkowników. Powszechną i przydatną praktyką jest umieszczenie na tej stronie listy wszystkich postów użytkownika.

Strona główna lub pulpit użytkownika

Ta strona pokazuje informacje (w tym posty) istotne dla zalogowanego użytkownika, często w formie osobistego kanału informacyjnego lub polecanej treści, ostatniej aktywności i statusów. Dom użytkownika jest niezbędny dla aplikacji bramkowanych i aplikacji sieci społecznościowych, ale jest opcjonalny lub nieistotny dla innych.

Projektowanie interfejsu użytkownika oparte na treści dla treści dynamicznych

Treść poprzedza projekt. Design pod nieobecność treści to nie design, to dekoracja. – Jeffrey Zeldman

Kiedy nadchodzi czas na zaprojektowanie interfejsu użytkownika aplikacji opartej na CMS, należy pamiętać, że treść zawsze kieruje projektem, a nie odwrotnie. W ostatnich latach coraz więcej firm medialnych przyjęło podejście content-first ze sprawdzonymi wynikami. Mając to na uwadze, oto lista zaleceń, o których powinni pamiętać projektanci interfejsu użytkownika, gdy zmoczą stopy w tego typu projektach.

Rozważ zawartość przed zdefiniowaniem stylu

W aplikacji opartej na treści styl wizualny powinien wspierać treść jako całość. Chociaż charakter tego typu aplikacji zwykle sugeruje, że treść będzie zmienna i nie do końca przewidywalna, najczęściej będzie pasować do ogólnego tematu. Tak więc przy opracowywaniu estetyki marki, rzeczywista treść może być świetnym źródłem inspiracji. Jednocześnie odpowiedzialnością może być również to, że projektant jest zbyt przywiązany do określonych elementów treści i rozwija zbyt ukierunkowany styl.

DOWIEDZ SIĘ, kto będzie regularnie tworzył treści.

W aplikacji opartej na CMS zawartość jest w dużej mierze określana przez twórców treści, a nie projektantów. Dlatego zwykle oczekuje się, że projektant zrezygnuje z części kontroli nad wyglądem produktu na rzecz osób, które regularnie publikują treści — czyli redaktorów, autorów, administratorów, a nawet przypadkowych użytkowników, którzy wprowadzają treść za pośrednictwem publicznych formularzy.

W zależności od uzgodnionego procesu projektant może ustalić pewne standardy i wytyczne dotyczące doboru obrazów, ich przygotowania i kadrowania, a nawet nadać parametry stylizacji tekstu. Jednak generalnie to projektant jest odpowiedzialny za takie ukształtowanie front-endu aplikacji, aby słaba praca ze strony twórcy treści, taka jak słabe zdjęcie lub bardzo długi nagłówek, nie obniżała jakości projektu w znacznym stopniu.

W miarę możliwości projektuj z prawdziwą treścią.

Ponieważ typ treści może się znacznie różnić w aplikacji opartej na CMS, warto poświęcić czas na przyjrzenie się jej dużej próbce. Idealnie, w przypadku witryny z wiadomościami lub bloga, projektant współpracowałby z twórcami treści na samym początku procesu projektowania i poprosiłby o przykłady historii, zdjęcia produktów, filmy lub cokolwiek innego, co może sprawić, że makiety projektu będą wyglądać jak prawdziwe jak to możliwe.

Projektowanie z użyciem prawdziwych treści jest lepsze niż korzystanie ze zdjęć stockowych i fikcyjnego tekstu, a nawet można je wykonywać równolegle z tworzeniem szkieletów lub prototypowaniem, ponieważ pomaga to ograniczyć wszelkie niespodzianki, które mogą się pojawić.

Często zdarza się, że projekt wygląda oszałamiająco, gdy projektant wypełnia go starannie wybranymi lub przetworzonymi w Photoshopie obrazami i idealnie dopasowanymi nagłówkami, a następnie widzi, jak po wejściu do produkcji pogrąża się w zastoju.

Nie bądź zbyt konkretny w stylu.

Przy ustalaniu stylu wizualnego nie szufladkuj treści, odzwierciedlając tylko jeden nastrój, gatunek, historię lub temat. Zamiast tego zachowaj prostotę i uniwersalność w odniesieniu do całego zakresu tonów, które mogą mieć znaczenie w treści.

Bardzo specyficzny wygląd i styl są czasami akceptowalne w przypadku aplikacji przeznaczonej dla niszowych odbiorców, ale często mogą się one wydawać przestarzałe i mało atrakcyjne na dzisiejszym rynku. Co więcej, może to potencjalnie ograniczyć perspektywy rozwoju i ekspansji na nowe branże w przyszłości.

Aby upewnić się, że projekt działa dla szerokiego zakresu treści, zwykle dobrze jest przetestować go, tworząc dodatkowe wersje lub dwie tej samej strony o wyraźnie odmiennej tematyce, wciąż mieszczącej się w zakresie tematycznym tego, co można opublikować.

Zaprojektuj każdą stronę jako szablon dla zróżnicowanej zawartości

Pomyśl o każdym typie strony w aplikacji jako o szablonie lub schemacie wypełniania różnych elementów multimedialnych (obrazów, widżetów, filmów, bloków tekstu itp.) i dowiedz się, które elementy będą podlegać zmianom, a które mogą pozostać niezmienione .

USTANOWIĆ jasny zestaw zasad i spójności.

To, że treść może się znacznie różnić w zależności od strony, nie oznacza, że ​​nie powinien istnieć spójny zestaw formatów, w których treść jest prezentowana.

Utrzymywanie przewidywalnych rozmiarów nagłówków i obrazów oraz obserwowanie logicznej hierarchii informacji od góry do dołu na stronie ma wiele zalet, jedną z nich jest to, że tworzy poczucie harmonii w całej aplikacji i utrzymuje użytkownika we właściwej orientacji.

Aby to osiągnąć łatwiej, opracuj modułowy, wielokrotnego użytku zestaw komponentów stylu dla jak największej liczby części interfejsu, w tym nagłówki, separatory, przyciski, widżety i inne elementy w programie do projektowania. Używaj tych komponentów wielokrotnie iw logicznym schemacie, minimalizując różnice. Ten artykuł autorstwa Toptal Designer Wojciech Dobry przedstawia fajny przewodnik po tworzeniu biblioteki UI w Sketchu.

NIE poddawaj postom zindywidualizowanych zabiegów projektowych.

Staraj się unikać umieszczania w postach w tej samej sekcji strony zbyt wielu różnic w stylu i formacie. Obejmuje to zmianę wymiarów obrazu, dodawanie specjalnych układów tekstu lub czcionek lub nadymanie pojedynczych obrazów z niestandardowymi ozdobami lub grafiką. To nie tylko ma tendencję do zabijania harmonii wizualnej, ale generalnie jest marnowaniem zasobów i obciążeniem wydajności i konserwacji z punktu widzenia programisty lub menedżera treści.

NIE zakładaj, że treść zawsze zmieści się w wyznaczonym obszarze.

Jednym z nieuniknionych skutków dynamicznej natury aplikacji opartej na CMS jest to, że ilość tekstu, który pojawia się w danym obszarze wyświetlania, może mieć różną długość. Często w systemie CMS można nałożyć limity znaków na tekst, aby zachować rozsądek, ale projektant nigdy nie powinien ślepo zakładać, że blok tekstu zawsze zmieści się w określonej liczbie wierszy.

Nie tylko różnią się szerokości poszczególnych znaków, ale także nie jest zwyczajowo mocno ograniczać kreatywność pisarzy przez narzucanie bardzo niskiego limitu znaków. Dlatego zawsze dobrze jest przetestować projekt z prawdziwą treścią, jak omówiono powyżej, i sprawdzić każdy obszar za pomocą różnych próbek tekstu.

Aby mieć pewność co do najgorszego scenariusza, tymczasowo wstaw sekwencję szerokich znaków alfabetycznych (takich jak „w”, jeśli treść jest w języku angielskim) aż do osiągnięcia uzgodnionego limitu znaków.

Pozwól, aby zawartość się wyróżniała

W aplikacji opartej na treści treść powinna być zawsze z przodu i centralnie, a stylistyczne elementy brandingu powinny generalnie zanikać.

Otaczaj dynamiczną zawartość czystymi, jasnymi i neutralnymi kolorami tła.

Zazwyczaj preferowany jest kolor biały lub białawy. Dzięki temu wiele różnych rodzajów obrazów, jasnych i ciemnych, może znikać ze strony, nie przysłaniając ich.

ZRÓB obrazy duże i wyraziste.

Duże obrazy, zwłaszcza zdjęcia, przyciągają uwagę odwiedzających skuteczniej niż cokolwiek innego.

UTRZYMUJ duże i bardzo czytelne nagłówki i treść.

W przypadku stron z dużą ilością tekstu wybierz czcionki internetowe, które są bardzo czytelne, i wdrażaj je w dużym, wygodnym rozmiarze na wszystkich urządzeniach — komputerach stacjonarnych, mobilnych i tabletach.

NIE przesadzaj z projektowaniem.

Często projektanci cyfrowi i druku lubią wdrażać kreatywne ozdoby lub dawać wolną rękę elementom brandingowym w swoich projektach. Ogólnie rzecz biorąc, chociaż niektóre efekty wizualne mogą czasami ulepszyć projekt oparty na treści, mogą również łatwo odwrócić uwagę od treści, co naprawdę interesuje użytkowników, którzy odwiedzają witrynę z wiadomościami lub blog.

Takie efekty mogą również sprawić, że wygląd aplikacji będzie mniej przewidywalny wraz ze zmianą obrazu. Zazwyczaj najlepszą praktyką jest sprawdzanie ozdobnych czcionek, pogrubionych wzorów, ilustracji, nakładających się obrazów, półprzezroczystych obrazów i fantazyjnych ramek wokół obrazów. Wreszcie, logo powinno być stosunkowo małe w porównaniu z polecanymi treściami.

NIE używaj kolorowego tła w pobliżu dynamicznych obrazów.

Odważne, jasne kolory są teraz dostępne, ale zwykle najlepiej jest unikać stosowania dużej ilości nasyconych kolorów lub kolorowego tła wokół obrazów, które mogą ulec zmianie, ponieważ może to dawać nieprzewidywalne rezultaty, w tym kolizje kolorów i nadmierną stymulację, odwracanie uwagi od treści.

NIE używaj ciemnego tła do zakrywania całych stron tekstu.

Badania pokazują, że jasny tekst na ciemnym tle bardziej obciąża oczy niż ciemny tekst na jasnym tle w aplikacjach o dużej zawartości treści. Ciemne tło może dobrze sprawdzać się w specjalnej sekcji strony lub w obszarze pokazu slajdów, w którym jest ograniczona ilość tekstu, ale nie nadaje się do zakrywania długich bloków tekstu.

Dowiedz się, jak obrazy i inne media działają na zapleczu

Systemy zarządzania treścią mogą różnić się sposobem obsługi multimediów, takich jak obrazy, filmy i pliki animacji, a czasami programista celowo ustala ograniczenia dotyczące multimediów w celu zwiększenia wydajności.

Na przykład mogą istnieć ograniczenia dotyczące skalowania i przycinania obrazów oraz liczby rozmiarów i przycinania, które można wygenerować i wyświetlić. Dlatego ważne jest, aby skonsultować się z twórcą aplikacji lub menedżerami treści, aby określić, co jest praktyczne (i w co są gotowi włożyć dodatkowe zasoby programistyczne) przed kontynuowaniem projektu.

Dowiedz się, jakie formaty multimediów są obsługiwane.

Chociaż zwykle jest oczywiste, że aplikacja będzie obsługiwać obrazy, dobrym pomysłem jest skonsultowanie się z menedżerami treści na temat typów plików wideo, audio i innych plików multimedialnych, które mogą być przechowywane i wyświetlane oraz stopnia, w jakim można je dostosować wizualnie.

Na przykład pomaga dowiedzieć się, czy zostanie zbudowany niestandardowy odtwarzacz wideo lub czy jedyną opcją jest osadzenie filmu z YouTube lub Vimeo na stronie. W przypadku YouTube istnieją określone standardy i ograniczenia dotyczące osadzania, skalowania i skórowania filmów.

NIE wyznaczaj wielu różnych upraw i rozmiarów obrazów.

Chociaż często jest technicznie wykonalne utworzenie wielu oddzielnych kadrów dla obrazu, zwykle ma to negatywny wpływ. Na przykład, domyślnie WordPress CMS automatycznie generuje kilka rozmiarów przesłanego obrazu w jednym stosunku, ale zapewnia tylko opcję utworzenia jednej osobno przyciętej miniatury.

Kadrowanie każdego obrazu do dodatkowych proporcji wymaga nie tylko zainstalowania specjalnej wtyczki lub dedykowanego narzędzia, które należy opracować z góry, ale także nakłada dodatkowe wymagania na redaktorów, ponieważ wymaga od nich dodatkowej pracy dla każdego przesłanego obrazu. Czasami utrudnia to również wybór odpowiedniego obrazu, co dodatkowo spowalnia przepływ pracy.

NALEŻY określić, czy starsze treści wymagają obsługi.

Podczas przeprojektowywania starszej aplikacji czasami dostępnych jest nawet mniej opcji niż w przypadku uruchamiania nowej aplikacji od podstaw. Dzieje się tak, ponieważ istnieje już repozytorium multimediów, a migracja ich wszystkich do nowego formatu może być często kosztowną lub niepraktyczną operacją z punktu widzenia rozwoju.

Zapewnij edytorom treści różne sposoby stylizowania tekstu

Treść tekstowa jest kluczowym elementem aplikacji opartej na CMS, a w szczególności w witrynie z wiadomościami lub blogu można zauważyć, że redaktorzy lub autorzy pozostawieni samym sobie szukają sposobów stylizacji i formatowania tekstu, aby podkreślić określone punkty, dziel zawartość, dodawaj cytaty, twórz listy, łącz do innych treści i wykonuj szereg innych zadań.

Wiele popularnych platform CMS, takich jak WordPress, domyślnie udostępnia opcje formatowania tekstu, ale jeśli projektant nie zaplanuje dostosowania tych stylów do ich projektu, wynik będzie przypadkowy, prosty lub niepożądany.

Projektuj pod kątem wszystkich typowych sposobów formatowania tekstu.

Szczególnie w przypadku blogów i witryn z wiadomościami warto poświęcić trochę czasu na udostępnienie programiście reguł stylistycznych dla wszystkich typowych sposobów formatowania tekstu, w tym: tekstu pogrubionego i pisanego kursywą, nagłówków i podtytułów, list numerowanych i wypunktowanych, cytatów blokowych, podpisów i hiperłącza.

NIE DAWAJ twórcom treści zbyt dużej kontroli stylistycznej.

Generalnie nie jest dobrym pomysłem udostępnianie redaktorom zbyt dużej kontroli nad projektem. Umożliwienie im robienia takich rzeczy, jak tworzenie własnych układów na stronach lub kolorowanie tekstu na więcej niż jeden sposób, może być dla niektórych zniechęcające lub czasochłonne, a w przypadku innych może dawać brzydkie, niespójne wyniki.

Przyszłe wzorce projektowania opartego na treści

Wraz z pojawieniem się nowych technologii, takich jak rzeczywistość rozszerzona (AR), zaczęły powstawać nowe paradygmaty projektowania opartego na treści. Aplikacje oparte na CMS w przestrzeni rzeczywistości rozszerzonej/mieszanej, które są obecnie w powijakach, wykorzystują obiekty i/lub sceny świata rzeczywistego jako kluczową część treści.

Środowisko oglądania konkretnego użytkownika mobilnego, warunki oświetleniowe i fizyczna bliskość w odniesieniu do tekstu i wstawionych obiektów 3D mogą mieć wpływ na wynik końcowy. Zmienia to znacznie pojęcie kuracji treści i dodaje dodatkową warstwę nieprzewidywalności, którą należy wziąć pod uwagę w procesie projektowania.

Projektowanie stron internetowych CMS jest trochę inne

Projektowanie dla aplikacji opartych na CMS oznacza umieszczanie treści na pierwszym miejscu, a na drugim stylu. Oznacza to również planowanie i uwzględnianie zmienności i nieprzewidywalności w treści, wokół której się projektuje. Zdolność do uwzględnienia niezliczonych potencjalnych wyników stanie się jeszcze ważniejsza w projektowaniu stron internetowych CMS, gdy nowe technologie zmienią charakter samej treści.