Ważne

Windows Phone 8.1 kontra Windows 10 Mobile – wzornictwo i interfejs

Interfejs użytkownika to źródło niezliczonej liczby sporów i kłótni. Powiedzenie, że o gustach się nie dyskutuje nie sprawdza się – szczególnie w Internecie, w sekcji komentarzy.

UI, czyli właśnie user interface, budzi tyle emocji, bo to coś, z czym wchodzimy w interakcję non stop używając jakiegokolwiek systemu operacyjnego. Do tego dochodzi siła przyzwyczajenia, czyli coś, co bardzo trudno zmienić. Wszelkie metamorfozy wyglądu wiążą się ze sprzeciwem części użytkowników – doświadczyli tego administratorzy takich serwisów jak Wykop czy Facebook. Pytanie tylko, czy zawsze ten sprzeciw jest słuszny? Odpowiedź jak zwykle brzmi: to zależy.

Przejście z Windows Phone na Windows 10 Mobile będzie wiązać się z największą zmianą interfejsu od czasu… przejścia z Windows Mobile 6.5 na Windows Phone 7. Wyglądu WP nie można pomylić z niczym innym – duża typografia z fontem Segoe UI oraz piwotowe, przewijane z boku na bok, poziome menu, które warunkowało wygląd aplikacji, których główny ekran był właściwe ciągiem przewijanych podekranów. Do tego tak zwany app bar, czyli pasek akcji na dole ekranu, łatwo nawigowany i wybierany kciukiem – z szybkimi czynnościami i menu kontekstowym.

panorama

Największym zarzutem fanów interfejsu WP8.1 wobec zmian w W10M było zastosowanie hamburgerowych menu. Pomijając szczegóły implementacji tego mechanizmu w języku XAML (SplitView control), chciałbym skupić się na początku na wyjaśnieniu idei hamburgera oraz omówieniu przykładów jego notorycznego nadużywania.

Hamburger menu to taka szuflada – za trzema poziomymi paskami ukrywa elementy nawigacji a czasem też akcji, dostępnych dla użytkownika. Plusy? Elementy menu czy nawigacji zajmują znacznie miej miejsca. Minusy? Trudna dostępność palcem i nieintuicyjna („ukryta”) nawigacja. To w największym skrócie, bo wad i zalet takiego rozwiązania jest znacznie więcej. Co do zasady, jestem przeciwnikiem menu hamburgerowych, co nie znaczy, że uważam, że nie mają one zastosowania w ogóle. Moim zdaniem, zdecydowana większość aplikacji NIE POWINNA stosować hamburgera, bo nawigacja w niej jest na tyle prosta, że nie trzeba jej ukrywać w dodatkowym menu rozwijanym. Dotyczy to szczególnie appek z 2-4 ekranami głównymi bez skomplikowanej nawigacji i funkcji. Wyobraźmy sobie jednak próbę stworzenia interfejsu uniwersalnego Worda czy Excela z całą nawigacją oraz wszystkimi funkcjami… widocznymi cały czas na ekranie. Łatwo sobie wyobrazić bałagan i zamieszanie związane z takim UI. Po drugie, hamburger nie powinien być JEDYNĄ formą nawigacji wewnątrz aplikacji. Powinny znaleźć się w nim jedynie elementy rzadziej używane, takie jak konfiguracja ustawień konta, polityka prywatności czy opcje dodatkowe. Nic nie jest w stanie usprawiedliwić chowanie w hamburgerze często wywoływanych elementów czy funkcji.

Jak problem ten rozwiązuje Microsoft? Windows 10 i Windows 10 Mobile nie przechodzi na hamburgery. Hamburgerowe menu to tylko jedna z wielu opcji dostępnych dla projektantów. Mało tego – piwotowe menu czy paski aplikacji DALEJ są dostępne. Microsoft sam podkreśla, że hamburgery mają zastosowanie w aplikacjach złożonych, z mnogością ekranów i funkcji oraz nieoczywistą nawigacją. Twórcy interfejsów mają do dyspozycji następujące formy nawigacji:

  • menu piwotowe,
  • zakładki,
  • hub,
  • hamburger,
  • widok master-detail.

W zależności od stopnia skomplikowania appki i założeń projektowych, twórca może dowolnie mieszać ze sobą te mechanizmy, czego świetnym przykładem jest aplikacja Money od Microsoftu. Poniżej chciałbym podzielić się z Wami krótką analizą różnic tej aplikacji w wersji dla WP8.1 oraz W10M.


Ekran główny obu aplikacji widoczny na pierwszej parze zrzutów z ekranu pokazuje podstawowe różnice w nawigacji. WP8.1 to tradycyjne panorama view (piwoty), duże fonty oraz zdjęcia i kolejne przewijane zakładki. Dużo bardziej interesująca jest konstrukcja ekranu startowego appki dla W10M. Widać tam dwa podstawowe tryby nawigacji – hamburger do rzadziej używanych funkcji oraz tradycyjny piwot znany z WP8.1 – jednak użyty z zastosowaniem mniejszego fontu, co pozwala na szybszą nawigację nie tylko przewijaniem, ale też bezpośrednim klikaniem w nazwy piwotów. Druga para to ekran „giełdy”. Appka W10M to większa gęstość informacji i lepsza ich separacja. Wygląd WP vs WM to już kwestia gustu i nie chciałbym się na tym skupiać. Warto zwrócić uwagę na różne rozlokowanie przycisku wyszukiwarki. W obu przypadkach na większości smartfonów da się sięgnąć go kciukiem. 

_1

Kolejny ekran to „News”. Tym razem to appka WP ma większą gęstość nagromadzenia informacji. Aplikacja W10M wprowadza dodatkowy filtr kategorii, który zajmuje jednak (niepotrzebnie?) dość dużo miejsca. Ekran ulubionych akcji to typowy widok siatki w przypadku WP8.1, który zmienił się w widok listy w W10M. W dolnym pasku aplikacji (app bar) znajdziemy podobne elementy interakcji z ekranem.

_2

Po przejrzeniu kilku kolejnych porównań łatwo zauważymy, że w appce dla W10M zniknął zegar w prawym górnym rogu, co moim zdaniem nie jest dobrym posunięciem. Ekrany kursów i konwersji walut wyglądają dość podobnie w obu wersjach (widok listy), odzwierciedlając poszczególne podejścia estetyczne do projektowania interfejsów.

_3

Ekran surowców co do zasady jest podobny w obu wersjach, jednak ku zaskoczeniu – po raz kolejny gęstość informacji jest zdecydowanie większa w aplikacji WP8.1. Ostatnie porównanie to menu / dodatkowe opcje. W Windows Phone są one zaimplementowane w postaci listy na jednym z ekranów – co wymaga przewijania w odpowiednim kierunku, żeby się do niego dostać. Element ten, tak jak ukryte menu hamburgerowe, nie jest oczywiste i użytkownik na początku nie wie jak tam trafić i co się tam znajduje.

_4

 

Warto zrozumieć, że hamburger to nie obowiązek w appkach W10 i W10M. Nie jest nawet sugestią. To po prostu jeden z wielu elementów służących do nawigacji i interakcji z aplikacjami. Po kilku dniach łatwo przyzwyczaić się do nowego interfejsu, a nowe aplikacje takie jak Money czy News, dzięki zastosowaniu hamburgerów, dostały dużo nowych opcji, które nie mieściły się w interfejsach prostszych appek dla WP8.1.

Istnieje ryzyko, że projektanci będą lekkomyślnie korzystać z hamburgerów, bez zapoznania się z wytycznymi dla projektantów od Microsoftu. Problem w tym, że tych wytycznych… nie ma. A właściwie nie ma ich w ostatecznej wersji i w jednym miejscu. Porozrzucane są po wielu serwisach firmy (MSDN, channel9, dev.windows.com, itd…). Wbudowane mechanizmy pozwolą jednak łatwiej przenosić aplikacje z innych platform bez konieczności całkowitego przeprojektowywania interfejsu. I właśnie o to chodziło Microsoftowi, gdy firma zdecydowała się wprowadzić kontrolkę SplitView do prostej implementacji hamburgerów. Mnie osobiście cieszy też mniejsza typografia i większa swoboda dla twórców. Nowy Visual Studio 2015 nie ma wbudowanego szablonu interfejsu, co (na szczęście) zapobiegnie powstawaniu setek takich samych aplikacji opartych o panorama view i widok kafelków – co było zmorą Windows Phone.

Jeżeli znalazłeś literówkę w tekście, to daj nam o tym znać zaznaczając kursorem problematyczny wyraz, bądź zdanie i przyciśnij Shift + Enter lub kliknij tutaj. Możesz też zgłosić błąd pisząc na powiadomienia@tabletowo.pl.

Komentarze

  • olo

    Na iOS nie ma hamburgerów

    • barilla

      W samym iOS może i nie ma (nie wiem), ale w bardzo wielu aplikacjach są.

    • jarekt

      w iOS jest przycisk wstecz umieszczony w tym samym poronionym miejscu do hamburger menu. Apple jednak boryka się z tą pozostałością po czasach małych telefonów i szuka sposobów jak z tego wybrnąć. Microsoft natomiast wprowadza HM i brnie w rozwiązania drwiące z ergonomii.

  • barilla

    Tak trochę abstrahując od interfejsu Windowsa mobile, ale pozostając w temacie hamburgera – Google pozbyło się go w ostatniej wersji appki Youtube na Androida. Efekt? Po tygodniu nawigowanie po moich subskrypcjach nadal zajmowało mi 3 razy więcej czasu niż wcześniej więc wróciłem do domyślnej wersji preinstalowanej na telefonie.
    Sedno mojego wywodu jest takie że to że coś nie jest schowane w hamburgerze nie oznacza wcale że jest do tego szybszy dostęp.

    • Otóż to. Czasem hamburger to katastrofa, a czasem najlepsze wyjście. Uwolnienie nawigacji w W10M to krok w dobrym kierunku. A wszystko i tak będzie zależeć od projektantów aplikacji. Na Build był świetny panel na ten temat.

      • jarekt

        Mylicie dwie sprawy. Nikt nie czepia się dodatkowego menu, w którym schowane będą rzadziej używane opcje. Wszyscy natomiast mają problem z jego najgorszym możliwym usytuowaniem. Ważny element UI w lewym górnym rogu ekranu? Przy standardzie ekranów na poziomie 5 cali? Serio?!

        • Skoro jest to miejsce na rzadko używane funkcje, z definicji nie jest to „ważny element UI” ;)

          • jarekt

            Dodatkowe menu to JEST ważny element UI. Element wymagający interakcji użytkownika znajdujący się w najgorszym możliwym miejscu. Tam po prostu nie powinno być żadnego takiego elementu. W WP7 i w WP8 wszystkie elementy wymagające pacania znajdowały się na dole. Da się?

          • Zdefiniuj ważny. Kluczem jest jak często uzywany. Tak jak pisałem, większość appek nie potrzebuje hamburgera. Menu w app barze na dole nadal istnieje w W10 i jest dostępne jako osobna kontrolka w XAML.
            Druga sprawa to telemetria i sposoby używania komorek. Okazuje się, że nasze prywatne przyzwyczajenia to często mniejszość, a nawet margines.

          • Lawstorant

            Mam podstawowe pytanie: czy menu hamburgera da się wyciągnąć na całej krawędzi ekranu (jak w Androidzie), czy tylko za pomocą przycisku? Jeżeli to pierwsze, to nie tak źle, jeżeli drugie…

          • Tak jak w andku, zależy to od woli projektanta

          • jarekt

            Ważny czyli wymagający interakcji użytkownika. UI składa się z wielu elementów z czego tylko te, które wymagają takiej interakcji powinny się znajdować w zasięgu kciuka. Takie elementy zajmują max 20% powierzchni ekranu i nie ma żadnego powodu, żeby umieszczać je w tej najtrudniejszej do dosięgnięcia części. To tak jakbyś włącznik wycieraczek umieścił nad przednią szybą samochodu. Co z tego, że sięgnąć trudno, że zasłaniasz widok na drogę i niepotrzebnie rozpraszasz się w czasie jazdy – przecież wycieraczki włącza się rzadko…

          • Każdy element nawigacji wymaga interakcji użytkownika ;) Każdy jest ważny? Tak samo ważny?

          • jarekt

            Dlaczego tak samo? Kto tak twierdzi i jaka to różnica?
            Jeśli coś wymaga naciśnięcia to przycisk umieszcza się tak aby użytkownik go dosięgnął. To podstawa ergonomii i tak się projektuje samochody, lodówki i każde inne urządzenie. Jeśli chodzi o dobre UI w telefonach to wszystkie elementy nawigacji powinny być dostępne bez zmuszania użytkownika do użycia drugiej ręki. Prościej ci tego już nie wytłumaczę.

          • Makabrycznie upraszczasz. Lewarek w samochodzie też zawsze jest pod ręką? Zakładasz tez, że ze smartfonow w większości korzysta się jedną ręką, co jak pokazują badania konsumenckie – jest założeniem całkowicie fałszywym.

            Zachęcam do poczytania Jona Bella, gościa, który zaprojektował Modern UI i… potem tłumaczył jego wady na podstawie telemetrii z kilku lat.

          • jarekt

            Niczego nie zakładam bo nie ma takiej potrzeby. Nawet jeśli tylko 10% ludzi używa telefonu jedną ręką (co jest bzdurą) to projektant powinien umieścić dotykowe elementy interface’u w takim miejscu, żeby dostępne było zarówno dla tych 10% jak i całej reszty. Mała podpowiedź: lewy górny róg nie jest takim miejscem. Bella czytałem swego czasu i całe jego tłumaczenia były mocno naciągane. Pamiętam absurdalne twierdzenie, że telefonu używa się teraz dwoma rękoma (już to widzę jadąc samochodem, w autobusie czy na chodniku). Ciekawe jest to upieranie się przy hamburgerze w czasie kiedy Google właśnie się z niego wycofuje.
            Co do badań to na tym polega problem Microsoftu od lat. Wszystkie ich decyzje oparte są o badania tak jakby zasadą w firmie było posiadanie takiego dupochronu. Gdzie Microsoft zaprowadziło takie zachowawcze podejście to chyba każdy widzi. Tak samo jak widzi każdy gdzie zaszło Apple ze swoim „wiem lepiej co chce konsument i mam gdzies badania rynku”. Na koniec cytat z H. Forda: „Gdybyśmy zapytali klientów czy chcą samochodu odpowiedzieliby, że nie. Zażądaliby szybszego konia”

          • Polecam Design explosions ;)

            Pewnie ucieszy Cie tez fakt, ze tak prosta appka jak Photos zrezygnowała z hamburgera na rzecz piwota w dzisiejszej aktualizacji. Mnie ucieszył.

        • barilla

          Ale jaki górny lewy róg? Tam jest ikonka, a hamburgera można wysunąć z całej lewej krawędzi. Przynajmniej w Androidzie.
          Swoją drogą w lewym górnym rogu sporo aplikacji na iOS ma przycisk wstecz…

          • jarekt

            Ma. I to ten przycisk wstecz był największą przeszkodą przed wprowadzeniem większych modeli iPhone’a (dlatego Apple tak długo zwlekał). Teraz jest to kula u nogi całego interface’u iOSa i najmniej ergonomiczny jego element, z którym nie bardzo wiadomo co zrobić.

          • jarekt

            Masz rację ale są tu co najmniej dwa problemy z punktu widzenia ergonomii. Pierwszy jest taki, że ludzie nie wiedzą o takiej możliwości (jest nieintuicyjna i wymaga nauki) i większość i tak będzie pacać w ikonkę. Drugi to fakt, że po wysunięciu samo menu nadal jest po złej stronie ekranu a niektóre jego elementy nadal są w lewym górnym rogu poza zasięgiem użytkownika.

Tabletowo.pl
Logowani/Rejestracja jest chwilowo wyłączona