September 2011 - posts - Microsoft User Experience Blog

September 2011 - posts

De <video> tag gebruiken met fallback

Als je al eerder posts op mijn blog hebt gelezen, heb je misschien opgemerkt dat ik recentelijk voor video’s de HTML5 variant gebruik. (Als je het niet hebt gezien heb je waarschijnlijk geen browser die HTML5 ondersteund, dus vlug Internet Explorer 9 installeren :)). Ik kwam de constructie tegen op Channel9 en heb die verder toegepast. Ik dacht dat het misschien handig was om uit te leggen hoe het werkt.

In HTML5 is er nu de <video> tag om video’s te tonen. Daar zitten nog wel wat restricties aan. Zo moet de browser HTML5 ondersteunen en moet door de browser of het operating system de aangeboden codecs (video-formaten) ondersteunen. De simpele vorm hiervan is als volgt:

<video width="400"    
    height="300"    
    src="video.mp4"    
    poster="frame.png"    
    autoplay    
    controls    
    loop>    
</video>

De src property verwijst naar een video-file op een webserver. Je kan dit ook een een <source> tag plaatsen binnen de <video> tag. Er kunnen zelfs meerdere <source> tags worden opgenomen, wat door de browser gebruikt wordt om een optie te vinden die ondersteund wordt. Zo kan je verschillende codecs aanbieden. De meest gebruikte codec is H.264, maar er wordt ook wel gebruik gemaakt van VC-1, Ogg Vorbis en WebM.

De video-tag heeft een soort ingebouwd ‘fallback’ mechanisme. Hij begint bovenaan of dat een optie is die getoond kan worden. Zo niet wordt de volgende geprobeerd, enzovoort. Het mooie van deze constructie is dat je ook een ander stuk HTML kan opnemen als fallback.

Hier een voorbeeld van een fallback zoals die op Channel 9 wordt aangeboden zoals ik die in een eerdere post heb gebruikt. De fallback is een object-tag met een Silverlight applicatie die naar de smooth stream verwijst.

<video poster="http://media.ch9.ms/ch9/0e10/8f3dad24-e925-4494-aabd-9f3d01330e10/MCTSurfacePatty_512_ch9.jpg" controls="">
    <source src="http://media.ch9.ms/ch9/0e10/8f3dad24-e925-4494-aabd-9f3d01330e10/MCTSurfacePatty_low_ch9.mp4">
    <object data="data:application/x-silverlight-2," width="512" type="application/x-silverlight-2" height="288">
        <param name="minRuntimeVersion" value="4.0.50401.0">
        <param name="source" value="http://channel9.msdn.com/scripts/Channel9.xap?v=1.7">
        <param name="initParams" value="mediaurl=http://smooth.ch9.ms/ch9/0e10/8f3dad24-e925-4494-aabd-9f3d01330e10/MCTSurfacePatty.ism/manifest,thumbnail=http://media.ch9.ms/ch9/0e10/8f3dad24-e925-4494-aabd-9f3d01330e10/MCTSurfacePatty_512_ch9.jpg,deliverymethod=adaptivestreaming,autoplay=false,entryid=8f3dad24e9254494aabd9f3d01330e10">
    </object>
</video>

In een andere post heb ik eenzelfde constructie gebruikt in combinatie met een YouTube embedded video als fallback. De fallback zit in dit geval in een iframe-tag.

<video poster="http://blogs.microsoft.nl/blogs/ux/win8-metro-ui.jpg" controls="">
    <source src="http://media.ch9.ms/ch9/cda16b03-c463-47e7-b604-9ef5011c5b25/Demo.mp4">
    <iframe height="345" src="http://www.youtube.com/embed/p92QfWOw88I?rel=0" 
        frameBorder="0" width="560" allowfullscreen="allowfullscreen">
    </iframe>
</video>

Op zich werkt het best aardig zo, maar er zijn zoals altijd voor- en nadelen. Een HTML5 video kan namelijk niet fullscreen worden gemaakt bijvoorbeeld. Daarom zet ik er ook vaak een link bij, zodat iemand de keuze kan maken om het in een ander formaat (Silverlight of Flash) kan zien waarbij fullscreen wel ondersteund wordt.

Als je het verschil in ervaring wil testen in Internet Explorer 9, open dan de Developer Tools in IE (F12) en selecteer Internet Explorer 7 om te zien hoe de pagina werkt in een niet-HTML5 browser.

image

En eigenlijk moet ik een stukje HTML eromheen zetten waarbij de gebruiker ook zelf kan kiezen om af te wijken van de standaard aangeboden oplossing. Smooth streaming in Silverlight bijvoorbeeld levert over het algemeen een betere kwaliteit en ervaring.

En nu maar hopen dat de HTML5 standaard rond video en audio zich ontwikkeld zodat ook DRM en (smooth) streaming ondersteund kunnen worden. Maar ja, je moet altijd wat te wensen hebben.

Windows 8 UI – keuzes maken voor nieuw, oud of beide

Het eerste wat van Windows 8 werd getoond (juni 2011) was de nieuwe user interface die gebaseerd is op Metro. Metro is de design ‘taal’ die ook al op Windows Phone gebruikt wordt. De ‘taal’ bestaat uit een aantal principes die je toepast in de user interface van je applicatie zodat het aansluit bij het gebruik van de rest in de omgeving (Windows 8, Windows Phone, enzovoort). Hieronder het filmpje dat de Windows 8 UI laat zien.

(of bekijk de video op YouTube)

Op de Windows 8 engineering blog is een artikel geplaatst dat verteld welke beslissingen genomen moesten worden rond de user interface van Windows 8. Het idee was om een nieuwe UI te bedenken, gebaseerd op Metro, om beter aan te sluiten bij nieuwe gebruikers, devices, applicaties, enzovoort. Tegelijkertijd zijn miljoenen gebruikers bekend met de Windows UI zoals die nu werkt (WIMP, oftewel Windows Icons, Menu en Pointer). Hoe ga je applicaties als Word, Excel, Outlook, Photoshop, en noem maar op, in een nieuwe omgeving brengen? Is dat wel handig?

Voor dit soort beslissingen staan veel software bouwers, vooral als ze nieuwe versies willen uitbrengen van bestaande software: wanneer kan of moet je drastische wijzigingen aan gaan brengen? En hoe doe je dat zonder je bestaande gebruikers weg te jagen?

Gelukkig wordt user experience steeds belangrijker bij het bouwen van software. Simpel gezegd betekent het dat je primair nadenkt over de gebruiker en wat die met je software wil doen, in plaats van primair na te denken over wat je wilt bouwen en hoe je dat aan wilt bieden. Deze aanpak die steeds belangrijker wordt kan je soms dwingen over de UI na te denken en misschien wel drastische wijzigingen aan te moeten brengen.

Voor Windows 8 is een hele nieuwe UI ontworpen dat verder gaat dan alleen de plaatjes, de visuele effecten en de geluidjes. Er is zelfs een nieuw platform gebouwd waarover op BUILD meer verteld gaat worden. Maar tegelijkertijd is er gezocht naar een manier om de bekende Windows UI ook nog steeds aan te bieden en die zelfs nog te verbeteren waar nodig of mogelijk.

Betekent dit dat Windows voor altijd twee verschillende UI’s blijft houden? Dat moet de toekomst uitwijzen. Het zou best kunnen dat er meer applicaties komen die op basis van Metro gebouwd worden. Misschien op een bepaald moment geldt dat wel voor alle applicaties. Maar het blijft de vraag hoe je gebruikers het best kan blijven ondersteunen. Soms moet je daarvoor drastische wijzigingen doorvoeren die niet direct door gebruikers begrepen worden. En soms moet je zelf meer werk doen om verschillende type gebruikers te blijven ondersteunen.

Bij het nemen van zulke beslissingen moet je zeker niet over een nacht ijs gaan. Je gebruikers kennen is een vereiste, bijvoorbeeld door het defiëren van ‘personas’. En zoals ik in mijn vorige post al aangaf: meten is weten. Als je dan ook nog personen binnen je organisatie of project hebt die met verstand van zaken en vanuit verschillende invalshoeken kunnen meepraten (architecten, developers, interaction designers, UX researchers, business developers, en meer), kan je op een gedegen manier keuzes maken.

Wil je meer weten over Metro? Kijk dan ook even naar deze resources:

Zoek

Go

Dit weblog

Nieuws

Selecteren