Posts Tagged: ui

The $144,146,165 button

More proof that small design changes deliver a big impact.

Two universes

Michael Lopp, writing for Rands in Response:

Great design makes learning frictionless. The brilliance of the iPhone and iPad is how little time you spend learning. Designers’ livelihood is based on how quickly and cleverly they can introduce to and teach a user how a particular tool works in a particular universe. In one universe, you sport a handheld Portal gun that cleverly allows you to interrupt physics. In a slightly different universe, you have this tool called a cloning stamp that empowers you to sample and copy any part of a photo.

Awesome article. If you love design, this is an really smart read, illustrating how the goals of game and application designers have so much in common.

The iPad mini and UI difficulties

Why an iPad mini won't work, part two: Marco Arment has issues with an overly crowded UI on a potential 7" variant. I agree and find the UI problems especially troubling for developers. A third iOS platform would foster fragmentation.

Instagram’s secrets to fast upload speeds

This slide from a tech talk by Instagram’s Mike Kriger says it all. You can have fast tech, but sometimes clever design allows you to pounce on that tech earlier in the user experience.

The making of Frameographer

This isn’t a perfect design brief; the Frameographer team skips over a few major wireframes along with a few big jumps in logic. Yet one fact is made clear: simple sketches lead to big ideas. You don’t have to make a masterpiece. Just by putting pen to paper (or stylus to tablet) you can rapidly work through UI ideas pretty rapidly.

Gaming consoles and poor UI design

Video game consoles are still putting up great numbers seven years into their current generation. But why have their user interfaces remained so bad? I was reminded of this on a popular Giant Bombcast (gaming podcast) from two weeks ago; the hosts talked at length about the sad state of Microsoft’s latest XBox Live UI refresh. Microsoft largely sidelined avatar functionality, one of the rare bits of personalization and whimsy from an otherwise business-like UI. The Netflix interface was overhauled so poorly that the hosts had moved their film streaming needs to other platforms. Common actions now required more taps of the controller than in earlier XBox Live iterations.

Ironically, XBox Live is generally regarded as the premier console gaming network. It costs $50 a year and generates a lot of revenue for Microsoft, a cool billion two years ago. So why isn’t some of that money being plowed back into great UI design?

The XMB, Sony’s navigation interface for the PS3, doesn’t fare well in the UI department either. Among the Roku, Apple TV, Mac, iPhone, and Boxee, all of which I own or have played with heavily, PS3 has the worst user experience. There’s too many actions and layered menus to get more complex actions done. Software updates, large in size and not skippable, pop up frequently before gameplay. (Sony apparently never got the memo on auto background updates.)

Yet UI may be beside the point: clearly the healthy state of console gaming’s market derives from the games themselves. But that market is changing, growing up and moving more mainstream. XBox 360s are being used now more for streaming media than gaming. A “one box media center” for the living room could just as easily be an XBox as a Roku or an Apple TV. Media partners clearly see this; content providers from Amazon to ESPN and HBO are supporting consoles in full, often adding their services to the XBox and PS3 just as fast as other set top devices.

In addition, while a Xbox 360 or PS3 costs $150 more than an Apple TV, that a premium price tag delivers far more capable hardware. It’s hardware that powers more immersive games, along with more responsive and novel interfaces (e.g. the Kinect) than their cheaper counterparts. Beefier hardware also means getting cool tech features (e.g. Dolby Digital 5.1, 1080p) before the competition.

Yet as we’ve seen before, muscular tech, lots of money and media partners will only get you so far without a solid user experience; just ask RIM. Competition is heating up: Apple and the rest of the portable market is on one side, chipping away at consoles’ casual gaming segment. Smaller, cheaper and simpler boxes from the likes of Roku form the other wing, attacking consoles’ non-gaming features. Without a adjustment in UI and other consumer-friendly maneuvers, I fear gaming consoles could be effectively squeezed out in the middle.

Facebook and Instagram

I was initially as shocked as everyone else when I heard the news of Facebook spent $1 billion to pick up Instagram. But then it came together in my mind: Instagram’s purchase is major win for great mobile design, for online products with high engagement and fast code.

None of those things make sense at first glance. Instagram is a photo sharing app without a proven business model or positive revenue. A company of thirteen (!) employees who’s majority share of 30 million plus users are already Facebook members. A social network that at its core isn’t groundbreaking; sharing photos on a wide scale has been done with Flickr since 2004.

But the deal did happen, and there’s there’s several standout lessons here for designers and developers rooted in the reason why:

If you create a product with very high levels of engagement, you can be a threat to some of the largest tech companies out there. Facebook saw people shifting their mobile time away from Facebook to apps like Instagram and wanted in. Instagram just has a certain cache, or ‘stickiness’ with their app. For now at least, when influencers want a ‘cool’ way of sharing photos, Facebook and Flickr often aren’t their first choice. Instagram is.

Why? Great engagement derives from unique, emotionally driven design. Granted, part of Instagram’s engagement comes from marketing and sheer luck. Nevertheless, Instagram’s design is standout. For example, other apps use photo filters, but not with the same range, fun naming convention or ease of use to jump between them; Instagram makes post processing fun. It’s been one and a half years since Instagram’s debut, yet how many other apps can make that same claim?

High engagement levels can be retained with simple, straightforward design. Instagram was one of the first apps to make sharing to multiple social services so damn easy. It doesn’t take many more steps than your typical iPhone shot: capture, pick a filter, pick who to share to and you’re done in three taps.

High engagement is generally maintained only from a quick, responsive app or platform. This is where blazing performance at the development level comes in. Earlier in the year an in-house engineering blog post revealed some of Instagram’s tech under the hood. It’s straightforward, well thought out and was able to scale to 14 million in a year.

Nevertheless, a lot of positives about this deal can’t stop skepticism on my part. I don’t trust Zuckerberg’s claim that sharing with non-Facebook social networks will remain unaffected. Facebook has reneged on its promises repeatedly and likes a tightly controlled ecosystem. I’m thus also worried about the app’s “independent” future long term.

Overall, for a company of Facebook’s size, 1 billion isn’t crazy, “we’re in a bubble” cash. It’s a buy with stellar engagement levels and a mobile weapon to keep away from the other big tech players: Google, Amazon, and Apple. Given the stakes in this arms race between these four companies, don’t be surprised if the numbers only ramp up in upcoming years.

Windows Phone UI and large fonts

There’s been of takes on the Lumia 900 this week, yet I’m fascinated most by Ars Technica’s Casey Johnston’s analysis on the shortcomings of the Metro UI:

[At times] the large fonts that characterize the OS take up too much valuable screen real estate.

The headers in the Outlook app, for instance, have a lot of breathing room. It makes the layout look nice, and choosing to display your contacts’ names in the largest font, twice the height of the rest, rather than the subject or snippets of content presumably makes you feel popular and keeps it people-centric. But I generally care just as much, if not more, about the subject and content preview than the sender, which are grayed out compared to the sender’s name.

In Mail on iOS, you can customize the font and the number of lines of the message preview, but Windows Phone provides no such options. Because of all the white space and large font, and the inability to fix that through settings, I can skim less of my e-mail at once, requiring more scrolling to go through it all. These information-sparse design cues extend to many of the third-party apps we tried, including Yelp and Twitter, where screen real estate often seems wasted by big fonts and white space. 

I’m generally critical of the opposite problem on the web: a lot of websites, especially those on the arts/fashion side of things tend to emphasize small, 10 or 11px font as a primary body font. Yet in the process of going big, you can go too far – it looks like Metro fell down that trap.

Give users more room: design lessons from Google+ and Mac OS X Lion

It’s clear Google+ and Mac OS X Lion are getting a lot of attention from tech and design communities online. Some question the focus, but I think it’s well deserved based solely on both products’ visual design changes. However, it’s not flashy CSS3 animations or iOS-like visualizations that have me excited. Instead, I’m most impressed by the changes in spacing; Google+ and Lion provide significantly more room between UI elements and content than their competitors (or in the case of Lion, earlier versions of Mac OS X.)

That white space factor is one way Google+ distinguishes itself from Facebook and Twitter: Content receives extra padding and wider margins than I initially expected. Side columns are sparsely populated and the pages for Circles and profile management are spaced out to ensure editable elements have adequate room. Comment threads are limited in scope by default (though more customization here would be welcome) to keep the stream view uncluttered. In addition, while it’s not exactly Google+ only, listings in Gmail, Google Calendar and core Google Search results all received a bump in padding to increase readability.

Continue reading…

Improving the PS3 user experience

Flipping on my PS3 this week, I was reminded of the system?s poor user interface. I wanted to watch some Netflix and make some system setting changes, but the setup was awkward and clinical, while also taking longer than expected. Ironically, those same characteristics could be applied to Sony?s tepid response to their recent massive Playstation Network (PSN) security breach.

That?s the thing about user interfaces; they reflect the priorities and values of their makers. Apple?s work is known for its visual simplicity and graceful lines. Twitter conveys freshness and a sense of whimsy. What about Sony? Other than favoring dark color schemes with pulsating icons and text, giving a vaguely generic, Euro-slick vibe, there isn?t anything that makes Sony?s UI stand out or be that approachable.

That?s exactly why a UI refresh is important, especially in light of Sony?s PSN debacle. An improved user experience can both help get the brand back on track and add differentiation from its competitors. I?ve got three suggestions for Sony: ditch the XMB, improve notifications of game and system updates, and emphasize large imagery and user avatars.

Continue reading…