Ikea’s BookBook: Pure Genius

The stylish, low-cost furniture folks just one-upped Apple. Along with having some fun, they also make some excellent points about the innate advantages of ink on paper.

It reminds me a lot of a conversation I once had with a designer on the Newton project who was seriously jazzed about the ability to (usually) be able to record a written note, as well as look up old notes later. What advantage this had over a 99 cent notepad was not at all clear.

Advertisements

iOS 7 – Side by Side with iOS 6

Yesterday was the day most of us were informed that our iPhones and iPads are ready to download the latest software release from Apple. Before jumping in and pressing that “Upgrade” button, have a look at Business Insider’s side-by-side comparison of what’s in store:

the-home-screen


My take: I guess I go back to John Dvorak’s old advice that whenever confronted with a “next big thing” proposition, weigh its validity by imagining that the roles of old and new were reversed. I.e., if we were all living in an iOS 7 world you see on the right, how would we greet the “next big thing” announcement of the interface you see on the left?

Image

The Magic of User-Created Ratings

Apparently, a little hard to match with food, but perfect for the hot tub.

Source: Wine.com

Wine.com Ratings

Sharffenberger

For IT Departments, Mobile is a Pain in the App

According to mobile analytics platform Mixpanel, over half the online activity this past Christmas came from mobile devices for the first time. Mobile internet traffic overall has jumped some 84% in the past year alone according to analytics firm Walker Sands, with the last quarter alone showing a 32% jump in mobile traffic. If you’re a retailer or consumer facing company, there’s little doubt where your customers are going: in the words of The Who, they’re Going Mobile.

As users, we dig this stuff (and I’ve certainly forked over a goodly share of my income in recent years to the suspiciously cheerful folks at the Apple Store for my part in the mobile revolution!)  But as we oogle our shiny new iPads, marvel over our ever-slimmer iPhones, sketch on our gigantic Galaxy Note IIs, or geek out over the satisfying “click-thunk” as we deploy the kickstand of our new Surface tablets, let’s spare a thought for the poor IT manager who’s going to have to cope with the endless requests to support all our new toys across the sprawling company infrastructure.

Let’s face it: being an IT manager is no picnic. Every business cycle brings new infrastructure projects, and every budget is about doing more with less. And it’s a rare company indeed whose IT department is awash in the Objective C, C#, and Java programmers that you’d need to support all the different development environments and frameworks required to write apps for all these different devices.

Even if you decide to outsource your mobile development, enterprise apps are hardly a breeze for an outside party to integrate with. Development is long and costly, and you’ll be signing up your team for a non-stop series of software support issues as you try to keep up with all the new devices, form factors, and OS updates. And we haven’t even gotten around to the hassles of creating app stores, deployment strategies, and managing software updates on a zillion different client devices.

Some organizations attempt to cope with this impossible problem my creating separate “mobilized” versions of their sites, and directing users of mobile devices there, instead of the main site. Unfortunately, this now leaves the overworked IT staff supporting two versions of your critical business pages. Even then, your tablet users are usually caught choosing between the old existing site, and the inevitably phone-optimized “mobile” site. This isn’t a long-term strategy that’s likely to satisfy your fast-increasing base of tablet users (and according to The Paragon Report, tablet use had 66% Q2 year-over-year growth in in 2012!). But are your staff expected to support a third, “tablet.mysite.com” site as well? Where does the madness end?

Stopping the Insanity with Responsive Design

CSS — “Cascading Style Sheets” are the web standards technology that allows designers to control the style and placement of elements on web pages. CSS started as a broader replacement for old “B” (bold), “I” (italic), “FONT” and other such HTML tags which allowed pages to have a modicum of formatting in the early days of the web. It’s been through a few revisions since being introduced in the mid-90s, allowing designers more and more control over the look of web pages.

When CSS3 came around a few years back, a lot of us designers were so taken with our newfound ability to give rounded corners to all our rectangles (it was, admittedly, something of an obsession for us in those blocky days of yore) that we didn’t pay much attention to a geeky new feature of CSS3 called “media queries”.  These “media queries” were an updating of the old “media” types in CSS which had previously distinguished themselves by (a) offering some support to things like TVs, printers and screen readers for the blind, and (b) enjoying almost no consistent browser support, rendering them near useless.

But these new media queries, as it turned out, did a lot more than saying, “If you’re viewing this on TV, make the fonts really big”. It turns out, that you could write them to set up entirely different page layouts depending on the screen dimensions that the content  was being displayed on. You could change up your page elements’ size, font, position, color–or even whether whole areas of a web page were displayed or not–based entirely on whether it was being viewed on a phone, tablet, laptop, desktop, or giant 4K monster display.

Recently, a methodology called “Responsive Design” (sometimes “Responsive Web Design” or RWD) has developed to allow a single web page to look and function like a slick iPhone app when viewed on an iPhone, a native tablet app on an iPad, and a conventional web page when viewed on a laptop or desktop. Sites like The Boston Globe, Harvard University, and Time have used this to terrific effect. Viewing these sites on different devices gives a thoroughly native look to each, but a look at the source code would reveal that all these different user experiences are actually the same page.

The Boston Globe's terrific Responsive Design

(Incidentally, if you’re viewing this blog entry on WordPress at uxtalk.wordpress.com, you’ll also see that WordPress is a huge user of responsive design–I’m in love with their iPad implementation in particular, where they use CSS3 transitions to great effect).

Weirder still, that one source page is probably cleaner than before, despite its new ability to support myriad form factors and devices. With responsive design, the site’s stylistic elements are contained it a single style sheet, which browsers normally cache automatically. Meanwhile, the site’s various pages become lighter, faster-loading, and more supportable now that they’re free of all that formatting clutter.

Let there be no mistake: a high degree of UX and visual design skill is needed to pull this miracle off, and to make the site feel the way it should on the different devices. This is true of any competently designed site or mobile app, however, and the UX design bill is a minor consideration compared to the steep development costs and huge support footprint that comes from standing up separate mobile sites or custom enterprise mobile apps.

Responsive: Beyond the Basics

The “pure” responsive approach embraces the idea of a single style sheet that works all the mojo with nothing but CSS–no coding required! Even then, it’s shocking what CSS styles alone can do: from dropping columns from the middle of large tables to simplify the display on smaller devices–to causing navigation panels to slide out from the side on iPhones rather than taking up valuable screen space.

If you’re willing to add in a bit of elementary browser-sniffing, you can take the designs even further, displaying Android-specific icons and colors on Android devices, and iOS icons for the Apple crowd, for instance–or substituting alternate graphics or treatments for devices known to be unable to display Flash, for instance.

One of my favorite tricks is to use a small stub of JavaScript at the bottom of a responsive site to ask mobile users if they want to add an icon to the site to their device’s Home page. This gives your users the ability to launch the site with a single tap — a user experience which can be difficult or impossible to distinguish from that of a native app. (Apple devices can even display a startup screen!). The major difference is that there’s no software for the user to install and update–since the “app icon” is really just a web page link, a company’s IT department automatically updates their entire mobile user base when they update the web site.

Web sites can be added to your phone's home screen where they look--and launch--like apps

The Future is Mobile…and Responsive

Sometimes, like the old song says, you don’t need a weatherman to know which way the wind blows. From the corner coffee shop to mobile sales forces, users and customers are using every possible variety of portable and mobile devices to access information, place orders, and get their jobs done. As we welcome 2013, it’s increasingly likely that IT directors that stand up new systems without taking the mobile component to heart are either doing something unusual, or doing something wrong.

In the past, mobile for the enterprise was a sea of conflicting choice–most of them bad. With responsive design, however, there’s finally a ray of light that allows IT staff a reasonable way to support their users’ increasingly mobile workstyles without busting the budget or turning to drink.

Should all corporate sites be responsively designed? Not necessarily, but all corporate sites should definitely give it serious thought. Similarly, not all apps will be replaced by responsive web sites, but a great many of them can and will be. At the least, I expect that in a few year’s time, we’ll be mostly free of those damnable sites which prompt us to “download our free mobile app!” whenever we try to Google up some answer to a question on our mobile phone and land on their backward excuse for a content site.

Mobile app development isn’t going away by any means, but apps which do nothing more than provide a tiny window to corporate content are definitely on the Endangered Species list. Instead, expect companies to devote their mobile app development dollars to situations where an app’s unique abilities really shine–such as the ability to access the phone’s camera and other hardware. For more and more content access and transaction processing needs, don’t be surprised if your most frequently used “apps” in the future are really responsively designed websites.

Blurriness and Black: You’re Doing It Wrong

There are a couple of times as you work on your craft that someone points out something to you which immediately raises your game to the next level.

In photography, this happened to me most recently when a photographer friend started rhapsodizing about how proud he was of a picture he’d taken–not because of the composition, the mood, or the lighting, but because of the blurring behind the subject (“bokeh”). Since the most basic worry up until then was that my photographs not be blurry, this initially struck me as madness until he pointed out the trick. Essentially, by shooting with fast lenses and opening up the aperture all the way, the depth of field is so shallow that anything behind the subject immediately fades into a beautiful blur, causing the subject itself to pop dramatically.

Beautiful example of narrow depth of field and bokeh by All17 on DeviantArt

Since all of the lenses I owned up to this point were general purpose zooms whose apertures started at around f4, this was never an effect I could have achieved had I known to go for it. At his encouragement, I dropped $99 on a simple, 50 mm lens with an f-stop of 1.8, opened it up all the way, and took a picture of a person with it. Instant magic!

Suddenly my portraits came alive in a way they never had before, and I was one big leap forward in getting that “certain something” in my photographs which I’d never really been able to see before. (It also led me down the terrible path of buying really expensive lenses, since it turns out that each additional f-stop you want on a given type of lens effectively triples the price)

I got a bit of that eye-opening “bokeh” feeling in my interface design craft as I read Ian Storm Taylor’s article on why designers should almost never use pure black (RGB #0000000) in their work. In short, it’s simultaneously overpowering and unnatural. He also makes some excellent points about the color saturation of shadows, and how much you can warm a design, as well as make it look more natural, by going beyond the straight n% grays that have formed the backbone of interfaces since someone discovered the 3D bevel effect back in the eighties.

Like the blurriness of the picture _behind_ the subject, this is something I’ve never really considered up until now, but which I sense has the prospect of raising my game considerably just by knowing what to look for.

Read the whole thing.

The Pointlessness of Personas

Once upon a time, a designer somewhere had a brainwave. Instead of the same old dry “user roles” and “market profile segments”, we could create little biographical sketches of our product’s target users to help the product team really get in touch with he people they were designing for. In time, these little mini-bios became known as personas in the trade, and are now a staple of design groups the world over.

Dave

Dave

Gender: Male
Age: 46
Occupation Sr. Manager
:Location: Bridgeport, Connecticut

“I use my computer enough at work. When I want to kick back, I turn on the game—I don’t fire up a web browser.”

Description

Dave manages a 20-person team and works long hours in his role as a business manager at an insurance firm. As a father of a daughter about to enter college, he is very involved in campus visits and helping his daughter apply for scholarships and financial aid. In his downtime, he is an avid golfer and all-around sports fan.

Education

Graduated Rutgers in 1993 with an M.B,A. emphasizing Global Management

Likes

  • Working directly with people. The relationships he has with employees and customers.

Dislikes

  • Form-filling and paperwork
  • Time required to learn new systems and technologies.
  • Not having access to information when he needs it to do his job.

Goals

  • Be a knowledgeable resource for his direct reports and customers
  • Spend as little time as possible on “computer stuff” outside of work.
  • Retire in the next 5 years.

It was an interesting take on the old problem of how to get engineers to see the world through the eyes of the people they’re building for. In recent years, many marketing and UX departments have latched onto personas with a vengeance, and I’ve seen everything from small laminated versions plastered to the walls of the Microsoft TV design studio to massive versions occupying entire walls of a major bank’s UX department, complete with larger-than-life photographs.

Recently, I even heard of a tech company that paid actors to come in before the project team and portray the the various personas the UX group had created. The project team was allowed to ask the actors questions about the character’s lives, but strictly prohibited from inquiring about the product or its features. It was apparently hoped that somehow all this would help the project team deduce what it was that they were meant to be building. I never did hear how that worked out for them.

Send in the Clones

As a UX manager, I get to review a lot of designer’s portfolios, and as a result I’ve read over so many personas that I’m beginning to recognize which stock photography library the designer raided for their persona’s “candid” shot. Worse yet, the personas themselves might as well have been issued directly from corporate central casting, complete with perfectly balanced mixes of age, race, and gender.

There’s always the hardworking set of grandparents who love travel but are concerned about retirement… the hard-driving female/black/ethnic minority/all-of-the-above middle manager who’s career-focused and professional… the slightly punky (but not in a scary way) twenty-something who’s cool and artistic…

And then, inevitably, there’s Jane:

Jane

Gender: Female
Age: 34
Occupation Account Representative
:Location: Markham, Ontario

“Jessie and Toby keep me running a mile a minute, so it’s hard to find time for myself”

Description

Jane is a single mom raising her two children, Jessie (4) and Toby (5) herself, while balancing a stressful job in the medical products industry. She has a chaotic schedule, and her household budget is frequently stretched. She doesn’t particularly like her job, but appreciates that it pays the mortgage on her three bedroom bungalow located in a modest suburb of Ontario.

Education

AA degree from City College

Likes

  • Her children, vacation time.

Dislikes

  • Pressure-filled environments, both online and offline
  • Things and people that waste her time
  • Complicated gadgets and web sites.

Goals

  • Achieve work/life balance

Jane (sometimes “Judy”, “Francine”, or “Sophie”) is a single mom bravely raising two adorable moppets who keep her busy. Since her ex started shacking up with that floozy he met at the sales conference, she’s been single-handedly putting food on the table, getting bubble gum out of the kid’s hair, and meeting the demands of her high stress job in a service industry filled with unreasonable customers. She hasn’t slept since last Wednesday.

After what had to be the twentieth portfolio I reviewed featuring some Jane clone, I started to feel like she was my own personal stalker. The rest of the identikit cast of personas was really no different either. It was enough to make we wish I’d see a portfolio where—if only to see if anyone was still paying attention—the designer had really gone for it:

Yuri

yuri

Gender: Male
Age: 38
Occupation Performer/Unemployed
:Location: Newark. New Jersey

“I usually use the computers at the library, but sometimes they have these filters which keep me from finding the things I want”

Description

Yuri grew up in a little town outside Vladivostok where he was abandoned by his parents to a state-run orphanage. At the orphanage, the governess used to beat him mercilessly with a knock-off “Kermie the Frog” doll, leading him to turn to alcohol at the age of five. After placing a highly misleading ad in a “Russian Brides” catalog, he was brought to America and now makes his living as an occasionally employed children’s party entertainer for parents in the Newark area who have not yet discovered Yelp reviews.

Education

None

Likes

  • Children, alcopop, Four Loko

Dislikes

  • Complicated interfaces,
  • Pressure-filled environments and judgmental people.
  • The color green

Goals

  • To become more of a “power user”; learn how to use BitTorrent

And let’s face it: unless you’re designing a porn site for inebriated clowns with complicated childhood traumas (Design tip: use big, non-green buttons!), it doesn’t matter which of the above personas you use. Whether it’s busy professionals or twenty-something slackers doing “creative stuff” in their parent’s basements, it’s a pretty good bet that they hate overly complicated interface, like finding stuff easily on their favorite web sites, and don’t particularly care for reading manuals or looking like an idiot in front of technology. So whether you’re designing a shopping site or a new consumer electronics device, it wouldn’t matter which of the above personas you focused on, as there’s almost nothing in any of them that is likely to change your design in any but the most cosmetic senses.

Killers and Adventure Shoppers

If your goal is to actually drive the product design, the secret is to move beyond character sketches and personas and figure out the different “types” your users come in. These are the major personality and usage categories that fundamentally affect how user’s will perceive and use your product or system.

For instance, thinking in the design of role-playing games (RPGs) has focused on between about 4 and 7 major “types” of gamers, including (with credit to Richard Bartle):

  • The Achiever: This is the guy who wants to take on the biggest battles, grab the most loot, and reach the highest character level. Will study strategy guides and scan discussion forums in order to figure out how to take out that demonic overlord guarding the mountain fortress instead of just sneaking around him.
  • The Explorer: The person who has to uncover every secret room, open every hidden chest, explore the outer edges of the game world, and actually reads all those tomes of lore that the monsters have carelessly scattered all over the landscape.
  • The Social Gamer: Enjoys cooperative play, teams, and the interplay with others in the game world. Plays well with others.
  • The Killer: Lives to Pwn N00bs and loot their bodies. Owns a chat set purely so he can talk smack while firing RPGs at the game’s respawn point. Has a gamer score in the tens of thousands.
Sackboy

These types seem to cut across all manner of games, not just violent first person shooters or RPGs. Little Big Planet is the tamest of all conceivable games, where you play the part of a “sackboy” jumping around various platforms in a world that seems entirely created by crafters with too much yarn laying around the house.

Even there, I’ve seen my eight year old daughter get egged on to complete new levels by achieving strangers, engage in friendly banter with other social gamers, as well as encounter elbow-throwing killer-types who’ve shoved her little puppet-character into lava pits so they could grab up all the available prizes in multi-player contests. And to this day, I have no real idea whether “kirein71” who was so nice and helpful is a 9 year old girl from Des Moines or a 44 year old factory worker from Tokyo. The biography doesn’t matter to the game play, but the type surely does.

Similarly, it’s important to identify which of your product’s types you want to prioritize around, as these will directly impact both the features and the interface you present to your users.

If you’re designing for the world of retail, for instance, you would do well to worry what percentage of your customers are GIGOs (“Get In, Get Out”) vs. Adventure Shoppers, amongst other shopping types.

GIGOs (stereotypically, men) may not particularly like shopping at all. When they do shop, they value quick, streamlined browsing systems, prefer a minimum of distracting displays and information, and demand concise checkout. Their favorite stores—both online and offline—let them get in quickly, find what they need, then leave and get on with their day.

Adventure Shoppers, on the other hand, love discovering surprises when they browse the store. Indeed, much of the business model of stores like Costco is based providing Adventure Shoppers with great deals on things they didn’t expect to see when they came in the door (and may never see again if they put off the purchase). Sites like Woot take this even further, providing deep discounts on one item, for one day, forcing its adventure-shopping fans to check back on the site on a daily basis as once the site sells out of a featured item (or the day ends), the opportunity to buy it is lost.

Are you designing the interface for an auto parts store? GIGOs are likely to be the backbone of your business and you should design accordingly. But what if you’re redesigning the interface for a large national clothing retailer? Here you’ll have to pay careful attention to the needs of “Social Shoppers”, “Gappers”, Adventure Shoppers, and more. And while knowing whether you’re designing for “Dave” or “Jane” might inform your color scheme and choices of clip art, knowing that 25% of your business comes from folks who want a friend’s approval before buying a new blouse is likely to have far more profound effects on your site’s feature set and interface.

A Timely Post from Five Years Ago re: Font Smoothing and the new iPad

With the new iPad (formerly known informally as the iPad 3) in my hot little hands, I can testify personally that the screen is gorgeous. What’s more, the near print-quality resolution has a real possibility of reshaping an old debate between Mac and PC users–namely, which platform made the right decision when it comes to font smoothing.

As Joel Spolsky nicely summed up here, the two platforms made some stark choices when it came to the algorithms they employed to render type on LCD screens. Microsoft, with their ClearType technology emphasized harder “snapping” to the physical pixel boundaries, resulting in a generally chunkier, but crisper look. Apple, however, hewed closely to the original type designs, resulting in a stylish appearance with type styles clearly differentiated from one another–but at the cost of a certain blurriness to the rendered text.

On a typical 100-ish pixel-per-inch (PPI) desktop screen, it’s easy to make either argument in light of the trade-offs involved. After all, style matters, but so does the raw human mechanics of line and edge sensing which make up so much of readability. If one switches back and forth between a Mac and a PC on the same monitor, it’s common to be left with the feeling that the Mac looks better, but that the PC involved less effort to read.

With the new iPad’s stunning 264 PPI screen, however, the legibility compromises that Apple forces in the name of faithful typography largely vanish. Ars Technica has a nice set of blown-up images which demonstrate the effect.

In the example above, pay particular attention to the edges of straight verticals such as the “t” in “these”: although a subtle anti-aliasing shadow appears on the right of the stroke on the retina display, the pronounced smudging of the left side of the stroke that so degraded the letterform on the original iPad is replaced by a faithful, dark rendering on the new iPad, changing the legibility dramatically.

After a weekend spent playing with the new iPad, I honestly haven’t been able to detect an earthshaking difference in network speed, overall performance, battery life, or virtually any other technical aspect vs. my trusty first-generation model. But to my eyes, at least, the screen alone has been well worth the upgrade price.