Partager via

RIA: 10 Questions on Icon Design - I ask our Microsoft Design folks to respond.

  • Article

I have an Icon fetish that is disturbingly wrong. In that I collect them, horde them and will happily spend Microsoft's good hard earned money on as many of them as I can find - if allowed.

Yet, what makes Icon's so special? in that why do they enhance an applications user interface to the point where it almost is lost without them. Why does Microsoft and Apple spend a lot of money and time ensuring that menu navigation and icon's are done in a manner that's not only attractive to the eye, but enhance a users experience?

Well, I decided to ask our UX folks, the same folks whom chose Icons for our operating systems, software applications and so on. I had one intent, to get to the bottom of this whole Icon business and more to see where Icon's can play a role in tomorrows RIA. RIA is going to embrace the icon market, something I have now doubt and so with this, onto the top 10 questions with Frank Bisono & Brittnie Hervey (UX demi-gods).

Top 10 Questions for the Icon Ninja's here at Microsoft.

Q1. What is an icon?, in that we all see them daily in software but what does the icon represent to the end user?  

Brittnie: An icon represents an action a user will take.

Frank: For our purposes, an icon would be a graphical representation (small picture or object) for a file, application or command (action).  For the end user it should be an easy way to quickly identify what product they are in and what action they could take on a given object.

Q2. When you choose an icon, what is the process that you go through in selecting the right one?

Brittnie:         In Vista there is set usages for every icon that we define when created.  We align the concept of the functionality the user is taking to the best visual representation we can get based on elements rather than words.

Frank:          So generally you don’t just have the luxury of choosing a pre-existing icon here.  For most products or features, we create a custom icon.  On the server side, this means literally THOUSANDS of icons.  We follow the same process as Brittnie described above.  That generally means meeting with a PM and translating the description for this icon into a graphical representation.  Sometimes we have existing elements that we re-use to create an icon, other times, it’s a completely custom concept and we start from scratch.

Q3. Microsoft has released some guidelines around designing icon's, do you feel that the icon design community adhere to these?  

Brittnie: I believe it depends on group and situation.  Our current guidelines do not map 1 to 1 to what MS sets as guidelines.  I think we adhere when appropriate.  This is a harder question to answer.

Frank:           If you mean the design community OUTSIDE of Microsoft, well – it all depends.  We haven’t put out the most robust set of guidelines I’ve seen, but they are generally a pretty good start.  The main problem I have seen with regards to icons is that sometimes the importance of an icon is overlooked.  There are the obvious visual aspects of creating an icon, but then there are also things to consider such as geopolitical issues that can come back to haunt a developer or studio.  The last thing you want to do is insult a particular culture with the use of an icon that has a detrimental meaning to them.  I’ve also seen updates to products that continue to use icons developed for an older platform like XP.  If you are targeting your application to run in Vista, then you need to refresh the icons to match the visual style we have set for Vista (the aero style).  The last thing I’ll note is that all too often I’ve seen folks take a shortcut and use an icon designed for use at say 256x256 and they scale it down to fit a 16x16 block.  Or even worse, they upscale an icon.  That just doesn’t fly.  There are a number of reasons why you can’t just shrink an icon in Photoshop and call it a day, and the same goes for sizing an icon up.  At the end of the day, it just doesn’t look good.

Q4. I've always said that the icon market is ripe for the picking giving the technology going forward, where do you foresee this market going and is there room for icons in formats such as XAML?  

Brittnie:         I foresee icons becoming less important and the UI itself becoming more self explanatory.  With that being said I don’t think icons will ever go completely away, just less needed. 

Frank:          The icon market is definitely getting more advanced.  We are now seeing icons as large as 512x512 directly in the UI and with much richer detail than ever.  I totally see a future with dynamic icons that change as the application’s state changes.  As the graphics engines in our OS get better, so too will the use of icons and the value they can bring to the OS or application.  That’s just one example.  As far as XAML, there’s definitely something to be said there as well.  Right now if you take an icon created in Illustrator, you could export that as XAML and drop that right into code using Expression Blend. After all, a vector is nothing more than a mathematical computation rendered as a graphic right?  But another way to drop that into XAML is by defining a brush in Blend with an icon image and then using that brush in Blend (this is for when you only have a bitmap icon for example).  The “icon” does ok at scaling, but there is room for improvement using that technique.  XAML is definitely going to present some interesting possibilities moving forward with WPF applications.  We are still WAY early in defining that, but as we move more towards a WPF based environment, you will see more attention being given to XAML Icons.

Q5. I have an icon fetish, i just seem to store them, 1000's of them. Do you also have hordes of icons tucked away on your hard drive and what is it you look for in the design styles?

Brittnie: No, I do not have many different icons I store on my hard drive but we do have thousands tucked away on a sever/share.  The design style is the same for all the icons we create, as we have the Vista guidelines we follow.  I only collect those icons. J

Frank:          Well, I’m not going to lie here, I am a total icon fanboi  :) I literally have TENS of THOUSANDS of them hoarded away on my drives at home.  I’ve been collecting them for years.  I just love customizing my desktop and folders using custom icons.

Q6. OSX and Windows Vista have a unique design style to both, and lately the "Glass Effect" plays a role in design style(s). Why is this so? and do you have any thoughts on the next upcoming fashionable style?  

Brittnie: I believe this is because it is a new visual style that you don’t see in a lot of places, and it gives the icons an extra bang.  They feel more like a piece of art work then they do just a simple icon and glass adds some elegance.  I can’t predict the next trend, but if I had to guess, I would think it would be a hybrid between the MSN style of icons and the current Vista style, giving a little less importance to the icon, and more importance to the UI.

Frank:          Hmmm, the glass factor.  Yeah, this is all the rage and trend lately, but I think we’ll see some evolution in the coming years.  The glass thing is just a little too shiny and a little too frosty in places and I think you will start seeing that get toned down a bit.  The big effect there is transparency.  Like anything else though, too much is a bad thing.  I would totally tell you what I think the next trend in icons will be, but I’d rather keep that a secret and let you see it when we release it.

Q7. What is the biggest mistake a developer or designer can do in choosing an Icon for their applications?  

Brittnie:         In our world they could use the icon incorrectly, which then breaks the users understanding of what that icon does.  Windows, Windows Live, & IE all use the same library of icons so using them correctly helps the user to immediately identify what action is going to be taken when the icon is clicked, thus enhances the User experience.   The second thing they could do wrong is size an icon up from a smaller file, pixilation then occurs in the image.

Frank:          Totally in sync with Brittnie here.  An example of using an icon incorrectly would be choosing an icon that has traditionally had a different metaphor to mean something else in your UI.  This is BAD…REAL BAD.  It’s hard to retrain people to think about something in a different way and if your use of an icon gives the user a result other than the intended result because of a bad metaphor, well then you just hosed the usability of your product.  Metaphors in general can be a bad thing and should be avoided unless it is universally known.  You have to think about localization here and what the icon could potentially mean in another culture.

Q8. What advice would you give to the design market around producing a set of icons? given that most software vendors require a themed approach?  

Brittnie:         I guess the advice I would give would depend on what style they were trying to create an icon in.  If they were trying to create an icon in the Vista style I would say the most important thing to do is work closely with the library owner so they can understand what is already built, and how to visual represent something that needs to map into our icons, and to make sure the style guide is being followed.

Frank:          For designers outside of MSFT, the #1 thing I’d say they need to know their target audience.  Sounds stupid, but if none of your users are running Vista (which we all know they should right? J), then you shouldn’t be using the Aero theme for your icons or your UI will look like butt.  This is where proper research comes into play.  Know the limitations of your product.  Think about WHERE the icon will be used, platform, form factor, etc. (mobile device or a huge honkin projection screen in a NOC center).  Think about the environment in which your icon will be seen (potential lighting situations, types of display technology).  We all like to think we are designing icons that will be used on a Windows box in a home or office environment, but the reality is that your icon could end up in a place you never expected it to.  You have to think about a lot of factors when choosing the right design.  Think ahead, anticipate the unexpected and ask a lot of questions.

Q9. Icon's typically have two states associated to them (eg: recycle bin, full/empty). Yet some (Audim on OSX for example) are now using animation to represent status change, what advice would you give around keeping that from getting out of hand?  

Brittnie: I would say each situation needs to be addressed case by case.  I avoid using animation or multiple states of icons unless there is a status to an icon that needs to be represented for its functionality.    I think the cost of making second/third icons and the additional cost of animating those icons will keep us from doing it too often.  That is usually where I push back from when an icon of this type is requested.

Frank:          I would actually argue that it ISN’T typical for an icon to have 2 states.  There are definitely times when this is the case however.  Status change and animation are two separate things.  You can have one without the other.  I think that having status change is an effective way of providing feedback to a user for certain things.  Animation is where things would tend to get out of control if not done correctly.  In the case of an object that is synchronizing something or transferring data, I can see the value of adding animation to an icon because it’s representing that there is a task in progress. It’s live feedback letting the user know something is happening. But gratuitous animation for the sake of animation is where you start getting into the cheese factor.  How long did those flaming .gifs and websites with music last back in 1995?  Yeah…

Q10. Why can't we have a universal icon format that fits all platforms, devices and other digital surfaces.  

Brittnie: I think it would be AMAZING to have all platforms support then same file type/format, but I don’t know if this would ever be possible considering the constraints on the web that don’t exist in the OS.

Frank:                   I also think that the idea of a universal icon format would be ideal.  Unfortunately we live in a world where everyone wants to be king and nobody wants to concede to the other player.  You can say that about almost any format on the market.  Blue Ray vs. HD DVD /  PDF vs. XPS /  RAW vs. DNG, the list goes on.  Then you have the issue of maintaining backwards compatibility and re-engineering existing apps to take advantage of a universal format.  Then who owns it?  I think people are just set in their ways and on the grand scheme of things, a universal icon format isn’t at the top of the list of priorities for most folks.  It’s a shame really, but I guess that’s life in the 21st century.

Conclusion

I think that there is going to be a very lucrative market ahead for Icon Designers, especially as RIA begins to heat up more and more as technology gets advanced. Themed Icon designers, and quality ones will be in high demand along side UI designers - in fact - one could argue that a good UI designer for applications should come in armed with Icon Design capabilities. As you can then complete the entire themed experience in a way that others may not be able to.

image

XAML, is also something in which I think there is going to be strong possibilities around, and the ability to transfer icons back and forth amongst designer & developer workflow will also work towards reduction of having to design icon's for different scales (16,32,48 etc).

This is also something which probably doesn't get discussed enough, in that Microsoft can offer a lot of maturity in this space going forward. We have exceptionally talented, intelligent and extremely focused User Experience folks on our payroll. I expect as time passes we will continue to see some of this thoughtleadership and maturity help shape the Microsoft Next Web strategy.

RIA isn't just about technology, it also needs maturity and leaders in this space.

More information on Microsoft Design, check out:
https://www.microsoft.com/design

Also we have  icon design guideline(s) which others may find useful:
https://msdn2.microsoft.com/en-us/library/aa511280.aspx

Comments