<?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>SHAZAML! &#187; Design</title>
	<atom:link href="http://www.shazaml.com/archives/tag/design/feed" rel="self" type="application/rss+xml" />
	<link>http://www.shazaml.com</link>
	<description>The Blog for Design &#38; Development Superheroes</description>
	<lastBuildDate>Wed, 28 Jul 2010 21:02:54 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Review: Infragistics UX Training for Software Professionals</title>
		<link>http://www.shazaml.com/archives/review-infragistics-ux-training-for-software-professionals</link>
		<comments>http://www.shazaml.com/archives/review-infragistics-ux-training-for-software-professionals#comments</comments>
		<pubDate>Mon, 26 Jul 2010 21:35:51 +0000</pubDate>
		<dc:creator>Mark Tucker</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Infragistics]]></category>
		<category><![CDATA[UX]]></category>

		<guid isPermaLink="false">http://www.shazaml.com/?p=589</guid>
		<description><![CDATA[UX Training for Software Professionals]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.shazaml.com/wp-content/uploads/2010/07/image.png"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="image" border="0" alt="image" src="http://www.shazaml.com/wp-content/uploads/2010/07/image_thumb.png" width="240" height="167" /></a> </p>
<p>I had the opportunity to take the course, <em><a href="http://www.infragistics.com/services/ux/course-syllabi/essentials-software-professionals/5189SP.aspx#EssentialsforSoftwareProfessionals">Engineering the User Experience &#8211; Essentials for Software Professionals</a></em>, from Infragistics using the online on-demand option.&#160; The course has the following objectives:</p>
<ul>
<li>Understand, communicate, and apply the background and concept of user experience.</li>
<li>Assess the user experience of interactive products.</li>
<li>Apply UI design best practices to their own work.</li>
<li>Understand the process of user experience and how to merge it within their development process.</li>
<li>Understand the role and power of user interface controls and patterns.</li>
</ul>
<p>The course is presented online via Silverlight, takes approximately 3 hours to complete, and costs $395.&#160; For a limited time, when you purchase a NetAdvantage product this course is included for free.</p>
<p>The first part of the training defines User Experience (UX) as including usability and appeal and states the case of why UX is important.&#160; More content is this area would have been useful.</p>
<p> <span id="more-589"></span>
<p>Next, various user interfaces were shown and categorized as belonging to the Hall of Shame or Hall of Fame.&#160; This exercise took only 5 minutes and some of the “shame” examples were too obvious.&#160; I think it would be useful to show more examples in this section.</p>
<p>The section on design best practices was the most extensive of the course.&#160; The first topic was the steps of specifying an information architecture and the defining the UI to include layout, navigation, and detailed design.&#160; Then approximately 24 usability and appearance principles were discussed including suggestions of things to do and not do.&#160; The principles include: context, grouping, text, menus, icons, color, and composition.&#160; This section provides enough detail to be useful.</p>
<p>Patterns (collection of controls to solve a specific challenge) are introduced as well as the <a href="http://quince.infragistics.com/">Quince tool</a> via a video tour.</p>
<p>The final major section was about assessing UX.&#160; This was a fire-hose experience with a lot of information given.&#160; Maybe it was because I took this course all in one morning, but this was the hardest content for me to remember.&#160; Maybe if there was a concrete example of a UI that was then assessed, then I could remember better.&#160; I will need to go back over this section again when my mind is clearer.</p>
<p>Overall, I found the training useful.&#160; Many points of the training confirm what I have learned over my 14 years experience with software development.&#160; Some topics were new to me like card sorting, Fitt’s law, and Nielsen’s 10 heuristics.&#160; There were a few issues with the training.&#160; First the sound level of some of the videos were too quiet or too loud compared to the others.&#160; There were a lot of lists embedded in the videos that I can’t find elsewhere.&#160; It would be good to have them for later reference.&#160; It would also be useful if this document had links to additional resources.</p>
<p>I give the training a solid B.</p>
<p>If you take this training, I would love to hear your comments about it.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.shazaml.com/archives/review-infragistics-ux-training-for-software-professionals/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Windows Phone 7 UI Templates</title>
		<link>http://www.shazaml.com/archives/windows-phone-7-ui-templates</link>
		<comments>http://www.shazaml.com/archives/windows-phone-7-ui-templates#comments</comments>
		<pubDate>Fri, 19 Mar 2010 13:29:40 +0000</pubDate>
		<dc:creator>Mark Tucker</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Windows Phone 7]]></category>
		<category><![CDATA[Template]]></category>
		<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://www.shazaml.com/?p=474</guid>
		<description><![CDATA[Design your Windows Phone 7 UI using these Templates]]></description>
			<content:encoded><![CDATA[<p>Even before attending MIX10, I started thinking about applications that I could write for the Windows Phone 7 Series.  I couldn’t wait to start sketching out user interfaces and thinking about the experiences that the people using those applications would have.  What was missing to make this easier was design templates.</p>
<p>Windows Phone 7 introduces concepts such as live tiles, an application bar with buttons and menus, and panoramic applications.  The UI templates should take those things into account as well as the WVGA display that can show 800&#215;480 pixels in either portrait or landscape orientation:</p>
<p><a href="http://www.shazaml.com/wp-content/uploads/2010/03/image.png"><img style="display: inline; border-width: 0px;" title="image" src="http://www.shazaml.com/wp-content/uploads/2010/03/image_thumb.png" border="0" alt="image" width="130" height="240" /></a></p>
<p>When an application is pinned to the Start screen, the application tile is shown:</p>
<p><a href="http://www.shazaml.com/wp-content/uploads/2010/03/image1.png"><img style="display: inline; border-width: 0px;" title="image" src="http://www.shazaml.com/wp-content/uploads/2010/03/image_thumb1.png" border="0" alt="image" width="181" height="240" /></a></p>
<p>Applications can receive notifications to let the user know of important updates even when the application is not running.  One type is the tile notification which can update a pinned tile with a background image, text, and a counter:</p>
<p><a href="http://www.shazaml.com/wp-content/uploads/2010/03/image2.png"><img style="display: inline; border-width: 0px;" title="image" src="http://www.shazaml.com/wp-content/uploads/2010/03/image_thumb2.png" border="0" alt="image" width="209" height="240" /></a></p>
<p>An application can choose to include an Application Bar which appears at the bottom of the screen in portrait orientation and vertically on the side when in landscape.  The Application Bar should be limited to a few important buttons that can easily be represented by images.  Other actions should be put in the menu.  The <em>Windows Phone Development Programming Guide</em> encourages the use of <a href="http://msdn.microsoft.com/en-us/library/ff431806(VS.92).aspx">no more than 5 menu items</a> as it will force the user to scroll:</p>
<p><a href="http://www.shazaml.com/wp-content/uploads/2010/03/image3.png"><img style="display: inline; border-width: 0px;" title="image" src="http://www.shazaml.com/wp-content/uploads/2010/03/image_thumb3.png" border="0" alt="image" width="240" height="232" /></a></p>
<p>One type of application that can be developed for the Windows Phone 7 is a Panorama application which spreads the UI across multiple screens with a slight overlap to tease the users on to the next screen:</p>
<p><a href="http://www.shazaml.com/wp-content/uploads/2010/03/image4.png"><img style="display: inline; border-width: 0px;" title="image" src="http://www.shazaml.com/wp-content/uploads/2010/03/image_thumb4.png" border="0" alt="image" width="320" height="222" /></a></p>
<p>When creating the 5 UI templates for Windows Phone 7, I made sure the above concepts were included.</p>
<p>The first two templates include a WVGA screen inside a phone device chrome.  When printed the phone image is roughly the size of an iPhone or Nexus One.  The template includes two tiles to be used for the application tile and the updated tile based on notification.  Three Application Bar images have been included for 2, 3, or 4 buttons.  As well as a place to write up to 5 menu items.</p>
<p><a href="http://www.shazaml.com/wp-content/uploads/2010/03/image5.png"><img style="display: inline; border-width: 0px;" title="image" src="http://www.shazaml.com/wp-content/uploads/2010/03/image_thumb5.png" border="0" alt="image" width="318" height="240" /></a></p>
<p><a href="http://www.shazaml.com/wp-content/uploads/2010/03/image6.png"><img style="display: inline; border-width: 0px;" title="image" src="http://www.shazaml.com/wp-content/uploads/2010/03/image_thumb6.png" border="0" alt="image" width="318" height="240" /></a></p>
<p>The next two templates display 6 screens per page in either portrait or landscape orientation:</p>
<p><a href="http://www.shazaml.com/wp-content/uploads/2010/03/image7.png"><img style="display: inline; border-width: 0px;" title="image" src="http://www.shazaml.com/wp-content/uploads/2010/03/image_thumb7.png" border="0" alt="image" width="318" height="240" /></a> </p>
<p><a href="http://www.shazaml.com/wp-content/uploads/2010/03/image8.png"><img style="display: inline; border-width: 0px;" title="image" src="http://www.shazaml.com/wp-content/uploads/2010/03/image_thumb8.png" border="0" alt="image" width="318" height="240" /></a></p>
<p>The final template is for Panorama applications and allows for 5 portrait screens side by side with a slight overlap.  The template uses alternating red &amp; blue borders to show each screen&#8217;s full width.  The two grid spaces between red &amp; blue lines is the tease overlap for the next screen:</p>
<p><a href="http://www.shazaml.com/wp-content/uploads/2010/03/image9.png"><img style="display: inline; border-width: 0px;" title="image" src="http://www.shazaml.com/wp-content/uploads/2010/03/image_thumb9.png" border="0" alt="image" width="318" height="240" /></a></p>
<p>The templates are available for <a title="Windows Phone 7 UI Templates as a PowerPoint" href="http://www.shazaml.com/downloads/wp7_templates.ppt">download as a PowerPoint </a>file.</p>
<p><strong>Have you already started designing Winodws Phone 7 Series applications?  Do you find these templates useful?  What changes would you like to see in these templates?  Would you be willing to share some of your designs with others?</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.shazaml.com/archives/windows-phone-7-ui-templates/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Business Cards Observer</title>
		<link>http://www.shazaml.com/archives/business-cards-observer</link>
		<comments>http://www.shazaml.com/archives/business-cards-observer#comments</comments>
		<pubDate>Wed, 23 Sep 2009 17:31:57 +0000</pubDate>
		<dc:creator>Mark Tucker</dc:creator>
				<category><![CDATA[Design Inspiration]]></category>
		<category><![CDATA[Design]]></category>

		<guid isPermaLink="false">http://www.shazaml.com/?p=160</guid>
		<description><![CDATA[Design Inspiration for business cards.]]></description>
			<content:encoded><![CDATA[<p>Check out <a href="http://cardobserver.com/">CardObserver.com</a>.  How does your business card compare?</p>
<p>Here is one of many that I like:</p>
<p><a href="http://www.shazaml.com/wp-content/uploads/2009/09/abrakadabra2.jpg"><img class="alignnone size-medium wp-image-159" title="abrakadabra2" src="http://www.shazaml.com/wp-content/uploads/2009/09/abrakadabra2-300x187.jpg" alt="abrakadabra2" width="300" height="187" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.shazaml.com/archives/business-cards-observer/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
