The Berkun Blog

Management, design, and the making of good things.

Archive for the 'Design' Category

Report from Web 2.0 expo

April 24th, 2008

Web 2.0 Expo 2008Thanks to Brady Forrest and Jen Pahilka for giving me not one but two slots this week in a high caliber lineup. It was awesome to meet and talk to so many folks in just a few days (talking to people is always where the value is). (Photo credit: James Duncan Davidson).

Its been awhile since I’ve been to a big tech conference around a singular theme (web 2.0) during its rise. To see both the promise and the hype swirling around together made for a fun couple of days. Walking the expo floor, where vendors and companies demo and pitch for your pleasure, gave me flashbacks to Internet World in ‘96 and ‘97. Back then, there were a zillion “push technology” companies, services and products. Now it’s “social media” or “web 2.0″, with a zillion companies all throwing the same jargon around and mostly failing to distinguish themselves from one another.

There are certainly good ideas in the mix, and I think Tim O’Reilly and Clay Shirky’s opening keynotes did more than any company I saw to speak for those ideas, or even attempt to describe what substance might surface from all the technology, energy and money bouncing around.

The problem for me is how infrequently people investing their lives making these things can describe how, at the end of the day, all of the potential described gets transfered into value. Or why the value provided is worth the risks and costs of using whatever they are selling (register for this, buy that, use this, etc.) It’s not a complex question, but it is the primary one I’m sure many attendees were asking: how much substance and takeaways can I fish out of the buzz?

I wasn’t surprised, but I didn’t hear anyone mention how many amazing things are made, in 2008, by organizations with little interest in web 2.0 concepts - namely Apple, Toyota, your favorite film director, or your favorite music band. Not to mention all of the great amazing things the world produced before 1994 (the year the web, even in 1.0 form, was born). That’s not to say this alone proves anything - my point is only this: it is possible to achieve amazing things, without . Thriving communities, tribes, and cultures have existed for ages. If its possible to do well without whatever the new secret sauce is, it suggests there’s an underlying element that’s not being talked about. I’m convinced there is a more refined explanation for what people might gain from buying what the expo vendors are selling, but very few people seemed capable of even suggestion one.

The unspoken nugget / explanation / marketing line that might get me jazzed is this:

We have always been collaborative. Always been social. It’s in our genes and it’s what we have evolved to do well. Good technologies enhance our natural abilities, give us useful artificial ones, and help us to get more of what we want from life. Web 2.0 and social media make the process of collaboration and developing relationships more fun, efficient, powerful and meaningful.

Ok. Now we’re talking. With a statement like this I can walk the halls of the expo, or converse with the greatest web 2.0 pundit, and have a straight conversation. Will this get me more of what I want from life? More of what my customers want from me, or vice-versa? I can make tangible arguments about what I want or my customers need and sort some decisions out. But note that the statement above is devoid of hyperbole like revolution, ground breaking, disruptive or transformative, things that are entirely subjective. If you identify a real problem well enough, you never need those words: the people who have those problems will naturally find what you do revolutionary if you really solve their problems.

Ok, enough industry talk. Here’s some shop talk for anyone that saw me speak: I’d give my performance at my innovation workshop a B and the keynote a C+. The keynote was mostly new material and, surprise, I never found my rhythm. I gave it my best but it wasn’t a great 10 minutes. The other funny thing is that the tech crew warned me the remote doesn’t go backwards - it’s kamikaze style - a warning I shrugged off as I couldn’t imagine in a ten minute talk needing to go backwards. Well, guess what, I did. I could have asked them to go back if I’d wanted but didn’t, it wouldn’t have saved my performance anyway :)

Workshop slides here: How to Innovate on Time

What every movie review website needs

April 9th, 2008

I can’t tell you how many times, even in notable magazines, I’ve read movie reviews that spoil the movie. It’s the most criminal, careless thing a critic can do: steal the narrative potency of someone else’s work. Even if it’s the worst movie in the world, a decent critic can tear it apart without spoiling the film.

So the other day on netflix I saw this - a spoiler warning:

On every review any user can flag reviews for spoilers.

Thank you Netflix.

Wordpress 2.5: Review

April 8th, 2008

Last week I upgraded to the latest version of Wordpress. I’m a huge Wordpress fan, I love what these guys do, and I was psyched to see what they’d done this time around.

Total time: 9 minutes. This was end to end, from downloading their software, to reading instructions, to the moment I was able to make my first post. And this included an extra 2 minutes where FileZilla imploded and I had to start over.

Summary: Thumbs up. Go get it. Most of the changes are for the positive, the UI is cleaner, my top gripes (text-editor and thumbnails) have been fixed, and there are some new minor features. Top complaints are UI fit and finish, there are some gotchas that should have been caught.

Kudos:

  • Text editor is much improved: less buggy, fewer perf issues, and better media support. People spend 80% of their time in WP here so happy to see investments to core use here.
  • Site wide search instead of just blog posts - obvious win.
  • The UI visuals shows some style love - in many places, like the comments view, the style choices make it easier to scan long lists. Other nice touches include a flag next to the comments tab when there are new unmoderated comments.

  • Many under the hood improvements that I don’t fully understand or expect to use but feel good about anyway.
  • Automatic plugin updates. Nice, though this broke for a few plugins I had. Expect the kinks will be fixed by plugin authors from here on out.
  • The install is just a few steps and takes minutes with no special skills required.

Complaints:

  • Leap of faith upgrade. Doing hand copying of files is very 1980s. I read the instructions ten times to make sure I had it right, and even then I had the willies while waiting for both the files to be copied, and to see the new dashboard working. The intermediary UI didn’t calm my fears at all. Say what you will about Windows or Mac software, but great relief comes from pushing an “install” button, and watching one little progress bar while the software does all the work. Instead in WP there’s a useless page offering no clue how long it will take, and given my hand-copying of files, no way of knowing if I’d screwed something up. To be fair it did take about 20 seconds, but they were the most stressful I’d had all day.

  • Admin redesign. This felt not quite finished. It’s definitely improved but has 1 step back for every three forward. It’s a space heavy design, with several levels of hierarchy floating in dreamy soft blues and whites. If it’s really a dashboard it should be more software app like than a webpage, but it feels more like the later. The core problem is 4 levels of UI, with varying left right dominance, creates a visual ping pong (left, right, left). Plus there are mismatches of prioritization: The Write a new post button, the most used button on the page, is off the right, while the text “Right now” gets prime real estate on the left.

  • Tab confusion. The UI rules for tab are simple, peers share the same tabs so people know what is on the same level as what. But there are three orphaned tabs all the way on the right that turn out to be peers to the stuff on the left. No idea why they’d do this. Similar problems on the top with a dashboard tab all the way left, and three orphans on the right (Help/Logout/Forums)

  • Settings confusion. Much of the UI in wordpress is config related, but is there really a need for three different hierarchies for Manage, Settings, and Plugins? Some of the UI in each can be compressed (e.g. Privacy has one option and doesn’t deserve it’s own page). Even after a week of use I find it hard to remember which top level category to go to for what.
  • My everyday tasks are still hard to optimize . This is my top gripe. I’m a very basic, vanilla user. I post 2 or 3 times a week, text and link heavy, with images and thumbnails in most posts. That’s it. No media streaming, no dashboard customization, no multi-users or anything whiz bang at all. Yet I still find it clunky to add images, check links, preview and review, and worse, despite having done it 5000 times there’s no efficiency path. No shortcut keys or tricks to make my routine faster.

Nitpicks:

  • The Comments listing should default to showing unmoderated comments. That’s the primary view people with moderation on need to see when going to the comments page.
  • On the home dashboard page, first page people see, the word dashboard appears 3 times, all on the leftmost column. The second one is highlighted to indicate it’s active, so the third one isn’t necessary. If people don’t notice the red highlight means it’s active then change the highlight, don’t add another instance of the word.
  • Moving the category field to the bottom of the post page is a huge pain. Most people use categories so they hit this set of checkboxes for every post. The current layout forces two scrolls: one to get down there, and a second to scroll the list of categories. This UI should be in the critical path of the UI design for the post page.
  • The add media UI is overkill. First, clicking on that tiny little image button takes over the whole screen. Blam - I thought I’d broken something. It’s a jarring, horrible transition. Going modal is ok, but don’t hit me over the head. There are other issues with the flow in this UI: not sure what use cases it is designed for, but everything seems to require lots of steps (And what does Crunching mean? Downloading seems more accurate).

    .

Even with my complaints, I strongly recommend Wordpress. If you want to give it a spin, you can use their free, hosted, blogging service at wordpress.org. If you’re thinking of upgrading or switching check out this handy guide: How to update wordpress with minimal downtime.

Understanding Apple (Apple now the #1 Music retailer)

April 4th, 2008

According to Apple, over January and February of this year they surpassed Wal-Mart as the largest music retailer in the U.S.

Here’s why this is amazing:

  1. The itunes store is only 5 years old. FIVE YEARS.
  2. According to Apple, they account for 70% of all digital music sales.
  3. The ipod is the market leader with ~75% of all music player sales.
  4. Apple was a late entrant: they did not invent the first digital music player, nor the first digital music store.

The most important but rarely told story is that Apple is no longer a niche brand. When else in history has a BMW, a Rolex, a Four Seasons, successfully transitioned into a Honda, a Timex, or a Holiday Inn? It’s rare. When high-end brands go mass market, they rarely get it right. But Apple made the transition in a handful of years without anyone even noticing.

And more interesting to students of innovation is how the story line around Apple is still about innovation despite the gaps in the stereotype. It’s rarely mentioned how they were late to the digital music game, how many of the technological breakthroughs were done out of house, or how many mistakes competitors made that accelerated the rise of the i-pod and i-tunes so fast.

It’s thrilling to see a company thrive on maintaining their standards, and entertaining to see the late followers respond. But the true innovation at work here, if it can really be called an innovation, is quality. The distinction of the Apple brand is superior aesthetic, functional and design quality, and Apple has succeeded in making quality the distinctive factor in tech purchasing decisions. Not price. Not features. But quality. And the irony is how competitors refuse to compete on this turf, retreating back to price and features.

Perhaps the most important overlooked point lesson in all this success is how unexpected it was. I doubt any marketing projection for i-tunes or the i-pod had anything like the adoption curves seen above. I suspect they predicted they’d maintain their high-end brand with it’s resulting high-end marketshare, and were as surprised as the rest of the world with how quickly the i-pod became a phenomenon. For all their well deserved success, Apple still experiences the unexpected.

The worst keyboard in the world

March 31st, 2008

Ok, I confess, I have seen worse keyboards in the world. But this is definitely the worst space bar I’ve ever seen. I found this gem at an Internet kiosk in the Minneapolis airport, on my way back from Pittsburgh last week.

spacebarhell1.jpg

My complaints:

  • Do not SPLIT my space bar. The spot in the middle is where my thumbs work their magic!
  • Really. I mean, it’s called a bar, not a series of goofy keys.
  • Do not make the remaining buttons small, as hitting the side by accident results always in either 0 or 2 spaces.

Anyone else come across evil keyboards in their travels? I want photos!

Conference materials (and more) done right - Webstock ‘08

February 27th, 2008

One highlight of webstock 08 was the fantastic design of their handouts, badges and bags. Most conferences, including design conferences, spend little effort on crafting the things they give attendees. The bags, swag, and badges are typically afterthoughts, rarely made with love, and infrequently reflecting any of the values espoused at the conference itself. Webstock kicked ass on all counts: an example for other conferences to follow. Here are some notes:

The badge

webstock-badge.jpg

  • The schedule is upside down. Since the badge hangs on your neck, the schedule, one day per page, is printed upside down so you can read it. Nice (first saw this at GEL).
  • Not made of plastic . Is it just me, or is there too much laminated plastic at conferences? These badges are made of cardstock and heavy paper, with a natural hand-made feel. It has soft edges and fits comfortably in a shirt or back pocket.
  • Cord made of fabric for easy reuse. Most conference materials have limited reuse and don’t recycle well: those plastic lanyards aren’t good for much. But since the cord isn’t the standard plastic clip-on cable, but a nice length of fabric, I can use it for something else.
  • The only major design ding is the name is hard to read. I’ve yet to see a badge that was truly easy to read from conversation distance: they’re always crammed with affiliations and job titles making them not only ugly, but worthless (Here’s a good example for reference (scroll down to second picture)).

The bag

webstock-bag.jpg

  • Looks like a high-end hipster bag. Nothing says inauthentic faster than a design conference that gives 500 people ugly, black, generic, ‘50-zillion compartment but none that fit the things you actually need when traveling’ conference bag, replete with a garish logo carelessly glued (yet impossible to remove) on the front cover. Well the webstock bag doesn’t look like a conference bag: it looked so good I had to ask twice to make sure it was the conference bag, and not some special prize.
  • Is made of canvas! I’ve been to dozens of conferences, yet this is the first bag made of a sturdy, high-quality, non-synthetic material. It feels like a well made thing to hold and gives the vibe it’s meant to be used, not just a token gift to make you feel better about the fees you paid to get in.

The t-shirt

webstock-tshirt.jpg

  • Looks like something from threadless. The front has, I believe, some of the public art from the city of Wellington, with the words Webstock underneath. It’s a nice yellow on grey, soft tones, and looks good with a pair of jeans. Unlike the dozens of conference t-shirts I’ve given away to goodwill over the years, I’m keeping this one.
  • Came in women’s and men’s versions. Why should I care as a man? Well, I confess: I like to look at women. Especially when they’re wearing clothes meant to fit their curvy figures. I always hear people complain about the low numbers of women at design and tech conferences. Well, maybe if they followed some of webstock’s ideas, more women would be interested in finding out about their conferences.

Other bits

  • Did not dig the food. I’m a foodie, I cook for myself all the time, and the food here was a problem. I admit it was awesome to see an entire vegetarian table and other special diets accounted for, but the food I grazed at at the regular tables didn’t have me coming back for more. I didn’t see anyone else complaining and everyone seemed to be eating tons, so perhaps it was me. That said, I gave up on the conference food part way through as F Inc, just across the street from the venue in Wellington, was great. I had some of my best meals of my two weeks in the country here.
  • An agenda that took risks. I missed most of the first day, but what I did at the conference included: powerpoint karaoke, where speakers had to talk for 5 minutes with someone else’s slides, and an 8×5 session, where 8 speakers had 5 minutes each. These things mix up the pace of a long conference, give people a different way to communicate, and make interesting mistakes possible. The social hours had awesome live music, craftstock was fun: it was clear, all over the place, that the organizers get what good experience design is all about.
  • I didn’t use the conference program. You can see it in the photo above of the bag, but I didn’t refer to it much. I’d read the basic agenda online and had the badge program. I can’t say much about its design, though it certainly looked great. My only gripe was that it had a page per speaker, making the book quite big, yet I struggled to find the specific speaker I was looking to track down (Mark from the 8×5 session). Do we need these big program guides anymore? This one sure looked good, but I don’t think I saw a soul with one at the actual conference.

If you get a chance to speak at or attend Webstock, don’t miss it. You’ll feel the love if you go.

The secrets of the Parthenon

February 7th, 2008

Parthenon
I watched a great episode of PBS’s Nova the other night about the design of the Parthenon. Heard lots of surprises of interest to designers and creators. It’s another example of how many innovations from history we take for granted without even understanding what they are.

What’s also amazing is how many different uses the building has had over 2500 years. It was a temple for Athena, a Christian church, a mosque, and an ammunition depot. It was bombed in several different wars, was stripped of marble and artwork by both the Turks and the British, and was seriously damaged by the first attempts to restore it in the 1890s.

  • They cheated on symmetry. Their understanding of aesthetics was so good they realized at the scale of the building several non-symetrical elements had to be added to make it look symmetrical. The middle section of the ground level is curved, and is six inches higher than the sides. Also the columns are tapered and few elements actually use the golden ratio.
  • We can’t replicate their quality of work. A $100 million renovation project is underway to repair 2000 years of damage, but they’re struggling to replicate the precision of craftsmanship. What took the Greeks ~9 years to build has already taken more than 30 years to repair, and is not finished yet. Without a computer or electric power, the Greeks had many clever innovations that were lost and are being rediscovered.

You can watch the video online and I highly recommend it if you’re into design history, architecture as technology, and the history of innovation.

The end of Netscape & the history of browsers

January 24th, 2008

AOL announced recently that the Navigator web browser will be no more. Navigator 1.0 started the web for most of the tech sector, and their success, and Microsoft’s response in 1994 gave me a ticket for a wild ride, working on IE 1.0-5.0 in the mid 1990s.

For a trip down history lane, check out the archive of most web browsers known to man.

If you are sick of social/networking websites…

January 16th, 2008

Check out isolatr. Currently in public beta. Everything you need to know can be found here.

Usability review #4: Simplygoogle

December 19th, 2007

#4 on the free review list is SimplyGoogle a utility page, exploding out many of the google options onto a single page. Since there aren’t that many user tasks here, there wasn’t much to work with. The core problem with the page is layout - it’s an endless series of command buttons running down the middle of the page.

The easy remedy is the ever handy radio button: as a rule of thumb, if you can get away with one command button instead of ten, you’re making an improvement. You get tons of real estate back, and it’s easier to scan the list of options.

Before:

simplyg-before.jpg

After:

simplyg-after1.jpg

Usability review #3: Ginablack.net

December 19th, 2007

#3 on the free review list is a site for the writer Gina Black. It’s a simple site and does many of the basics well, but the home page makes some fundamental mistakes.

ginab-before.jpg

Issue Summary:

  • Border pattern distracts from the page. Like ParkingFriend, this isn’t a poster and there’s no need to draw attention to the page. Patterns in the page gutter, unless they are sublte (e.g. grey on white), ask people’s eyes to look at them.
  • The picture, and page header, is way too big. Any header item appears on every page, which means it should earn it’s keep. A big photo of Gina takes up almost half of the screen, forcing me to only get about half the page to see whatever it is I clicked on.
  • Vertical text is hard to read. There’s a reason newspapers run text left to right - written language is designed for horizontal scanning, not vertical. You can get away with it now and then as it can create interesting visual patterns, but if the site is designed to promote a person I’d keep it simple.

Before, with issues flagged:
ginab-issues.jpg
After

ginab-after.jpg

What else I’d do:

  • Find a new picture. I just cropped the existing one to fit, but I’d find a picture that has a natural horizontal composition.

Usability review #5: Freetheslaves.net

December 19th, 2007

#5 on the free review list is a site that has a purpose that’s hard to top: Freeing slaves.

This site was tricky to work with. The visuals are strong, but way too strong. And the site is trying way too hard to grab attention that it defeats it’s own purpose. With a cause this good the site doesn’t need to do very much: just explain the situation and then tell the viewer what they should do.

freeslavesbefore.jpg

Problems

  • Visual overkill. Every element is asking for extra attention. It’s visual a deathmatch, and the viewer is the loser. Compare freetheslaves.net with similiarly themed site, Darfur wall. Will messages this powerful, the cause can speak for itself.
  • Confused message. There are so many stories presented, but only one or two are needed. Too many choices. What am I supposed to read first? Second? What is the most important action this organization wants me to take?
  • Too much navigation. There are at least 3 layers of navigation for what should be a simple experience.
  • Kill the movie. First, if you need a special caption saying “Click here for volume” you’re acknowledging the movie UI is confusing. Get rid of it. We all know what slaves are, and any of the great photos you have are more powerful than video anyway. Also, the site is slow and video ain’t helpin’.

freeslavesissues.jpg

What to do?

It’s hard to work with finished pages, so I made a reverse-wireframe. It helps visualize the elmements and see how they match up with a grid. A clean design respects some kind of visual grid, meaning there are a minimal number of left edges: every left edge should line up with another left edge.

freeslaveswireframe.jpg

A proper wireframe for the same website, should look something like this. The exercise for the reader, or the designer, is to eliminate elements and make stronger decisions to fit this kind of design. This will force more decisions to be made (e.g. we only have room for 3 things, but had 5. Which 2 should go?) but that’s good.
freeslaves-newwire.jpg

The other major issue is unnecessary visual flares. These elements make the layout a battlefield, where they’re fighting for attention. By simplifying the design and respecting the wireframe, the layout is cleaner, easier to read, and simpler to understand.

Here’s one before and after example, showing how to clean the visuals.

freeslave-beforeafter.jpg

By sliding the freedom awards into the right column, the element no longer screams “Look at me!”. Instead it’s in its respectful place in the right column. If the freedom awards are really so important, than fit them elsewhere in the grid, but don’t violate your own design by breaking the grid.

Is this more boring? Perhaps, but the goal of this site isn’t visual excitement is it? It’s (I assume) to present a serious problem and compel people to donate time or money to the cause. The design has to get out of the way. The above cleanup can be repeated in dozens of places on the homepage alone and will make a big difference.

If any folks at freetheslaves.net are reading and find this useful, I’m happy to do more work for you. Just let me know.


You're reading scottberkun.com, home of tasty essays. All rights reserved unless noted. You can subscribe here (RSS ).
If you're not sure how to feel now that you're at the footer, joy is free and recommended.