Partly Sunny: Design Notes

When I set out to make Partly Sunny, my weather app for iPhone and iPad, there were a few design and technical solutions I knew I wanted to include: things like making custom icons and using specific APIs. These solutions would go toward building the weather app I wanted to use and would help differentiate Partly Sunny from other weather apps on the App Store.

What follows is a sort-of behind-the-scenes look at Partly Sunny. I’ll start with discussing some of the design solutions and show some draft designs, and in a subsequent post, I’ll discuss some of the technical solutions. Select any image below for a larger version.

From the start, one thing I wanted to include in Partly Sunny was a view that gave summary information for both my current location and for any saved location. I wanted a way to quickly glance at the weather for these places. But I didn’t just want some basic information like the current temperature and an icon representing the current condition (e.g. “clear” or “light rain”). I wanted this view to be more useful, so in Partly Sunny, the list view includes the current temperature and condition for each location but also offers more: a sentence stating what’s happening over the next many hours at that location as well as the high and low temperatures and the chance of precipitation for the day.

locationsList

Whereas some weather apps might declare this to be too much information, I wanted this view to be useful for understanding what’s happening. A simple icon stating it’s clear right now doesn’t help in understanding a couple hours later it’s going to be pouring.

From this simpler-but-still-useful view, I wanted to be able to select any location to view more detailed information—what’s happening over the next hour, the next day, and the next week at that location.

locationView

And the key to help visualize this information was graphing it. While this isn’t a new solution to weather apps, some do it and some don’t, and I wanted Partly Sunny to do it. So looking ahead in the hour-by-hour forecast, there’s a visual representation of how temperature, chance of precipitation, humidity, wind speed, and more are changing.

features_hourlygraph

And looking ahead in the day-by-day forecast, there’s a visual representation of the high and low temperatures over the week. Reading, for example, that the high temperature will be 55° on Monday, 68° Tuesday, 75° Wednesday, 52° Thursday, and 48° Friday is one thing. Seeing it rising and falling on a graph is another.

dayByDay

This experience was something I wanted to have on both iPhone and iPad. Some of the weather apps I had been using previously were iPhone only, and some of the iPad-friendly apps weren’t the best. So for when my iPad is in-hand and I want to check the weather, having Partly Sunny run natively on both iPhone and iPad giving me the same experience on both devices was a must-have.

iphone_ipad

Also a must-have was making custom icons. I know of several apps that use Climacons by Adam Whitcroft. They’re great icons, and I could have used them as well. But I wanted Partly Sunny to use its own icons. So I learned how to use Sketch and made my own. Here they are:

Icons

For the navigation bar, I made a system of icons using a dots-and-dashes theme.

Dots and Dashes

Sure, my icons aren’t going to win any design awards, but they’re unique to Partly Sunny, and that’s what I wanted.

Icon design wasn’t all I used Sketch for. I also, uh, sketched drafts of the various views in Partly Sunny. For example, here’s my first pass at the location view, a subsequent pass, and what it looks like in the app:

locationViewDrafts

The list view went through a few explorations and largely ended up with version 4:

listViewDrafts

Sketch was also helpful in working out another design solution I wanted to include: a dark theme. I’m a proponent of having dark themes for apps so that in lower-light environments, the UI isn’t blinding me (I still wish iOS had some kind of system-wide dark theme).

darktheme

Not all the design solutions in Partly Sunny were planned out from the start, of course, but these were many that were. My goal was to build the weather app that I wanted to use, and that goal included a few specific design and technical solutions. I hope those solutions are useful to you as well and help make Partly Sunny the weather app you want to use too!

Partly Sunny is available on the App Store for $2.99.

Next time, I’ll discuss some of the technical solutions built into Partly Sunny. Stay tuned!

Partly Sunny

For the past several months, I’ve been learning Apple’s Swift language and how to build iOS apps. Learning this has been something I’ve wanted to do for a while, so it’s been both a fun and rewarding challenge.

To bring together everything I’ve learned, I built a weather app—not because the App Store doesn’t already have enough of them but because the apps I like don’t do exactly what I want them to do. So I made my own because now I can.

Meet Partly Sunny:

intro

Partly Sunny shows your weather in quick glances and detailed looks.

Some of the features of Partly Sunny:

Locations List
Quick glances of what’s happening in the sky at your current location and your favorite locations.

locationsList_black

Location View
Detailed looks at what’s happening throughout the hour, the day, and the week at your locations.

locationView_black

Day-By-Day
Swipe up in location view to show a day-by-day graph with the week’s high and low temperatures plotted.

dayByDay_black

Day View
On the day-by-day graph, tap any day to see a detailed forecast for that day.

dayView_black

iPhone and iPad
Partly Sunny runs natively on both devices.

ipad_right

Dark Theme
Toggle between Partly Sunny’s light theme and dark theme in the app’s settings or with a handy gesture.

darktheme

Hour-by-Hour Graphs
Tap on any hour-by-hour graph and choose to plot temperature, chance of precipitation, cloud cover, humidity, wind speed, or more.

features_hourlygraph

Rain Graph
For U.S. & U.K. locations, a rain-intensity graph for the next hour will appear when it’s raining.

features_raingraph

Pollen & NOAA Links
For U.S. locations, links will appear for pollen forecasts and the local NOAA weather office for winter-weather predictions, tropical forecasts, marine forecasts, and more.

features_pollen

Widget
Partly Sunny includes a widget to show both a quick glance and a detailed look at your current location’s forecast.

features_widget

3D Touch
3D Touch the app icon for the widget and shortcuts. Peek and Pop in the locations list; the location view’s severe-weather alerts, pollen-forecast, and NOAA buttons; and the day-by-day graph.

features_3dtouch

Dark Sky
Partly Sunny forecasts are powered by Dark Sky to give you super-accurate data.

While you may not always enjoy the weather, hopefully you enjoy checking the weather with Partly Sunny.

Of course there are things I want to tweak and more features I want to add, but I’m proud of what I’ve accomplished so far. I set out to do a thing, and I did it.

You can visit Partly Sunny on the web at partlysunnyapp.com and follow @partlysunnyapp on Twitter.

Partly Sunny will be available on the App Store tomorrow for $2.99.

Microsoft Acquires Perceptive Pixel

Microsoft today announced the acquisition of the multi-touch-pioneering company Perceptive Pixel. This is a big get for Microsoft. Couple this with Microsoft now producing its own hardware, and these are exciting times for the company.

This news was striking to me because of my connection with Perceptive Pixel. While at ESPN, I worked with Perceptive Pixel multi-touch technology for three-and-a-half years creating broadcast touchscreen graphics for SportsCenter. On the SportsCenter set is a 103-inch multi-touch touchscreen for anchors and analysts to use during live broadcasts.

So why is this a big get for Microsoft? Two reasons: technology and customers.

First, the technology. When company founder Jeff Han gave his Perceptive Pixel demo at TED back in 2006, multi-touch technology was groundbreaking. The iPhone and its multi-touch technology wouldn’t be unleashed until the following year. And remember CNN’s Magic Wall during the 2008 presidential election? That was Perceptive Pixel technology.

Jump to 2012, and Microsoft is lagging behind Apple in the consumer space. Acquiring Perceptive Pixel marks a more concerted effort by Microsoft to keep up—not necessarily catch up—with Apple. No doubt the Surface will make use of Perceptive Pixel technology—if it already doesn’t. Why should Microsoft sink money and time into developing their own—perhaps not as good—multi-touch technology when they can use tried, tested, and successful technology from a company dedicated to producing said technology.

Second, the customers. Take a look at Perceptive Pixel’s customer list. The big industries on that list? Government, broadcast, and education. Microsoft just gained huge inroads with all those industries.

Microsoft hasn’t yet announced what their plans are for Perceptive Pixel, but the acquisition alongside their new hardware ventures make for interesting speculation. If nothing else, Steve Ballmer can take notes from Jeff Han on giving presentations.

Backboard Dribbble App Is Good But Could Use an Assist

(Note: I think this is the first time I’ve really reviewed an iPhone app. I don’t plan on making this a habit, but I had a few things to say that didn’t fit in a tweet or two.)

If you aren’t familiar with Dribbble, it’s a website/network for designers to showcase small screenshots (called “shots”) to get feedback (and depending on your popularity large amounts of praise, too) from others. In addition, the site is a great source for inspiration and for seeing what cool things others are working on.

Dribbble doesn’t have its own native iPhone app, so numerous third-party developers have stepped in to fill the void. The Dribbble app I’ve been using is Balllin’; the app looks great and is easy to use.

This week, I tried out Backboard. Like Balllin’, the app looks great. Backboard also makes some improvements on user interaction with its reliance on gestures over buttons (I’m a sucker for gesture UI).

What I like about Backboard:

THE DESIGN. (I’m a sucker for minimal design, too.) The design of the app is simple and flat and as a result allows the artwork it features to shine with no distracting or unnecessary chrome.

THE GESTURES. When in a list, swipe right to reveal the menu of lists. When on a shot page, swipe right to return to the list. No buttons taking up precious screen real-estate and browsing time (like in Balllin’).

THE LARGE SHOT. Tap a shot in a list to see a larger version on the shot page (much larger than is available on the shot page in Balllin’). (In both apps, rotating iPhone displays the shot fullscreen.)

What I don’t like about Backboard:

ALL THE TAPS. With simplicity exuding from so many other aspects of the app, liking or commenting on a shot is anything but simple. When in a list, if I want to like a shot, I have to tap FIVE times to like it. 1: tap the shot in the list to go to the shot page. 2: tap the shot image on the shot page to reveal the iOS arrow-actions button. 3: tap the action button. 4: tap “View on Dribbble” from the slide-up menu to launch the in-app browser. 5: tap like on the mobile page. If Dribbble ever opens their API to allow third-party apps to access liking and commenting, this process could be simpler. But it could be simpler before that as Balllin’ demonstrates: liking a shot in Balllin’ only takes THREE taps.

PAGINATION (aka more taps). There is no continuous-scrolling in a list. Instead, at the bottom of a list are buttons for the previous and next pages. Again, if the app is otherwise touting simplicity, this seems out of place. Or if the pagination must stay, why not continue with the gesture theme and allow swiping left or right on the page bar to switch pages?

ICON INCONSISTENCY. When in a list, views, likes, and responses are written out:

When on a shot page, views and likes are icons:

Why not have the icons on the list view, too (again for simplicity)?

In the end, the app’s minimal design and gesture-based UI allow me to overlook the annoyances for now, and I hope future updates make this a slam-dunk Dribbble app. If you’re looking to draft a new iPhone Dribbble app and you appreciate clean design and gestures, take a shot at Backboard.

Bluebird Blues

I don’t have much to add to what’s already been said about the Twitter.com and Twitter for iPhone redesign/restructure; I don’t often use either (I do most of my tweeting from Tweetbot).

But while I was looking around the new Twitter.com last night, something jumped out at me. Looking at the Twitter logo, the verified logo, the compose-a-tweet button, the following button, the home button, and the follow-this-person button, I noticed almost all of those elements use a different blue a blue other than the official Twitter blue. Here they are for comparison (click for larger version):

twitter blues

Was this on purpose? Or was someone just being lazy? If this wasn’t a mistake, it sure looks like one.  I’m assuming Twitter has an internal identity guide that their designers are supposed to follow. And if the designers didn’t have that guide, they could have easily gone to Twitter’s public logo page, downloaded the bird, grabbed the RGB color, and designed the buttons using the official Twitter blue.

Details matter. The consensus is that Twitter struck out with the redesign/restructure. They even seem to have struck out with their own color. Twitter has the blues. And they’re using too many of them.

Browsing Refresh

Henrik Eneroth reimagines the web browser in the era of widescreen monitors and fullscreen apps:

Of course, screen sizes do still mat­ter when browsing the web. Since many web sites will be longer than your screen is tall, the less user inter­face we put vertically, the bet­ter. But most screens today are widescreens, so why are we not put­ting the left- and right-hand sides of the screen to better use, instead of for­cing everything into a bar on the top of the window?

His solution:

eneroth_browser

(Via Cameron Moll)

“Give My Regards to King Tut”

President Obama this week gave a speech in Schenectady NY. And apparently he also opened the Stargate?

(Photo: http://www.timesunion.com/).

GOOOOOLden Graphics

I’ve talked about the music of ESPN’s World Cup coverage, but what about some of the graphics?   Motionographer recently posted a montage of Prologue’s graphics package for ESPN.   Great stuff.   Check it out!

prologue espn

NBA Free Agents

On SportsCenter yesterday, my NBA free agents touchscreen graphic debuted with NBA analyst Chris Broussard:

I still have a few tweaks and updates to work on, so the graphic isn’t finished, but after spending two months working on it, finally seeing it on TV is a great feeling.

What’s special about this graphic is the on-the-fly calculations of NBA team salaries based on several factors: signed player salaries, free agent cap holds if they have Bird rights, and team roster charges if the team has less than 12 players.   Each time a player is moved to or from a roster or a team renounces all or individual free agents, the graphic runs through a series of calculations to determine the team’s new salary total and their available cap room.

Because of this graphic, I now know more about the NBA free agency process than 1.) I care to know and 2.) I ever thought I would all thanks to this year’s big story: LeBron James.

Here was my view in the studio yesterday:

free agents graphic

free agents graphic

Earth! Wind! Water!

When these powers combine… they’re gonna take pollution down to zero!

Well that’s the idea, at least, behind a recent study. From Wired:

A 1,550-mile-long network of offshore wind stations could provide power from Massachusetts to North Carolina with minimal threat of outages, according to a new study.

Scientists had considered offshore wind as a potentially limitless source of power. Compared to land, the ocean has stronger and more constant winds, though still not constant enough to be a primary energy supply. This study indicates that offshore wind deserves more serious consideration as an energy alternative.

“The technology’s there, the materials are there, we have the willpower to reduce carbon emissions, we have a reliable power supply that doesn’t lead to fuel shortage,” said Mark Jacobson, a civil and environmental engineer at Stanford University. “The next step is really to start implementing this on a large scale.”

There are currently no commercial offshore wind stations, though companies have started developing six wind farms along the east coast. Together, the developments could produce as much energy as a large coal or nuclear power plant.

These seems very promising.   Couple this with developing super-efficient solar panels, and, well, we might just make that green-haired captain proud.

The Difference 40 Years Make

Via The Daily Dish, here’s the “Internet” in 1969:

1969 technology, meet 2010 technology:

http://www.youtube.com/watch?v=nZ-yNISb54k

How do you like them Apples?

The last 50-ish years have been remarkable period of human achievement.   Look at the entire timeline of human existence and then look at the last 50 years or so.   At no time in human existence has technology not just electronic/computer technology advanced so rapidly and so robustly.   Truly remarkable.

Silent Running

News from the helicopter world via Wired: Eurocopter is developing technology to reduce the noise generated by helicopters.   The first technology is a different blade design.   Instead of a straight-edge blade, angles are built-in to the blades:

eurocopter

In addition to the Blue Edge rotor blade, the company also introduced something called Blue Pulse technology. Also designed to reduce helicopter noise, the Blue Pulse system uses three flap modules in the trailing edge of each rotor blade. Piezoelectric motors move actuate the flaps 15 to 40 times per second in reduce the “slap noise” often heard when a helicopter is descending.

Both of these technologies are able to reduce noise by minimizing the blade-vortex interaction of the main rotor on a helicopter. Blade-vortex interaction is the source of the pulsating sound most of us are familiar with when helicopters fly overhead. The noise is created when a rotor blade hits the wake vortex left behind from the blade in front of it.

Here’s a demo:

Pretty amazing.   I’d say look for this technology in those unmarked black helicopters, but you won’t hear them coming.

A Facelift for The Facebook on iPhone

facebook on iphone

Now THIS is good news!   The much-anticipated and much-needed Facebook 3.0 iPhone app has been submitted to Apple by developer Joe Hewitt.   TechCrunch notes:

Facebook has submitted v. 3.0 of their iPhone application to Apple, Joe Hewitt says via Twitter: “Just uploaded Facebook for iPhone 3.0 to the App Store for review. :)”

Hewitt also says he’ll post screen shots and more detais on this Facebook page for the iPhone app next week, and that he’s looking forward to getting started on v. 3.1 tomorrow.

Previously, TechCrunch reported Hewitt posted this list of new features:

1. The “new” News Feed
2. Like
3. Events (including the ability to RSVP)
4. Notes
5. Pages
6. Create new photo albums
7. Upload photos to any album
8. Zoom into photos
9. Easier photo tagging
10. Profile Pictures albums
11. A new home screen for easy access to all your stuff, search, and notifications
12. Add your favorite profiles and pages to the home screen
13. Better Notifications (they link to the comments so you can reply)
14. Quickly call or text people right from the Friends page
15. Messages you are typing will be restored if you quit or are interrupted by a phone call

For avid users of Facebook (Joe = guilty), having features currently available on the web-version of the site soon-to-be-available on the iPhone-version of the site is a huge victory for usability and consistency.   Woo!

(Nod: Just Another iPhone Blog)

Double Click through the City

Google Maps recently made a huge usability improvement to their Street View technology.   To “drive” along the street, you had to continuously click an arrow that moved them incrementally along the street.   Now, you can double click an area on the street and fly to that location (or even double click on something along the street to zoom in).   A huge usability improvement.

(Nod: Fumin)

NBA Mock Draft With ESPN’s Magic Box

I was on-hand yesterday to observe Doug Gottlieb making his NBA Draft predictions on SportsCenter using the Perceptive Pixel box.   This graphic is a modified version of the graphic I developed for the NFL Draft.

doug gottlieb with the perceptive pixel box

Here’s the video of his top seven picks (don’t mind the small technical difficulty I fixed it in time for the next segment):

http://www.youtube.com/watch?v=alYFDma97YY

Speaking of the NFL Draft, I snapped some photos during the NFL Draft with Michael Smith using the Perceptive Pixel box, but I never posted them.   Well, here they are:

michael smith with the perceptive pixel box

michael smith with the perceptive pixel box

michael smith with the perceptive pixel box

And here’s one of me with my project:

me with the perceptive pixel box

Making Long-Distance Not So Long

Ars technica reports:

Skype might not be performing quite as well as parent company eBay would prefer a $2.6 billion acquisition to perform, but that hasn’t dampened worldwide enthusiasm for the VoIP service. Skype is so popular, in fact, that new numbers out from TeleGeography suggest that it has become the “largest provider of cross-border voice communications in the world.”

When I went to France last year, my parents and I used Skype to keep in contact.   For anyone traveling overseas and wishing to keep in contact with people here in the States, or for those who are here and wish to keep in contact with someone overseas, I highly recommend using Skype because the service is convenient and it’s FREE!.   Just download the free Skype application on your computer, setup your free account, and have the other party download and setup also, and you’re on your way to free audio and video chats.   Did I mention it was free?

(Nod: Just Another iPhone Blog)

ESPN’s Magic Box

I’m late in commenting on this, but last month, SportsCenter on ESPN launched a new touchscreen graphic on their in-studio Perceptive Pixel touchscreen.   While they have been using their touchscreen since sometime in December, most notably with a telestrator graphic, this NFL Draft graphic marks their first appropriate (and cool) use of the technology.   I imagine we’ll be seeing more of this as the draft approaches.

16 February:

http://espn.go.com/broadband/player.swf?mediaId=3910857

11 March:

http://espn.go.com/broadband/player.swf?mediaId=3970534

New CNN Graphics Are Just Ok

Earlier this month, CNN launched new lower-third graphics for all of their shows.   On CNN, lower-third graphics (so named because they occupy the lower-third region of the television screen) display what story is being shown as well as the name and titles of anchors, reporters, interviewees, etc., the location of the report, and any other flags, such as breaking news, developing story, etc.   The new graphics on CNN give a unified look across each show, but while they are an improvement on the old look, they have faults of their own.

To start off, here are the old lower third graphics (via Media Matters):

old cnn lower-third

old cnn lower-third

One of my biggest issues with these graphics was when the story topic was long and would run into the show logo on the right there were visual proximity issues:

old cnn lower-third

And here are the new graphics (all via Newscaststudio.com):

new cnn lower-third

Here are the graphics in action:

As you can see, the CNN logo has moved to the bottom right corner to the left of the show logo, a story topic is now only one line, and, as you’ll see below, a story flag color change occurred.   What makes the new graphics partly successful is the simplicity a bordered, solid black rounded rectangle, and the animation is quick and simple, too.   What makes the new graphics undesirable, however, is much more.

(But before I list the faults of the new graphics, I first have to issue a disclaimer.   Anything I may say is wrong with the graphics could very well been proposed or discussed internally at CNN but shot down by the creative team or some higher-up-the-totem-pole executive.   A coworker of mine recently completed work on a major update to a popular weekly sports event, and there were some creative elements that were ridiculed in online forums.   What forum users suggested had internally been suggested to higher-ups by my coworker but were dismissed.   So, for all I know, anything I comment on here may very well have been discussed at CNN.)

First, the show logo and CNN logo bug is too huge.   Do we need to be constantly reminded what show were watching?   I’m assuming veteran watchers of Larry King Live or The Situation Room or Lou Dobbs Tonight know what show they’re watching by a) the host of the show and b) the time the show is airing.   Taking out the show logo would give story titles and other information more horizontal room to be displayed.   What happens now is any text is horizontally-scaled to fit inside the space allotted.   For example, in the Wolf Blitzer “Pres. Bush & Flying Shoes” image above, if president were spelled out instead of abbreviated, since the text would be longer, it would horizontally-scale to fit inside the same black rectangle.

Second, the CNN logo carrier (black, rounded rectangle) needs some work.   Here is the CNN logo with “Live”:

cnn live

The left edge of the ‘L’ hangs slightly over the left edge of the ‘C.’   The discrepancy is hard to see in this image, but on TV, it’s definitely there.   And because of this hang-over, when the “Live” text disappears, there’s another discrepancy:

cnn logo

The CNN logo carrier shrinks down to the logo’s size (plus padding), but there is more padding on the left side of the logo than there is on the right side.   If you look at the previous image with the “Live” text and compare with the above image, you can see the padding on the left and right of the CNN logo is the same in both images.   If the “Live” text were scaled down to fit exactly over the CNN logo, the padding could be uniform on both sides whether or not the “Live” were there.

Third, the displaying of someone’s name and title, for example being interviewed for a story or for commentary, can be excessive. Here’s someone’s name and title displayed:

fonted

If the story caption is displayed, for instance the “Pres. Bush & Flying Shoes” text, and the next shot is a commentator, the story caption wipes off and the person’s name and title wipes on.   After a while, the name and title wipes off and the story caption wipes back on.   This part is fine.   Where the problem creeps in is when the person commenting has more than one title.   For instance, a show I was watching last week had someone on who was a “CNN Contributor,” “Republican Strategist,” and the author of some book (the YouTube clip above has this many-titles problem, too).   Well, the director of the show thought, rightfully, all three titles needed displaying.   So, the story caption wiped off, his name and the first title wiped on and off, his name and the second title wiped on and off, his name and the third title wiped on and off, and finally, the story caption wiped back on.   The amount of animation for the small change of text (the name was the same each time) was excessive.   Even just animating from the story caption to a commentator’s name and title back to the story caption is a bit much.   Adding one or two extra titles is way too much.

To fix this excessiveness, the carrier for the story caption and the name and title of a commentator should never fully wipe off if it merely is switching text inside of it.   Instead, text should wipe off like it currently does but the carrier should remain with the same dimensions.   Once the text is fully animated off, the carrier should morph to the size of the new text and then the new text should wipe on.   Let’s look at an example to make this clearer.   Let’s say our story caption is “Pres. Bush & Flying Shoes” and we want to then display “Brad Simon / Fmr. Fed. Prosecutor” next.   The name/title text is horizontally shorter than the story caption.   The caption text would wipe off, but the carrier would remain the same size.   When the caption text finished wiping off, the carrier would adjust its horizontal and vertical size to fit the invisible name/title text.   When this animation finishes, the name/title text would wipe on.   This approach would give greater fluidity to the transitions and eliminate the excessive animation that is currently in place.   This approach would also eliminate the noticeable hitch when a carrier wipes off and a new carrier of a different vertical size wipes on.

Because CNN uses the real-time 3D rendering program Viz Artist to create their graphics, these new graphics likely employ the Viz technology called Transition Logic.   Basically, Transition Logic allows certain elements to remain or animate into new elements when other elements change.   So, using Transition Logic, the approach outlined above could be accomplished with a Noggi geometrical shape adjusted to be a rounded rectangle and with a center point in the lower left corner.   The width and height properties of the Noggi plugin could be adjusted and animated using Viz scripts (I know this because I’ve done it before).

Finally, this isn’t really a problem but rather a curiosity:

breaking news

The “Breaking News” text now receives a yellow background, changed from red in the older graphics.   I’m curious how the creative decision came to be to change the color.   Red is now for “Developing Story.”   Red seems like a more urgent color for a more urgent breaking story, not an ongoing, developing story.

In addition to the new lower-third graphics, the bottom of the screen received a major update.   Instead of the egregiously annoying news ticker that served to only distract viewers from watching, listening, and focusing on the story being aired, there is a “flipper” that displays more information on the current story and periodically switches to updates on top stories.   A fabulous and much needed change.

Overall, the new CNN lower-third graphics are an improvement on their predecessors.   The simplicity of the design and animations are excellent examples for other broadcast graphics developers.   But while they enjoy success in their simplicity, they have several faults that detract from an overall success.

Four Inches

gps

Wired yesterday had a cool brief history of GPS.   I learned a couple of cool things:

The GPS story starts with Sputnik, the first artificial satellite. The night after it was launched by the Soviet Union in 1957, researchers at MIT were able to track Sputnik’s orbit by its radio signal. And if you can track satellites from Earth, you can figure out how to locate objects on (or just above) Earth from the positions of satellites. […]

[Today,] GPS augmentation and precise monitoring techniques known as carrier-phase enhancement, differential GPS and relative kinematic positioning can now provide accuracy down to 4 inches.

4 inches! Incredible!   Hmm, if I were 4 inches to the right of where I’m sitting now, I’d fall off the couch.

(Photo: Wired article via NASA)

The F-35 Lightning

Ever since I attended an air show when I was young, I’ve been fascinated with military aircraft.   While I regret not following aircraft development as closely as I used to, yesterday while reading Patrick Appel, filling in for Andrew Sullivan, I learned something new: the Pentagon has a new plane, the F-35 Lightning.

The stealth-technology-equipped F-35 comes in three flavors normal runway takeoff and landing, short takeoff and vertical landing (like the Harrier), and aircraft carrier takeoff and landing and is a little brother to the stealthy F-22 Raptor.

Scheduled to enter service in 2011, the F-35 is aimed at replacing the Air Force’s F-16 Fighting Falcon and the Marines’ AV-8A Harrier and aimed at complementing the Navy’s F/A-18E/F Super Hornet.

The name “Lightning” is in honor of Lockheed Martin’s World War II fighter, the P-38 Lightning.

The F-35 Lightning:

F-35

F-35

The F-22:

F-22

F-22

In my excitement to see some awesome new military hardware, I did a little more poking around, and I learned the F-117 was sadly retired in April.   The F-117 Nighthawk stealth fighter along with the B-2 Spirit stealth bomber are two of the most kick-ass aircraft ever developed.   The former is an angular harbinger of doom; the latter is an uber-sleek, bat-like phantom of the skies.

The F-117:

F-117

F-117

The B-2:

B-2

B-2

A few more F-35 views:

F-35

F-16, F-35, F-22 comparison:

F-16, F-35, F-22 comparison

And finally, an interesting tidbit about the development of the F-35:

[The F-35, also known as the Joint Strike Fighter (JSF)] evolved to an international co-development program. The United Kingdom, Italy, The Netherlands, Canada, Norway, Denmark, Australia and Turkey have formally joined the U.S. and contributed money toward the program. These partners are either NATO countries and/or close US allies, and peacekeeping and war fighting more recently have been done by coalitions. The reason to have all of these countries in co-development with the US is that there is currently a big difference in the type of equipment that they fly. Although some countries fly equipment similar to the US’s, others fly equipment that is less capable. With JSF, they can all fly the same airplane; as a coalition, they can all be the same. With this in mind, the U.S. invited these eight countries to participate in developing the airplanes. That is to say, they are not just participants to buy the airplanes. They will participate in the design, build, and test of the airplanes. This is a marked difference from past programs.

(Image credits: F-35 comparison and F-35 three-view from Aerospaceweb.org; all other photos from Wikimedia and the United States Air Force in the public domain)

“Sprinkles Make the Cupcakes, Don’t You Think?”

http://www.thedailyshow.com/sitewide/video_player/view/default/swf.jhtml

The spotlight Perceptive Pixel has been given from the presidential campaign is amazing.   Even though the Daily Show and Saturday Night Live are making fun of John King and CNN’s Magic Wall, the technology developed by Perceptive Pixel is now firmly entrenched in our lives, in part thanks to them.

Technological Warfare

As always, the major networks tried to out-technology each other on election night on Tuesday.   Some things worked, some didn’t, and some just didn’t need to happen.

CNN started the touchscreen bonanza with John King’s “Magic Wall,” a touchscreen developed by Perceptive Pixel.   On MSNBC, Chuck Todd uses a Microsoft Surface touchscreen.   One engineering difference between the two machines is that the Surface screen sits horizontally like a table and the Perceptive Pixel screen sits vertically like a big screen television.   Prior to election night, Todd’s Surface was linked to a large monitor so we could see what he was doing:

http://www.youtube.com/watch?v=Gvpc30G3Ets

But on election night, he had a slightly more ambitious setup: a virtual set.   Instead of the Surface linked to a large monitor to see the results of Todd’s interactions with the Surface, it was linked to a giant virtual graphic amidst giant virtual columns.   There wasn’t actually anything behind Todd; this was a composite shot similar to a weather reporter standing in front of a green screen with a composited weather map and was MSNBC’s effort to out-perform the other networks:

The virtual set was an interesting idea, but there is, though, an inherent flaw with the Surface screen: we as viewers cannot see both the screen and the anchor at the same time.   This is where MSNBC’s setup fails.   With CNN’s screen, we see John King directly interacting with the screen and the results of the interactions; we can see things animate or change color when King touches them.

When King tells us to take a look at Chester county in Pennsylvania, we can see him touch the county, so we know which county it is and where it is on the map.   When Todd does the same thing with Miami-Dade county in Florida, we can only see the results of the interactions.   Todd highlights or points to a county on his screen, but when the camera is focused on the virtual screen, we can’t see what he’s pointing to and thus have a lack of correlation.   Without seeing what the anchor is doing, we’re left with a fullscreen graphic, so why even have the anchor on the set with the screen and interactions we can’t see?   Furthermore, in the first video, if we were to focus our attention on Todd, we would miss the results of his interactions on the large monitor.   If we’re watching Todd while he is talking to us, we miss seeing Nevada and Florida changing colors on the large monitor.   The director can try to compensate for this by giving us an overhead shot of Todd’s screen, but then we’re left with a pair of hands touching a screen instead of the whole anchor visibly and visually telling the story.   Not seeing Todd point to where or what he is talking about is akin to a weather reporter showing us a weather map with fronts, storms, and temperatures but not being on screen to point out what he is talking about.   Maybe not such a big deal if we didn’t see the weather reporter, but we’ve come to expect the visible instruction.   The Surface setup fails to take this expectation into account.   With CNN’s Perceptive Pixel screen, however, we can see the anchor’s direct interaction with the map making it superior to the Surface screen.

Like Chuck Todd, John King on CNN had some of his own virtual graphics.   For an explanation on the balance of power in the Senate, King highlighted key Senate races with a virtual Senate-floor layout:

http://www.youtube.com/watch?v=OOymkvccsxY

What made this graphic good was the format.   The 3D virtual graphic on the looked great, and the tracking with the camera was well done.   Even though John King wasn’t in the camera shot physically showing us what he was talking about (like Chuck Todd), he didn’t need to be.   This particular graphic didn’t need the physical presence of the anchor to instruct viewers what he was talking about.

But not everything CNN did on election night was good.   In what was the ultimate bid to out-perform the other networks, CNN turned two interviewees into “holograms”:

Of course, though, they weren’t actually holograms; they were a series of green-screened images composited to look like a hologram.

From a technology standpoint, CNN wins the battle with their seemingly constant drive to advance on-screen broadcast technologies.   During the primaries, they were the first to unveil a highly interactive touchscreen that the other networks now try, unsuccessfully, to emulate.   What will be interesting to see is how this technology is used again and how it advances.   Like the virtual election maps, the “hologram” was a composite shot, so Wolf Blitzer couldn’t actually see Jessica Yellin.   Perhaps the next step is actually creating a true Star-Wars-like hologram with on-set video projection so the interviewer can physically see the hologrammed interviewee on the set?

From an information-delivery standpoint, though, the “hologram” was ridiculously unnecessary, and the developers behind it seemed to concede the presentation is more important than the information being presented.   What was the point of the “hologram”?   What did it achieve that a standard two-panel video graphic or a cutaway would not?   If she or will.i.am were amidst the excitement of crowds, why not show the excitement?

Whatever the rationale behind some of this technology, the technology is here to stay.   And with the technology comes the wars between the networks to out-do each other.   I hope, though, that we in the broadcast graphics field can learn from what each other do and serve the viewers better by realizing information is more important than the presentation of it.   I fear, though, that we’ve permanently crossed the line, and it is more important to dazzle than it is to inform.

iObama

The Obama campaign has released an app for iPhone and iPod touch. Talk about a candidate who a) is in tune with the times and b) embraces today’s technologies.

Obama iPhone app

(Nod: Ben Smith)

More on The Google

…as it tries to take over the world, or, at least, make it a better place.

In Google’s words, its recently unveiled “Android” is the “first truly open and comprehensive platform for mobile devices.” But it is a signal of much more. Google is as much an ideology as a firm and can resemble a nation-state in its pursuit of power rather than a mere corporation chasing quarterly numbers. Google and its allies are now trying to make the principles of openness the commanding ideology of the Internet the conquering principle of the wireless world, and the Android announcement is just the first step.

The problem, as the article points out, is the choke hold the established companies already have on the market and the technology, in this case the wireless networks. They, of course, will do everything in their power to fight-off any competition, and certainly any company that would change the status quo. Normally, they’d have a high chance of success, say, against some small, start-up company. But this time they’re going against The Google. Let’s hope fairness and openness prevail, because in the world of wireless, we could sure use some.

The Bigger the Better

I thought the 160 GB iPod classic was pretty astounding in how much storage room was available on the device, even though it’s a hard-drive-based device. Well, a researcher at the IBM labs says in a few years, his technology can give us a 500+ GB iPod Nano. I don’t know what anyone would do with all that room for storage, but hey, that’s not the point! From the New York Times:

Now, if an idea that Stuart S. P. Parkin is kicking around in an I.B.M. lab here is on the money, electronic devices could hold 10 to 100 times the data in the same amount of space. That means the iPod that today can hold up to 200 hours of video could store every single TV program broadcast during a week on 120 channels.