Ui-Suunnittelu
TV-alustan käyttöliittymäsuunnittelun uudelleentarkastelu
Johdanto TV-käyttöliittymän perusaineisiin
Suuri enemmistö kuluttajista katkaisee nykyään johdon maksullisella televisiolla, mutta se ei tarkoita, että he olisivat irtautuneet suurelta näytöltä kuluttaakseen sisältöään. Tiedotteen mukaan Nielsen , Yhdysvaltain aikuisten katselutottumukset havaitsivat, että 92% kaikesta katselusta tapahtuu edelleen televisioruudulla. Nämä ovat melko valtavia lukuja.
Yli 92% yhdysvaltalaisten aikuisten katselusta tapahtuu edelleen televisioruudulla.
Television katselun merkitys on muuttunut paljon viime vuosikymmenien aikana. Emme ole enää rajoitettu kaukosäätimeen ja kaapeliruutuun täyttämään ruudut; käytämme älytelevisioita tai suoratoistamme kiekoilla, kuten Roku, Amazon Fire ja Apple TV, tai yhdistämme videopelikonsoleita, kuten Xbox ja Playstation. Ja jokainen näistä laitteista sallii käyttöliittymän, joka on paljon tehokkaampi kuin vanhanaikainen ruudun opas.
Lähetysten tai VOD-ohjelmien katselun maksaminen tilauspohjaisten verkkopalvelujen, kuten Hulu, Netflix tai Amazon, kautta edustaa 26% maailmanlaajuisista verkkovastauksista ( Nielsen ). Tämä on merkittävä määrä. Kuitenkin 72% vastaajista vahvisti maksavansa edelleen sisällönsä katselemisesta perinteisen TV-yhteyden kautta.
Tarkoittaako tämä, että perinteinen TV-yhteys on täällä pysyäksesi?
Me kaikki näytämme ajattelevan, että siellä olevat johdinleikkurit edustaisivat suurempaa määrää. Nielsen raportoi, että 116,4 miljoonan kodin Yhdysvalloissa odotettiin katsovan televisiota kaudella 2015-16. Tämä on valtava määrä, ja raportissa todettiin myös, että noin 9,5 miljoonaa näistä kodeista on siirtynyt ilmaiseen OTA-televisioon. Kaikista siellä olevista suoratoistopalveluista Netflix (60,7%) näyttää olevan edellä peliä, jota seuraavat Amazon Prime Video (49,4%) ja Hulu (26%). Uskon, että yksi suurimmista syistä ihmisten katkaisemiseen on, että haluamme maksaa vain siitä, mitä käytämme.
Tietokoneisiin ja jopa matkapuhelimiin verrattuna käyttöliittymien suunnittelu televisioon on edelleen suhteellisen uusi alue. Se on myös pohjimmiltaan erilainen alusta, ja tapa, jolla kulutamme sisältöä, on erilainen. TV: n suunnittelu vaatii ainutlaatuisen näkökulman, mukaan lukien näytön koko ja katsojan etäisyys, tekniset rajoitukset ja käyttökonteksti. Käyttäjät ovat 'kevyt selkä' -kokemuksessa, istuvat keskimäärin 10 metrin päässä, ja käyttöliittymän ja kokemuksen on heijastettava tätä. Toisin kuin kosketusnäyttöiset tabletit ja puhelimet, vuorovaikutus televisioissa tapahtuu D-padin (suuntasäätöalustan) kautta kaukosäätimellä tai videopeliohjaimella, mikä mainostaa monimutkaisuutta.
Näyttö
Televisiot eivät ole kuin tabletit ja puhelimet.
Televisiot ovat muuttuneet paljon ajan myötä valtavasta kömpelöstä huonekalusta tyylikkääseen minimalistiseen näyttöön, joka ripustetaan seinälle. Kun televisiot vievät koko olohuoneen, he käyttivät tekniikkaa, joka tuotti epäjohdonmukaisia kuvia televisioissa, etenkin lähellä reunoja. Näiden ongelmien kompensoimiseksi CRT-televisioihin tehtiin yliskannaus. Tämä tarkoittaa vain sitä, että kuvia suurennettiin hieman, joten reunat eivät olleet katselualueen rajojen ulkopuolella.
Perinteisesti lähetystoiminnan harjoittajat ennakoivat tämän ja halusivat välttää, että kriittiset tiedot näkyisivät liian lähellä näytön reunoja. Tämän ongelman ratkaisemiseksi he loivat otsikkoturvallisen alueen tekstin näyttämiseksi ilman vääristymiä ja toiminnalle turvallisen alueen, jossa kuva voidaan näyttää turvallisesti.
Hallitsemattomista syistä yliskannaus on edelleen asia ... jopa uusissa HD-televisioissasi. Yliskannauksen määrä ei ole sama televisioissa. Varmista, että kaikki ensisijaiset tietosi, kuten otsikot ja tärkeät toimet, ovat turvallisia, pitämällä ne turvamarginaalien sisällä.
Tällä hetkellä ei ole asetettu vakiotoimintaa turvallisille toiminta-alueille. sen määrittelee enimmäkseen foorumi itse. Google pitää heidän turvallisen alueensa kapeana ja Applen on hieman antelias. Verkossa tekemieni monien hakujen perusteella nämä vyöhykkeet vaihtelevat 85-95%: n keskellä olevasta televisioruudusta. Jotta voisimme täyttää kaikkien työskentelyalustojesi vaatimukset, suosittelen käyttämään turvallista vyöhykettä, jossa on 60 kuvapisteen ylä- ja alamarginaalit ja 90 kuvapisteen sivumarginaalit. Tämä tarkoittaa, että kaikkien ensisijaisten tietojesi on oltava tällä alueella, jotta kaikki tv-näytöt voidaan sijoittaa ja kaikki alustan vaatimukset täyttävät.
Aloita uuden television käyttöliittymäsuunnittelusi luomalla uusi 1920 x 1080 -kankaalle. Täyte (turvallinen alue) tulee olla 90 pikseliä sivuilla (vasemmalla ja oikealla) sekä 60 pikseliä ylhäällä ja alhaalla. Voit saada ilmaisen tiedoston lataa tästä .
Navigointi
Kuinka ylös-alas-vasemmalle-oikealle muotoillaan TV-rajapintoja.
Suunnittelijana laitteisto, jota suunnittelemme, määrittelee joitain suunnittelumalleja. Mobiililaitteessa pyyhkäisemme, napautamme, painamme pitkään, vedämme jne. Suorittaaksesi toimintoja. Välilehtiä ja valikoita käytetään laitteidemme navigointikuvioina. Televisio tarjoaa suuren ison kankaan, josta voi tulla liian monimutkainen, ellei sitä tehdä oikein. Pitkien sisältörivien näkymisestä käyttäjille näkyvän määrän maksimoimiseksi on tullut television käyttöliittymien vakioelementti.
Toisin kuin mobiililaitteet, joita ohjaamme sormillamme, suurinta osaa TV: n käyttöliittymistä ohjataan D-tyynyllä ja niitä käytetään etäisyydellä näytöstä. Olipa kaukosäädin tai peliohjain, D-pad rajoittaa navigoinnin neljään suuntaan: ylös, alas, vasemmalle ja oikealle.
Jokaisella alustalla on myös omat vakiintuneet käytäntönsä. Esimerkiksi Xboxissa liipaisimet tarjoavat 'Page Up' - ja 'Page Down' -hallinnan, kun puskurit ovat tottuneet vaihtamaan sisältönäkymien välillä. Kullakin alustalla on myös joukko 'tehokäyttäjä' -painikkeita, jotka kokeneemmat pelaajat tuntevat.
TV-käyttöliittymien toinen kriittinen elementti on tarkennustila . Käyttäjien on siirryttävä valitsemaansa elementtiin ilman mahdollisuutta koskettaa näyttöä tai käyttää hiirtä. Kun käyttäjä liikkuu sovelluksessa, eri käyttöliittymän elementit on korostettava osoittaen, että navigointielementti on fokusoitu.
Kohdistus ja korostustilat televisiota suunniteltaessa ovat erittäin tärkeitä. Tämä tarkennustila on elementti, joka korostaa valittavaa komponenttia ja tarkoittaa käyttäjän nykyistä sijaintia näytöllä. Muoto, jossa tarkennus näkyy, voi vaihdella; komponentista riippuen johdonmukaisuus on kuitenkin aina avainasemassa. Selkeä ja hyvin näkyvä tarkennus auttaa käyttäjää tunnistamaan nopeasti nykyisen sijaintinsa näytöllä ja helpottaa navigointia. Kun käyttäjä vilkaisee hetken poispäin televisiosta ja palaa sitten katseensa, pitäisi olla automaattisesti selvää, mikä vaihtoehto on tällä hetkellä valittuna navigointiin. Kohdistimen on oltava jokaisen ruudun kohteen ulottuvilla, ja sen on aina oltava selvää, missä kohdistin voi siirtyä seuraavaksi.
Esimerkkejä malleista, jotka voivat saada käyttäjät miettimään missä he ovat sovelluksessa. Nämä esimerkit eivät tarjoa riittävästi visuaalista osoittamista (tarkennustila) paikannuksesta. Käyttäjien pitäisi pystyä näkemään selvästi missä tahansa, ilman että heidän täytyy liikkua ylös tai alas. Sinun pitäisi pystyä katsomaan poispäin televisiosta ja taaksepäin ja silti tietää sijaintisi.
Typografia
Lukeminen kymmenen metrin päästä.
TV-sovelluksia kutsutaan usein kymmenen jalan kokemuksiksi, termi, joka viittaa yhteiseen etäisyyteen sinun ja television välillä. Toisin kuin muut laitteet, kuten mobiili ja työpöytä, televisio on asetettu enemmän 'kevyelle selälle ja rentoudu' -ympäristöön. Tämän etäisyyden vuoksi meidän on kohdeltava käyttöliittymää hieman eri tavalla kuin webissä tai mobiilissa.
TV-näytöt ovat yleensä suurempia kuin mobiililaitteet ja pöytätietokoneen näytöt, mutta niitä katsellaan kauemmas. Luettavuudesta tulee tärkeä ominaisuus, mikä tarkoittaa, että tekstin ja muiden elementtien kokoa on muutettava vastaavasti. Iästäsi riippuen 18 kuvapistettä olisi todennäköisesti pienin luettavissa oleva koko ja sopisi vain tarpeettomille tarroille, kuten kulmakarvojen välilehdelle. Silti nyrkkisääntönä valitun kirjasinkoon ei pitäisi koskaan olla pienempi kuin 24 pistettä. Tätä pidän fonttikoon pienimpänä kaikentyyppisille käyttäjille.
Avain hyvään typografiaan televisiossa on testata jatkuvasti. Näytön ohut, pieni tyyppi näyttää siistiltä ja terävältä, mutta kerran televisiossa se saattaa tuntua räjähtävältä tai käsittämättömältä.
Skannaa viivat
Mitä ovat skannausviivat?
Toisin kuin pöytä-, mobiili- ja tablet-näytöt, televisioruudun kuva koostuu parittomista ja parillisista viivoista. Televisio renderöi nämä linjat vaiheittain vuorotellen nopeasti parittomien ja parillisten linjojen välillä. Kaikki yksittäiset pikselit (tai pikselirivit), jotka putoavat yhdelle skannauslinjalle, välkkyvät. Vältäksesi esineiden välkkymisen näytöllä, sinun tulee aina pitää viivat parillisina numeroina ja olla ohuimpia kuin 2 pikseliä. Tämä on otettava huomioon työskenneltäessä alustojenvälisissä projekteissa ja valmistauduttaessa siirtämään mallejasi kosketuslaitteilta (mobiili- ja tablet-laitteilta), joissa voit usein löytää yhden kuvapisteen reunuspainikkeita televisiota varten.
Toinen tapa välttää näitä epäselviä viivoja tai muotoja on varmistaa, että suunnittelusi ovat aina kuvapisteitä täydellisiä. Alla oleva esimerkki on hyvä esimerkki riveistä, jotka luodaan epätasaisella numerolla. Kuten näette, voimme selvästi nähdä tämän vaikutukset, ja siitä tulee hämmentävää silmille.
Väri
TV-näytöillä on rajoituksia.
Ensimmäinen mielessä pidettävä seikka on, että televisioilla on paljon suurempi gamma-arvo kuin pöytätietokoneilla, tableteilla ja matkapuhelimilla. Paras tapa kuvata, miten gamma vaikuttaa kuvan laatuun, on se, että gamma edustaa harmaasävyjen jokaisen vaiheen kirkkauseron tasoa tai kuinka 'nopeat' mustat kirkastuvat. Havaitsemme kaksinkertaisen valon olevan vain murto-osan kirkkaampi. Televisioiden eri merkit ja mallit vaihtelevat suuresti kirkkauden, näytön ja muiden asetusten suhteen. Tyypin tavoin värit tulisi testata aikaisin ja usein televisioissa.
Muutama ohje, jota on noudatettava värejä valittaessa: Kirkkaat värit saattavat kärsiä silmistä, kun katsot televisiota yöllä tai pimeässä huoneessa. Vältä tyydyttyneiden värien (erityisesti punaisen) liiallista käyttöä ja valkoisen voimakasta käyttöä suurissa elementeissä tai taustoissa. Puhdas valkoinen luo haloja ja muita visuaalisia häiriötekijöitä. Valittaessa valkoisia on suositeltavaa valita #f1f1f1 Hex-arvo välkkymisen välttämiseksi. Luettavuuden parantamiseksi varmista, että luot riittävän kontrastin elementiesi välille
Yleissääntönä on välttää teräviä reunoja erittäin kontrastisten värien välillä (erityisesti kirkkaat värit tummien värien vieressä) ja välttää 'kuumia' värejä, kuten erittäin tyydyttyneitä punaisia ja keltaisia. Nämä vuotavat helpommin kuin vähemmän tyydyttyneet värit tai viileämmät värit, kuten blues ja vihreät.
Testaa värit aina todellisessa televisiossa ymmärtääksesi, miten värivalinnat kääntyvät suurelle näytölle. Jos mahdollista, esikatsele sovellustasi useissa televisioissa, koska värit voivat vaihdella dramaattisesti televisiomalleissa. Liitä vain HDMI-kaapeli televisiosta ja testaa se.
Perusteet
Pieniä huomioitavia asioita.
Näitä elementtejä tulisi käyttää suunnittelun ohjaamiseen kokonaisuutena. Suurimpia huomioita TV-käyttöliittymien suunnittelussa ovat yksinkertaisuus ja kevyt vuorovaikutus.
Vaikka monet vuorovaikutussuunnittelun perusteet ja parhaat käytännöt Televisiota käytetään edelleen rennommalla tavalla, toisin kuin tietokonetta tai mobiililaitetta. Television käyttöliittymän tulisi olla selkeä, yksinkertainen ja visuaalinen. Suunnittelu vaatii yksinkertaisuutta ja selkeyttä pienellä informaatiotiheydellä. Elementtien on oltava suuria ja riittävän kaukana toisistaan, jotta ne voidaan lukea kaukaa. Esitä selkeä joukko toimintoja tai vaihtoehtoja kullekin näytölle.
Tämä muotoilu on puhdas ja yksinkertainen, käyttäen hyviä isoja korttihoitoja. Tarkennustilat saavutetaan skaala- ja pudotusvarjoilla, jotka ovat linjassa muun puhtaan muotoilun kanssa. Metatiedot näkyvät myös vain hiirellä, jolloin käyttäjät voivat keskittyä nykyiseen korttiin.
Perinteisten TV-mallien rajojen ylittäminen. Tämä tarjoaa vaihtoehtoisen elokuvamaisen lähestymistavan tavalliseen 16 x 9 -korttikäsittelyyn, jota monet muut käyttävät. Verrattuna moniin muihin palveluihin lähestymistapa oli tuoda valikko näytön alareunaan
Perinteisten TV-mallien rajojen ylittäminen. Tuo uutiset eturintamaan, käyttäjät keskittyvät yhteen uutiseen kerrallaan verrattuna riveihin ja riveihin.
Lasten käyttöliittymien tulisi olla intuitiivisia, hauskoja ja helppokäyttöisiä. Tämä muotoilu osoittaa, että yritykset voivat työntää mallejaan pidemmälle kuin perinteinen ruudukkojärjestelmä, joka keskittyy joko 1x1, 2x3 tai jopa 16x9 kortteihin.
Aseta tärkein sisältö tai vaihtoehdot ensin näytölle, jotta ne ovat helposti nähtävissä ja käyttäjän navigoitavissa. Tarpeettomat näytön tasot on poistettava. Eri tasoille siirtymisen ja uudestaan ulos pääsyn on oltava helppoa ja ilmeistä.
Tärkeintä TV-sovellusta suunniteltaessa on sisällyttää selkeä ja tarkka navigointi käyttäjän toimintoja varten. Jos navigointi on epäselvää, käyttäjät tuntevat hämmennystä ja epävarmuutta.
Lyhyesti sanottuna käyttäjien tulisi aina tietää tarkalleen missä he ovat sovelluksessa. Muista, että käyttäjä käyttää vain perusohjaimia navigointiin. Siirrä, Palaa, Enter ja muiden navigointitoimintojen on oltava tyhjät. Käyttäjien tulisi voida käyttää haluamiaan toimintoja näissä toiminnoissa.
Tavoitteena oli ylittää perinteisen televisio-suunnittelun rajat. Löydä luovia tapoja osoittaa käyttäjien käytettävissä olevan sisällön laajamittaisuus ja tehdä siitä samalla intuitiivinen ja helppokäyttöinen.
Suunnittelijoina meidän tehtävämme on luoda ja suunnitella käyttöliittymiä, jotka antavat käyttäjille pääsyn sisältöön selkeällä ja helposti navigoitavalla tavalla. Emme voi odottaa käyttäjien mukauttavan uusia tapoja vain nähdäkseen sisältömme. Meidän on pikemminkin mukautettava käyttöliittymiämme siten, että joku, joka antaa meille täyden aikomuksensa vähemmän, ja hyvin rajoitetulla syöttölaitteella, voi käyttää niitä pimeässä. Se on suuri haaste, mutta mahdollinen korvaus on valtava. Pidä hauskaa suunnittelussa!
• • •
Lue lisää ApeeScape Design Blogista:
- eCommerce UX - yleiskatsaus parhaista käytännöistä (infografiikan kanssa)
- Ihmiskeskeisen suunnittelun merkitys tuotesuunnittelussa
- Parhaat UX-suunnittelijoiden salkut - inspiroivia tapaustutkimuksia ja esimerkkejä
- Heuristiset periaatteet mobiililiittymille
- Ennakoiva suunnittelu: Kuinka luoda maagisia käyttökokemuksia
