Nie wymyślaj koła na nowo. GUI jako oszczędność czasu i rozwiązanie wielu dylematów projektowych. 

Według raportu „Startupy w Polsce – finansowanie” z 2019 roku, koszty założenia startupu w Polsce są 3-krotnie wyższe niż w pozostałych krajach Europy Środkowo-Wschodniej. Ponadto bardzo źle wypadamy pod względem możliwości finansowania nowych przedsięwzięć, natomiast tempo zmian w tym zakresie jest wysoko w czołówce krajów Unii Europejskiej. Takie informacje powodują, że jednymi z głównych elementów, na jakich będą skupiać się twórcy startupów oraz ich zespoły, są cięcie kosztów i szybkie wprowadzanie produktu (i kolejnych jego wersji) na rynek.

Czym jest GUI i ryzyko z nim związane? Obecnie, jeśli cyfrowy produkt kierowany jest do odbiorcy masowego lub po prostu innego niż DevOps czy programista znający CLI (ang. Command Line Interface, czyli wiersz poleceń), niezbędne będzie GUI. Ma go Twój telefon, strona banku, system operacyjny komputera, a także nawigacja w samochodzie. Czym jest GUI? Graficznym interfejsem użytkownika (ang. graphical user interface), a dokładniej: jest to wyrażenie określające graficzny sposób przekazywania informacji oraz interakcji z użytkownikiem przez urządzenie lub aplikację.

Podstawowy interfejs graficzny to miesiące pracy wielu ludzi. Najpierw określenie UI flow i projektów graficznych. Następnie wdrożenie przez programistów, a na końcu testy – manualne, automatyczne i UX. 

Projektowanie GUI powinno opierać się na kilku niezmiernie ważnych zasadach. 

1. Profil użytkownika, czyli znamy grupę docelową.

2. Analogia, czyli znamy inne rozwiązania przyjazne użytkownikowi.

3. Jasność przekazu, czyli użytkownik musi rozumieć, widząc interfejs, jakie funkcjonalności są dostępne.

4. Eliminowanie niespodzianek, czyli działanie interfejsu/aplikacji jest przewidywalne.

5. Skupienie uwagi, czyli eliminacja zbędnych rozproszeń dla użytkownika.

6. Jasny kontekst, czyli użytkownik wie, czego dotyczy wykonywane działanie.

7. Bezpieczeństwo, czyli zaprojektowanie przekazu informacji w taki sposób, aby ograniczyć do minimum błędy użytkownika.

8. Estetyka, czyli zachowanie obowiązujących trendów graficznych, mających wpływ na ogólną ocenę interfejsu.

Jak widać, własne GUI to duże ryzyko, szczególnie na początku. Można stracić wiele czasu oraz pieniędzy, a efekt może być daleki od zadowalającego. Nieatrakcyjny i  nieskuteczny interfejs to kolejne straty, wywołane chociażby brakiem konwersji. Eliminacja problemów „wieku dziecięcego” naszego GUI może utopić projekt w kosztach i to już na samym początku. Nie ma nic złego w korzystaniu z gotowych, sprawdzonych przez rynek i użytkowników rozwiązań. Wiele firm udostępnia swoje projekty w tym zakresie, między innymi Apple (Human Design), Microsoft (Fluent Design System) i Google (Material Design). Do nich należą jedne z najpopularniejszych interfejsów, które omówimy. Dodatkowo chciałbym zwrócić uwagę na fakt, że gotowych GUI jest na rynku tyle, że Twoje zapewne będzie pomieszaniem już istniejących – nawet jeśli nie było to zamierzone. A więc: czy warto wynajdywać koło na nowo?

Google i jego Material Design

Google stworzyło Material Design, chcąc w ten sposób przekazać projektantom i użytkownikom prosty, czytelny i łatwy w adaptacji zestaw elementów graficznych, będący niejako odpowiedzią na trend flat design, który korzysta jedynie z dwóch wymiarów. Pierwszą aplikacją, w której zastosowano to rozwiązanie, było Google Now. W 2014 roku Material Design ogłoszono oficjalnym GUI Google i tak trafił on do Gmail, Google Drive, Google Maps, Google Docs i wielu innych. Choć dokumentacja została stworzona w oparciu o aplikacje mobilne, łatwo można przełożyć ją na projekty stron internetowych.

Mocne strony Material Design

Trójwymiarowa płaszczyzna

Główną cechą Material Design jest ułożenie elementów w trzech wymiarach. Dziwne na pozór założenie pomaga w uświadomieniu odpowiedniej hierarchii elementów i zaakcentowaniu tego przy pomocy cieni. W dokumentacji znajdziemy wyróżnione 3 podstawowe głębokości elementów, znajdujących się nad innymi – czym element jest niżej, tym jego cień jest delikatniejszy.

Żywe, atrakcyjne kolory

Kolory w Material Design powinny być żywe, nie jaskrawe, ale zależy to głównie od projektanta. Do stworzenia palety wykorzystuje się dwa kolory główne: podstawowy i dodatkowy. Podstawowy jest bazą dla kolejnych jego odcieni i oznaczony jest jako 500. Kolejne kolory generowane na jego podstawie mogą być odpowiednio jaśniejsze (50-400) lub ciemniejsze (600-900). 

Dodatkowy kolor powinien stanowczo odznaczać się na tle podstawowego. Będzie wykorzystany do wyróżniania szczególnie istotnych elementów interaktywnych całego projektu, jak przyciski akcji czy linki. Powinien on pochodzić z palety dodatkowej, oznaczonej literą A. Jest zdecydowanie bardziej nasycony. Generator palet jest dostępny w dokumentacji na stronie material.io.

Proste, intuicyjne ikony

Odpowiednio wyglądające ikony to kolejny ważny element tego stylu. Google w swojej bazie udostępnia ich całkiem pokaźną liczbę, ale można tworzyć także własne, według potrzeb. Wszystkie ikony muszą być spójne. W tym celu należy opierać się na kilku podstawowych zasadach:

  • maksymalne uproszczenie ikon, bez zbędnych i skomplikowanych kształtów, które mała rozdzielczość może zdeformować,

  • proste zakończenie linii, rogi zaokrąglone wg. stałej proporcji określonej jako 2dp (wielkość 2dp powinny mieć także wszystkie wycięcia wewnętrzne),

  • unikamy pochylania ikon, nadawania głębi czy stylizacji na trójwymiarowe.

Grafiki dopełniające treści

W tej kwestii Google sugeruje stosować zdjęcia odpowiednio dobrane do treści i klimatu konkretnego projektu, unikać zdjęć tendencyjnych, stockowych oraz słabej jakości czy niskiej rozdzielczości. Jeśli na zdjęciu pojawią się teksty, powinno się je odpowiednio przygotować, nakładając gradient bazujący na czerni. W zależności od jasności zdjęcia powinien mieć on pomiędzy 20 a 40% przezroczystości, aby zapewnić maksymalną czytelność, ale nie przytłaczać przyciemnieniem.

Typografia

Natywnym fontem w Material Design jest Roboto. Dodatkowym, a czasami alternatywnym (szczególnie w przypadku braku znaków specjalnych dla danego języka),
jest Noto.

Apple Human Design

Wchodząc na stronę tego GUI od razu widzimy 4 propozycje zastosowania: macOS, iOS (urządzenia mobilne), watchOS i tvOS. Jasno więc widać, że ten projekt dedykowany jest urządzeniom i ich aplikacjom natywnym. Jest on jednak na tyle dobrze opracowany, że można z łatwością zaadaptować go do wersji internetowej.

Przykładowe lekcje płynące z AHD

W Human Interface Guidelines (oficjalnej dokumentacji Apple) znajdziemy wiele informacji i szczegółów, o jakich początkujący zespół nawet by nie pomyślał – nie tylko graficznych, ale także użytkowych. Od razu widać, że za tą dokumentacją stoją lata doświadczenia i profesjonalizm.

Oświetlenie

Apple sugeruje odpowiednie dopasowanie kolorystyki interfejsu w zależności od źródła i koloru światła – zarówno wewnątrz, jak i na zewnątrz, z uwzględnieniem nawet takich czynników, jak pora dnia czy pogoda. Idealnym przykładem zastosowania tych rozwiązań jest aplikacja monitorująca sen – Sleep Cycle.

Opóźnienie logowania

Firma poleca, aby dać użytkownikowi czas na zapoznanie się z aplikacją, pozwolić mu się w niej rozgościć, aby w odpowiednim momencie zapragnął założyć konto lub się zalogować. Ważne, aby nie było to zbyt szybkie i nachalne w swojej formie.

Terminologia

W oficjalnej dokumentacji znajdziemy również uwagi dotyczące używanych wyrażeń. Ważne, aby nie używać akronimów i technicznego żargonu, którego potencjalni użytkownicy mogą nie zrozumieć. Należy wykorzystywać informacji o swoich odbiorcach, aby dostosować do nich nazewnictwo i zwroty. Apple sugeruje także korzystanie z formy nieoficjalnej, „Ty” i „Twoje”.

Pomoc

System stara się aktywnie poszukiwać momentów, w których użytkowników może utknąć – na przykład podczas gry, która mogłaby wskazać podpowiedzi w trakcie pauzy lub w momencie, gdy gracz nie osiąga postępów. W aplikacjach dostępne są również czaty, chatboty, a nawet całe centrum pomocy.

W aplikacjach mobilnych wykorzystuj standardy

Apple w pierwszej kolejności sugeruje korzystanie z podstawowych i często używanych gestów do sterowania aplikacją – jest ich naprawdę sporo. Po nowe lub rzadko spotykane sięgać warto tylko w ostateczności.

Wrażliwe dane

Apple ostrzega: nigdy, ale to przenigdy, nie pokazuj danych użytkownika w notyfikacjach – to poważnie naraża bezpieczeństwo jego danych i relacje z aplikacją, a także firmą. Może to mieć katastrofalne skutki dla wizerunku firmy na rynku

Fluent Design System od Microsoft

Zapowiedziany w 2017 i wprowadzony z Windows 10 to nie tylko spora zmiana estetyczna, ale także nowa logika wizualna interfejsu i cały zestaw czynności, który ma pomóc w budowie czytelnych interfejsów aplikacji. Jednym z podstawowych elementów FDS jest znacznie szersza możliwość manipulacji głębią: praca z cieniem i oświetleniem, aby w ten sposób zwiększyć czytelność i intuicyjność obsługi. Jedną z ciekawostek jest sugestia, aby twórcy aplikacji odchodzili od systemowego przycisku “wstecz” na rzecz większej niezależności i lepszego dostosowania tego elementu do potrzeb danego interfejsu. Na uwagę zasługuje dobrze opracowana dokumentacja i fakt, że stworzono go jako cross-platformowe rozwiązanie – nie tylko dla Windows, Android, ale także web, a nawet Mac OS czy iOS. Niestety, tempo wprowadzania FDS w aplikacjach windowsowych jest małe, a sam Microsoft – w mojej subiektywnej ocenie – słabo promuje swój GUI.

Alternatywne rozwiązania

Na rynku jest wiele alternatywnych rozwiązań. Niektóre nie są już rozwijane przez zespoły, ale nadal funkcjonują z powodzeniem. Moje Top 10 w 2020 roku poniżej (kolejność losowa).

1. Materialize

Mamy tutaj duży wybór komponentów, gotową nawigację mobilną, a całość bazuje na dobrze znanym Material Design. W projekcie uwzględniono responsywność i 12-kolumnowy grid system. Jako jeden z niewielu zawiera wbudowany icon font. Niestety, nie znajdziemy w zestawie współpracy z flexboxem, czyli elastycznym modelem skrzynkowym, którego używamy do projektowania interfejsu, a rozmiar 267 kb pozostawia wiele do życzenia. W dodatku nie jest dalej rozbudowywany.

2. MUI CSS

Dzięki ograniczeniu animacji do minimum jest bardzo szybki i lekki – jedynie 11kb po zminifikowaniu. Brak zewnętrznych zależności ucieszy wielu. Style od razu wykorzystują SASS (preprocesor CSS pozwalający tworzyć arkusze stylów szybciej i dużo czytelniej) i 12-kolumnowy grid system.

3. Angular Material

Jak sama nazwa wskazuje, został stworzony z myślą o Angularze –otwartym frameworku i platformie do tworzenia aplikacji SPA. W paczce mamy podstawowe funkcje dotyczące dostępności, a pracę z tworzeniem motywów ułatwia SCSS, czyli CSS pisane przez preprocesory. Minusem jest fakt, że ostatnie wersje dokumentacji są niedopracowane. Raczej nie jest to GUI dla początkujących.

4. Cirrus

Tutaj mamy CSS only – nie zawiera JavaScript, jest więc prosty w swojej budowie i zastosowaniu. Prosty w obsłudze, nie zawiera JavaScript. Wykorzystuje zarówno grid, jak i flexbox. Kompletny open source, czyli oprogramowanie wolne, o upublicznionym kodzie źródłowym. Aktywnie utrzymywany na Githubie. Dużo lżejszy od Bootstrapa, a o podobnych możliwościach.

5. Polymer

W Polymer znajdziemy dużą liczbę gotowych komponentów. Zadowoleni będą wielbiciele flexboxa (i tylko flexboxa). Dokumentacja jest bardzo dokładna i rozbudowana.

6. Spectre

Spectre jest lekki i prosty, ponieważ zawiera tylko podstawowe komponenty. Czysty kod, dostępny na Githubie, gdzie jest aktywnie rozwijany.

7. Foundation

Dobrze znane rozwiązanie, które wspiera RTL (czyli right to left – strony dla języków hebrajskiego lub arabskich, gdzie czytamy od prawej do lewej) i – jako jedne z nielicznych – zawiera off-canvas menu, które wyświetla się w bocznym pasku. Warto zauważyć, że standardowo wykorzystuje rem (jednostka używana w CSS), zamiast pikseli. W sieci znajdziemy dużo dodatków do instalacji, a także pełną walidację formularzy. Na niekorzyść działa słaba dokumentacja i mała ilość komponentów. Należy pamiętać natomiast, że ideą Foundation jest wypracowanie i stworzenie własnego stylu, dlatego oryginalny wygląd pozostawia wiele do życzenia.

8. Bootstrap

Jedno z najczęściej wybieranych rozwiązań. Dokumentacja bardzo dobra. Społeczność bardzo duża. Idealny do szybkiego wdrożenia. Aktywnie utrzymywany i rozwijany na Githubie. W sieci znajdziemy dużą liczbę nakładek (motywów), a także buildery takie, jak Pingendo czy Layoutit. Do wad należą duże pliki, a jego ogromna popularność może oznaczać, że nasza strona będzie wyglądała jak wiele innych.

9. Ant Design

Unikalne, rzadko spotykane rozwiązanie. Świeży design, dobra, rozbudowana dokumentacja i duża liczba komponentów powodują, że jest to bardzo interesująca propozycja.

10. Grommet

Tutaj mamy do czynienia z czymś, co sam Grommet tłumaczy jako „częściowo design system, częściowo framework”. Pozwala na pracę zarówno z flexboxem, jak i gridem. Będzie świetny do projektów skupionych wokół dostępności. Posiada wiele gotowych motywów, ale jego samodzielna aranżacja nie sprawi nikomu większych kłopotów.

GUI dla Startupu

Rynek obfituje w różnorakie rozwiązania. Wykorzystanie gotowego interfejsu może być zbawienne, szczególnie w początkowym etapie budowy i promocji produktu. Czas i pieniądze często są głównymi zasobami, gwarantującymi sukces całego przedsięwzięcia. Nie warto ich marnować na rzeczy, które możemy dostać od ręki: sprawdzone i znane użytkownikom. Być może, mimo wszystko, kusi Cię idea tworzenia czegoś swojego, bo wierzysz, że zrobisz to lepiej. Nie wątpię, ale sugeruję, byś zostawił je na przyszłość, gdy środki pozwolą Ci na realizację.

I pamiętaj: jeśli wypuszczasz na rynek produkt idealny, to znaczy, że robisz to za późno.