I’m sure you’ll be reading more about this, but I wanted to give a small shoutout to the Cisco WebEx team for their MacWorld Best of Show award (for the new Cisco WebEx Meeting Center iPhone app, which you can download via the iPhone App Store now.)“Using Cisco’s WebEx technology, businesses can share documents, make presentations, and collaborate with employees-or customers-around the world,” says MacWorld. Kudos to the WebEx web design team, who helped with some of the experience (the worlds of web and phone sure are merging quickly!)See the Cisco’s Collaboration blog and the MacWorld site for more.
In follow-up to my recent post about setting up my home network, here’s a sneak preview of a new site area we’re launching: Linksysbycisco.com.There are some really great tips about setting up home networks, including lots on wireless.This site is Beta so there are a few things being put together, but have a look and enjoy!
Here’s something for the web teams among you who have been pondering whether and where to use iconic pictures on your web site. There’s a something to be said for using icons to dress things up: Icons can be attractive, easy for users to remember, and, if implemented in moderation, they help with the usability of the site. We’ve begun to use icons on areas of Cisco.com and have found them to serve all of these roles well.But — icons are incredibly difficult to get right. Without some careful planning, it’s easy create something that’s difficult for users to understand, doesn’t fit well with your brand, or is just plain strange.Several groups internally have asked me about our icon design experiences, and I thought I would share a few of them here. So, let me tell you a little story about icons in a recently designed area of our site.When we were creating the Small Business area of Cisco.com, we decided to use some placeholder icons to represent the”I need to-” solutions sections in the Small Business area. The first renditions were abstract (see below), but even so, when we tested them in our usability lab most customers responded to them warmly.But, because of the icons’ abstractness, our users told us they really didn’t understand what the individual images stood for. We knew we needed to create something more realistic and obvious. And, we didn’t like the plain grey style. There were three areas we needed to consider when approaching the icon project:1. We considered usage conventions:
- What are the rules regarding when to use icons? Should they be navigational aids? Emblematic devices?
We have generally chosen to use them as navigational or functional — meaning that if you click on them they should do something. Not just for eye candy.2. We considered visual stylistic considerations:
- What style should we use for the icons? Should they be cartoony or realistic? Should the finish be shiny like glass, or satiny like Gummi Bears?
- What considerstaions should be given to the size of the icons, since smaller icons should be less detailed?
These stylistic decisions were the easiest. Since we have developed icon standards for our software, we took our cue from those design directions. Our house style is for realistic icons with a glassy finish and top light sources, viewed straight on, like this one:We also liked some of the enameled treatments we saw around the web, such as GM’s fuel economy emblems; GM’s look like enameled pins you could reach out and pick up:In the end, as you’ll see, we adapted something realistic and glossy, and we’ll probably move even more to a glass look in the future. My advice for your site is to develop a visual style for icons, patterned off of what you’re using for your products (if you make products and the products have icons, that is); otherwise look for other cues from your brand identity system.3. We developed the actual images needed:
- What specific concept do you create for each of the ideas you are trying to get across? This is the hardest part, and while the stylistic rules above can be decided once and codified as standards, this choice of image to convey a concept has to be repeated each time you need to create a new icon.
There are other considerations, such as how an individual image choice fits within a family of icons, visual compatibility with related software iconography, etc.Developing the ImagesAs I mentioned above, this part is much harder because each image is a new conceptual adventure. How do you come up with the perfect image for concepts like “Being More Productive” or “Connecting Offices and Employees?” The answer is, you sketch out a lot of ideas until you hit on the right thing.We started with some initial sketches, then moved on to refined concepts (still in sketch form) and then moved to final rendering.Here is how we worked through concepts for “Be More Productive.” You can see that our artist (at agency Level Studios in California) tried out a number of different ideas, which we then reviewed. As is typical, many of the ideas were rejected, but one was a winner and we pushed forward with it.Once we had chosen the basic image we wanted, we started exploring how we wanted the final version rendered. Rendering 1 below was deemed to be not realistic enough a style. We like rendering 2.5, but the view-from-above angle (while we thought it looked nice) didn’t follow our software standard of looking at icons straight on. So ultimately, we iterated until we had version 5 below, which became an archetype for the other icons we were developing as part of the project.Finally, we had to think about how the icons would fit into the navigational widget where they live. We had to consider the gradient behind them; whether we wanted a reflection or shadow or nothing below them, and also what the icons should look like when a mouse is over them (hover state) or not (non hover). You’ll notice in the end we chose a light gradient background, a slight reflection, and a tinted metallic non-hover state:The final step was to produce the style sheets and DHTML to support the new component.You can see these icons in action on the Small Business area of Cisco.com.Enjoy!P.S. Once you have developed a style, there are some affordable ways to get your artwork for icons created. I’ll blog about that in a future post.
You may have read Monique Morrow’s posting in late December about A Faster Internet for 2009. Something to keep in mind also is that some of the slowness you perceive in Internet performance may in fact be related to the network within your home, especially if you have wireless. So, even though a faster Internet is on the near horizon, there are some things you can do right now to make your home wireless Internet experience impressively faster. I just made one simple change at home while I was off this week that now has us surfing the web at warp speed.The big change I made was to simply swap out our venerable old Linksys WRT54G router (which has served us well for several years), with a new Linksys WRT610N Simultaneous Dual-N Band Wireless Router (pictured below). The WRT610N is full of new features that deliver speed and higher wireless performance in your home: Dual bands, extended range, and support of the 802.11 n Draft standard (“n” is much faster and delivers your web pages, video and other data much more quickly). I am startled by the faster performance — I feel stupid I didn’t do this many months ago. To be honest, even though I knew the technology has been improving steadily, I had put off swapping to a more modern router, because I figured that most of the computers in our house use the 802.11g standard and wouldn’t benefit from the higher speed and throughput of 802.11 n. But the general improvements in technology seem to have provided quite an upgrade in network performance even for old laptops we have that are using 802.11 g. And, we had forgotten that our iMac desktop purchased last year already has 802.11 n capability built in, so it is now zooming! In short, the improved wireless performance feels like an instant upgrade to all of the computers and gaming systems in the house (since a lot of what happens on all of these is via the network) and the new router — even with all these bells and whistles — cost well under US$ 200. By the way, while you’re saving your pennies for a new router, there are a few things you can do to improve wireless networking in your home that are good general practice, such as moving the router away from wireless phones, obstructions, baby monitors, etc. Our Linksys.com Home Networking Tips page offers many tips on how to get the most from your home wireless network.And, I really do recommend you upgrade to a new router like the WRT610N. Here’s CNET’s Review of the WRT610N which tells all about it. (The CNET gang make fun of the geeky product name, but really seem to like everything else )That’s my tip for the new year. Enjoy!
Normally I don’t get too excited about the idea of having video tutorials about how to use a web site. I mean, web sites should be “easy and intuitive,” right?But in truth, there are sometimes complicated functions on a site that require explanation and demo.Here’s a really nice example of video demonstration from Colin McNamara, who has put together a short demo for partners of how to use the Online Interactive Configurator.Enjoy!