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.
Posts Tagged: design
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.
Iterate 19: Photoshop CS6 →
The Iterate podcast gathered a lot of talented designers together – David Bernard of App Cubby, Marc Edwards of Bjango, to name a few – and talked for an hour on first impressions of Photoshop CS6. It’s really interesting if Photoshop is at all a core part of your workflow. Don’t miss the 30 minute mark where the hosts discuss the backwardness of Photoshop’s default settings (e.g. why default to sRGB color space instead of Adobe RGB?)
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.
Behind Instagram’s success, networking the old way →
Interesting Times article yesterday detailing the two Instagram founders during the initial stages of their startup:
The two men began working out of Dogpatch Labs, housed in an old pier, with fishing nets on the walls and long tables that functioned as shared office space for aspiring tech companies. Julian Green, who briefly worked out of Dogpatch, recalled that the two men were unusually obsessed with design detail. Once, he said, they spent two hours perfecting the rounded corners of the app’s icons.
And two years and a billion dollars later, look where it got them. Engaging your users through great design matters. Small details, like the rounded corners of an icon, are part of this.
Polygon and the pitfalls of ‘scroll heavy’ design
There’s a lot of gamers, myself included, very curious about Polygon, the soon-to-be-launched gaming web site from Vox. Vox is the team that brought us tech site The Verge, which overall is a pretty slick site. Yet Paragon’s teaser website is atrocious. It’s a site guilty of shoving all relevant content on one very long page in a poor manner. That design paradigm – what I call ‘scroll heavy’ – probably sounded cool in design meetings but falls apart entirely in execution.
Just look at this:
Do you have any damn clue at all that’s there’s more content below this email form? Granted, there’s a scroll bar. Yet given how impatient and click happy most web users are these days, it’s unlikely one would scroll down out of sheer curiosity.
It’s unfortunate, because far below the page there’s a Twitter listing of many respected game journalists all across the industry that are now part of the Polygon team. For those “in the know”, the exact “core” gaming audience Polygon should be interested in, this is a pretty big deal. It’s a total lost opportunity.
So if you’re a web designer who’s on ‘scroll heavy’ design duty, be careful. Look out for the following pitfalls:
- Navigation or content that fails to imply what’s below. If you’ve got a clear navigation area at the top that scrolls or jumps to content below, you’re probably in decent shape. But if you’re going very minimal and navigation isn’t prominent, be sure a bit of ‘teaser’ content will be viewable at the bottom of most users’ browsers (if in doubt about that bottom point, I’d start with 700 pixels from the page top.)
-
Inconsistent design among page sections. I’ve seen some designs throw together otherwise eclectic pages together on one scrollable area because it ‘looks cool’; it doesn’t. If anything, scroll heavy design demands more attention to design consistency, not less. Users who don’t notice a site’s cohesiveness between page refreshes are far more likely to clue in when different sections are a few hundred pixels above or below each other.
-
Too much high bandwidth page content. With all the extra code and content now on a single page, site performance becomes especially relevant; slower connections and processors can choke on a scroll heavy page’s sheer complexity. Minimize http requests by cutting down the number of separate images and/or videos that are part of initial page load. Streamline the HTML and CSS code.
If you’re still having trouble, one example of great scroll heavy design is the Kaleidoscope file comparison app website. It’s clean with bold colors, strong copy and clear divisions between major content areas. Designer Ethan Marcotte’s home is also well thought out with a more subtle color scheme.
Information Architects: Designing the end of the page →
Designer Oliver Reichenstein on the redesign of Information Architects:
In the course of simplifying the site, we connected reading time to the scrollbar.
When you scroll down, "Reading Time x Minutes" turns into "Remaining x Minutes" At the end of the page it says "Thank you" and offers the choice to go to Home or to the Blog Article Overview.In order to not disturb the continuity of reading the reading time counter stays hidden if you scroll less than 1 1/2 pages.
This is exactly the kind of obsession the web industry needs. Not for every job or every site, granted, but you need an outlier to change the game.
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.
CNN’s take: Silicon Valley is desperate for talented designers →
Laurie Segall, CNN:
Johnnie Manzari, a prominent user interface designer for more than a decade, says he gets weekly phone calls from people asking him to recommend good designers.
“There’s a huge demand for finding talent,” he says. “Just like with engineering, one of the reasons it’s been so difficult is there just aren’t many people that are that good. Not only are people looking for designers more than they used to, but the bar they’re willing to accept has gone up.”
Several of the industry’s power players have been on design-focused shopping sprees.
This whole article reeks of being about six months to a year behind coverage in tech news sites like Engadget and Hacker News. Many traditional “engineering heavy” companies, most notably Google and Dropbox, have seen their design focus ramp sharply upward as soon as early 2011. Around then or by that summer, there were a lot of websites and apps that saw a serious bump in usability and their aesthetic quality.
I’d argue a interesting issue, largely sidestepped by CNN, is why design salaries still don’t equalize that of developers, at least in more entry level positions. It’s a hard nut to crack, yet I find the disparity, given design’s (much deserved) increasing prominence in tech land, increasingly difficult to justify.
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.