In Part 1 of this blog series we talked about the many ways iconography can impact a user’s experience. Whether through the friction of cognitive processing required to decipher symbolic meaning or in the ways we derive language through pictographic representation, icons allow us to anticipate functionality. Anticipated functionality in the world of User Interface and Experience Design is called affordance.
"When used in this sense, the term affordance refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used. A chair affords ("is for") support, and, therefore, affords sitting."
— Donald Norman
In Part 1 of this blog series a simple smiling face icon was presented expressing how in certain situations symbols can contain more information than our written language can express.
We account for this in UD Workshops by trying to harness visual associations and behaviors uncovered in the Personas we document, which if done correctly allows us to project perceived usability or behaviors as affordances.
In Part 2 of this blog series we turn the page and get into the nitty-gritty-rolled-up-sleeves details of icon: concepting, creation, construction and implementation.
Conceptualization as a starting place is sometimes the hardest part in that when we think of what makes a good symbol or icon, we can rely on the psychology of affordance to get us almost to the finish-line but there will always be the visual science of how a symbol transmits information. There is a reason why stop signs are red or yields signs are yellow or Highway signs are green.
So... An icon needs to have a certain size and shape or color to transmit information correctly?
To understand how this works we can simply stand on the shoulders of a few legendary icon/logo designers.
In the design community, few would argue that one of the greatest iconographic designers was Paul Rand. As the picture above accurately represents Rand designed logos 50-years ago that are still readily used today.
We reference Paul Rand because a lot of the baseline concepts Rand used in his designs can be incorporated into UI methodology for making vector Web Fonts and SVG graphics.
Notice Rand’s abc logo… If you take the same proportions of negative space and display the 50-year-old logo next to modern day circular social media icons, you can easily see some of Rand’s genius moving freely in wild.
“Simplicity is not the goal. It is the by-product of a good idea and modest expectations.”
— Paul Rand
Ok, Great Paul Rand was awesome… Where’s the nitty-gritty-sleeves-rolled up UI icon details.
All the buildup was necessary to express the background theory that comes along for the ride during UI/UX Workshops at Concurrency. ( man rolls up sleeves )
UI icon methodolgy was used for one of Concurrency’s international clients when they requested custom icons for a Windows 10 IOT sensor application. Working with the client and the Modern Application Team at Concurrency and through a series of UI workshops, Low Fidelity Sketches were created depicting the application icons.
The goal of the Low Fidelity UI workshops was to give the client and our teams a medium to work through so we could ascertain enough User Profile and industry knowledge to create icons that could conveyed enough affordance to the desired user base.
Cool, but how do we get from OneNote sketches to the High-Fidelity Icons…
The High-Fidelity Icons are created in Adobe Illustrator CC by importing the OneNote Sketches as static graphics and using the shapes and pen tools to draw overtop with layers.
The process of retracing the static sketches takes some time, but is well worth the effort because the vector based Illustrations can be used in a host of future projects. The vector based work as we are about to see also have the ability to be converted into almost any other formats without degradation.
Notice the negative space of the competed icons above and an attempt to recreate the same harmony and proportions of Rand’s abc logo.
If you can recall previous blog posts in which we talked about Micro and Macro User Personas you can quickly understand how effective Personas function. By Looking at the icons above as laymen we can derive almost no meaning from them, yet to the documented Personas from a UX workshop they make all the sense in the world because the user has affordance of the icon.
OK…OK… Back to nitty-gritty-sleeves-rolled up UI icon details
Like I mentioned earlier once in Adobe Illustrator you have vector based icons so moving in and out of different applications becomes very easy to do. As we all know JPG, GIF and PNGs work great online but with the advent of really high res monitors it has become apparent that SVG and Web Fonts are a clever way to maintain very sharp-edged graphics.
To create a standard desktop font I’m using a tool called Font Creator from High-Logic.
One of the really nice features of Font Creator is that it allows you to clipboard from other applications that support vector formats. If you can imagine having your icons or symbols laid out in Adobe Illustrator it is a matter of cutting and pasting into the keyboard layout of your choice in Font Creator.
Once you have your keyboard layout completed the way you want it, you can export an .OTF font file. At this point if you just wanted a Desktop compliant font your job is done, but for a Web Font you need to go through a few more steps.
To make the bundle of Web Fonts you can upload your .OTF exported file into an online generator called Font Squirrel
The Font Squirrel generator creates a zipped folder which contains all the converted fonts consisting of SVG, WOFF, WOFF2, OTF, TTF. The folder also contains the necessary CSS and a Glyph Chart which you can use to quickly display char codes.
If you take the Glyph Chart HTML and CSS and run them in a browser with developer tools you can see we have fancy awesome... new web fonts
The Yellow Highlighter shows the character keyboard arrangement produced by Font Squirrel’s generator.
That’s all for now. In my next blog post I will be talking about achieving great User Experience in the new SharePoint Framework and ReactJS.
We will be building upon some of the concepts we’ve talked about in this blog post, as we will be breaking down SVG graphics in greater depth inside ReactJS. We will then be deploying the SVG and some interactivity inside a SharePoint App and deploying the app to the local Workbench aswell as an online Modern UI SharePoint Landing Page.
Until next time.