Centrum Finansowe Bund, Shanghai- budynek z ruchomą fasadą, źródło: http://www.amusingplanet.com/2017/06/the-moving-facade-of-bund-finance.html

W poprzednim wpisie o backend opisałem co się dzieje pod skórą działającej aplikacji. Jednak za to w jaki sposób użytkownik może z niej korzystać odpowiada właśnie frontend. Można to porównać do fasady i wystroju wnętrza. Frontend jest odpowiedzialny nie tylko za wygląd (prezentację wyników na ekranie) ale także za pobieranie poleceń od użytkownika.

Historia w 3 zdaniach

W historii informatyki był czas, w którym użytkownik posługiwał się wierszem poleceń i w trybie tekstowym wydawał polecenia programom. Moda na piękny interface użytkownika rozpoczął się (chyba) od momentu, gdy Apple wprowadziło komputery Macintosh (ale nie był to pierwszy komputer z graficznym interfacem!). Wraz ze wzrostem mocy obliczeniowej, producenci systemów operacyjnych oraz aplikacji mogli posuwać się coraz dalej z graficzną prezentacja interface’u, przez co komunikacja z cyfrowym światem stała się bardzo przyjemna, a nawet uzależniająca.

Meritum sprawy

Frontend to jednak nie tylko kolory i ładne animacje (tzw. wodotryski). Frontend skupia się na ludzkich aspektach. Programista, który zajmuje się tą częścią musi mocno wczuć się w rolę użytkownika, który nie wie jak program działa i jak z niego korzystać. Interface powinien być przyjazny, umożliwiający szybki dostęp do najważniejszych funkcji oraz, co wielu programistów całkowicie pomija, sprawnie i jednoznacznie informować użytkownika o aktualnej sytuacji, w jakiej znajduje się program.

Najczęściej pomijanym elementem interface’u są… komunikaty błędu. Jeżeli już występują, w wielu przypadkach zawierają lakoniczną informację typu “wystąpił błąd” albo jeszcze gorzej “Wystąpił błąd, skontaktuj się z administratorem komputera” (szczególnie nieprzydatne, gdy korzystamy z prywatnego komputera). Ogólnie- sprawdzanie poprawności danych i reagowanie na niepoprawne wartości, obsługa sytuacji wyjątkowych w tej części programów ma kluczową rolę. Po stronie backendu, gdy coś pójdzie nie tak, sprawa jest zazwyczaj prosta: algorytm zostaje przerwany, zmiany cofnięte. W przypadku bezpośredniej komunikacji, kluczowym jest informowanie użytkownika, co dokładnie poszło nie tak, podpowiadając mu, co może zrobić i jak uchronić się przed ponownym wystąpieniem problemu.

Jeden człowiek to za mało

Wsparciem dla programisty, który zajmuje się interfacem użytkownika, są osoby, które zajmują się ludzką stroną programu. Ostatnimi czasy coraz większą rolę przykłada się do tzw. User eXperience (UX- doświadczenie użytkownika) oraz User Interface (UI- interface użytkownika). W tym drugim przypadku może nie ma wielkiej rewolucji- ludzie od UI to przede wszystkim graficy (designerzy), którzy zajmują się dobieraniem odpowiednich barw i rozmiarów elementów w takich sposób, aby najważniejszy przekaz płynący z ekranu był czytelny. UX z kolei zajmuje się “tylko” doświadczeniem użytkownika, czyli w jaki sposób interface ma komunikować informacje, w jaki sposób odbierać polecenia oraz, najważniejsze, jak ma wyglądać “przepływ” użytkownika po aplikacji w konkretnych przypadkach.

Sprawy UX/UI na pierwszy rzut oka wydają się oczywiste i nadmiarowe, teoretycznie tym mógłby zająć się przecież programista. Stworzenie poprawnego i funkcjonalnego interface’u jest jednak nie lada wyzwaniem. Najlepiej jest rozdzielić te trzy rzeczy: funkcjonalność, wygląd i zachowanie, skupić się na każdym z tych aspektów osobno. Rolą programisty jest tutaj scalenie wszystkiego tak, aby zachowywało się w zaprojektowany sposób i wyglądało poprawnie i atrakcyjnie w każdych warunkach.

Technologie

Technologie frontendowe to bardzo obszerne zagadnienie. W zasadzie w każdej technologii, na którymś etapie, znajduje się miejsce na komunikację z użytkownikiem. W przypadku programów “okienkowych” i mobilnych formularze (czyli miejsca z kontrolkami do wpisywania danych) tworzy się przy użyciu np. XML, który następnie jest oprogramowywany w języku, w którym tworzona jest aplikacja. W przypadku technologii web paletą narzędzi jest “święta trójca” HTML + CSS + JS. Każdy z nich posiada swoje frameworki i biblioteki, które usprawniają pracę z nimi:

• HTML może sam w sobie nie posiada frameworków, ale do każdego języka jest mnóstwo narzędzi, które pozwalają na skrótowy zapis tagów, np. mustache czy handlebars.
• CSS, który obecnie w wersji 3 daje już sporo możliwości posiada pre-procesory typu LESS czy SASS, które ułatwiają generowanie klas.
• JS, a w zasadzie ECMAScript przeżywa obecnie swój renesans. Ponieważ komputery i urządzenia mobilne posiadają już naprawdę pokaźną moc obliczeniową, przeglądarki internetowe są w stanie przetworzyć więcej obliczeń, jesteśmy świadkami transformacji stron internetowych w aplikacje internetowe (SPA, PWA). Mamy do czynienia z całą masą wspaniałych narzędzi, takich jak AngularJS, RactJS, Backbone.js oraz wiele innych.

Diabeł twki w szczegółach

Jeżeli ktoś mnie zapyta- to nie ważne, czy interface jest minimalistyczny, przepełniony klimatem, czy używa standardowych kontrolek. Musi być przede wszystkim użyteczny i umożliwić mi zrobienie tego, czego oczekuję od aplikacji.

Jaki jest Twój ulubiony styl interface’u? Co jest dla Ciebie największym wyzwaniem kiedy projektujesz wygląd aplikacji? Czy pisząc program, zastanawiasz się nad komunikatami, które pokazujesz użytkownikowi? Ile razy pominąłeś sprawdzanie wpisanej liczby myśląc “nie, użytkownik nie może być taki głupi, na pewno nie wpisze liczby ujemnej”? Koniecznie podziel się swoimi doświadczeniami w komentarzu.