Category Design

Is Bigger Always Better?

Really liking my new HTC One S…It’s fast, great screen and most importantly the camera works impressively well in low light.

Though I have to say these new, larger screens are great to look at but makes it hard to operate with a single hand. Even the HTC One S’s 4.3″ screen is hard to reach the far corners without moving your hand in ways that compromises your grip. Ironically, Android 4+ has moved primary controls into action bars on opposite ends of the screen.

After using the One S all weekend I had to see if this issue was all in my head and thankfully it wasn’t. My older (and much complained about) LG G2X (4″ screen) fits nicely in the palm of my hand and I can reach the entire screen without compromising my grip. To show what I mean I’ve created this map of what I can reach with my left thumb while holding the phone comfortably in my left hand and not compromising my grip.

Is anyone else experiencing this? Have you switched to using two hands to use your phone? Will Apple stick with the smaller form factor and use reach as their reason?

Toyota’s Intellegent Typography Experiment

This is a few years old but still pretty cool. Back in 2009 Toyota teamed up with Please Let Me Design to create this IQ Font (above) as a way to promote their new micro-car.

The idea is simple enough but the execution is really nicely done. The designers (Pierre and Damien) worked with Stef van Campenhoudt (driver) and Zachary Lieberman (software developer, using OpenFrameworks) to track the car’s path as a way to draw each letter. The resulting font is clean, quirky with lots of character and classic details. Even the “making of” (below) is fun to watch.

Xbox App = Pure Brilliance

The Xbox community is pretty rabid and many use the service for way more than just gaming. As such Microsoft just released an app for iOS devices to give access to your account from anywhere. Not only does it increase the value of having a XBox account they slyly put WindowsPhone 7 on your iPhone.

The app itself is build using the Metro framework but it also includes the default nav bar from their OS. So visually other than the status bar at the top of the screen you’re in WP7 land. What a way to introduce the masses to WP7 without them having to give up their iPhones in the process.

Outside the visuals, the app is pretty impressive. From the animated avatar that reacts to your actions (shake phone, poke, etc.), to full access to your account including messaging and setting of beacons. Beacons on their own are a brilliant move, but together Microsoft has a killer marketing tool disguised as an app that you’ll want to use.

Check it out for your self.

First Look at Adobe Edge


On Monday, Adobe opened up their beta trial of Adobe Edge, their latest tool for creating animations for the web. Being that they are getting hammered on all sides about Flash, instead Edge uses HTML5/CSS/JavaScript as it animation engine. HTML based animation has gotten dramatically better, my test animation ran surprisingly well across browsers and mobile devices. Whether this is Adobe’s little white flag on the end of Flash is yet to be seen but for now we options.

At first glance Edge seems closer in structure to After Effects then to Flash which could be a nod to where Adobe is heading or a way to separate the apps, again we’ll have to wait and see. The application is laid out in four sections: Properties, Timeline, Elements, and the editor window, which is Webkit based. The basic premise application is the simple, add items to a stage and then animate them via keyframes along a timeline. There are no interactions or ability to add scripts with this version of the application. Nor can you create new objects/shapes outside of rectangles, so all your assets will need to be created externally.

The timeline offers auto-keyframing and each attribute can be animated separately. Edge supports the standard set of easing which can be applied individually or to a group via multi-select. Each object/layer is a different color and their attribute list can be contracted/expanded to maximize work space. Attribute values are displayed both in the properties panel and inline within the timeline. Similar to After Effects, you can filter the timeline by typing within the timeline’s search field. Another nice AE style feature is the ability to scale the timeline and manipulate your existing keyframes in bulk.

Since the main editor is Webkit based text is true HTML text as are the CSS styles connected to it. Adobe’s handling of object positioning within the stage has a few quirks. The biggest being an object’s Zero Point being based on where it was initially introduced to the stage and not to top-left or other standard. This make is difficult to quickly create animations or layouts based on numerical coordinates from either external applications (Fireworks) or from object-to-object. For now you’ll need a PNG/JPG to create your gradients. I’m not sure if this is due to the complicated CSS to support gradients between browsers or just something missing from this release. There’s also a few glitches revolving around scaling images but text and divs work as expected.

Code wise, Adobe hides most of the magic in pre-minimized JavaScript files with the external CSS file only defining the initial elements. As long as you keep the stage and associate includes untouched you can edit the rest of the page at will. Which will only help Adobe gain support of this among larger web shops. Despite this flexibility HTML based animations still lack the self-contained nature of Flash’s SWF, which means to view my sample animation you’ll need to click to a page outside of WordPress’s CMS.

Overall, I think this is a great example of where I think web content creation apps need to go. Live HTML in the editor means there is no guessing on how things will look when it hits a browser. I hope they follow this thinking with the next version of Fireworks allowing less web savvy designers to get a better feel for what how their designs will really look outside the false perfection of the current design tools present.

Though Edge is only in its first beta release it’s pretty solid app and could easily be used to create complex animations for websites, banners and other strongholds of Flash. You can view the my test animation I created for this review. Future versions promise support for increased support SVG and the Canvas tag which will only make this more powerful tool for web animators. Will HTML5 really be the death of Flash? If so, Edge is a smart bet for Adobe to keep relevant in this new world.

All is Not Lost – OK Go’s Viral Tribute to Japan

Once again OK Go has created a great viral video experience. This time they’ve teamed up with Google Japan, director Trish Sie and Pilobolus (a modern dance troupe) to create All Is Not Lost a tribute/message to post tsunami Japan.

The entire video is shot from below making for some interesting visuals all on it’s own, but add the multi-window tiling of video and you get a crazy kaleidoscope effect. If that wasn’t enough there is the viral/personalization feature where you type a message and OK Go and Pilobolus will write it out with their bodies. Simple concept, great execution.

Technically speaking, the use of HTML for syncing multiple videos is still pretty impressive. Be forewarned that this may be taxing on older computers as I know last year’s video/experience for The Arcade Fire’s The Wilderness Downtown gave my laptop a bit of a work out. For more about how they made the video check out Google’s blog. Regardless of the technology used the most impressive thing is how this all came about as a tribute to a post tsunami Japan.

- – – – -

Links:
All Is Not Lost (video)
OK Go
Pilobolus
Google’s blog
The Arcade Fire’s The Wilderness Downtown

Leveraging Frameworks

Looking back at the last year or so, one theme kept surfacing in all the projects I worked on – the need for a user experience framework. Many of these projects focused around Xfinity.com, part of Comcast’s branding initiative that launched last year during the Olympics. Overall, the projects focused on how to introduce new Comcast subscribers to the XFINITY service and the benefits that come with it, while providing more initiated customers deep access to the wealth of content available online. One project was to design a future version of the site, which would grow alongside individual customers and present an experience tailored to them. This project focused on optimizing both the experience of customers as well as Comcast’s understanding of its customers’ needs.

Clearly these projects needed something more involved then simple wireframes, design guidelines and some magic in Fireworks/Photoshop and HTML…they needed systematic frameworks to support both the design process and the business needs. Besides coming up with concepts and designs that fueled these projects it was my job to create said frameworks.

The embedded Seven Steps to Creating a Framework is the distilled process I employed to conquer the challenges presented to me over this past year. I believe it is universal enough to guide you through creating UX frameworks of your own.

View Seven Steps to Creating a Framework on SlideShare

Please comment if you have questions or comments on this framework to creating a UX framework.

Week in Links: Facebook Groups, Windows Mobile and Google TV

The Social Network still commands the box office but that’s not the only reason Facebook is toping the list this week. Earlier this week they announced they were adding Groups, a tool to download your data, and tighter privacy control over apps.

The idea of groups isn’t anything new but unlike Yahoo or Google’s offerings this one is connected through Facebook. And though this is an obvious fact, this little factor is a huge differentiating point between the services. With the other group services you would have to go out of your way in order to participate. It wasn’t part of most users daily routine and slowly but surely members would trickle away beginning the group’s downward spiral into obscurity. Facebook on the other hand is where the people already are. It’s simple, integrated and most importantly it’s where your friends are, so there is no searching for emails or additional sign-ups needed to get started. Additionally their new groups feature provides a way to control who sees what. This alone is a huge step forward for Facebook and for those that could really use some discretion. See the SNL skit above for an entertaining example of this problem.

The second new feature is less of a dramatic but another big step forward in Facebook privacy.  Granted downloading all your activity, photos and posts doesn’t increase your privacy but it does provide a window into all the information Facebook does have on you and may change how much info you post in the future.  I don’t see many people making use of this feature anytime soon, but should a new social service spring up the ability to import some of this data may give that service a pretty big jump start. Also related to privacy and controlling your data is Facebook’s new application dashboard. The new dashboard provides users the ability to see and limit what applications have access to and what they’ve accesses last. Now you can see if Farmville is going to market with your personal data.

In a related note, according to a recent study of 10 modern countries most children will have an online footprint by the age of 2, this includes baby photos. The study was conducted by AVG, a security firm that deals with identity theft. The firm suggest people be more cautious when posting information online and to make use of available privacy settings.

- – - – -

Also high on the pop culture meter is Gap’s crappy new logo (shown on left). It doesn’t take an art/design major to see how big of a step bag this is from their earlier logos. The only positive thing I can say about it is it’s generating a ton of promotion. My favorite quote regarding the new logo comes from Brand New, a design blog, “I’m not one to critique something by saying it looks as if it were done in Microsoft Word but this one is just too unsophisticated to warrant anything more than that.” Can’t get enough of the new logo, check out craplogo.me to make your own Gap inspired logo.

- – - – -

Even on the eve of Microsoft’s release of Windows Phone 7 the Android platform is dominating the mobile press. Even without the skyrocketing success of Android (top selling smartphone in the US – GigaOm), Microsoft has their work cut out for them if they want to be a player in the mobile market. Newsweek did an extended article on the Android and how it came to be. One interesting factoid in the article was how Google has made enough on mobile search to pay for the development of the Android OS.  So sometimes giving something away is a great way to make money. Also, by Google making Android free, handset manufacturers are more apt to a device to support it as the reduced cost means more profit for them.

On Monday (10-11-2010), Microsoft unveiled 10 devices that support WP7 to the masses and from the early reviews they’re a competitive option. Wp7 is a complete overhaul of their mobile platform and is based on their Metro UI guidelines which influenced this year’s youth targeted Kin, which died a quick death. Hopefully WP7 won’t suffer the same fate. Though I haven’t gotten to play with a device personally, it offers a new paradigm for mobile UI’s that has me intrigued. The bright, flat colors aren’t my favorite, but the split structure of the main desktop, the transitions, the use of type in the design are all unique…but are they enough? Will they resonate with consumers? Working against them is the success of both iOS and Android, while the current lack of a Verizon or Sprint based phone means they’ll still be pushing Android as the ultimate mobile platform to their customers. Top that with confirmation that there will be a Verizon iPhone in early 2011. For more details on the WP7 launch check out Engadget’s WP7 launch guide.

- – - – -

Apple seems to be in everyone’s sights, with Android and WP7 going after the iPhone. Now the big wigs are Microsoft and Adobe are meeting though what’s to come of the talks is still unknown. And Google just launched the website for their Google TV, that competes with the AppleTV. Like many of the set-top boxes they support Netflix, Flickr, YouTube etc., but what new is that there’s a full featured web browser (including Flash 10.1 support), so theoretically it supports any online service. Though surfing the web on your TV has never been a hit, so Google is requesting sites to make a “lean back” version, which YouTube has had in Beta for some time. Some of Google TV’s big wins include: Android OS based, use of your phone as a remote control, surf-and-browse (a P-i-P of web and video), personalization, and a playlist feature that works across various video sites. Not sure what the price tag is looking like, but I assume it’ll land in the vicinity of the AppleTV, if not the war may already be lost. The potential $400 referenced in Engadget’s guide to Google TV seems excessive, especially with Xbox, Playstation and mini PC’s are all cheaper and do more.

Weekly Recap: Kinetic Type, Hearses and Change

While neither V for Vendetta or this kinetic typography are new, this animation was new to me this week. You can check out 14 additional kinetic typography pieces based on popular movies at Inspired Mag. Rocky and Nick the Greek were also contenders for this hero spot.

Also typography related is The Big Web Show’s episode 18 where they speak with Roger Black, co-founder of Webtype, an online font foundry that also hosts the fonts for use in your CSS3 based designs. Besides having some really nice fonts, I love their browse options.

- – - – -

Google offers instant results because 2.5 seconds is too long for users to wait for results. It seems crazy that such a small amount of time would make a noticeable change in user behavior but Google has stats that prove it. Years ago it was based around the number of results to display based on the difference in milliseconds to return those results. Today (last week) Google added instant results to cut this number down even more. According to their blog post this could save the world 11 hours every second.

- – - – -

Earlier this month Twitter posted stats on third party app usage and it showed that by-and-far most users use the Twitter website and mobile site, followed by Twitter’s own branded apps. The third party apps are only used by a small (but active) percentage of their users. This could be why Seemic, who just announced the launch of Seesmic Desktop 2 (SD2), is focusing increasing their support for additional web services (RSS, YouTube, Zappos). Some of this support is through their new plug-in architecture. For a quick overview check out TechCrunch’s coverage of the announcement.

- – - – -

Big changes at Microsoft. Stephen Elop, President, Microsoft Business Division, has left the building to become CEO of Nokia. In an unrelated note, the Redmond campus celebrated the (manufacturing) release of Windows Phone 7 with some black humor, a hearse and a parade. And what parade would be complete without doing a scene from Thriller. Though I’ve been impressed with what I have seen of Windows Phone 7, it’s has a huge uphill battle to live up to the hype of this parade.

- – - – -

UX Magazine had an interesting editorial on converting the URL bar into a form of navigation/breadcrumb system.  There are some good concepts behind the potential use of the very static and possibly foreign component included in every browser. Some things needed for this concept to become a reality is out side of the browser’s control, though you can see signs that the browsers are starting to go in this direction.  For example, in Google’s Chrome browser has implemented a system that bolds the domain and grays out the rest of the URL info. Though somewhat random when it occurs, Chrome also boxes out a website when you’re entering your search/URL. To see it in action type “google.com anyTerm,” it does this for other sites as well, but not always and I’m not sure why or when.

- – - – -

Ending this weeks review with some fun. Take a bunch of animated GIF’s and synch them up with Girl Talk’s spliced samples and you have the making of an Internet Meme du jour…Cache Rules Everything Around Me by Evan Roth

Week in Links: It’s Not Google’s week

Late last week there was an article via the NY Times asking “Could a deal between Verizon and Google destroy any chance for Net Neutrality”.  Instead, Google and Verizon called for a press conference on Monday to explain what they’ve been working on. Based on Google’s (and Verizon) blog with their post titled “A joint policy proposal for an open Internet” they spell out that it’s quiet the contrary. Later in the week Google then countered the many concerns about Google selling out or undermining the system.  The NY Times continues to question the proposal and “Who gets priority on the web?” What it all really means is yet to be seen but makes me wonder if this is a dig at Comcast and their win against net neutrality earlier this year.

Google is also getting some heat from Oracle as well.  This time it’s their Android platform that is getting the heat, more precisisly Google’s version of Java that runs it. Daniel Eran Dilger takes Google to town in his long but engaging article “How Oracle might kill Google’s Android and software patents all at once.” Charles Nutter gives a different point of view in his “My Thoughts on Oracle v Google.”

Apple also had some patent fun this week when they published an exact copy of FutureTap’s Where To app inside one of their patents.  Where To has been around since the first generation of iPhone. Apple and FutureTap have worked things out, mostly just a failure to credit rather then a stealing of ideas.

Metro: Guidelines to the Next Generation of Mobile UX

Microsoft evolves the user experience of smart-phones with Metro, their new design guidelines, and Windows Mobile 7 due out in late fall of 2010. Metro boasts some good thinking in mobile UX.