Designing for the Best User Experience: Mobile Technology

February 28, 2013 3:16 pm

Creating a mobile design ethos that incorporates hybrid elements and a beautiful interface that resonates with customers has the power to change lives, but can be very challenging. In my experience designing for the small screen, I’ve discovered a technique that helps overcome this challenge and create revolutionary, meaningful, and long-lasting mobile designs.

This technique involves 3 simple aspects

1. Understanding the technology and what type of technology to deploy.

2. Understanding your users and how people think and behave.

3. Having good design.


Let’s dive into these aspects. First, let’s talk technology.

For users, there are ten types of mobile experiences.

1.) Mobile Website: A separate website that uses simple HTML  & CSS to support lower-end ­devices.

2.) Desktop Website: The “do nothing” approach. Uses the device browser to render a desktop website onto a mobile device.

3.) Responsive Website Design: Uses CSS Media Queries to reflow designs to fit the target screen.

4.) Desktop Web App: The “do nothing” approach for Ajax-based web apps, i.e. Twitter

5.) HTML Mobile App: An Ajax-based web app designed specifically to work on mobile devices.

6.) Responsive Web App: Uses media queries to reflow an HTML/Ajax-based web app to fit the target screen size. Supports phone, tablet and desktop with single source of markup.

7.) HTML5 Hybrid App: Web technologies are used both to display content, as well as perform all navigation and interactions. A native container or wrapper is used to simply deploy the HTML5 Mobile app to platforms app stores.

8.) Native Hybrid App: Uses the native platform SDKs to create the majority of the mobile experience but uses HTML5 technologies to render a portion of the content in order to be partially compatible with other platforms.

9.) Native App: A mobile and/or tablet application that is built using the native platform software development kits (SDKs). This type provides the richest and fullest mobile experience.

10.) Universal App: A mobile, tablet and desktop application that provides the optimal experience to each device or context by keeping content and presentation separated.

After you decide which technology will work for your mobile experience, it’s now time to understand your users.

Users’ habits on the Web are comparable to customers’ habits in a store. They are looking for something in specific: something that catches their interest and progressively meets their needs. One of the most important tools that I refer back to is the concept of “Less but More” by Dieter Rams. Using his ten design principles for good design, I create a framework that helps me to understand my audience and craft a sustainable mobile experience that leads to the one answer, the purpose itself.

And at the end of the day, good design is key.

Good design involves understanding your audience and understanding your product. In order to achieve good design, we must define a design language that is ergonomically correct; one where all its pieces and components are well balanced and work together. This design language will help anticipate the users’ needs while maintaining aesthetic consistency.

Again, my technique to design the best mobile experiences involves the combination of three aspects: Choosing the right type of technology, understanding your customers, and having a good design. Building a systematic method of creative organization by carefully choosing between technologies and seeking out the perfect balance between your users and the right form of communication will successfully produce powerful integrated experiences.


[Contributed by Leo Gomez, Interactive Designer]