David Herrold

Photoshop toolbar evolution

Posted by Dave | Filed under Design, Software, Usability

This is an eye-opening example of how software can become bloated over time.  These images represent around 10 years of Adobe software development.  It’s ironic to me that the earlier toolbars appear more user-friendly than the new ones.  I suspect the UI & UX gurus at Adobe made a conscious effort to simplify the CS3 toolbar (bottom one) and stop the madness.

Which toolbar would you rather use?

(Image credit – http://dezignus.com)

Tags: Design, feature creep, photoshop, software bloat, UI, Usability, user experience, user interface, ux

A List Apart industry survey

Posted by Dave | Filed under Design, Development, Software, Technology, Usability, Web design, Writing

A List Apart is posting their second annual survey for “people who make websites.”  The results from last year were very interesting.  If you are somehow involved in designing, developing, writing, producing, or managing websites, I encourage you to participate in this anonymous survey to help better understand the industry.

A List Apart article explaining the survey.
Link to the 2008 survey.
Results of the 2007 survey.

Thanks!

Tags: a list apart, survey, web survey

Mobile search

Posted by Dave | Filed under Apple, Hardware, Mobile, Software, Usability

We’ve gotten very good at finding what we’re looking for online. Ever since the early days of AltaVista, Lycos and DogPile we’ve become experts at finding Thai restaurants in Hoboken, NJ and singing telegrams in Anchorage, AK. Just type a few keywords into the search box and click the go button. Your best result will be on the first page, right? Pretty easy.

Fast forward to 2008 – and the proliferation of mobile phones, PDAs and palmtop computers that can access the web. Things become much more interesting.

There is an increased sense of immediacy based upon our physical location and actions. In the old world, we designed sites for users who were typically sitting at a desk with a keyboard and mouse. Today we design sites for people who are surfing the internet while walking the dog, boarding a plane, driving to work and cheering for the home team during the playoffs.  Mobile devices are with us all the time.

Good-bye keyboard.  Good-bye mouse.  We’ll miss you.

We are using our thumbs to type now. We are scrolling down our tiny screens with trackballs, slide-wheels and pencil-thin styli. We are clicking with phone keys, tiny buttons, pens and our fingers. We need results need to be simple, easy to read, accurate and light weight. And we need it now.

Mobile platforms need to distill web content down to the bare essentials, trimming away unnecessary page clutter while pushing relevant content to the top of the page.

John Markoff’s New York Times article sums this up more eloquently than I.

“The small screen forces you to be even more ruthless and focus on usability almost like a haiku,” said Barney Pell, Powerset’s founder and chief executive. “That’s what happens with design for the small screen. You have to think about what the most important thing the user is doing is.”

There are currently only a few methods of searching the web on a mobile device (although, there SHOULD be more, in my opinion*.)

The first method is the one we’re most familiar with.  We type search terms into a little box and hit submit for results. As long as the web server produces valid XHTML and mobile friendly CSS, most phones will display results without too much trouble. Many mobile sites that offer search, offer this method.

Another method uses SMS and allows users to search via text message instead of using web forms. This can be a faster way of getting results in some cases if you have little or no access to a strong mobile signal for WAP searches. Depending upon your carrier’s packages, SMS can also be used without a data plan (which is usually much cheaper than a full data plan).

A good example of this is Google’s SMS service. If you happen to have a text message plan for your mobile device, try this. Send a text message to 466453 (GOOGLE) with the message of “pizza and [your zipcode]“. You should get a text message back from Google with 3-4 of the highest ranking listings along with click-to-call links to contact the restaurant.

You can also send links to your users within the text message. A good example of this is our own classified ad platform on the Houston Chronicle’s mobile site. For another interesting test, try sending a text message to 24766 (CHRON) with a message of “ford mustang”. You will get a text message back informing you how many results this search produced and a link to the mobile search results (if you have a WAP access).

This is pretty useful, but still not perfect.

Within the last year location-based services have grown quickly in popularity. Mobile platforms like Brightkite, Google Maps and Fire Eagle are gaining ground with many mobile users. Using a mobile device’s internal GPS (or triangulation from cell towers if your device doesn’t have a GPS), the device determines your location and allows you to simply search for the word “pizza” to produce local results for you (since it already knows your location).

We will begin to see more of these services over the next few years. However, I think we can do even better than that.

As I’ve said in the past, our mobile phones are audio devices first and foremost. Let’s put that audio technology to good use.

* Allow me to speak “Find Starbucks” into my phone to trigger a Google Maps search or speak “Browse CNN” to auto-dial a browser bookmark. Surfing the internet hands-free might be extremely useful if I were driving a car, walking the dog or even peddling a bicycle.

With devices like Apple’s iPhone and Google’s upcoming Android platform the possibilities are nearly endless.

Let’s push the limits.

————————

Some resources that can help you get started with mobile web development:

Dev.Mobi – A website dedicated to mobile web development
Blue Flavor’s web development guide is a good start – and they’re nice folks too.
Mobile Web Development – by Nirav Mehta a more in-depth look at mobile development
Mobile Web Design – by Cameron Moll – a great introduction to the mobile web

Tags: Google, iPhone, Mobile, search, sms

Paper prototyping

Posted by Dave | Filed under Design, Usability, Web design

When I first started exploring web design and journalism nearly 10 years ago I thought paper prototyping was silly.  Paper…really?  Web design was beyond paper, I scoffed.  I used the cutting-edge design tools like Photoshop 5 that actually let me edit text on the page (a huge upgrade from Photoshop 4 that featured a quaint-but-clunky text editing panel).

Who needs paper when you can push pixels on the screen, right?

Well, it took a few years to sink in, but I have since changed my mind.  I rediscovered paper several years ago and now find it much easier to sketch concepts and ideas in a notebook.  Nothing beats paper for speed.  I can flip open a notebook and jot down an idea much faster than using a computer or PDA.

Don’t get me wrong, I love computers and gadgets as much as (if not more than) the next guy.  But paper still rules the initial stages of design for me.

Why do I bring this up?  I found some great early-stage paper prototypes on Flickr recently.  You will probably recognize a few of them.  Several of them are now extremely popular, with millions of users each month.

For me, seeing these sketches is like seeing the notes of a mad scientist after he’s built a giant robot or a glimpse into a wizard’s magical tome.  They probably didn’t realize these hand-scrawled sketches would eventually turn out to be blueprints for success.  Hope you enjoy them.

Prototypes:

Photo of Jack Dorsey’s original sketches of Twitter (Stat.us).
Dan Catt’s original sketches of Flickr Places.
Sockyung Hong’s sketch for Vimeo profile pages.
Beth Goldman’s sketches of several Quicken screens.

Notebooks:

Large plain Moleskine reporter. (my favorite).
Pocket ruled Moleskine notebook. (great for travel).

Tags: moleskine, notebooks, paper prototyping, prototype, Web design

Firefox 3 “find” UI blunder?

Posted by Dave | Filed under Browsers, Software, Usability

I was searching for words within a page today using the new Firefox 3 on a Mac when I ran into what looks like a bizarre user interface blunder.  The “Next” and “Previous” buttons to find your search term on the page appear to be switched from the standard left=back and right=forward configuration.

I think it would be OK in the Japanese version of the browser (because Japanese is read right to left).  However, on all English versions of the browser the buttons should be swapped.

(Now that I think about it, the same goes for Spanish, French, German, etc…)

Am I crazy or is this really odd?

Tags: browser, Design, firefox3, mozilla, Software, UI, user interface

FireFox 3 upgrade for Mac

Posted by Dave | Filed under Browsers, Software, Usability

I just finished upgrading to FireFox 3.0 and so far the good outweighs the bad. Some things I noticed immediately are the bookmarks in my toolbar are completely rearranged and outdated.

Several of my bookmark folders were simply replaced by two folders called “Most Visited” and “Places.” It’s almost as if the installation grabbed an old copy of my bookmarks as it upgraded.

That is forcing me to scramble to find some old back-up copies of my bookmarks. And that is a pain. About half my add-ons are working correctly. I consider the following add-ons to be essential for any installation of FireFox: Web Developer toolbar, FireBug, TabMix Plus. TabMix Plus isn’t compatible with FireFox 3.0 yet; nor is Mr. UpTime, TinyURL creator and view source chart. But I can live without those for a while (until the developers update them…hint, hint).

The good news.

The speed is fantastic. The startup and shutdown times for FireFox 3.0 seems at least 3 times faster than FireFox 2.0. Even faster than I expected.

FireFox 3.0 appears to be using less memory (RAM) than FireFox 2.0 used on a regular basis. This frees up more memory for other apps to be open at the same time.

The navigation bar has been slightly redesigned, making the back button (pictured above) larger than the forward button (and also graying out the forward button when it is not needed). This is an excellent example of Fitt’s Law (the time to acquire a target is directly related to the size and distance of the target) in action. Mozilla’s interaction designer probably noted that most people use the back button far more than they use the forward button and adjusted the size to reflect that. Pretty sharp.

Overall, I’d say the upgrade was pretty positive with a few hiccups.

Take my advice and back up your entire machine (on an external source) before upgrading. That way you can simply copy over anything you may be missing (or back out of the upgrade gracefully if something goes awry).

Speaking of Firefox add-ons…what are some of your favorites?

Tags: browser, FireFox, firefox3, mozilla

Decentralize me, please.

Posted by Dave | Filed under Communication, Social Networking, Technology, Usability

Our content is becoming decentralized…and we love it.

Most bloggers I know are tangled up in multiple social networks, photo sharing sites, messaging services, networking sites, bookmarking platforms and a plethora of addictive attention-grabbing web services.

The concept of a “web presence” has changed so drastically over the last several years it’s become difficult to tell people “where” you are online. Blogs or personal home pages used to be our single point of existence online. These were the places we could refer colleagues, friends, family, etc if they wanted to see “our website.”

That’s not the case today.

Our lives are now split into dozens of different networks and spread across the internet like strategically placed digital confetti. We are on Facebook to connect with old friends and meet new ones. We are on LinkedIn to find jobs and stay connected to our business contacts. We are on Flickr to share our lives in photos. We are on Twitter because we have five spare seconds in line at the grocery store and saw something funny we need to share with the world. We are on Del.icio.us to keep track of all the amazing links we find and StumbleUpon to share them with the world.

Like a cheesy Zen proverb, we’re everywhere.

This is both frustrating and fantastic at the same time.

The fantastic part can be found in the amazing services we have access to for free. These services have connected old friends, gotten people out of foreign jails and made grandparents smile at newborn baby photos.

The frustrating part is trying to pull it all together. Some sites are friendly and speak to other sites; but most don’t. More often than not, our collection of platforms and services float like little islands unconnected in any meaningful way. We are forced to keep asking the same friends to connect with us on multiple services.

Some very smart people are working on pulling it all back together, but it still appears to be stuff of dreams at this point.

For now, many of us simply link all our networks, sites and services somewhere on our blog (as I’m doing in the right sidebar of this site). It’s not ideal, but until someone figures out how to bridge our isolated islands in a meaningful way, it’s what we’re forced to do.

What do you think? Will we end up with connected islands?

Photo by Harris Graber

Tags: Blogging, del.icio.us, facebook, flickr, linkedin, open social, openid, social networks

An Event Apart 2008 – New Orleans

Posted by Dave | Filed under Browsers, Design, Development, Technology, Usability, Web design

Wow. I have been drinking from the fire hose of information for the past two days here in New Orleans at An Event Apart. The conference was organized by Jeffery Zeldman and Eric Meyer and according to the website:

“Their new conference wouldn’t be just for designers. It wouldn’t be just for coders. Attendees would gain a deeper understanding of web standards, of course. But they would also encounter a world of emerging best practices and inspiring new ideas.”

I didn’t know what to expect. Would the code be over my head? Would the design be beyond my skills? Would I be able to grasp the conceptual nuggets they would throw? I mean, these people are the best in the industry.

They’re internet famous, right?

As it turned out, each presentation was amazingly clear, surprisingly understandable and completely worth the price of admission. The difference between the presenters at An Event Apart and your run-of-the-mill web experts is an overwhelming sense of passion for their craft. Some of the highlights for me were:

Andy Clarke’s astute observation about how comic book design can be transferred to the web to control pace and user engagement was refreshing, if not brilliant. It was one of those ideas that made me whack my forehead and wonder why I hadn’t thought of that. Andy’s a smart fellow. I added his blog to my feed reader immediately.

Brian Oberkirch, beyond being an extraordinarily nice guy, has an uncanny grasp on what humanizes the web. His talk Thursday afternoon was a lot like eating really good dim sum. I was filled with delicious savory tidbits about how sites can create human connections and positive social interaction with their users. Not shallow marketing, but real connections. The web would be a better place if more people listened to Brian.

I thought Eric Meyer’s CSS presentation, if any, would be the one that stumped me. I am, by no means, a CSS expert; and I feared his material would be tailored for people with more experience. However, Eric did such a good job of presenting his material in a way that made it easily digestible. I took away some very useful tidbits about how to use CSS to debug your markup. Very handy stuff.

I had never paid much attention to how beautiful data & information design could be until Jeff Veen spoke on Friday. His slide showing Google searches throughout the world as pinpoints of light on a globe was amazing. He spoke about data like some artists speak about color or texture. Data is simply another artistic medium.

Robert Hoekman Jr switched things up a bit. He did live usability assessments for people in the audience who needed some help with their sites. Usability issues fascinate me and Robert was very good at recognizing usability issues with a short glance at the site in question. I plan on checking out his book.

What can be said about Jeffery Zeldman that hasn’t already been said? Jeffery is the patriarch of web standards and has been fighting the good fight to make the web a better place for designers, programmers and users alike. He addressed a room full of designers as Yoda addressed his Jedi. Use your powers for good He was also very humble and approachable, something I hadn’t expected.

Here is some additional information about the speakers at An Even Apart 2008 in New Orleans:

Andy Clarke – Author, Transcending CSS
Dave Shea – Co-author, Zen of CSS Design
Cameron Moll – Author, Mobile Web Design
Jeff Veen – Design manager, Google
Brian Oberkirch – Publisher, Like It Matters
Aaron Gustafson – Co-author, AdvancED DOM Scripting
Stephanie Sullivan – Co-author, Mastering CSS with Dreamweaver CS3
Aarron Walter – Author, Building Findable Web Sites
Robert Hoekman Jr. – Author, Designing the Obvious
Jason Santa Maria – Designer, Happy Cog
Eric Meyer – Author, CSS: The Definitive Guide
Jeffrey Zeldman – Author, Designing With Web Standards

If web design, development and standards interest you then I would recommend checking out An Event Apart. I had a blast and hope to attend again in the future. It was good to hang out with Tim and the rest of my pals from BarCampNOLA in New Orleans.

Hope to see you all again soon.

Tags: aeanola08, An Event Apart, barcampnola, new orleans, nola

Google opens Website Optimizer

Posted by Dave | Filed under Business, Design, Development, Google, Marketing, Usability, Web design

Google released their Website Optimizer platform last week for general use. It has only been available to sites using Google AdWords in the past, but now can be used by anyone to enhance site performance. This is great news for web analytic junkies, usability testers, developers and designers alike.

In a nutshell, Google’s Website Optimizer allows you to test multiple versions of content (ie. marketing messages, logos, icons, copy, etc) in a live environment to determine which combination of content yields the best results.

Based upon what you are testing, this “result” could mean higher click-throughs, increased product sales, increased product downloads, increased ad revenue, higher traffic to internal pages, etc.

This eliminates the guesswork of testing ad placement, site designs, product purchase flows, etc. You can simply release multiple versions of your content and look at the analytics to determine which one is yielding the best results.

There are certainly other tools to do the same job; but not many are free or this simple. We could certainly do the same thing at the Chronicle, however we would have to use several systems to make it happen. This simplicity of using one system appeals to me.

Here are some links to get you started with Google’s Website Optimizer:

Google Website Optimizer
Google Website Optimizer blog
Website Optimizer press release

(via Web Worker Daily)

Tags: analytics, Google, Marketing, Usability, website optimizer

Mozilla mobile browser on horizon

Posted by Dave | Filed under Browsers, Mobile, Software, Usability

Mozilla community (makers of FireFox, Thunderbird, Bugzilla, Camino and other fine applications) have announced their intension to build mobile browsers for both touch screens & non-touch screen phones.

I think they have a great shot at competing directly with the likes of Apple, Palm, Nokia, RIM, Microsoft, etc in the mobile browser market.  Most mobile browsers are lacking in basic functionality of some sort.

• iPhones can’t copy & paste.  It.  Can’t.  Copy.  And.  Paste.  Think about that for a minute.  Palm Treos over 6 years ago could copy and paste.
• Blackberry browser laughs heartily at your mobile CSS while slapping its knee.
• Internet Explorer Mobile is almost as fantastic as Internet Explorer’s desktop version.  D’oh.
• Opera Mini, god bless them, are trying, but not much better than the rest (frequent connection errors have tainted my once-cheery opinion of Opera Mini.)

Most mobile browsers have serious issues supporting JavaScript, CSS, AJAX, Flash, audio, video, etc.  None offer developers tools or plugins to allow any real dissection of a page.  I would LOVE some sort of “Email me page source” and “Email me screenshot” tools.  For that matter, many phones are capable of voice-dialing.

Why not use voice browsing to automatically open a browser and navigate to a preset audio bookmark?

1. “Find Starbucks” – could trigger google maps search
2. “Browse CNN” – open CNN mobile homepage in your browser
3. “Wiki Ben Franklin” – searched Wapedia for Ben Franklin references

There are infinite possibilities when you ponder all the available functionality of a mobile phone.  They are, after all, audio devices first and foremost.  Let’s put the audio to good use.

Speaking of functionality, Google is beginning to use a combination of GPS and cell tower pings to determine where a user is located for their mobile maps product.  It’s not perfect, but pretty accurate and more importantly, it’s combining interesting features of the phone (WAP & GPS) to create an application that is greater than the sum of its parts.

I hope Mozilla pushes the envelope and begins utilizing more of the phone’s capabilities than just a simple browser.

Track the progress of the browser development on Mozilla’s wiki pages:

Touch screen browser wiki
Non-touch screen browser wiki