frog has done quite a bit of work in the hard drive area in the last couple of years, and one of the perpetual problems we run into is how do you help users really understand the quantity and volume of digital data they have? Hard drives have become so reliable that most people don't think about them crashing and losing everything, and very few people ever back up even though intellectually they know they should. Theft or damage to a laptop are also major causes for concern.
The consensus around the frog office here in SF seems to be that the Apple iPhone will cause a mass phenomenon of people's current cellphones meeting unfortunate accidents. There's certainly a lot to like about it, with the most compelling visuals for a UI that we have yet seen on a mobile device, and some very cool methods of interacting with the device and your content. The mail, browser, maps, weather, text messaging all seem very well done, and able to be used in a multi-modal way just like on a "real" PC. I'll hopefully have time to head over to MacWorld to check it out.
There are hoards of people who know these technologies and now they have a new toy to play with. Current mobile development platforms such as Symbian, Windows, and Java are the playgrounds of uber-geeks. No more! Now a weekender with a book on web development, some tips on how to create a widget, and a data source can create a mobile application.
It will be interesting to see how many people use these widgets vs. the mobile version of Safari (which brings with it it's own bonuses for web geeks around the world).
When is it OK to exploit culture and history to sell things? The answer, of course, is always. But that doesn't mean we have to take it sitting down. Recently I have noticed two separate auto manufacturers deliberately marketing to our heartstrings: Honda and Chevrolet. Between the two, Chevrolet is probably the most blatant, but Honda's ad seems sort of halfhearted and stolen to me.
The Honda ad is called "The Van is Back" and is a deliberate rip-off of hippie culture with its psychedelic colors and kaleidoscopic effects. Without apology, Honda is stealing Volkswagen's mojo and trying to associate it's modern Odyssey with the 60's culture of the VW bus. I'm not sure who should be more offended: old Hippies or VW. Fortunately, I'm pretty sure that few were fooled by this blatant attempt to monetize nostalgia and I've only seen one ad in this vein which doesn't get much air time. American public, you were not fooled.
Chevy, on the other hand, should be ashamed of themselves. Their new line of ads, titled "Our Country" and replete with a theme song sung by John Cougar Mellencamp, are montages of America's past, both good and bad. The very first ad in the series drew much criticism, the most scathing of which came from Slate. If any of you have watched an NFL game this season, these ads are hard to miss as they seemingly run during each commercial break. The newer versions are toned down a bit from the initial salvo and no longer attempt to exploit Rosa Parks, 9/11, or Katrina, but still are obviously trying to associate Chevrolet with admirable moments in American history. If Chevy has their way, being "American as Apple Pie" will soon be synonymous with "Being as American as Chevrolet."
One of the only problems working for frog is that I most often canât talk about the work Iâm doing because of NDA agreements. But Iâm so excited that I can finally talk about some real WPF work that Iâve been doing lately! For the past few months my fellow frogs and I have been working side-by-side with Yahoo to deliver their next generation Yahoo! Messenger client geared especially for Windows Vista. Read more about it at http://messenger.yahoo.com/vista. This has been an amazing project to work on for a multitude of reasons and has taught me so much about real-world WPF development. Below are screenshots from some of the work. Click on them to see them in full effect.
The application is being shown at CES this week in Vegas. It is still not even in beta yet so I canât provide any code samples or working prototypes. There is also still lots more to be done but the application is looking beautiful and it truly taps into the power of WPF and Windows Vista. Below is a small of example that I can show of the kind of rich UI that was made possible by using WPF. Users will have the ability to customize the look and feel of the application in many ways, but one of the coolest is by using the color picker at the bottom of most windows. Not only can you change the colors of the window chrome but you can also use textures like grass or wood. Trust me, this is not your average color picker! I wish I could post a prototype of this so you can play with it, but not just yet :-).
It has been so great to work side-by-side with Yahoo on this project. I was even able to go and work onsite at the Yahoo campus in Sunnyvale a few times. Thanks to Josh, Matt, Eric, Brian, Chris, Frank and everyone else at Yahoo for making it such a fun project to work on. We also received a great deal of support from Microsoft during the development process. Technical evangelist extraordinaire Karsten Januszewski was our primary point of contact in Redmond. Thanks for answering so many of our questions Karsten! On the frog side our team consisted of 6 team members. I was the primary WPF technologist on the project but was helped out immensely by Doug Cook who is another of our resident WPF experts here at frog. Kalani Kourdus was the visual designer who created all of the kick-ass visuals for the application. Kalani is well-versed in working in Blend so the designer-developer workflow was effortless on this project. Evan Torchin was the primary design analyst who sorted out and arranged all of our crazy ideas into a very useable application. Chris Robbins was the project manager who help keep us all on track. Mark Ligameri, an Executive Creative Director, was the creative lead on the project and provided the vision and design guidance along the way.
Expect many more posts about the project in the future as the noose of the NDA around my neck is slowly loosened :-). This is definitely a case where the screenshots donât do the application justice. Once you get your hands on the application I think youâll really love it. It is really doing some incredibly innovative things in the instant messaging area.
As with any marriage, designers and information architects put a lot of effort into making it work. There are highs and lows - ultimately, we need each other. But set us down together on the therapist's couch, or the project post-mortem meeting, and the same old grievances are aired. It's goes something like this: clients want to see something they can sink their teeth into as early as possible; IA's need to organize information on and across pages. Wireframes result, and despite even the most earnest admonitions against doing so, clients begin to get attached to the wires. By the time visual designers come in, the job has been stripped down to not coloring too far outside the lines. Someone turns a crank, and on a spigot towards the back of this rusty machine, a middling design drips out. Shrugs ensue. That's just how it is, right? Wrong!
In a number of meetings I've had that center on improving the designer/IA relationship, the humble wireframe, sitting quietly in the corner, almost immediately begins to get some cold stares. And, in recent history, there have been an array of efforts to supplant (or supplement) the functional role of wireframes in design. While often driven by the scenario described above, the more dynamic interaction possibilities allowed by AJAX and Flash have also strained the seams of the wireframe, not to mention blurring the line between IA's and technologists.
Dan Brown, addressing the potential for heavy-handedness in wireframes, has proposed a very useful documentation solution with the 'page description diagram.' This is essentially a prioritized list of components. The components can than be detailed on subsequent pages but it is really up to the visual designer, working within the constraints of the prioritization, to arrange the components for maximum effect on the page. Your clients are going to have to use their imaginations a bit here, but that's good for everyone. The most important part if you're going to experiment with a novel format like this is to either use it solely as an internal tool, or do it in parallel with traditional wires. Regardless, you should acculturate your clients to this system as early as possible. You're messing with an expected deliverable here, and having something that vaguely resembles an interface can be important for your client's internal sales process.
Andres Zapata has an alternate solution in 'the guided wireframe' - a solution that addresses the design of more dynamic interfaces. This is a good solution for narrating an interaction to clients, and not really a huge modification to the traditional process of wireframing. At frog, and probably elsewhere, we've experimented with a number of ways to document dynamic interactions. In the New York office, we had developed a tool which would allow for easy specification of HTML components that could then be easily swapped in and out of pages. This had the advantage of being able to create real links that can move through a series of simulated states. It also allowed changes to ripple out into whole systems of documents very easily. Quick and dirty Flash animations work - and I've found you can never underestimate the importance of making a well-chosen sound effect with your mouth to illustrate how something works. The difference between an object "bloop"-ing or "merrrrr"-ing into place, is actually quite profound.
If you haven't tried an alternative documentation system, it's worth it. It's worth it even if only to expose deficient areas in the way you work that may have been masked by adherence to a single way of doing things over the years. However, I've found that a well-considered process is as or more important than almost any documentation. Obviously your process is going to be suited to the particular dynamics of your team - here are a few points on process that I have found helpful though:
1) Get the visual designer on board with the project as early as you can, and get as much information into his or her hands as possible. If you did ethnographic research, make sure the designer knows how the target customers decorate their apartments. I've often found design insights to hinge on very specific details gathered about the people who are intended to use the product. While these details may imply interaction possibilities for an IA, for a good visual designer these same details can be a treasure trove of cultural cues to inform visuals. Everyone works better when they have a more complete sense of the challenges and opportunities.
2) Make a description of the priorities and components, then let the designer come up with a rough grid for the components. This can require some negotiation. One of the biggest flaws of over-IA'd design is a lack of consideration for the timeless wisdom of the Muller-Brockmann grid system and the potential to create dramatic space with it. Over-IA'd grids tend to be regular, or scaled on a fairly smooth continuum wherein the most important thing is about 15% larger than the next-most-important thing. I like to let the designer shoot first here. If well briefed, the designer will probably get close to the mark IA-wise in the initial round, and you begin with something that's had a little room to breathe. Once you can compromise on a grid that is both dramatic, well proportioned, and appropriately prioritized, you're more than halfway out of the swamp.
3) In my experience, once you have a smart grid, you can pretty much write the name of each component in the appropriate box, and this is enough to communicate the most basic gist of your plan to your client. More detail will undoubtedly be expected in short order, but you've pretty much abstracted a lot of what needs to be talked about in the first round. This is very lightweight prototyping in a way, but I've been surprised how good people's imaginations are when they see a box with just the words "video player" in it.
If you're designing a highly dynamic Flash or AJAX application, you can iterate on this process quickly and generate a series of lightweight grids whose function is not unlike a story board. Ultimately, what I've learned from my explorations is to pay more attention to the process and relationship. It seems simple enough that when good collaboration happens, good work follows.
Most people that know me know that I love reality TV. Not many people will admit to that these days. The Amazing Race is my favorite of all of them. But next week there is a new show starting that looks to be hilarious. It's called Armed and Famous and itÂ stars Eric Estrada, Latoya Jackson, Jack Osbourne, Wee-Man, and Trish Status. The show puts these quasi-celebrities through police trainingÂ in Muncie, IndianaÂ and they end up as official sworn police officers by the end of it. It's such a ridiculous premise that I think it will do big ratings.
Which company has established a successful design language based on simple rectangular forms with rounded edges, finished in white and monochrome color schemes, with exceptions made for style-oriented portable products that come in multiple colors? I'm talking of course about...Nintendo.
Have you heard of virb? If you haven't, then let me be another voice in the growing clamor of the buzzmachine. Virb comes from unborn, the makers of purevolume. Virb is a social networking site with a decidedly musical slant, offering band-specific pages and last.fm-like integration with iTunes to help you tune in to music you may enjoy.
Some are claiming that virb will be a myspace killer and some are scoffing at the obvious hyperbole of such statements. Virb has two points of comparison with myspace: it is a social network that is centered around music. Most say the music aspect of virb is far superior to that of myspace, but that really isn't much of an achievement and may not even be relevant anymore since myspace is large enough that it could probably drop its music support altogether and still chug on.
I received my invite to virb today and I must say that it sure is pretty but I don't know what I'm going to do with it. My social networking workflow usually goes something like this: sign up, search for my friends, add friends, click around at my profile, leave. A quick survey of my various social networking sites shows they are all the same. My friends are the same, my profile is the same, all of them are woefully under-utilized.
When do we hit the saturation point on social networks? Has it already happened? Virb is pretty, it's customizable if you're a web geek and understand CSS, and is incredibly usable. But is it compelling? Maybe. Last year at The Future of Web Apps in San Francisco, dogster CEO Ted Rheingold gave a presentation on what he is calling passion-centric communities. The basic theory is that myspace has a stranglehold on the "social network without any discernible purpose" market, but there is room for other players if they cater to a specific need, ala flickr. If virb can stay focused on serving the passionate (and large) musical community, it will undoubtedly succeed. If it tries to kill myspace, it will be come JASN (just another social network).