<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Studio Notes - Musings on design matters, technology and culture &#187; Visual Design</title>
	<atom:link href="http://danielmckenzie.com/blog/category/design/visual-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://danielmckenzie.com/blog</link>
	<description>Musings on design matters, technology and culture.</description>
	<lastBuildDate>Mon, 30 Aug 2010 18:24:11 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>When The Client Wants a Re-Skin</title>
		<link>http://danielmckenzie.com/blog/2009/10/re-skin/</link>
		<comments>http://danielmckenzie.com/blog/2009/10/re-skin/#comments</comments>
		<pubDate>Fri, 02 Oct 2009 03:09:05 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Visual Design]]></category>
		<category><![CDATA[aesthetics]]></category>
		<category><![CDATA[reskin]]></category>

		<guid isPermaLink="false">http://danielmckenzie.com/blog/?p=265</guid>
		<description><![CDATA[A request from a client for a re-skin of their web site or application should send up a red flag telling the designer to dig deeper and examine other hidden issues.]]></description>
			<content:encoded><![CDATA[<p>I’m usually very skeptical when a client asks for a visual design make-over or what people like to call a “re-skin” of their site or application. “Re-skin” refers to changing the surface appearance of a web site or application with new graphics and style treatment. Re-skins are like a new paint job for your old Corvair—they’re meant to make an otherwise stale-looking web site or application look new, fresh and up-to-date (at least that’s the intention). Unfortunately, just because you paint a clunker red doesn’t mean it’s going to drive any better.</p>
<p>The problem with re-skins is that they are usually a means of covering up more serious problems with the product or service. Sometimes it’s even a last resort: “We don’t know what to do. Why don’t we re-skin it and make it look better?”. Many executives may see a re-skin as a quick way to improve a poorly perceived user experience. It’s not always in the client’s best interest for a designer to accept a project they know is only a band-aid covering more serious design issues. At the very least, a professional should be up-front with the client and let her know what real issues may lie under the hood.</p>
<p>I don’t want to demean the importance of having a good visual design for a product or service. According to the book, <a href="http://www.amazon.com/Universal-Principles-Design-William-Lidwell/dp/1592530079/ref=sr_1_1 ie=UTF8&amp;s=books&amp;qid=1253057107&amp;sr=8-1" target="_blank">Universal Principles of Design</a>, aesthetic designs:</p>
<p>&#8220;&#8230;look easier to use and have a higher probability of being used, whether or not they actually are easier to use. More usable but less-aesthetic designs may suffer a lack of acceptance that renders issues of usability moot. These perceptions bias subsequent interactions and are resistant to change. For example, in a study of how people use computers, researchers found that early impressions influenced long-term attitudes about their quality and use. A similar phenomenon is well documented with regard to human attractiveness—first impressions of people influence attitude formation and measurably affect how people are perceived and treated.&#8221;</p>
<p>But visual design is much more than just a nice paint job. Not only does good visual design help create the illusion of ease-of-use, it also helps promote a positive emotional response and connection to the brand. Marketers know this well and will take every opportunity to try and produce a good feeling in the hearts and minds of their customers. We are sentient (from Latin &#8211; sentient: feeling) beings that for good or for bad, make decisions based on our emotions. However, good visual design is only part of what makes a great user experience much like a car’s exterior is only part of what makes a car delightful to own. Not only is functionality important (whether or not it actually works), but so are factors of usability and perceived value. Without a usable interface or a product or service that means something to the user, there’s no point in good visual design—it’s nothing more than cosmetics.</p>
<p>So, the first question a designer should ask a client requesting a re-skin is “Why?” (this is no time to be shy). Another should be, “What do you expect to gain from a re-skin?” The idea isn’t to ridicule the client, just to dig deeper and possibly bring to light more severe problems such as poor navigation, page flow, features, nomenclature, copy, etc. Sometimes the stakeholders have little experience with product design and simply don’t know what makes a good user experience. This particularly occurs with business-focused and technology-focused teams where there is no user advocate.</p>
<p>So, when does a re-skin make the most sense? Obviously, a re-skin is a good idea if a company is changing its brand identity. But even then, a re-skin isn’t just about making it look good and making it easy to use with big buttons and spacious layouts. A designer must ask “For what kind of user am I designing this for?” “What kind of emotional response am aiming for?” Even the visual design of an application like a word processor or email client will elicit some kind of emotion from the user.</p>
<p>Another good time to consider a re-skin is when there are big changes to content and functionality. Why not launch this year’s model with a slightly new look too? Not only is it an opportunity to improve the look and feel and perceived usability, it will also help highlight the new content and features, and if done successfully, boost the chances of eliciting positive feedback from users and customers.</p>
<p>In conclusion, a request from a client for a re-skin should send up a red flag telling you to dig deeper and examine other hidden issues. Not only will this give more importance to your work, it could save your client a lot of time and money in the long run.</p>
<img src="http://danielmckenzie.com/blog/?ak_action=api_record_view&id=265&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://danielmckenzie.com/blog/2009/10/re-skin/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>31 Flavors &#8211; Designing for iPhone, Android and Blackberry Platforms</title>
		<link>http://danielmckenzie.com/blog/2009/07/31-flavors-designing-for-iphone-android-and-blackberry-platforms/</link>
		<comments>http://danielmckenzie.com/blog/2009/07/31-flavors-designing-for-iphone-android-and-blackberry-platforms/#comments</comments>
		<pubDate>Tue, 07 Jul 2009 00:25:31 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Mobile Applications]]></category>
		<category><![CDATA[Visual Design]]></category>
		<category><![CDATA[Android]]></category>
		<category><![CDATA[Apple]]></category>
		<category><![CDATA[Blackberry]]></category>
		<category><![CDATA[Fireworks]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[Illustrator]]></category>
		<category><![CDATA[IPhone]]></category>
		<category><![CDATA[Palm]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[SDK]]></category>
		<category><![CDATA[ui standards]]></category>

		<guid isPermaLink="false">http://danielmckenzie.com/blog/?p=86</guid>
		<description><![CDATA[A client of mine who wants to make aggressive headway into the mobile space has asked me to make three versions of their current iPhone 2.0 app that includes an upgrade to iPhone 3.0, a never-launched version for Google Android and another one for Blackberry devices (Palm Pre version to come later). It’s my job [...]]]></description>
			<content:encoded><![CDATA[<p>A client of mine who wants to make aggressive headway into the mobile space has asked me to make three versions of their current iPhone 2.0 app that includes an upgrade to iPhone 3.0, a never-launched version for Google Android and another one for Blackberry devices (Palm Pre version to come later). It’s my job to create and document the interaction design along with the visual design for each platform.</p>
<p>So, maybe you’re asking: how do you design for three different mobile platforms without losing your marbles?</p>
<p>Before starting on each project, I did my homework to see what other designers and developers have done in the space. For Android and Blackberry, this study was not only a nice-to-have, it was a requirement. While Apple has a reasonably good <a href="http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/PrinciplesAndCharacteristics/PrinciplesAndCharacteristics.html#//apple_ref/doc/uid/TP40006556-CH7-SW1" target="_blank">human interface guidelines</a> to shepherd designers and developers through putting together a consistent and intuitive interface for iPhone users, the other two leave a lot to be desired.</p>
<p>Google, ironically, <a href="http://developer.android.com/guide/practices/ui_guidelines/icon_design.html" target="_blank">preaches the value of using consistent UI components</a> without ever really sharing what those components might be to any great extent. They have an <a href="http://developer.android.com/guide/practices/ui_guidelines/icon_design.html" target="_blank">in-depth tutorial</a> on how to create icons but don’t mention much on what the other standard UI components should<em> look like</em>. This leads designers to go off on their own and create what they think is right for the Android UI versus Google suggesting what the best practices are. This could easily be solved by providing a comprehensive style guide.</p>
<p>What’s the purpose of doing this? The purpose is to understand the personality, interaction and visual language of a platform so that the designer is able to design an interface that users already visually and interactively understand. The users understand and intuit this language based on previous experiences with the platform’s native apps and/or other downloaded apps. This is why an iPhone app should look and feel like an iPhone app and an Android app should look and feel like one of its own. Differentiation is important where there’s competition, but without any consistent use of native UI elements, the user is at a loss with the interface and has to learn something new costing them time, effort and frustration.</p>
<p>Some companies take the easy route. They simply take any graphics and user flows they created for one platform (typically the iPhone) and adapt it to the new one. Because of Android’s lack of support (and perhaps because of the developer’s lack of interest), we see a lot of this being applied to its apps. This is not only bad for Android’s effort to provide a consistently intuitive user experience but it’s also, in some cases, bad for the app itself which doesn’t utilize native elements and behaviors that ultimately, could create a better user experience particular to that platform.</p>
<p>So here’s the answer to the burning question:</p>
<p><em>Can you Android-ize an already existing iPhone app? Does one size fit all?<br />
</em></p>
<p>No, not without confusing the user with elements they’re unfamiliar with and possibly missing out on better ways to present a feature using the platform’s native standards.</p>
<p>In regard to user interaction design, there are some big differentiators between the three platforms. Here are some of the big ones:</p>
<h3><strong>Android and Blackberry platforms have menus</strong></h3>
<p>They both have hard keys on their physical devices that make it possible to bring up a menu and navigate to other options or shortcuts, the iPhone doesn’t. This helps in some circumstances, to hide what would normally be considered clutter. It allows designers to conceal additional features and functionality for when the user is ready to use them. It may make the user experience actually easier by requiring less taps or clicks.</p>
<p>They both have hard keys on their physical devices that make it possible to bring up a menu and navigate to other options or shortcuts, the iPhone doesn’t. This helps in some circumstances, to hide what would normally be considered clutter. It allows designers to conceal additional features and functionality for when the user is ready to use them. It may make the user experience actually easier by requiring less taps or clicks.</p>
<h3><strong>Android and Blackberry platforms have a back key</strong></h3>
<p>Same as above. This makes it easy to remove controls that would otherwise be necessary to go back.</p>
<h3><strong>Blackberry screens come in several different sizes</strong></h3>
<p>In my opinion, this is why Blackberry’s <a href="http://na.blackberry.com/eng/services/appworld/?" target="_blank">App World</a> has a long, long way to go and may ultimately, fizzle out. Designing and developing an app that works on five different screen sizes is a headache. It requires a great deal of production and time from designers and developers and leads to too many compromises. In order to save time and money, the app’s design is required to be generic enough to work with all the various device models. To understand this better, check out <a href="http://pandora.com/blackberry" target="_blank">Pandora’s Blackberry page</a>.</p>
<h3><strong>Blackberry uses a trackball on most of its devices</strong></h3>
<p>This is yet another hindrance to Blackberry’s success in the app market. While trackballs work fine for scrolling through a list such as your email’s inbox, it’s cumbersome when it comes to navigating through the tabs of an app, especially if there are two sets, one at the top and one at the bottom. Unless there’s something I don’t know (Blackberry users?), a user must select all the screen’s components (tabs, buttons, fields, hyperlinks) on the way to navigating from one end of the screen to the other. There’s no way to fly from, lets say, the top-left tab to the bottom-right tab like you can do with a mouse or even better, your finger. Everything snaps to a grid and the trackball cursor must follow it. Needless to say, this is extremely cumbersome and requires that screens have few selectable components.</p>
<h3><strong>Pop-ups in Android are completely customizable</strong></h3>
<p>One nice work-around with Android is that pop-ups are completely customizable. This means in some cases you can use a pop-up interface rather than having to take the user to a new screen. Where would this be helpful? Any kind of detail screen where the user taps an element on the screen to learn more. The pop-up can be customized to have its own background, scrollbar, icons, etc. (caveat: Android pop-ups are not meant to be used like this, so it’s a bit of a hack from what I understand).</p>
<h3><strong>iPhone apps don’t use standard web browser form components</strong></h3>
<p>What, no radio buttons? No drop-downs? Nope. While web pages displayed on the iPhone do have these options, iPhone app interfaces don’t. Instead, they have switches, slot machine-like pickers and sliding knobs. This is a good thing&#8212;they thought about the new touchscreen technology and adapted the UI components to fit it. From a design point of view, this means that you will have to think of how to set up form components differently.</p>
<p>Needless to say, there are also many visual differences between these three platforms. Once you figure it out, Android actually has a pretty nice graphical user interface. Again, there biggest problem is not giving designers and developers enough guidance (i.e., this is what a progress bar looks like, this is what a standard OS button looks like, this is what a pop-up looks like, etc.). In return, their collection of apps appears somewhat clunky and doesn’t have the same cohesiveness that the iPhone&#8217;s apps do. This might not be such a big deal except for Android users never know what to expect and the constant use of iPhone-like components in Android apps (such as the ubiquitous shiny buttons) makes Android appear cheap. Android has some exceptional functionality, why not do the same with the UI standards? All it would require on their part, I believe, is a well-written user interface guide.</p>
<p>So, again, how do you design for three different mobile platforms without losing your marbles?</p>
<p>One at a time. Each version of the app will have the same list of key use cases but will require a fresh perspective when it comes down to user interaction and screen layouts. In some cases, like the Blackberry, you can’t squeeze a square peg in a round hole. You have to take it for what it is: a conventional mobile phone UI. Each platform has its own unique challenges and that’s half the fun of being a designer or developer.</p>
<p>Lastly, I’d like to speak directly to Apple, Google, Blackberry and Palm on behalf of all those who seek a better understanding of these interfaces and wish to design and develop a coherent user experience for these platforms. Just as you have given developers the tools to code your apps, you should give designer’s the tools to <em>design</em> your apps. Offer up layered Photoshop, Fireworks and Illustrator files of all your UI components <a href="http://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/" target="_blank">just as this kind person has done for the iPhone</a> and <a href="http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements/" target="_blank">these people</a> and <a href="http://blog.metaspark.com/category/fireworks/" target="_blank">these people</a>. Why make it hard for everybody to put together an accurate representation of your interface? Give us the visual language so that we can, as designers, design useful and intuitive apps that contain the visual standards your users are already accustomed to. To Google’s credit, they do provide <a href="http://developer.android.com/guide/practices/ui_guidelines/index.html" target="_blank">templates</a> for creating menu icons, but offer little more for the designer. It would go a long way to not only provide an SDK but also a &#8220;software <em>design</em> kit&#8221;.</p>
<img src="http://danielmckenzie.com/blog/?ak_action=api_record_view&id=86&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://danielmckenzie.com/blog/2009/07/31-flavors-designing-for-iphone-android-and-blackberry-platforms/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
	</channel>
</rss>
