Flat 2.0 i jak rozwiązuje problemy użyteczności płaskiego projektu

Płaska konstrukcja istnieje już od lat 50. XX wieku, kiedy opracowano Międzynarodowy Styl Typograficzny. W ostatnim czasie zyskała szeroką popularność od czasu wprowadzenia nowej wersji Microsoftu projektowanie metra skoncentrowane na geometrii i typografii język, początkowo w nowym Windows Phone w 2010 r., a następnie w Windows 8 w 2012 r.

Płaska konstrukcja charakteryzuje się brak trójwymiarowych efektów i błyszczących elementów wizualnych w celu osiągnięcia czystość, minimalizm, i przejrzystość. Jest to sprzeczne z wcześniej dominującym stylem projektowania, skeuomorfizmem, który wykorzystuje błyszczące przyciski i ilustracje imitujące rzeczywiste obiekty 3D.

Płaska konstrukcja zasadniczo ma na celu usprawnienie stron internetowych, skupienie się na treściach, oferowanie bardziej intuicyjnych interakcji oraz zapewnienie szybszego i bardziej funkcjonalnego doświadczenia użytkownika. Łatwo jest również korzystać z prostych, pudełkowych elementów i układów opartych na siatce, aby zapewnić responsywny projekt.

Problemy użyteczności płaskiej konstrukcji

Płaska konstrukcja daje nam ogromną pomoc i świetny zestaw narzędzi, aby zapewnić naszym użytkownikom szybkie i nieskomplikowane strony internetowe, ale może powodować pewne problemy z użytecznością, zwłaszcza gdy jest nadużywana.

Brak wizualnych znaczników Clickability

Jeśli używamy efektów trójwymiarowych, to naturalnie daje iluzję głębi naszym projektom. To pomaga użytkownikom szybko znajdź interaktywne elementy, te, które można kliknąć (jak przyciski i ikony) lub wypełnić (jak pola formularza). Jedną z głównych obaw związanych z płaską konstrukcją jest to, że utrudnia to użytkownikom rozpoznać klikalne elementy.

Przed epoką płaską projektanci stron internetowych zazwyczaj wskazywali na klikalność za pomocą rozwiązań wizualnych, takich jak gradienty, tekstury, podniesione krawędzie lub cienie aby przyciski i inne klikalne obiekty wyglądały tak, jakby mogły być wciśnięte.

Płaska konstrukcja pozbawiona jest tych wizualnych znaczników i musi rozwiązać to samo zadanie za pomocą znacznie mniejszego zestawu narzędzi: kolory, kształty, bliskość, i elementy kontekstowe.

Dlaczego to problem? Spróbujmy eksperymentu.

Spójrz na poniższy zrzut ekranu. Spróbuj odgadnąć, które elementy są klikalne na podstawie tego zrzutu ekranu. To nie te, o których najpierw pomyślałeś. Możemy znaleźć wiele innych podobnych problemów związanych z użytecznością w całej sieci.

Zmniejszona wykrywalność z powodu braku osi Z.

Ludzie w prawdziwym życiu znajdują przedmioty i poruszają się w trzech wymiarach: osi x, y i z. Kiedy natrafiają na minimalistycznie zaprojektowaną, płaską stronę internetową bez efektów 3D, uzyskują doświadczenie, które różni się od tego, do czego są przyzwyczajeni, z czym są głównie znane.

Oznacza to, że muszą wykorzystaj więcej wysiłku, aby odkryć relacje między obiektami, i zrozumieć hierarchię wizualną strony. Na przykład musimy poświęcić więcej czasu na stronie głównej Microsoft Developer Network, aby wizualnie zdekodować informacje i cel różnych elementów witryny.

Zasadą w projektowaniu UX jest zawsze próba zminimalizowania obciążenia poznawczego użytkownika w celu maksymalizacji użyteczności. Jak widać w wielu przypadkach, nie zawsze dzieje się tak w przypadku płaskiej konstrukcji.

Niska gęstość informacji

Płaska konstrukcja została również skrytykowana za ryzyko niskiego zagęszczenia informacji przez eksperta UX Nielsen-Norman Group.

W swojej krytyce użyteczności systemu Windows 8 wykorzystali przykłady aplikacji Windows Store oraz stronę internetową Los Angeles Times, aby pokazać problemy, które niska gęstość informacji (posiadanie kilku opowiadań na ekranie początkowym, nagłówki bez podsumowań, ledwo rozpoznawalne grupowanie itp.) może powodować z punktu widzenia użyteczności.

Z innego punktu widzenia mniej informacji można również postrzegać jako usuwanie zakłóceń, umożliwiając użytkownikom skupienie się tylko na ważnych sprawach, ale jeśli minimalizm jest przesadzony, może łatwo poświęcić główny cel witryny, tj. Przekształcić informacje w widzów.

The Rise of Flat 2.0

W miarę jak coraz więcej projektantów rozpoznaje błędy użyteczności płaskiej konstrukcji, pojawiła się nowa, bardziej dojrzała wersja, zwana “Płaskie 2.0” lub “Prawie płaski” projekt. Podczas gdy zmiana od skeuomorphism do flat była radykalna, ewolucja płaskiej konstrukcji jest znacznie bardziej nieuchwytna.

Nowy styl jest nadal płaski, ale to dodaje trochę trójwymiarowości do projektów w postaci subtelne cienie, światła, i warstwy. Flat 2.0 - jeśli jest dobrze używany - może naprawić wspomniane problemy z użytecznością, przywracając trochę realizmu (skeuomorfizm) i dodając trochę głębi i szczegółów, zachowując zalety minimalizmu, takie jak usprawnione strony internetowe, przejrzystość i szybszy czas ładowania strony.

Wygląd materiału

Nowy język projektowania Google, nazwany Material Design, jest prawdopodobnie najbardziej znaczącym przykładem stylu Flat 2.0. Google wydało Material Design z Androidem L w 2014 roku. Chociaż Material Design zachowuje główne cechy płaskiej konstrukcji, wykorzystuje pewne metafory z fizyki, aby pomóc użytkownikom szybko znaleźć analogie między światem rzeczywistym a światem cyfrowym.

Material Design używa osi Z, daje subtelna głębia do projektu i inteligentnie wykorzystuje warstwy wg oddzielając je cieniami i animacje. Google ma superkoliczny opis tego, jak działa, i naprawdę warto go przeczytać, aby zrozumieć jego główne zasady i reguły.

Wniosek

Ponieważ dobrzy projektanci zawsze dążą do poprawy doświadczenia swoich użytkowników, branża projektowania stron internetowych ciągle się zmienia. Płaska konstrukcja szybko zastąpiła skeuomorphism, w wyniku czego oparte na siatce, minimalistyczne układy i uproszczone elementy które ostatnio przeszły na stronę internetową (spowodowało to, że niektórzy mówią, że projektowanie stron internetowych staje się nudne, a nawet umiera, ale nie może być dalej od prawdy).

Flat 2.0 daje odpowiedź na postrzegane problemy płaskiej konstrukcji. To inteligentny kompromis między funkcjonalnością, estetyką i użytecznością. Oczywiście nie musimy używać zestawów materiałów interfejsu użytkownika wszędzie, ale zrozumienie stojącej za tym filozofii może dać nam solidne podstawy jak rozwijać nasz własny styl zgodnie z najnowszymi odkryciami w projektowaniu doświadczeń użytkowników.