Posts Tagged ‘Mobile’

Where Icons Are Headed on the Web

Oak Studios just released Symbolset, an icon set that creates a significant step forward in a long-running trend for iconography on the web. In their words, Symbolsets are “semantic symbol fonts”, which act as replacements for full words in your HTML. This has a clear advantage for accessibility and indexing. Symbolset uses font files as the delivery system and map the icons to standard Unicode values. Read On…

Some Random Dude is Now (More) Responsive

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.

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

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

amazon fire

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