Skeumorfizm (albo skeuomorfizm – spotkałam się z różnymi zapisami, en. skeuomorphism) w projektowaniu interfejsu użytkownika (UI) odnosi się do praktyki takiego projektowania, które naśladują obiekty lub materiały ze świata rzeczywistego, aby stworzyć wrażenie znajomości lub afordancji w interfejsach cyfrowych. Sam termin „skeuomorphism” pochodzi od greckich słów „skeuos” oznaczających pojemnik lub narzędzie oraz „morphe” oznaczającego kształt lub formę.
Czyli aby upodobnić nasz wirtualny interfejs do rzeczywistych przedmiotów, używamy takich zabiegów graficznych (cieni, gradientów i tekstur), które nam te przedmioty przypominają.
przykład użycia tekstur i cieni żeby imitować półkę na książki (stary widok aplikacji Books w iOS)
I kiedyś robiliśmy to po to, aby uczynić cyfrowe doświadczenia bardziej intuicyjnymi lub rozpoznawalnymi dla (nowych) użytkowników komputerów. Teraz, gdy skeumorfizm wraca (raz na jakiś czas) do łask, robimy to z czysto estetycznych pobudek. Coraz rzadziej będą bowiem pojawiać się użytkownicy, którzy w dorosłym wieku, pierwszy raz stykają się z interfejsem.
Skąd ten skeumorfizm się wziął?
Skeuomorfizm był szeroko stosowany we wczesnych interfejsach cyfrowych, szczególnie w erze, gdy technologia przechodziła ze środowiska fizycznego do cyfrowego. Miał na celu uczynienie nieznanych doświadczeń cyfrowych bardziej możliwymi do powiązania i przyjaznymi dla użytkownika poprzez wykorzystanie istniejącej wiedzy użytkowników na temat obiektów fizycznych. Dotyczył nie tylko wyglądu, ale sposobu działania (dźwięk przewracania strony w ebooku lub animacja przewracania stron, „przesuwanie” suwaków) i stosowanych nazw. Zwróciliście uwagę, że wyrzucamy rzeczy do kosza? Albo dzielimy pliki między folderami?
suwak to przykład przełożenia działania i wyglądu fizycznego interfejsu na cyfrowy
Koncepcja skeumorfizmu jest starsza niż interfejsy cyfrowe. W projektowaniu technikę tę stosowano w celu zapewnienia wskazówek wizualnych i ułatwienia przejścia od tego, co znane do nowego. W kontekście projektowania cyfrowego skeumorfizm zyskał znaczące znaczenie wraz z rozwojem graficznych interfejsów użytkownika (GUI) w latach 80. i 90. XX wieku.
Apple ma tu swoje zasługi
ikona folderu jest przełożeniem papierowych folderów, które używane są do archiwizacji dokumentów
Oryginalny komputer Apple Macintosh, wydany w 1984 roku, wykorzystywał elementy skeumorficzne, takie jak foldery na pulpicie przypominające fizyczne foldery w stylu manila i realistyczne ikony przedstawiające przedmioty codziennego użytku, takie jak kosze na śmieci, dokumenty i szafki na dokumenty. Te wizualne metafory miały na celu pomóc użytkownikom w zrozumieniu funkcjonowania nowego środowiska (cyfrowego) przez wykorzystanie ich doświadczeń w świecie rzeczywistym.
Podejście to ewoluowało w latach 90. i na początku XXI wieku wraz z postępem technologii, umożliwiając tworzenie bardziej skomplikowanych i realistycznych elementów projektu. Interfejsy często zawierały szczegółowe tekstury, gradienty, cienie i odbicia imitujące wygląd materiałów takich jak skóra, drewno, szkło lub metal. Zamiarem było stworzenie emocjonalnej więzi z użytkownikami, zapewnienie poczucia namacalności i zażyłości w przestrzeni cyfrowej.
przykład aplikacji Apple stosujących skeumorfizm w interfejsie
Oprogramowanie Apple, w tym iOS, macOS i różne aplikacje na te systemy tworzone, zawierało bogate, realistyczne tekstury i elementy wizualne. Na przykład aplikacja Kalendarz na iOS przypominała fizyczny kalendarz na biurko z przeszytymi teksturami skóry i papieru. Ikona aparatu przypominał, odbijający światło, szklany obiektyw. A kalkulator stosował wyglądające na wypukłe przyciski, jak żywcem wyjęte z fizycznego urządzenia.
A potem przyszedł Windows
przykład „płaskiego” projektowania w Windows 8
Jednak wraz z postępem technologii opinie na temat skeumorfizmu zaczęły się zmieniać. Krytycy argumentowali, że nadmierne użycie realistycznych tekstur i elementów projektu może utrudniać użyteczność, spowalniać interfejsy i powodować bałagan wizualny (słusznie). Dodatkowo, w miarę jak flat design zyskiwał na popularności, kładąc nacisk na prostotę, minimalizm i przejrzystość, nastąpiło stopniowe odejście od skeumorfizmu.
Punkt zwrotny nastąpił wraz z wydaniem systemu – minimalistycznego, płaskiego Windows 8 i zaczął się szał na flat design (i kafelki). Co prawda ten windowsowy flat, to znowu taki flat udawany (bo jednak w użyciu były, bardzo subtelne gradienty).
Zmiany pojawiły się też w iOS 7 w 2013 r., kiedy Apple odeszło od elementów skeumorficznych. A jak coś Apple zmienia, to oznaczało również znaczącą zmianę w branży, wpływając na wiele innych firm i projektantów do przyjęcia czystszych, bardziej usprawnionych interfejsów. A potem w 2014 Google zaprezentowało pierwszą wersję Material Design i świat pokochał „płaskie” interfejsy. No może nie świat – ale na pewno projektanci i developerzy.
neumorphism – nic nie trwa wiecznie
A zwłaszcza w trendach w UI designie (pisałam o tym na blogu). Więc po fazie na minimalistyczne interfejsy, wróciliśmy do bogaciej zdobionych komponentów.
ten projekt podaje się często jako pierwszy neumorficzny projekt – autor Oleksander Plyuto
Doczekaliśmy się nawet w 2020/2021 trendu, który nazwany uroczo neumorphism, żył głównie na Dribbble i Medium. I choć jego założenia (połączenie skeumorfizmu i flat design) można podpiąć pod właściwie większość trendów i stylów w UI, wizualnie charakteryzował się, no cóż, efekciarstwem.
przykłady neumorphismu z Dribbble
Zaokrąglone rogi, cienkie linie, rozmycia, duża ilość szarej lub białej przestrzeni w połączeniu z efektownymi cieniami i kontrastami by budować wrażenia odbicia światła, były czymś świeżym i zapamiętywalnym. Mimo to, trend w produktach zupełnie się nie przyjął.
Inspiracje nie wzięły się z nikąd. W 2020 roku Apple wraz z aktualizacją systemu macOS Big Sur wprowadził (powiedzmy) skeumorficzne ikony aplikacji, które zostały dotknięte subtelnymi cieniami, głębią, gradientami. Styl nazwany szybko „neumorficznym” mocno wyróżniał się na tle płaskiej konstrukcji Microsoftu.
ikony w macOS Big Sur
Neumorfizm mimo, że zyskał dużą popularność wśród projektantów UI, był również szeroko krytykowany. Głównie ze względu na problemy z dostępnością, szczególnie w obszarze kontrastów (praktycznie żadnych), braku hierarchii wizualnej i generalnie dużego przeciążenia poznawczego. Pomijając potencjalne problemy, jak jego pierwowzór – skeumorfizm, jest po prostu trudnym do skalowania stylem. I wymaga naprawdę mocnych umiejętności w projektowaniu graficznym!
Skeumorfizm dzisiaj?
Dziś, choć elementy skeumorfizmu mogą być nadal oszczędnie stosowane w projektowaniu do określonych celów (lub by wywołać nostalgię), dominujący trend w UI skłania się w stronę projektowania mieszającego minimalistyczne podejście z efektami graficznymi jak cienie czy gradienty. Zdarza mi się od czasu do czasu zobaczyć jakiś post na X zachwycający się skeumorficznymi projektami w Figmie. Jednak częściej są to po prostu zabawy w appce, aniżeli dojrzałe, duże projekty produktów.
Projektanci (na całe szczęście) częściej traktują priorytetowo użyteczność, przejrzystość i responsywność, czerpiąc inspirację z rzeczywistych koncepcji, nie odtwarzając ich tak wiernie jak wcześniej. I to chyba całkiem słuszny kierunek w projektowaniu interfejsów.
Skeumorfizm w UI – wady?
To jeszcze na koniec podsumujmy sobie kilka wad tego stylu:
Jest trudny!
Zacznijmy od tego, najważniejszego z punktów. Żeby zrobić skeumorficzny czy neumorficzny interfejs, potrzebujemy naprawdę solidnych umiejętności projektowania graficznego (zahaczającego wręcz o ilustrację). Nie jestem fanką tych stylów, ale na pewno nie można odmówić ich twórcom talentu – serio! To kawał dobrej, graficznej roboty. I min. dlatego styl ten będzie trudny do skalowania. Niewiele jest osób, które będą robić to dobrze.
Problem z wdrożeniem
A jak już mówimy o trudnościach związanych z umiejętnościami to… nie każdy będzie potrafił takie interfejsy wdrożyć. Nie mówiąc już o tym, że niektórych kreacji projektantów z Dribbbla w ogóle nie udałoby się wdrożyć do działającego interfejsu. A gdyby je wdrożyć to, no cóż, będzie to miało wpływ na punkt kolejny.
Długie czasy ładowania
Bardzo szczegółowe i złożone projekty skeumorficzne często wymagają więcej danych i zasobów do załadowania. Może to spowodować wolniejsze działanie, szczególnie na urządzeniach o ograniczonej mocy obliczeniowej lub wolniejszych połączeniach internetowych, co negatywnie wpływa na użyteczność.
Bałagan i przeciążenie wizualne
Projekty skeumorficzne są zwykle bogate w tekstury, gradienty i cienie. Chociaż mogą tworzyć realistyczne wrażenie, mogą również prowadzić do bałaganu wizualnego, zwłaszcza gdy są nadmiernie używane. Może to przytłoczyć użytkowników i utrudnić nawigację po interfejsach.
Ograniczona skalowalność
Szczegółowe tekstury i realistyczne elementy w projekcie skeumorficznym mogą nie skalować się skutecznie na różnych rozmiarach ekranów. Elementy, które dobrze wyglądają na większych ekranach, mogą stać się mniej wyraźne lub stracić atrakcyjność wizualną po zmniejszeniu.
Wyzwania związane z dostępnością:
Bardzo szczegółowe interfejsy ze skomplikowanymi elementami projektu mogą stanowić wyzwanie dla wielu użytkowników. Użytkownicy mogą spędzać więcej czasu na próbach zrozumienia metafor projektu, zamiast skupiać się na wykonywanym zadaniu.
Zależność od trendu i czasu
Trendy w projektowaniu szybko ewoluują. Projekty skeumorficzne, z realistycznymi imitacjami obiektów fizycznych, mogą szybko stać się przestarzałe w miarę zmiany preferencji projektowych. Może to prowadzić do konieczności częstych aktualizacji i redesignów, aby nadążać za nowoczesną estetyką. A na to kto ma czas, budżet i zasoby?
