Ui Design
Tenk nytt brukergrensesnitt for TV-plattformen
En introduksjon til de grunnleggende ingrediensene i et TV-brukergrensesnitt
De aller fleste forbrukere kutter i disse dager kabelen med betal-TV, men dette betyr ikke at de har flyktet fra den store skjermen for å konsumere innholdet.
I følge en datautgivelse fra Nielsen , Amerikanske voksenvisningsvaner fant at 92% av all visning fortsatt foregår på TV-skjermen. Disse tallene er veldig store.
Mer enn 92% av publikum blant amerikanske voksne er fremdeles på TV-skjermen.
Betydningen av å 'se på TV' har endret seg mye de siste tiårene. Vi er ikke lenger begrenset til en kablet og ekstern boks for å fylle skjermene våre; vi bruker Smart TV, eller streamer ved hjelp av plater som Roku, Amazon Fire og Apple TV, eller kobler til videospillkonsoller som Xbox og Playstation. Og hver av disse enhetene tillater et brukergrensesnitt som er langt kraftigere enn den gamle skjermguiden din.
Å betale for å se kringkastings- eller VOD-programmering gjennom abonnementsbaserte online-tjenester som Hulu, Netflix eller Amazon utgjør 26% av globale online-respondenter ( Nielsen ). Dette er et betydelig antall. Imidlertid bekreftet 72% av de spurte at de fortsatt betaler for å se på innholdet deres gjennom en tradisjonell TV-forbindelse.
Betyr dette at den tradisjonelle TV-tilkoblingen er kommet for å bli?
Vi ser alle ut til å tro at tauskjærene der ville representere et høyere tall. Nielsen rapporterer at 116,4 millioner husholdninger i USA forventes å se på TV i løpet av sesongen 2015-16. Dette er et stort antall, og rapporten fant også at rundt 9,5 millioner av disse hjemmene har byttet til gratis OTA TV. Av alle streamingtjenestene der ute ser Netflix ut (60,7%) å være foran spillet fulgt av Amazon Prime Video (49,4%) og Hulu (26%). Jeg tror en av de største grunnene til at folk klipper ledningen er at vi bare vil betale for det vi bruker.
Sammenlignet med datamaskiner og til og med mobiltelefoner, er brukergrensesnittdesign for TV fortsatt et relativt nytt område. Det er også en helt annen plattform, og måten vi bruker innholdet vårt på er forskjellig. Å designe for TV krever et unikt sett med hensyn, inkludert skjermstørrelse og seeravstand, tekniske begrensninger og brukssammenheng. Brukerne har en 'avslappet' opplevelse og sitter i gjennomsnitt 10 meter fra hverandre, og brukergrensesnittet og opplevelsen må gjenspeile dette. I motsetning til nettbrett og telefoner med berøringsskjerm, gjøres interaksjoner på TV-apparater via D-pad (retningskontroll) ved hjelp av en fjernkontroll eller en videospillkontroller, noe som gjør annonsene mer komplekse.
Skjermen
TV-er er ikke som nettbrett og telefoner.
TV-er har endret seg mye over tid fra et stort møbel til en elegant minimalistisk skjerm som henger fra den ene veggen. Når fjernsyn tok opp hele stuen, brukte de teknologi som produserte inkonsekvente bilder på fjernsyn, spesielt nær kantene. For å kompensere for disse problemene ble CRT-TV utsatt for overskanning. Dette betyr bare at bildene ble forstørret litt, slik at kantene ikke var utenfor visningsområdet.
Tradisjonelt forventet kringkastere dette og ønsket å forhindre at deres kritiske informasjon ble vist for nær kantene på skjermen. For å løse dette problemet opprettet de et trygt område for en tittel for å vise teksten uten forvrengning og et trygt handlingsområde der bildet trygt kunne vises.
Av årsaker utenfor vår kontroll er overscan fortsatt en ting ... selv på dine nyere HDTV-er. Mengden overscan er ikke konsistent på tvers av TV-er. For å sikre at all primærinformasjon, for eksempel viktige titler og aksjer, er sikker, må du holde den innenfor sikre marginer.
Det er for tiden ingen 'standard' for sikre handlingsområder, da den primært er definert av selve plattformen. Google holder det trygge området smalt, og Apple er litt mer sjenerøst. Fra mine mange søk på nettet, varierer disse sonene mellom 85% og 95% av en TV-skjerm fra sentrum. For å oppfylle kravene til alle de forskjellige plattformene du kanskje jobber med, vil jeg foreslå at du bruker en sikker sone med 60 px topp- og bunnmarger og 90 px sidemarger. Dette betyr at all din primære informasjon må passe innenfor dette området for å imøtekomme alle TV-skjermer og oppfylle alle plattformkravene.
For å starte det nye TV-brukergrensesnittdesignet ditt, opprett et nytt lerret på 1920 x 1080. Fyllet (sikker sone) skal være 90 piksler på sidene (venstre og høyre), samt 60 piksler for topp og bunn. Du kan få din gratis fil laster den ned her .
Navigasjon
Hvordan 'øverst-nederst-venstre-høyre' danner TV-grensesnitt.
Som designer vil maskinvaren vi designer med definere noen av designmønstrene våre. På mobilen passerer vi, trykker, trykker lenge, trekker osv. For å utføre handlinger. Faner og menyer brukes som navigasjonsmønster på enhetene våre. TV tilbyr et stort lerret som lett kan bli for komplisert hvis det ikke gjøres riktig. Å vise lange innholdsrader for å maksimere mengden av det som er synlig for brukerne har blitt et standardelement i TV-grensesnitt.
I motsetning til mobile enheter som vi kontrollerer med fingrene, styres de fleste TV-brukergrensesnitt av en D-pad og brukes på avstand fra skjermen. Enten på en fjernkontroll eller en gamepad, begrenser D-pad navigasjonen til fire retninger: opp, ned, venstre og høyre.
Hver plattform har også sine egne etablerte konvensjoner. På Xbox, for eksempel, gir utløsere en 'Page Up' og 'Page Down' -kontroll mens støtfangere brukes til å veksle mellom visninger av innholdet. Det er også en rekke 'power user' -knapper på hver plattform som mer erfarne spillere vil være kjent med.
Det andre kritiske elementet i TV-UI er fokusstatus. Uten muligheten til å berøre skjermen eller bruke en mus, må brukerne navigere til elementet de vil velge. Når brukeren navigerer i applikasjonen, bør forskjellige elementer i brukergrensesnittet fremheves for å indikere at et navigasjonselement er i fokus.
Fokuser og fremhev statene når du designer for TV, ettersom de er veldig viktige. Denne fokustilstanden er elementet som fremhever en valgbar komponent og angir brukerens nåværende plassering på skjermen. Måten fokuset vises på kan variere; avhengig av komponenten, vil konsistens imidlertid alltid være nøkkelen. Et tydelig og godt synlig fokus hjelper brukeren til raskt å gjenkjenne sin nåværende plassering på skjermen og gjør det lettere å navigere. Når en bruker øyeblikkelig vender seg bort fra TV-en og deretter ser tilbake på den, bør det være klart hvilket alternativ som er valgt for navigering. Hvert element på skjermen må være tilgjengelig av markøren, og det må alltid være tydelig hvor markøren kan bevege seg videre.
Eksempler på oppsett som kan føre til at brukerne lurer på hvor de er i appen. Disse eksemplene gir ikke tilstrekkelig visuell indikasjon (fokusstatus) av posisjonering. Brukere må til enhver tid kunne se hvor de er uten å måtte bevege seg opp eller ned. Du må være i stand til å se bort fra TV-en og omvendt, og fremdeles vite posisjonen.
Typografi
Les fra ti meter unna.
TV-apper blir ofte referert til som ti fotopplevelser, et begrep som refererer til en felles avstand mellom deg og TV-en din. I motsetning til andre enheter som mobil og stasjonær, er TV satt til å være et 'slapp og nyt' -miljø. Gitt denne avstanden, må vi behandle et litt annet brukergrensesnitt enn det vi ville gjort på nettet eller mobilen.
TV-skjermer er generelt større enn mobile enheter og stasjonære dataskjermer, men sett på en større avstand. Lesbarhet blir et viktig trekk, noe som betyr at størrelsen på teksten og andre elementer må justeres deretter. Avhengig av alder, vil 18 px sannsynligvis være den minste lesbare størrelsen og bare passende for ikke-viktige koder, for eksempel et øyenbryn. Likevel, som en generell tommelfingerregel, bør skriftstørrelsene som er valgt aldri være mindre enn 24 pkt. Dette er hva jeg vil vurdere minimum skriftstørrelse for å imøtekomme hver type bruker.
Nøkkelen til god typografi på TV er å teste hele tiden. Liten, fin type på skjermen ser ren og skarp ut, men en gang på en TV kan den virke blåst ut eller være uforståelig.
Nøkkelen til god typografi på TV er å teste hele tiden. Tynn, liten type på skjermen vil se ren og skarp ut, men når den først er på en TV, kan den virke blåst ut eller bli uforståelig.
Utforskningslinjer
Hva er skannelinjer?
I motsetning til stasjonære, mobile og nettbrett, består bildet på en TV-skjerm av odde og like skannelinjer. TV forvandler disse linjene til faser ved raskt å veksle mellom odde og jevne skannelinjer. Enhver piksel (eller linje med piksler) som faller på en enkelt skannelinje, vil blinke. For å unngå å flimre elementene dine på skjermen, bør du alltid holde linjene dine med partall og ikke tynnere enn 2 piksler. Dette er noe du bør tenke på når du jobber med prosjekter på tvers av plattformer og forbereder deg på å overføre designene dine til berøringsenheter (mobil og nettbrett), hvor du ofte kan finne 1px kantknapper for TV.
En annen måte å unngå disse uskarpe linjene eller formene på er å sørge for at designene dine alltid er perfekte. Følgende idé er et godt eksempel på linjer som er opprettet ved hjelp av uregelmessige tall. Som du kan se, kan vi tydelig se effekten av dette, og det blir hjemsøkende i øynene.
Farge
TV-skjermer har grenser.
Det første du må huske på er at fjernsyn har en mye høyere gammaværdi enn stasjonære, nettbrett- og telefonenheter. Den beste måten å beskrive hvordan gamma påvirker bildekvaliteten er at gamma representerer forskjellen i lysstyrke mellom hvert trinn i gråtonen eller hvor 'raske' svarte blir lysere. Vi oppfatter lys to ganger som bare en brøkdel lysere. Ulike merker og modeller av TV-apparater varierer mye når det gjelder lysstyrke, skjerm og andre innstillinger. Som type, bør farge testes tidlig og ofte på TV.
Noen retningslinjer du må følge når du velger farger: Lyse farger kan være harde i øynene når du ser på TV om natten eller i et mørkt rom. Unngå overforbruk av mettede farger (spesielt rødt) og tung bruk av hvitt på store elementer eller bakgrunner. Ren hvit vil skape glorier og andre visuelle distraksjoner. Når du velger blanke, anbefales det å velge en heksadesimal verdi # f1f1f1 for å unngå flimring. For å øke lesbarheten, sørg for å skape nok kontrast mellom elementene dine
Tommelfingerregelen er å unngå skarpe kanter mellom sterkt kontrasterende farger (spesielt lyse farger sammen med mørke farger), og å unngå “varme” farger som sterkt mettede røde og gule farger. Disse blør lettere enn mindre mettede farger, eller kjøligere farger som blues og greener.
Test alltid farger på en ekte TV for å forstå hvordan fargevalgene dine oversettes til storskjerm. Hvis mulig, kan du forhåndsvise applikasjonen din på flere TV-er, fordi farger kan variere dramatisk mellom TV-modeller. Bare koble til HDMI-kabelen fra TV-en og prøv.
Det grunnleggende
Noen få små ting å vurdere.
Disse elementene skal brukes til å lede designene dine som en helhet. De viktigste hensynene når du designer TV-UI-en din, er enkelhet og lett interaksjon.
Selv om mange av grunnleggende og beste praksis for interaksjonsdesign fremdeles gjelder, brukes fjernsyn på en mer avslappet måte i motsetning til en datamaskin eller mobilenhet. Brukergrensesnittet på en TV skal være klart, enkelt og visuelt. Designet krever enkelhet og klarhet med lav informasjonstetthet. Elementene skal være store og plassert langt nok fra hverandre for å kunne leses på avstand. Presenterer et klart sett med handlinger eller alternativer for hvert skjermbilde.
Denne designen er ren og enkel, og bruker fine store behandlinger på kortet. Fokustilstander oppnås med skala og fallskygger som er justert med resten av det rene designet.
Denne designen er ren og enkel, ved hjelp av fine store kortbehandlinger. Fokustilstander oppnås med skala og fallskygger som er justert med resten av det rene designet. Metadataene er også bare synlige i tilstanden _hover_, slik at brukerne kan holde fokus på gjeldende kort.
Denne designen er ren og enkel, ved hjelp av fine store kortbehandlinger. Fokustilstander oppnås med skala og fallskygger som er justert med resten av det rene designet.
Å skyve grensene for tradisjonelle TV-design. Dette gir en alternativ filmatisk tilnærming til den vanlige 16 x 9-kortbehandlingen som mange andre bruker. Sammenlignet med mange andre tjenester var fokuset å bringe menyen nederst på skjermen
Å skyve grensene for tradisjonelle TV-design. Ved å bringe nyheter frem, fokuserer brukerne på en nyhet om gangen vs. rader og rader med innhold.
Barnas brukergrensesnitt skal være intuitive, morsomme og enkle å bruke. Denne designen viser at selskaper er i stand til å skyve designene sine utover et tradisjonelt rutenettsystem ved å fokusere på 1x1, 2x3 eller til og med 16x9 kort.
Sett det viktigste innholdet eller alternativene først på skjermen slik at de er lett synlige og navigerbare av brukeren. Unødvendige skjermnivåer bør fjernes. Å gå inn på forskjellige nivåer og gå ut igjen bør være enkelt og opplagt.
Den viktigste faktoren når du designer et TV-program er å inkludere klar og presis navigering for brukerdrift. Hvis navigasjonen er tvetydig, vil brukerne føle seg forvirrede og usikre.
Kort sagt, brukerne må alltid vite nøyaktig hvor de er i en applikasjon. Husk at brukeren bare bruker de grunnleggende kontrollene for å navigere. Move, Back, Enter og andre grunnleggende navigasjonsfunksjoner skal være tydelige. Brukere må kunne bruke operasjonene de ønsker med disse handlingene.
Fokuset var å presse grensene for tradisjonell TV-design. Du finner kreative måter å demonstrere det store spekteret av innhold som er tilgjengelig for brukerne, samtidig som det blir intuitivt og enkelt å bruke.
Som designere er jobben vår å lage og designe brukergrensesnitt som lar brukerne få tilgang til innhold på en oversiktlig og enkel å navigere måte. Vi kan ikke forvente at brukerne tar i bruk nye vaner slik at de kan se innholdet vårt. Snarere må vi tilpasse brukergrensesnittene våre slik at de kan betjenes i mørket av noen som gir oss mindre enn deres fulle hensikt, og med en svært begrenset inngangsenhet. Det er en stor utfordring, men den potensielle gevinsten er enorm. Ha det gøy å designe!
