Ponowne przemyślenie projektu interfejsu użytkownika dla platformy telewizyjnej

Wprowadzenie do podstawowych składników interfejsu telewizora

Ogromna większość konsumentów w dzisiejszych czasach odcina kabel z płatną telewizją, ale nie oznacza to, że unikają dużego ekranu, aby oglądać swoje treści. Według danych opublikowanych przez Nielsen, nawyki oglądania dorosłych w USA wykazały, że 92% wszystkich wyświetleń nadal odbywa się na ekranie telewizora. To są całkiem ogromne liczby.

Ponad 92% oglądalności wśród dorosłych Amerykanów nadal ma miejsce na ekranie telewizora.

Znaczenie „oglądania telewizji” bardzo się zmieniło w ciągu ostatnich kilku dekad. Nie jesteśmy już ograniczeni do pilota i skrzynki kablowej do wypełnienia naszych ekranów; korzystamy z telewizorów Smart TV lub przesyłamy strumieniowo za pomocą krążków, takich jak Roku, Amazon Fire i Apple TV, lub łączymy konsole do gier wideo, takie jak Xbox i Playstation. Każde z tych urządzeń zapewnia interfejs użytkownika, który jest znacznie potężniejszy niż staromodny przewodnik ekranowy.

Płacenie za oglądanie audycji lub programów VOD za pośrednictwem usług online opartych na subskrypcji, takich jak Hulu, Netflix czy Amazon, stanowi 26% globalnych respondentów online (Nielsen). To znacząca liczba. Jednak 72% respondentów potwierdziło, że nadal płaci za oglądanie ich treści za pośrednictwem tradycyjnego połączenia telewizyjnego.

Czy to oznacza, że ​​tradycyjne połączenie telewizyjne nie zniknie?

Wydaje się, że wszyscy sądzimy, że przecinacze do sznurków reprezentują większą liczbę. Nielsen donosi, że w sezonie 2015-16 oczekuje się, że 116,4 mln domów w USA będzie oglądać telewizję. To ogromna liczba, a raport wykazał również, że około 9,5 miliona tych domów przeszło na bezpłatną telewizję OTA. Spośród wszystkich dostępnych usług przesyłania strumieniowego, Netflix (60,7%) wydaje się wyprzedzać konkurencję, a za nim Amazon Prime Video (49,4%) i Hulu (26%). Uważam, że jednym z największych powodów, dla których ludzie odcinają przewód, jest to, że chcemy płacić tylko za to, czego używamy.

W porównaniu z komputerami, a nawet telefonami komórkowymi, projektowanie interfejsów użytkownika dla telewizji to wciąż stosunkowo nowy obszar. To także zupełnie inna platforma, a sposób, w jaki konsumujemy nasze treści, jest inny. Projektowanie dla telewizji wymaga wyjątkowego zestawu rozważań, w tym rozmiaru ekranu i odległości widza, ograniczeń technicznych i kontekstu użytkowania. Użytkownicy są „odprężeni”, siedząc średnio w odległości 10 stóp, a interfejs użytkownika i wrażenia muszą to odzwierciedlać. W przeciwieństwie do tabletów i telefonów z ekranem dotykowym, interakcje na telewizorach odbywają się za pomocą D-pada (kierunkowego panelu sterującego) za pomocą pilota lub kontrolera gier wideo, co zwiększa złożoność.

Wyświetlacz

Telewizory nie są jak tablety i telefony.

Telewizory bardzo się zmieniły z biegiem czasu, od ogromnego, niezgrabnego mebla do eleganckiego, minimalistycznego wyświetlacza wiszącego na ścianie. Kiedyś telewizory zajmowały cały salon, stosowano technologię, która generowała niespójne obrazy na telewizorach, szczególnie w pobliżu krawędzi. Aby zrekompensować te problemy, telewizory CRT poddano overscanowi. Oznacza to po prostu, że obrazy zostały nieznacznie powiększone, aby krawędzie nie znajdowały się poza granicami obszaru wyświetlania.

Tradycyjnie nadawcy przewidzieli to i chcieli uniknąć wyświetlania najważniejszych informacji zbyt blisko krawędzi ekranu. Aby rozwiązać ten problem, stworzyli bezpieczny obszar tytułu do wyświetlania tekstu bez zniekształceń oraz bezpieczny obszar działania, w którym można bezpiecznie wyświetlić obraz.

Z powodów, na które nie mamy wpływu, overscan wciąż istnieje… nawet na nowych telewizorach HD. Ilość overscanu nie jest spójna na wszystkich telewizorach. Aby upewnić się, że wszystkie podstawowe informacje, takie jak tytuły i ważne czynności, są bezpieczne, trzymaj je na bezpiecznych marginesach.

Obecnie nie ma ustalonego „standardu” dla bezpiecznych obszarów działania; jest to w większości definiowane przez samą platformę. Google utrzymuje wąski bezpieczny obszar, a Apple jest nieco bardziej hojny. Z moich wielu wyszukiwań w Internecie, te strefy będą się różnić między 85% a 95% ekranu telewizora od centrum. Aby spełnić wymagania wszystkich platform, na których możesz pracować, sugerowałbym użycie bezpiecznej strefy z marginesami górnymi i dolnymi 60px oraz marginesami bocznymi 90px. Oznacza to, że wszystkie Twoje podstawowe informacje będą musiały zmieścić się w tym obszarze, aby pomieścić wszystkie ekrany telewizyjne i spełnić wszystkie wymagania dotyczące platformy.

Aby rozpocząć nowy projekt interfejsu użytkownika telewizora, utwórz nowe płótno 1920 x 1080. Twoje dopełnienie (bezpieczna strefa) powinno mieć 90 pikseli po bokach (lewy i prawy) oraz 60 pikseli na górze i na dole. Możesz pobrać swój darmowy plik tutaj.

Nawigacja

Jak góra-dół-lewo-prawo kształtuje interfejsy telewizora.

Jako projektant, sprzęt, który projektujemy, zdefiniuje niektóre z naszych wzorców projektowych. Na urządzeniu mobilnym przesuwamy palcem, stukamy, przytrzymujemy, ciągniemy itp., aby wykonywać działania. Karty i menu są używane jako wzorce nawigacji na naszych urządzeniach. Telewizja oferuje wielkie płótno, które łatwo może stać się nadmiernie skomplikowane, jeśli nie zostanie wykonane prawidłowo. Oglądanie długich wierszy treści w celu maksymalizacji ich widoczności dla użytkowników stało się standardowym elementem interfejsów telewizyjnych.

W przeciwieństwie do urządzeń mobilnych, którymi sterujemy palcami, większość interfejsów użytkownika telewizora jest sterowana za pomocą pada kierunkowego i używana z pewnej odległości od ekranu. Niezależnie od tego, czy używasz pilota, czy gamepada, D-pad ogranicza nawigację do czterech kierunków: w górę, w dół, w lewo i w prawo.

Każda platforma ma również swoje własne konwencje. Na przykład na konsoli Xbox wyzwalacze zapewniają kontrolę „Page Up” i „Page Down”, podczas gdy przerywniki służą do przechodzenia między widokami treści. Na każdej platformie znajduje się również wiele przycisków „zaawansowanych użytkowników”, które znają bardziej doświadczeni gracze.

Innym krytycznym elementem w interfejsach użytkownika telewizora jest stan skupienia . Bez możliwości dotknięcia ekranu lub użycia myszy, użytkownicy muszą przejść do elementu, który chcą wybrać. Gdy użytkownik nawiguje w aplikacji, należy wyróżnić różne elementy interfejsu użytkownika, wskazując, że element nawigacji jest w centrum uwagi.

Podczas projektowania telewizji bardzo ważne są stany skupienia i podświetlenia. Ten stan skupienia jest elementem, który wyróżnia wybieralny składnik i wskazuje bieżącą lokalizację użytkownika na ekranie. Forma, w jakiej jest wyświetlany fokus, może się różnić; jednak w zależności od składnika kluczowa będzie zawsze spójność. Wyraźny i dobrze widoczny fokus pomaga użytkownikowi szybko rozpoznać jego aktualną lokalizację na ekranie i ułatwia nawigację. Gdy użytkownik na chwilę odwróci wzrok od telewizora, a następnie odwróci wzrok, powinno być automatycznie jasne, która opcja jest aktualnie wybrana do nawigacji. Każdy element na ekranie musi być dostępny dla kursora i zawsze powinno być jasne, gdzie kursor może się dalej poruszać.

Przykłady projektów, które mogą sprawić, że użytkownicy będą się zastanawiać, gdzie się znajdują w aplikacji. Te przykłady nie zapewniają wystarczającego wizualnego wskazania (stanu skupienia) pozycjonowania. Użytkownicy powinni zawsze wyraźnie widzieć, gdzie się znajdują, bez konieczności poruszania się w górę lub w dół. Powinieneś być w stanie oderwać wzrok od telewizora iz powrotem i nadal znać swoją pozycję.

Typografia

Czytanie z odległości dziesięciu stóp.

Aplikacje telewizyjne są często określane mianem doświadczeń z trzech metrów, co odnosi się do wspólnej odległości między Tobą a telewizorem. W przeciwieństwie do innych urządzeń, takich jak telefony komórkowe i komputery stacjonarne, telewizja ma być bardziej środowiskiem „odpręż się i zrelaksuj”. Biorąc pod uwagę tę odległość, musimy traktować interfejs użytkownika nieco inaczej niż w przypadku korzystania z Internetu lub telefonu komórkowego.

Ekrany telewizorów są zazwyczaj większe niż urządzenia mobilne i monitory komputerów stacjonarnych, ale są oglądane z większej odległości. Ważną cechą staje się czytelność, co oznacza, że ​​należy odpowiednio dostosować wielkość tekstu i innych elementów. W zależności od Twojego wieku, 18px będzie prawdopodobnie najmniejszym czytelnym rozmiarem i nadaje się tylko do nieistotnych etykiet, takich jak zakładka do brwi. Mimo to, zgodnie z ogólną zasadą, wybrane rozmiary czcionek nigdy nie powinny być mniejsze niż 24 punkty. Uważam, że to jest minimalny rozmiar czcionki, aby dostosować się do każdego typu użytkownika.

Kluczem do dobrej typografii w telewizji jest ciągłe testowanie. Cienki, mały tekst na monitorze będzie wyglądał czysto i wyraziście, ale na ekranie telewizora może wydawać się przepalony lub stać się nieczytelny.

Skanuj linie

Co to są linie skanowania?

W przeciwieństwie do ekranów komputerów stacjonarnych, telefonów komórkowych i tabletów obraz na ekranie telewizora składa się z nieparzystych i parzystych linii skanowania. Telewizor renderuje te linie w fazach zmieniających się szybko między nieparzystymi i parzystymi liniami skanowania. Każdy pojedynczy piksel (lub linia pikseli) padający na pojedynczą linię skanowania będzie migotał. Aby uniknąć migotania elementów na ekranie, powinieneś zawsze utrzymywać linie w liczbach parzystych i nie cieńszych niż 2 piksele. Warto wziąć to pod uwagę podczas pracy nad projektami wieloplatformowymi i przygotowywania się do przenoszenia projektów z urządzeń dotykowych (telefonów komórkowych i tabletów), gdzie często można znaleźć się przy tworzeniu przycisków obramowania 1px dla telewizji.

Innym sposobem na uniknięcie tych rozmytych linii lub kształtów jest upewnienie się, że projekty są zawsze idealne do pikseli. Poniższy przykład jest dobrym przykładem linii, które są tworzone przy użyciu liczb nieparzystych. Jak widać, wyraźnie widzimy tego skutki i staje się to niepokojące dla oczu.

Kolor

Wyświetlacze telewizyjne mają ograniczenia.

Pierwszym elementem, o którym należy pamiętać, jest to, że telewizory mają znacznie wyższą wartość gamma niż urządzenia stacjonarne, tablety i telefony. Najlepszym sposobem na opisanie wpływu gamma na jakość obrazu jest to, że gamma reprezentuje poziom różnicy jasności między każdym krokiem w skali szarości lub jak „szybkie” czernie stają się jaśniejsze. Postrzegamy dwukrotnie więcej światła jako tylko o ułamek jaśniejsze. Różne marki i modele telewizorów różnią się znacznie pod względem jasności, wyświetlania i innych ustawień. Podobnie jak typ, kolor powinien być testowany wcześnie i często na telewizorach.

Kilka wskazówek, których należy przestrzegać przy wyborze kolorów: Jasne kolory mogą być ostre dla oczu podczas oglądania telewizji w nocy lub w ciemnym pomieszczeniu. Unikaj nadmiernego używania nasyconych kolorów (zwłaszcza czerwieni) i intensywnego używania bieli w dużych elementach lub tłach. Czysta biel stworzy aureole i inne wizualne zakłócenia. Przy wyborze białych zaleca się wybrać wartość szesnastkową #f1f1f1 , aby uniknąć migotania. Aby zwiększyć czytelność, upewnij się, że tworzysz wystarczający kontrast między elementami

Ogólną zasadą jest unikanie ostrych krawędzi między mocno kontrastującymi kolorami (szczególnie jasnych kolorów obok ciemnych kolorów) oraz unikanie „gorących” kolorów, takich jak bardzo nasycone czerwienie i żółcie. Zaciekają one łatwiej niż mniej nasycone kolory lub chłodniejsze kolory, takie jak błękity i zielenie.

Zawsze testuj kolory na rzeczywistym telewizorze, aby zrozumieć, jak wybrane przez Ciebie kolory przekładają się na duży ekran. Jeśli to możliwe, wyświetl podgląd aplikacji na wielu telewizorach, ponieważ kolory mogą się znacznie różnić w zależności od modelu telewizora. Po prostu podłącz kabel HDMI do telewizora i przetestuj go.

Podstawy

Małe rzeczy do rozważenia.

Te elementy powinny być używane do prowadzenia projektów jako całości. Najważniejszymi względami podczas projektowania interfejsów użytkownika telewizora są prostota i lekka interakcja.

Chociaż nadal obowiązuje wiele podstaw i najlepszych praktyk projektowania interakcji, telewizor jest używany w bardziej swobodny sposób, w przeciwieństwie do komputera czy urządzenia mobilnego. Interfejs użytkownika w telewizorze powinien być przejrzysty, prosty i wizualny. Projekt wymaga prostoty i przejrzystości przy niskiej gęstości informacji. Elementy muszą być duże i wystarczająco oddalone od siebie, aby można je było odczytać z dużej odległości. Przedstaw jasny zestaw działań lub opcji dla każdego ekranu.

Ten projekt jest czysty i prosty, przy użyciu ładnych zabiegów z dużymi kartami. Stany skupienia są osiągane za pomocą skali i cieni, które są dopasowane do reszty czystego projektu. Metadane są również widoczne tylko po najechaniu kursorem, co pozwala użytkownikom skupić się na bieżącej karcie.

Umieść najważniejsze treści lub opcje jako pierwsze na ekranie, aby były łatwo widoczne i dostępne dla użytkownika. Niepotrzebne poziomy ekranów muszą zostać usunięte. Wchodzenie na różne poziomy i ponowne wydostawanie się musi być łatwe i oczywiste.

Najważniejszym czynnikiem podczas projektowania aplikacji telewizyjnej jest uwzględnienie przejrzystej i dokładnej nawigacji dla operacji użytkownika. Jeśli nawigacja jest niejednoznaczna, użytkownicy poczują się zdezorientowani i niepewni.

Krótko mówiąc, użytkownicy powinni zawsze dokładnie wiedzieć, gdzie się znajdują w aplikacji. Pamiętaj, że użytkownik używa tylko podstawowych elementów sterujących do nawigacji. Przenieś, Wróć, Enter i inne podstawowe funkcje nawigacyjne muszą być jasne. Użytkownicy powinni mieć możliwość korzystania z operacji, które chcą z tymi akcjami.

Naszym zadaniem jako projektantów jest tworzenie i projektowanie interfejsów użytkownika, które zapewniają użytkownikom dostęp do treści w sposób przejrzysty i łatwy w nawigacji. Nie możemy oczekiwać, że użytkownicy przystosują się do nowych nawyków tylko po to, by mogli zobaczyć nasze treści. Musimy raczej dostosować nasze interfejsy użytkownika, aby mogły być obsługiwane w ciemności przez kogoś, kto daje nam mniej niż jego pełne intencje i z bardzo ograniczonym urządzeniem wejściowym. To nie lada wyzwanie, ale potencjalne korzyści są ogromne. Miłego projektowania!

• • •

Dalsza lektura na blogu Toptal Design:

• eCommerce UX – przegląd najlepszych praktyk (z infografiką)
• Znaczenie projektowania zorientowanego na człowieka w projektowaniu produktu
• Najlepsze portfolio projektantów UX – inspirujące studia przypadków i przykłady
• Zasady heurystyczne dla interfejsów mobilnych
• Projekt przewidujący: jak tworzyć magiczne doświadczenia użytkownika