Blue Angels Case Study
•
1 gostou•689 visualizações
Presented at HTML5 Video Summit - November 2011 by Tony Walt
![Blue Angels Web Site ,[object Object]](https://image.slidesharecdn.com/html5videosummitv03-16x9-111107112810-phpapp02/85/Blue-Angels-Case-Study-1-320.jpg)
![Tony Walt ,[object Object],Tweeting: @tonyjwalt, #effectiveui](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (18)
Semelhante a Blue Angels Case Study
Semelhante a Blue Angels Case Study (20)
Mais de Effective
Mais de Effective (20)
Último
Último (20)
Blue Angels Case Study
- 14. Non-HTML5 Browsers and Mobile
- 15. Video Ripping Inconsistent Playback
- 18. Video Ripping
- 20. Event Model
- 21. Atypical Use
- 23. Thank you.
Notas do Editor
- Tony Walt Director of 3D and Motion Design == My team is responsible for == Planning, Creation, Implementation of media across EUI projects Today – use of HTML5 Video – Navy Blue Angels Hashtag EffectiveUI @tonyjwalt
- User Experience Agency Build applications focused on users Improving digital interactions Enhancing emotional engagement with companies and their brands
- One group we had pleasure to work with Flying aerobatic team established in 1946 To enhance the Navy and Marine Corps recruiting and credibly represent the Navy and Marine Corps aviation Inspire potential recruits, fellow service members, American tax payers Done through amazing flight demonstrations –millions spectators a year, At airshows fly low altitudes (50 feet above the ground), tight formations (18 inch apart), and speeds (solos just under speed of sound) Original site provided information, but not inspiring, didn ’t elicit the emotional response
- Flying aerobatic team established in 1946 To enhance the Navy and Marine Corps recruiting and credibly represent the Navy and Marine Corps aviation Inspire potential recruits, fellow service members, American tax payers Done through amazing flight demonstrations – 14 million spectators a year, At airshows fly low altitudes (50 feet above the ground), tight formations (18 inch apart), and speeds (solos just under speed of sound)
- Original site provided information, but not inspiring, didn ’t elicit the emotional response
- Original site provided information, but not inspiring, didn ’t elicit the emotional response
- Original site provided information, but not inspiring, didn ’t elicit the emotional response
- Original site provided information, but not inspiring, didn ’t elicit the emotional response
- Original site provided information, but not inspiring, didn ’t elicit the emotional response
- Wanted to help, partnered with us Build site that extends their flight demonstration beyond the airshow to a wider audience and enhances that experience. Homepage was the primary point for HTML5. Let ’s take a look at that.
- ====What you are looking at==== Animated UI (CSS3 Transforms, JS) Custom Loader - Audio player (Canvas, JS) Background video/audio (Video/Audio Tags) ====Why did we do this?==== Get people excited, draw them in. Will impact the rest of the experience Tie it to the Feature pages (Silverlight) Why not in Feature sections – Entry vs. Destinations within the site (IIS) ====Why HTML5==== Background element – no plugin prompts
- NonHTML5 browsers Mobile – resolutions, inline playback , bandwidth, data plans (cost) progressive enhancement – baseline, then video Just delivered image
- Inconsistent Playback - Injecting the video tag (stuttering) verse removing on detection
- Supported was not standard. CSS3 Transforms behaving differently
- Encoding Video - Mp4, OGV, WebM video size (baseline 12.7MB, MP4 high profile 6.38MB) Audio (MP3, OGG – 534KB) verse Wav (6MB)
- Video Ripping – some animated elements delayed until after video
- Browsers released while making the site: IE9, Firefox 3.5 & 3.6 Lots of testing
- Event Model – Firefox 3.5 “ended” event and looping, “progress” events (videoJS)
- Atypical use – had to work with videoJS to play correctly
- Results: =================== Site Visitors More than doubled Time on site went through the roof (mostly video)