Intuicyjność i ergonomia Modern UI w praktyce — studium przypadku
Wiele się mówi i pisze o interfejsie Modern UI. Tu osobista dygresja: jakoś nie mogę przeboleć zmiany nazwy tego „produktu”, ale niestety rozumiem prawa rynku, a zwłaszcza rynku praw ;) Metro czy Modern UI, na myśl powinny przychodzić pojęcia takie jak ergonomia, intuicyjność, wygoda i szybkość pracy, jak mawia sam Microsoft — content before chrome. I ja właśnie o tej ostatniej zasadzie chciałem trochę się rozpisać, a do spisania tych przemyśleń skłoniła mnie bezpośrednio dodana wczoraj recenzja do naszej aplikacji dobreprogramy w Sklepie Windows autorstwa Marka:
Wreszcie naprawione logowanie działa super dobra robota
Ktoś niezorientowany w temacie mógłby pomyśleć, że logowanie wcześniej nie działało. Otóż działało prawidłowo :) Zarówno w kwestii technicznej (wpisanie nicka/e-maila i hasła skutkowało logowaniem, działało zapamiętywanie), jak i filozoficznej (odbywało się zgodnie z zaleceniami Microsoftu dotyczącymi tworzenia aplikacji Modern UI). Mimo to, jako osobie w dużej mierze maczającej palce w tej aplikacji, serce mi się kraje na myśl, że wielu naszych użytkowników nie potrafiło się zalogować lub wręcz uznało, że logowanie nie działa. Powyższa recenzja, komentarze do newsa o wprowadzeniu takiej opcji, a także szybka poprawka we wczorajszej aktualizacji aplikacji są tego najlepszym dowodem. Dlaczego tak się stało?
Content before chrome: ukrywamy interfejs, uwidaczniamy treść
Jedna z kluczowych zasad tworzenia aplikacji Modern UI głosi, że nie należy eksponować na ekranie aplikacji („płótnie") żadnych elementów interfejsu, które nie są niezbędne do realizacji podstawowych zadań tejże aplikacji. Miejsce wszelkich przycisków i przełączników dotyczących preferencji użytkownika znajduje się w panelu Ustawienia, który jest udostępniany przez system. Polecenia takie jak „Wytnij” czy „Odśwież” wędrują z kolei do paska poleceń (AppBar), który również jest udostępniany przez system. Innymi słowami mówiąc, nie musimy tworzyć tych miejsc, bo każda aplikacja Modern UI posiada panel Ustawienia oraz pasek AppBar, nawet jeśli z nich nie korzysta.
Do panelu ustawień dostajemy się schodząc myszką do prawego rogu ekranu lub przesuwając palcem z prawej krawędzi ekranu w lewo i wybierając Ustawienia — proste jak drut ;) AppBar wyświetlamy klikając prawym przyciskiem myszy na ekranie lub przesuwając palcem z dolnej krawędzi ekranu w górę. Warto wiedzieć, że o ile panel Ustawienia posiada także Pulpit, tak AppBar znajduje się tylko w aplikacjach. Nasza aplikacja też ma swoje polecenia w AppBarze — na przykład przydatne polecenie „Odśwież”...
Nie wszyscy wiedzą, że Microsoft poddaje każdą aplikację zgłaszaną do Sklepu Windows dość skrupulatnemu procesowi weryfikacji. Proces ten trwa czasem nawet kilka dni i dotyczy nie tylko pierwszego zgłoszenia, ale każdej kolejnej aktualizacji. Nasz rekord to trzy dni robocze ;) Podczas tej weryfikacji sprawdzane są automatycznie podstawowe rzeczy typu czy aplikacja się uruchamia, czy się nie zawiesza w typowych scenariuszach, czy właściwie obsługuje tryb uśpienia, a także czy nie zawiera wirusów lub czy jej kod nie posiada oczywistych luk lub błędów. To zwykle dzieje się bardzo szybko — w ciągu kilku godzin. Nigdy nie zdarzyło nam się, aby aplikacja została na tym etapie odrzucona :) Można bowiem samemu wykonać te testy lokalnie dzięki narzędziu Windows App Cert Kit, jeszcze przed wysłaniem do oficjalnej certyfikacji.
Drugi etap certyfikacji to weryfikacja „organoleptyczna”, czyli ręczna. Dedykowany tester, a z tego co wiem w polskim oddziale Microsoftu od jakiegoś czasu też takie osoby na „pełnym etacie” się znajdują, uruchamia aplikację i po prostu z niej korzysta. Testowana jest kompletna funkcjonalność, łącznie na przykład z logowaniem. Stąd pierwsza nasza próba zgłoszenia aktualizacji obejmującej logowanie zakończyła się odrzuceniem z powodu niepodania testerowi przykładowych danych umożliwiających zalogowanie (choć według naszej interpretacji było to wymogiem tylko wówczas, gdy logowanie jest niezbędne do pracy aplikacji — ale tak czy inaczej nie był to żaden problem, dane udostępniliśmy). Tutaj jednak tester, a nie automat, sprawdza, czy aplikacja została prawidłowo zaprojektowana zgodnie z wytycznymi Modern UI, a ich jest od groma.
To co z tym logowaniem?
To co napisałem wyżej na temat umieszczania przycisków i przełączników w panelu Ustawienia, a nie na ekranie aplikacji, to zasada ogólna. Wytyczne Modern UI określają także szczegółowo zasady do kilku najczęściej stosowanych funkcji. Jedną z takich szczególnych funkcji jest właśnie logowanie. Zasady mówią tutaj, że powinno ono znaleźć się w panelu Ustawienia, chyba że samo uruchomienie aplikacji wymaga zalogowania (np. Facebook), wówczas powinno ono wypełniać pierwszy ekran aplikacji.
The Settings charm is the best place for users to find and manage their account settings.
Zasada ta nawiązuje do słusznej poniekąd teorii, że jeśli wszystkie aplikacje będą miały logowanie w tym samym miejscu, użytkownik łatwo je odnajdzie.
Niestety coś najwidoczniej nie zagrało i okazało się, że nie jest to rozwiązanie tak intuicyjne, jak Microsoft planował. Większość naszych użytkowników nie wiedziała, że logowania należy szukać w panelu Ustawienia. Co więcej, ci sami użytkownicy w bliższej konfrontacji przyznawali nam, że wcześniej sądzili iż panel Ustawienia zarezerwowany jest dla ustawień systemowych — bo tam przecież wchodzi się do Panelu sterowania...
Naszym błędem było zbyt duże zaufanie do wytycznych Microsoftu, a także pogłębienie problemu przez brak podlinkowania nicka oraz awatara z głównego ekranu do tego właśnie panelu. Błąd ten naprawiliśmy wczorajszą aktualizacją. Kliknięcie w awatar lub nick na ekranie spowoduje teraz bezpośrednio wyświetlenie panelu logowania. Osadzanie kontrolek do wpisywania nazwy i hasła na samym ekranie obok kafelków newsów i programów wydaje nam się kontekstowo niesłuszne. Gdybyśmy jednak umieścili przycisk Zaloguj na stałe w widocznym miejscu na ekranie aplikacji lub od razu pola do wprowadzania nazwy i hasła, prawdopodobnie nasza aplikacja zostałaby odrzucona podczas certyfikacji.
Z podobnymi problemami spotkaliśmy się w procesie certyfikacji już wcześniej, stąd lekcja, że należy jednak tych zasad dość skrupulatnie przestrzegać. Jako wypadek przy pracy potraktujmy dopuszczenie aplikacji Gadu—Gadu, która praktycznie nie działała, a jak już się uruchomiła, to wyglądała koszmarnie brzydko i była zrobiona kompletnie nie w konwencji Modern UI. Widząc to poczułem się mocno zniechęcony jako deweloper do podążania za jakimikolwiek wytycznymi Modern UI... Pomijając jednak ten przypadek, certyfikacja jest dość surowa.
Udostępnić newsa na Facebooku? A jak?
Przykład logowania w naszej aplikacji pokazuje, że intuicyjność interfejsu Modern UI w typowych zadaniach pozostawia jeszcze wiele do życzenia. Przykłady można mnożyć: ilu z Was wie, że przeglądając newsa albo artykuł z dobrychprogramów w aplikacji Modern UI można wybrać z menu systemowego opcję Udostępnij, a następnie wysłać linka mailem lub opublikować na swoim Facebooku? Prawdopodobnie większość użytkowników nie wie, że takie opcje tam się znajdują... :(
Znów jednak umieszczenie ich na ekranie aplikacji będzie niemile widziane w trakcie procesu certyfikacji:
Don’t provide alternate ways to invoke sharing Rely on the share charm and share window. Do not create a Share command on your app bar, or create a Share button in your app window or context menus.
Nawet gdyby na złość Microsoftowi umieścić taki przycisk obok treści, obniży to „zgodność” aplikacji z konwencją Modern UI. A chodzi przecież o to, by w każdej aplikacji udostępnianie treści czy logowanie przebiegało podobnie i było przewidywalne, a także by treść nie była przytłaczana zbędnymi dodatkami — taka jest idea Modern UI, content before chrome...
Podobnie sprawa się ma z wyszukiwarką, która — może w to nie uwierzycie — też jest dostępna w naszej aplikacji ;) Tu jednak nie zagłębiam się w temat, bo nie ukrywam, że jest to jeszcze praca nieskończona i wyszukiwarkę czeka kilka poprawek. Na pewno jednak zderzymy się wówczas z tym samym problemem — pola do wyszukiwania zgodnie z wytycznymi w naszej aplikacji nie może być na ekranie głównym :
Rely on the Search charm to let users search for content in your app. If search is not the primary purpose of your app, don't add search UI to your app. If users search your app from in—app UI, your app’s rank in the list of apps could suffer making your app less visible to users. Additionally, Windows will not track users' search history for searches performed using in—app search UI.
Epilog
Prawdopodobnie wszystkie powyższe problemy wynikają z faktu, że mało użytkowników w ogóle korzysta z Modern UI (ja na przykład nie korzystam w ogóle, nawet z ekranu Start — po uruchomieniu przechodzę od razu do Pulpitu), mało mamy aplikacji, a spośród tych które mamy, mało wykorzystuje logowanie. To jednak było do przewidzenia i Microsoft powinien nad tym problemem się pochylić. Na razie, jak ja to widzę, to użytkownicy otrzymują wiele "wadliwych" aplikacji, deweloperzy zniechęcają się i nabierają dystansu do wytycznych Modern UI, a w efekcie aplikacje nie są i nie będą tak „fajne” jak powinny. Osobiście bardzo podoba mi się wygląd i idea działania aplikacji Modern UI, w większości są faktycznie przemyślane, płynne i dość czytelne... o ile się wie, gdzie można się czego spodziewać ;) Dla kogoś, który po raz pierwszy się z tym zetknie, może to być problem.