Tryb portretowy versus tryb panoramiczny w mobile designie

Czym różni się tryb portretowy od trybu panoramicznego? Czyli jak projektować ekrany

Koń, jaki jest, każdy widzi. Ekran, jak wygląda, każdy wie. Zatem, definiowanie trybu portretowego i panoramicznego nie do końca ma sens.

Warto jednak już na samym początku zauważyć, że obrót urządzenia mobilnego - z pozycji pionowej do poziomej, z trybu portretowego na panoramiczny - może mieć, co najmniej dwie główne przyczyny.

Są nimi:

• zaangażowanie - wynikające z ciekawości, z zainteresowania treścią, ofertą, funkcjonalnościami, bycia zanurzonym w procesie
• frustracja - wynikająca np. z niedoskonałości zdjęcia w trybie portretowym, bądź nakładania się, zlewania się tekstu ze zdjęciem.

No dobrze, przejdziemy do wskazania różnic między trybami.

Orientacja pionowa i pozioma, proporcje między wysokością i szerokością, sprawiają, że ekrany urządzeń mobilnych wymuszają na użytkowniku aplikacji zupełnie inny sposób:

• percypowania treści (w szczególności dotyczy to zdjęć, infografik, ale także tekstu)
• interakcji z interfejsem - i nie chodzi tylko o nawigację, ale także o mikromomenty oraz obsługę za pomocą gestów (w szczególności gestów wielodotykowych)
• osiągania celów przez użytkowników
• nauki używania aplikacji
• prezentowania i wprowadzania danych przez aplikację i do aplikacji
• obsługi telefonu.

Włączona funkcja autoobracania powoduje wiele problemów z obsługą aplikacji mobilnych, jeśli nie są zaprojektowane z myślą o komfortowym korzystaniu w obu trybach.

Z punktu widzenia UX designera, projektowanie ekranów w orientacji poziomej i pionowej, rodzi równie fundamentalne problemy.

Projektowanie ekranów dotyczy najczęściej sposobu:

• prezentowania contentu, danych w responsywny sposób - dostosowania charakteru, formy, treści, układu, położenia ekranów do możliwości oraz ograniczeń danego trybu na różnych urządzeniach mobilnych
• projektowania interfejsu, nawigacji, formularzy, wprowadzania do nich danych
• projektowania layoutu, w którym użyteczność, funkcjonalność, dostępność, czytelność musi się pokrywać z atrakcyjnością wizualną, elastycznością
• projektowania User Flow, User Journey
• projektowania User Experience - możliwość płynnego przechodzenia między tymi trybami pozwala wybrać bardziej atrakcyjny dla danego użytkownika w danym kontekście.

Oferowanie autentycznego wyboru zawsze jest pożądaną wartością.

Tryb portretowy wydaje się być bardziej naturalnym dla użytkownika urządzeń mobilnych.

Wprawdzie pozwala obsługiwać urządzenie za pomocą tylko jednej dłoni, ale nie zawsze jest idealnym rozwiązaniem dla prezentowania treści, oferowania funkcjonalności.

Jakie różnice można dostrzec w obu trybach? Otóż:

• tryb portretowy jest o wiele mniej przestrzenny i bardziej służy prezentacji detali
• tryb panoramiczny wprowadza większy dystans i daje większe poczucie dostępności przestrzeni (stąd też nazwa tryb krajobrazowy, która czasami jest używana)
• tryb portretowy uwzniośla, jednocześnie w mniejszym stopniu pozwala tworzyć kontekst dla treści
• tryb panoramiczny przekazuje o wiele więcej informacji i jest bardziej naturalny do prezentacji treści zmieniających się w czasie (np. animacji, wideo, gier)
• tryb portretowy lepiej sprawdza się w sytuacjach, gdy użytkownik jest zmuszony nawigować, określać dystans, wskazywać punkty (np. w Google Maps)
• tryb panoramiczny lepiej sprawdza się w sytuacjach, gdy konieczna jest jednoczesna obsługa większej ilości funkcjonalności, przycisków, co ma kluczowe znaczenia dla użytkownika (np. w grach)
• tryb portretowy zapewnia lepsze doświadczenia taktylne użytkownika i jest bardziej wskazany do czytania (większość książek jest drukowana w orientacji pionowej)
• tryb panoramiczny zapewnia lepsze wrażenia wizualne i jest bardziej wskazany do śledzenia ruchu (można śmiało założyć, że niemal 100% kinowych ekranów jest w trybie panoramicznym).

Oba tryby, co zrozumiałe, są także źródłem problemów projektowych.
Związanych głównie z użytecznością aplikacji oraz satysfakcjonującym User Experience.

W Human Interface Guidelines znajdziemy bardzo praktyczne uwagi, dotyczące problemów pojawiających się wraz ze zmianą orientacji urządzenia mobilnego.

Przygotowane przez Apple (iOS) wytyczne rekomendują:

• zachowanie przejrzystości w każdym rozmiarze prezentacji zawartości ekranu - głównie chodzi o czytelność tekstu oraz ostrość obrazów, które powinny być zapewnione bez konieczności wykonywania dodatkowych działań
• zachowanie spójności - elementy interfejsu powinny w każdym z trybów wyglądać podobnie
• umieszczenie najważniejszych elementów w górnej połowie ekranu
• zwrócenie uwagi na zmianę wielkości tekstu, którego rozmiar powinien być dostosowany do trybu, rozmiaru, przekątnej ekranu urządzenia.

Bardzo ciekawe i praktyczne uzupełnienie wytycznych, zaproponowanych przez Apple, znajdziemy w dwóch artykułach Amy Schade pt. „Big Pictures on Small Screens: Remove, Resize or Reorganize” oraz „Small Pictures on Big Screens: Scaling Up from Mobile to Desktop”, autorki związanej z Nielsen Norman Group.

Wprawdzie oba artykuły poruszają problemy projektowania obrazów na urządzeniach mobilnych i desktopowych (zarówno dla platformy iOS, jak i Android), ale część z poczynionych przez Amy Schade uwag znajduje zastosowanie i jest adekwatna także do problemów, jakie pojawiają się przy projektowaniu orientacji portretowej i panoramicznej.

Stworzenie aplikacji mobilnej wymaga ponadto świadomości, że:

• obrazy dobrze prezentujące się na dużych ekranach, na małych ekranach mogą wymuszać konieczność ich przewijania
• łączenie obrazów z tekstem rodzi problem ich czytelności w zależności od skali
• odpowiednie kadrowanie, skalowanie jest konieczne, jeśli chcemy zapewnić maksymalną czytelność obrazów i tekstu
• położenie tekstu powinno być każdorazowo osobno projektowane, tak by zapewnić jego maksymalną czytelność na różnych wielkościach ekranów
• obrazy adekwatne do małych ekranów nie zawsze dobrze się prezentują na większych
• obrazy poprzez niewłaściwe przycinanie, skalowanie mogą tracić na jakości, czytelności, komunikatywności
• położenie i relacje z innymi elementami projektu mogą ulec zakłóceniu w zależności od wielkości danego ekranu.

Problemy wymienione przez badaczkę z NN Group, choć najbardziej widoczne w różnicach między komputerami stacjonarnymi i komórkami, są także zauważalne - przy zachowaniu wszelkich proporcji - w różnicach występujących między trybem portretowym a panoramicznym.

Co do zasady, chodzi przecież o to samo - o zachowanie jakości, funkcjonalności, użyteczności, atrakcyjności projektu w każdym rozmiarze.

Wzorce projektowe w projektowaniu orientacji aplikacji mobilnej (Categories Of Orientation Design)

W artykule Avi Itzkovitcha pt. „Designing For Device Orientation: From Portrait To Landscape” znajdziemy omówienie czterech najważniejszych wzorców projektowania orientacji aplikacji mobilnej. W szczególności uwaga Itzkovitcha skupia się na położeniu, układzie interfejsu aplikacji.

Itzkovitch wyróżnia następujące warianty zmiany interfejsu wraz z przejściem z trybu portretowego do panoramicznego:

• Płynny (Fluid) - w którym układ, położenie, sposób działania ikon nie ulega zmianie, jedynie dostosowują one swoje położenie i wielkość do nowego rozmiaru ekranu
• Rozszerzony (Extended) - w którym układ, położenie oraz ilość ikon ulega zmianie w zależności od wielkości ekranu
• Uzupełniający (Complementary) - w którym po zmianie orientacji są wyświetlane dane oraz funkcjonalności dodatkowe, niedostępne w poprzednim trybie
• Ciągły (Continuous) - w którym dostęp do dodatkowych funkcjonalności jest zapewniony przez obrócenie urządzenia.

Wybór danego wzorca jest oczywiście uzależniony od platformy, rodzaju aplikacji, funkcjonalności, od zadań, jakim służy oraz od preferencji w tym względzie samych użytkowników.

Wskazanie uniwersalnego rozwiązania projektowego jest nie tyle niemożliwe, co po prostu błędne. Konkretne rozwiązania projektowe powinny wynikać z badań UX, benchmarkingu interfejsów, czy testów użyteczności.

Tryb portretowy i panoramiczny w M-Commerce

Edward Scott autor związany z Baymard Institute w artykule pt. „Mobile UX: Scale Product Images Proportionally in Landscape Mode (52% of Sites Don’t)” bardzo wnikliwie omawia wpływ zmiany orientacji oraz skalowania obrazów produktów na sprzedaż i User Experience klientów M-Commerce.

Zgodnie z wynikami badań instytutu, połowa klientów korzystających z mobilnych wersji sklepów internetowych odczuwa potrzebę zmiany trybu z portretowego na panoramiczny, gdy ten pierwszy nie oferuje wystarczająco poglądowego, czytelnego, ostrego zdjęcia produktu.

Mobilne projekty sklepów rzadko uwzględniają tego typu potrzeby, konieczność osiągania celu (zakup) z ich pomocą.

Stawka jest dość wysoka, bowiem jak podaje Edward Scott aż 56% klientów M-Commerce wchodzi na stronę produktu, by zapoznać się z jego zdjęciami.

Zgodnie z wynikami Baymard, zdjęcia produktów w M-Commerce mają zasadnicze znaczenie dla podjęcia decyzji o zakupie. Fotografie produktów należą także do najczęściej używanych treści na stronach sklepów internetowych.

Biorąc pod uwagę zachowania, oczekiwania, przyzwyczajenia, potrzeby niezwykle istotną kwestią, w kontekście projektowania, tworzenia trybu portretowego oraz trybu panoramicznego, jest zadbanie o skalowanie zdjęć.

Aplikacje mobilne sklepów internetowych niestety rzadko oferują skalowane zdjęcia, proporcjonalne do trybu poziomego oraz wielkości ekranu.

Jest to w oczywisty sposób szkodliwe, bowiem nie zapewnia spodziewanej użyteczności zdjęć. A te, jak powiedzieliśmy, są koronnym argumentem, branym pod uwagę przy podejmowaniu decyzji zakupowej.

Niedostosowane do ekranu zdjęcia są powodem wielu frustracji, do których dochodzi na przykład w momencie, gdy próby powiększania zdjęcia w trybie portretowym zmniejszają jego czytelność lub są w ogóle niewykonalne.

Przytoczmy kolejne wyniki Baymard Institute. Aż 40% aplikacji mobilnych sklepów internetowych nie obsługuje gestów dotykowych. Uszczypnięcie (Pinch) nie skutkuje powiększeniem obrazu produktu.

Z kolei aż 52% aplikacji nie skaluje obrazów proporcjonalnie w trybie panoramicznym. Nie wychodzi na przeciw swoim użytkownikom.

A to oznacza wprost problemy z użytecznością aplikacji mobilnej, problemy z User Experience. Kiepska konwersja, niski wolumen sprzedaży nie powinny zatem nikogo dziwić.

Wizualna ocena produktu jest bardzo ważna (orientacja ekranu pełni w niej zasadniczą rolę). Zdjęcie, które pozwala jej - w prosty sposób - dokonać jest niezwykle pożądane.