Archive for the ‘Design’ Category

Write Like You Design

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. Read On…

Redesigning Gesture Icons – A Proposed System

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).


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.


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 Materials of Digital Products

This post was originally posted on the Adaptive Path blog.

I have the good fortune of having a number of industrial designers as friends. As is the case with most people in the creative field, we have spent a considerable amount of time discussing our work. Throughout our conversations, there have been two tracks of thinking that impressed me. The first was a commitment to craft and an understanding of its importance to the final product's quality. The second was a sense of pragmatism and, for lack of a better word, accountability for how the design would impact the final product. I loved to hear designers take execution into account during the creative process due to the fact that I was someone who was often responsible for creating the final product. What struck me the most during our conversations was the deep familiarity my industrial design colleagues had with the materials used in the design. One friend in particular explained the necessity of understanding the materials, because without that knowledge, it would prove challenging to understand if the materials were appropriate to use in the first place. Strangely, that consideration for materials has traditionally been absent from design in the digital world. In my experience, designers have often expressed the sentiment that getting mired down in the details of technology would only limit the creative process. Unfortunately, the lack of understanding in craft would often lead to irreparable problems with the final product. Designers of digital products need to have that same dedication to craft as those in other design disciplines. That dedication to craft begins with an understanding of the methods and materials used in their trade.

Read On…

The Screenification of Appliances

G plus

The future where we have touchscreens on our toasters may be closer than previously thought. Gorenje’s iChef+ (unfortunate name aside makes a very compelling case for the immediate benefits of touch-based appliances. From a purely aesthetic point, touch systems create the opportunity to clean up the often-times cumbersome collection of dials and buttons necessary to run our everyday appliances. That alone would be a step in the right direction. However, I think the most compelling advantage lies elsewhere. Read On…

Form Design is Good Form

I freely admit that I do not derive bountiful amounts of pleasure from designing forms. Forms are a relatively dry subject. They rarely drive visitors to a site. Forms do not empower the user to take action, but they do dissuade the user from inaction. No one ever goes on and on about how much they enjoyed filling out a form. The vast majority of people recognize when forms are frustrating; the other handful may notice when forms are not frustrating. Forms are the offensive linemen of web design – amazingly crucial to the success of the collective, rarely given credit and only concentrated upon when they fail. I used to give very little thought to the design process of form layouts. I would concentrate instead on the “important” pages that I believed would garner the most attention. My point of view has completed changed. Forms facilitate users to make purchases, register into communities, exchange information with organizations, etc. These functions are the basic elements of a majority of websites – money, participation, information. Read On…

RSS vs. RSS – A Tale of Two Icons

This article is somewhat belated and could be considered much ado about nothing, but nonetheless I think this is a relevant topic to discuss. Microsoft recently announced that they would be using the RSS icon introduced by the Firefox browser. This was considered a very wise choice by many, including myself at first as it was a victory (albeit small) for standardization. Soon afterward, Matt Brett started a micro-site to help propagate this icon for use by the public. I commend Matt’s efforts and fully back him on the notion that a standard icon needs to be established for syndication. My argument is that we are not backing the right icon…
Read On…