Archive for Mobile User Interfaces
iPhone apps are everywhere – now they might be in your pile of birthday or holiday gifts. And what would be easier to give for a last minute gift? Textually.org has a post on the new gifting program for apps – a really smart use of design to enhance the mobile user experience through word-of-mouth marketing.
The ability to gift an app will not only increase purchasing by viral recommendation, but it gives consumers a way introduce reluctant friends, relatives or coworkers to specific apps they like. And more obscure/unique apps have a greater chance of catching fire this way – what consumer would turn down the chance to download a freebie accompanied by a recommendation from someone they trust.
A New York Times article also points out that app gifting is good news for developers. Apple provides a limited number of promo codes that can limit getting products to the reviewer community. And developers can identify evangelists, people most likely to spread the word, and seed that community with apps.
I’d like to see the gift-giving ability extended to in-app purchases so additional levels or content could be given to other users. Also, for multiple gift purchases, users should be able to get a deal or discount. A shared wishlist would accompany gifting very well.
The new “Gift This App” option is alongside the “Add To Wishlist” and “Share Via Facebook” menu items in the dropdown that appears next to the price of any app.
Omega Mobile recently completed a series of tutorials for the Open Screen Project Fund. We created seven demos total that I’ll cover in blog posts coming soon.

Each mobile demo/prototype was designed around experiences where Flash Lite and Nokia devices a great fit. These include rich media, personalized experiences, social media, photo sharing, location based information, music, news, video, advertising and marketing.
The demos were designed to be shown as-is, without additional work as well as to be modified easily. Use them to quickly present a concept internally or to pitch outside clients.
One of the main goals of each demo is the ability to be able to easily reskin each mobile user interface. Each demo is designed so that the user interface elements as well as the background can be changed in a matter of minutes.
The tutorials in the series can be used alone or together and cover the following types of content:
- Video Player – Play an external FLV video file in both landscape and portrait mode
- Music Player – Play external mp3 audio files
- RSS News – Read and display RSS feeds
- Social Media – Leverage Twitter for promotional purposes
- Photostream – Display Flickr photos
- Event Info – Use to market an event, make phone calls, and initiate pre-written SMS messages
- LBS Coffee Finder – Leverage GPS location and Google Maps to find the nearest coffee shop
Google introduced a new service for searching with gestures for Android 2.0 and above. This gesturing could evolve into some pretty cool uses and mobile user interface design opportunities.

Basically, users scrawl a letter (or “alphabet gesture” as Google Labs calls it) on the touch screen to bring up a contact, app, music file or bookmark from a list of hundreds or even thousands on your Android phone. The mobile user interface eliminates the need to type in certain cases.
While the gesture feature is currently for searching only, this opens up lots of possibilities for interesting mobile user interface design possibilities for Android. The API could be opened up so that anyone writing Google apps could make use of ‘common’ gestures.
Universal gestures could be explored that could be used across any app.
Imagine that there’s a ’send to the Google cloud gesture’ and a piece of content you’re interacting with could automatically be sent to the appropriate cloud service. For example, you receive a document, gesture it, and it ends up stored in your Google Docs. Or the ability to gesture a phone number on a site and save it in Google voice would make interacting with Google cloud services easier.
I’m happy to see Android evolving and opening up the door to explore more touch based user interface design options. It’s a good time to experiment before rigid standards make their way into the mobile user interface design community.
Full disclosure: muvee is a client of ours for whom we recently completed an Android mobile design project. muvee makes video creation fun, simple and easy to share with underlying algorithms. The muvee video editor lets you select video and still pictures, add a soundtrack and pick a presentation style. Add graphic elements with templates then push a button. You instantly have a personalized video that you can immediately share with family and friends.

I tend to be a fan of anything that enhances creativity and inspires sharing – which was our main goal in designing their mobile user interface. Some very useful features include automatic face and motion detection, different style choices, and syncing photos or videos to the beat of the music the user chooses. For example, you can choose a high-energy theme that would effect the pace, presentation and style of your creation.
The muvee video editor is a pretty compelling case for OEMs as well as carriers. Today’s consumers shoot tons of video but what do they do with them? The underlying algorithms take most of the work and thinking out of the creative process, making this a greatly useful tool for designing a mobile experience. Rather than spending hours attempting to create a professional video, creating and sharing can be accomplished within minutes. In this way, consumers will be more likely to create and share more often, especially on the go. Also, due to their patented algorithms muvee has a natural edge in the industry.
muvee will present this Android project at Barcelona Mobile World Congress the week of February 15th. Visit muvee at Mobile World Congress in Hall #1, Booth 1F06 to check out their cool product and see the Android prototype we designed for them.
Mobile user interface designs need to be user and client friendly. The best way to keep this a top priority is to be able to easily present and adjust the design throughout the creation process. One difficult hurdle is not having access to a devise or designing for hardware that isn’t complete. When we’re working on a new mobile user interface design without access to hardware, there are a few things that make the process run smoothly and ensure our success. One key step is printing variations of what we’re doing on photo paper.

We print out designs on glossy photo paper to mimic the look of the screen and to see our design with pixel-level detail. Spending time on the details in the beginning of a job is paramount in designing a successful mobile user interface.
Viewing an image of a mobile device on a computer screen doesn’t give an accurate representation of the finished mobile user interface design. The pixel density (pixels per inch) are much higher on a mobile device. When we don’t have access to hardware, our solution is to design the mobile user interface at real size in terms of pixels on a computer and then scale it down and print on photo paper at the real size the screen will be on the hardware. This gives us the real size that an image will be on a mobile device.
Using this method we can see if the layout and fonts work. It’s critical to determine if the user interface will be functional with big enough fonts and clear user interface elements.
This is also very handy when we’re designing for touchscreen mobile user interfaces as spacing is another issue that is distorted on a large computer monitor but solved by printing out. We can test to see if any user interface elements overlap and see if we need to adjust them for the mobile device.
Printing out our design also makes it possible to present our mobile user interface concepts to our client to give them a more accurate feel for the design. It also helps them in their presentations (remember the missing hardware…) We’ve seen our photos used in the past presented on plastic model prototypes. It was cool to see as people would dissect the interface and analyze it as if it was digital.
I’d love to hear any other User Interface Design challenges you face and you solve the problem.
Brian Duffy filed a great report for CNN about a bulletproof tailor in Bogotá. The tailor combines high fashion with body armor. Duffy ended up getting shot in the gut while wearing one of the garments – it worked. What does Colombian tailor Miguel Caballero have to do with mobile design and user experiences? Caballero knows his target audience, he knows what works and he delivers a quality product. Here are some quotes from Miguel Caballero and lessons that can inspire mobile user experience design.
Miguel says “We have to study what the aim of the user of this type of clothing to design the better option to these people.” Sometimes stakeholders in projects have difficulty in distinguishing what they want in an app versus what a user wants. A user-centered approach is frequently the key to the success (and profitability) of an application. Do you constantly put the user in the forefront when designing for mobile?
How will your app be used in a variety of situations? Our bulletproof tailor does. Caballero looks at how the garment will be used – internally, externally, in a hot climate and a cold climate. What’s the context of how the user will be using your app. Walking? Driving? In a loud restaurant? In a quiet location. In a bright park? In a dark theater? In emergencies? In the car or at the office? Think about every possible situation and consider every option. Do you think about multiple contexts when designing for mobile?
Miguel involves everyone in his product testing. He requires all employees to wear the clothing and then he shoots them. Are you utilizing feedback from all your stakeholders for mobile design?
Shooting his employees is the way Miguel exercises “quality control”. It’s a great idea to involve everyone in your process. I’m a big fan of kaizen from a design as well as business standpoint. Are you always trying to improve your mobile design projects?
Being on top of social and lifestyle trends is critical when designing mobile user experiences. Miguel has plans to expand and market to the hip-hop community. Are you leveraging social trends when designing your mobile user experiences?
So take a lesson from a Columbian tailor – know your audience, design for them, involve everyone in testing, keep up on trends, and think outside the box.
When designing mobile user interfaces, we always face the design challenge of pixel density on a mobile device. What you see on a computer screen is usually larger than what you will see on a mobile device and sometimes we don’t have access to the target device we are designing for.
![]()
There are a few ways to address this and make sure that a mobile user interface design is appropriate when smaller. One solution is simply shrink it down to the exact size of the mobile device we are targeting. This is fine to determine if the general layout works. However, it doesn’t work well with fonts as the text can get distorted and then you can’t determine whether you’ve chosen a good font size.
Many graphics applications (Photoshop, Flash and Illustrator to name a few) allow simultaneous views of the same visual document. This is an extremely helpful tool when designing mobile user interfaces.
In the above screenshot, two views of the same document are shown. The one on the left is at 100% and the one on the right has been reduced to match the exact size of the mobile device screen we’re targeting for this user interface. We can make any changes to the image on the left and manipulate the view in any way we want while keeping the right view open to see how our user interface will look on our target mobile device. To do this in Photoshop, with a document open, select WINDOW>ARRANGE>NEW WINDOW FOR…
Another way we use dual screenshots is to make sure the user interface controls for a touch screen UI are spaced correctly. We simply touch the design that has been sized on the monitor to match the mobile device to determine if the user interface elements are far enough apart.
The Mac has a tool we like called Screen Shrink that allows us to literally shrink a screen so we can see what part of it may look like on a mobile device. This also works well when you see an inspiring design on the web and wonder if it could work well at a smaller size.
Mood rings were popular in the 1970s. Mobile devices may be the modern day mood ring. Fast Company posted a story about new emotion-detecting software launched at TechCrunch50. Affective Interfaces claims that it has developed an ultra-accurate system that can detect emotions correctly over 85% of the time.

The Affective Interfaces website welcome message reads: “Knowing what your customers are doing is great, but wouldn’t you like to know why?” Harvesting information from consumers is a great use of the program. Focus groups these days cover everything from new product perception to jury trial preparation and they are labor intensive to arrange and costly to run. Fast Company notes that Affective Interfaces could potentially remove human monitors from the equation, saving a ton of money. Additionally, hundreds of users could be part of a group eliminating the need for companies to conduct expensive testing on small numbers.
Taking this a step further, it would be amazing if advertisements could be presented at an opportune emotional moment based on a user’s personality and demographic profile. For example, at the end of the day, a tired mom might see a vacation commercial or a mattress sale announcement. The same mom on a treadmill in the morning might see a commercial for a sports drink or athletic shoes.
Intelligent interfaces on a consumer device could detect frustration on a user’s face and adjust themselves accordingly. A frustrated user would could get more of a stripped down simple user interface and then get more options later as frustrations went away. This could be a great benefit for new users or those that aren’t technologically savvy.
Additionally, the entertainment industry could tweak content choices based on your current emotional state. Music, movies, games and applications could be matched to a particular mood.
What about using emotion detection to monitor a loved one turning it into a potentially an important relationship tool. Let’s say you have the ability to check the emotions of your spouse before you leave the office. Confrontational or angry? Stay at work longer or hit happy hour before you pull into the driveway.
InteractiveTV Today discussed the creation of the RVU Alliance made up of founding members Broadcom, Cisco, DIRECTV and Samsung founded to standardize home entertainment user interface and accelerate development.
In short, RVU is helping to get identical user experiences across the connected home. This includes digital TV sets, media adapters, and set-top boxes from multiple companies. I think that’s important and valuable not just for consumers but for content service providers. Confining consumer electronics manufactures to a unified experience might have the potential to stifle innovation. It also diminishes differentiation possibilities through the user interface and user experience.
I do like that features can be updated over the server leading to an adaptable and intelligent user interface. Users who don’t like certain functions can update and change their preferences. Along those lines, additional, targeted customization and personalization of different user interface experiences would be interesting. And intelligent ads per demographics would also be an interesting and profitable feature.
InteractiveTV Today had a blog post ahout a new augmented reality platform called metaio World that is hitting the major mobile platforms including iPhone, Android, Windows Mobile, and Symbian. This is good news for the mobile world – as platforms become more widespread, tons of possibilities are opening up to design more engaging mobile user experiences and immersive mobile user interfaces.
The platform allows users to link personal content – like Twitter messages, photos, etc - with any real-world location. Content can then be viewed by others who happen onto that location. Using Twitter is very clever as users are much more likely to use the service if it’s tied to a well-known social media platform. I’d like to see even more social media integration – users who happened upon a comment or animation would be able to look up contact information for the creator on LinkedIn or Facebook.
Integrating the time element would also be a feature that has real world benefits. For example, if a nightclub event starts at 10 pm, information would only be available at certain times of day. Club goers could have the ability to examine current data versus data from months past to tell if the club is hot or on its way out.
3D components open a ton of possibilities - imagine taking avatars from other virtual environments (Sims or Second Life for example) and using them in the augmented environment as a gateway or link to the actual virtual environment.
There are also retail opportunities if users are given the ability to purchase virtual goods for their character. An example might be messages left outside of a trendy clothing store. Shoppers could receive free or discounted virtual goods based on the stores current clothing line. Virtual shopping might translate into real world purchases and benefit the story, justifying the cost of an AR campaign.
As you can see, this is just the beginning and I’m eager to see where mobile design and augmented reality will take us, particularly related to mobile user interfaces.