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!
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.
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!
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.
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!
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!
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.
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.
- Texture Used in Web Design: Examples, Best Practices, and How-To
- Part 2: How to Turn a Design Image Into a Working Web Page
- Part 1: How to Turn a Design Image Into a Working Web Page
- Hints, Tips And Tricks For Web Design Part 1: Beyond The Visual
- Scoring Goals at 25 Football Club Websites
Written by: Alexander Dawson for Onextrapixel - Showcasing Web Treats Without A Hitch | 5 comments
Post Topic(s): Design
