Najlepsze praktyki w zakresie układu stron internetowych: 12 Analizowane ponadczasowe wzorce UI

Trendy w projektowaniu interfejsu użytkownika mogą pojawiać się i pojawiać w sieci, ale kilka wzorów interfejsu użytkownika przetrwało próbę czasu. Co sprawia, że wzór interfejsu użytkownika jest ponadczasowy? Przestrzeganie najlepszych praktyk w zakresie projektowania stron internetowych, które skutkują połączeniem przyjazności dla użytkownika i możliwości dostosowania się do zmieniających się trendów i technologii.

Istnieje kilka kryteriów, które sprawiają, że wzorce interfejsu użytkownika są trwałe. Jednym z nich jest przyjazność dla użytkownika. Wzór interfejsu użytkownika, który "wygląda niesamowicie", ale nie zapewnia dużej użyteczności, nie jest taki, który będzie trwał długo.

Najbardziej użyteczne wzorce interfejsu użytkownika są również przystosowywalne do zmieniających się trendów. Na przykład układy kart i siatek mogą być wdrażane przez projektantów interfejsu użytkownika na różne sposoby. Adaptacyjność pozwala im nadal wyglądać nowocześnie i zgodnie z aktualnymi trendami, mimo że mogą one istnieć już od lat. To samo odnosi się do innych wzorców interfejsu użytkownika, które zostały tutaj uwzględnione.

Wzory układów sieciowych w stylu karty

Układy w stylu karty zostały spopularyzowane przez takie strony jak Pinterest, Facebook i Twitter. Stały się one standardem w serwisach informacyjnych i blogach, ponieważ dobrze nadają się do umieszczania dużej ilości treści na stronie przy jednoczesnym zachowaniu odrębności każdego elementu.

Jak sama nazwa wskazuje, układy te wykorzystują bloki treści, które przypominają fizyczne karty o różnych kształtach i rozmiarach. Istnieją dwa podstawowe formaty układów. Jeden układ układ układa karty o jednakowych wymiarach na siatce (jak widać na stronie głównej bloga Toptal design), podczas gdy drugi wykorzystuje płynny układ z kartami o różnych rozmiarach ułożonymi w uporządkowane kolumny, ale bez wyraźnych wierszy.

Układ wstylu kartki działa dobrze, ponieważ pozwala na uporządkowanie różnych treści przy jednoczesnym zachowaniu odrębności wszystkich elementów. Karty są również dobrze znane ludziom, ponieważ rozpoznają przedmioty w kształcie kart z rzeczywistego świata. Mają one sens psychologiczny i są łatwe w użyciu, nawet jeśli są nowe na stronie internetowej.

Podzielone układy ekranu

Technicznie, układy split-screenowe pochodzą z 1903 roku, do filmu Życie amerykańskiego strażaka Edwina S. Portera. Jednak w projektowaniu interfejsu WWW, układy split-screenowe zaczęły zyskiwać na popularności w 2013 roku i naprawdę zaczęły nabierać tempa w 2016 roku.

Układy z dzielonym ekranemto popularny wybór projektów, w których dwa elementy muszą mieć taką samą wagę na stronie i są często stosowane w projektach, w których zarówno tekst, jak i obraz muszą być wyraźnie widoczne. Umieszczanie ich obok siebie, zamiast pionowo lub z tekstem nakładanym na obraz, to świadomy wybór projektu, który może nadać mu wyrafinowaną, minimalistyczną jakość. Często widziane są również dwa obrazy umieszczone obok siebie, czasami z nakładkami tekstowymi.

Większość projektów typu split-screen jest dzielona dość równomiernie, choć niektóre są dzielone w różnych proporcjach. (33:66 lub 40:60 wydają się być najbardziej popularnymi proporcjami; gdy ekran jest podzielony na mniejsze niż ⅓, to bardziej przypomina on pasek boczny niż prawdziwy projekt split-screen).

Konstrukcje typu split-screen są szczególnie dobrze dopasowane do stron produktowych w serwisach e-commerce. Obrazy produktów muszą być widoczne na tych stronach, ale również istotne informacje, takie jak cena, specyfikacje, przyciski dodawania do koszyka i opcje produktów.

Duża typografia

Duża typografia istnieje od czasu pojawienia się sieci, ale zyskała na popularności, kiedy wzornictwo mobilne stało się powszechne.

Duża czcionka jest szczególnie popularna w nagłówkach i tytułach, ale na niektórych stronach jest również widoczna w body copy. Po wybraniu właściwej czcionki, większy tekst jest bardziej czytelny i poprawia komfort użytkowania. Co więcej, jest to mocna strona wizualna. Jest to szczególnie popularne w projektowaniu minimalistycznym, gdzie inne elementy wizualne są najczęściej nieobecne.

Personalizacja

Algorytmy personalizacji istnieją od lat, dostosowując doświadczenia cyfrowe do preferencji każdej osoby. AI uczyniła te algorytmy jeszcze bardziej użytecznymi, z funkcjami takimi jak algorytmy sugestii, które mogą teraz dokładnie przewidzieć, co dana osoba będzie chciała oglądać, czytać, uczyć się lub kupować dalej.

Dzięki stronom członkowskim, ludzie chcą widzieć treści, które spełniają ich oczekiwania i potrzeby. Bazując na wcześniejszych wyborach abonentów, Netflix posiada doskonałe algorytmy predykcyjne, które oferują filmy i pokazy, których oglądanie jest najbardziej prawdopodobne. Strony takie jak Medium pokazują ludziom artykuły, które najprawdopodobniej spodobają im się po zalogowaniu, zarówno na podstawie tego, co przeczytali, jak i tego, co im się podobało wcześniej.

Ale personalizacja może pójść za daleko. Algorytmy sieci reklamowej stały się tak zaawansowane, że czasami mogą przewidzieć, co ludzie mogą być zainteresowani zakupem, nawet jeśli nie szukali produktu online lub w inny sposób wspomniał. Ten poziom przewidywania może czasami sprawiać, że ludzie czują się tak, jakby byli szpiegowani. Z tego powodu mądrze jest, aby projektanci interfejsu użytkownika ostrożnie korzystali z personalizacji.

Siatki

Siatki od dawna są częścią projektu UI, poczynając od układów tabelarycznych pod koniec lat 90-tych (chociaż były one używane w układach drukowanych do takich rzeczy jak książki i gazety na długo przed tym). Kiedy CSS zyskał popularność w zakresie tworzenia układów graficznych, opracowano bardziej eleganckie systemy gridowe, czego najwcześniejszym godnym uwagi przykładem była siatka 960.gs.

Siatki zapewniają wizualną równowagę i porządek w projekcie, co sprawia, że treści są łatwiejsze do skonsumowania przez ludzi. Jednocześnie, siatki mogą oferować dużą elastyczność w układzie stron internetowych. Większość systemów gridowych wykorzystuje 12 lub 16 kolumn z rynnami pomiędzy nimi. Niektóre strony internetowe wykorzystujące układy kratowe sprawiają, że kraty te stanowią istotną cechę projektu. Natomiast inne są bardziej subtelne, a siatka staje się widoczna dopiero po dokładnym obejrzeniu (a czasami dopiero po nałożeniu na projekt rzeczywistej siatki).

Oprócz siatek opartych na układach kolumn, siatki bazowe są powszechnie stosowane w projektowaniu siatek do przestrzennych elementów poziomo w logiczny sposób. Jest to najbardziej widoczne w typografii, na przykład podczas badania odstępów między liniami kopii korpusu a nagłówkami. Odstępy między poziomymi siatkami bazowymi są ściśle związane z odstępami między siatkami pionowymi stosowanymi w projektowaniu stron internetowych.

Układ stron internetowych w stylu magazynów

Wiadomości i czasopisma w dużym stopniu wpłynęły na układ graficzny czasopism w sieci. Na początku były one widoczne głównie na stronach internetowych z wiadomościami i w magazynach internetowych. Z czasem ich popularność wzrosła w innych sektorach, a obecnie są one widoczne na różnego rodzaju stronach internetowych, w tym na stronach e-commerce i blogach.

Magazynowe układy graficzne zawierają wyróżniony artykuł (lub czasami wiele wyróżnionych artykułów w karuzeli lub podobnym formacie), a także drugorzędne i trzeciorzędne artykuły na stronie głównej. Mają one również zazwyczaj wiele kolumn dla treści, czasami podzielonych na sekcje. Te układy stron internetowych dobrze sprawdzają się w przypadku stron z dużą ilością treści, zwłaszcza tych, na których codziennie dodawane są świeże treści.

Układy jednostronicowe

Jednostronne układy stron umieszczają całą podstawową zawartość strony na jednej stronie internetowej. Nawigacja odbywa się poprzez przewijanie, często ze skrótami do poszczególnych sekcji, a czasami z efektami przewijania paralaksy. Od czasu do czasu mogą one używać drugorzędnych stron dla warunków, polityki prywatności lub innych informacji, które nie są częścią głównej zawartości, ale nie powinno to uniemożliwiać uznania układu za jednostronicowy.

Wzorce F i Z

Wzorce F i Z odnoszą się do tego, jak oko człowieka przesuwa się nad stroną - jak ludzie skanują zawartość. Wzorzec F ma widoczną zawartość w górnej części strony, a dodatkowa zawartość jest wyrównana pod nią wzdłuż lewej strony (w przybliżeniu w kształcie litery "F"). Wzór Z ma widoczną zawartość na górze strony, a dodatkowa cenna zawartość na dole strony. Oko narysowane jest po przekątnej od górnej prawej do dolnej lewej strony strony (w przybliżeniu w kształcie "Z").

Wzory F nadają się do stron o większej zawartości niż wzory Z, na których istnieje bardzo wyraźna hierarchia wizualna. Wzorce Z są bardziej użyteczne, gdy na stronie znajdują się dwa elementy o jednakowej (lub prawie jednakowej) zawartości, które odwiedzający powinien zobaczyć.

Asymetria

Najprościej mówiąc, asymetria to brak symetrii. W projektowaniu, asymetria tworzy bardziej dynamiczny i organiczny wpływ wizualny. W większości przypadków asymetria jest tworzona za pomocą obrazów i tekstu, które nie są idealnie zrównoważone. Asymetria może być również tworzona lub wzmacniana za pomocą elementów tła, np. przy użyciu innego wzoru pomiędzy różnymi sekcjami strony.

Ponieważ asymetria tworzy dynamiczne, energetyczne wrażenie wizualne, jest ona przydatna dla marek, które chcą przekazać tego typu obraz. Asymetria może być również nieoczekiwana, sprawiając, że projekty stają się bardziej zapadające w pamięć i ma praktyczne zastosowanie, gdy zawarte w nich treści nie działałyby dobrze w symetrycznym układzie.

Czyste i proste układy stron internetowych

Czyste i proste układy od dziesięcioleci są modne w projektowaniu UI, choć zdarzają się one częściej niż zwykle. Piękno tych układów polega na tym, że koncentrują się kwadratowo na treści, bez bałaganu wizualnego.

Czyste i proste układy nadają się praktycznie do każdego rodzaju stron internetowych. Wiele z pozostałych wzorców UI dobrze współgra z czystymi układami. Dostępne są czyste wersje siatek, układy w stylu czasopism, asymetryczne wzory i układy typu split-screen. Wiele z najbardziej eleganckich stron internetowych można uznać za "czyste", niezależnie od tego, jakie inne cechy konstrukcyjne mogą być w nich zawarte.

Zakładki nawigacyjne

Zakładki nawigacyjne były pierwotnie podstawą projektu skeuomorficznego, przypominającego zakładki w folderach plików lub segregatorów. Jednak w miarę dojrzewania, nawigacja w stylu zakładek nie zawsze przypomina realistyczną zakładkę. Cechą charakterystyczną zakładek nawigacyjnych jest to, że każda pozycja w menu ma wizualną separację od innych pozycji menu. Czasami jest to subtelne, a czasami pojawia się tylko wtedy, gdy pozycja menu jest zaznaczona lub zawieszona.

Zakładki nawigacyjne najlepiej nadają się do mniejszych menu, w których znajduje się tylko kilka pozycji. W przeciwnym razie mogą one wyglądać na zagracone. Można je jednak łączyć z rozwijanymi podmenu, aby wzbogacić ich funkcjonalność. Są one również zazwyczaj widoczne w nawigacji poziomej, choć istnieją również pionowe przykłady.

Karuzele

Karuzele z treściami często znajdują się w nagłówku lub w sekcji "bohater" strony internetowej. Często zawierają one obrazy w połączeniu z tekstem, choć niektóre z nich mogą zawierać tylko jeden lub drugi. Są one używane do wyświetlania wielu fragmentów treści w ramach jednej sekcji strony internetowej, gdy przestrzeń jest za dopłatą.

Karuzele działają naprawdę dobrze dla kilku zastosowań. Polecane treści na blogu lub stronie z wiadomościami dobrze nadają się na karuzele. Produkty, promocje i sprzedaże są również często umieszczane w karuzelach na stronach e-commerce. Podczas gdy karuzele zazwyczaj pojawiają się na górze strony internetowej, mogą być również wykorzystywane w podsekcjach do wyróżniania powiązanych treści. Są one popularnym wyborem zarówno dla zawartości strony głównej, jak i poszczególnych stron dla określonych kategorii treści lub produktów.

Ponadczasowy układ strony internetowej Najlepsze praktyki

Ponadczasowa konstrukcja UI jest elastyczna i przyjazna dla użytkownika. Działa w różnych obudowach użytkowych i wygląda tak samo dobrze dzisiaj jak 10 lat temu (i będzie wyglądać tak samo dobrze za kolejne 10 lat) z niewielkimi modyfikacjami.

Podążając za najlepszymi praktykami w zakresie projektowania stron internetowych i włączając w to ponadczasowe elementy projektu UI, w krótkim czasie powstanie strona, która nie będzie wyglądać ani czuć się przestarzała. Pozwala to projektantom interfejsu użytkownika na tworzenie cyfrowych doświadczeń, które zachwycają użytkowników i realizują cele marki.