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!
This Cisco Live in Second Life TechChat featured Shelly Cadora, PhD, and Ken Hook, technical marketing engineer, for Identity-Based Networking solutions at Cisco. During this TechChat, Cadora and Hook discussed how Cisco’s Identity-Based Networking Services (IBNS) help businesses by providing an innovative, scalable, and flexible solution to manage identity; the foundation for securing your network and business resources.View this online discussion to hear how IBNS:- Helps you understand and control who is on your network- Reduces overall investment by enabling identity of legacy hardware- Enables cost-effective management of changes throughout the organization- Is a scalable and more flexible identity solution, making it easier to deployClick play below to view the archive.We need your feedback. Please complete a brief survey on the Dec 11th event.Register for Cisco Live 2009 in San FranciscoDownload today’s presentation:Cisco IBNS presentation (PDF -- 2.5 MB)Read the 802.1x technology foundation posts for this event:Part IPart IIPart III
If you’ve ever managed a web project, you know how vexing it can be to get started with a clear scope and direction, especially if a redesign is part of the agenda. Maybe you’ve worked on a web project in the past where some important starting criteria wasn’t identified early, or the team forgot to define some specific items like success objectives, or calls to action, or desired metrics or customer needs. When this happens, this definition gap causes resets and rework. Worse, if you were working with an outside web design vendor, this rework and redefinition probably slowed down the project, degraded final quality, and added to the final cost of design and delivery. So, it’s important to get projects started on the right track. We do so at Cisco by way of a magical document called a Web Design Brief. I thought you might be interested in the format we use, and may find it useful in your own organization. So, you can download our Web Design Brief template here. The idea of the Design Brief is simple: (1) Answer some key project questions in a friendly PowerPoint format, and then (2) share it with your web team and designers or (if the project is big) prospective design vendors. It’s an easy and effective way of figuring out what you’re really trying to do with a new design or section revamp.A design brief will save you time, aggravation, and money, by answering fundamental questions such as:
Why are you embarking on this new web project, anyway?
What are your primary business objectives and success measures?
Who are you audiences and what are your users key requirements?
What similar sites or projects inspire you?
What kinds of customer data and site metrics do you have available to inform the design?
Who are the key contacts and stakeholders, and what other related projects are underway?
What is the global reach of the project?
We created the Cisco.com Design Brief based on best practices across industries, and we use it to catch the important questions early and get projects started off on the right foot. We’ve found projects that start with a standard Design Brief have much better success:
The objectives of the project are clear, so projects get kicked more efficiently with our design resources, saving time and money
The projects get completed more predictably, since there are fewer restarts and resets
Considerations like metrics plans and global deployment aren’t surprises, since they’re flagged up front
Design estimates with vendors tend to be better, since the project is well defined
Have a look at our design brief format, and feel free to adopt it to your next web project, especially if it involves design. Enjoy!