Strona główna > Mobile > Tryb portretowy versus tryb panoramiczny w mobile designie
Journal

Tryb portretowy versus tryb panoramiczny w mobile designie

Oceń artykuł:

Satysfakcja, jakiej doświadczamy korzystając z urządzeń mobilnych, czasami ma swoje źródło w sposobie prezentacji contentu.

Czasami jej źródłem jest sposób zaprojektowania interfejsu użytkownika. A nie tak znów rzadko sposób położenia, orientacja ekranu.

Przykładem niech będzie oglądanie filmów oraz konwersacja na czacie.

Zdecydowana większość użytkowników preferuje oglądanie filmów - w szczególności pełnometrażowych - w trybie panoramicznym, który wydaje się bardziej naturalny i wygodny dla tego rodzaju aktywności.

Z kolei rozmowa na czacie, w której użytkownik jest o wiele bardziej aktywny, jest wygodniejsza, gdy używamy trybu portretowego.

Orientacja ma ogromne znaczenie dla User Experience, w szczególności, gdy jej zmiana przychodzi z tak dużą łatwością na urządzeniach mobilnych.

Tryb portretowy (Portrait / Vertical) oraz tryb panoramiczny (Landscape / Horizontal) są oferowane w urządzeniach mobilnych jako funkcja standardowa.

Pytanie jednak, czy wszystkie aplikacje mobilne są projektowane z myślą o wygodnym używaniu aplikacji w obu trybach?

Czy projektowanie dla obu trybów, orientacji jest również standardem?

Te pytania oczywiście prowokują kolejne. Czy wszystkie aplikacje powinny być projektowane w obu trybach? Z doświadczenia przecież wiemy, że nie każda aplikacja po obróceniu urządzenia mobilnego z trybu portretowego przechodzi w tryb panoramiczny. Dlaczego tak się dzieje?

W jakich sytuacjach dobrym wzorcem jest oferowanie obu trybów? Jakie są zalety obu trybów?

Jednym słowem, jeśli chcecie się dowiedzieć, w jaki sposób ekrany smartfonów, ich orientacja wpływa na UX aplikacji mobilnych, koniecznie przeczytajcie nasz artykuł.

Zapraszamy!

Tworzymy interfejsy aplikacji webowych, mobilnych. GUI i głosowe.

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.

tryb portretowy tryb panoramiczny - przykłady

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.

google calendar - tryb panoramiczny
Google Calendar - tryb panoramiczny

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.

W jaki sposób kontekst użycia, użytkownicy wpływają na projektowanie orientacji aplikacji mobilnej

Orientacja urządzenia mobilnego ma niezwykle ważne znaczenie. Szczególnie, jeśli spojrzymy na problem jej projektowania od strony kontekstów użycia telefonu i aplikacji. Także parametrów technicznych, jakimi się charakteryzuje dany ekran oraz tego, kto używa aplikacji, telefonu, ekranu.

Przykładowo, projektowanie aplikacji dla dzieci musi uwzględniać ich możliwości poznawcze, możliwości małej motoryki, która u dzieci - w szczególności młodszych - jest o wiele słabiej rozwinięta niż u dorosłych i nastolatków.

tryb panoramiczny w google play
Google Play - tryb panoramiczny

Projektowanie aplikacji dla seniorów musi liczyć się z ograniczeniami, wynikającymi z wieku. Dla dzieci, seniorów ekrany w położeniu poziomym częstokroć są o wiele bardziej naturalne i wygodne, bowiem zapewniają im większą stabilność, kontrolę nad urządzeniem.

Warto także pamiętać, że preferencje odnośnie trybu, orientacji urządzenia są także uwarunkowane kontekstem, sytuacją w jakiej korzysta się ze smartfona, z aplikacji mobilnej, w jakim patrzy się na ekrany.

W ruchu zdecydowanie częściej preferowana jest orientacja portretowa. Duże bloki tekstu zdecydowanie szybciej, łatwiej, wygodniej się czyta w orientacji panoramicznej, w stanie spoczynku.

Zmienną, którą także należy brać pod uwagę jest położenie przycisków w danym urządzeniu mobilnym (np. służących do regulacji głośności, czy wykonywania zdjęcia). Wielkość urządzenia, jego poręczność, waga także mają znaczenie.

tryb portretowy - google calendar
Google Calendar - tryb portretowy

Zaangażowanie, rola drugiej dłoni, wykorzystywanej do obsługi urządzenia mobilnego (np. nawigowania w M-Commerce), interakcji z interfejsem aplikacji mobilnej rośnie wraz z wielkością przekątną ekranu oraz ciężarem urządzenia mobilnego.

Parametry techniczne samego wyświetlacza (np. czytelność, jaskrawość obrazu przy dużym nasłonecznieniu) także odgrywają ważną rolę.

Czytelność obrazu przy nasłonecznieniu może wpływać na chęć zmiany trybu wyświetlania. Aplikacja mobilna powinna być projektowana także ze świadomością takich sytuacji i potrzeb.

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.

Aplikacja mobilna sklepu Ikea - tryb panoramiczny
Aplikacja mobilna sklepu Ikea - tryb panoramiczny

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.

Aplikacja mobilna YouTube - tryb panoramiczny
Aplikacja mobilna YouTube - tryb panoramiczny

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.

Dostępność (Accessibility) aplikacji mobilnych w trybie portretowym oraz w trybie panoramicznym

Projektowanie obu trybów - portretowego i panoramicznego - ma także znaczenie, jeśli chcemy zapewnić jak największą dostępność aplikacji mobilnej.

Tworząc aplikację pamiętajmy, że choroby wzroku oraz choroby pogarszające widzenie wykluczają wielu użytkowników.

Choroby, które zaburzają widzenie sprawiają, że projektanci muszą po prostu zadbać, by ich projekty zapewniały dostępność interfejsów także dla takiej grupy użytkowników.

Aplikacja TeleMedica - tryb panoramiczny
Aplikacja TeleMedica - tryb panoramiczny

Podobnie zresztą rzecz się ma, gdy spojrzymy na możliwości motoryczne. Ograniczenia zręczności manualnej także sprawiają, że jeden z trybów może być przedkładany nad drugi.

Aplikacja mobilna, w której zadbano o możliwie szeroką dostępność jest aplikacją, w której oba tryby są zoptymalizowane pod kątem m.in. czytelności, płynności nawigacji, łatwości używania wszystkich typowych dla aplikacji mobilnych gestów.

Choć w niektórych rodzajach aplikacji dany tryb może się wydawać bardziej naturalny (np. dostępność trybu panoramicznego w aplikacjach platform streamingowych), to jednak oferowanie tylko jednego trybu jest ewidentnym błędem projektowym.

Tworzenia aplikacji nie sposób sobie wyobrazić tylko w jednym, domyślnym trybie portretowym.

Zasadność projektowania obu trybów jest tyleż oczywista, co czasami może być źródłem pewnego zaskoczenia.

Aplikacja Facebook - tryb panoramiczny
Aplikacja Facebook - tryb panoramiczny

Przykładowo, oferowanie obu trybów ma znaczenie nie tylko w aplikacjach, które służą rozrywce, ale także w M-Commerce. Dlaczego?

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.

Aplikacja mobilna VLC - tryb panoramiczny
Aplikacja mobilna VLC - tryb panoramiczny

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.

Aplikacja mobilna OLX - tryb panoramiczny
Aplikacja mobilna OLX - tryb panoramiczny

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.

Aplikacja mobilna słownika Diki - tryb panoramiczny
Aplikacja mobilna słownika Diki - tryb panoramiczny

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.

Tryb portretowy vs tryb panoramiczny w mobile designie. Podsumowanie

  1. Orientacja, projektowanie aplikacji mobilnych dla obu trybów wyświetlania – portretowego i panoramicznego - ma ogromne znaczenie dla pozytywnego User Experience.
  2. Orientacja ekranu w aplikacji mobilnej ma także wpływ na wysokość współczynnika konwersji oraz często silnie wpływa na wolumen sprzedaży.
  3. Tryb portretowy (Portrait / Vertical) oraz tryb panoramiczny (Landscape / Horizontal) są oferowane w urządzeniach jako funkcja standardowa.
  4. Najczęściej zmiana trybu - z portretowego na panoramiczny i na odwrót – często ma dwie przyczyny. Pozytywną (zaangażowanie) oraz negatywną (frustracja użytkownika).
  5. Orientacja pionowa i pozioma wymuszają na użytkowniku aplikacji mobilnych zupełnie inny sposób percypowania treści, interakcji z interfejsem, osiągania celów.
  6. W Human Interface Guidelines znajdziemy bardzo praktyczne uwagi, dotyczące problemów pojawiających się wraz ze zmianą orientacji urządzenia mobilnego.
  7. Apple (iOS) rekomenduje zachowanie przejrzystości w każdym rozmiarze prezentacji zawartości ekranu, zachowanie spójności, zwrócenie uwagi na zmianę wielkości tekstu.
  8. Projektując z myślą o orientacji aplikacji mobilnej (Mobile UX Design) warto mieć w pamięci, że obrazy dobrze prezentujące się na dużych ekranach, na małych ekranach mogą wymuszać konieczność ich przewijania.
  9. Łączenie obrazów z tekstem rodzi problem ich czytelności w zależności od skali.
  10. Odpowiednie kadrowanie, skalowanie jest konieczne, jeśli chcemy zapewnić maksymalną czytelność obrazów i tekstu.
  11. Obrazy adekwatne do małych ekranów nie zawsze dobrze się prezentują na większych.
  12. Orientacja urządzenia mobilnego ma niezwykle ważne znaczenie, jeśli spojrzymy na problem jej projektowania od strony kontekstów użycia telefonu i aplikacji oraz tego kto je używa.
  13. Preferencje odnośnie trybu, orientacji urządzenia (np. tryb panoramiczny) są także uwarunkowane kontekstem, w jakim użytkownik korzysta z telefonu, aplikacji mobilnej.
  14. Zaangażowanie, rola drugiej dłoni wykorzystywanej do interakcji z interfejsem aplikacji mobilnej rośnie wraz z wielkością oraz ciężarem telefonu.
  15. Czytelność obrazu przy nasłonecznieniu może wpływać na chęć zmiany trybu wyświetlania.
  16. Projektowanie równocześnie dla obu trybów ma także znaczenie, jeśli chcemy zapewnić jak największą dostępność aplikacji mobilnej.
  17. Projekt aplikacji wymaga zrozumienia przede wszystkim powodów zmiany orienatacji oraz zysków z niej płynących dla użytkownika.
  18. Aplikacja mobilna, w której zadbano o możliwie szeroką dostępność dla każdego rodzaju użytkownika jest aplikacją, w której oba tryby są zoptymalizowane pod kątem m.in. czytelności, płynności nawigacji.
  19. Projektowanie aplikacji mobilnej wymaga uwzględnienia łatwości używania wszystkich typowych dla aplikacji mobilnych gestów.
  20. Tworzenie aplikacji mobilnej powinno uwzględniać oferowanie obu trybów. Preferewanie tylko jednego trybu (najczęściej portretowego) jest ewidentnym błędem projektowym.
  21. Ekran w aplikacji mobilnej powinien być wykorzystywany w obu trybach, dzięki czemu aplikacja mobilna jest w stanie zaspokoić różnorodne oczekiwania użytkowników.
  22. Zgodnie z wynikami badań instytutu Baymard połowa klientów korzystających z mobilnych sklepów internetowych odczuwa potrzebę zmiany trybu z portretowego na panoramiczny.
  23. Przyczyną są przede wszystkim niedoskonałe, nieczytelne zdjęcia produktu.
  24. Zdjęcia produktów w M-Commerce mają zasadnicze znaczenie dla podjęcia decyzji o zakupie.
  25. Fotografie produktów należą do najczęściej używanych treści, informacji na stronach sklepów internetowych.
  26. Aplikację mobilną w M-Commerce należy projektować przede wszystkim pod kątem dostępności użytecznych zdjęć produktów. Użytkownik nie mając zapewniononego do nich bezproblemowego dostępu bardzo często nie decyduje się na zakup. Nawet jeśli jest na zaawansownym etapie ścieżki zakupowej.
  27. Zapewnienie poprawnego ich wyświetlania w każdej orientacji urządzenia mobilnego poprawia współczynnik konwersji i zwiększa wolumen sprzedaży.
Oceń artykuł:
Journal / JPG / Radek Misiewicz - avatar
UX Writer i badacz z wykształcenia + doświadczenia. Zbiera wiedzę The Story i dzieli się nią na Journalu.

Jesteś zainteresowany współpracą z nami? Zajrzyj do Portfolio