Web Design Lessons from An iDevice


By: Alexander Dawson
http://www.onextrapixel.com/2010/11/04/web-design-lessons-from-an-idevice/

While I appreciate that there are many happy Android, Blackberry and WinMo users out there, after previously being an Apple hater turned convert to the iPhone I believe that the way in which the device along with its sister products the iPod Touch and iPad have been created showcase some good principles and best practices that many in our industry (regardless of their position on Apple) could follow more frequently, even if you don’t agree with some of their methods or products.

Web Design Lessons from An iDevice

This article is dedicated to what I believe are these great “life” lessons which can be drawn from many sources both online and offline. The reason why the focus of this article is on Apple is mainly due to the unique way it’s got lessons to highlight within its hardware and build quality, the way it’s software functions and even how it browses the web. There’s nothing like getting inspired from a non-website source to get you thinking, and hopefully this article will do just that for you too!

Note: It’s worth mentioning that many of the lessons and practices outlined in this article could be based on any number of other mobile devices, however it’s worth saying that Apple do genuinely seem able to really connect with an audience’s needs when it comes to an effective user interface.

Compatibility is King

I have to admire how the iDevices are forward thinking toward following modern web standards. The ideology that you don’t need Flash and can get by with the latest bleeding edge W3C specs has fallen short on many in the industry. But the wake up call it has given to the obtrusive scripter’s and those whom built inaccessible Flash sites has really made the statement positive to the future of our field. As such a lesson to take from this element of the devices is to gracefully degrade your code. The reason for this is because whether we like it or not, all users are not actually created equal!

Compatibility is King

Figure 1: Before the original iPhone, handheld browsing was awful. Now it’s just like the desktop!

The second lesson regarding how the devices themselves operate is similar to how many manufacturers handle the situation of resolving flaws… hotfixes and patches! It’s a statement of fact that when a device (or site – or application for that matter) gets bigger and more complex, the chances of bugs occurring increases. Incrementally upgrading your website to resolve issues as they occur (like issuing version patches) is a great way to aid visitors (rather than doing an IE and leaving it for years).

Note: The iDevices ability to make use of CSS3 media queries is a classic example of providing simple, graceful compatibility. The idea that you can stylise a site based on its viewport will play a huge role in how we cater for the ever increasing range of devices and browsing methods in the future.

Conventions Just Work

Next on the list are conventions. One of the ways in which visitors navigate our websites and know where to click or point or read is by following patterns and conventions – which they have trained themselves to follow and adapt to over a period of time. Within the iDevices, these patterns form in the context of icons which are depicted by an image and text description. While you may not need to place Apple style icons all over your website, avoiding mystery meat navigation is essential.

Conventions Just Work

Figure 2: Navigating menus using a standardised convention is easier than a foreign mechanism.

In addition to the navigation and usable information architecture, the way in which design elements are structured (along with functionality) is also important. In the settings menu of the iDevices, all of the options are standardised and thereby the ease of use and recognition of how they can be configured rises considerably. Familiarity on the web doesn’t breed contempt but a clear understanding of what the user can do and it’s important and useful to document your work.

Note: While Icons and standardised forms and menus are common amongst smartphones, the way we layout navigation menus, how we structure content (and comment boxes) and even how we show how many tweets or likes a blog post has have evolved into a set of conventions and design patterns.

Maintain Your Standards

While web standards are (of course) a meaningful way to maintain a level of quality over your work, another potential type of standard you can hold as a web designer is a strict set of practices as to how you will construct something and what kind of material you won’t allow on your site. We all know that Apple tightly regulates its app store (and other services), but are we any different? I know most designers wouldn’t work with blink tags, marquee or animated clipart on the ethics principle!

Maintain Your Standards

Figure 4: To maintain a level of quality over our work, we all impose standards on ourselves.

The quality of the end product is important, and if you’ve ever played with an iPhone you’ll know that it’s not some cheap plastic toy (though it can be played with!). The build quality almost speaks to the level of quality control we hold to our work as the content that we put on the site. It stands to reason to draw a comparison between this and the way in which we try to follow standards, specifications and best practices to ensure a quality product that visitors will want to browse within.

Note: Before an app makes it into the app store, Apple put it through a series of checks for quality and security. When we produce services and websites we often do the same kind of thing, except using more heuristic and less intrinsically biased methods (such as usability or accessibility testing).

Improve and Reiterate

Another lesson we can take from these devices is the idea of improving and reiterating what you have produced. While this may sound like an obvious point to make, there are websites out there that fail to innovate (just copying others), don’t push boundaries and seem to fail in their attempt to create something of worth (beyond cloning an existing service). The iPhone has so much originality to it (as a device) that you can only hope more designers will innovate in their web design work too!

Improve and Reiterate

Figure 5: If something is broken, you need to fix it, issuing patches or recalling are both options!

Resolving disputes and issues (such as fundamental flaws in a product) is a lesson Apple have only come to learn recently due to the antennae problem on the iPhone 4. Now while I’m not going to rage into a debate about the death grip, it’s important to reflect on the nature of bugs and issues. In web designs, we need to be more accountable for fixing flaws in our sites and keeping software as current as possible. You don’t want a bunch of angry users hitting the back button in a hurry.

Note: When you create a website, you shouldn’t just give up at version 1.0. So many websites keep redesigning their UI for the sake of it (rather than upgrading the great but slightly stale version they already have). Consider pushing your existing design incrementally upward into the future.

Reflections and Observations

Taking inspiration from websites, software, hardware, the real world and other sources can open up a whole realm of opportunities to gain thoughtful ideas toward how you can build solutions. The motivation to take these innovations and turn them into useful lessons which can be implemented throughout your website is a process that more in our industry should undertake on a regular basis. If you find yourself stuck for ideas, why not consider alternative ways the idea can be put into action.

Reflections and Observations

Figure 6: Flaws and challenges aside, Apple do know how to make a user-interface “just work”.

Reflecting upon the iPhone, I think the ideologies of consistency, clean and simple implementations, determination to innovate, challenging preconceptions and ensuring a compatible and convention focused experience are worth their weight in gold. Whilst the iDevices are not perfect and they will continue to evolve over future iterations, the idea that you can produce an experience which makes sense to whomever touches it is something that web designers should hope to aspire to.

Questions

What real world devices give you inspiration to produce something unique or innovative? Do you have any classic examples of how thinking outside the box has improved your methodology? What do you think of Apple’s UI’s in general? Feel free to let us know in the comments section.

Posted on: November 4th, 2010
About these ads

Etiquetado:, , , , , , ,

Cruces, Sol y La Imaginación

Cuando la imaginación y la creatividad suman infinito

MarketingActivo

el mundo del marketing se activa para ti

tranquicomix

fanzine bejarano de historietas hecho en los 80

A Stairway To Fashion

contact: ralucastoica23@gmail.com

Vinod833's Blog

This WordPress.com site is the bee's knees

Apasionada de las Redes Sociales

Compartir conocimientos 2.0 y Marketing Online

Zona de Promesas

Tecnología - Internet - Redes Sociales - Entrepreneurship - Música - Economía - Innovación

Top Master | Blog

LOS PROGRAMAS DE MBA Y POSTGRADO MAS INFLUYENTES DE TODO EL MUNDO

La realidad alterna

Diario de sueños, cuentos, poesías y una novela en proceso

TechCrunch

Startup and Technology News

Unencumbered by Facts

Taking unsubstantiation to new levels

Carlos Cordero

Blog de tecnología

PsicoEmocions Blog

Un Pont entre la Psique i les Emocions

TEA PTLS NACHO

AUTISMO.TEA..PTLS

Comunicación & Marketing

De Lilian Lanzieri

Xtratexia

Dirección estratégica para la vida

Silvia Altamirano

An editorial designer that writes

StellarHIRE Partners

Founding Partner, StellarHire Partners - Executive Search Consultants. Recent engagements include Eloqua, SFDC, Tibco and Veeam.

ivanbrunpr's Blog

4 out of 5 dentists recommend this WordPress.com site

Matt on Not-WordPress

Stuff and things.

BLOGTEC

Noticias de Tecnologia.

Talento en Expansión

Tendencias y Mejores Prácticas en la Gestión de Personas de la Empresa 2.0

Two Leaves Tea SPAIN

Great Organic Tea! ✫✫✫✫✫ Te Organico en Piramides

Escuela de Dinero

El mejor Sitio en Español sobre lo básico para entender el Dinero y sus matemáticas relacionadas.

Intentando dejar huella...

...en cada uno de los visitantes

Ideas Para la Clase.com

Portafolio de experiencias en la clase de español para Middle School.

littlegreybox

Travel & Lifestyle Blog

déborah rueda

Un sitio más pero diferente sobre marketing on line

No solo los 80's

La mejor música de la historia

Molly Balloon's Blog

Identity + Dressing + Colour

El OJO PUBLICO. / Глаз общественности

Ver para contar & contar para ver. / Чтобы рассказать

Think Creative Idea

Marketing, publicidad, web y negocios

Social Media y más

Social Media, Redes Sociales, Marketing, SEO

The Coaching Alliance

El camino hacia el éxito

Luces y sombras de las marcas

Social Media, Marketing y Comunicación

CNN en Español: Ultimas Noticias de Estados Unidos, Latinoamérica y el Mundo, Opinión y Videos

Ultimas Noticias de Estados Unidos, Latinoamérica y el Mundo, Opinión y Videos

Javier GM Photography - México y más.

“Un fotógrafo tiene que ser auténtico y en su obra, debe expresar emociones, provocar reacciones y despertar pasiones.” ~ Javier García-Moreno E.

Natalia Gómez del Pozuelo

Experta en comunicación y oratoria

aloyn

Alimentación, ocio y negocios, ALOYN, es un Grupo dirigido a Directivos y Propietarios de empresas, interesados en el mundo de la industria de alimentación y bebidas. Tanto por la parte de la industria productora como por la parte de la industria consumidora y/o distribuidora (Distribución Comercial, Horeca, Vending, Venta Directa, etc). También nos interesan las actividades ligadas al agroturismo y el enoturismo como magníficas actividades de promoción y difusión de la cultura gastronómica.

Blog de Jack Moreno

Un blog de Joaquín Moreno sobre recursos, literatura y ciencia ficción

Mashamour

Ensalada de Manjares

Infographic List

For those who love Infographics - www.infographiclist.com

URieLaRtE

hay que ser libre para ser uno mismo

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 5.668 seguidores

A %d blogueros les gusta esto: