Web


2
Sep 10

Goodbye Site Map, Hello Mind Map

mindmap.png

A mind map is easier to read than a traditional site map.

There are a few reasons I’ve almost entirely ditched site maps in favor of mind maps. (Mind maps are traditionally considered tools for concept mapping or diagramming complex ideas, not websites.)

First, site maps tend to be better for page-based site diagramming, but as we move toward states and modes, user decisions and flows become more relevant than pages. I find mind maps do a much better job showing routes and decisions that don’t necessarily correlate to a page change.

Second, I find the better mind mapping software to be more intuitive and fast-paced than most site mapping software.

mindnode.jpg

The MindNode UI.

For example, MindNode, an excellent Mac-based mind mapping application, lets you start designing web experiences in seconds. The interface is extremely minimal, and while you can’t customize the look and feel of your work much, the default output is quite elegant and clean. The experience is so easy and fast you actually feel creative again. (MindNode also comes in a touch version for iPhone / iPod / iPad, and it works really well, even on a small screen.)

mindmapper.jpg

MindMapper...how very Office-y of you.

But beware. Some mind mapping software leaves a little bit to be desired. For example, MindMapper is feature rich, but I find the interface cluttered and overwhelming. When I want to sketch, I want the UI to disappear. In other words, using software should be as fast if not faster than simply sketching on paper.

Finally, it’s become clear to me after years of experience that most clients just don’t get site maps. They stare blankly, and have little if any feedback. They want to see what the experience will be like for the user. I’ve found mind maps, while still abstract, do a better job conveying what the user experience will actually be like.


16
Aug 10

Web Typographers, Rejoice

Real type comes to the Web...without Flash.

Finally, your site will be able to display beautiful fonts without Flash replacement technology. Adobe has just offered several typefaces for website design and development through the Typekit project.

Typekit supports a wide array of browsers, and users who don’t have a supported browser will simply see the default typeface, like Arial or Verdana. Typekit’s costs are reasonable (though not free), you can adjust a wide variety of type settings and styles, the library is expanding, there’s a nifty colophon tool, and the fonts have been hinted for optimal on-screen viewing.

All in all, a pretty great day for type on the Web.

UPDATE: WebType is another player in the web typography game, with technology similar to Typekit, but with fonts from FontBureau, among others.


4
Aug 10

Going Mobile?

The following white paper, written by me, was originally published at Netsoft-USA.

Thinking of going mobile? If so, there are some important things you should consider. First and foremost, does going mobile make sense for your business? If so, should you build a mobile application (or app) or simply offer a mobile-optimized version of your website?

Netsoft's HealthMobile app puts vital information where it belongs: in the hands of users.

Is Mobile the Right Move?

As always, the answer begins — and ends — with your target audience. If they’re not mobile, you shouldn’t be either. For example, if your target audience spends all day tethered to a computer, a mobile version of your offering might be superfluous.

If your target audience is mobile, then it’s time to ask some questions that will help determine the best course of action:

  • What services, products, or information can you provide that your audience would find useful and engaging?
  • What devices or mobile platforms does your mobile audience use?
  • Would a mobile offering support your overall business efforts or contradict them?
  • What, if anything, is your competition doing, and how can you do it better, or at least as well?
  • Is there awareness and appetite within your organization for a mobile offering, or will you need to educate key decision makers?
  • Do you have internal resources capable of delivering a mobile initiative? If not, how will you identify the right partner?
  • Do you have support and budget to raise awareness of your mobile offering?

If the answers above indicate that you can and should go mobile, then you’ll need to determine which platforms to target and whether or not you should build an app or a mobile-optimized website.

It's like the browser wars of the late 90s all over again.

Which Platforms Should You Target?

With such a wide variety of mobile platforms available today — including iPhone, Android, Blackberry, Palm, and so on — you might feel overwhelmed in deciding how to approach your customers. However, it’s not as confusing as it sounds.

Most importantly, you need to find out which platforms your target audience is using. If, for example, they are corporate clients who use Blackberry devices, targeting iPhone or Android platforms would not be a wise choice. If, on the other hand, they use a mixture of devices, then you should determine which platforms are most prevalent and target them first.

To start, interview a representative sampling of potential users to determine which devices they use. Next, if you’re building a mobile website, review your current site’s analytics, if available, to see which devices are being used to view your site.

Mobile App or Mobile Website?

Mobile apps and mobile websites are not the same thing, so understanding each is critical in determining which to build.

Apps

A mobile app is really just software designed to run on a mobile device. Apps are often one-trick ponies, but they do their one trick very well. They’re so useful and engaging that they’re fueling the explosive growth of the smart phone market.

Like traditional software applications, mobile apps are often platform-specific, so if you want an application to run on multiple platforms (e.g., Blackberry, iPhone, Android), you need to develop multiple versions of your app and market it through the appropriate channels. This can add significant expense, so knowing your target platforms is critical.

In addition, as tablet computing grows in popularity, as it looks likely to do with the runaway success of Apple’s iPad, it may be worth considering an application that takes advantage of the tablet platform’s larger display and unique capabilities. But, as always, you should only go down this route if your audience is already there or will be there very soon.

Do you know if your users are mobile?

Mobile Websites

A mobile website is similar to a non-mobile website, except that it has been optimized for the more limited experience of accessing the Web on a mobile device. For example:

  • Extraneous graphics and other heavy download items are removed so pages load more quickly.
  • Navigation is usually simplified and prioritized to only the items a user would actually need when out and about.
  • Large blocks of information are broken into more digestible chunks.
  • The user interface is composed to take advantage of the much smaller screen real estate of mobile devices.
  • It’s important to note that some sites don’t need to be optimized for mobile delivery; their current format may actually translate without modification. However, this is the exception and not the rule, and you should test your site before assuming no changes need to be made.

If you do decide to build a mobile version of your site, it’s important to understand that this effort is more involved than simply “screen scraping,” or pulling your existing site’s content into a mobile format. You should prioritize and skinny down your site to the items your mobile users will want, and ditch the rest.

In addition, there are a wide variety of mobile browsers — some better than others — which means that there may need to be multiple formats of your mobile website designed to work with each browser. That said, there is a move toward standardization, and both the iPhone and Android platforms use the WebKit browser as a common platform, and soon Blackberry devices will use the WebKit browser as well.

Apps vs. Websites: A Head-to-Head Comparison

The Best of Both Worlds

Many companies and organizations provide both a mobile app and website to their users, ensuring all their bases are covered. For example, Facebook has an app available for the major mobile platforms, and they offer a mobile version of their website for users who choose not to download and install the free app. For technical reasons, the Facebook app and mobile websites are slightly different in the experiences they provide; however, by having a mobile website and an application, Facebook avoids losing any users who prefer one technology over the other.

By providing similar features and functions on both its mobile app and website, Amazon lets users choose how they want to shop.

Alternatively, you might find that some of your information is best presented via a mobile website, while other information is better suited to an application. For example, some companies have a mobile website for their public Web presence but a feature-rich app for their corporate intranet. Likewise, some financial institutions have mobile websites for public content and an app that provides transactional capabilities for their account holders.

Don't be afraid to listen to your users before, during, and after lanuch of your mobile site or app.

Launch, Learn, Revise

Once you put your mobile website or app in the hands of your users, the fun really begins. By keeping an open line of dialogue between your team and your audience, you will learn what works, what doesn’t work, what you should improve, and what you shouldn’t touch.

Don’t be afraid to take an iterative approach. Launch with a few features you know work well, and only add new features once they’re ready for prime time. Like any technology endeavor, embrace the concept of permanent beta. It doesn’t mean you’re never done; it means you’re always on a journey.

Recap

Going mobile needn’t be a daunting undertaking. All you have to do is stick to the basics:

  • Identify your business objectives
  • Know your audience
  • Find the best resources or partners
  • Choose the right technology
  • Launch, learn, and revise

12
May 10

HTML5 Readiness

And it's interactive.

Here’s a great information display showing HTML5 and CSS3 compatibility and readiness of major modern browsers. The creators also developed the helpful website whencaniuse for Web developers.

Update: when I first posted this, I didn’t realize the interactivity is, of course, created via (wait for it) HTML 5!


22
Mar 10

Smashing

smashingmag.png

Buy. Download. Get enlightened.

Support Smashing Magazine: purchase their eBook, Professional Web Design. It’s a well-written, comprehensive text, and it’s pixels, not paper, so your eco-conscience can rest easy.

If you’re unfamiliar with Smashing Magazine, they work hard to bring relevant, interesting content to anyone in the Web profession on a daily basis. And their Twitter feed is one of the few that is actually consistently interesting and useful.


12
Mar 10

What Do You Suggest?

Interactive visualization of Google suggestions.

Okay, I just spent about 30 minutes when I should have been sleeping exploring the interactive visualization of Google suggestions at whatdoyousuggest.net.

The formula is simple: enter a word, and see the tree expand. The topmost words on each branch are the words Google thinks you’re going to type next based on what other users have searched for, and the thickness of each branch relates to the number of results for each word.

A visual search tree.

But enough explaining. Go waste some time!


2
Jan 10

Wordle

Wordle is cool.

Wordle will generate those interesting word-cloud images you see around the Web from words you paste or URLs you provide. On top of that, you can modify a lot of settings to customize your image. The cloud above was generated from the words on the home page of this blog as of January 2, 2010.


23
Dec 09

Binging or Googling?

Bing brings it.

When it comes to search, results are what matter. After using Microsoft’s new search engine Bing for the past several weeks, I can safely say that it delivers on the promise of being a great alternative to Google. I didn’t find the results drastically different, but in some ways they were superior. I had some minor issues, but I’m sure those will be worked out.

What surprised me, however, was that in many ways I actually prefer Bing’s more elaborate interface; Google trained me to appreciate its uber-minimal UI, but there are times when more is, well, more.

That said, I’m having a hard time deciding whether to jump ship altogether. Bing is very good, but is it so good that I should drop Google? Since I don’t really see the need to have two major search engines on my dance card, it seems like I have to choose between them.

So, I’m wondering: what’s your preference? Are you binging or googling?


10
Nov 09

If You Can’t Beat ‘Em…

My first impression of the new CNN.com was very positive. I liked the obvious hierarchies; the reductive interface design; the clear bucketing of content types; the ease with which I could find a link that enticed me, and go there.

The new CNN.com.

The new CNN.com.

My second impression was a bit more startling: CNN.com is starting to look like a news aggregator and, as we all know, news aggregators represent one of the primary threats to the branded news site; in fact, some would argue news aggregators represent a major threat to journalism in general.

That aside, I think the new CNN.com design is a tacit admission of what many of us have known all along: users are less concerned about where they get their news, and more concerned about how they get their news.

newspulse

NewsPulse.

One feature in particular caught my eye: the NewsPulse feature is essentially a filtered news feed that ranks stories by popularity. It’s as though DIGG has taken over this portion of the CNN experience.


6
Nov 09

LO and Behold

A note recording the first message ever sent over the ARPANET

A note recording the first message ever sent over the ARPANET

At 10:30 pm on October 29, 1969, the first message was sent from one computer to another via the ARPANET system. The historic transmission? “L.O.” Why? Because the sender, Charles S. Kline (whose initials you see in the log note above), was trying to write “LOGIN” when the system crashed at the letter G.

At this point in history, telephones were for communicating, and computers were for data processing. That is, until a few scientists realized computers should be able to talk with one another.

And here we are, 40 years later.


26
Oct 09

10 UI Design Fundamentals

Here is a quick summary of the 10 fundamentals of UI design from Carsonified. In particular, I like the quotes from known experts.


20
Sep 09

Twitter for Business

Twitter's good for business

Twitter's good for business

I was recently asked to develop guidelines for those who post to our corporate Twitter feed; this is what I came up with.

Our tweets should:

  • Provide information or insights that our clients or recruits (or other target audiences) will find relevant, helpful, or entertaining
  • Reinforce that we are thought leaders in areas important to our targets
  • Be timely; if something has been in the news more than a day or two, it’s probably too old to tweet about
  • Provide a link to read more, if available (especially if the link takes the user to our site)
  • Provide a contextual wrapper for any linked content that explains why we’re tweeting about it (people will rarely click on a link unless they have a reason to do so)
  • Only link to relatively hard to find content (e.g., not the front page of the WSJ)
  • Be succinct (just because we have 140 characters doesn’t mean we have to use them all)
  • Be conversational but professional
  • Be thought-provoking, but not necessarily provocative
  • Avoid referencing or linking to any of our direct competitors
  • Include our initials at the end of the tweet (e.g., ^mm)*

*Because we use cotweet, we have multiple posters for our twitter feed.


10
Aug 09

IE6 Must Die

So long farewell, auf weidersehen good-bye

So long farewell, auf weidersehen good-bye

We all know that Web sites should be programmed to run on most modern browsers; nothing is more frustrating to a user than to be told their software is too old to view your site.

However, we also know that Internet Explorer 6 is a buggy, non-compliant, frustratingly difficult browser to support, as this CNN article points out. Personally, I’ve seen time that could be spent on innovation and engagement devoted to band aid-type efforts to make simple sites work properly in IE6.

bd

Bring Down IE6

That’s why I’m excited to see a grassroots movement that includes Web developers and designers finally taking aim at this albatross. Their mission is not anti-Microsoft. If it were, they wouldn’t recommend upgrading to IE8 as one of their solutions. Rather, they are trying to make sure development time isn’t being wasted supporting a completely buggy piece of software whose time has long gone by.

So, if you’re on IE6, please, please, please, upgrade your browser as soon as possible. Otherwise, the Web might just be leaving you behind.


3
Aug 09

Stop Saying S*cial M*dia!

I was in the process of writing a post outlining my thoughts about why the term social media will have a short life.

And then I saw this presentation. I’ll still write the post about the imminent demise of social media (or, at least, the term social media), but in the meantime, this presentation is informative and fun.

View more documents from Marta Kagan.

26
Jun 09

When Flat was Phat

Need a retro arrow?

Need a retro arrow?

Remember when Web icons were small, flat, elegant little beauties, as opposed to today’s syrupy sweet jelly beans? These were the days of tiny GIFs that had to convey so much with so few pixels  (and they were usually limited to 216 Web-safe colors, to boot)?

Years ago I bookmarked 300 Images from 1800 Sites as a handy reference tool, and today while cleaning up my bookmarks I learned the site still exists!

According to Ro London, the site’s curator, “I visited only Fortune 1000 company sites, major online retailers, well known blogs, top advertising, publishing, and design agencies, technology and software industry leaders, and the very largest online news publishers. Approximately 1800 web sites later, I have this collection of 300 of the most interesting, unique, and beautiful formations of pixels to display.”

He categorized them, quite helpfully, by type: Arrows, Posts, Comments, Mail, Bullets, Print, and of course Carts and Bags!

So, if you want to take a trip down icon memory lane, visit now before this little museum of the ancient Web goes the way of the lovingly crafted, 256-square-pixel icon.