Email
Like
Liked ×
Save
Private Content
Embed
Loading embed code…
We have emailed the verification/download link to "".
Login to your email and click the link to download the file directly.

To request the link at a different email address, update it here. Close
Validation messages. Success message. Fail message.

Check your bulk/spam folders if you can't find our mail.
Loading

+ Follow

Blue Angels Case Study

by EffectiveUI

1,084 views

Presented at HTML5 Video Summit - November 2011 by Tony Walt

Accessibility

View text version

Upload Details

Uploaded via SlideShare as Microsoft PowerPoint

Usage Rights

File a copyright complaint

Statistics

Likes: 0
Downloads: 0
Comments: 0
Embed Views: 0
Views on SlideShare: 1,084
Total Views: 1,084

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)

Blue Angels Case Study Presentation Transcript

Blue Angels Web Site
- Use of HTML5 Video
Tony Walt
- Director of 3D and Motion Design
Tweeting: @tonyjwalt, #effectiveui
EffectiveUI
- User Experience Agency
Blue Angels
- Flying aerobatic team
Microsoft & EffectiveUI
- Build a better site
Challenges
- Non-HTML5 Browsers & Mobile
- Inconsistent Playback
- Encoding
- Video Ripping
- Building for Beta
- Event Model
- Atypical Use
Non-HTML5 Browsers and Mobile
Video Ripping Inconsistent Playback
Animations Inconsistent Playback
- Video Formats
- Audio Formats
- Encoders
Encoding
Video Ripping
Building for Beta
Event Model
Atypical Use
Results
- Site visitors more than doubled
- Time on site went through the roof – due to video
- Link: www.blueangels.navy.mil
Thank you.

Blue Angels Case Study

by EffectiveUI

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Blue Angels Case Study Presentation Transcript