Some Random Dude

Bridging the Gap—Making Games Conduits to Real Accomplishment

P.J. Onori — Tue, 17 Apr 2012 18:11:23 +0000

MMOs are a big deal. According to MMOData, there are roughly 20 million players globally. The MMO genre is unique due to its deep social hooks, its never-ending story and its often addictive nature. The addictiveness of MMOs have given the genre (and its players) a bad rap. Many consider MMOs a colosal waste of time. However, I see opportunity…

The irony of MMOs is while they have garnered the reputation of being useless time-sinks, the in-game mechanics are almost always built around continual self-improvement. The problem is that the self improvement is focused entirely on your in-game character. It is understandable how this is appealing to many people. Their character is not impeded by the drudgery of daily life and with enough effort they are able to be an important piece of a large community. In many MMOs, their character can even shape the very fabric of the virtual world itself. That is compelling. To achieve these goals, players are willing to grind countless hours. People put in serious work for their character and/or their guild. The problem is that work exists solely within the confines of that game. Many critics of games say players are too invested in their games. I think there needs to be even greater investment.

If you can figure out EVE, you can figure out Algebra.

From my view, the problem with games like MMOs is there still a clear line between reality and game. This model is fertile grounds for creating an escape mechanism. So while your real life is falling apart, your in-game life is doing just fine. Interesting opportunities arise by more closely coupling the in-game character with the player. Positive actions made in real life have positive impacts for your character and poor choices in real life have in-game consequences. All of the sudden, the achievement hunter mindset doesn’t turn off once you log off. The “game” is always being played.

How This Could Work

The questing system in MMOs has worked for quite some time. The basic mechanics are as follows: Give the player a small, clear, challenging, yet achievable task. Upon completion of that task, reward the player with experience points and/or items. This mechanic can translate well to real-world jobs to complete. These could be as simple as getting good marks on a test or photographing and geotagging graffiti in their hometown. As the player completes these quests, they gain in-game experience, powerful items and trust points. Trust points allow the player to take on quests that may be more complex or rely more on trust that the player is actually completing them. Obviously, if the player is caught gaming the system, their trust is dropped significantly. If they are caught too many times, they can be banned permanently. If a player accumulates enough trust points, they can help shape quests/activities in their local community and in the game.

Quest complete.

By keeping grades up, going to gym regularly or completing helpful tasks in their local community, they would get access to items that are otherwise impossible to obtain.

Example Scenarios

Jack is a 13 year old boy and a WoW player. He’s quite smart, but lacks attention to his schooling. Recently, as his game play has increased, his grades and classroom participation have begun to decline. Instead of taking the game away from Jack, his parents sign him up to bind his grades to in-game achievement. Jack’s teacher submits monthly grade reports to WoW quest managers. If his marks are high, Jack gets achievement points. Those points can be traded in for experience points and/or special in-game items.

Jack's B+ earned him Doomhammer.

Steve is a high school student who battles obesity. He recently got hooked on Star Wars: The Old Republic and is spending 30+ hours a week playing the game. He wants to level faster, but there literally is no more time in the week to make that happen. However, he sees that the game has an agreement with a local gym that is you log 5 hours a week at the gym and show progress, you can get huge amounts of in-game experience points or items. Steve is not interested initially in exercise, but he is interested in leveling his character. When Steve checks in to the gym, his account is credited with experience. Steve loses 20 pounds and gains 5 character levels.

Emma is a 24 year old who is a year out of college and lacking some direction. She did moderately well in school, but never found her calling. During college, she spends a disproportionate amount of time playing EVE with her guild (or in EVE, corporation). She continues to make EVE and her corporation a central part of her life. She is one of the corporation leaders who manages hundreds of members through activities and events. Emma discovers that she can use the organizational skills used in-game at the local food bank. By volunteering weekly, she gets extra ISK (EVE currency) to support her in-game activities.

Emma leads thousand-ship fleets. She can handle a 5 person volunteer team.

In our current view of the world, Emma’s skill at running a successful corporation is not something she could put on a resume. All the social collateral gained remains trapped in New Eden. Meanwhile, we have begun to understand the value of someone with 100,000 Twitter followers. Why the disconnect?

Doing The Math

This idea is just as much about the gamification of reality as it is the tangible manifestation of gaming. These real-life hooks could extend to voting, psychological/physical therapy, vocational training, etc. This approach provides an intangible yet significant incentive for people to do things and engage in spaces they may never have otherwise. In short, it is a gateway drug to personal and community improvement. It provides opportunities to show people that significant impact in the real world is possible, it just works and looks different than in games. It makes “gameplay’ a persistent and ubiquitous experience. You are playing the game just as much when you are working out at the gym as you are when in front of your gaming console.

If this seems unrealistic, consider how minuscule the participation rates need to be in order to get significant numbers. World of Warcraft has 10.2 million subscriptions and the average player logs in roughly 20 hours a week of game time. That’s almost 11 billion human hours a year.

If 1% of the World of Warcraft player base reallocated 10% of their game time to real world quests, it would equal 10.6 million human hours. That’s the equivalent of 5,100 people working full time for a year. A lot can happen with 10 million hours of effort…

Last Thoughts

This idea is not without its problems. People will no doubt try to game the system. Just like in any game, if cheating becomes rampant, the vast majority those who don’t cheat will move. Additionally, many players will only opt in while there are significant in-game incentives. Once their character is max-level and all the items have been collected, they will no longer engage. These issues are inevitable, but do not seem insurmountable or an impediment. In fact, MMOs have worked for years (fairly successfully) to keep these issues in check.

This is not a new idea.
Jane McGonical has spent years discussing this subject. Her TED talk is worth a watch.

The image of gaming as childish is as engrained in our society as it is destructive. Gamers prove daily their willingness to devote hours of work in pursuit of long-term goals (with the stipulation that it needs to interest them). Rather than admonishing this behavior, we should fine ways to draw from it for mutual benefit. Gaming is not going away. We can continue to brush it aside as some fool’s errand or we can view it as an important part of many peoples’ lives. By choosing the latter, we can tap into a remarkable amount of human energy.

Introducing Frank

P.J. Onori — Tue, 03 Apr 2012 14:41:37 +0000

It has been a long time coming. The WordPress theme running this site, which I have named Frank, is now officially available to use. The theme has been available for some time now, but it was not up to snuff for public use. However, I made serious push in the last two weeks and I feel confident it’s ready to go. This release is a big milestone because it signifies making good on a promise I made over 3 years ago to release all work for this site as open source. That promise brought about projects like Iconic, Cue, Off Franklin and coordy. The biggest project however, and the one I am most happy to give away, is the actual site I use to publish my work.

This theme is interesting for a couple reasons. The first is that it fast. I wanted to design a theme that was spartan, focused on the reading experience and loaded virtually instantaneously. There is room for improvement, but the theme works to keep queries and requests to a minimum. It was this emphasis on speed which prompted me to shorten the theme’s name of Franklin Street to Frank. The second interesting idea for this theme is the home page’s customization features. The theme gives users 8 different templates to choose from (1-up, 2-up, 3-up, 4-up, right aside, etc.). Each template can be stacked on another, in any order or number of your choosing. Additionally, most templates allow you to choose the number of posts to display and filter by category. I have yet to see this approach in any WordPress theme and I believe it to be quite useful.

There still is a way to go before I am completely happy with this theme. My goal is to get the theme submitted to WordPress’ theme collection in the next couple weeks (all while ensuring that the theme stays lean and mean). The theme admin screens need some love, there is documentation to write and the CSS could sure use another optimization pass. There are also some small improvements/fixes I’d like to make to my own site—and from now on, any changes to my site will be committed to the Github project.

I have to give a big thank you to Jon Christopher for providing some invaluable help in this process. Jon was a huge help in making the home template options work—I honestly could not have done it without him. I want to encourage you to use this theme if you find it useful and contribute to making it better. I have put in countless hours releasing everything related to this site. If you have found any of it useful through the years and wish to give something back, I would urge you to fork Frank and make it better.

Some Random Dude is Now (More) Responsive

P.J. Onori — Mon, 19 Mar 2012 18:43:12 +0000

In the past two weeks, I was able to update this site (and more importantly, the open source theme behind it) to have a responsive layout. This was the last big hurdle for me to get a final-ish version of the theme out the door.

There are still small issues that need to be addressed, but this was the big one. The next goal is to get a project page up along with some simple starting guides, take a breath and see where the project goes from there. My current site is still imperfect, but I consider it to be a good reflection of how I view responsive web design. As I mentioned in an recently, responsive web design goes beyond a responsive layout. Our designs need to address limited bandwidth and processing power associated with mobile devices.

My hope is this theme will continue to improve so that it can provide a viable option for bloggers who provide a fast, reading-centric experience for their visitors. Due to my limited schedule however, I need to rely on the community to help me push this project forward. If you have enjoyed this site and/or you would like to use this theme, I encourage you to do so. I also encourage you to help make it better for everyone else. So please, fork this theme and get in touch with me if you are interesting in contributing.

The Dichotomy of “Simple”

P.J. Onori — Tue, 06 Mar 2012 14:33:39 +0000

The word “simple” has varied meanings. This is certainly common in the English language, but the broad definition of the word can create confusion within the design community. This is not helped by the word’s influence and pervasiveness in the designer lexicon. However, the most challenging aspect is that “simple” can often have opposing, conflicting characteristics, creating situations where a design can simultaneously be simple and not simple depending on one’s point of view.

Let’s take an example of two cameras made in the late 1970′s—the Konica C35 AF and the Leica M4.

The Konica C35 AF was the world’s first point-and-shoot camera.

This camera removed one of the core tasks associated with photography and, in doing so, made the process of taking a photo as easy as pressing a button. Simple.

The Lecia M4 was the latest model of Leica’s beloved M Series rangefinders.

The camera akin to a blank canvas. The essential controls are supplied and are presented efficiently, removing any impediment between photographer and subject. Simple.

On the surface, the Lecia M4 appears much more complex. Its counterpart contains no focusing ring, no aperture ring, no shutter or speed dial. Through the years, as the M rangefinder remained almost fixed in time, the “simplicity” of future point-and-shoots only increased (with features such as auto-advance, auto flash, auto-loading, etc.). However, if you ever asked a person who has used a Leica, they would likely extoll its simplicity.

Opposing Definitions

The two examples of simplicity above could not be at greater odds with each other. One improves the experience by doing more for the user, the other improves the experience by doing less. One becomes an adjunct to performing a task, the other a conduit for performing a task. Therefore, hearing the phrase, “We want to make this product simple” can mean two very different things to different people. The challenge is knowing what type of simple is right for the people/context being designed for.

Each of these manifestations of simple has its time and place. Making a complex task easy to complete can have a sense of magic. In addition, stripping a product to its bare minimum can often provide an unrivaled elegance. However, the magic of easy ultimately wears off and the elegance of spartan design is not accessible to the unfamiliar. The approachable and unintimidating nature of easy-to-use tools can democratize a craft or trade. These tools have the opportunity to introduce countless people to an otherwise unobtainable subject. But their purpose for existing should be to prepare people for tools that expect and reward greater skill. Far too often though, these easy products act as a perpetual crutch.

Designers tend to have a bias towards one type of “simple”. I am biased towards the Leica kind of simple—I want to hand over more control to users at the risk of a greater cognitive overhead. This approach is not always appropriate, especially for the marketability of consumer-focused products. However, it is my opinion that the Platonic form of simplicity is much more in line with object as conduit than object as adjunct. When acting as a conduit the tool is completely dependent on its operator and creates a more fulfilling relationship with the object. The tools that strip our ability or incentive to learn, grow and (at times) fail strips us of some of our most sacred human experiences.

You will get no argument from me of simplicity’s virtues. However, simplicity can have at least two different definitions and they are not always equal in value. Before you embark on the task of designing a simple solution, it may be worth the time to determine what that actually means to you.

Design for Speed

P.J. Onori — Tue, 21 Feb 2012 14:38:48 +0000

The homepage of Some Random Dude as of today is 39.6Kb spread across 5 requests (13.1Kb and 2 of those requests are Google Analytics). Over 30% of pages sampled load in 1 second or less. 74.5% of pages sampled load in 3 seconds or less. These numbers increase dramatically when you restrict the sample page loads to countries with high broadband adoption. This site performs this way not because of a plugin I installed or the server’s Apache settings (although they help). It performs this way because of tough decisions made in the design process. This site was designed to be fast.

Why Speed is Important

Speed on the web makes experiences more fluid and natural. The breaks between pages creates a break in experience. In fact, speed often has a greater impact on experience than what is typically focused on in design. Page loads are more important than ever when considering mobile devices. A 500Kb page size may be annoying on desktops, but it can prove unusable on mobile. Responsive design is not just about fitting a website nicely in a smaller screen. It is also responsive to bandwidth, lower computing power and other less celebrated constraints.

Tips to Shape Your Thinking

1. Consider time as a core dimension of user experience

Speed has traditionally been considered a problem for engineering and all but ignored by most designers. However in many cases, design can make or break the performance of a site before a single line of code has been written. For that reason, the temporal experience (e.g., page load speeds, app performance or anything else that impedes the fluidity of an experience) of a product needs to be considered foundational to the practice of interaction design. This means that if a site loads/performs slowly based on its design, the design was unsuccessful.

2. Understand how design can impact speed

Grasping the basics of design’s impact on speed is simple, but digging into the nitty-gritty is quite difficult. The basics are obvious: large files and many requests will take more time to download. Anything delivered to the user takes time. The challenge is uncovering the less obvious, such as avoiding expensive database queries or CPU-intensive tasks (on both the server and client side). The main takeaway is that anything added has an impact. The goal is to take a preventative approach towards the basics and to work closely with your fellow developers to avoid the less obvious.

3. Determine where speed resides in the hierarchy of experiences you’re designing

Every experience designed has a hierarchy of needs that must be met. Those needs may shift in order based on the product’s focus on the people you are designing for. The design process is often an exercise of balancing all those needs appropriately. While speed may not always be at the top of the list in needs, it always fits into the equation. Understanding the importance of speed in the experience will help you make informed compromises and stands.

4. Make every element justify its existence

Designers already know that every pixel on the screen needs to be accounted for, every interaction justified. That same approach should be taken towards speed. Each request, byte and query added should be intentional and markedly improving the experience. If not, it should be gone.

"What would you say you do here?"

5. Treat bytes like pixels

It’s great to see an increased attention to craft, simplicity and a pixel-by-pixel focus to interface design. That same tenacity towards perfection of aesthetic and reduction needs to be directed towards performance. This means hand-optimizing your images, cleaning your HTML, CSS and Javascript. Make your sites pixel-perfect and byte-perfect.

More Concrete Tips

1. Write framework-less Javascript

Javascript frameworks are useful in many circumstances, but there are used far too often for unnecessary tasks. 90 percent of blogs do not need jQuery or any other Javascript framework (either because of their overly-narrow application or because the functionality it is being used for is inconsequential to the core reading experience). Writing bare-bones Javascript is a pain, for simple Javascript functionality, it is well worth it.

2. Think twice before using custom fonts

For far too long web designers could choose from only 5 or 6 fonts. Now, the opportunities are endless—and people have gone crazy. Just because you can use any font doesn’t mean you have to (or should). Besides, we use way too many fonts. There should be a marked improvement to the experience through the use of custom fonts to justify their application.

3. Kill your social media buttons (with fire)

Let’s be honest, social media buttons are not helpful for users. Facebook/Twitter/StumbleUpon buttons create an extra 2-3 requests each, which ads up quickly. At the very least, you should be tracking how often people actually interact with those buttons. Those added requests better be carrying their weight. They add visual and temporal noise. Unless the core use of a site is to share things on social networks, those types of things are suspect at best.

The points laid out are not too far removed from what is typically prescribed for effective design. The difference is that normally designers talk about stripping away elements and features for the purpose of simplicity in interaction. Those same practices of refinement and reduction can yield equally worthwhile results in creating more fluid web experiences.

Death by Interface

P.J. Onori — Tue, 07 Feb 2012 14:37:00 +0000

This post was originally posted on the Seabright blog.

Writing on the iPad has inherent challenges. In portrait mode, the keyboard is far too cramped to perform any significant typing. It is clear that landscape was the intended mode of typing due to the more realistic dimensions of the keyboard in addition to the iPad cover’s feature to place the device at a suitable typing angle. However, landscape mode has the problem of vertical space limitations with the keyboard active. With these challenges, I am always interested to see how app designers try to provide more functionality with such significant restrictions. A recent app that has gotten some attention is Writing Kit, which provides advanced writing features as well as in-app researching tools. Unfortunately, it has also followed a design cue I first observed on iA Writer for iPad. Writing Kit adds a formatting bar on top of the iOS keyboard, offering useful features at the cost of exaggerating the problem of writing space. One has to ask themselves how worthy an interface element is if it erodes the experience around the subject it is supporting.

Let’s get into the nitty-gritty of Writing Kit’s interface. Below is a screenshot of the app in landscape mode with a breakdown of writing space and content space.

The app’s content area accounts for only 36.6% of the screen. Due to this small amount of space, only 10 lines of text can be displayed. iA Writer’s typographic choices hinder that further by displaying only 5 lines of text in the default mode and 6 lines of text in focused mode. This effectively places “blinders” on the writer—where they can no longer have a broad view of what they have written. Some may prefer this side-effect, but myself and others undoubtedly do not.

When the elements that are not directly necessary for the function of writing are removed, the ratio of content to interface begins to even out.

If all regions colored red are replaced by additional content area, the content takes up 51.5% of the screen, providing significantly more visible content space. The features provided in the top bar and keyboard are good features, but they detract from the app’s core purpose. With such a space-restricted medium, there need to be new approaches to accessing functionality without persistently taking up significant space.

One approach is to rely more heavily on gestures. Daedalus Touch allows you to move the cursor space-by-space by tapping on the left and right edges of the content area. However, we run into the age-old discoverability issues when relying too heavily on gestures. Therefore I am skeptical of their long-term efficacy. I think that new interface patterns are needed to address these sorts of issues. I do not come bearing solutions yet, but I think it’s something we all need to be working on.

Keeping content as the focus has traditionally been less of an issue with the large screens found in desktops/laptops. Now that phones and tablets are becoming established and app makers are working to inject more functionality into apps, there is a risk of drowning content in interface. We have a lot of work ahead of us to avoid just that.

Font-Embedding Icons the Right Way—A Legitimate Alternative to Images

P.J. Onori — Tue, 31 Jan 2012 14:00:18 +0000

When I released Iconic in font format it got a lot of positive feedback. However, it had one significant technical issues that kept it from being practical. The glyphs in the font had no logical assignment to Unicode characters, making the output semantically unsound. A few months back, Philip Shaw shared a much improved method for glyph assignment which I have implemented in the current version of Iconic. I thought it would be worthwhile to share that approach so that others may adopt it and that a standard can hopefully form.

It is common knowledge that Unicode has an amazing amount of characters, many of which are non-letter symbols (e.g., Arrows, Currency Symbols, Geometic Shapes, etc.). There are many Unicode symbols that represent common icons seen in interfaces. Therefore it makes sense semantically to bind icon glyphs with Unicode characters that represent the same basic subject matter. In doing so there are significant advantages around backwards compatibility. If the fonts do not load or the browser does not support font embedding it will fall back to the Unicode default (if one exists).

Example

The table below shows how the icon font for Iconic matches its own icons with Unicode equivalents. The third column shows glyphs from Iconic and the fourth shows the default Unicode glyphs. Note: If you’re reading this in an RSS reader, you will only see the default icons. Duh.

Name	Unicode Value	Iconic Glyph	Default Glyph
Sun	0×2600
Mail	0×2709
Key	0×2602
Star	0×2605
Moon	0x263e

The Nitty-Gritty

I went through the specifics of code in my previous article, but I thought it would be worth showing again. Here is the basic CSS used (I have no doubt there are better ways to write this code, please feel free to share any feedback by commenting):

@font-face {
  font-family: 'IconicStroke';
  font-weight: normal;
  font-style: normal;
  src: url('iconic_stroke.eot?') format('embedded-opentype');
}
@font-face {
  font-family:'IconicStroke';
  font-weight: normal;
  font-style: normal;
  src: url('iconic_stroke.ttf') format('truetype');
}
.iconic {
  display:inline-block;
  font-family:'IconicStroke';
}
.bolt:before {
  content:'\26a1';
  font-size:32px;
  vertical-align:.15em;
  margin-right:.25em;
  color:#5d504f;
  opacity:.8;
  text-shadow:0px 1px 1px rgba(0,0,0,.3);
}

For this demo, I simply rap the content in a span, although you could also use an empty span tag to contain the icon for more control.

Lightning

The code above results in the example below:

Icon With Text

There are a lot of attributes applied to the example’s icon which show the advantage of using font icons. The icon can easily be resized, colored, rotated, scaled and adjusted with filters—all at runtime. No more re-saving images when you need to make a change.

Managing Extensibility

The most obvious outstanding issue is how to deal with icons that do not have a Unicode equivalent. Philip had a solution for that as well. Unicode has various private ranges which are sequestered for this exact purpose. Iconic uses the E000-EFFF range in these cases. Since there are no official assignments in this range, using them creates no semantic conflicts. However, any glyph that does not have a character assigned to it will display a placeholder (). This causes an issue for browsers that don’t support @font-face, so designers & developers still need to perform a check that a browser supports @font-face before employing this method.

Open Issues and Next Steps

There are still some issues that will need to be worked out, most notably a bug in Webkit that will not display glyphs at high Unicode hex values with the content:before rule. I have posted a bug and hopefully it will be fixed soon.

This is a major step in the right direction. From my perspective, this new method makes icon font rendering a legitimate and powerful approach towards displaying icons. I want to thank Philip Shaw who shared this idea and Yann Hourdel who helped me create the font creation scripts for Iconic. While Iconic is free and open source, I would like to offer these icons on services such as TypeKit and Google Web Fonts. The more demand there is for icon fonts, the greater chance they will be accepted at some point.

On a side note, the help I received through this process was one major reason why I open sourced Iconic. The new Iconic font faces were a community effort and it would not have happened without the tremendous help and feedback given by so many people. Speaking of feedback, I would love to hear your feedback on this method and how we can continue to improve upon this idea.

Designing Icons Around Privacy

P.J. Onori — Tue, 17 Jan 2012 14:56:14 +0000

The couple months ago a person contacted me to help them design a small icon system for an academic paper. The icons were needed to communicate different online privacy settings when sharing content or information. Communicating levels of privacy is far more complex than the simple nouns or verbs normally symbolized in icons. The set was small enough in number for me to take design them outside of my work hours. What I’m showing today are wireframes of the icons to communicate the general direction and explain the structure/rules behind this system.

The six different forms of sharing were: public (available to all), private (available to no one), shared with your friends, shared with your extended network (friends of friends) shared with groups (classmates, co-workers, etc.) and shared with specific people of your choosing. In addition, each form of sharing could have special attributes (such as the shared content can be available to advertisers) or combinations of various attributes. Additionally, these icons should take up a small profile to avoid being burdensome to the interface it resides in. Accommodating all of these issues proved difficult.

The first step was to concede that an icon-only solution was a fool’s errand. There was simply too much information to communicate with symbols alone. It became clear that the icons could not just be icons. Instead, they would look more like ESRB ratings. While no one will espouse the beauty of the ESRB rating system, few complain about the clarity. The difference is, the ESRB icons devote a considerable amount of space on information that is not about the rating.

There were three main challenges in designing the icons. The first was how to create a system to communicate the concept of “you” in relation to others. That was far more difficult than it initially seemed. Second was how to present the idea of networks (friends, non-friends and groups). The last main challenge was how differentiate something that is explicitly blocked from people to view as opposed to simply not sharing it with certain people. I am still unsure how clear these ideas can be articulated with symbols, but I think these icons head in the right direction. The subject (or “you”) is always larger than any other element in the icon. The subject’s friends are in full view (hence fully opaque) as opposed to people outside the subject’s network. When content is not shared with an individual, they are grayed out. When content is unavailable to specific people, a line (or wall) blocks their access.

Icons for this purpose should to be small, yet clear since they play a fairly minor role an interface. Anyone that has read about my process of designing Iconic and Cue knows that legibility plays a large role in how I design icons. Therefore these icons are designed for a maximum scale of 240×200 pixels and a minimum scale of 120×100 pixels.

I am at the point in the design where it would be useful to share with the community at large to get feedback. I’m uncertain if it’s worthwhile to go through a visual design pass—I would really like to hear people’s thoughts on that.If you have any thoughts on the issue of love to see you add them to comments below. I will be making the final icons available by PDF to download and use however you so desire.

Making the Transition from Development to Design—My Experience and Advice

P.J. Onori — Tue, 10 Jan 2012 15:13:10 +0000

A couple months ago, a person emailed me asking for tips for transitioning to design from a development background. As someone who had loosely gone through the same path (from programming to design to programming then back to design), I wanted to share any advice I could possibly give. After writing the letter, I thought it may be useful to a few other people out there. So if you are a developer looking to get into design, this is written specifically for you. To preface, this article is not why developers can be good designers. This article does a great job of articulating those ideas. So instead of duplicating good work, I spent time on some ways a developer can get into design.

Before I get into the meat of this response, I highly recommend you start your transition in the software design world (e.g., web apps, mobile apps, traditional software, etc.). If that is not the case, I highly recommend you reconsider, at least in the short term. I hold the belief that software design is going to be changing a lot in the next 5 years, and those changes are going to greatly benefit people with development and design skills. I think the future designer is going to look and act a lot more like a design technologist. So don’t look at your current position as a disadvantage, view it as a great starting point towards a complementary vocation.

I tried to put together a list of tips that would have been helpful to know when I first got started. The design technologist role was still taking shape when entered the professional sector and a lot of my own progression was from muddling around in the dark. To be honest, I don’t think I would change that even if I had the opportunity to do so. So, while I believe these tips could be helpful, there is something to be said about just getting yourself lost with the faith that you will find your way out and learn something in the process. If there is one thing to take away from this email, it is to refrain from mentally separating design and development. When you are creating wireframes, you are implying code that needs to be written. When you are coding, you are actualizing user experiences. To mentally separate each process is the first step towards viewing the creation of software as an assembly-line process. We have a lot of horrendous software due to that line of thinking.

My List of Tips

Remember, these are tips based on my personal philosophy and things that have shaped my approach. A lot of the thoughts below are opinions that a lot of other designers may disagree with. That’s what makes this topic so interesting.

Tip #1: Don’t stop building things

It will not be long before anyone designing software will require an understanding of how to make software. I have been saying this for nearly half a decade and it is finally starting to play out. Developers interested in design do not realize their development background is their greatest asset. Designers will be desperately working to have the skills you already have.

It is important to keep your development skills honed. If your goal is to shift your emphasis towards design, your day-to-day development tasks may change but they can still be used. The most obvious area where they can be used productively is prototyping. As interaction design becomes increasingly complex, prototypes will become a greater necessity. Your coding background will allow you to make more sophisticated, accurate and (hopefully) insightful prototypes. Ultimately, the real goal is to see no difference between your development and design skills. The skills gained from each focus are connected, interdependent and equally important towards making good software.

Tip #2: Learn design in order of dependency

Trying to tackle the entire universe of design at once will set you up for failure. I highly suggest easing into the process. A great way to do this is to start at what is most vital for software (its function) to what makes it delightful to use (its form). A worthwhile read on this subject can be found here. I decided to modify the author’s hierarchy a bit for our case (if you’ve looked at the diagram from the link provided, the list below starts at the bottom and moves up):

These steps gradate from the rational to the emotional. Learning design by progressing through these steps is optimal for two reasons. The first reason is that each tier is dependent on its predecessor—for instance, learning visual design without a strong understanding of interaction design will lead to poor output. The second reason is that this transition gradually moves you from pure logical, quantitative thinking to more qualitative, aesthetic thinking.

The first two steps (design for reliability and design for performance) will probably be areas you’re familiar with. However, it is important to understand how much design can impact the reliability and performance of software. Designing for organization is all about information architecture and content hierarchy. Designing for order and structure relates to traditional interface design (which is traditionally represented with wireframes). Designing for interaction, determines the details of how a human being actually uses software (translating a static interface into a rich interactive experience). Designing for aesthetics is obviously visual/motion design. There are ample material for each of these areas which will be easy enough to find—this article is not about detailing every step, it’s about explaining the progression of learning.

There is another step which does not exist on the pyramid, and it is arguably the most important. The last step is to learn to use all the skills concurrently. The end goal is to not treat these facets of design as separate steps, but as variables in a complex equation that is accounted for throughout the entire process. While the hierarchy of design needs will continue in the order illustrated, the aggregate of all skills are used to solve each need.

Tip #3: Design everything you do

During my first internship out of college, Stella Lai gave me this tip and it has been the best professional advice I ever received. Try to practice this tip as literally as possible. The obvious areas are how you dress and how your house/apartment/room is organized. I would suggest not stopping there. Your emails should be written/composed clearly and beautifully. Your conversations with individuals should be designed through how you listen, how you maintain eye contact, how you respond (both spoken and unspoken). Everything you do should have a reason, no matter how small. Design requires constant practice, this is a great way to keep growing.

Tip #4: Care about your audience

The work you care about will likely turn out better than the work you don’t care about. So what happens in the case when you simply cannot get yourself to care? I advise you to put your focus on the people your work will affect as much if not more than the subject of your work itself. If you care about your audience, you’ll automatically care more about the subject. The opposite is not always the case. The more we put others (the audience) in front of ourselves, the better the results tend to be.

Tip #5: Talk about design and listen even more

Reading is great, but I have learned far more through discussions with experienced, knowledgable and trustworthy people. When you find yourself in such a situation, ask questions and listen. I want to emphasize the importance of truly listening. In the short term, it is important to absorb as much good information as you can while you are in the learning process to challenge your preconceptions and push your thinking. In the long term, it is important because listening will be a vital skill in your practice. The best designers I know are amazing listeners. You will be doing it a lot (with your colleagues, your audience, your clients, etc.), so you should be good at it.

Tip #6: Learn to write, then learn to speak

Early in your practice it will be important to absorb ideas to help you form your own philosophies and approaches. However, at some point (preferably earlier than it is comfortable for you), it will be important to start formulating those points of view to an audience. Thoughts kept in your head have the luxury of being biased, irrational or simply flawed. Communicating those thoughts to an audience and opening them up to scrutiny forces us to improve our thinking. Writing well is also essential to practicing design. I’ve done some of my best learning through writing on my blog. I would suggest blogging as the first step towards sharing your ideas.

In the long term, I suggest trying to speak in front of an audience at least once. Some people love it, others hate it. I have spoken only a half-dozen times or so and I find the process as rewarding as I do terrifying. The skills necessary for successful speaking (e.g., compelling storytelling, brevity, connecting with the audience, etc.) will help you in your daily practice, especially client-facing interactions. Sometimes, communicating the thinking behind your work is as important as the work itself.

Tip #7: Focus on defining and solving problems

A lot of the work you see at design showcase websites are great examples of well executed decorations that lack substance. The people that can perform this type of work are countless and the skills highly commoditized. Avoid pixel-pushing at all costs – your job is to solve problems. View your work through that lens at all times. Always know what problems you are trying to solve while in the process of designing (e.g., people are having a hard time knowing where to go next in a flow, or, the current visual design does not reflect the mood of our brand). Good designers solve problems, great ones ensure they are solving the right ones. Accurately defining the problem goes a long way towards solving it.

Tip #8: Listen to your gut, but trust your brain

Trends come and go, but elegant, rational and utilitarian products never go out of style. It’s not bad to follow your instincts, but always follow up to understand why you did it in the first place. “Because it felt right” is a fine way to start a conversation, but not a good way to end one.

Tip #9: Be your biggest critic

You will never be perfect, but that shouldn’t stop you from trying. There are always areas to grow. Your work and your practice always can (and should) be improved. When in doubt lean towards being too hard on yourself rather than too easy.

Tip #10: learn from the time-tested—and emulate it

Few things prove a design’s success better than how long it remains relevant. Look to the timeless to guide your approach. This need not be limited to software, the thinking behind designing a great chair often parallels the thinking behind designing great software. Understand how others before you have solved similar problems and try to determine why it took the shape it did. Value precedence; it carries considerable weight. Blindly echoing design trends is a great way to have a dated portfolio in a couple years.

Focusing on digital influences to follow, the operating system is one of the most time-tested and finely tuned pieces of software in existence. Explore the nuances, understand the patterns and know them like the back of your hand. When do you use a drop down as opposed to radio boxes? Why? There are smart reasons behind most of these details and they are worthwhile to know.

Tip #11: Ideate romantically, create pragmatically

Our ideas should be bigger than reality, but our execution should be married to it. This allows us to see the grand future of a product while ensuring that it can exist to have any future at all. Both are important, but they can be detrimental if out of balance or practiced at the wrong times.

The design world is in a phase of rapid change. Designers who understand and can work with code are becoming the prototype. Your transition is not going to happen overnight and a lot of your thinking will need to bend. However, I think you will be surprised by how much of your thinking will not. A lot of your shift is about understanding that you have already been creatively solving problems as a developer, and that a lot of that thinking is universal.

Iconic is Now Open Source

P.J. Onori — Tue, 03 Jan 2012 14:53:08 +0000

When I made Iconic nearly two years ago, I was always committed to keeping it free. There are a lot of very good commercial icon sets, but I thought it was important to have a free alternative. I am unsure whether the success of Iconic was due to its design, its free model or a little of both, but the set has been downloaded hundreds of thousands of times and it being used on thousands of websites. I’m tremendously happy with how useful it has been for people. That said, the most impressive thing for me has been the willingness of complete strangers to contribute to this project. I am going to make that a lot easier now by open-sourcing the Iconic on Github. In doing so, I have high aspirations for the set moving forward.

Why Open Source?

There are a lot of “open source” icons available, but I have not come across any that are truly open source (i.e., releasing Photoshop/Illustrator source files). On the surface, open-sourcing an icon set does not make much sense. Simply adding visual assets to a repository is pretty useless. I completely agree. Even though I have included all Illustrator source files used to create the icons, the meat of Iconic is in the tools used to automate the production process. These tools are as core to Iconic as the icons themselves. By providing these tools freely, I hope to influence other designers to include these types of tools in their projects.

Of equal priority for open sourcing Iconic is to create greater community involvement. I want to see all the tools improve through the help of interested individuals. As far as I am concerned, Iconic is now a group project. In fact, two of the biggest improvements in this release had absolutely nothing to do with me. Keeping the icon set so close to my chest has limited its progress in the last two years. It works better for everyone to open it up.

There is a lot to this release. Absolutely everything I have created for this icon set is now available to you. Below are the main elements:

Ready-to-use fonts, vector icons (SVG format), Omnigraffle stencil and one color of the raste icons (PNG format)
The main Illustrator source file (only CS5 for now, I will provide older versions later on)
Illustrator JSX ExtendScripts to automate the creation of SVG and PNG files
Illustrator symbols (thanks to Achim Rosenhagen)
Python scripts to automate the creation of the Iconic fonts (TTF, OFT, SVG, EOT & ATM formats) along with generated CSS files and HTML demo (more on this later in the post)
Ruby sprite generator (thanks to Endel Dreyer, still a work-in progress)
Actionscript 3 source files plus the Ant build scripts used to create the SWC

The biggest effort of this release was to improve the embeddable fonts provided for this set. I am going to be dedicating a full article about the new organizational principle used along with all the gory details. However, I would like to thank Philip Shaw for providing what I consider to be a brilliant approach for Unicode glyph selection and Yann Hourdel for helping create the Python scripts to automate font creation (which happened to be, by far, the most arduous process prior to his help).

Going open source also forced me to drastically improve the ExtendScripts I created. They are still imperfect, but they have come a long way from the kludgy systems I had grown to accept. To make a long story short, all icon production can be done with a script. You could imagine how long it would take to save 171 icons at 4 sizes at 13 different colors (hint: that’s 11,970 files). Through improving the scripts, I learned how to create custom input dialogs for ExtendScripts should come in handy some day.

Lastly, the number of icons in the set actually shrank in this release. There have been a few icons that I was never happy with that I kept for one reason or the other. My emphasis now will be to improve the overall quality of the icon set before I go on to add others. In fact, I would not be surprised if the set dropped to 165 or so before I am finished.

Wishlist

There are many more tools I would like to provide for Iconic. Most notably, I want a version of Iconic in Javascript that writes icons in Canvas dynamically. This is my number one outstanding item — I know how to do it, I just presently lack the facilities to make it happen. If any of you are interested in such a project, by all means, let me know in the comments below.

I would also like to provide a Ruby Gem and WordPress Plugin that allows for simple deployment of the icon set through any process they desire (e.g., font-embedding, CSS/Sprites or just regular file requests). I am also very open to other ideas if you have one.

The Grand Vision

I want Iconic to be best web-focused icon project through its support of forward-facing display/deployment methods. I also want it to set the standard for how an icon set should be released and maintained. I want it to be an example of how community involvement, open-source principles and strong technological support can be integral to a design project. Lastly, I want people to believe that they do not have to pay for quality design resources. We all benefit by high-caliber public assets — I know I have. If people choose to buy an icon set, I want them to feel like they had to luxury of choosing.

This is a lot to live up to, here’s hoping it works out. I would love to have your help.

New Flick Icons for Cue

P.J. Onori — Tue, 20 Dec 2011 13:52:29 +0000

I designed Cue, a gesture icon system, to satisfy a mental itch. However, it has been flattering and exciting to see people actually using the system in their daily work. Now that this icon set is no longer just a pet project, I want to be aware of its shortcomings so it can continue to be useful. One of the most requested additions is a “flick” icon. I intentionally withheld designing a flick gesture because I have always been a little fuzzy as how it differed from a swipe gesture. I understand how it differs in “feel”, but I always got tripped up determining the technical differences of a flick and a swipe.

To be honest, I am still a little fuzzy on it and it seems like I am not alone. However, I asked for some guidance on Twitter and got two similar and logical definitions. Which led me to this most recent update.

The arrow on each gesture has always signified motion of the finger while maintaining contact with a surface. The flick has a portion of its gesture off of the surface. Therefore, the arrow needs to communicate something different. To do this, I removed the “backbone” of the arrow. In doing so, the arrow is not anchored but direction is still implied.

I would be curious to hear what any of you think about this new icon. The new gesture, along with the rest of the rest, is available for download. I hope the icons prove useful.

Write Like You Design

P.J. Onori — Tue, 29 Nov 2011 14:00:58 +0000

I have long held the opinion that writing was part of design. I simply did not practice it. Writing was not given much priority while I attended art school. Writing continued to be of secondary concern during the early years of my career. Evidence of this can be seen on this blog. I started taking my writing more seriously after my wife, who has her master’s degree in English, started editing my posts. It progressed further while working at Adaptive Path, where it was clear that how we communicated our work could be as important to our job as the work itself. Currently, the attention given to language in the work at Seabright solidifies a dedication to the writing process in my practice.

I am not suggesting that the design community considers writing unimportant. However, I have often experienced it treated as something else. I consider the short list of well-written design blogs to be proof of that. Yes, they exist, but they are the minority. As long as writing is treated as something else by designers, there will be a disconnect between the aesthetics of the visual and the textual. I am suggesting that there needs to be a shift towards considering writing as a required skill of designers. Writing is design. There is no separation.

Designers devote endless hours to make their solutions more elegant. They understand the importance of detail. Clarity and simplicity are cherished. The same is often not said about their craftsmanship of words. Dieter Ram published the 10 principles of design which have served as a guide to some and a set of commandments for others. While I have no right to act as an example to follow, I can propose ways to look at writing so that it is integrated into how one thinks about design. Below are 10 principles of good writing, derived from Dieter Ram’s list intended to illustrate how writing and design are often one in the same.

1. Good writing is reader-focused: The style of writing, the content provided and its format of delivery should be executed for the benefit of its readers. Writing that is published to fit a schedule, prop up traffic or unproductively rant wastes readers’ time.
2. Good writing is trustworthy: Readers need to trust that what they read is honest, genuine and fair. Writing that lacks any of those attributes erodes credibility and lead readers towards poor decisions.
3. Good writing makes its subject useful: Writing will have a limited impact if the reader does not understand how the subject relates to them or how they can move forward. Informing is prerequisite, empowering is ideal.
4. Good writing is unobtrusive: Writing does not need to be verbose to be smart. If a concept can be accurately communicated with simple words, use them.
5. Good writing is focused: A good piece of writing clearly articulates the subject it is covering. The end. Tangents dilute and create confusion.
6. Good writing provides novel information and perspectives: Writing should have something new and useful to say. Piling on a subject with nothing new to share helps no one. Better to direct readers to a well-written piece than duplicate it.
7. Good writing is aesthetically pleasing: The rhythm and composition of words can and should be aesthetic. The meaning of words should carry as much beauty as their visual representation. Well executed typography without well executed writing is missing the point.
8. Good writing is well-crafted: Typos and grammatical errors are unacceptable. Writers should strive for a technically flawless reading experience.
9. Good writing is as little writing as possible: Every word written should count. Any paragraph, sentence or word that lacks significance wastes the writer’s and the readers’ time.
10. Good writing is long-lasting: Our subject matter and language may be impacted by current trends, but our ideas should not have a short expiration date.

Communicating ideas has been and continues to be a primary goal of design. Considerable effort is spent by designers to convey complex emotions, processes and concepts through visual abstractions. These endeavors have merit and provide results. However, sometimes a simple, well-written sentence may prove more effective.

Plone Conference Presentation

P.J. Onori — Mon, 07 Nov 2011 21:49:49 +0000

I wanted to share the deck from the presentation I gave last week at Plone Conference 2011. I had a wonderful time giving it — the conference organizers were great along with the audience being warm and welcoming. Some really good conversations came out after the talk. I wish I could have stayed there for another two hours just listening and sharing with the crowd.

I would like to continue presenting this talk at other venues. While this line of thinking is catching on, there are still far too many organizations that practice design and development in a segregated manner. There also seemed to be some genuine interest on what this talk would look like if focused in the other direction (i.e., how designers are vital to developement). I would love to have the opportunity to share my thoughts on that subject as well.

An Open Source Manufacturing Future

P.J. Onori — Wed, 02 Nov 2011 18:32:51 +0000

A few months ago, I listened to a talk by Chad Jennings where he discussed the upcoming shake-up around small scale manufacturing. This is due to the advancements in both 3D scanning and 3D printing. The things that can be accomplished with today’s 3D scanning/printing process is truly amazing and if the technology behind it follows the same trajectory as personal computing, these devices will be within consumers’ reach in the years to come. If that does come to be, what are the possibilities and implications of such a future?

3D manufacturing is at a transitional state. The tools to design 3D objects are plentiful but the hardware to actually create them are too expensive and complicated for the average consumer to own. This has led startups such as Ponoko and Shapeways to provide production services for individuals’ designs. Concurrently, we have seen organizations such as MakerBot pop up, which provides ideas and support for 3D printing of objects. What I consider to be the most intriguing project to spring out of the movement is Thingiverse which provides a community platform to share your 3D plans for making objects.

Many of the objects shared at Thingiverse are silly and mostly novelty. However, it only takes one practical object to see the potential. Take for example, this design for a Canon lens hood.

It does not take much creativity to consider all the other applications something like this could have. We are surrounded by small objects in our daily lives where the cost seems disproportionately higher than their production quality. Never before in modern times has there been a practical alternative to producing physical objects by consumers. If a person can go on the internet, download 3D plans for a doorstop and manufacture it in their apartment, what is the incentive to pay $5 at a store for the same thing? Simple things such as cups could be produced literally in-house to save people money and allow another outlet for personal expression. The cabinet you buy could come with files to reproduce all the parts in case one breaks. The possibilities are boundless.

This will not remove the possibility for profit, but it will force craftsmen and manufacturers to be significantly better than their open source competitors. Be that through service, aesthetics, function or manufacturing quality, something will need to differentiate their product from free options. This tension has been beneficial to all in the world of software, I see no glaring reason why it would not be equally helpful for physical manufacturing. Open source software leveled the playing field for millions of people in this world, imagine what open source manufacturing could do.

If you would have asked someone 30 years ago if there would be a personal computer in everyone’s home, they would have said you were crazy. Today, that is close to fact. Virtually every American household has access to a computational and connected device (whether it is a traditional PC, gaming console or mobile device). It may not be too far off to expect a 3D scanner/printer in most homes or at least in every community. Such a reality could bring a manufacturing revolution that could make the internet’s impact on business look microscopic.

Redesigning the iPhone – is it Necessary?

P.J. Onori — Tue, 25 Oct 2011 15:48:20 +0000

Three weeks ago, Apple unveiled the iPhone 4S. The phone was a tremendous leap ahead of its predecessors, yet the much of the feedback contained a tint of disappointment. Most of that disappointment stemmed from the news that Apple did not showcase the iPhone 5. Under the hood, the iPhone 4S had been drastically improved, however it did not provide the one thing so many people had been frothing at the mouth for, a new body. This response saddened me because it displayed a general misunderstanding of product design by the media and public at large. Would it be a problem if the iPhone 5, 6 & 7 looked the same? To many, yes. However, I believe the physical design of the iPhone has reached a level of quality that should make us question changing its design to meet the public’s insatiable need for new.

Good Design Removes the Need to Redesign

When you look at some of the best designed products, you will notice that their design evolution is subtle. This is not due to complacency, it is due to success. Real world examples are rare, but they are immediately recognizable. The Porsche 911 has remained remarkably unchanged through the years, yet still is considered one of the most striking cars on the road. Observing the sporadic evolution of other automobiles through the years, such as the Ford Mustang, make the 911 all the more remarkable.

The Leica M rangefinder is the most obvious example of an unchanging design. The camera has continued to be the pinnacle of photographic quality, with the camera’s body design seemingly frozen in time for 50+ years.

52 years of design of the Leica M rangefinder. From top left, Leica M2 (1957) to bottom right, Leica M9 (2009).

To this day, the Leica M is one of the most revered cameras in form and feel. While important changes have been made through the years (the most obvious being the move from film to digital), there simply has been no need to rethink the design of the body. It has continued to function and delight just as well as it did 50 years ago.

An interesting thing happens at some point with products like the 911 and the Leica M. Its form becomes its symbol. This symbol makes the product instantly recognizable and emblematic of the quality behind it. That may seem obvious or simple, but take a quick audit of products you use on a daily basis. How many product lines can be summarized in a singular, unique form? I bet you cannot come up with that many.

From Innovative to Iconic

Back to the iPhone. I consider the iPhone 4 to be in line with the Porsche 911 and Leica M in design. It is not time-tested like the two former examples, but it shares many of the timeless qualities found in them. I would have no problem if the iPhone 5 looked the exact same as the iPhone 4x. Its current design is the result of years of refinement. The first few generations of iPhones were wonderful products, but the iPhone 4 is on another plane of existence. In the all-star lineup of Apple products, I consider it to be their crowning achievement in industrial design. We should all be lucky enough to work on the product that doesn’t need to be rethought every one or two years. Let the iPhone change when it needs to change. I would hate to see Apple make arbitrary decisions to the design of the iPhone’s body just to placate the lesser nature of some consumers and Wall Street.

With all that said, I expect to see a revised design for the upcoming iPhone 5. I have full faith that it will be a beautiful product, just as we have come to expect with Apple. However, I would hate to see such a refined product be left behind without significant reasoning.

The Guardian Opens Up Their News Cycle

P.J. Onori — Thu, 20 Oct 2011 17:53:57 +0000

About a year ago, I wrote about the state of online content publishing and how we need to expand our definition of sharing around our content. Most of the article revolved around what happened after a piece of content was published and how a piece of content could collaboratively grow over time. After I finished that article, I began to execute some ideas in this space, most notably experimenting with opening the writing/editorial process to the public prior to publishing (see example). I tried this three separate times and they were far more successful than I imagined they would be. I had planned to write more about this idea at some point in the future, but time has been in short supply.

This concept seemed like a perfect fit for the journalism space. I thought it would be fascinating to see news rooms open up what they are covering and be able to participate in real-time with the writing and editorial process. It could be messy for sure, but the potential for insight and richer news stories seems tremendous. Well, the Guardian recently announced that it will be making half of that idea a reality by maintaining an open newslist and promoting Twitter discussions with the #opennews hashtag.

All news stories are broken up by subject matter with the general time they are slated to be published and who is working with them along with a way to get a hold of them.

This process allows the public to help fill in a news agency’s gaps and improve their coverage. By knowing what is slated to run or what is not, individuals can provide valuable feedback to news providers early in the coverage process. This can lead to more efficient use of time on covering the most important news stories of the day. Additionally, providing access to each journalist working on the story creates an avenue for those with pertinent information to help the story along. This two-way access equally aids both the public and the journalists.

So many informational sources are becoming increasingly open. I have found the news industry to be abhorrently behind the curve both in how they disseminate information and how they collaborate around it. With luck, this process will catch on with the public, succeed and expand to other news agencies. I look forward to the day when this level of openness is a standard in the news industry.

HunchWorks UX Week Talk

P.J. Onori — Mon, 17 Oct 2011 14:00:32 +0000

I had the pleasure to co-present at UX Week 2011 about HunchWorks. Chris van der Walt and I talked about the importance of HunchWorks and how the design for this project was quite different than your typical web experience. I would like to add that I detest seeing myself on video.

Speaking of speaking, I will be presenting at the Plone Conference on November 3rd. Hope to see you there.

Redesigning Gesture Icons – A Proposed System

P.J. Onori — Mon, 10 Oct 2011 22:00:44 +0000

Update: The proposed design described below has been released as Cue.

One of the clearly understood problems associated with touch interfaces is people are often left guessing as to what gesture(s) can be performed throughout an app. There are common interaction guidelines to follow, but that can only take us so far. One of the obvious ways to help solve this issue is to articulate the interactions allowed through gestural icons.

These gesture icons act as roadsigns to an app for interaction way-finding. As expected, there has been a significant collection of gesture icon sets that have been made available to fill this need. The current crop of icons succeed in clarity, but they lack the iconic qualities necessary to act as a standard representation of gestures. My goal is to help create a foundational set of icons that are flexible, clear and distilled to a point where they could become a standard visual system to build from – ultimately to be used within apps for when explicit communication is needed.

The Proposed System

Since all touch gestures start with the application of finger(s) to screen, the system makes that action it’s foundation. Instead of representing the entire hand for a gesture, the icons focus on the point of action. The tap icon is an encapsulation of the fingertip.

The principles that drove the icon design were the following:

Create a core visual language that all gestures could build from.: Gestures will come, go and change over time. The system should be able to support that.
Distill each gesture to its core action.: The illustrative nature of most gesture icons reduce focus from the fundmental interaction being performed.
Represent each gesture in a non-literal, yet clear way.: Not everyone is right handed, nor do they perform gestures uniformly which makes literal expression less than optimal.
Design forms that would be legible at small sizes.: Mobile devices are already space-constrained. My goal was to create icons that could take up little space in a mobile interface if needed.

The whole system builds from the tap and press icons above. Below lays out the standard gesture interactions found on most modern mobile devices.

Icon Comparisons

Gesture icons, while visually clear, represent gestures very literally. This can be problematic because it insinuates that it is how the gesture should be performed. The icons also quickly lose legibility at small sizes. Luke Wroblewski took a different route with his icons, showing the the start/finish states of a gesture, which is quite helpful, but makes the icon more elaborate. Below are comparisons between the different gesture icon sets (my concept, Gesture Icons, LukeW’s icons and GestureWorks respectively).

Tap

There are a few things to notice between the icons. In the tap gesture, look at the percentage of space in each icon that is dedicated to the actual tap. By displaying the entire hand, the fingertip responsible for the tap takes a small portion of the actual icon – which is a very inefficient use of space. Showing the hand for a gesture certainly provides useful context, but the hand dominates each icon, diminishing the point of focus.

Swipe Right

The inclusion of the entire hand is all the more problematic the more complex the gesture becomes. Even with the simple swipe gesture, icons become very difficult to confidently read at small sizes.

Spread

The illustrative style also becomes problematic with gestures that can be performed in many different ways. For instance, the spread can be done with one hand or with two hands. It can be done with the thumb and index finger, thumb and middle finger, index and middle fingers, etc. It can be done with the right or left hand. Two of the icons assume the gesture is be performed with thumb and index from the right hand. Another uses two hands. My opinion is that gestures need to be abstracted beyond any specific form of execution to be successful.

Next Steps

Nearing the completion of this icon system, I ran across the work of Ron George who had come to the same conclusion as I had in the belief that standardization would require abstraction. This gives me confidence that there is something to this idea. I do not think the icons are perfect, but I truly think there is something to this idea. I am planning on releasing it as a finished set when it is at a more refined state. I am hoping to get feedback from readers to get a sense if the sentiment is shared and how it can be improved for greater clarity and aesthetics. Once I feel confident that the system is at an appropriate level of completion, I will release it for free under the Creative Commons share-a-like license.

The Amazon Fire Symbolizes Android’s Worth

P.J. Onori — Mon, 10 Oct 2011 18:00:18 +0000

I have defended Android for years. I own a Nexus One, which I still consider to be one of the best Android phones made. I also strongly believe it does not hold a candle to anything past the first generation iPhone. Much to my dismay, my phone attracts conversations about why don’t have an iPhone. Before a week or so ago, I could speak in theory and philosophy, but now I have a concrete answer.

To preface, I think iOS leads the pack in UX. That said, I still maintain my long standing opinion that Android is the most important ongoing project for mobile. Android, from my knowledge, represents the first successful consumer-level open source operating system in history. This fact has allowed me to look past its shortcomings to this day.

That view became shaky after seeing mediocre or downright poor implementations of Android on various phones and tablets. Seeing carriers hack Android to pull out useful features made me doubt if an open source operating system could work with such harmful or uninspired derivatives being produced. Seeing the Amazon Fire reaffirmed my viewpoint. If you have not read about the Fire, what makes it especially interesting is that Amazon forked Android to make their own special version of the operating system for their device. The interface looks and works quite differently from the Android we are all familiar with. From the reviews coming in, the Fire is a good (not great) tablet that is different in focus from any other tablet on the market. It has a unique software experience from any other device in its category and it does not come from a traditional consumer electronics organization. You could argue that Amazon had been moving in this direction for years with the Kindle. However, the leap in effort required by Amazon to develop the Fire with its custom-tailored interface from scratch would have been risky and outside of their current skill set. This does not happen without Android, period.

For years, we have had confidence that Apple will provide a top-level user experience with their products, especially with iOS. While that is reassuring, I have been hoping to see the same diversity of thinking about design that we saw in the forming years of the Internet. We saw the explosion of design for the web for two main reasons: there was a lot of money to be made and the barrier of entry was relatively low. Few would argue that mobile is currently the prime market for software, but the financial barrier of entry is tremendously high. Similar to desktop computing, many companies have decided to focus on either hardware or software rather than take on the whole piece due to its tremendous costs. However, with Android, there exists a real and practical opportunity for organizations to control the entire experience of a mobile device without incurring the gargantuan overhead of developing an OS from scratch.

To be clear, the Amazon Fire in and of itself is relatively unimportant. However, the device symbolizes what is possible with a functional and established open source mobile operating system. This is has always been the promise of open source. We have seen this promise deliver in small ways through the years, but it continues to be my hope that Android provides that possibility in the mobile space. I am still waiting to see a startup that decides to design a new and different way to interact with mobile devices. I think that is truly possible with an open source Android. I am waiting to see operating systems in our homes, our appliances, our clothes. I think Android provides the best opportunity for that to happen.

Do I think any current Android smartphones are comparatively better than the iPhone? Frankly, no. However, my argument is that while Android continues to be open source, it does not need to be superior in order to prove its worth. It’s worth lies not in what we have come to expect from it, but what comes out of nowhere.

Another Iconic Update, 22 More Icons

P.J. Onori — Tue, 13 Sep 2011 23:48:24 +0000

Well, that didn’t take long…

Less than two weeks ago, I updated Iconic with 18 new icons. I have had some time on my hands as of late, so I was able to add another 22 icons to the collection. This update includes bars (for charts or mobile coverage), alternate documents, upload/download, cloud upload download, a pilcrow, microphone, award, aperture and a few others. Most notably, I finally was able to get a camera icon that was decent.

The set is now up to 177 icons. I will continue to create icons as it makes sense, but this recent addition took care of all the pressing additions on the list. Some icons that have been suggested just do not seem possible given the grid used for this set. That said, I continue to give them a shot from time to time. Depending on how the next few weeks treat me, the set may break into the 180′s soon enough.

Go download the updated set.